Fix show_legend for SQLite boolean values

Author: lovasoa

examples/official-site/examples/chart_hide_legend.sql

@@ -0,0 +1,13 @@
+SELECT
+    'chart' AS component,
+    'Legend Hidden' AS title,
+    'line' AS type,
+    FALSE AS show_legend;
+
+SELECT 'Marketing' AS series, 2023 AS x, 30 AS y
+UNION ALL
+SELECT 'Marketing', 2024, 45
+UNION ALL
+SELECT 'Sales', 2023, 35
+UNION ALL
+SELECT 'Sales', 2024, 50;

sqlpage/apexcharts.js

@@ -1,6 +1,25 @@
 /* !include https://cdn.jsdelivr.net/npm/apexcharts@5.3.6/dist/apexcharts.min.js */
 
 sqlpage_chart = (() => {
+  /**
+   * Coerces SQL values to booleans.
+   * SQLite often returns booleans as 0/1 integers.
+   * @param {unknown} value
+   * @param {boolean} defaultValue
+   * @returns {boolean}
+   */
+  function sqlBoolean(value, defaultValue = false) {
+    if (value == null) return defaultValue;
+    if (typeof value === "boolean") return value;
+    if (typeof value === "number") return value !== 0;
+    if (typeof value === "string") {
+      const normalized = value.trim().toLowerCase();
+      if (normalized === "0" || normalized === "false") return false;
+      if (normalized === "1" || normalized === "true") return true;
+    }
+    return Boolean(value);
+  }
+
   function sqlpage_chart() {
     for (const c of document.querySelectorAll("[data-pre-init=chart]")) {
       try {
@@ -156,7 +175,7 @@ sqlpage_chart = (() => {
         palette: "palette4",
       },
       legend: {
-        show: data.show_legend !== false,
+        show: sqlBoolean(data.show_legend, true),
       },
       dataLabels: {
         enabled: !!data.labels,

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

@@ -35,6 +35,19 @@ test("chart supports hiding legend", async ({ page }) => {
   await expect(expensesChart.locator(".apexcharts-legend")).toBeHidden();
 });
 
+test("chart supports hiding legend with SQL boolean false", async ({
+  page,
+}) => {
+  await page.goto(`${BASE}/examples/chart_hide_legend.sql`);
+
+  const chart = page.locator(".card", {
+    has: page.getByRole("heading", { name: "Legend Hidden" }),
+  });
+
+  await expect(chart.locator(".apexcharts-canvas")).toBeVisible();
+  await expect(chart.locator(".apexcharts-legend")).toBeHidden();
+});
+
 test("map", async ({ page }) => {
   await page.goto(`${BASE}/documentation.sql?component=map#component`);
   await expect(page.getByText("Loading...")).not.toBeVisible();