From 947a1441d8e9aef6ce60c4417203b4882f8ab3fb Mon Sep 17 00:00:00 2001
From: Connor Yoh <con.yoh13@gmail.com>
Date: Tue, 25 Mar 2025 16:20:16 +0000
Subject: [PATCH] Colours and toptip for chart now working

---
 src/main/resources/static/js/usage.js   | 20 ++++++++++----------
 src/main/resources/templates/usage.html |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/static/js/usage.js b/src/main/resources/static/js/usage.js
index a7f30c4c8..93d041f8b 100644
--- a/src/main/resources/static/js/usage.js
+++ b/src/main/resources/static/js/usage.js
@@ -29,9 +29,9 @@ function getChartColors() {
     textColor: style.getPropertyValue('--md-sys-color-on-surface') ,
     primaryColor:  style.getPropertyValue('--md-sys-color-primary'),
     backgroundColor: style.getPropertyValue('--md-sys-color-background'),
-    gridColor: style.getPropertyValue('--md-sys-color-surface-variant'),
+    gridColor: style.getPropertyValue('--md-sys-color-on-surface'),
     tooltipBgColor: style.getPropertyValue('--md-sys-color-inverse-on-surface'),
-    tooltipTextColor: style.getPropertyValue('rgb(238, 241, 250)')
+    tooltipTextColor: style.getPropertyValue('--md-sys-color-inverse-surface')
   }
   return colours;
 }
@@ -232,7 +232,7 @@ function updateChart(dataLimit) {
           display: true,
           position: 'top',
           labels: {
-            color: colors.textColor,
+            color: colors.primaryColor,
             font: {
               weight: 'bold'
             }
@@ -242,7 +242,7 @@ function updateChart(dataLimit) {
           backgroundColor: colors.tooltipBgColor,
           titleColor: colors.tooltipTextColor,
           bodyColor: colors.tooltipTextColor,
-          borderColor: colors.gridColor,
+          borderColor: colors.tooltipBgColor,
           borderWidth: 1,
           padding: 12,
           cornerRadius: 8,
@@ -263,8 +263,8 @@ function updateChart(dataLimit) {
               // e.g. "Visits: 12 (34% of total)"
               // If your translation includes placeholders, you'd parse them here:
               return endpointStatsTranslations.visitsTooltip
-                .replace('{value}', value.toLocaleString())
-                .replace('{percentage}', percentage);
+                .replace('{0}', value.toLocaleString())
+                .replace('{1}', percentage);
             }
           }
         }
@@ -275,7 +275,7 @@ function updateChart(dataLimit) {
             color: colors.gridColor
           },
           ticks: {
-            color: colors.textColor,
+            color: colors.gridColor,
             font: {
               size: 12
             },
@@ -285,7 +285,7 @@ function updateChart(dataLimit) {
             }
           },
           grid: {
-            color: `${colors.gridColor}33`
+            color: `${colors.gridColor}`
           }
         },
         y: {
@@ -294,14 +294,14 @@ function updateChart(dataLimit) {
           },
           min: 0,
           ticks: {
-            color: colors.textColor,
+            color: colors.gridColor,
             font: {
               size: 12
             },
             precision: 0
           },
           grid: {
-            color: `${colors.gridColor}33`
+            color: `${colors.gridColor}`
           }
         }
       }
diff --git a/src/main/resources/templates/usage.html b/src/main/resources/templates/usage.html
index 016f98d36..e25292bc3 100644
--- a/src/main/resources/templates/usage.html
+++ b/src/main/resources/templates/usage.html
@@ -98,7 +98,7 @@
 		    login: /*[[#{endpointStatistics.login}]]*/ 'Login',
 		    top: /*[[#{endpointStatistics.top}]]*/ 'Top ',
 		    numberOfVisits: /*[[#{endpointStatistics.numberOfVisits}]]*/ 'Number of Visits',
-		    visitsTooltip: /*[[#{endpointStatistics.visitsTooltip}]]*/ 'Visits: {value} ({percentage}% of total)',
+		    visitsTooltip: /*[[#{endpointStatistics.visitsTooltip}]]*/ 'Visits: {0} ({1}% of total)',
 		    retry: /*[[#{endpointStatistics.retry}]]*/ 'Retry'
 		  };
 		</script>