refactor(frontend) :: enable noImplicitAny

`noImplicitAny` is now enabled.

Most of the remaining implicit workarounds rooted from `JSON.parse(data_element.textContent)`.

This found 3 bugs due to `as ChartPoint` ::
1. `ChartPoint.x` excluded null, `z` was a number, and `y` excluded the `string[]` two `value` columns return.
2. `ChartSeries.name` was a string, and the test pinning a numeric series name has passed all along.
3. `merged_x_values` compares x values that may be null, which JavaScript reads as zero.

Most remaining work arounds we should step back and think big about if we need to upstreaming patches along with the fixes.

Author: 81reap

frontend/src/apexcharts.ts

@@ -0,0 +1,109 @@
+import type { PlotValue } from "./chart_series.ts";
+
+export type DataPoint = {
+  name: string | number;
+  x: PlotValue;
+  y: PlotValue | PlotValue[];
+  color: PlotValue;
+  z: PlotValue | undefined;
+  link: string | undefined;
+};
+
+/** A row that draws a line across the chart instead of plotting a point. */
+export type ReferenceLine = Record<
+  "xline" | "xline_end" | "yline" | "yline_end" | "label" | "color",
+  PlotValue
+>;
+
+/** One chart's properties, as `chart.handlebars` encodes them. */
+export type ChartData = {
+  type: string;
+  time: boolean;
+  labels: boolean;
+  marker: number | undefined;
+  xtitle: string | undefined;
+  ytitle: string | undefined;
+  ztitle: string | undefined;
+  xticks: number | undefined;
+  yticks: number | undefined;
+  ystep: number | undefined;
+  xmin: number | undefined;
+  ymin: number | undefined;
+  xmax: number | undefined;
+  ymax: number | undefined;
+  toolbar: boolean;
+  show_legend: boolean;
+  logarithmic: boolean;
+  horizontal: boolean;
+  stacked: boolean;
+  colors: PlotValue[];
+  points: DataPoint[];
+  reference_lines: ReferenceLine[];
+};
+
+const plot_value = (value: unknown): PlotValue => {
+  if (value == null) return null;
+  if (typeof value === "number" || typeof value === "string") return value;
+  if (typeof value === "boolean") return Number(value);
+  return String(value);
+};
+
+const text_value = (value: unknown) =>
+  String(plot_value(value) ?? "") || undefined;
+
+const number_value = (value: unknown) => {
+  const text = plot_value(value);
+  const number = text == null || text === "" ? Number.NaN : Number(text);
+  return Number.isFinite(number) ? number : undefined;
+};
+
+const data_point = ([name, x, y, color, z, link]: unknown[]): DataPoint => ({
+  name: plot_value(name) ?? "",
+  x: plot_value(x),
+  y: Array.isArray(y) ? y.map(plot_value) : plot_value(y),
+  color: plot_value(color),
+  // ApexCharts reads a point as three-dimensional as soon as it carries a z,
+  // so a row that never mentioned one must not carry a null.
+  z: z === undefined ? undefined : plot_value(z),
+  link: text_value(link),
+});
+
+const reference_line = (row: Record<string, unknown>): ReferenceLine => ({
+  xline: plot_value(row.xline),
+  xline_end: plot_value(row.xline_end),
+  yline: plot_value(row.yline),
+  yline_end: plot_value(row.yline_end),
+  label: plot_value(row.label),
+  color: plot_value(row.color),
+});
+
+export function read_chart_data(json: string | null): ChartData {
+  const data = JSON.parse(json ?? "");
+  const rows = Array.isArray(data.points) ? data.points : [];
+  return {
+    type: text_value(data.type) ?? "",
+    time: !!data.time,
+    labels: !!data.labels,
+    marker: number_value(data.marker),
+    xtitle: text_value(data.xtitle),
+    ytitle: text_value(data.ytitle),
+    ztitle: text_value(data.ztitle),
+    xticks: number_value(data.xticks),
+    yticks: number_value(data.yticks),
+    ystep: number_value(data.ystep),
+    xmin: number_value(data.xmin),
+    ymin: number_value(data.ymin),
+    xmax: number_value(data.xmax),
+    ymax: number_value(data.ymax),
+    toolbar: !!data.toolbar,
+    show_legend: data.show_legend == null || !!data.show_legend,
+    logarithmic: !!data.logarithmic,
+    horizontal: !!data.horizontal,
+    stacked: !!data.stacked,
+    colors: Array.isArray(data.colors) ? data.colors.map(plot_value) : [],
+    points: rows.filter(Array.isArray).map(data_point),
+    reference_lines: rows
+      .filter((row: unknown) => !Array.isArray(row))
+      .map(reference_line),
+  };
+}

frontend/src/chart_data.ts

