feat: chart improvements + accessibility + fixes

app/e2e/code-completion.spec.ts

@@ -99,21 +99,38 @@ async function triggerCypherAutocomplete(
 }
 
 /**
- * Click inside the CM editor content area and type text via keyboard events.
- * After typing, re-clicks the editor to ensure focus is fully settled — the
- * neo4j-cypher editor's completion keymap requires a settled focus state that
- * keyboard.type() alone doesn't guarantee.
+ * Insert exact text into the CM editor via CM6 dispatch (bypasses closeBrackets
+ * auto-insertion that corrupts partial Cypher like "MATCH (n:" → "MATCH (n:)").
+ * After dispatch, clicks the editor to ensure focus for keyboard shortcuts.
  */
 async function typeInCmEditor(
   dialog: Locator,
   page: Page,
   text: string,
 ): Promise<void> {
-  const cm = dialog.locator("[data-testid='codemirror-container'] .cm-content");
-  await cm.click();
-  await page.keyboard.type(text, { delay: 30 });
+  const cmContainer = dialog.locator("[data-testid='codemirror-container']");
+  const cm = cmContainer.locator(".cm-content");
+
+  // Use CM6 dispatch to set exact text without closeBrackets interference
+  await cmContainer.evaluate((el: HTMLElement, t: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function findView(node: Element | null): any {
+      if (!node) return null;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const tile = (node as any).cmTile;
+      return tile?.root?.view ?? tile?.view ?? null;
+    }
+    const view = findView(el.querySelector(".cm-content")) ?? findView(el.querySelector(".cm-editor"));
+    if (!view) throw new Error("CM6 view not found for typeInCmEditor");
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: t },
+      selection: { anchor: t.length },
+    });
+  }, text);
+
   // Re-focus: the Cypher editor's CM6 completion keymap needs a settled focus
-  // state after programmatic typing. Without this, Ctrl+Space may not trigger.
+  // state after programmatic dispatch. Without this, Ctrl+Space may not trigger.
+  // eslint-disable-next-line playwright/no-wait-for-timeout
   await page.waitForTimeout(100);
   await cm.click();
 }

app/e2e/fixtures.ts

@@ -106,16 +106,19 @@
     }
 
     // Strategy 1: Use CM6's internal dispatch API (most reliable).
