From a7147cb31884f404e4f4e0a5e5c80cf2e19f3519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 26 Jan 2024 13:18:15 +0100
Subject: [PATCH] Add theming to Admin dashboard chart

---
 .../web/admin/src/components/CTheMainNav.vue  |  6 +-
 client/web/admin/src/views/Dashboard.vue      | 59 ++++++++++++++-----
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/client/web/admin/src/components/CTheMainNav.vue b/client/web/admin/src/components/CTheMainNav.vue
index dd158e3a2..63c7e1288 100644
--- a/client/web/admin/src/components/CTheMainNav.vue
+++ b/client/web/admin/src/components/CTheMainNav.vue
@@ -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"
diff --git a/client/web/admin/src/views/Dashboard.vue b/client/web/admin/src/views/Dashboard.vue
index 93b42b13a..4ea732e52 100644
--- a/client/web/admin/src/views/Dashboard.vue
+++ b/client/web/admin/src/views/Dashboard.vue
@@ -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)