162 lines
3.0 KiB
Vue
162 lines
3.0 KiB
Vue
|
<script setup>
|
||
|
|
import { useTheme } from 'vuetify'
|
||
|
|
import { hexToRgb } from '@layouts/utils'
|
||
|
|
|
||
|
|
const vuetifyTheme = useTheme()
|
||
|
|
|
||
|
|
const series = [
|
||
|
|
{
|
||
|
|
name: 'Sales',
|
||
|
|
data: [
|
||
|
|
32,
|
||
|
|
27,
|
||
|
|
27,
|
||
|
|
30,
|
||
|
|
25,
|
||
|
|
25,
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Visits',
|
||
|
|
data: [
|
||
|
|
25,
|
||
|
|
35,
|
||
|
|
20,
|
||
|
|
20,
|
||
|
|
20,
|
||
|
|
20,
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const chartOptions = computed(() => {
|
||
|
|
const currentTheme = vuetifyTheme.current.value.colors
|
||
|
|
const variableTheme = vuetifyTheme.current.value.variables
|
||
|
|
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||
|
|
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
|
||
|
|
const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['medium-emphasis-opacity'] })`
|
||
|
|
|
||
|
|
return {
|
||
|
|
chart: {
|
||
|
|
type: 'radar',
|
||
|
|
toolbar: { show: false },
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radar: {
|
||
|
|
polygons: {
|
||
|
|
strokeColors: borderColor,
|
||
|
|
connectorColors: borderColor,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
show: false,
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
fontSize: '13px',
|
||
|
|
position: 'bottom',
|
||
|
|
labels: {
|
||
|
|
colors: legendColor,
|
||
|
|
useSeriesColors: false,
|
||
|
|
},
|
||
|
|
markers: {
|
||
|
|
height: 12,
|
||
|
|
width: 12,
|
||
|
|
offsetX: -8,
|
||
|
|
},
|
||
|
|
itemMargin: { horizontal: 10 },
|
||
|
|
onItemHover: { highlightDataSeries: false },
|
||
|
|
},
|
||
|
|
colors: [
|
||
|
|
currentTheme.primary,
|
||
|
|
currentTheme.info,
|
||
|
|
],
|
||
|
|
fill: {
|
||
|
|
opacity: [
|
||
|
|
1,
|
||
|
|
0.85,
|
||
|
|
],
|
||
|
|
},
|
||
|
|
markers: { size: 0 },
|
||
|
|
grid: {
|
||
|
|
show: false,
|
||
|
|
padding: {
|
||
|
|
top: 0,
|
||
|
|
bottom: -5,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: [
|
||
|
|
'Jan',
|
||
|
|
'Feb',
|
||
|
|
'Mar',
|
||
|
|
'Apr',
|
||
|
|
'May',
|
||
|
|
'Jun',
|
||
|
|
],
|
||
|
|
labels: {
|
||
|
|
show: true,
|
||
|
|
style: {
|
||
|
|
colors: [
|
||
|
|
labelColor,
|
||
|
|
labelColor,
|
||
|
|
labelColor,
|
||
|
|
labelColor,
|
||
|
|
labelColor,
|
||
|
|
labelColor,
|
||
|
|
],
|
||
|
|
fontSize: '13px',
|
||
|
|
fontFamily: 'Public Sans',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
show: false,
|
||
|
|
min: 0,
|
||
|
|
max: 40,
|
||
|
|
tickAmount: 4,
|
||
|
|
},
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 769,
|
||
|
|
options: { chart: { height: 372 } },
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const moreList = [
|
||
|
|
{
|
||
|
|
title: 'View More',
|
||
|
|
value: 'View More',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Delete',
|
||
|
|
value: 'Delete',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VCard>
|
||
|
|
<VCardItem class="pb-4">
|
||
|
|
<VCardTitle>Sales</VCardTitle>
|
||
|
|
<VCardSubtitle>Last 6 Months</VCardSubtitle>
|
||
|
|
|
||
|
|
<template #append>
|
||
|
|
<div class="mt-n4 me-n2">
|
||
|
|
<MoreBtn :menu-list="moreList" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</VCardItem>
|
||
|
|
|
||
|
|
<VCardText>
|
||
|
|
<VueApexCharts
|
||
|
|
:options="chartOptions"
|
||
|
|
:series="series"
|
||
|
|
height="290"
|
||
|
|
/>
|
||
|
|
</VCardText>
|
||
|
|
</VCard>
|
||
|
|
</template>
|