@@ -1,13 +1,14 @@
-export type XValue = number | string | Date;
+export type PlotValue = string | number | null;
+export type XValue = PlotValue | Date;
 export type ChartPoint = {
   x: XValue;
-  y: number | string | number[] | null;
-  z?: number;
+  y: PlotValue | PlotValue[];
+  z?: PlotValue;
   fillColor?: string;
   link?: string;
 };
-export type ChartSeries = { name: string; data: ChartPoint[] };
-export type Series = Map<string, ChartSeries>;
+export type ChartSeries = { name: string | number; data: ChartPoint[] };
+export type Series = Map<ChartSeries["name"], ChartSeries>;
 
 const NUMERIC_X_CHART_TYPES = ["line", "area", "bar", "scatter", "bubble"];
 
@@ -21,8 +22,10 @@ const Y_WHEN_A_SERIES_SKIPS_A_LABEL = new Map<string, number | null>([
 ]);
 
 /** equal x values share a key */
-const x_key = (x: XValue): number | string =>
-  x instanceof Date ? x.getTime() : x;
+const x_key = (x: XValue): PlotValue => (x instanceof Date ? x.getTime() : x);
+
+/** A missing x sorts as zero, which is how JavaScript compares it. */
+const is_lower = (x: XValue, than: XValue) => (x ?? 0) < (than ?? 0);
 
 const x_is_text = (series: ChartSeries[]) =>
   typeof series[0]?.data?.[0]?.x === "string";
