first commit
This commit is contained in:
Inshal
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Activity Timeline">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="start"
|
||||
density="compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
12 Invoices have been paid
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
12 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Invoices have been paid to the company.
|
||||
</p>
|
||||
|
||||
<div class="d-inline-flex align-center timeline-chip mb-4">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-3"
|
||||
alt="img"
|
||||
>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
invoice.pdf
|
||||
</h6>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="success"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Client Meeting
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
45 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Project meeting with john @10:15am
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center mb-2">
|
||||
<VAvatar
|
||||
size="32"
|
||||
:image="avatar1"
|
||||
class="me-3"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
Lester McCarthy (Client)
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
CEO of ThemeSelection
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="info"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Create a new project for client
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
2 Day Ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 app-timeline-text mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar1"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar8"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar6"
|
||||
/>
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="40"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,230 @@
|
||||
<script setup>
|
||||
import {
|
||||
useDisplay,
|
||||
useTheme,
|
||||
} from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const { thresholds } = useDisplay()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -25,
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '35%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
xaxis: { lines: { show: false } },
|
||||
borderColor,
|
||||
strokeDashArray: 10,
|
||||
padding: {
|
||||
left: -15,
|
||||
right: -5,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
currentTheme.value.warning,
|
||||
],
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.lg,
|
||||
options: { plotOptions: { bar: { columnWidth: '40%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.md,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '55%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: thresholds.value.sm,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Product A',
|
||||
data: [
|
||||
16000,
|
||||
12000,
|
||||
16000,
|
||||
18000,
|
||||
15000,
|
||||
35000,
|
||||
16000,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Product B',
|
||||
data: [
|
||||
10000,
|
||||
12000,
|
||||
10000,
|
||||
0,
|
||||
10000,
|
||||
10000,
|
||||
10000,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Product C',
|
||||
data: [
|
||||
0,
|
||||
15000,
|
||||
0,
|
||||
0,
|
||||
12000,
|
||||
0,
|
||||
10000,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const analytics = [
|
||||
{
|
||||
title: 'Revenue',
|
||||
amount: '$845k',
|
||||
percentage: '82%',
|
||||
profit: true,
|
||||
},
|
||||
{
|
||||
title: 'Transactions',
|
||||
amount: '$12.5k',
|
||||
percentage: '52%',
|
||||
profit: false,
|
||||
},
|
||||
{
|
||||
title: 'Total Profit',
|
||||
amount: '$27.6k',
|
||||
percentage: '42%',
|
||||
profit: true,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Analytics</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="210"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in analytics"
|
||||
:key="item.title"
|
||||
class="d-flex align-center"
|
||||
:class="index > 0 ? 'mt-3' : ''"
|
||||
>
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<div class="text-body-1 me-4 mb-0">
|
||||
{{ item.amount }}
|
||||
</div>
|
||||
<h6 class="text-h6 me-4">
|
||||
{{ item.percentage }}
|
||||
</h6>
|
||||
<VIcon
|
||||
:color="item.profit ? 'success' : 'error'"
|
||||
:icon="item.profit ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
|
||||
size="24"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
const chartColors = {
|
||||
donut: {
|
||||
series1: '#56ca00',
|
||||
series2: '#56ca00cc',
|
||||
series3: '#56ca0099',
|
||||
series4: '#56ca0066',
|
||||
},
|
||||
}
|
||||
|
||||
const headingColor = 'rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))'
|
||||
const labelColor = 'rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity))'
|
||||
|
||||
const deliveryExceptionsChartSeries = [
|
||||
13,
|
||||
25,
|
||||
22,
|
||||
40,
|
||||
]
|
||||
|
||||
const deliveryExceptionsChartConfig = {
|
||||
labels: [
|
||||
'Incorrect address',
|
||||
'Weather conditions',
|
||||
'Federal Holidays',
|
||||
'Damage during transit',
|
||||
],
|
||||
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: true,
|
||||
position: 'bottom',
|
||||
offsetY: 10,
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 15,
|
||||
vertical: 5,
|
||||
},
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
labels: {
|
||||
colors: headingColor,
|
||||
useSeriesColors: false,
|
||||
},
|
||||
},
|
||||
tooltip: { theme: false },
|
||||
grid: { padding: { top: 15 } },
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '26px',
|
||||
color: headingColor,
|
||||
fontWeight: 500,
|
||||
offsetY: -15,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
name: { offsetY: 30 },
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '1rem',
|
||||
label: 'AVG. Exceptions',
|
||||
color: labelColor,
|
||||
formatter() {
|
||||
return '30%'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 420,
|
||||
options: { chart: { height: 400 } },
|
||||
}],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Delivery exceptions">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
height="400"
|
||||
:options="deliveryExceptionsChartConfig"
|
||||
:series="deliveryExceptionsChartSeries"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
plotOptions: {
|
||||
radar: {
|
||||
size: 110,
|
||||
polygons: {
|
||||
strokeColors: borderColor,
|
||||
connectorColors: borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
labels: { colors: secondaryTextColor },
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.9,
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
markers: { size: 0 },
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: [
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: { show: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [
|
||||
70,
|
||||
90,
|
||||
90,
|
||||
90,
|
||||
80,
|
||||
90,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Net Worth',
|
||||
data: [
|
||||
120,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Performance</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="radar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="295"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,208 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
yaxis: { lines: { show: false } },
|
||||
xaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: 8,
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
radius: 15,
|
||||
width: 10,
|
||||
height: 10,
|
||||
},
|
||||
labels: { colors: secondaryTextColor },
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '45%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
crosshairs: { opacity: 0 },
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1080,
|
||||
options: { plotOptions: { bar: { borderRadius: 4 } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '55%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 460,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 400,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
95,
|
||||
177,
|
||||
284,
|
||||
256,
|
||||
105,
|
||||
63,
|
||||
168,
|
||||
218,
|
||||
72,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-145,
|
||||
-80,
|
||||
-60,
|
||||
-180,
|
||||
-100,
|
||||
-60,
|
||||
-85,
|
||||
-75,
|
||||
-100,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Revenue Report</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="240"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,162 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.7)',
|
||||
'rgba(var(--v-theme-primary), 0.5)',
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
labels: [
|
||||
'Apparel',
|
||||
'Electronics',
|
||||
'FMCG',
|
||||
'Other Sales',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }k`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly Sales',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
13,
|
||||
50,
|
||||
]
|
||||
|
||||
const salesOverviews = [
|
||||
{
|
||||
product: 'Apparel',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Electronic',
|
||||
sales: '$11,420',
|
||||
},
|
||||
{
|
||||
product: 'FMCG',
|
||||
sales: '$1,840',
|
||||
},
|
||||
{
|
||||
product: 'Other Sales',
|
||||
sales: '$11,420',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Sales Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-5">
|
||||
<div class="d-flex gap-4 flex-lg-row flex-column">
|
||||
<div class="mx-auto">
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
:width="220"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-center">
|
||||
<div class="me-3">
|
||||
<VAvatar
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon icon="ri-wallet-line" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
Number of Sales
|
||||
</p>
|
||||
<h5 class="text-h5">
|
||||
$86,400
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<VDivider class="my-6" />
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="sale in salesOverviews"
|
||||
:key="sale.product"
|
||||
cols="6"
|
||||
>
|
||||
<div class="d-flex align-center mb-1">
|
||||
<VIcon
|
||||
icon="ri-circle-fill"
|
||||
color="primary"
|
||||
size="10"
|
||||
class="me-2"
|
||||
/>
|
||||
<div>{{ sale.product }}</div>
|
||||
</div>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
{{ sale.sales }}
|
||||
</h6>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -30,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
top: -40,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.7,
|
||||
opacityFrom: 0.5,
|
||||
shadeIntensity: 1,
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
],
|
||||
colorStops: [[
|
||||
{
|
||||
offset: 0,
|
||||
opacity: 0.6,
|
||||
color: currentTheme.value.primary,
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
opacity: 0.1,
|
||||
color: currentTheme.value.surface,
|
||||
},
|
||||
]],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 1,
|
||||
color: currentTheme.value.primary,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
markers: {
|
||||
size: 1,
|
||||
offsetY: 1,
|
||||
offsetX: -10,
|
||||
strokeWidth: 5,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 8,
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 5,
|
||||
strokeColor: currentTheme.value.primary,
|
||||
fillColor: currentTheme.value.surface,
|
||||
}],
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
name: 'Traffic Rate',
|
||||
data: [
|
||||
35,
|
||||
180,
|
||||
100,
|
||||
300,
|
||||
220,
|
||||
400,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
Sales State
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Total $42,580 Sales
|
||||
</div>
|
||||
</div>
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
type="area"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="295"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,350 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '30%',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
2015,
|
||||
2016,
|
||||
2017,
|
||||
2018,
|
||||
2019,
|
||||
2020,
|
||||
2021,
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledColor,
|
||||
fontFamily: 'inter',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: disabledColor,
|
||||
fontFamily: 'inter',
|
||||
},
|
||||
formatter: value => value > 999 ? `${ (value / 1000).toFixed(0) }k` : `${ value }`,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.secondary,
|
||||
],
|
||||
grid: {
|
||||
xaxis: { lines: { show: false } },
|
||||
borderColor,
|
||||
strokeDashArray: 7,
|
||||
padding: { bottom: -10 },
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 6,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1280,
|
||||
charts: { height: 200 },
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1160,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 800,
|
||||
chart: {
|
||||
height: 250,
|
||||
offsetX: -10,
|
||||
},
|
||||
options: { plotOptions: { bar: { columnWidth: '40%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 650,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250,
|
||||
offsetX: -10,
|
||||
},
|
||||
plotOptions: { bar: { columnWidth: '45%' } },
|
||||
xaxis: {
|
||||
labels: {
|
||||
rotate: 315,
|
||||
rotateAlways: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
options: { plotOptions: { bar: { columnWidth: '60%' } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [
|
||||
29000,
|
||||
22000,
|
||||
25000,
|
||||
18500,
|
||||
29000,
|
||||
20000,
|
||||
34500,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Transactions',
|
||||
data: [
|
||||
0,
|
||||
16000,
|
||||
11000,
|
||||
15500,
|
||||
0,
|
||||
12500,
|
||||
9500,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Total Profit',
|
||||
data: [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
14000,
|
||||
0,
|
||||
11500,
|
||||
12000,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const lastThreeTransactions = [
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'success',
|
||||
},
|
||||
title: '$48,568.20',
|
||||
subtitle: 'Total Profit',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'primary',
|
||||
},
|
||||
title: '$38,453.25',
|
||||
subtitle: 'Total Income',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-bank-card-line',
|
||||
color: 'secondary',
|
||||
},
|
||||
title: '$2,453.45',
|
||||
subtitle: 'Total Expense',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
class="responsive-border"
|
||||
>
|
||||
<VCardText>
|
||||
<h5 class="text-h5">
|
||||
Total Profit
|
||||
</h5>
|
||||
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="280"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
$482.85k
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>Last month balance $234.40k</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-1">
|
||||
<VList class="card-list mt-2">
|
||||
<VListItem
|
||||
v-for="transaction in lastThreeTransactions"
|
||||
:key="transaction.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="transaction.avatar.color"
|
||||
variant="tonal"
|
||||
rounded
|
||||
>
|
||||
<VIcon :icon="transaction.avatar.icon" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ transaction.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<div class="text-body-1">
|
||||
{{ transaction.subtitle }}
|
||||
</div>
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
class="mt-4"
|
||||
>
|
||||
View Report
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
$responsive-border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.responsive-border {
|
||||
border-inline-end: $responsive-border;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.responsive-border {
|
||||
border-block-end: $responsive-border;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
stroke: { dashArray: 5 },
|
||||
colors: ['rgba(var(--v-theme-primary),1)'],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 90,
|
||||
startAngle: -90,
|
||||
hollow: { size: '55%' },
|
||||
track: { background: currentTheme.value['track-bg'] },
|
||||
dataLabels: {
|
||||
name: { show: false },
|
||||
value: {
|
||||
offsetY: -5,
|
||||
fontSize: '18px',
|
||||
fontWeight: 500,
|
||||
color: primaryTextColor,
|
||||
formatter: val => {
|
||||
const num = val * 35250 / 100
|
||||
|
||||
return num > 999 ? `${ (num / 1000).toFixed(1) }k` : `${ num }`
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [80]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Profit</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
/>
|
||||
<VCardText class="text-center">
|
||||
<div class="mt-5">
|
||||
<p class="text-body-1 mb-2">
|
||||
18k new sales
|
||||
</p>
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
This Year
|
||||
</VChip>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
labels: [
|
||||
'Returning',
|
||||
'New Users',
|
||||
'Referrals',
|
||||
],
|
||||
legend: { show: false },
|
||||
stroke: { lineCap: 'round' },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value.success,
|
||||
currentTheme.value.warning,
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: { size: '40%' },
|
||||
track: {
|
||||
background: 'transparent',
|
||||
margin: 10,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 28,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
fontSize: '1.75rem',
|
||||
offsetY: -12,
|
||||
color: primaryTextColor,
|
||||
formatter(value) {
|
||||
return `${ value }k`
|
||||
},
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: `${ new Date().getFullYear() }`,
|
||||
color: secondaryTextColor,
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
formatter(value) {
|
||||
return `${ value.globals.seriesTotals.reduce((total, num) => total + num) }k`
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
71,
|
||||
78,
|
||||
86,
|
||||
]
|
||||
|
||||
const revenueData = [
|
||||
{
|
||||
title: 'New User',
|
||||
value: 856,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Returning',
|
||||
value: 345,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Referrals',
|
||||
value: 258,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Revenue</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="243"
|
||||
/>
|
||||
|
||||
<div class="d-flex justify-space-around mt-4">
|
||||
<template
|
||||
v-for="(item, index) in revenueData"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="d-flex align-center">
|
||||
<VIcon
|
||||
size="10"
|
||||
:color="item.color"
|
||||
icon="ri-circle-fill"
|
||||
class="me-2"
|
||||
/>
|
||||
<h6 class="text-h6">
|
||||
{{ item.value }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="text-base">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<VDivider
|
||||
v-if="index !== revenueData.length - 1"
|
||||
vertical
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityTo: 0.2,
|
||||
opacityFrom: 1,
|
||||
shadeIntensity: 0,
|
||||
type: 'horizontal',
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
legend: { show: false },
|
||||
colors: [currentTheme.value.success],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: -10,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
labels: { style: { colors: secondaryTextColor } },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
name: 'Total Sales',
|
||||
data: [
|
||||
0,
|
||||
258,
|
||||
30,
|
||||
240,
|
||||
150,
|
||||
400,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle class="mb-1">
|
||||
Total Sales
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>$21,845</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="206"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.7)',
|
||||
'rgba(var(--v-theme-primary), 0.5)',
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
stroke: { width: 0 },
|
||||
dataLabels: { enabled: false },
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
},
|
||||
labels: { colors: secondaryTextColor },
|
||||
},
|
||||
labels: [
|
||||
'FR',
|
||||
'UK',
|
||||
'ESP',
|
||||
'USA',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '24px',
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }%`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Weekly Visits',
|
||||
fontSize: '15px',
|
||||
color: secondaryTextColor,
|
||||
formatter: value => `${ value.globals.seriesTotals.reduce((total, num) => total + num) }%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
12,
|
||||
25,
|
||||
13,
|
||||
50,
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Visitors</VCardTitle>
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="292"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: { sparkline: { enabled: true } },
|
||||
labels: ['Cricket'],
|
||||
stroke: { lineCap: 'round' },
|
||||
grid: { padding: { top: -10 } },
|
||||
colors: [currentTheme.value.info],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.2,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.1,
|
||||
stops: [
|
||||
0,
|
||||
90,
|
||||
],
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
endAngle: 180,
|
||||
startAngle: -180,
|
||||
inverseOrder: true,
|
||||
hollow: { size: '62%' },
|
||||
track: { background: currentTheme.value['track-bg'] },
|
||||
dataLabels: {
|
||||
name: { offsetY: 26 },
|
||||
value: {
|
||||
offsetY: -14,
|
||||
fontSize: '24px',
|
||||
fontWeight: 500,
|
||||
color: primaryTextColor,
|
||||
formatter: value => `${ value }k`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Growth',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
color: secondaryTextColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const series = [78]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Visits</VCardTitle>
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VueApexCharts
|
||||
type="radialBar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="199"
|
||||
/>
|
||||
<VCardText class="text-center pt-0">
|
||||
<div class="text-body-1 mb-2">
|
||||
42.2k new visits
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
size="small"
|
||||
>
|
||||
This year
|
||||
</VChip>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -10,
|
||||
offsetX: -15,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
distributed: true,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 7,
|
||||
xaxis: { lines: { show: false } },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Sun',
|
||||
'Mon',
|
||||
'Tue',
|
||||
'Wed',
|
||||
'Thu',
|
||||
'Fri',
|
||||
'Sat',
|
||||
],
|
||||
tickPlacement: 'on',
|
||||
labels: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
tickAmount: 4,
|
||||
labels: {
|
||||
style: {
|
||||
colors: disabledColor,
|
||||
fontSize: '13px',
|
||||
},
|
||||
formatter: value => `${ value > 999 ? `${ (value / 1000).toFixed(0) }` : value }k`,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
37,
|
||||
57,
|
||||
45,
|
||||
75,
|
||||
57,
|
||||
40,
|
||||
65,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="200"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center mb-3 gap-x-4">
|
||||
<h4 class="text-h4">
|
||||
45%
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Your sales performance is 45% <span class="text-high-emphasis">😎</span> better compared to last month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VBtn block>
|
||||
Details
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
columnWidth: '60%',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
'rgba(var(--v-theme-primary), 0.16)',
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'S',
|
||||
'M',
|
||||
'T',
|
||||
'W',
|
||||
'T',
|
||||
'F',
|
||||
'S',
|
||||
],
|
||||
axisTicks: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisBorder: { show: false },
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: secondaryColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -15,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
40,
|
||||
60,
|
||||
50,
|
||||
60,
|
||||
90,
|
||||
40,
|
||||
50,
|
||||
],
|
||||
}]
|
||||
|
||||
const weeklySalesData = [
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
title: '34.6k',
|
||||
subtitle: 'Sales',
|
||||
},
|
||||
{
|
||||
avatar: {
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'success',
|
||||
},
|
||||
title: '$482k',
|
||||
subtitle: 'Total Profit',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Sales</VCardTitle>
|
||||
<VCardSubtitle>Total 85.4k Sales</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n7 me-n3">
|
||||
<MoreBtn density="compact" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="203"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-space-around">
|
||||
<div
|
||||
v-for="data in weeklySalesData"
|
||||
:key="data.title"
|
||||
class="d-flex align-center me-3"
|
||||
>
|
||||
<div>
|
||||
<VAvatar
|
||||
rounded
|
||||
:color="data.avatar.color"
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon :icon="data.avatar.icon" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ data.title }}
|
||||
</h6>
|
||||
<div class="text-base text-no-wrap">
|
||||
{{ data.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup>
|
||||
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'
|
||||
|
||||
// Topics Charts config
|
||||
const topicsChartConfig = {
|
||||
chart: {
|
||||
height: 270,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '70%',
|
||||
distributed: true,
|
||||
borderRadius: 7,
|
||||
borderRadiusApplication: 'end',
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'#16B1FF',
|
||||
'#56CA00',
|
||||
'#8A8D93',
|
||||
'#FF4C51',
|
||||
'#FFB400',
|
||||
],
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 10,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
top: -35,
|
||||
bottom: -12,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'],
|
||||
fontWeight: 200,
|
||||
fontSize: '13px',
|
||||
},
|
||||
offsetX: 0,
|
||||
dropShadow: { enabled: false },
|
||||
formatter(val, opt) {
|
||||
return topicsChartConfig.labels[opt.dataPointIndex]
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
'UI Design',
|
||||
'UX Design',
|
||||
'Music',
|
||||
'Animation',
|
||||
'Vue',
|
||||
'SEO',
|
||||
],
|
||||
xaxis: {
|
||||
categories: [
|
||||
'6',
|
||||
'5',
|
||||
'4',
|
||||
'3',
|
||||
'2',
|
||||
'1',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
|
||||
fontSize: '13px',
|
||||
},
|
||||
formatter(val) {
|
||||
return `${ val }%`
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
max: 35,
|
||||
labels: {
|
||||
style: {
|
||||
colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
|
||||
fontSize: '13px',
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
style: { fontSize: '12px' },
|
||||
onDatasetHover: { highlightDataSeries: false },
|
||||
},
|
||||
legend: { show: false },
|
||||
}
|
||||
|
||||
const topicsChartSeries = [{
|
||||
data: [
|
||||
35,
|
||||
20,
|
||||
14,
|
||||
12,
|
||||
10,
|
||||
9,
|
||||
],
|
||||
}]
|
||||
|
||||
const topicsData = [
|
||||
{
|
||||
title: 'UI Design',
|
||||
value: 35,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'UX Design',
|
||||
value: 20,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Music',
|
||||
value: 14,
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
|
||||
const moreTopics = [
|
||||
{
|
||||
title: 'Animation',
|
||||
value: 12,
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
value: 10,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
title: 'SEO',
|
||||
value: 9,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="topicCard">
|
||||
<VCardItem title="Topic you are interested in">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
height="300"
|
||||
:options="topicsChartConfig"
|
||||
:series="topicsChartSeries"
|
||||
class="mb-md-0 mb-6"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol class="d-flex justify-space-around align-center">
|
||||
<div class="d-flex flex-column gap-y-12">
|
||||
<div
|
||||
v-for="topic in topicsData"
|
||||
:key="topic.title"
|
||||
class="d-flex gap-x-2"
|
||||
>
|
||||
<VBadge
|
||||
inline
|
||||
dot
|
||||
:color="topic.color"
|
||||
class="mt-1"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1"
|
||||
style="min-inline-size: 90px;"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ topic.value }}%
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-12">
|
||||
<div
|
||||
v-for="topic in moreTopics"
|
||||
:key="topic.title"
|
||||
class="d-flex gap-x-2"
|
||||
>
|
||||
<VBadge
|
||||
inline
|
||||
dot
|
||||
:color="topic.color"
|
||||
class="mt-1"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1"
|
||||
style="min-inline-size: 90px;"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ topic.value }}%
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
|
||||
.topicCard{
|
||||
.v-badge.v-badge--dot{
|
||||
.v-badge__badge{
|
||||
border-radius: 6px;
|
||||
block-size: 12px;
|
||||
inline-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user