Initial commit
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
const vehicleData = [
|
||||
{
|
||||
icon: 'tabler-car',
|
||||
title: 'On the way',
|
||||
time: '2hr 10min',
|
||||
percentage: 39.7,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-circle-arrow-down',
|
||||
title: 'Unloading',
|
||||
time: '3hr 15min',
|
||||
percentage: 28.3,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-circle-arrow-up',
|
||||
title: 'Loading',
|
||||
time: '1hr 24min',
|
||||
percentage: 17.4,
|
||||
},
|
||||
{
|
||||
icon: 'tabler-clock',
|
||||
title: 'Waiting',
|
||||
time: '5hr 19min',
|
||||
percentage: 14.6,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem title="Vehicles Overview">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
<VCardText>
|
||||
<div class="d-flex mb-6">
|
||||
<div style="inline-size: 39.7%;">
|
||||
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
|
||||
On the way
|
||||
</div>
|
||||
<VProgressLinear
|
||||
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
|
||||
model-value="100"
|
||||
height="46"
|
||||
class="rounded-e-0 rounded-lg"
|
||||
>
|
||||
<div class="text-start text-sm font-weight-medium">
|
||||
39.7%
|
||||
</div>
|
||||
</VProgressLinear>
|
||||
</div>
|
||||
<div style="inline-size: 28.3%;">
|
||||
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
|
||||
Unloading
|
||||
</div>
|
||||
<VProgressLinear
|
||||
color="rgb(var(--v-theme-primary))"
|
||||
model-value="100"
|
||||
class="rounded-0"
|
||||
height="46"
|
||||
>
|
||||
<div class="text-white text-sm font-weight-medium text-start">
|
||||
28.3%
|
||||
</div>
|
||||
</VProgressLinear>
|
||||
</div>
|
||||
<div style="inline-size: 17.4%;">
|
||||
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
|
||||
Loading
|
||||
</div>
|
||||
<VProgressLinear
|
||||
color="rgb(var(--v-theme-info))"
|
||||
model-value="100"
|
||||
height="46"
|
||||
class="rounded-0"
|
||||
>
|
||||
<div class="text-white text-sm font-weight-medium text-start">
|
||||
17.4%
|
||||
</div>
|
||||
</VProgressLinear>
|
||||
</div>
|
||||
<div style="inline-size: 14.6%;">
|
||||
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
|
||||
Waiting
|
||||
</div>
|
||||
<VProgressLinear
|
||||
color="rgb(var(--v-tooltip-background))"
|
||||
model-value="100"
|
||||
height="46"
|
||||
class="rounded-s-0 rounded-lg"
|
||||
>
|
||||
<div class="text-sm text-surface font-weight-medium text-start">
|
||||
14.6%
|
||||
</div>
|
||||
</VProgressLinear>
|
||||
</div>
|
||||
</div>
|
||||
<VTable class="text-no-wrap">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(vehicle, index) in vehicleData"
|
||||
:key="index"
|
||||
>
|
||||
<td
|
||||
width="70%"
|
||||
style="padding-inline-start: 0 !important;"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon
|
||||
:icon="vehicle.icon"
|
||||
size="24"
|
||||
class="text-high-emphasis"
|
||||
/>
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ vehicle.title }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-h6">
|
||||
{{ vehicle.time }}
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-body-1">
|
||||
{{ vehicle.percentage }}%
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vehicle-progress-label {
|
||||
padding-block-end: 1rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
|
||||
block-size: 10px;
|
||||
content: "";
|
||||
inline-size: 2px;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
inset-inline: unset 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.v-progress-linear__content {
|
||||
justify-content: start;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
#shipment-statistics .apexcharts-legend-series {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
#shipment-statistics .apexcharts-legend-series {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.v-progress-linear__content {
|
||||
padding-inline-start: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
#shipment-statistics .apexcharts-legend-series {
|
||||
padding-inline: 8px;
|
||||
}
|
||||
|
||||
.v-progress-linear__content {
|
||||
padding-inline-start: 0.125rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
const colors = {
|
||||
series1: '#7367F0',
|
||||
series2: '#8F85F3',
|
||||
series3: '#ABA4F6',
|
||||
}
|
||||
|
||||
const bodyColor = 'rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity))'
|
||||
const labelColor = 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))'
|
||||
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Delivery rate',
|
||||
type: 'column',
|
||||
data: [
|
||||
5,
|
||||
4.5,
|
||||
4,
|
||||
3,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Delivery time',
|
||||
type: 'column',
|
||||
data: [
|
||||
4,
|
||||
3.5,
|
||||
3,
|
||||
2.5,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Delivery exceptions',
|
||||
type: 'column',
|
||||
data: [
|
||||
3.5,
|
||||
3,
|
||||
2.5,
|
||||
2,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
parentHeightOffset: 0,
|
||||
stacked: false,
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
categories: [
|
||||
'Carrier A',
|
||||
'Carrier B',
|
||||
'Carrier C',
|
||||
'Carrier D',
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4,
|
||||
max: 5,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400,
|
||||
},
|
||||
formatter(o) {
|
||||
return o
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
offsetX: -3,
|
||||
radius: 12,
|
||||
},
|
||||
height: 33,
|
||||
offsetY: 10,
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0,
|
||||
},
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
fontWeight: 400,
|
||||
labels: {
|
||||
colors: bodyColor,
|
||||
useSeriesColors: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 6,
|
||||
},
|
||||
colors: [
|
||||
colors.series1,
|
||||
colors.series2,
|
||||
colors.series3,
|
||||
],
|
||||
fill: { opacity: 1 },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1400,
|
||||
options: {
|
||||
chart: { height: 275 },
|
||||
legend: {
|
||||
fontSize: '13px',
|
||||
offsetY: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
chart: { height: 300 },
|
||||
legend: {
|
||||
itemMargin: {
|
||||
vertical: 5,
|
||||
horizontal: 10,
|
||||
},
|
||||
offsetY: 7,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Carrier Performance</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="300"
|
||||
class="carrier-chart my-2"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
|
||||
.carrier-chart {
|
||||
.apexcharts-legend {
|
||||
.apexcharts-legend-series {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 6px;
|
||||
margin-block-end: 0.3125rem !important;
|
||||
margin-inline: 0 1rem !important;
|
||||
padding-inline: 0.75rem;
|
||||
|
||||
&:last-child {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup>
|
||||
const chartColors = {
|
||||
donut: {
|
||||
series1: '#28C76F',
|
||||
series2: '#53D28C',
|
||||
series3: '#7EDDA9',
|
||||
series4: '#A9E9C5',
|
||||
},
|
||||
}
|
||||
|
||||
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: labelColor,
|
||||
useSeriesColors: false,
|
||||
},
|
||||
},
|
||||
tooltip: { theme: false },
|
||||
grid: { padding: { top: 15 } },
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '38px',
|
||||
color: headingColor,
|
||||
fontWeight: 500,
|
||||
offsetY: -15,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
name: { offsetY: 30 },
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '0.9375rem',
|
||||
label: 'AVG. Exceptions',
|
||||
color: labelColor,
|
||||
formatter() {
|
||||
return '30%'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 420,
|
||||
options: {
|
||||
chart: { height: 400 },
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '24px',
|
||||
color: headingColor,
|
||||
fontWeight: 500,
|
||||
offsetY: -15,
|
||||
formatter(val) {
|
||||
return `${ Number.parseInt(val) }%`
|
||||
},
|
||||
},
|
||||
name: { offsetY: 30 },
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '0.9375rem',
|
||||
label: 'AVG. Exceptions',
|
||||
color: labelColor,
|
||||
formatter() {
|
||||
return '30%'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}],
|
||||
}
|
||||
</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,217 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
40,
|
||||
65,
|
||||
50,
|
||||
45,
|
||||
90,
|
||||
55,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
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: '60%',
|
||||
columnWidth: '38%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) }, 1)`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`,
|
||||
],
|
||||
dataLabels: { enabled: false },
|
||||
legend: { show: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Mo',
|
||||
'Tu',
|
||||
'We',
|
||||
'Th',
|
||||
'Fr',
|
||||
'Sa',
|
||||
'Su',
|
||||
],
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [{
|
||||
breakpoint: 1025,
|
||||
options: { chart: { height: 199 } },
|
||||
}],
|
||||
}
|
||||
})
|
||||
|
||||
const earningsReports = [
|
||||
{
|
||||
color: 'primary',
|
||||
icon: 'tabler-currency-dollar',
|
||||
title: 'Earnings',
|
||||
amount: '$545.69',
|
||||
progress: '55',
|
||||
},
|
||||
{
|
||||
color: 'info',
|
||||
icon: 'tabler-chart-pie-2',
|
||||
title: 'Profit',
|
||||
amount: '$256.34',
|
||||
progress: '25',
|
||||
},
|
||||
{
|
||||
color: 'error',
|
||||
icon: 'tabler-brand-paypal',
|
||||
title: 'Expense',
|
||||
amount: '$74.19',
|
||||
progress: '65',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-sm-0">
|
||||
<VCardTitle>Earning Reports</VCardTitle>
|
||||
<VCardSubtitle>Weekly Earnings Overview</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n4 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="5"
|
||||
lg="6"
|
||||
class="d-flex flex-column align-self-center"
|
||||
>
|
||||
<div class="d-flex align-center gap-2 mb-3 flex-wrap">
|
||||
<h4 class="text-h2">
|
||||
$468
|
||||
</h4>
|
||||
<VChip
|
||||
label
|
||||
size="small"
|
||||
color="success"
|
||||
>
|
||||
+4.2%
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<span class="text-sm text-medium-emphasis">
|
||||
You informed of this week compared to last week
|
||||
</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="7"
|
||||
lg="6"
|
||||
>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="161"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div class="border rounded mt-5 pa-5">
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="report in earningsReports"
|
||||
:key="report.title"
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="26"
|
||||
:color="report.color"
|
||||
variant="tonal"
|
||||
class="me-2"
|
||||
>
|
||||
<VIcon
|
||||
size="18"
|
||||
:icon="report.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-base font-weight-regular">
|
||||
{{ report.title }}
|
||||
</h6>
|
||||
</div>
|
||||
<h6 class="text-h4 my-2">
|
||||
{{ report.amount }}
|
||||
</h6>
|
||||
<VProgressLinear
|
||||
:model-value="report.progress"
|
||||
:color="report.color"
|
||||
height="4"
|
||||
rounded
|
||||
rounded-bar
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,627 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTab = ref(0)
|
||||
const refVueApexChart = ref()
|
||||
|
||||
const chartConfigs = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const labelPrimaryColor = `rgba(${ hexToRgb(currentTheme.primary) },${ variableTheme['dragged-opacity'] })`
|
||||
const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['high-emphasis-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||||
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
|
||||
|
||||
return [
|
||||
{
|
||||
title: 'Orders',
|
||||
icon: 'tabler-shopping-cart',
|
||||
chartOptions: {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '32%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
dataLabels: { position: 'top' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) }, 1)`,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter(val) {
|
||||
return `${ val }k`
|
||||
},
|
||||
offsetY: -25,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
colors: [legendColor],
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: borderColor,
|
||||
},
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -15,
|
||||
formatter(val) {
|
||||
return `${ val / 1 }k`
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
min: 0,
|
||||
max: 60000,
|
||||
tickAmount: 6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: { plotOptions: { bar: { columnWidth: '41%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 590,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '40%' } },
|
||||
yaxis: { labels: { show: false } },
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
data: [
|
||||
28,
|
||||
10,
|
||||
45,
|
||||
38,
|
||||
15,
|
||||
30,
|
||||
35,
|
||||
30,
|
||||
8,
|
||||
],
|
||||
}],
|
||||
},
|
||||
{
|
||||
title: 'Sales',
|
||||
icon: 'tabler-chart-bar',
|
||||
chartOptions: {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '32%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
dataLabels: { position: 'top' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) }, 1)`,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter(val) {
|
||||
return `${ val }k`
|
||||
},
|
||||
offsetY: -25,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
colors: [legendColor],
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: borderColor,
|
||||
},
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -15,
|
||||
formatter(val) {
|
||||
return `${ val / 1 }k`
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
min: 0,
|
||||
max: 60000,
|
||||
tickAmount: 6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: { plotOptions: { bar: { columnWidth: '41%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 590,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '61%' } },
|
||||
grid: { padding: { right: 0 } },
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
data: [
|
||||
35,
|
||||
25,
|
||||
15,
|
||||
40,
|
||||
42,
|
||||
25,
|
||||
48,
|
||||
8,
|
||||
30,
|
||||
],
|
||||
}],
|
||||
},
|
||||
{
|
||||
title: 'Profit',
|
||||
icon: 'tabler-currency-dollar',
|
||||
chartOptions: {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '32%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
dataLabels: { position: 'top' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) }, 1)`,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter(val) {
|
||||
return `${ val }k`
|
||||
},
|
||||
offsetY: -25,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
colors: [legendColor],
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: borderColor,
|
||||
},
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -15,
|
||||
formatter(val) {
|
||||
return `${ val / 1 }k`
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
min: 0,
|
||||
max: 60000,
|
||||
tickAmount: 6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: { plotOptions: { bar: { columnWidth: '41%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 590,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '61%' } },
|
||||
grid: { padding: { right: 0 } },
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
data: [
|
||||
10,
|
||||
22,
|
||||
27,
|
||||
33,
|
||||
42,
|
||||
32,
|
||||
27,
|
||||
22,
|
||||
8,
|
||||
],
|
||||
}],
|
||||
},
|
||||
{
|
||||
title: 'Income',
|
||||
icon: 'tabler-chart-pie-2',
|
||||
chartOptions: {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '32%',
|
||||
borderRadius: 6,
|
||||
distributed: true,
|
||||
borderRadiusApplication: 'end',
|
||||
dataLabels: { position: 'top' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
labelPrimaryColor,
|
||||
`rgba(${ hexToRgb(currentTheme.primary) }, 1)`,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter(val) {
|
||||
return `${ val }k`
|
||||
},
|
||||
offsetY: -25,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
colors: [legendColor],
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: borderColor,
|
||||
},
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -15,
|
||||
formatter(val) {
|
||||
return `${ val / 1 }k`
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
min: 0,
|
||||
max: 60000,
|
||||
tickAmount: 6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: { plotOptions: { bar: { columnWidth: '41%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 590,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '50%' } },
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
grid: { padding: { right: 0 } },
|
||||
yaxis: { labels: { show: false } },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
data: [
|
||||
5,
|
||||
9,
|
||||
12,
|
||||
18,
|
||||
20,
|
||||
25,
|
||||
30,
|
||||
36,
|
||||
48,
|
||||
],
|
||||
}],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard
|
||||
title="Earning Reports"
|
||||
subtitle="Yearly Earnings Overview"
|
||||
>
|
||||
<template #append>
|
||||
<div class="mt-n4 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VSlideGroup
|
||||
v-model="currentTab"
|
||||
show-arrows
|
||||
mandatory
|
||||
class="mb-10"
|
||||
>
|
||||
<VSlideGroupItem
|
||||
v-for="(report, index) in chartConfigs"
|
||||
:key="report.title"
|
||||
v-slot="{ isSelected, toggle }"
|
||||
:value="index"
|
||||
>
|
||||
<div
|
||||
style="block-size: 100px; inline-size: 110px;"
|
||||
:style="isSelected ? 'border-color:rgb(var(--v-theme-primary)) !important' : ''"
|
||||
:class="isSelected ? 'border' : 'border border-dashed'"
|
||||
class="d-flex flex-column justify-center align-center cursor-pointer rounded py-4 px-5 me-4"
|
||||
@click="toggle"
|
||||
>
|
||||
<VAvatar
|
||||
rounded
|
||||
size="38"
|
||||
:color="isSelected ? 'primary' : ''"
|
||||
variant="tonal"
|
||||
class="mb-2"
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
:icon="report.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
<h6 class="text-base font-weight-medium mb-0">
|
||||
{{ report.title }}
|
||||
</h6>
|
||||
</div>
|
||||
</VSlideGroupItem>
|
||||
|
||||
<!-- 👉 slider more -->
|
||||
<VSlideGroupItem>
|
||||
<div
|
||||
style="block-size: 100px; inline-size: 110px;"
|
||||
class="d-flex flex-column justify-center align-center rounded border border-dashed py-4 px-5"
|
||||
>
|
||||
<VAvatar
|
||||
rounded
|
||||
size="38"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
icon="tabler-plus"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VSlideGroupItem>
|
||||
</VSlideGroup>
|
||||
|
||||
<VueApexCharts
|
||||
ref="refVueApexChart"
|
||||
:key="currentTab"
|
||||
:options="chartConfigs[Number(currentTab)].chartOptions"
|
||||
:series="chartConfigs[Number(currentTab)].series"
|
||||
height="230"
|
||||
class="mt-3"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,164 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { prefixWithPlus } from '@core/utils/formatters'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
2000,
|
||||
2000,
|
||||
4000,
|
||||
4000,
|
||||
3050,
|
||||
3050,
|
||||
2000,
|
||||
2000,
|
||||
3050,
|
||||
3050,
|
||||
4700,
|
||||
4700,
|
||||
2750,
|
||||
2750,
|
||||
5700,
|
||||
5700,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
toolbar: false,
|
||||
},
|
||||
markers: { strokeColor: 'transparent' },
|
||||
dataLabels: { enabled: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: -10,
|
||||
right: -5,
|
||||
top: -40,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [currentTheme.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.15,
|
||||
stops: [
|
||||
0,
|
||||
95,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
lines: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { show: false },
|
||||
min: 1000,
|
||||
max: 6000,
|
||||
tickAmount: 5,
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
}
|
||||
})
|
||||
|
||||
const projectStatus = [
|
||||
{
|
||||
title: 'Donates',
|
||||
amount: '$756.26',
|
||||
lossProfit: -139.34,
|
||||
},
|
||||
{
|
||||
title: 'Podcasts',
|
||||
amount: '$2,207.03',
|
||||
lossProfit: +576.24,
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Project Status">
|
||||
<template #append>
|
||||
<div class="mt-n4 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list mb-6">
|
||||
<VListItem>
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
$4,3742
|
||||
</VListItemTitle>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
rounded
|
||||
icon="tabler-currency-dollar"
|
||||
/>
|
||||
</template>
|
||||
<VListItemSubtitle>
|
||||
Your Earnings
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<span class="text-success font-weight-medium">+10.2%</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="208"
|
||||
/>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="status in projectStatus"
|
||||
:key="status.title"
|
||||
>
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ status.title }}
|
||||
</VListItemTitle>
|
||||
<template #append>
|
||||
<span class="me-3 text-medium-emphasis">{{ status.amount }}</span>
|
||||
<span :class="status.lossProfit > 0 ? 'text-success' : 'text-error'">{{ prefixWithPlus(status.lossProfit) }}</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,385 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = {
|
||||
bar: [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
270,
|
||||
210,
|
||||
180,
|
||||
200,
|
||||
250,
|
||||
280,
|
||||
250,
|
||||
270,
|
||||
150,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-140,
|
||||
-160,
|
||||
-180,
|
||||
-150,
|
||||
-100,
|
||||
-60,
|
||||
-80,
|
||||
-100,
|
||||
-180,
|
||||
],
|
||||
},
|
||||
],
|
||||
line: [
|
||||
{
|
||||
name: 'Last Month',
|
||||
data: [
|
||||
20,
|
||||
10,
|
||||
30,
|
||||
16,
|
||||
24,
|
||||
5,
|
||||
40,
|
||||
23,
|
||||
28,
|
||||
5,
|
||||
30,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'This Month',
|
||||
data: [
|
||||
50,
|
||||
40,
|
||||
60,
|
||||
46,
|
||||
54,
|
||||
35,
|
||||
70,
|
||||
53,
|
||||
58,
|
||||
35,
|
||||
60,
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
|
||||
const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['high-emphasis-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||||
|
||||
return {
|
||||
bar: {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8,
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-warning),1)',
|
||||
],
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'right',
|
||||
position: 'top',
|
||||
fontFamily: 'Public Sans',
|
||||
fontSize: '13px',
|
||||
markers: {
|
||||
height: 12,
|
||||
width: 12,
|
||||
radius: 12,
|
||||
offsetX: -3,
|
||||
offsetY: 2,
|
||||
},
|
||||
labels: { colors: legendColor },
|
||||
itemMargin: { horizontal: 5 },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
bottom: -8,
|
||||
top: 20,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -16,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
min: -200,
|
||||
max: 300,
|
||||
tickAmount: 5,
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1700,
|
||||
options: { plotOptions: { bar: { columnWidth: '43%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1526,
|
||||
options: { plotOptions: { bar: { columnWidth: '52%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1359,
|
||||
options: { plotOptions: { bar: { columnWidth: '60%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '70%' } },
|
||||
chart: { height: 390 },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 850,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '48%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 776,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '68%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 449,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '70%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
chart: { height: 360 },
|
||||
xaxis: { labels: { offsetY: -5 } },
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 394,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '88%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
},
|
||||
line: {
|
||||
chart: {
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
type: 'line',
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
dashArray: [
|
||||
5,
|
||||
0,
|
||||
],
|
||||
width: [
|
||||
1,
|
||||
2,
|
||||
],
|
||||
},
|
||||
legend: { show: false },
|
||||
colors: [
|
||||
borderColor,
|
||||
currentTheme.primary,
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
borderColor,
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: -15,
|
||||
left: 25,
|
||||
},
|
||||
},
|
||||
markers: { size: 0 },
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="revenue-report">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="8"
|
||||
lg="8"
|
||||
:class="$vuetify.display.smAndUp ? 'border-e' : 'border-b'"
|
||||
>
|
||||
<VCardText>
|
||||
<h6 class="text-h5 mb-sm-n8">
|
||||
Revenue Report
|
||||
</h6>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions.bar"
|
||||
:series="series.bar"
|
||||
height="365"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<VCardText class="d-flex flex-column justify-center align-center text-center h-100">
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
size="small"
|
||||
class="d-flex mx-auto"
|
||||
>
|
||||
<span>2022</span>
|
||||
<template #append>
|
||||
<VIcon
|
||||
size="16"
|
||||
icon="tabler-chevron-down"
|
||||
/>
|
||||
</template>
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, index) in ['2021', '2020', '2019']"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
<VListItemTitle>{{ item }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
|
||||
<div class="d-flex flex-column my-8">
|
||||
<h5 class="font-weight-medium text-h3">
|
||||
$25,825
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
<span class="text-high-emphasis font-weight-medium me-1">Budget:</span>
|
||||
<span>56,800</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions.line"
|
||||
:series="series.line"
|
||||
height="100"
|
||||
/>
|
||||
|
||||
<VBtn class="mt-8">
|
||||
Increase Budget
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.revenue-report {
|
||||
.apexcharts-legend {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.apexcharts-legend.apx-legend-position-top.apexcharts-align-right {
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
resources/js/views/pages/cards/card-widgets/CardWidgetsSales.vue
Normal file
161
resources/js/views/pages/cards/card-widgets/CardWidgetsSales.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Sales',
|
||||
data: [
|
||||
32,
|
||||
27,
|
||||
27,
|
||||
30,
|
||||
25,
|
||||
25,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Visits',
|
||||
data: [
|
||||
25,
|
||||
35,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
|
||||
const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
|
||||
const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['medium-emphasis-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'radar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: borderColor,
|
||||
connectorColors: borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
width: 0,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
fontSize: '13px',
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: legendColor,
|
||||
useSeriesColors: false,
|
||||
},
|
||||
markers: {
|
||||
height: 12,
|
||||
width: 12,
|
||||
offsetX: -8,
|
||||
},
|
||||
itemMargin: { horizontal: 10 },
|
||||
onItemHover: { highlightDataSeries: false },
|
||||
},
|
||||
colors: [
|
||||
currentTheme.primary,
|
||||
currentTheme.info,
|
||||
],
|
||||
fill: {
|
||||
opacity: [
|
||||
1,
|
||||
0.85,
|
||||
],
|
||||
},
|
||||
markers: { size: 0 },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: -5,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: [
|
||||
labelColor,
|
||||
labelColor,
|
||||
labelColor,
|
||||
labelColor,
|
||||
labelColor,
|
||||
labelColor,
|
||||
],
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 40,
|
||||
tickAmount: 4,
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 769,
|
||||
options: { chart: { height: 372 } },
|
||||
}],
|
||||
}
|
||||
})
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-4">
|
||||
<VCardTitle>Sales</VCardTitle>
|
||||
<VCardSubtitle>Last 6 Months</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n4 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="290"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const series = [85]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
labels: ['Completed Task'],
|
||||
chart: { type: 'radialBar' },
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 10,
|
||||
startAngle: -140,
|
||||
endAngle: 130,
|
||||
hollow: { size: '65%' },
|
||||
track: {
|
||||
background: currentTheme.surface,
|
||||
strokeWidth: '100%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: -20,
|
||||
color: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`,
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
value: {
|
||||
offsetY: 10,
|
||||
color: `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['high-emphasis-opacity'] })`,
|
||||
fontSize: '38px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'Public Sans',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [currentTheme.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [currentTheme.primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.6,
|
||||
stops: [
|
||||
30,
|
||||
70,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
stroke: { dashArray: 10 },
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 960,
|
||||
options: { chart: { height: 280 } },
|
||||
}],
|
||||
}
|
||||
})
|
||||
|
||||
const supportTicket = [
|
||||
{
|
||||
avatarColor: 'primary',
|
||||
avatarIcon: 'tabler-ticket',
|
||||
title: 'New Tickets',
|
||||
subtitle: '142',
|
||||
},
|
||||
{
|
||||
avatarColor: 'info',
|
||||
avatarIcon: 'tabler-check',
|
||||
title: 'Open Tickets',
|
||||
subtitle: '28',
|
||||
},
|
||||
{
|
||||
avatarColor: 'warning',
|
||||
avatarIcon: 'tabler-clock',
|
||||
title: 'Response Time',
|
||||
subtitle: '1 Day',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Support Tracker</VCardTitle>
|
||||
<VCardSubtitle>Last 7 Days</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n4 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="4"
|
||||
>
|
||||
<div class="mb-lg-6 mb-4 mt-2">
|
||||
<h2 class="text-h2">
|
||||
164
|
||||
</h2>
|
||||
<p class="text-base mb-0">
|
||||
Total Tickets
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="ticket in supportTicket"
|
||||
:key="ticket.title"
|
||||
>
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ ticket.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
{{ ticket.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
size="34"
|
||||
:color="ticket.avatarColor"
|
||||
variant="tonal"
|
||||
class="me-1"
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
:icon="ticket.avatarIcon"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="8"
|
||||
md="8"
|
||||
>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="360"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script setup>
|
||||
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'
|
||||
|
||||
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)',
|
||||
'rgba(var(--v-theme-info),1)',
|
||||
'rgba(var(--v-theme-success),1)',
|
||||
'rgba(var(--v-theme-secondary),1)',
|
||||
'rgba(var(--v-theme-error),1)',
|
||||
'rgba(var(--v-theme-warning),1)',
|
||||
],
|
||||
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',
|
||||
},
|
||||
{
|
||||
title: 'Animation',
|
||||
value: 12,
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
value: 10,
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
title: 'SEO',
|
||||
value: 9,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 👉 Topic You are Interested in -->
|
||||
<VCard>
|
||||
<VCardItem title="Topic you are interested in">
|
||||
<template #append>
|
||||
<MoreBtn />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
xl="8"
|
||||
lg="7"
|
||||
>
|
||||
<div>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
height="260"
|
||||
:options="topicsChartConfig"
|
||||
:series="topicsChartSeries"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="5"
|
||||
xl="4"
|
||||
>
|
||||
<div class="topic-progress d-flex flex-wrap gap-x-6 gap-y-10 ms-auto">
|
||||
<div
|
||||
v-for="topic in topicsData"
|
||||
:key="topic.title"
|
||||
class="d-flex gap-x-2"
|
||||
>
|
||||
<VBadge
|
||||
dot
|
||||
inline
|
||||
class="mt-1 custom-badge"
|
||||
:color="topic.color"
|
||||
/>
|
||||
<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";
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
.topic-progress {
|
||||
inline-size: 17rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [
|
||||
15,
|
||||
10,
|
||||
20,
|
||||
8,
|
||||
12,
|
||||
18,
|
||||
12,
|
||||
5,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [
|
||||
-7,
|
||||
-10,
|
||||
-7,
|
||||
-12,
|
||||
-6,
|
||||
-9,
|
||||
-5,
|
||||
-8,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
legend: { show: false },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [currentTheme.surface],
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '45%',
|
||||
borderRadius: 8,
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'all',
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
'rgba(var(--v-theme-secondary),1)',
|
||||
],
|
||||
dataLabels: { enabled: false },
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -40,
|
||||
bottom: -20,
|
||||
left: -10,
|
||||
right: -2,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1468,
|
||||
options: { plotOptions: { bar: { columnWidth: '70%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1279,
|
||||
options: { plotOptions: { bar: { columnWidth: '40%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1197,
|
||||
options: {
|
||||
chart: { height: 228 },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '40%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 912,
|
||||
options: {
|
||||
chart: { height: 232 },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '60%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 670,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '70%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '40%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 475,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '50%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 381,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const totalEarnings = [
|
||||
{
|
||||
avatar: 'tabler-brand-paypal',
|
||||
avatarColor: 'primary',
|
||||
title: 'Total Revenue',
|
||||
subtitle: 'Client Payment',
|
||||
earning: '+$126',
|
||||
},
|
||||
{
|
||||
avatar: 'tabler-currency-dollar',
|
||||
avatarColor: 'secondary',
|
||||
title: 'Total Sales',
|
||||
subtitle: 'Total Sales',
|
||||
earning: '+$98',
|
||||
},
|
||||
]
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'View More',
|
||||
value: 'View More',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Total Earning</VCardTitle>
|
||||
|
||||
<div class="d-flex align-center mt-2">
|
||||
<h2 class="text-h2 me-2">
|
||||
87%
|
||||
</h2>
|
||||
<div class="text-success">
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-chevron-up"
|
||||
/>
|
||||
<span class="text-base">25.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n10 me-n2">
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
height="191"
|
||||
class="my-2"
|
||||
/>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="earning in totalEarnings"
|
||||
:key="earning.title"
|
||||
>
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ earning.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
{{ earning.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="38"
|
||||
:color="earning.avatarColor"
|
||||
variant="tonal"
|
||||
rounded
|
||||
class="me-1"
|
||||
>
|
||||
<VIcon
|
||||
:icon="earning.avatar"
|
||||
size="22"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<span class="text-success font-weight-medium">{{ earning.earning }}</span>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user