TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 04:01:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark mode in dashboard stats & chart (#1161)

Browse Source 
* add dark mode in dashboard stats & chart

* fix indentation on dashboard chart

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
This commit is contained in:
Yash Kanakiya
2023-03-28 15:32:51 +05:30
committed by GitHub
parent 1e6c3b287f
commit c36d25931f
10 changed files with 107 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/scripts/admin/components/charts/LineChart.vue
View File

@ -6,8 +6,17 @@
<script setup>
import Chart from 'chart.js'
import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
import {
ref,
reactive,
computed,
onMounted,
watchEffect,
inject,
watch,
} from 'vue'
import { useCompanyStore } from '@/scripts/admin/stores/company'
import { useGlobalStore } from '@/scripts/admin/stores/global'
const utils = inject('utils')
@ -44,9 +53,11 @@ const props = defineProps({
},
})
const isDarkModeOn = document.documentElement.classList.contains('dark')
let myLineChart = null
const graph = ref(null)
const companyStore = useCompanyStore()
const globalStore = useGlobalStore()
const defaultCurrency = computed(() => {
return companyStore.selectedCompanyCurrency
})
@ -60,6 +71,14 @@ watchEffect(() => {
}
})
watch(
() => globalStore.isDarkModeOn,
() => {
myLineChart.reset()
updateColors()
}
)
onMounted(() => {
let context = graph.value.getContext('2d')
let options = reactive({
@ -81,6 +100,8 @@ onMounted(() => {
},
})
const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
let data = reactive({
labels: props.labels,
datasets: [
@ -89,16 +110,16 @@ onMounted(() => {
fill: false,
lineTension: 0.3,
backgroundColor: 'rgba(230, 254, 249)',
borderColor: '#040405',
borderColor: salesColor,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#040405',
pointBorderColor: salesColor,
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#040405',
pointHoverBackgroundColor: salesColor,
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 4,
@ -194,4 +215,12 @@ function update() {
lazy: true,
})
}
function updateColors() {
const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
myLineChart.data.datasets[0].borderColor = newColor
myLineChart.data.datasets[0].pointBorderColor = newColor
myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
}
</script>

34
resources/scripts/admin/views/dashboard/DashboardChart.vue
View File

@ -2,8 +2,23 @@
<div>
<div
v-if="dashboardStore.isDashboardDataLoaded"
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
class="
grid
grid-cols-10
mt-8
bg-white
rounded shadow
dark:text-white
dark:backdrop-blur-xl
dark:shadow-glass
dark:border
dark:bg-opacity-70
dark:border-white/10
dark:bg-gray-800
relative
"
>
<BaseDarkHighlight />
<!-- Chart -->
<div
class="
@ -54,6 +69,7 @@
lg:border-t-0 lg:text-right lg:col-span-3
xl:col-span-2
lg:grid-cols-1
dark:border-white/10
"
>
<div class="p-6">
@ -96,15 +112,7 @@
</span>
<br />
<span
class="
block
mt-1
text-xl
font-semibold
leading-8
lg:text-2xl
text-red-400
"
class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
>
<BaseFormatMoney
:amount="dashboardStore.totalExpenses"
@ -116,8 +124,10 @@
class="
col-span-3
p-6
border-t border-gray-200 border-solid
border-t
border-gray-200 border-solid
lg:col-span-1
dark:border-white/10
"
>
<span class="text-xs leading-5 lg:text-sm">
@ -132,7 +142,7 @@
font-semibold
leading-8
lg:text-2xl
text-primary-500
text-primary-500 dark:text-primary-400
"
>
<BaseFormatMoney

4
resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
View File

@ -1,6 +1,6 @@
<template>
<BaseContentPlaceholders
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
>
<!-- Chart -->
<div
@ -29,6 +29,7 @@
text-center
border-t border-l border-gray-200 border-solid
lg:border-t-0 lg:text-right lg:col-span-3
dark:border-gray-600
xl:col-span-2
lg:grid-cols-1
"
@ -77,6 +78,7 @@
col-span-3
p-6
border-t border-gray-200 border-solid
dark:border-gray-600
lg:justify-end lg:items-end lg:col-span-1
"
>

10
resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
View File

@ -12,18 +12,24 @@
hover:bg-gray-50
xl:p-4
lg:col-span-2
dark:backdrop-blur-xl
dark:shadow-glass
dark:border
dark:border-white/10
dark:bg-gray-800/70
"
:class="{ 'lg:!col-span-3': large }"
:to="route"
>
<div>
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
<slot />
</span>
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
{{ label }}
</span>
</div>
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
<div class="flex items-center">
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
</div>

2
resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
View File

@ -1,7 +1,7 @@
<template>
<BaseContentPlaceholders
:rounded="true"
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
>
<div>
<BaseContentPlaceholdersText

1
resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
View File

@ -12,6 +12,7 @@
shadow
lg:col-span-2
xl:p-4
dark:bg-gray-800
"
>
<div>