448 lines
11 KiB
Vue
448 lines
11 KiB
Vue
<script setup>
|
|
import { useDisplay, useTheme } from 'vuetify'
|
|
import { hexToRgb } from '@layouts/utils'
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
donutColors: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
default: 75
|
|
}
|
|
})
|
|
|
|
const vuetifyTheme = useTheme()
|
|
const display = useDisplay()
|
|
const cardRef = ref(null)
|
|
const cardWidth = ref(0)
|
|
|
|
const updateCardWidth = () => {
|
|
if (cardRef.value) {
|
|
cardWidth.value = cardRef.value.offsetWidth
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateCardWidth()
|
|
window.addEventListener('resize', updateCardWidth)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateCardWidth)
|
|
})
|
|
|
|
const chartSeries = computed(() => [props.progress, 100 - props.progress])
|
|
|
|
const processColors = (colors) => {
|
|
const currentTheme = vuetifyTheme.current.value.colors
|
|
return colors.map(color => {
|
|
if (typeof color === 'string' && currentTheme[color]) {
|
|
return currentTheme[color]
|
|
}
|
|
return color
|
|
})
|
|
}
|
|
|
|
const chartSize = computed(() => {
|
|
const width = cardWidth.value || 300
|
|
|
|
let size
|
|
if (width < 250) {
|
|
size = Math.max(120, width * 0.5)
|
|
} else if (width < 350) {
|
|
size = Math.max(150, width * 0.5)
|
|
} else if (width < 450) {
|
|
size = Math.max(180, width * 0.45)
|
|
} else if (width < 600) {
|
|
size = Math.max(200, width * 0.4)
|
|
} else if (width < 800) {
|
|
size = Math.max(240, width * 0.35)
|
|
} else {
|
|
size = Math.min(300, width * 0.32)
|
|
}
|
|
|
|
if (display.xs.value) size = Math.max(size, 120)
|
|
if (display.sm.value) size = Math.max(size, 160)
|
|
if (display.md.value) size = Math.max(size, 200)
|
|
|
|
return { width: size, height: size }
|
|
})
|
|
|
|
const textSizes = computed(() => {
|
|
const width = cardWidth.value || 300
|
|
|
|
if (width < 250 || display.xs.value) {
|
|
return {
|
|
title: 'text-body-2',
|
|
subtitle: 'text-caption',
|
|
mainNumber: 'text-h6',
|
|
percentage: 'text-body-2'
|
|
}
|
|
} else if (width < 350 || display.sm.value) {
|
|
return {
|
|
title: 'text-body-1',
|
|
subtitle: 'text-body-2',
|
|
mainNumber: 'text-h5',
|
|
percentage: 'text-body-2'
|
|
}
|
|
} else if (width < 450) {
|
|
return {
|
|
title: 'text-h6',
|
|
subtitle: 'text-body-2',
|
|
mainNumber: 'text-h4',
|
|
percentage: 'text-body-1'
|
|
}
|
|
} else {
|
|
return {
|
|
title: display.md.value ? 'text-h5' : 'text-h4',
|
|
subtitle: 'text-body-1',
|
|
mainNumber: display.lg.value ? 'text-h2' : 'text-h3',
|
|
percentage: 'text-body-1'
|
|
}
|
|
}
|
|
})
|
|
|
|
const chartOptions = computed(() => {
|
|
const currentTheme = vuetifyTheme.current.value.colors
|
|
const variableTheme = vuetifyTheme.current.value.variables
|
|
const width = cardWidth.value || 300
|
|
|
|
const defaultDonutColors = [
|
|
currentTheme.success,
|
|
]
|
|
|
|
const usedDonutColors = props.donutColors.length
|
|
? processColors(props.donutColors)
|
|
: defaultDonutColors
|
|
|
|
const headingColor = `rgba(${hexToRgb(currentTheme['on-background'])},${variableTheme['high-emphasis-opacity']})`
|
|
const backgroundCircleColor = `rgba(${hexToRgb(usedDonutColors[0])}, 0.15)`
|
|
|
|
const chartSizeValue = chartSize.value.width
|
|
const valueFontSize = width < 250 ? '1.1rem' :
|
|
width < 350 ? '1.3rem' :
|
|
width < 450 ? '1.5rem' :
|
|
chartSizeValue < 160 ? '1.3rem' :
|
|
chartSizeValue < 200 ? '1.6rem' :
|
|
chartSizeValue < 250 ? '1.8rem' : '2rem'
|
|
|
|
const labelFontSize = width < 250 ? '0.8rem' :
|
|
width < 350 ? '0.9rem' :
|
|
chartSizeValue < 160 ? '0.9rem' :
|
|
chartSizeValue < 200 ? '1rem' : '1.1rem'
|
|
|
|
const donutSize = width < 300 ? '65%' :
|
|
width < 400 ? '70%' :
|
|
chartSizeValue < 180 ? '70%' :
|
|
chartSizeValue < 220 ? '75%' : '80%'
|
|
|
|
return {
|
|
chart: {
|
|
parentHeightOffset: 0,
|
|
type: 'donut',
|
|
sparkline: {
|
|
enabled: false
|
|
},
|
|
},
|
|
labels: ['Progress', 'Remaining'],
|
|
colors: [...usedDonutColors, backgroundCircleColor],
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
theme: 'dark',
|
|
style: {
|
|
fontSize: width < 300 ? '12px' : '14px'
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: 'none'
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
startAngle: -90,
|
|
endAngle: 270,
|
|
donut: {
|
|
size: donutSize,
|
|
background: 'transparent',
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
show: true,
|
|
fontSize: valueFontSize,
|
|
fontFamily: 'Public Sans',
|
|
color: headingColor,
|
|
fontWeight: 600,
|
|
offsetY: chartSizeValue < 140 ? -2 : 0,
|
|
formatter(val) {
|
|
return `${Math.round(val)}%`
|
|
},
|
|
},
|
|
name: {
|
|
show: false
|
|
},
|
|
total: {
|
|
show: true,
|
|
showAlways: true,
|
|
color: usedDonutColors[0],
|
|
fontSize: labelFontSize,
|
|
label: 'Progress',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 500,
|
|
formatter() {
|
|
return `${props.progress}%`
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 280,
|
|
options: {
|
|
chart: {
|
|
width: 120,
|
|
height: 120
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '65%',
|
|
labels: {
|
|
value: {
|
|
fontSize: '1.1rem',
|
|
offsetY: -2
|
|
},
|
|
total: {
|
|
fontSize: '0.8rem'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 400,
|
|
options: {
|
|
chart: {
|
|
width: 150,
|
|
height: 150
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '70%',
|
|
labels: {
|
|
value: {
|
|
fontSize: '1.3rem',
|
|
offsetY: -1
|
|
},
|
|
total: {
|
|
fontSize: '0.9rem'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
width: 180,
|
|
height: 180
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '75%',
|
|
labels: {
|
|
value: {
|
|
fontSize: '1.5rem'
|
|
},
|
|
total: {
|
|
fontSize: '1rem'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1024,
|
|
options: {
|
|
chart: {
|
|
width: 240,
|
|
height: 240
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '80%',
|
|
labels: {
|
|
value: {
|
|
fontSize: '1.8rem'
|
|
},
|
|
total: {
|
|
fontSize: '1.1rem'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
const cardBackgroundStyle = computed(() => {
|
|
const defaultDonutColors = [
|
|
vuetifyTheme.current.value.colors.success,
|
|
]
|
|
|
|
const colors = props.donutColors.length ? processColors(props.donutColors) : defaultDonutColors
|
|
|
|
const createGradientColor = (color, opacity = 0.08) => {
|
|
if (color.includes('rgba')) {
|
|
return color.replace(/[\d\.]+\)$/g, `${opacity})`)
|
|
}
|
|
if (color.startsWith('#')) {
|
|
return `rgba(${hexToRgb(color)}, ${opacity})`
|
|
}
|
|
if (color.includes('rgb')) {
|
|
return color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)
|
|
}
|
|
return `rgba(${hexToRgb(color)}, ${opacity})`
|
|
}
|
|
|
|
const gradientColors = colors.map((color, index) =>
|
|
createGradientColor(color, index === 0 ? 0.12 : 0.04)
|
|
)
|
|
|
|
return {
|
|
background: `linear-gradient(135deg,
|
|
${gradientColors[0]} 0%,
|
|
${gradientColors[1] || gradientColors[0]} 50%,
|
|
${gradientColors[2] || gradientColors[0]} 100%)`
|
|
}
|
|
})
|
|
|
|
const layoutClasses = computed(() => {
|
|
const width = cardWidth.value || 300
|
|
|
|
return {
|
|
cardText: width < 250 ? 'pa-2' :
|
|
width < 350 ? 'pa-3' :
|
|
width < 500 ? 'pa-4' : 'pa-5',
|
|
textSection: width < 250 ? 'me-2' :
|
|
width < 350 ? 'me-3' :
|
|
width < 500 ? 'me-4' : 'me-5',
|
|
chartSection: 'flex-shrink-0',
|
|
iconSize: width < 250 ? 12 :
|
|
width < 350 ? 14 :
|
|
width < 500 ? 16 : 18,
|
|
spacing: width < 300 ? 'mb-2' :
|
|
width < 450 ? 'mb-3' : 'mb-4'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VCard
|
|
ref="cardRef"
|
|
class="overflow-visible"
|
|
:style="cardBackgroundStyle"
|
|
>
|
|
<VCardText
|
|
class="d-flex align-center justify-space-between"
|
|
:class="layoutClasses.cardText"
|
|
>
|
|
<div
|
|
class="d-flex flex-column flex-grow-1"
|
|
:class="layoutClasses.textSection"
|
|
>
|
|
<div :class="layoutClasses.spacing">
|
|
<h5
|
|
class="text-no-wrap font-weight-medium"
|
|
:class="textSizes.title"
|
|
style="line-height: 1.2;"
|
|
>
|
|
Generated Leads
|
|
</h5>
|
|
<div
|
|
class="text-medium-emphasis"
|
|
:class="textSizes.subtitle"
|
|
style="line-height: 1.1;"
|
|
>
|
|
Monthly Report
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3
|
|
class="font-weight-bold"
|
|
:class="[textSizes.mainNumber, layoutClasses.spacing]"
|
|
style="line-height: 1.1;"
|
|
>
|
|
4,350
|
|
</h3>
|
|
<div class="d-flex align-center">
|
|
<VIcon
|
|
icon="tabler-chevron-up"
|
|
:color="(props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0]"
|
|
:size="layoutClasses.iconSize"
|
|
class="me-1"
|
|
/>
|
|
<span
|
|
class="font-weight-medium"
|
|
:class="textSizes.percentage"
|
|
:style="{ color: (props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0] }"
|
|
>
|
|
15.8%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="d-flex align-center justify-center"
|
|
:class="layoutClasses.chartSection"
|
|
>
|
|
<VueApexCharts
|
|
:options="chartOptions"
|
|
:series="chartSeries"
|
|
:height="chartSize.height"
|
|
:width="chartSize.width"
|
|
/>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|