fix(chart) :: fallback to default palette on unknown colour

Before unmatched colours reached ApexCharts as undefined and fell back to white (often on a white background).

Now unknown colours are dropped and SQLPage falls back to the default palette.

Author: 81reap

frontend/src/apexcharts.js

@@ -131,7 +131,7 @@ const sqlpage_chart = (() => {
     if (data.ymax == null) data.ymax = undefined;
 
     const palette = [
-      ...data.colors.filter((c) => c).map((c) => colorNames[c]),
+      ...data.colors.map(named_color).filter((c) => c !== undefined),
       ...tblrColors.map(([_, dark, light]) => (isDarkTheme ? dark : light)),
       ...tblrColors.map(([_, dark, light]) => (isDarkTheme ? light : dark)),
     ];

tests/end-to-end/fixtures/chart/test.ts

@@ -487,6 +487,16 @@ test("keeps the color of the series when a row names a color SQLPage does not kn
   expect(fills(unknown)).toEqual(fills(plain));
 });
 
+test("keeps the default palette when the chart names a color SQLPage does not know", async ({
+  page,
+}) => {
+  const plain = await renderChart(page, "uncolored-bar");
+  const unknown = await renderChart(page, "unknown-chart-color");
+
+  expect(unknown.failures).toEqual([]);
+  expect(fills(unknown)).toEqual(fills(plain));
+});
+
 test("renders series named after built-in JavaScript properties", async ({
   page,
 }) => {

tests/end-to-end/fixtures/chart/unknown-chart-color.sql

@@ -0,0 +1,2 @@
+SELECT 'chart' AS component, 'test-chart' AS id, 'Chart test fixture' AS title, 'bar' AS type, 'chartreuse' AS color, 4 AS marker;
+WITH points(series, x, y) AS (VALUES ('A', 'Q1', 1), ('A', 'Q2', 2)) SELECT * FROM points;