Chart: add show_legend toggle, document it, and add e2e test (#1270)

* Add show_legend option to chart component

* Fix show_legend for SQLite boolean values

* remove ai cruft

Author: lovasoa

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

@@ -657,6 +657,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('color', 'The name of a color in which to display the chart. If there are multiple series in the chart, this parameter can be repeated multiple times.', 'COLOR', TRUE, TRUE),
     ('stacked', 'Whether to cumulate values from different series.', 'BOOLEAN', TRUE, TRUE),
     ('toolbar', 'Whether to display a toolbar at the top right of the chart, that offers downloading the data as CSV.', 'BOOLEAN', TRUE, TRUE),
+    ('show_legend', 'Whether to display the legend listing all chart series. Defaults to true.', 'BOOLEAN', TRUE, TRUE),
     ('logarithmic', 'Display the y-axis in logarithmic scale.', 'BOOLEAN', TRUE, TRUE),
     ('horizontal', 'Displays a bar chart with horizontal bars instead of vertical ones.', 'BOOLEAN', TRUE, TRUE),
     ('height', 'Height of the chart, in pixels. By default: 250', 'INTEGER', TRUE, TRUE),
@@ -702,7 +703,7 @@ INSERT INTO example(component, description, properties) VALUES
         {"series": "Asia", "label": "China", "value": 20},
         {"series": "Asia", "label": "Japan", "value": 10}
     ]')),
-    ('chart', 'A bar chart with multiple series.', json('[{"component":"chart", "title": "Expenses", "type": "bar", "stacked": true, "toolbar": true, "ystep": 10}, '||
+    ('chart', 'A bar chart with multiple series.', json('[{"component":"chart", "title": "Expenses", "type": "bar", "stacked": true, "toolbar": true, "show_legend": false, "ystep": 10}, '||
     '{"series": "Marketing", "x": 2021, "value": 35}, '||
     '{"series": "Marketing", "x": 2022, "value": 15}, '||
     '{"series": "Human resources", "x": 2021, "value": 30}, '||

sqlpage/apexcharts.js

@@ -155,6 +155,9 @@ sqlpage_chart = (() => {
       theme: {
         palette: "palette4",
       },
+      legend: {
+        show: data.show_legend === null || !!data.show_legend,
+      },
       dataLabels: {
         enabled: !!data.labels,
         dropShadow: {

sqlpage/templates/chart.handlebars

@@ -31,6 +31,7 @@
     "xmax": {{stringify xmax}},
     "ymax": {{stringify ymax}},
     "toolbar": {{stringify toolbar}},
+    "show_legend": {{stringify show_legend}},
     "logarithmic": {{stringify logarithmic}},
     "horizontal": {{stringify horizontal}},
     "stacked": {{stringify stacked}},

tests/end-to-end/official-site.spec.ts

@@ -24,6 +24,17 @@ test("chart", async ({ page }) => {
   await expect(page.locator(".apexcharts-canvas").first()).toBeVisible();
 });
 
+test("chart supports hiding legend", async ({ page }) => {
+  await page.goto(`${BASE}/documentation.sql?component=chart#component`);
+
+  const expensesChart = page.locator(".card", {
+    has: page.getByRole("heading", { name: "Expenses" }),
+  });
+
+  await expect(expensesChart.locator(".apexcharts-canvas")).toBeVisible();
+  await expect(expensesChart.locator(".apexcharts-legend")).toBeHidden();
+});
+
 test("map", async ({ page }) => {
   await page.goto(`${BASE}/documentation.sql?component=map#component`);
   await expect(page.getByText("Loading...")).not.toBeVisible();