Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 28caa60

Browse files
themustafaomarthemustafaomar
committed
refactor: improve widgets
1 parent a783b20 commit 28caa60

File tree

14 files changed

+314
-49
lines changed

14 files changed

+314
-49
lines changed

‎package-lock.json‎

Lines changed: 182 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"eslint-plugin-vue": "^9.11.0",
4848
"prettier": "^2.8.4",
4949
"sass": "^1.60.0",
50+
"unplugin-vue-components": "^0.25.1",
5051
"vite": "^4.1.4",
5152
"vite-plugin-eslint": "^1.8.1",
5253
"vite-plugin-vuetify": "^1.0.2"

‎src/components/app/Autocomplete.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</Field>
2828
</template>
2929

30-
<script setup lang="ts">
30+
<script setup>
3131
import { computed, useSlots } from 'vue'
3232
import { Field } from 'vee-validate'
3333

‎src/components/app/Snackbar.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ const appStore = useAppStore()
2323
const options = computed(() => appStore.snackbar)
2424
const icon = computed(() => {
2525
let _icon = 'mdi-'
26-
if (options.value.color === 'primary') {
26+
const color = options.value.color
27+
if (color === 'primary') {
2728
_icon += 'check-circle-outline'
28-
} else if (options.value.color === 'info') {
29+
} else if (color === 'info') {
2930
_icon += 'information-slab-circle-outline'
30-
} else if (options.value.color === 'red') {
31+
} else if (color === 'red') {
3132
_icon += 'alert-circle-outline'
3233
}
3334
return _icon

‎src/components/app/TextField.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const props = defineProps({
3737
required: { type: Boolean, default: false },
3838
})
3939
const slots = useSlots()
40-
const slotsNames = Object.keys(slots).filter((name) => name !== 'label')
40+
const slotsNames = Object.keys(slots).filter((name) => name !== 'label')
4141
4242
// Get backend errors via vform
4343
const getBackendErrors = computed(() => {

‎src/components/dashboard/widgets/BarSimple.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script setup>
2-
import { ref, computed } from 'vue'
2+
import { computed } from 'vue'
33
import { BarChart, useBarChart } from 'vue-chart-3'
4-
import { salesRevenue } from '@/data/charts'
5-
import { months, numbers } from '@/assets/js/charts/utils'
4+
import { months } from '@/assets/js/charts/utils'
65
76
defineProps({
87
title: String,
@@ -14,7 +13,7 @@ defineProps({
1413
},
1514
})
1615
17-
const data = computed(() => ({
16+
const chartData = computed(() => ({
1817
labels: months({ count: 8 }),
1918
datasets: [
2019
{
@@ -33,7 +32,7 @@ const data = computed(() => ({
3332
],
3433
}))
3534
const { barChartProps } = useBarChart({
36-
chartData: data,
35+
chartData,
3736
options: {
3837
responsive: true,
3938
aspectRatio: 3.5,

‎src/components/dashboard/widgets/Pie.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
import { useTheme } from 'vuetify'
4+
import { DoughnutChart, useDoughnutChart } from 'vue-chart-3'
5+
6+
const { current } = useTheme()
7+
const chartData = computed(() => {
8+
return {
9+
labels: ['Finished', 'Processing', 'Canceled'],
10+
datasets: [
11+
{
12+
label: 'Total',
13+
data: [60, 25, 15],
14+
backgroundColor: [
15+
current.value.colors.primary,
16+
current.value.colors.warning,
17+
current.value.colors.error,
18+
],
19+
borderRadius: 6,
20+
hoverOffset: 10,
21+
hoverBorderColor: 'transparent',
22+
},
23+
],
24+
}
25+
})
26+
const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({
27+
chartData,
28+
options: {
29+
responsive: true,
30+
cutout: 70,
31+
32+
// Plugins
33+
plugins: {
34+
legend: {
35+
position: 'bottom',
36+
labels: {
37+
color: '#2d3748',
38+
padding: 15,
39+
font: {
40+
size: 14,
41+
family: 'Inter',
42+
},
43+
boxHeight: 12,
44+
// boxWidth: 50,
45+
usePointStyle: true,
46+
},
47+
},
48+
},
49+
},
50+
})
51+
</script>
52+
53+
<template>
54+
<v-sheet rounded="lg" class="shadow-sm pa-5">
55+
<div class="d-flex align-center justify-space-between mb-5">
56+
<div>
57+
<h2 class="text-h6 font-weight-medium mb-0">Order Statistics</h2>
58+
<p class="text-grey-darken-1 text-body-2">How has performened this month</p>
59+
</div>
60+
61+
<!-- <v-btn icon variant="flat" density="compact">
62+
<v-icon class="text-medium-emphasis" size="22">mdi-information-slab-circle-outline</v-icon>
63+
</v-btn> -->
64+
</div>
65+
66+
<DoughnutChart
67+
v-bind="doughnutChartProps"
68+
class="mx-auto"
69+
style="height: 275px; width: 275px"
70+
/>
71+
</v-sheet>
72+
</template>

‎src/components/dashboard/widgets/SalesRevenue.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup>
2-
import { ref, computed } from 'vue'
2+
import { computed } from 'vue'
33
import { BarChart, useBarChart } from 'vue-chart-3'
44
import { months } from '@/assets/js/charts/utils'
55
6-
const data = computed(() => ({
6+
const chartData = computed(() => ({
77
labels: months({ count: 12 }),
88
datasets: [
99
{
@@ -22,7 +22,7 @@ const data = computed(() => ({
2222
],
2323
}))
2424
const { barChartProps } = useBarChart({
25-
chartData: data,
25+
chartData,
2626
options: {
2727
responsive: true,
2828
aspectRatio: 3.5,

0 commit comments

Comments
 (0)