improve chart component

sqlpage/sqlpage.js

@@ -3,6 +3,10 @@
 /* !include https://cdn.jsdelivr.net/npm/[email protected]/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;

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~}}