add an example for heatmaps

Author: lovasoa

CHANGELOG.md

@@ -15,6 +15,7 @@
  - Add a new [configuration option](./configuration.md): `environment`. This allows you to set the environment in which SQLPage is running. It can be either `development` or `production`. In `production` mode, SQLPage will hide error messages and stack traces from the user, and will cache sql files in memory to avoid reloading them from disk when under heavy load.
  - Add support for `selected` in multi-select inputs in the [form](https://sql.ophir.dev/documentation.sql?component=form#component) component. This allows you to pre-select some options in a multi-select input.
  - New function: [`sqlpage.protocol`](https://sql.ophir.dev/functions.sql?function=protocol#function) to get the protocol used to access the current page. This is useful to build links that point to your own site, and work both in http and https.
+ - Add an example to the documentation showing how to create heatmaps with the [chart](https://sql.ophir.dev/documentation.sql?component=chart#component) component.
 
 ## 0.17.0
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -520,7 +520,26 @@ INSERT INTO example(component, description, properties) VALUES
         {"series": "United States", "x": 2.3, "y": 21},
         {"series": "France", "x": 1.5, "y": 3},
         {"series": "South Africa", "x": 0.9, "y": 0.3}
-    ]'));
+    ]')),
+    ('chart', '
+## Heatmaps
+
+You can build heatmaps using the `heatmap` top-level property.
+
+The data format follows the [apexcharts heatmap format](https://apexcharts.com/angular-chart-demos/heatmap-charts/basic/),
+where each series is represented as a line in the chart:
+ - The `x` property of each item will be used as the x-axis value.
+ - The `series` property of each item will be used as the y-axis value.
+ - The `y` property of each item will be used as the value to display in the heatmap
+
+The `color` property sets the color of each series separately, in order.
+',json('[
+        {"component":"chart", "title": "Survey Results", "type": "heatmap",
+        "ytitle": "Database managemet system", "xtitle": "Year", "color": ["blue","blue","blue"]},
+        { "series": "PostgreSQL", "x": "2000", "y": 48},{ "series": "SQLite", "x": "2000", "y": 14},{ "series": "MySQL", "x": "2000", "y": 78},
+        { "series": "PostgreSQL", "x": "2010", "y": 65},{ "series": "SQLite", "x": "2010", "y": 22},{ "series": "MySQL", "x": "2010", "y": 83},
+        { "series": "PostgreSQL", "x": "2020", "y": 73},{ "series": "SQLite", "x": "2020", "y": 28},{ "series": "MySQL", "x": "2020", "y": 87}
+      ]'));
 
 INSERT INTO component(name, icon, description) VALUES
     ('table', 'table', 'A table with optional filtering and sorting. Unlike most others, this component does not have a fixed set of item properties, any property that is used will be rendered directly as a column in the table.');

sqlpage/apexcharts.js

@@ -17,7 +17,7 @@ function sqlpage_chart() {
             var category = null;
             series.forEach((s, s_i) => {
                 const point = s.data[0];
-                let new_point = { x: category, y: NaN };
+                let new_point = { x: category, y: 0 };
                 if (point) {
                     if (category == null) category = point.x;
                     if (category === point.x) {