From a690b0ace06602174238e800cd126e624c329fb9 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sun, 11 Jun 2023 00:18:07 +0200
Subject: [PATCH] improve chart component

---
 sqlpage/sqlpage.js                 | 14 +++++++++++++-
 sqlpage/templates/chart.handlebars |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js
index c6a55273..65babef9 100644
--- a/sqlpage/sqlpage.js
+++ b/sqlpage/sqlpage.js
@@ -3,6 +3,10 @@
 /* !include https://cdn.jsdelivr.net/npm/apexcharts@3.41.0/dist/apexcharts.min.js */
 
 function sqlpage_chart() {
+
+    const tblrColors = Object.fromEntries(['azure', 'red', 'lime', 'blue', 'pink', 'indigo', 'purple', 'yellow', 'cyan', 'green', 'orange', 'cyan']
+                  .map(c => [c, getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + c)]));
+
     /** @typedef { { [name:string]: {data:{x:number,y:number}[], name:string} } } Series */
 
     /**
@@ -43,6 +47,11 @@ function sqlpage_chart() {
         if (data.ymin == null) data.ymin = 0;
         if (data.ymax == null) data.ymax = undefined;
 
+        const colors = [
+          ...data.colors.filter(c => c).map(c => tblrColors[c]),
+          ...Object.values(tblrColors)
+        ];
+
         let series = Object.values(series_map);
 
         // tickamount is the number of intervals, not the number of ticks
@@ -80,7 +89,6 @@ function sqlpage_chart() {
             enabled: !!data.labels,
           },
           fill: {
-            opacity: .7,
             type: data.type === 'area' ? 'gradient' : 'solid',
           },
           stroke: {
@@ -115,6 +123,10 @@ function sqlpage_chart() {
               sizeOffset: 5,
             }
           },
+          tooltip: {
+            fillSeriesColor: false,
+          },
+          colors,
           series,
         };
         if (labels) options.labels = labels;
diff --git a/sqlpage/templates/chart.handlebars b/sqlpage/templates/chart.handlebars
index 8fa30908..715b88fa 100644
--- a/sqlpage/templates/chart.handlebars
+++ b/sqlpage/templates/chart.handlebars
@@ -25,6 +25,7 @@
     "logarithmic": {{stringify logarithmic}},
     "stacked": {{stringify stacked}},
     "height": {{stringify (default height 250)}},
+    "colors": {{stringify (to_array color)}},
     "points": [
     {{~#each_row~}}
         {{~#if (gt @row_index 0)}},{{/if~}}