better time series support in the chart component

fixes #103

Author: lovasoa

CHANGELOG.md

@@ -9,6 +9,8 @@
  - CLarify some ambiguous error messages:
    - make it clearer whether the error comes from SQLPage or from the database
    - specific tokenization errors are now displayed as such
+ - Better support for time series in the [chart](https://sql.ophir.dev/documentation.sql?component=chart#component) component. You can now use the `time` top-attribute to display a time series chart
+ with smart x-axis labels.
 
 ## 0.13.0 (2023-10-16)
  - New [timeline](https://sql.ophir.dev/documentation.sql?component=timeline#component) component to display a timeline of events.

sqlpage/apexcharts.js

@@ -35,10 +35,12 @@ function sqlpage_chart() {
     for (const c of document.getElementsByClassName("chart")) {
         try {
             const data = JSON.parse(c.querySelector("data").innerText);
+            const is_timeseries = !!data.time;
             /** @type { Series } */
             const series_map = {};
             data.points.forEach(([name, x, y, z]) => {
                 series_map[name] = series_map[name] || { name, data: [] }
+                if (is_timeseries) x = new Date(x);
                 series_map[name].data.push({ x, y, z });
             })
             if (data.xmin == null) data.xmin = undefined;
@@ -105,7 +107,7 @@ function sqlpage_chart() {
                     title: {
                         text: data.xtitle || undefined,
                     },
-                    type: data.time ? 'datetime' : categories ? 'category' : undefined,
+                    type: is_timeseries ? 'datetime' : categories ? 'category' : undefined,
                 },
                 yaxis: {
                     logarithmic: !!data.logarithmic,