@@ -50,11 +53,11 @@ export function xaxis_type_for(
  */
 export function merged_x_values(series: ChartSeries[]): XValue[] {
   const unread = series.map(({ data }) => data.map(({ x }) => x));
-  const merged = new Map();
+  const merged = new Map<PlotValue, XValue>();
   while (unread.some((xs) => xs.length > 0)) {
     const with_lowest_x = unread
       .filter((xs) => xs.length > 0)
-      .reduce((a, b) => (b[0] < a[0] ? b : a));
+      .reduce((a, b) => (is_lower(b[0], a[0]) ? b : a));
     const x = with_lowest_x.shift() as XValue;
     merged.set(x_key(x), x);
   }

frontend/src/chart_series.ts

@@ -1,8 +1,14 @@
-// Names the browser bundle relies on at runtime rather than through an import.
+// What the bundle installs on the page at runtime rather than through an
+// import: the page's own scripts and the browser tests read these back.
 
 interface Window {
   /** Every chart rendered on the page, in the order they were built. */
-  charts?: unknown[];
+  charts?: import("./apexcharts.ts").RenderedChart[];
   /** A Bootstrap a page loaded for itself, preferred over the bundled copy. */
   bootstrap?: typeof import("@tabler/core").bootstrap;
 }
+
+interface HTMLElement {
+  /** Attached by sqlpage_select_dropdown to every select it takes over. */
+  tomselect?: import("tom-select/popular").default;
+}

frontend/src/globals.d.ts

@@ -30,5 +30,5 @@ export const test = base.extend({
   },
 });
 
-export type { Page } from "@playwright/test";
+export type { ConsoleMessage, Page } from "@playwright/test";
 export { expect };

tests/end-to-end/fixture.ts

@@ -0,0 +1,2 @@
+SELECT 'chart' AS component, 'test-chart' AS id, 'Chart test fixture' AS title, 'pie' AS type, TRUE AS labels;
+WITH points(label, value) AS (VALUES ('Yes', 65), ('No', 35)) SELECT * FROM points;

tests/end-to-end/fixtures/chart/labeled-pie.sql

@@ -0,0 +1,3 @@
+SELECT 'chart' AS component, 'test-chart' AS id, 'Chart test fixture' AS title, 'rangeBar' AS type, TRUE AS time, TRUE AS labels;
+SELECT 'Design' AS series, 'Alice' AS label, '2024-03-01' AS value, '2024-03-05' AS value;
+SELECT 'Build' AS series, 'Bob' AS label, '2024-03-04' AS value, '2024-03-09' AS value;

tests/end-to-end/fixtures/chart/labeled-range-bar.sql

@@ -1,28 +1,4 @@
-import { expect, type Page, test } from "../../fixture.ts";
-
-type ChartPoint = { x: string | number | Date; y: number | null };
-
-declare global {
-  interface Window {
-    charts?: {
-      w: {
-        config: {
-          chart: { type: string; stacked: boolean };
-          xaxis: { type?: string; tickAmount?: number };
-          series: { name: string | number; data?: ChartPoint[] }[];
-          tooltip: {
-            custom?: (args: {
-              seriesIndex: number;
-              dataPointIndex: number;
-              w: unknown;
-            }) => string;
-          };
-        };
-        globals: { labels: (string | number)[] };
-      };
-    }[];
-  }
-}
+import { type ConsoleMessage, expect, type Page, test } from "../../fixture.ts";
 
 const MARKS =
   ".apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-treemap-rect, .apexcharts-pie-area, .apexcharts-heatmap-rect, .apexcharts-series .apexcharts-marker";
@@ -32,7 +8,7 @@ const ORANGE = "#f76707";
 const GREEN = "#37b24d";
 async function renderChart(page: Page, fixture: string) {
   const failures: string[] = [];
-  const recordError = (message: { type(): string; text(): string }) => {
+  const recordError = (message: ConsoleMessage) => {
     if (message.type() === "error") failures.push(message.text());
   };
   page.on("console", recordError);
@@ -46,13 +22,15 @@ async function renderChart(page: Page, fixture: string) {
       const container = document.getElementById("test-chart");
       if (!container) throw new Error("Chart fixture did not render");
       const rendered = window.charts?.[0];
-      const series = (rendered?.w.config.series ?? []).map((s) => ({
-        name: s.name,
-        points: (s.data ?? []).map((p) => [
-          p.x instanceof Date ? p.x.toISOString() : p.x,
-          p.y,
-        ]),
-      }));
+      const series = (rendered?.w.config.series ?? [])
+        .filter((s) => typeof s !== "number")
+        .map((s) => ({
+          name: s.name,
+          points: s.data.map((p) => [
+            p.x instanceof Date ? p.x.toISOString() : p.x,
+            p.y,
+          ]),
+        }));
       const drawnPerSeries = series.map(({ name }) => {
         const markers = [
           ...container.querySelectorAll<SVGGraphicsElement>(
@@ -122,9 +100,12 @@ async function renderChart(page: Page, fixture: string) {
           tickAmount: rendered?.w.config.xaxis.tickAmount ?? null,
         },
         generatedLabels: rendered?.w.globals.labels ?? [],
+        threeDimensional: rendered?.w.globals.isDataXYZ ?? null,
         axisLabels,
         dataLabels: [
-          ...container.querySelectorAll(".apexcharts-datalabel"),
+          ...container.querySelectorAll(
+            ".apexcharts-datalabel, .apexcharts-pie-label",
+          ),
         ].map((label) => label.textContent),
         barGroups,
         series,
@@ -407,6 +388,16 @@ for (const type of ["area", "scatter", "heatmap"]) {
   });
 }
 
+test("counts a third dimension only where the rows carried one", async ({
+  page,
+}) => {
+  const flat = await renderChart(page, "index");
+  const bubbles = await renderChart(page, "bubble-categories");
+
+  expect(flat.threeDimensional).toBe(false);
+  expect(bubbles.threeDimensional).toBe(true);
+});
+
 test("keeps the bubble size of the points it lined up", async ({ page }) => {
   const chart = await renderChart(page, "bubble-categories");
 
@@ -455,6 +446,22 @@ test("gives the tooltip title the color of the tooltip around it", async ({
   expect(colors.title).toBe(colors.tooltip);
 });
 
+test("names the series of every bar of a range bar chart", async ({ page }) => {
+  const chart = await renderChart(page, "labeled-range-bar");
+
+  expect(chart.failures).toEqual([]);
+  expect(chart.dataLabels).toEqual(["Design", "Build"]);
+});
+
+test("gives every slice of a pie chart its label and its share", async ({
+  page,
+}) => {
+  const chart = await renderChart(page, "labeled-pie");
+
+  expect(chart.failures).toEqual([]);
+  expect(chart.dataLabels).toEqual(["Yes: 65%", "No: 35%"]);
+});
+
 test("draws a reference line that carries no label", async ({ page }) => {
   const chart = await renderChart(page, "unlabeled-reference-lines");
 
@@ -601,11 +608,7 @@ test("labels each axis of a bubble tooltip with its own title", async ({
     const custom = chart.w.config.tooltip.custom;
     if (!custom) throw new Error("A bubble chart needs the custom tooltip");
     const holder = document.createElement("div");
-    holder.innerHTML = custom({
-      seriesIndex: 0,
-      dataPointIndex: 1,
-      w: chart.w,
-    });
+    holder.innerHTML = custom({ seriesIndex: 0, dataPointIndex: 1 });
     const values = holder.querySelectorAll(".apexcharts-tooltip-text-y-value");
     return [...holder.querySelectorAll(".apexcharts-tooltip-text-y-label")].map(
       (label, i): [string, string] => [

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

@@ -1,4 +1,4 @@
-import { expect, type Page, test } from "../../fixture.ts";
+import { type ConsoleMessage, expect, type Page, test } from "../../fixture.ts";
 
 const PARIS_WITHOUT_ITS_LONGITUDE = "48.85,";
 const NOT_COORDINATES = "somewhere nice";
@@ -7,7 +7,7 @@ async function renderMap(page: Page, fixture: string, markerCount = 0) {
   const errors: string[] = [];
   const logged: string[] = [];
   const recordPageError = (error: Error) => errors.push(error.message);
-  const recordConsoleError = (message: { type(): string; text(): string }) => {
+  const recordConsoleError = (message: ConsoleMessage) => {
     if (message.type() === "error") logged.push(message.text());
   };
   page.on("pageerror", recordPageError);