DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add theming to Admin dashboard chart

Browse Source
This commit is contained in:
Jože Fortun
2024-01-26 13:18:15 +01:00
committed by Mumbi Francis
parent eded8d843c
commit a7147cb318
2 changed files with 47 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/web/admin/src/components/CTheMainNav.vue
View File

@@ -7,12 +7,12 @@
:key="g"
tag="li"
>
<h2
<h6
v-if="grp.header"
class="small ml-1 mt-2 font-weight-light text-uppercase"
class="mt-3 text-uppercase"
>
{{ $t(grp.header.label) }}
</h2>
</h6>
<c-sidebar-nav-items
:items="grp.items"

59
client/web/admin/src/views/Dashboard.vue
View File

@@ -35,9 +35,9 @@
{{ users.valid }}
</router-link>
</b-card-title>
<b-card-sub-title sub-title-tag="h4">
<h4>
{{ $t('users.title') }}
</b-card-sub-title>
</h4>
</template>
<c-chart
@@ -59,7 +59,7 @@
>
{{ users.total }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('users.total') }}
</span>
</b-col>
@@ -75,7 +75,7 @@
>
{{ users.suspended }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('users.suspended') }}
</span>
</b-col>
@@ -91,7 +91,7 @@
>
{{ users.deleted }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('users.deleted') }}
</span>
</b-col>
@@ -123,9 +123,9 @@
{{ roles.valid }}
</router-link>
</b-card-title>
<b-card-sub-title sub-title-tag="h4">
<h4>
{{ $t('roles.title') }}
</b-card-sub-title>
</h4>
</template>
<template #footer>
@@ -142,7 +142,7 @@
>
{{ roles.total }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('roles.total') }}
</span>
</b-col>
@@ -158,7 +158,7 @@
>
{{ roles.archived }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('roles.archived') }}
</span>
</b-col>
@@ -174,7 +174,7 @@
>
{{ roles.deleted }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('roles.deleted') }}
</span>
</b-col>
@@ -204,9 +204,9 @@
{{ applications.valid }}
</router-link>
</b-card-title>
<b-card-sub-title sub-title-tag="h4">
<h4>
{{ $t('applications.title') }}
</b-card-sub-title>
</h4>
</template>
<template #footer>
@@ -223,7 +223,7 @@
>
{{ applications.total }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('applications.total') }}
</span>
</b-col>
@@ -239,7 +239,7 @@
>
{{ applications.deleted }}
</router-link>
<span class="text-secondary d-sm-block">
<span class="d-sm-block">
{{ $t('applications.deleted') }}
</span>
</b-col>
@@ -316,6 +316,7 @@ export default {
return
}
const themeVariables = this.getThemeVariables()
const { dates, values } = this.getUserTimeline()
this.userChart = {
@@ -323,15 +324,31 @@ export default {
trigger: 'axis',
},
textStyle: {
fontFamily: 'Poppins-Regular',
fontFamily: themeVariables['font-regular'],
color: themeVariables.black,
},
xAxis: {
type: 'category',
data: dates,
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: 'value',
axisLine: {
show: false,
onZero: false,
},
splitLine: {
lineStyle: {
color: [themeVariables['secondary']],
},
},
},
grid: {
top: 20,
@@ -354,6 +371,18 @@ export default {
}
},
getThemeVariables () {
const getCssVariable = (variableName) => {
return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
}
// Turn below into an object with key value pairs
return ['white', 'black', 'primary', 'secondary', 'success', 'warning', 'danger', 'light', 'extra-light', 'dark', 'font-regular'].reduce((acc, variable) => {
acc[variable] = getCssVariable(`--${variable}`)
return acc
}, {})
},
getUserTimeline () {
const data = this.users.dailyCreated
const unit = this.getComfortableTimeUnit(data)