Update componen template
This commit is contained in:
meninjar
Executable
+267
@@ -0,0 +1,267 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
/* Chart Color */
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
const lightprimary = theme.current.value.colors.lightprimary;
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
/* Chart 1 */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [primary, primary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
|
||||
/* Chart 2 */
|
||||
const chartOptions2 = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [secondary, secondary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart2 = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
|
||||
/* Chart 3 */
|
||||
const chartOptions3 = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 180,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
labels: ['Income', 'Current', 'Expance'],
|
||||
colors: [primary, 'rgba(var(--v-theme-light))', secondary],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
donut: {
|
||||
size: '89%',
|
||||
background: 'transparent',
|
||||
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: 7
|
||||
},
|
||||
value: {
|
||||
show: false
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
label: '$98,260'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart3 = [55,55,55];
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Current Value</v-card-title>
|
||||
<div class="">
|
||||
<v-btn color="primary" flat>buy</v-btn>
|
||||
<v-btn color="primary" variant="outlined" flat class="ml-2">sell</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-row class="mt-4 mb-1">
|
||||
<!--Income Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart type="bar" height="200" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Income</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$25,260</h4>
|
||||
<p class="text-body-1 text-success">+1.25%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!--Expence Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart type="bar" height="200" :options="chartOptions2" :series="Chart2"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Expance</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$12,260</h4>
|
||||
<p class="text-body-1 text-success">+4.25%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!--Current Year Chart-->
|
||||
<v-col cols="12" sm="4">
|
||||
<v-card variant="outlined" >
|
||||
<v-card-item>
|
||||
<apexchart class="mb-5" type="donut" height="180" :options="chartOptions3" :series="Chart3"> </apexchart>
|
||||
<v-card-subtitle class="text-subtitle-1">Current Year</v-card-subtitle>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<h4 class="text-h4">$98,260</h4>
|
||||
<p class="text-subtitle-1 text-success">+2.5%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+61
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/*Chart*/
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [getSecondary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0.05
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<p class="text-subtitle-1 textSecondary">Customers</p>
|
||||
<h4 class="text-h4 my-2">36,358</h4>
|
||||
<div>
|
||||
<v-avatar class="bg-lighterror" size="20">
|
||||
<ArrowDownRightIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ml-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="" type="area" height="80" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+67
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 90,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [primary],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: true
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [0, 3, 1, 2, 8, 1, 5, 1]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">2,545 </v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Earned</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-success">+1.20%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="mt-3" type="area" height="90" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+57
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [primary],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name:'',
|
||||
data: [0, 150, 110, 240, 200, 200, 300, 200],
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="overflow-hidden">
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">2,545</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Followers</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-success">+1.20%</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart class="mt-4" type="area" height="88" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#a1aab2',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getPrimary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.5,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [25, 66, 20, 40, 12, 58, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item class="">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Monthly Earnings</v-card-title>
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<img src="@/assets/images/svgs/icon-master-card-2.svg" alt="ico" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
<div class="mb-8 d-flex align-center mt-5">
|
||||
<h3 class="text-h3 font-weight-bold">$6,820</h3>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar class="bg-lightsuccess text-success ml-2" size="20">
|
||||
<ArrowUpLeftIcon size="18" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<div class="pt-2">
|
||||
<apexchart type="area" height="80" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+113
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const select = ref('March 2022');
|
||||
const items = ref(['March 2022', 'April 2022', 'May 2022']);
|
||||
const theme = useTheme();
|
||||
const primary = theme.current.value.colors.primary;
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 265,
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true
|
||||
},
|
||||
colors: [primary, secondary],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: [6],
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '40%',
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['01', '02', '03', '04', '05', '06'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: 'San Francisco',
|
||||
data: [44, 55, 41, 67, 22, 43]
|
||||
},
|
||||
{
|
||||
name: 'Diego',
|
||||
data: [13, 23, 20, 8, 13, 27]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5 mb-0">Most Visited</v-card-title>
|
||||
<div class="my-sm-0 my-2">
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
class="text-body-1"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n3 mt-5">
|
||||
<apexchart type="bar" height="265" class="rounded-bars" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center pb-1 justify-center">
|
||||
<p class="text-body-1 textSecondary d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> San Francisco
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5 d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Diego
|
||||
</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+100
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { ArrowDownRightIcon } from 'vue-tabler-icons';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
const lightsecondary = theme.current.value.colors.lightsecondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
height: 100,
|
||||
type: 'bar',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary],
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '64%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Page Impressions</v-card-title>
|
||||
<v-row>
|
||||
<v-col cols="5">
|
||||
<h4 class="text-h4 mt-6">$456,120</h4>
|
||||
<p class="text-12 textSecondary">(Change Yesterday)</p>
|
||||
<div class="pt-2">
|
||||
<v-avatar class="bg-lighterror" size="20">
|
||||
<ArrowDownRightIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ms-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<apexchart class="" type="bar" height="100" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
height: 80,
|
||||
type: 'bar',
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '40%',
|
||||
distributed: true,
|
||||
endingShape: 'all',
|
||||
borderRadiusApplication: 'end'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2.5,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = [
|
||||
{
|
||||
name: '',
|
||||
data: [4, 10, 9, 7, 9, 10]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<p class="text-subtitle-1 textSecondary">Projects</p>
|
||||
<h4 class="text-h4 my-1">78,298</h4>
|
||||
<div>
|
||||
<v-avatar class="bg-lightsuccess" size="20">
|
||||
<ArrowUpLeftIcon size="15" class="text-success" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1 ms-2 textSecondary">+9%</span>
|
||||
</div>
|
||||
<apexchart class="" type="bar" height="80" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+99
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
const select = ref('March 2022');
|
||||
const items = ref(['March 2022', 'April 2022', 'May 2022']);
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 320,
|
||||
type: 'bar',
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true
|
||||
},
|
||||
colors: [getPrimary.value, getSecondary.value],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '20%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [
|
||||
{
|
||||
name: '',
|
||||
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Revenue Updates</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Overview of Profit</v-card-subtitle>
|
||||
<div class="d-flex align-center mt-6">
|
||||
<p class="text-body-1 textSecondary d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> Footware
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5 d-flex align-center">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Fashionware
|
||||
</p>
|
||||
</div>
|
||||
<div class="mx-n4">
|
||||
<apexchart class="pt-1 revenuechart" type="bar" height="320" :options="chartOptions" :series="seriescolumnchart">
|
||||
</apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style type="text/css">
|
||||
.revenuechart .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
</style>
|
||||
Executable
+96
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['Profit', 'Revenue', 'Expance'],
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'donut',
|
||||
foreColor: '#adb0bb',
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [getPrimary.value, getLightPrimary.value, getSecondary.value],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '89%',
|
||||
background: 'transparent',
|
||||
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: 7
|
||||
},
|
||||
value: {
|
||||
show: false
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
label: '$500,458'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [55, 55, 55];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Sales Overview</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Every month</v-card-subtitle>
|
||||
<apexchart class="mt-6" type="donut" height="240" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
|
||||
<v-row class="mt-5">
|
||||
<v-col cols="6">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h3 class="text-h6">$23,450</h3>
|
||||
<p class="text-body-1 textSecondary">Profit</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex justify-lg-start justify-end">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightsecondary text-secondary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h3 class="text-h6">$23,450</h3>
|
||||
<p class="text-body-1 textSecondary">Expance</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+88
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 55,
|
||||
fontFamily: `inherit`,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [secondary],
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '60%',
|
||||
barHeight: '18%',
|
||||
borderRadius: 3
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2.5,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const seriescolumnchart = [
|
||||
{
|
||||
name: 'projects',
|
||||
data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 12, 9]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-subtitle class="text-subtitle-1">Total Earning</v-card-subtitle>
|
||||
<v-card-title class="text-h5">$78,298</v-card-title>
|
||||
<div class="mx-n1">
|
||||
<apexchart class="mt-sm-13 mt-10" type="bar" height="55" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+91
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
const theme = useTheme();
|
||||
const secondary = theme.current.value.colors.secondary;
|
||||
const lightsecondary = theme.current.value.colors.lightsecondary;
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 80,
|
||||
fontFamily: `inherit`,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary, lightsecondary],
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '50%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-flex justify-space-between align-end">
|
||||
<div>
|
||||
<v-card-title class="text-h5">15,480</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 pb-0">Views</v-card-subtitle>
|
||||
</div>
|
||||
<p class="text-subtitle-1 text-error">-4.150%</p>
|
||||
</div>
|
||||
<div class="mx-n1">
|
||||
<apexchart class="mt-6" type="bar" height="80" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/ Chart /
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['', '', ''],
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 150,
|
||||
fontFamily: `inherit`,
|
||||
foreColor: '#a1aab2',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [getPrimary.value, 'rgba(var(--v-theme-light))', '#F9F9FD'],
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
donut: {
|
||||
size: '75%',
|
||||
background: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
chart: {
|
||||
height: 140
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
height: 130
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
const Chart = [38, 40, 25];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<div class="d-sm-flex align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Yearly Breakup</v-card-title>
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols="7" sm="7">
|
||||
<div class="mt-3">
|
||||
<h3 class="text-h3">$36,358</h3>
|
||||
<div class="mt-2 d-flex gap-2 align-center">
|
||||
<v-avatar class="bg-lightsuccess text-success" size="25">
|
||||
<ArrowUpLeftIcon size="20" />
|
||||
</v-avatar>
|
||||
<span class="text-body-1">+9%</span>
|
||||
<span class="text-body-1 textSecondary ">last year</span>
|
||||
</div>
|
||||
<div class="d-flex align-center mt-sm-10 mt-8">
|
||||
<p class="text-body-1 textSecondary">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="primary"></v-icon> 2023
|
||||
</p>
|
||||
<p class="text-body-1 textSecondary pl-5">
|
||||
<v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="light "></v-icon> 2024
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="5" sm="5">
|
||||
<div class="d-flex align-center flex-shrink-0">
|
||||
<apexchart class="pt-6" type="donut" height="150" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+124
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getPrimary, getLight100, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
height: 310,
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value,
|
||||
,
|
||||
getLightPrimary.value,
|
||||
,
|
||||
getLightPrimary.value,
|
||||
getLightPrimary.value
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 3,
|
||||
columnWidth: '53%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [['Apr'], ['May'], ['June'], ['July'], ['Aug'], ['Sept'], ['Oct']],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: [20, 15, 30, 25, 10, 15, 12]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Yearly Sales</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 textSecondary">Total Sales</v-card-subtitle>
|
||||
<div class="mx-n2">
|
||||
<apexchart type="bar" height="310" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-row class="mt-1">
|
||||
<v-col cols="6">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-lightprimary text-primary">
|
||||
<GridDotsIcon size="22" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="text-body-1 textSecondary">Salary</p>
|
||||
<h3 class="text-h6">$36,358</h3>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex justify-end">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar class="rounded-md bg-grey100 textSecondary">
|
||||
<GridDotsIcon size="22" class="text-medium-emphasis" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="text-body-1 textSecondary">Expance</p>
|
||||
<h3 class="text-h6">$5,296</h3>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user