Initial commit
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-2">
|
||||
<VCardTitle>Statistics</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<IconBtn>
|
||||
<VIcon icon="tabler-dots-vertical" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between align-center mb-2">
|
||||
<h6 class="text-h6">
|
||||
Subscribers Gained
|
||||
</h6>
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
size="small"
|
||||
>
|
||||
+92k
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between align-center mb-1">
|
||||
<div class="text-base">
|
||||
1.2k new subscriber
|
||||
</div>
|
||||
|
||||
<div class="text-disabled text-sm">
|
||||
85%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VProgressLinear
|
||||
model-value="85"
|
||||
color="primary"
|
||||
height="8"
|
||||
rounded
|
||||
/>
|
||||
|
||||
<div class="d-flex justify-space-between align-center mb-2 mt-6">
|
||||
<h6 class="text-h6">
|
||||
Orders Received
|
||||
</h6>
|
||||
<VChip
|
||||
label
|
||||
size="small"
|
||||
color="success"
|
||||
>
|
||||
+38k
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between mb-1">
|
||||
<div class="text-base">
|
||||
2.4k new orders
|
||||
</div>
|
||||
|
||||
<div class="text-disabled text-sm">
|
||||
65%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VProgressLinear
|
||||
model-value="65"
|
||||
color="info"
|
||||
height="8"
|
||||
rounded
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
400,
|
||||
200,
|
||||
650,
|
||||
500,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
},
|
||||
grid: { show: false },
|
||||
colors: [currentTheme.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.8,
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.1,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: { show: false },
|
||||
labels: { show: false },
|
||||
stroke: { width: 0 },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
stroke: { width: 0 },
|
||||
show: false,
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1387,
|
||||
options: { chart: { height: 80 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: { chart: { height: 120 } },
|
||||
},
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h5 class="text-h5 mb-3">
|
||||
Average Daily Sales
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Total Sales This Month
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
$28,450
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="122"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
30,
|
||||
40,
|
||||
50,
|
||||
60,
|
||||
70,
|
||||
80,
|
||||
90,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '100%',
|
||||
columnWidth: '25%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
colors: [`rgba(${ hexToRgb(currentTheme.warning) }, 1)`],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -30,
|
||||
left: -18,
|
||||
bottom: -13,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
tooltip: { enabled: false },
|
||||
legend: { show: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'01',
|
||||
'02',
|
||||
'03',
|
||||
'04',
|
||||
'05',
|
||||
'06',
|
||||
'07',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public sans',
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: { plotOptions: { bar: { borderRadius: 4 } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '25%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '25%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 836,
|
||||
options: { plotOptions: { bar: { columnWidth: '30%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 738,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '25%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 500,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '24%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 450,
|
||||
options: { plotOptions: { bar: { borderRadius: 6 } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<h4 class="text-h4">
|
||||
2.84k
|
||||
</h4>
|
||||
<div class="text-subtitle-2">
|
||||
Avg Daily Traffic
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
size="small"
|
||||
>
|
||||
<span class="font-weight-medium">+15%</span>
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="145"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const series = [78]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: true },
|
||||
parentHeightOffset: 0,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-warning),1)'],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: { size: '65%' },
|
||||
track: {
|
||||
strokeWidth: '45%',
|
||||
background: `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`,
|
||||
},
|
||||
dataLabels: {
|
||||
name: { show: false },
|
||||
value: {
|
||||
fontSize: '24px',
|
||||
color: `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['high-emphasis-opacity'] })`,
|
||||
fontWeight: 600,
|
||||
offsetY: -5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: { bottom: 5 },
|
||||
},
|
||||
stroke: { lineCap: 'round' },
|
||||
labels: ['Progress'],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1442,
|
||||
options: {
|
||||
chart: { height: 140 },
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: { value: { fontSize: '24px' } },
|
||||
hollow: { size: '60%' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1370,
|
||||
options: { chart: { height: 120 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1280,
|
||||
options: {
|
||||
chart: { height: 200 },
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: { value: { fontSize: '18px' } },
|
||||
hollow: { size: '70%' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
chart: { height: 250 },
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: { size: '70%' },
|
||||
dataLabels: { value: { fontSize: '24px' } },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>
|
||||
82.5K
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
Expenses
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
type="radialBar"
|
||||
:height="135"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-center clamp-text text-disabled mt-3">
|
||||
$21k Expenses more than last month
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [
|
||||
45,
|
||||
58,
|
||||
30,
|
||||
50,
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const labelSuccessColor = `rgba(${ hexToRgb(currentTheme.success) },0.2)`
|
||||
const headingColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['high-emphasis-opacity'] })`
|
||||
|
||||
const chartColors = {
|
||||
donut: {
|
||||
series1: currentTheme.success,
|
||||
series2: '#28c76fb3',
|
||||
series3: '#28c76f80',
|
||||
series4: labelSuccessColor,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'donut',
|
||||
},
|
||||
labels: [
|
||||
'Electronic',
|
||||
'Sports',
|
||||
'Decor',
|
||||
'Fashion',
|
||||
],
|
||||
colors: [
|
||||
chartColors.donut.series1,
|
||||
chartColors.donut.series2,
|
||||
chartColors.donut.series3,
|
||||
chartColors.donut.series4,
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { theme: false },
|
||||
grid: {
|
||||
padding: {
|
||||
top: 15,
|
||||
right: -20,
|
||||
left: -20,
|
||||
},
|
||||
},
|
||||
states: { hover: { filter: { type: 'none' } } },
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '1.375rem',
|
||||
fontFamily: 'Public Sans',
|
||||
color: headingColor,
|
||||
fontWeight: 600,
|
||||
offsetY: -15,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
name: {
|
||||
offsetY: 20,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
showAlways: true,
|
||||
color: currentTheme.success,
|
||||
fontSize: '.8125rem',
|
||||
label: 'Total',
|
||||
fontFamily: 'Public Sans',
|
||||
formatter() {
|
||||
return '184'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible">
|
||||
<VCardText class="d-flex justify-space-between">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-auto">
|
||||
<h5 class="text-h5 text-no-wrap">
|
||||
Generated Leads
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Monthly Report
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-h3">
|
||||
4,350
|
||||
</h3>
|
||||
<div class="d-flex gap-x-1 align-center">
|
||||
<VIcon
|
||||
icon="tabler-chevron-up"
|
||||
size="20"
|
||||
color="success"
|
||||
/>
|
||||
<div class="text-base text-success">
|
||||
15.8%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="147"
|
||||
:width="130"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
200,
|
||||
200,
|
||||
500,
|
||||
500,
|
||||
300,
|
||||
300,
|
||||
100,
|
||||
100,
|
||||
450,
|
||||
450,
|
||||
650,
|
||||
650,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
height: 90,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
markers: { strokeColor: 'transparent' },
|
||||
colors: [currentTheme.error],
|
||||
stroke: { width: 3 },
|
||||
grid: { padding: { bottom: -10 } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: { chart: { height: 110 } },
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: { chart: { height: 90 } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>
|
||||
Impression
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
Expenses
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="68"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
|
||||
<h4 class="text-h4 text-center">
|
||||
26.1k
|
||||
</h4>
|
||||
<span class="text-sm text-error">
|
||||
-24.5%
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,186 @@
|
||||
<script setup>
|
||||
const series = [{
|
||||
name: '2020',
|
||||
data: [
|
||||
60,
|
||||
50,
|
||||
20,
|
||||
45,
|
||||
50,
|
||||
30,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 90,
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '100%',
|
||||
columnWidth: '30%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
colors: {
|
||||
backgroundBarColors: [
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
'rgba(var(--v-track-bg))',
|
||||
],
|
||||
backgroundBarRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary),1)'],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -30,
|
||||
left: -16,
|
||||
bottom: 0,
|
||||
right: -6,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
legend: { show: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
'S',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1368,
|
||||
options: { plotOptions: { bar: { columnWidth: '48%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1264,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '30%',
|
||||
colors: { backgroundBarRadius: 6 },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 883,
|
||||
options: { plotOptions: { bar: { columnWidth: '20%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: { plotOptions: { bar: { columnWidth: '25%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
colors: { backgroundBarRadius: 9 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 479,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { borderRadius: 4 },
|
||||
colors: { backgroundBarRadius: 9 },
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
right: -15,
|
||||
left: -15,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: { plotOptions: { bar: { borderRadius: 3 } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>Orders</VCardTitle>
|
||||
<VCardSubtitle>Last Week</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="70"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
|
||||
<h4 class="text-h4 text-center">
|
||||
124k
|
||||
</h4>
|
||||
<div class="text-sm text-success">
|
||||
+12.6%
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
25,
|
||||
40,
|
||||
55,
|
||||
70,
|
||||
85,
|
||||
70,
|
||||
55,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const labelSuccessColor = `rgba(${ hexToRgb(currentTheme.success) },0.2)`
|
||||
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
height: 162,
|
||||
type: 'bar',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '80%',
|
||||
columnWidth: '30%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 6,
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -12,
|
||||
left: -10,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
labelSuccessColor,
|
||||
labelSuccessColor,
|
||||
labelSuccessColor,
|
||||
labelSuccessColor,
|
||||
currentTheme.success,
|
||||
labelSuccessColor,
|
||||
labelSuccessColor,
|
||||
],
|
||||
dataLabels: { enabled: false },
|
||||
legend: { show: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
'S',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
states: { hover: { filter: { type: 'none' } } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1640,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1471,
|
||||
options: { plotOptions: { bar: { columnWidth: '50%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1350,
|
||||
options: { plotOptions: { bar: { columnWidth: '57%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1032,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 855,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 440,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 381,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex justify-space-between">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-auto">
|
||||
<h5 class="text-h5 text-no-wrap mb-2">
|
||||
Revenue Growth
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Weekly Report
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="text-h3 mb-2">
|
||||
$4,673
|
||||
</h5>
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
size="small"
|
||||
>
|
||||
+15.2%
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="162"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [{
|
||||
name: 'Subscribers',
|
||||
data: [
|
||||
200,
|
||||
55,
|
||||
400,
|
||||
250,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
},
|
||||
grid: { show: false },
|
||||
colors: [currentTheme.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.07,
|
||||
stops: [
|
||||
0,
|
||||
80,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: { show: false },
|
||||
labels: { show: false },
|
||||
stroke: { width: 0 },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
stroke: { width: 0 },
|
||||
show: false,
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>
|
||||
Sales
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
Last Year
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="76"
|
||||
/>
|
||||
|
||||
<VCardText class="pt-1">
|
||||
<div class="d-flex align-center justify-space-between gap-x-2">
|
||||
<h4 class="text-h4 text-center">
|
||||
175k
|
||||
</h4>
|
||||
<span class="text-sm text-error">
|
||||
-16.2%
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="text-body-1">
|
||||
Sales Overview
|
||||
</div>
|
||||
<div class="text-success font-weight-medium">
|
||||
+18.2%
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="text-h4">
|
||||
$42.5k
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VRow no-gutters>
|
||||
<VCol cols="5">
|
||||
<div class="d-flex align-center mb-3">
|
||||
<VAvatar
|
||||
color="info"
|
||||
variant="tonal"
|
||||
:size="24"
|
||||
rounded
|
||||
class="me-2"
|
||||
>
|
||||
<VIcon
|
||||
size="18"
|
||||
icon="tabler-shopping-cart"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<span>Order</span>
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
62.2%
|
||||
</h5>
|
||||
<div class="text-body-2 text-disabled">
|
||||
6,440
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="2">
|
||||
<div class="d-flex flex-column align-center justify-center h-100">
|
||||
<VDivider
|
||||
vertical
|
||||
class="mx-auto"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
size="24"
|
||||
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
|
||||
class="my-2"
|
||||
>
|
||||
<div class="text-overline text-disabled">
|
||||
VS
|
||||
</div>
|
||||
</VAvatar>
|
||||
|
||||
<VDivider
|
||||
vertical
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="5"
|
||||
class="text-end"
|
||||
>
|
||||
<div class="d-flex align-center justify-end mb-3">
|
||||
<span class="me-2">Visits</span>
|
||||
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
:size="24"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
size="18"
|
||||
icon="tabler-link"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
25.5%
|
||||
</h5>
|
||||
<div class="text-body-2 text-disabled">
|
||||
12,749
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div class="mt-6">
|
||||
<VProgressLinear
|
||||
model-value="72"
|
||||
color="#00CFE8"
|
||||
height="10"
|
||||
bg-color="primary"
|
||||
:rounded-bar="false"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'PRODUCT A',
|
||||
data: [
|
||||
4,
|
||||
3,
|
||||
6,
|
||||
4,
|
||||
3,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'PRODUCT B',
|
||||
data: [
|
||||
-3,
|
||||
-4,
|
||||
-3,
|
||||
-2,
|
||||
-3,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 90,
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'PRODUCT A',
|
||||
data: [
|
||||
4,
|
||||
3,
|
||||
6,
|
||||
4,
|
||||
3,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'PRODUCT B',
|
||||
data: [
|
||||
-3,
|
||||
-4,
|
||||
-3,
|
||||
-2,
|
||||
-3,
|
||||
],
|
||||
},
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '40%',
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
tooltip: { enabled: false },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 4,
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-success),1)',
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -50,
|
||||
right: -10,
|
||||
left: -8,
|
||||
bottom: -30,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Mon',
|
||||
'Tue',
|
||||
'Wed',
|
||||
'Thu',
|
||||
'Fri',
|
||||
],
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1280,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
chart: { height: 110 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '25%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 782,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '20%',
|
||||
},
|
||||
},
|
||||
chart: { height: 160 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 426,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 385,
|
||||
options: { plotOptions: { bar: { borderRadius: 6 } } },
|
||||
},
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>
|
||||
Sessions
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
This Month
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="68"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
|
||||
<h4 class="text-h4">
|
||||
45.1k
|
||||
</h4>
|
||||
<div class="text-sm text-success">
|
||||
+12.6%
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
const series = [{
|
||||
name: 'Subscribers',
|
||||
data: [
|
||||
200,
|
||||
55,
|
||||
400,
|
||||
250,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
sparkline: { enabled: true },
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
},
|
||||
grid: { show: false },
|
||||
colors: [currentTheme.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.07,
|
||||
stops: [
|
||||
0,
|
||||
80,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: { show: false },
|
||||
labels: { show: false },
|
||||
stroke: { width: 0 },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
stroke: { width: 0 },
|
||||
show: false,
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pb-2">
|
||||
<h6 class="text-h6">
|
||||
Sales
|
||||
</h6>
|
||||
<span class="text-body-2">Last Year</span>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="90"
|
||||
/>
|
||||
|
||||
<VCardText class="pt-0">
|
||||
<div class="d-flex align-center justify-space-between mt-3">
|
||||
<h6 class="text-h6 text-center font-weight-medium">
|
||||
175k
|
||||
</h6>
|
||||
<span class="text-sm text-error">
|
||||
-16.2%
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
0,
|
||||
25,
|
||||
10,
|
||||
40,
|
||||
25,
|
||||
55,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: {
|
||||
height: 90,
|
||||
type: 'line',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
borderColor: `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`,
|
||||
strokeDashArray: 6,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
top: -18,
|
||||
left: -4,
|
||||
right: 7,
|
||||
bottom: -10,
|
||||
},
|
||||
},
|
||||
colors: [currentTheme.info],
|
||||
stroke: { width: 2 },
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
shared: false,
|
||||
intersect: true,
|
||||
x: { show: false },
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
markers: {
|
||||
size: 3.5,
|
||||
fillColor: currentTheme.info,
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 3.2,
|
||||
discrete: [{
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 5,
|
||||
fillColor: currentTheme.surface,
|
||||
strokeColor: currentTheme.info,
|
||||
size: 5,
|
||||
shape: 'circle',
|
||||
}],
|
||||
hover: { size: 5.5 },
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 960,
|
||||
options: { chart: { height: 110 } },
|
||||
}],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>
|
||||
Profit
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
Last Month
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="68"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
|
||||
<h4 class="text-h4 text-center font-weight-medium">
|
||||
624k
|
||||
</h4>
|
||||
<span class="text-sm text-success">
|
||||
+8.24%
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '230k',
|
||||
icon: 'tabler-chart-pie-2',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '8.549k',
|
||||
icon: 'tabler-users',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Products',
|
||||
stats: '1.423k',
|
||||
icon: 'tabler-shopping-cart',
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
stats: '$9745',
|
||||
icon: 'tabler-currency-dollar',
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Statistics">
|
||||
<template #append>
|
||||
<span class="text-disabled text-subtitle-2">Updated 1 month ago</span>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="d-flex gap-x-4 align-center">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
variant="tonal"
|
||||
size="40"
|
||||
rounded
|
||||
>
|
||||
<VIcon :icon="item.icon" />
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<h5 class="text-h5">
|
||||
{{ item.stats }}
|
||||
</h5>
|
||||
<div class="text-body-2">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
const logisticData = ref([
|
||||
{
|
||||
icon: 'tabler-truck',
|
||||
color: 'primary',
|
||||
title: 'On route vehicles',
|
||||
value: 42,
|
||||
change: 18.2,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-alert-triangle',
|
||||
color: 'warning',
|
||||
title: 'Vehicles with errors',
|
||||
value: 8,
|
||||
change: -8.7,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-git-fork',
|
||||
color: 'error',
|
||||
title: 'Deviated from route',
|
||||
value: 27,
|
||||
change: 4.3,
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-clock',
|
||||
color: 'info',
|
||||
title: 'Late vehicles',
|
||||
value: 13,
|
||||
change: -2.5,
|
||||
isHover: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(data, index) in logisticData"
|
||||
:key="index"
|
||||
cols="12"
|
||||
md="3"
|
||||
sm="6"
|
||||
>
|
||||
<div>
|
||||
<VCard
|
||||
class="logistics-card-statistics cursor-pointer"
|
||||
:style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.38)`"
|
||||
@mouseenter="data.isHover = true"
|
||||
@mouseleave="data.isHover = false"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-4 mb-1">
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
:color="data.color"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<h4 class="text-h4">
|
||||
{{ data.value }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="text-body-1 mb-1">
|
||||
{{ data.title }}
|
||||
</div>
|
||||
<div class="d-flex gap-x-2 align-center">
|
||||
<h6 class="text-h6">
|
||||
{{ (data.change > 0) ? '+' : '' }} {{ data.change }}%
|
||||
</h6>
|
||||
<div class="text-disabled">
|
||||
than last week
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@core-scss/base/mixins" as mixins;
|
||||
|
||||
.logistics-card-statistics {
|
||||
border-block-end-style: solid;
|
||||
border-block-end-width: 2px;
|
||||
|
||||
&:hover {
|
||||
border-block-end-width: 3px;
|
||||
margin-block-end: -1px;
|
||||
|
||||
@include mixins.elevation(8);
|
||||
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.skin--bordered {
|
||||
.logistics-card-statistics {
|
||||
border-block-end-width: 2px;
|
||||
|
||||
&:hover {
|
||||
border-block-end-width: 3px;
|
||||
margin-block-end: -2px;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user