From 07fbe9966471195c7f820c277b309190b985beba Mon Sep 17 00:00:00 2001
From: Saeid Doroudi <doroudi@outlook.com>
Date: Wed, 18 Dec 2024 22:19:11 +0330
Subject: [PATCH] Make charts flow theme color #120

---
 src/App.vue                                   |  5 ++++-
 src/components.d.ts                           |  6 ++++++
 src/components/BarChart.vue                   | 21 +++++++++++++++++--
 .../CustomizeDialog/CustomizeDialog.vue       |  2 +-
 src/components/LineChart.vue                  |  6 +++---
 src/styles/main.scss                          |  3 ++-
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ff3eae1..6e3b7d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,8 +42,11 @@ watch(() => layout.isDark, (newValue) => {
 }, { immediate: true })
 
 watch(() => layout.themeColor, (newValue) => {
-  if (customTheme.value.common && newValue !== '')
+  if (customTheme.value.common && newValue !== '') {
     customTheme.value.common.primaryColor = newValue
+    customTheme.value.common.actionColor = newValue
+    document.documentElement.style.setProperty('--primary-color', newValue)
+  }
 }, { immediate: true })
 </script>
 
diff --git a/src/components.d.ts b/src/components.d.ts
index d88b6b0..826d437 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -36,12 +36,15 @@ declare module 'vue' {
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
@@ -50,6 +53,7 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
@@ -58,6 +62,8 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     PersianIcon: typeof import('./components/CountryIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index 2eb2380..8c7b9f1 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -42,7 +42,7 @@ const chartOptions = ref({
   dataLabels: {
     enabled: false,
   },
-  colors: buildThemeSeries(),
+  colors: ['var(--primary-color)', ...buildThemeSeries()],
   plotOptions: {
     bar: {
       columnWidth: '17%',
@@ -73,7 +73,24 @@ const series = ref([
 ])
 
 function buildThemeSeries() {
-  return ['#3db9af', '#37938d', '#276e6b', '#7fcdca']
+  return createThemeColors(useLayoutStore().themeColor, 4)
+}
+
+function createThemeColors(color, count) {
+  const result = []
+  for (let i = 0; i < count; i++)
+    result.push(makeLighter(color))
+
+  return result
+}
+
+function makeLighter(color) {
+  const colorHex = color.replace('#', '')
+  const colorR = Number.parseInt(colorHex.substring(0, 2), 16)
+  const colorG = Number.parseInt(colorHex.substring(2, 4), 16)
+  const colorB = Number.parseInt(colorHex.substring(4, 6), 16)
+  const lighterColor = `rgba(${colorR}, ${colorG}, ${colorB}, .4)`
+  return lighterColor
 }
 </script>
 
diff --git a/src/components/CustomizeDialog/CustomizeDialog.vue b/src/components/CustomizeDialog/CustomizeDialog.vue
index 579bac6..40ebaa6 100644
--- a/src/components/CustomizeDialog/CustomizeDialog.vue
+++ b/src/components/CustomizeDialog/CustomizeDialog.vue
@@ -21,7 +21,7 @@ function setDark() {
 }
 
 const colors = [
-  '#00ad4c', '#ef4848', '#FC0', '#FF8000', '#22d3ee',
+  '#00ad4c', '#cb2025', '#f8b334', '#FF8000', '#00a096',
 ]
 const selectedColorIndex = ref(0)
 function setColor(index) {
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
index df62bf5..59332a0 100644
--- a/src/components/LineChart.vue
+++ b/src/components/LineChart.vue
@@ -33,11 +33,11 @@ const barChartOptions = ref({
   stroke: {
     width: 3,
   },
-  colors: ['#377d71', '#fc0'],
+  colors: ['var(--primary-color)'],
   markers: {
     size: 3,
-    colors: ['#377d71', '#fc0'],
-    strokeColors: ['#377d71', '#fc0'],
+    colors: ['var(--primary-color)'],
+    strokeColors: ['var(--primary-color)'],
     strokeWidth: 3,
     strokeOpacity: 1,
     strokeDashArray: 0,
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6f56cb1..82bc96e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -4,6 +4,7 @@
 
 :root {
     --sidebar-width: 20rem;
+    --primary-color: #00ad4c;
 }
 
 html,
@@ -47,7 +48,7 @@ body {
 }
 
 #nprogress .bar {
-  background: rgb(13,148,136);
+  background: var(--primary-color);
   opacity: 0.75;
   position: fixed;
   z-index: 1031;