-    // In CM6 v6.x, each DOM node managed by the editor has a `cmTile`
-    // property (Tile instance). The `.cm-content` element's cmTile is a
-    // DocTile whose `.root.view` yields the EditorView. This mirrors the
-    // logic of the static `EditorView.findFromDOM()` method.
+    // CM6 decorates managed DOM nodes with a `cmTile` property (Tile instance).
+    // We mirror EditorView.findFromDOM(): try .cm-content first, then .cm-editor.
     const dispatched = await cmContainer.evaluate((el: HTMLElement, text: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      function findView(node: Element | null): any {
+        if (!node) return null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const tile = (node as any).cmTile;
+        return tile?.root?.view ?? tile?.view ?? null;
+      }
       const cmContent = el.querySelector(".cm-content");
       if (!cmContent) return "no-editor";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const tile = (cmContent as any).cmTile;
-      const view = tile?.root?.view ?? tile?.view;
+      const view = findView(cmContent) ?? findView(el.querySelector(".cm-editor"));
       if (!view) return "no-view";
       if (view.state.readOnly) return "readonly";
 
@@ -134,11 +137,14 @@
       // eslint-disable-next-line playwright/no-wait-for-timeout
       await page.waitForTimeout(300);
       const stillPresent = await cmContainer.evaluate((el: HTMLElement, text: string) => {
-        const c = el.querySelector(".cm-content");
-        if (!c) return false;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const tile = (c as any).cmTile;
-        const view = tile?.root?.view ?? tile?.view;
+        function findView(node: Element | null): any {
+          if (!node) return null;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const tile = (node as any).cmTile;
+          return tile?.root?.view ?? tile?.view ?? null;
+        }
+        const view = findView(el.querySelector(".cm-content")) ?? findView(el.querySelector(".cm-editor"));
         if (!view) return false;
         return view.state.doc.toString().includes(text.substring(0, 20));
       }, query);
@@ -148,8 +154,9 @@
       return;
     }
 
-    // Strategy 2: Keyboard fallback (for environments where cmView is not accessible)
-    if (dispatched === "no-view") {
+    // Strategy 2: Keyboard fallback (for environments where cmView is not accessible
+    // or when the view is temporarily readonly during initialization)
+    if (dispatched === "no-view" || dispatched === "readonly") {
       await expect(cm).toHaveAttribute("contenteditable", "true", { timeout: 2_000 });
       await cm.click();
       await page.keyboard.press("ControlOrMeta+a");
@@ -162,9 +169,9 @@
       return;
     }
 
-    // Retry-worthy states: no-editor, readonly, dispatch-failed
+    // Retry-worthy states: no-editor, dispatch-failed
     throw new Error(`CM6 dispatch returned "${dispatched}" — retrying`);
   }).toPass({ timeout: 20_000 });
 }
 
 /**

app/src/components/chart-renderer.tsx

@@ -123,9 +123,20 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
 
   const handleEChartsClick = useMemo(() => {
     if (!onChartClick) return undefined;
-    return (e: EChartsClickEvent) =>
-      onChartClick({ name: e.name, value: e.value, seriesName: e.seriesName, dataIndex: e.dataIndex });
-  }, [onChartClick]);
+    return (e: EChartsClickEvent) => {
+      // Enrich the click point with the original data row so that
+      // column-name source fields (e.g. "revenue") resolve correctly
+      // in click action rules — not just ECharts built-in fields.
+      const row = Array.isArray(data) ? (data[e.dataIndex] as Record<string, unknown> | undefined) : undefined;
+      onChartClick({
+        ...(row ?? {}),
+        name: e.name,
+        value: e.value,
+        seriesName: e.seriesName,
+        dataIndex: e.dataIndex,
+      });
+    };
+  }, [onChartClick, data]);
 
   switch (type) {
     case "bar":
@@ -141,10 +152,13 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           xAxisLabel={settings.xAxisLabel as string | undefined}
           yAxisLabel={settings.yAxisLabel as string | undefined}
           showGridLines={settings.showGridLines as boolean | undefined}
+          axisLabelRotation={settings.axisLabelRotation as number | undefined}
+          referenceLines={settings.referenceLines as string | undefined}
           colorThresholds={colorThresholds}
           stylingRules={stylingRules}
           paramValues={paramValues}
           onClick={handleEChartsClick}
+          enableDataZoom={settings.enableDataZoom as boolean | undefined}
           colorPalette={settings.colorPalette as string | undefined}
           colorblindMode={settings.colorblindMode as boolean | undefined}
         />
@@ -163,10 +177,12 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           stepped={settings.stepped as boolean | undefined}
           showPoints={settings.showPoints as boolean | undefined}
           showGridLines={settings.showGridLines as boolean | undefined}
+          referenceLines={settings.referenceLines as string | undefined}
           colorThresholds={colorThresholds}
           stylingRules={stylingRules}
           paramValues={paramValues}
           onClick={handleEChartsClick}
+          enableDataZoom={settings.enableDataZoom as boolean | undefined}
           colorPalette={settings.colorPalette as string | undefined}
           colorblindMode={settings.colorblindMode as boolean | undefined}
         />
@@ -183,6 +199,8 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           labelPosition={settings.labelPosition as "outside" | "inside" | "center" | undefined}
           showPercentage={settings.showPercentage as boolean | undefined}
           sortSlices={settings.sortSlices as boolean | undefined}
+          topN={settings.topN as number | undefined}
+          donutCenterText={settings.donutCenterText as string | undefined}
           colorThresholds={colorThresholds}
           stylingRules={stylingRules}
           paramValues={paramValues}
@@ -203,6 +221,7 @@ export function ChartRenderer({ type, data, settings = {}, onChartClick, clickab
           suffix={settings.suffix as string | undefined}
           fontSize={settings.fontSize as "sm" | "md" | "lg" | "xl" | undefined}
           numberFormat={settings.numberFormat as "plain" | "comma" | "compact" | "percent" | undefined}
+          decimalPlaces={settings.decimalPlaces as number | undefined}
           colorThresholds={colorThresholds}
           stylingRules={stylingRules}
           paramValues={paramValues}

app/src/lib/__tests__/chart-registry.test.ts

@@ -1491,21 +1491,137 @@ describe("radar transform", () => {
     expect(result.indicators[0].name).toBe("X");
   });
 
-  it("auto-scales max from data when max column is missing", () => {
+  it("auto-scales max from data when max column is missing (single indicator)", () => {
     const data = [{ indicator: "Speed", value: 80 }];
     const result = transform(data) as { indicators: Array<{ name: string; max: number }>; series: unknown[] };
     // 80 * 1.1 = 88, ceil → 88
     expect(result.indicators[0].max).toBe(88);
   });
 
-  it("handles flat tabular data without indicator column (uses column names as indicators)", () => {
+  it("uses global max across all indicators for relative comparison", () => {
+    const data = [
+      { indicator: "ACTED_IN", value: 172 },
+      { indicator: "PRODUCED", value: 15 },
+      { indicator: "DIRECTED", value: 44 },
+      { indicator: "WROTE", value: 10 },
+      { indicator: "REVIEWED", value: 9 },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }>; series: Array<{ values: number[] }> };
+    // Global max: ceil(172 * 1.1) = 190
+    const globalMax = Math.ceil(172 * 1.1);
+    expect(result.indicators).toHaveLength(5);
+    // All indicators should share the same max
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+    // The shape should NOT be uniform — values differ significantly
+    const values = result.series[0].values;
+    expect(values[0]).toBe(172); // ACTED_IN
+    expect(values[4]).toBe(9);   // REVIEWED
+  });
+
+  it("preserves explicit max column values when provided", () => {
+    const data = [
+      { indicator: "Speed", value: 80, max: 200 },
+      { indicator: "Strength", value: 40, max: 150 },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    expect(result.indicators[0].max).toBe(200);
+    expect(result.indicators[1].max).toBe(150);
+  });
+
+  it("uses global max for wide-format tabular data", () => {
     const data = [{ Speed: 80, Strength: 60, Agility: 90 }];
-    const result = transform(data) as { indicators: Array<{ name: string }>; series: Array<{ values: number[] }> };
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }>; series: Array<{ values: number[] }> };
+    // Global max: ceil(90 * 1.1) = 99
+    const globalMax = Math.ceil(90 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
     expect(result.indicators.map((i) => i.name)).toContain("Speed");
     expect(result.indicators.map((i) => i.name)).toContain("Strength");
     expect(result.series[0].values).toHaveLength(3);
   });
 
+  it("falls back to globalMax when max column contains null/undefined/NaN", () => {
+    // When the max column exists but values are invalid (null/NaN/0),
+    // indicators should use globalMax instead of treating 0 or NaN as explicit.
+    const data = [
+      { indicator: "Speed", value: 80, max: null },
+      { indicator: "Strength", value: 60, max: undefined },
+      { indicator: "Agility", value: 90, max: NaN },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    // globalMax: ceil(90 * 1.1) = 99
+    const globalMax = Math.ceil(90 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+  });
+
+  it("falls back to globalMax when max column value is 0", () => {
+    const data = [
+      { indicator: "Speed", value: 50, max: 0 },
+      { indicator: "Strength", value: 30, max: 0 },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    // 0 is not a valid explicit max (not > 0), so globalMax is used
+    const globalMax = Math.ceil(50 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+  });
+
+  it("falls back to globalMax when max column value is negative", () => {
+    const data = [
+      { indicator: "Speed", value: 50, max: -100 },
+      { indicator: "Strength", value: 30, max: -50 },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    const globalMax = Math.ceil(50 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+  });
+
+  it("mixes explicit and fallback max when some indicators have valid max", () => {
+    const data = [
+      { indicator: "Speed", value: 80, max: 200 },
+      { indicator: "Strength", value: 60, max: null },
+      { indicator: "Agility", value: 90, max: 150 },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    const globalMax = Math.ceil(90 * 1.1);
+    // Speed and Agility have valid explicit max; Strength falls back to globalMax
+    expect(result.indicators[0].max).toBe(200);   // Speed — explicit
+    expect(result.indicators[1].max).toBe(globalMax); // Strength — fallback
+    expect(result.indicators[2].max).toBe(150);   // Agility — explicit
+  });
+
+  it("falls back to globalMax when max column contains non-numeric strings", () => {
+    const data = [
+      { indicator: "Speed", value: 80, max: "not-a-number" },
+      { indicator: "Strength", value: 60, max: "" },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    const globalMax = Math.ceil(80 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+  });
+
+  it("falls back to globalMax when max column contains Infinity", () => {
+    const data = [
+      { indicator: "Speed", value: 80, max: Infinity },
+      { indicator: "Strength", value: 60, max: -Infinity },
+    ];
+    const result = transform(data) as { indicators: Array<{ name: string; max: number }> };
+    const globalMax = Math.ceil(80 * 1.1);
+    for (const ind of result.indicators) {
+      expect(ind.max).toBe(globalMax);
+    }
+  });
+
   it("transformWithMapping returns same result as transform", () => {
     const data = [{ indicator: "Speed", value: 80, max: 100 }];
     const result = chartRegistry.radar.transformWithMapping(data, {});

app/src/lib/chart-registry.ts

@@ -494,21 +494,23 @@ function transformToRadarData(data: unknown): unknown {
       const serName = seriesKey ? String(normalizeValue(r[seriesKey]) ?? "Default") : "Default";
 
       if (maxKey) {
-        const explicitMax = Number(r[maxKey]) || 100;
-        if (!indicatorExplicitMax.has(indName)) indicatorExplicitMax.set(indName, explicitMax);
+        const explicitMax = Number(r[maxKey]);
+        if (Number.isFinite(explicitMax) && explicitMax > 0 && !indicatorExplicitMax.has(indName)) {
+          indicatorExplicitMax.set(indName, explicitMax);
+        }
       }
       indicatorMaxFromData.set(indName, Math.max(indicatorMaxFromData.get(indName) ?? 0, val));
       if (!seriesMap.has(serName)) seriesMap.set(serName, new Map());
       seriesMap.get(serName)!.set(indName, val);
     }
 
-    // Use explicit max if provided, otherwise auto-scale from observed values (+10% headroom)
+    // Use explicit max if provided, otherwise use a single global max across all
+    // indicators so relative magnitudes are visible (e.g. 172 vs 9).
     const indicatorEntries = Array.from(indicatorMaxFromData.keys());
+    const globalMax = Math.ceil(Math.max(...indicatorMaxFromData.values()) * 1.1) || 100;
     const indicators = indicatorEntries.map((name) => ({
       name,
-      max: maxKey && indicatorExplicitMax.has(name)
-        ? indicatorExplicitMax.get(name)!
-        : Math.ceil((indicatorMaxFromData.get(name) ?? 100) * 1.1) || 100,
+      max: indicatorExplicitMax.get(name) ?? globalMax,
     }));
     const series = Array.from(seriesMap.entries()).map(([name, valMap]) => ({
       name,
@@ -519,17 +521,18 @@ function transformToRadarData(data: unknown): unknown {
   }
 
   // Wide-format: each column is an indicator, each row is a series
-  // Auto-scale max from observed values per column (+10% headroom)
-  const maxPerCol = new Map<string, number>();
+  // Use a single global max so all axes share the same scale
+  let wideGlobalMax = 0;
   for (const r of records) {
     for (const k of keys) {
       const v = Number(r[k]) || 0;
-      maxPerCol.set(k, Math.max(maxPerCol.get(k) ?? 0, v));
+      if (v > wideGlobalMax) wideGlobalMax = v;
     }
   }
+  const wideMax = Math.ceil(wideGlobalMax * 1.1) || 100;
   const indicators = keys.map((k) => ({
     name: k,
-    max: Math.ceil((maxPerCol.get(k) ?? 100) * 1.1) || 100,
+    max: wideMax,
   }));
   const series = records.map((r, i) => ({
     name: String(i + 1),