feat:add some new future
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { useDisplay, useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
donutColors: {
|
||||
@@ -17,15 +17,20 @@ const props = defineProps({
|
||||
const vuetifyTheme = useTheme()
|
||||
const display = useDisplay()
|
||||
const cardRef = ref(null)
|
||||
const cardWidth = ref(0)
|
||||
const cardWidth = ref(300)
|
||||
|
||||
const updateCardWidth = () => {
|
||||
if (cardRef.value) {
|
||||
cardWidth.value = cardRef.value.offsetWidth
|
||||
const rect = cardRef.value.getBoundingClientRect()
|
||||
const newWidth = rect.width
|
||||
if (newWidth > 0 && Math.abs(newWidth - cardWidth.value) > 5) {
|
||||
cardWidth.value = newWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
updateCardWidth()
|
||||
window.addEventListener('resize', updateCardWidth)
|
||||
})
|
||||
@@ -47,48 +52,50 @@ const processColors = (colors) => {
|
||||
}
|
||||
|
||||
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)
|
||||
const width = cardWidth.value
|
||||
const breakpoints = {
|
||||
xs: display.xs.value,
|
||||
sm: display.sm.value,
|
||||
md: display.md.value
|
||||
}
|
||||
|
||||
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)
|
||||
let size = 120
|
||||
|
||||
if (breakpoints.xs) {
|
||||
size = Math.min(width * 0.35, 120)
|
||||
} else if (breakpoints.sm) {
|
||||
size = Math.min(width * 0.4, 150)
|
||||
} else if (width <= 400) {
|
||||
size = Math.min(width * 0.4, 160)
|
||||
} else if (width <= 600) {
|
||||
size = Math.min(width * 0.35, 200)
|
||||
} else {
|
||||
size = Math.min(width * 0.3, 240)
|
||||
}
|
||||
|
||||
size = Math.max(size, 100)
|
||||
|
||||
return { width: size, height: size }
|
||||
})
|
||||
|
||||
const textSizes = computed(() => {
|
||||
const width = cardWidth.value || 300
|
||||
const width = cardWidth.value
|
||||
|
||||
if (width < 250 || display.xs.value) {
|
||||
if (display.xs.value || width < 300) {
|
||||
return {
|
||||
title: 'text-body-2',
|
||||
subtitle: 'text-caption',
|
||||
mainNumber: 'text-h6',
|
||||
percentage: 'text-body-2'
|
||||
percentage: 'text-caption'
|
||||
}
|
||||
} else if (width < 350 || display.sm.value) {
|
||||
} else if (display.sm.value || width < 450) {
|
||||
return {
|
||||
title: 'text-body-1',
|
||||
subtitle: 'text-body-2',
|
||||
mainNumber: 'text-h5',
|
||||
percentage: 'text-body-2'
|
||||
}
|
||||
} else if (width < 450) {
|
||||
} else if (width < 600) {
|
||||
return {
|
||||
title: 'text-h6',
|
||||
subtitle: 'text-body-2',
|
||||
@@ -97,9 +104,9 @@ const textSizes = computed(() => {
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
title: display.md.value ? 'text-h5' : 'text-h4',
|
||||
title: 'text-h5',
|
||||
subtitle: 'text-body-1',
|
||||
mainNumber: display.lg.value ? 'text-h2' : 'text-h3',
|
||||
mainNumber: 'text-h3',
|
||||
percentage: 'text-body-1'
|
||||
}
|
||||
}
|
||||
@@ -108,12 +115,10 @@ const textSizes = computed(() => {
|
||||
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 width = cardWidth.value
|
||||
const chartSizeValue = chartSize.value.width
|
||||
|
||||
const defaultDonutColors = [currentTheme.success]
|
||||
const usedDonutColors = props.donutColors.length
|
||||
? processColors(props.donutColors)
|
||||
: defaultDonutColors
|
||||
@@ -121,63 +126,50 @@ const chartOptions = computed(() => {
|
||||
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 valueFontSize = chartSizeValue < 120 ? '0.9rem' :
|
||||
chartSizeValue < 160 ? '1.2rem' :
|
||||
chartSizeValue < 200 ? '1.4rem' : '1.6rem'
|
||||
|
||||
const labelFontSize = width < 250 ? '0.8rem' :
|
||||
width < 350 ? '0.9rem' :
|
||||
chartSizeValue < 160 ? '0.9rem' :
|
||||
chartSizeValue < 200 ? '1rem' : '1.1rem'
|
||||
const labelFontSize = chartSizeValue < 120 ? '0.7rem' :
|
||||
chartSizeValue < 160 ? '0.8rem' :
|
||||
chartSizeValue < 200 ? '0.9rem' : '1rem'
|
||||
|
||||
const donutSize = width < 300 ? '65%' :
|
||||
width < 400 ? '70%' :
|
||||
chartSizeValue < 180 ? '70%' :
|
||||
chartSizeValue < 220 ? '75%' : '80%'
|
||||
const donutSize = chartSizeValue < 130 ? '60%' :
|
||||
chartSizeValue < 180 ? '65%' : '70%'
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'donut',
|
||||
sparkline: {
|
||||
enabled: false
|
||||
},
|
||||
sparkline: { enabled: false },
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 800,
|
||||
dynamicAnimation: {
|
||||
enabled: true,
|
||||
speed: 350
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Progress', 'Remaining'],
|
||||
colors: [...usedDonutColors, backgroundCircleColor],
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
stroke: { width: 0 },
|
||||
dataLabels: { enabled: false },
|
||||
legend: { show: false },
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
theme: 'dark',
|
||||
theme: vuetifyTheme.current.value.dark ? 'dark' : 'light',
|
||||
style: {
|
||||
fontSize: width < 300 ? '12px' : '14px'
|
||||
fontSize: chartSizeValue < 140 ? '11px' : '13px'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
},
|
||||
padding: { top: 0, bottom: 0, right: 0, left: 0 }
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
filter: { type: 'none' }
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
@@ -195,14 +187,12 @@ const chartOptions = computed(() => {
|
||||
fontFamily: 'Public Sans',
|
||||
color: headingColor,
|
||||
fontWeight: 600,
|
||||
offsetY: chartSizeValue < 140 ? -2 : 0,
|
||||
offsetY: chartSizeValue < 130 ? -1 : 0,
|
||||
formatter(val) {
|
||||
return `${Math.round(val)}%`
|
||||
},
|
||||
},
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
name: { show: false },
|
||||
total: {
|
||||
show: true,
|
||||
showAlways: true,
|
||||
@@ -219,114 +209,12 @@ const chartOptions = computed(() => {
|
||||
},
|
||||
},
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
responsive: []
|
||||
}
|
||||
})
|
||||
|
||||
const cardBackgroundStyle = computed(() => {
|
||||
const defaultDonutColors = [
|
||||
vuetifyTheme.current.value.colors.success,
|
||||
]
|
||||
|
||||
const defaultDonutColors = [vuetifyTheme.current.value.colors.success]
|
||||
const colors = props.donutColors.length ? processColors(props.donutColors) : defaultDonutColors
|
||||
|
||||
const createGradientColor = (color, opacity = 0.08) => {
|
||||
@@ -343,33 +231,32 @@ const cardBackgroundStyle = computed(() => {
|
||||
}
|
||||
|
||||
const gradientColors = colors.map((color, index) =>
|
||||
createGradientColor(color, index === 0 ? 0.12 : 0.04)
|
||||
createGradientColor(color, index === 0 ? 0.1 : 0.03)
|
||||
)
|
||||
|
||||
return {
|
||||
background: `linear-gradient(135deg,
|
||||
${gradientColors[0]} 0%,
|
||||
${gradientColors[1] || gradientColors[0]} 50%,
|
||||
${gradientColors[2] || gradientColors[0]} 100%)`
|
||||
${gradientColors[1] || createGradientColor(colors[0], 0.05)} 50%,
|
||||
${gradientColors[2] || createGradientColor(colors[0], 0.02)} 100%)`
|
||||
}
|
||||
})
|
||||
|
||||
const layoutClasses = computed(() => {
|
||||
const width = cardWidth.value || 300
|
||||
const width = cardWidth.value
|
||||
|
||||
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'
|
||||
cardPadding: display.xs.value ? 'pa-3' :
|
||||
display.sm.value ? 'pa-4' :
|
||||
width < 400 ? 'pa-4' : 'pa-5',
|
||||
textSpacing: display.xs.value ? 'me-2' :
|
||||
display.sm.value ? 'me-3' :
|
||||
width < 400 ? 'me-3' : 'me-4',
|
||||
iconSize: display.xs.value ? 14 :
|
||||
display.sm.value ? 16 :
|
||||
width < 400 ? 16 : 18,
|
||||
itemSpacing: display.xs.value ? 'mb-2' :
|
||||
width < 400 ? 'mb-3' : 'mb-3'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -382,22 +269,23 @@ const layoutClasses = computed(() => {
|
||||
>
|
||||
<VCardText
|
||||
class="d-flex align-center justify-space-between"
|
||||
:class="layoutClasses.cardText"
|
||||
:class="layoutClasses.cardPadding"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-grow-1"
|
||||
:class="layoutClasses.textSection"
|
||||
class="d-flex flex-column flex-grow-1 flex-shrink-1"
|
||||
:class="layoutClasses.textSpacing"
|
||||
style="min-width: 0;"
|
||||
>
|
||||
<div :class="layoutClasses.spacing">
|
||||
<div :class="layoutClasses.itemSpacing">
|
||||
<h5
|
||||
class="text-no-wrap font-weight-medium"
|
||||
class="text-no-wrap font-weight-medium text-truncate"
|
||||
:class="textSizes.title"
|
||||
style="line-height: 1.2;"
|
||||
>
|
||||
Generated Leads
|
||||
</h5>
|
||||
<div
|
||||
class="text-medium-emphasis"
|
||||
class="text-medium-emphasis text-truncate"
|
||||
:class="textSizes.subtitle"
|
||||
style="line-height: 1.1;"
|
||||
>
|
||||
@@ -408,7 +296,7 @@ const layoutClasses = computed(() => {
|
||||
<div>
|
||||
<h3
|
||||
class="font-weight-bold"
|
||||
:class="[textSizes.mainNumber, layoutClasses.spacing]"
|
||||
:class="[textSizes.mainNumber, layoutClasses.itemSpacing]"
|
||||
style="line-height: 1.1;"
|
||||
>
|
||||
4,350
|
||||
@@ -418,10 +306,10 @@ const layoutClasses = computed(() => {
|
||||
icon="tabler-chevron-up"
|
||||
:color="(props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0]"
|
||||
:size="layoutClasses.iconSize"
|
||||
class="me-1"
|
||||
class="me-1 flex-shrink-0"
|
||||
/>
|
||||
<span
|
||||
class="font-weight-medium"
|
||||
class="font-weight-medium text-no-wrap"
|
||||
:class="textSizes.percentage"
|
||||
:style="{ color: (props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0] }"
|
||||
>
|
||||
@@ -432,8 +320,7 @@ const layoutClasses = computed(() => {
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex align-center justify-center"
|
||||
:class="layoutClasses.chartSection"
|
||||
class="d-flex align-center justify-center flex-shrink-0"
|
||||
>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
@@ -444,4 +331,4 @@ const layoutClasses = computed(() => {
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
</template>
|
||||
Reference in New Issue
Block a user