From 5a0d45f4d9dc1bc6c1472be00891fb55ba8fc4f4 Mon Sep 17 00:00:00 2001
From: tphvu-axonivy <vu.tongphanhoang@axonactive.com>
Date: Fri, 17 Jan 2025 16:14:57 +0700
Subject: [PATCH] IVYPORTAL-18247 Statistic on dark mode enhancemen MASTER

- add medium color in configuration
---
 .../resources/js/client-statistic.js          | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/AxonIvyPortal/portal/webContent/resources/js/client-statistic.js b/AxonIvyPortal/portal/webContent/resources/js/client-statistic.js
index 5cc73bd6d27..fb71baab32c 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/client-statistic.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/client-statistic.js
@@ -362,7 +362,14 @@ class ClientPieChart extends ClientCanvasChart {
         },
         options: {
           responsive: true,
-          maintainAspectRatio: false
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              labels: {
+                color: getCssVariable('--ivy-primary-color-medium')  
+              }
+            }
+          }
         }
       });
     }
@@ -407,7 +414,8 @@ class ClientCartesianChart extends ClientCanvasChart {
           datasets: [{
             label: config.name,
             data: data.map(bucket => bucket.count),
-            backgroundColor: chartColors
+            backgroundColor: chartColors,
+            borderColor:chartColors 
           }]
         },
         options: {
@@ -423,16 +431,28 @@ class ClientCartesianChart extends ClientCanvasChart {
               beginAtZero: true,
               title: {
                 text: chartTypeConfig.yTitle,
-                display: true
+                display: true,
+                color: getCssVariable('--ivy-primary-color-medium')
               },
               ticks: {
-                stepSize: stepSize
+                stepSize: stepSize,
+                color: getCssVariable('--ivy-primary-color-medium')
+              },
+              grid: {
+                color: getCssVariable('--ivy-primary-color-medium')
               }
             },
             x: {
               title: {
                 text: chartTypeConfig.xTitle,
-                display: true
+                display: true,
+                color: getCssVariable('--ivy-primary-color-medium')
+              },
+              ticks: {
+                color: getCssVariable('--ivy-primary-color-medium')
+              },
+              grid: {
+                color: getCssVariable('--ivy-primary-color-medium')
               }
             }
           }