authorized fix keycloak sidebarItem
This commit is contained in:
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary } from '@/utils/UpdateColors';
|
||||
import { AnnualProfitData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getPrimary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Users',
|
||||
data: [25, 66, 20, 40, 12, 58, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Annual Profit</v-card-title>
|
||||
<div class="bg-lightprimary-100 rounded-md mt-5">
|
||||
<div class="d-flex justify-space-between align-center pa-6">
|
||||
<span class="textPrimary font-weight-medium">Conversion Rate</span>
|
||||
<h3 class="text-h3 heading">18.4%</h3>
|
||||
</div>
|
||||
<apexchart type="area" class="mt-5" height="80" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-3 mt-6 annual-list">
|
||||
<div v-for="item in AnnualProfitData" :key="item.title" class="list border-b pb-4">
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<p class="font-weight-medium text-muted mb-1">{{ item.title }}</p>
|
||||
<span class="font-weight-medium text-right textSecondary">{{ item.subtitle }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-subtitle-1 font-weight-bold heading mb-1">{{ item.price }}</h6>
|
||||
<p :class="'font-weight-semibold text-right text-' + item.color">{{ item.percent }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { DailyActivitiesData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Daily activities</v-card-title>
|
||||
<div class="daily-activities mt-10 px-3">
|
||||
<div v-for="list in DailyActivitiesData" :key="list.title">
|
||||
<v-row class="d-flex mb-1">
|
||||
<v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
|
||||
<p class="text-body-1 text-muted text-no-wrap">{{ list.title }}</p>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
|
||||
<Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
|
||||
<div v-if="list.line" class="line mx-auto bg-borderColor"></div>
|
||||
</v-col>
|
||||
<v-col cols="7" sm="8" class="pt-0 pb-0">
|
||||
<h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
|
||||
<p v-else class="text-body-1 text-muted">{{ list.subtitle }}</p>
|
||||
<div class="mt-n1">
|
||||
<RouterLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
|
||||
list.link
|
||||
}}</RouterLink>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
||||
<Icon icon="solar:football-outline" class="text-secondary" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">New Customers</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3 mt-9">
|
||||
<h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
|
||||
<div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
|
||||
</div>
|
||||
<v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="bg-primary-gt position-relative profit-card overflow-hidden">
|
||||
<v-card-item >
|
||||
<div class="d-flex rounded-sm gap-2 align-center badge-custom-dark text-white">
|
||||
<Icon icon="solar:check-circle-outline" height="18"/>
|
||||
This month <strong>+15% Profit</strong>
|
||||
</div>
|
||||
<div class="pt-6 mt-12">
|
||||
<h3 class="text-h3 text-white mb-2">Hey, David McMichael</h3>
|
||||
<p class="opacity-80 mb-1 text-white text-subtitle-1">Aenean vel libero id metus sollicitudin</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<img src="@/assets/images/backgrounds/welcome-bg2.png" alt="matdash-img" class="position-absolute" />
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { userCardData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10" class="overflow-hidden">
|
||||
<img src="@/assets/images/backgrounds/blog.jpg" alt="matdash-image" class="w-100" />
|
||||
<v-card-item class="pt-6">
|
||||
<v-card-title class="text-h5">Figma tips and tricks with Stephan</v-card-title>
|
||||
<p class="text-15 text-muted my-3">
|
||||
Nullam lobortis sodales dolor vitae viverra. Cras lacinia bibendum metus vel rhoncus.
|
||||
</p>
|
||||
<div class="d-flex justify-content-start mt-4">
|
||||
<div class="ml-2 d-flex">
|
||||
<v-avatar v-for="card in userCardData" :key="card.img" size="40" class="ml-n2 avtar-border">
|
||||
<img :src="card.img" alt="usericon" height="40" />
|
||||
</v-avatar>
|
||||
<v-avatar size="40" class="ml-n2 avtar-border text-primary font-weight-medium" color="lightprimary">
|
||||
+12
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueForecastData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 295,
|
||||
stacked: true,
|
||||
offsetX: -15
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '15%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '2024',
|
||||
data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<div>
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Overview of Profit</v-card-subtitle>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-4">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-primary rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2024</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-error rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n1 mt-4 pt-2">
|
||||
<apexchart type="bar" height="295" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-row class="mt-1">
|
||||
<v-col v-for="item in RevenueForecastData" :key="item.subtext" cols="12" md="4">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="item.bgcolor" class="rounded-md" :class="item.bgcolor">
|
||||
<Icon :icon="'solar:' + item.icon" height="25" :class="item.color" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">{{ item.subtext }}</p>
|
||||
<h5 class="text-h5 font-weight-medium">{{ item.profit }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { SalesFromLocationData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
import svgMap from 'svgmap';
|
||||
import 'svgmap/dist/svgMap.min.css';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const map = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
new svgMap({
|
||||
targetElementID: 'svgMap',
|
||||
mouseWheelZoomEnabled: false,
|
||||
hideFlag: true,
|
||||
initialZoom: 1.23,
|
||||
|
||||
data: {
|
||||
data: {
|
||||
countresidents: {
|
||||
format: '{0}',
|
||||
thousandSeparator: ',',
|
||||
thresholdMax: 50000,
|
||||
thresholdMin: 1000
|
||||
}
|
||||
},
|
||||
applyData: 'countresidents',
|
||||
values: {
|
||||
AF: { countresidents: 587, color: 'rgba(var(--v-theme-error))' },
|
||||
IN: { countresidents: 232, color: 'rgba(var(--v-theme-primary))' },
|
||||
US: { countresidents: 42393, color: 'rgba(var(--v-theme-secondary))' }
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Sales from Locations</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">World Map</v-card-subtitle>
|
||||
<div id="svgMap" ref="map" class="mt-7 mb-4"></div>
|
||||
<v-row v-for="item in SalesFromLocationData" :key="item.name" class="align-center justify-space-between mt-1">
|
||||
<v-col cols="2" xl="auto" lg="3" sm="2">
|
||||
<h6 class="text-textPrimary text-body-1">{{ item.name }}</h6>
|
||||
</v-col>
|
||||
<v-col cols="7" xl="8" lg="6" class="px-0"
|
||||
><v-progress-linear
|
||||
:model-value="item.percentage"
|
||||
height="7"
|
||||
:bg-color="'light' + item.color"
|
||||
:color="item.color"
|
||||
rounded
|
||||
></v-progress-linear
|
||||
></v-col>
|
||||
<v-col cols="3" xl="auto" lg="3" sm="3" class="text-end">
|
||||
<h6 class="text-grey200 text-body-1">{{ item.percentage }}</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.svgMap-map-wrapper {
|
||||
background: transparent;
|
||||
padding-top: 70%;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.svgMap-map-wrapper {
|
||||
.svgMap-country {
|
||||
stroke: #fff;
|
||||
fill: #c9d6de !important;
|
||||
|
||||
&#svgMap-map-country-IN {
|
||||
fill: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
&#svgMap-map-country-AF {
|
||||
fill: rgb(var(--v-theme-error)) !important;
|
||||
}
|
||||
|
||||
&#svgMap-map-country-US {
|
||||
fill: rgb(var(--v-theme-secondary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.svgMap-map-controls-zoom {
|
||||
background: #c9d6de !important;
|
||||
.svgMap-control-button.svgMap-zoom-button:before {
|
||||
width: 9px !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
.svgMap-control-button.svgMap-zoom-in-button:after {
|
||||
width: 2px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
}
|
||||
.svgMap-control-button{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const barchartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
type: 'bar',
|
||||
height: 98,
|
||||
stacked: true,
|
||||
offsetX: -5,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: ['#ffffff', 'rgba(255,255,255,0.5)'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '26%',
|
||||
borderRadius: [3],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const barChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Site A',
|
||||
data: [29, 52, 38, 47, 56, 41, 46]
|
||||
},
|
||||
{
|
||||
name: 'Site B',
|
||||
data: [71, 71, 71, 71, 71, 71, 71]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lighterror overflow-hidden">
|
||||
<v-card-item class="space-20">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<p class="mb-1 font-weight-semibold textPrimary">Subscriptions</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">78,298</h3>
|
||||
<span class="font-weight-medium textPrimary">-12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:layers-linear" class="text-error" height="22" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<apexchart type="bar" height="98" :options="barchartOptions" :series="barChart.series" class="rounded-bars"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors:['rgba(var(--v-theme-error))'],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lighterror">
|
||||
<Icon icon="solar:box-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">Total Income</h6>
|
||||
</div>
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="6">
|
||||
<h3 class="text-h3 heading">$680</h3>
|
||||
<div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 90,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getSecondary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getSecondary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.9,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: "customers",
|
||||
data: [36, 45, 31, 47, 38, 43]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lightsecondary overflow-hidden">
|
||||
<v-card-item class="space-20">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<p class="mb-1 font-weight-semibold textPrimary">Users</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">14,872</h3>
|
||||
<span class="font-weight-medium textPrimary">+6.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:pie-chart-3-line-duotone" class="text-secondary" height="22" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart type="area" height="90" class="mt-4" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import moment from 'moment';
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
id: 'sparkline3',
|
||||
type: 'rangeBar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 300,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
hideOverflowingLabels: false
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
background: {
|
||||
borderRadius: 20
|
||||
},
|
||||
formatter: function (val: moment.MomentInput[], opts: { w: { globals: { labels: { [x: string]: any; }; }; }; dataPointIndex: string | number; }) {
|
||||
var label = opts.w.globals.labels[opts.dataPointIndex];
|
||||
var a = moment(val[0]);
|
||||
var b = moment(val[1]);
|
||||
return label + ': ' + 'Meeting with Sunil';
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'rgba(0,0,0,0.05)'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Sun',
|
||||
y: [new Date('2024-02-27').getTime(), new Date('2024-03-04').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-primary))'
|
||||
},
|
||||
{
|
||||
x: 'Mon',
|
||||
y: [new Date('2024-03-04').getTime(), new Date('2024-03-10').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-grey200),0.8)'
|
||||
},
|
||||
{
|
||||
x: 'Tue',
|
||||
y: [new Date('2024-03-01').getTime(), new Date('2024-03-06').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-error))'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Weekly Scheduels</v-card-title>
|
||||
<apexchart type="rangeBar" class="rounded-pill-bars" height="300" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
|
||||
height: 220,
|
||||
type: 'bar',
|
||||
offsetX: -8,
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-primary))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))'
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '55%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [['Apr'], ['May'], ['June'], ['July'], ['Aug'], ['Sept'], ['Oct']],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Weekly Stats',
|
||||
data: [20, 15, 18, 25, 10, 15, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Weekly Stats</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Overview of Profit</v-card-subtitle>
|
||||
<div class="mx-n6">
|
||||
<apexchart type="bar" height="220" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-divider class="mb-7 mt-5"></v-divider>
|
||||
<div class="d-flex justify-space-between align-center gap-2">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="" class="bg-lighterror rounded-md">
|
||||
<Icon icon="solar:course-down-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">Sales</p>
|
||||
<h5 class="text-subtitle-1 font-weight-bold">$36,850</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="" class="bg-lightprimary rounded-md">
|
||||
<Icon icon="solar:chart-linear" class="text-primary" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">Expenses</p>
|
||||
<h5 class="text-subtitle-1 font-weight-bold">$4,720</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user