@svgrid/grid 3.0.2 → 3.0.4

package/src/SvGridChartPanel.svelte

@@ -16,13 +16,33 @@
   import { cubicOut } from "svelte/easing";
   import SvGridChart from "./SvGridChart.svelte";
   import { downloadChartPng, downloadChartSvg, downloadChartCsv, chartCsvExportable, chartToPngBlob } from "./chart-export";
-  import type { ChartType, ChartSelection, RowData, TableFeatures } from "./index";
+  import type { ChartSelection, RowData, TableFeatures } from "./index";
+  import SvChartPanes from "./SvChartPanes.svelte";
+  import SvGridChartPickers, { chartPanelTypes } from "./SvGridChartPickers.svelte";
+  import { chartPanelMessage, resolveChartPanelMessages } from "./chart-panel-messages";
+  // The builder is a lazy chunk: a modal with a thumbnail per type, loaded
+  // the first time someone opens it.
+  let Builder = $state<typeof import("./SvGridChartBuilder.svelte").default | null>(null);
+  let builderOpen = $state(false);
+  function openBuilder() {
+    if (Builder) { builderOpen = true; return; }
+    import("./SvGridChartBuilder.svelte").then((m) => { Builder = m.default; builderOpen = true; });
+  }
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
   let { ctrl }: { ctrl: SvGridController<TFeatures, TData> } = $props();
 
+  /** The panel's strings, from `localization.text`; unset keys stay English. */
+  const m = $derived(resolveChartPanelMessages(ctrl.localizationText));
   const config = $derived(ctrl.chartingConfig);
   const cfg = $derived(ctrl.chartCfg);
+  /** Legend placement from the builder's format; the default is below. */
+  const legendProp = $derived(ctrl.chartFormat?.legend === undefined ? true : ctrl.chartFormat.legend);
+  const dataLabelsProp = $derived(
+    ctrl.chartFormat?.dataLabels === undefined ? ctrl.chartDataLabels : ctrl.chartFormat.dataLabels === null ? false : { placement: ctrl.chartFormat.dataLabels },
+  );
+  /** The crosshair's axis pills, from the builder's format; on by default. */
+  const crosshairLabelsProp = $derived(ctrl.chartFormat?.crosshairLabels !== false);
   const isCustom = $derived(ctrl.chartIsCustom);
   const position = $derived(config?.position ?? "bottom");
   const crossFilter = $derived(config?.crossFilter !== false);
@@ -115,124 +135,13 @@
         : `height:${size}px`,
   );
 
-  // Measure the chart area so the chart lays out to fit it (no overflow /
-  // clipped axis labels) - the docked panel is a fixed-size container. Reserve
-  // room for the legend (rendered below the SVG for >1 series) and the export
-  // toolbar, so neither gets clipped.
-  let bodyW = $state(0);
-  let bodyH = $state(0);
-  const seriesCount = $derived(spec ? (spec.type === "pie" ? spec.categories.length : spec.series.length) : 0);
-  const reserve = $derived((seriesCount > 1 ? 36 : 0) + (cfg?.export === true ? 30 : 0));
-  const chartW = $derived(bodyW > 24 ? bodyW - 8 : undefined);
-  const chartH = $derived(bodyH > 24 ? Math.max(120, bodyH - 8 - reserve) : undefined);
+  // The docked panel is a fixed-size container, and the chart sizes itself
+  // to it:  measures the body and subtracts the chart's own toolbar,
+  // legend and brush. This used to be a reserve heuristic here (36px for a
+  // legend, 30px for the toolbar) that was wrong whenever the legend wrapped.
 
-  /**
-   * The chart types the picker offers, grouped by what they are FOR.
-   *
-   * This used to be four entries while the engine drew fifteen, so nine types
-   * were reachable only by hand-writing a spec - and `charting.defaultType`
-   * accepted them all, which meant setting one left the picker showing
-   * something else entirely.
-   *
-   * `needs` gates on COLUMN SHAPE only, never on the data. Column shape is
-   * stable while the user filters; row counts are not, and a picker whose
-   * options vanish mid-session because a filter emptied a group is worse than
-   * one that explains itself. Data-level problems get a sentence instead, see
-   * `typeIssue` below.
-   */
-  type TypeDef = {
-    value: ChartType;
-    label: string;
-    group: string;
-    needs?: (c: { dims: unknown[]; measures: unknown[]; dates: unknown[] }) => boolean;
-  };
-  const TYPES: TypeDef[] = [
-    { value: "bar", label: "Bar", group: "Compare" },
-    { value: "line", label: "Line", group: "Compare" },
-    { value: "area", label: "Area", group: "Compare" },
-    { value: "pie", label: "Pie", group: "Part of a whole" },
-    { value: "treemap", label: "Tree map", group: "Part of a whole" },
-    { value: "funnel", label: "Funnel", group: "Flow" },
-    { value: "waterfall", label: "Waterfall", group: "Flow" },
-    { value: "sankey", label: "Sankey", group: "Flow", needs: (c) => c.dims.length >= 2 },
-    { value: "radar", label: "Radar", group: "Distribution" },
-    { value: "heatmap", label: "Heat map", group: "Distribution", needs: (c) => c.dims.length >= 2 },
-    { value: "scatter", label: "Scatter", group: "Distribution", needs: (c) => c.measures.length >= 2 },
-    { value: "boxplot", label: "Box plot", group: "Distribution" },
-    { value: "gauge", label: "Gauge", group: "Single value" },
-    { value: "calendar", label: "Calendar", group: "Over time", needs: (c) => c.dates.length >= 1 },
-  ];
-  const availableTypes = $derived(TYPES.filter((t) => !t.needs || t.needs(columns)));
-
-  // Which controls this type can actually use. Allow-lists rather than the old
-  // "not pie" guards: with thirteen types, "everything except pie" hands a
-  // gauge a Stacked checkbox.
-  const CARTESIAN: ChartType[] = ["bar", "line", "area"];
-
-  /** Named series palettes. "Theme" defers to --sg-chart-1..8 and the defaults. */
-  const PALETTES: Array<{ key: string; label: string; colors: string[] | null }> = [
-    { key: "theme", label: "Theme", colors: null },
-    { key: "ocean", label: "Ocean", colors: ["#0ea5e9", "#14b8a6", "#6366f1", "#8b5cf6", "#06b6d4"] },
-    { key: "sunset", label: "Sunset", colors: ["#f59e0b", "#ef4444", "#ec4899", "#8b5cf6", "#f97316"] },
-    { key: "forest", label: "Forest", colors: ["#16a34a", "#65a30d", "#0d9488", "#4d7c0f", "#0891b2"] },
-    { key: "slate", label: "Slate", colors: ["#475569", "#0ea5e9", "#64748b", "#38bdf8", "#94a3b8"] },
-  ];
-  const activePalette = $derived(
-    PALETTES.find((x) => x.colors && ctrl.chartPalette && x.colors.join() === ctrl.chartPalette.join())?.key ??
-      "theme",
-  );
-  const wantsHorizontal = $derived(ctrl.chartType === "bar");
-  const wantsDonut = $derived(ctrl.chartType === "pie");
-  const wantsGroupBy = $derived(ctrl.chartType !== "gauge");
-  const wantsSplitBy = $derived(
-    columns.dims.length > 1 &&
-      !["pie", "gauge", "waterfall", "funnel", "calendar"].includes(ctrl.chartType),
-  );
-  const wantsStacked = $derived(CARTESIAN.includes(ctrl.chartType));
-  const wantsLogScale = $derived(
-    CARTESIAN.includes(ctrl.chartType) || ctrl.chartType === "scatter" || ctrl.chartType === "boxplot",
-  );
-  const wantsDataLabels = $derived(
-    !["gauge", "sankey", "calendar", "treemap", "scatter", "boxplot"].includes(ctrl.chartType),
-  );
-  const wantsSecondMeasure = $derived(ctrl.chartType === "scatter");
-  /**
-   * A box plot is the one type that reduces its groups itself: the whole point
-   * is the spread of the sample, so `sum | avg | count` has nothing to say
-   * about it. Showing an Aggregate select that changes nothing is worse than
-   * not showing one.
-   */
-  const wantsReduce = $derived(!wantsSecondMeasure && ctrl.chartType !== "boxplot");
-  const typeGroups = $derived([...new Set(availableTypes.map((t) => t.group))]);
-
-  /**
-   * Why the current type cannot draw anything useful yet, as a sentence.
-   *
-   * The alternative - removing the option - means a chart can disappear from
-   * under the user when they filter. Saying what is missing keeps the picker
-   * honest without making it unstable.
-   */
-  const typeIssue = $derived.by<string | null>(() => {
-    const t = ctrl.chartType;
-    const cats = ctrl.chartSpec?.categories.length ?? 0;
-    if (t === "heatmap" && !ctrl.chartSeriesId && columns.dims.length > 1)
-      return "Heat map needs a Split by column for its rows.";
-    if (t === "sankey" && !ctrl.chartSeriesId)
-      return "Sankey needs a Split by column: Group by is the source, Split by the target.";
-    if (t === "radar" && cats > 0 && cats < 3) return "Radar needs at least 3 groups.";
-    if (t === "funnel" && cats === 1) return "Funnel needs at least 2 stages.";
-    return null;
-  });
-  const REDUCERS = [
-    { value: "sum", label: "Sum" },
-    { value: "avg", label: "Average" },
-    { value: "count", label: "Count" },
-  ] as const;
-  const FORMATS = [
-    { value: "number", label: "Number" },
-    { value: "currency", label: "Currency" },
-    { value: "percent", label: "Percent" },
-  ] as const;
+  /** The types the builder's gallery shows for the current columns. */
+  const availableTypes = $derived(chartPanelTypes(columns, m));
 
   function onChartSelect(sel: ChartSelection) {
     if (crossFilter && sel.category != null) ctrl.applyChartCrossFilter(String(sel.category));
@@ -260,6 +169,20 @@
     if (spec) downloadChartCsv(spec, "chart.csv");
     exportOpen = false;
   }
+  async function exportPdf() {
+    const el = svgEl();
+    exportOpen = false;
+    if (!el) return;
+    const m = await import("./chart-export-pdf");
+    await m.downloadChartPdf(el, "chart.pdf", { title: spec?.title ?? ctrl.charts[ctrl.activeChartIndex]?.title });
+  }
+  async function printChart() {
+    const el = svgEl();
+    exportOpen = false;
+    if (!el) return;
+    const m = await import("./chart-export-pdf");
+    m.printChart(el, { title: spec?.title ?? ctrl.charts[ctrl.activeChartIndex]?.title });
+  }
   async function copyImage() {
     const el = svgEl();
     exportOpen = false;
@@ -273,17 +196,77 @@
       /* clipboard blocked - no-op */
     }
   }
+  // A popover closes on a click outside and on Escape, and Escape hands
+  // focus back to the button that opened it. Without the key the export
+  // menu and the saved-charts dialog stayed open until something was
+  // clicked, which the keyboard could not do.
+  let exportBtn = $state<HTMLButtonElement | null>(null);
+  let savedBtn = $state<HTMLButtonElement | null>(null);
+  function dismissable(scope: string, close: () => void, trigger: () => HTMLButtonElement | null) {
+    const onDown = (e: PointerEvent) => {
+      if (!(e.target as HTMLElement)?.closest(scope)) close();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      e.stopPropagation();
+      close();
+      trigger()?.focus();
+    };
+    window.addEventListener("pointerdown", onDown);
+    window.addEventListener("keydown", onKey, true);
+    return () => {
+      window.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("keydown", onKey, true);
+    };
+  }
   $effect(() => {
     if (!exportOpen) return;
-    const close = (e: PointerEvent) => {
-      if (!(e.target as HTMLElement)?.closest(".sv-grid-chart-export")) exportOpen = false;
-    };
-    window.addEventListener("pointerdown", close);
-    return () => window.removeEventListener("pointerdown", close);
+    return dismissable(".sv-grid-chart-export", () => (exportOpen = false), () => exportBtn);
+  });
+
+  // ---- Saved charts: name the active tab, apply or remove a saved one -----
+  let savedOpen = $state(false);
+  let saveName = $state("");
+  function saveChart() {
+    const name = saveName.trim();
+    if (!name) return;
+    ctrl.saveChart(name);
+    saveName = "";
+  }
+  $effect(() => {
+    if (!savedOpen) return;
+    return dismissable(".sv-grid-chart-saved", () => (savedOpen = false), () => savedBtn);
   });
 
+  // ---- Describe: the chart's summary sentence to the clipboard ------------
+  async function describeChart() {
+    exportOpen = false;
+    if (!spec) return;
+    const { chartSummary } = await import("./chart-summary");
+    const text = chartSummary(spec);
+    try { await navigator.clipboard?.writeText(text); } catch { /* no clipboard */ }
+    aiRationale = text;
+  }
+
   // ---- AI "chart this" (enterprise-registered handler) -------------------
   const aiEnabled = $derived(!!ctrl.chartAiHandler);
+  const explainEnabled = $derived(!!ctrl.chartExplainHandler);
+  async function explainChart() {
+    const handler = ctrl.chartExplainHandler;
+    if (!handler || aiBusy) return;
+    aiBusy = true;
+    aiError = "";
+    aiRationale = "";
+    try {
+      const out = await handler();
+      aiRationale = out ? [out.summary, ...out.insights].filter(Boolean).join(" ") : "";
+      if (!out) aiError = m.chartAiNoExplanation;
+    } catch (e) {
+      aiError = e instanceof Error ? e.message : m.chartAiFailed;
+    } finally {
+      aiBusy = false;
+    }
+  }
   let aiOpen = $state(false);
   let aiPrompt = $state("");
   let aiBusy = $state(false);
@@ -302,10 +285,10 @@
         ctrl.applyChartConfig(cfg as Parameters<typeof ctrl.applyChartConfig>[0]);
         aiRationale = typeof cfg.rationale === "string" ? cfg.rationale : "";
       } else {
-        aiError = "Couldn't build a chart from that request.";
+        aiError = m.chartAiNoChart;
       }
     } catch (e) {
-      aiError = e instanceof Error ? e.message : "Something went wrong.";
+      aiError = e instanceof Error ? e.message : m.chartAiFailed;
     } finally {
       aiBusy = false;
     }
@@ -341,7 +324,7 @@
   class:is-floating={floating}
   class:is-maximized={floating && maximized}
   style={floatStyle}
-  aria-label="Chart"
+  aria-label={m.chartPanelTitle}
   transition:fly={{
     x: !floating && position === "right" ? size : 0,
     y: !floating && position === "bottom" ? size : 0,
@@ -357,7 +340,7 @@
       onpointerdown={startResize}
       role="separator"
       aria-orientation={position === "right" ? "vertical" : "horizontal"}
-      aria-label="Resize chart panel"
+      aria-label={m.chartResize}
     ></div>
   {/if}
 
@@ -371,13 +354,13 @@
       <svg class="sv-grid-chart-title-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <line x1="12" y1="20" x2="12" y2="10" /><line x1="18" y1="20" x2="18" y2="4" /><line x1="6" y1="20" x2="6" y2="16" />
       </svg>
-      <span class="sv-grid-chart-title">Chart</span>
+      <span class="sv-grid-chart-title">{m.chartPanelTitle}</span>
       <div class="sv-grid-chart-actions">
         {#if crossFilter && !isCustom}
-          <button type="button" class="sv-grid-chart-btn" onclick={() => ctrl.clearChartCrossFilter()}>Clear filter</button>
+          <button type="button" class="sv-grid-chart-btn" onclick={() => ctrl.clearChartCrossFilter()}>{m.chartClearFilter}</button>
         {/if}
         <div class="sv-grid-chart-export">
-          <button type="button" class="sv-grid-chart-icon-btn" aria-label="Export chart" title="Export" aria-expanded={exportOpen} onclick={() => (exportOpen = !exportOpen)}>
+          <button type="button" class="sv-grid-chart-icon-btn" aria-label={m.chartExportLabel} title={m.chartExport} aria-expanded={exportOpen} bind:this={exportBtn} onclick={() => (exportOpen = !exportOpen)}>
             {#if copied}
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
             {:else}
@@ -386,45 +369,92 @@
           </button>
           {#if exportOpen}
             <div class="sv-grid-chart-export-menu" role="menu">
-              <button type="button" role="menuitem" onclick={exportPng}>PNG image</button>
-              <button type="button" role="menuitem" onclick={exportSvg}>SVG vector</button>
-              <button type="button" role="menuitem" disabled={!csvExportable} onclick={exportCsv}>CSV data</button>
-              <button type="button" role="menuitem" onclick={copyImage}>Copy to clipboard</button>
+              <button type="button" role="menuitem" onclick={exportPng}>{m.chartExportPng}</button>
+              <button type="button" role="menuitem" onclick={exportSvg}>{m.chartExportSvg}</button>
+              <button type="button" role="menuitem" onclick={exportPdf}>{m.chartExportPdf}</button>
+              <button type="button" role="menuitem" disabled={!csvExportable} onclick={exportCsv}>{m.chartExportCsv}</button>
+              <button type="button" role="menuitem" onclick={copyImage}>{m.chartExportCopy}</button>
+              <button type="button" role="menuitem" onclick={printChart}>{m.chartExportPrint}</button>
+              <button type="button" role="menuitem" onclick={describeChart}>{m.chartExportDescribe}</button>
             </div>
           {/if}
         </div>
         {#if aiEnabled && !isCustom}
-          <button type="button" class="sv-grid-chart-btn sv-grid-chart-ai-btn" class:is-active={aiOpen} aria-label="Chart with AI" title="Chart with AI" aria-expanded={aiOpen} onclick={() => (aiOpen = !aiOpen)}>
+          <button type="button" class="sv-grid-chart-btn sv-grid-chart-ai-btn" class:is-active={aiOpen} aria-label={m.chartAiLabel} title={m.chartAiLabel} aria-expanded={aiOpen} onclick={() => (aiOpen = !aiOpen)}>
             <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l1.9 4.6L18.5 8.5 13.9 10.4 12 15l-1.9-4.6L5.5 8.5l4.6-1.9L12 2zm6 11l1 2.4 2.4 1-2.4 1L18 21l-1-2.6-2.4-1 2.4-1L18 13zM6 14l.8 2 2 .8-2 .8L6 20l-.8-2.4-2-.8 2-.8L6 14z" /></svg>
-            AI
+            {m.chartAi}
           </button>
         {/if}
         {#if !isCustom}
-          <button type="button" class="sv-grid-chart-icon-btn" aria-label="Add chart" title="Add chart" onclick={() => ctrl.addChart()}>
+          <button type="button" class="sv-grid-chart-btn sv-grid-chart-build-btn" aria-label={m.chartBuildLabel} title={m.chartBuildTitle} aria-haspopup="dialog" onclick={openBuilder}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+            {m.chartBuild}
+          </button>
+          <div class="sv-grid-chart-export sv-grid-chart-saved">
+            <button type="button" class="sv-grid-chart-icon-btn sv-grid-chart-saved-btn" aria-label={m.chartSaveLabel} title={m.chartSavedTitle} aria-expanded={savedOpen} aria-haspopup="dialog" bind:this={savedBtn} onclick={() => (savedOpen = !savedOpen)}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><polyline points="17 21 17 13 7 13 7 21" /><polyline points="7 3 7 8 15 8" /></svg>
+            </button>
+            {#if savedOpen}
+              <div class="sv-grid-chart-export-menu sv-grid-chart-saved-menu" role="dialog" aria-label={m.chartSavedTitle}>
+                <form class="sv-grid-chart-saved-row" onsubmit={(e) => { e.preventDefault(); saveChart(); }}>
+                  <input class="sv-grid-chart-saved-name" type="text" aria-label={m.chartSaveName} placeholder={m.chartSaveNamePlaceholder} bind:value={saveName} />
+                  <button type="submit" class="sv-grid-chart-btn" disabled={!saveName.trim()}>{m.chartSave}</button>
+                </form>
+                {#if ctrl.savedCharts.length}
+                  <ul class="sv-grid-chart-saved-list">
+                    {#each ctrl.savedCharts as sc (sc.name)}
+                      <li class="sv-grid-chart-saved-item">
+                        <button type="button" class="sv-grid-chart-saved-apply" title={m.chartSaveApply} onclick={() => { ctrl.applySavedChart(sc.name); savedOpen = false; }}>{sc.name}</button>
+                        <button type="button" class="sv-grid-chart-saved-x" aria-label={`${m.chartSaveRemove}: ${sc.name}`} title={m.chartSaveRemove} onclick={() => ctrl.removeSavedChart(sc.name)}>&times;</button>
+                      </li>
+                    {/each}
+                  </ul>
+                {:else}
+                  <p class="sv-grid-chart-saved-empty">{m.chartSavedEmpty}</p>
+                {/if}
+              </div>
+            {/if}
+          </div>
+          <button
+            type="button"
+            class="sv-grid-chart-icon-btn sv-grid-chart-link-btn"
+            class:is-unlinked={!!ctrl.chartFrozen}
+            aria-label={ctrl.chartFrozen ? m.chartLinkBack : m.chartUnlink}
+            aria-pressed={!!ctrl.chartFrozen}
+            title={ctrl.chartFrozen ? m.chartUnlinkedTitle : m.chartLinkedTitle}
+            onclick={() => (ctrl.chartFrozen ? ctrl.unfreezeChart() : ctrl.freezeChart())}
+          >
+            {#if ctrl.chartFrozen}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M5.17 11.75l-1.71 1.71a5 5 0 0 0 7.07 7.07l1.71-1.71" /><line x1="8" y1="2" x2="8" y2="5" /><line x1="2" y1="8" x2="5" y2="8" /><line x1="16" y1="19" x2="16" y2="22" /><line x1="19" y1="16" x2="22" y2="16" /></svg>
+            {:else}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+            {/if}
+          </button>
+          <button type="button" class="sv-grid-chart-icon-btn" aria-label={m.chartAdd} title={m.chartAdd} onclick={() => ctrl.addChart()}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
           </button>
         {/if}
         {#if floating}
-          <button type="button" class="sv-grid-chart-icon-btn" aria-label={maximized ? "Restore" : "Maximize"} title={maximized ? "Restore" : "Maximize"} onclick={toggleMax}>
+          <button type="button" class="sv-grid-chart-icon-btn" aria-label={maximized ? m.chartRestore : m.chartMaximize} title={maximized ? m.chartRestore : m.chartMaximize} onclick={toggleMax}>
             {#if maximized}
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3" /><path d="M21 8h-3a2 2 0 0 1-2-2V3" /><path d="M3 16h3a2 2 0 0 1 2 2v3" /><path d="M16 21v-3a2 2 0 0 1 2-2h3" /></svg>
             {:else}
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" /></svg>
             {/if}
           </button>
-          <button type="button" class="sv-grid-chart-icon-btn" aria-label="Dock chart" title="Dock" onclick={dockBack}>
+          <button type="button" class="sv-grid-chart-icon-btn" aria-label={m.chartDockLabel} title={m.chartDock} onclick={dockBack}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="15" y1="3" x2="15" y2="21" /></svg>
           </button>
         {:else}
-          <button type="button" class="sv-grid-chart-icon-btn" aria-label="Pop out chart" title="Pop out" onclick={popOut}>
+          <button type="button" class="sv-grid-chart-icon-btn" aria-label={m.chartPopOutLabel} title={m.chartPopOut} onclick={popOut}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
           </button>
         {/if}
-        <button type="button" class="sv-grid-chart-close" aria-label="Close chart" onclick={() => (ctrl.chartPanelOpen = false)}>&times;</button>
+        <button type="button" class="sv-grid-chart-close" aria-label={m.chartClose} onclick={() => (ctrl.chartPanelOpen = false)}>&times;</button>
       </div>
     </div>
     {#if !isCustom && ctrl.charts.length > 1}
-      <div class="sv-grid-chart-tabs" role="tablist" aria-label="Charts">
+      <div class="sv-grid-chart-tabs" role="tablist" aria-label={m.chartTabs}>
         {#each ctrl.charts as c, i (c.id)}
           <div class="sv-grid-chart-tab" class:is-active={i === ctrl.activeChartIndex}>
             <button
@@ -437,8 +467,8 @@
             <button
               type="button"
               class="sv-grid-chart-tab-x"
-              aria-label={`Remove ${c.title}`}
-              title="Remove"
+              aria-label={chartPanelMessage(m.chartRemoveTab, { title: c.title })}
+              title={m.chartRemove}
               onclick={() => ctrl.removeChart(i)}
             >&times;</button>
           </div>
@@ -457,13 +487,16 @@
           <input
             class="sv-grid-chart-ai-input"
             type="text"
-            placeholder="Describe a chart, e.g. revenue by region stacked by product"
+            placeholder={m.chartAiPlaceholder}
             bind:value={aiPrompt}
             disabled={aiBusy}
           />
           <button type="submit" class="sv-grid-chart-btn" disabled={aiBusy || !aiPrompt.trim()}>
-            {aiBusy ? "Thinking..." : "Chart it"}
+            {aiBusy ? m.chartAiThinking : m.chartAiRun}
           </button>
+          {#if explainEnabled}
+            <button type="button" class="sv-grid-chart-btn sv-grid-chart-explain-btn" disabled={aiBusy || !spec} onclick={explainChart} title={m.chartAiExplainTitle}>{m.chartAiExplain}</button>
+          {/if}
         </form>
         {#if aiError}
           <p class="sv-grid-chart-ai-msg is-error">{aiError}</p>
@@ -472,162 +505,75 @@
         {/if}
       </div>
     {/if}
-    <div class="sv-grid-chart-controls">
-      {#if !isCustom}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Type</span>
-          <select value={ctrl.chartType} onchange={(e) => (ctrl.chartType = e.currentTarget.value as ChartType)}>
-            <!-- Grouped: a flat thirteen-item list is a wall. optgroup is
-                 native, so this costs no new component. -->
-            {#each typeGroups as g (g)}
-              <optgroup label={g}>
-                {#each availableTypes.filter((t) => t.group === g) as t (t.value)}
-                  <option value={t.value}>{t.label}</option>
-                {/each}
-              </optgroup>
-            {/each}
-          </select>
-        </label>
-        {#if wantsGroupBy}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "From" : ctrl.chartType === "heatmap" ? "Columns" : "Group by"}</span>
-          <select value={ctrl.chartDimensionId ?? ""} onchange={(e) => (ctrl.chartDimensionId = e.currentTarget.value || null)}>
-            {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
-          </select>
-        </label>
-        {/if}
-        {#if wantsSplitBy}
-          <label class="sv-grid-chart-ctl">
-            <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "To" : ctrl.chartType === "heatmap" ? "Rows" : "Split by"}</span>
-            <select value={ctrl.chartSeriesId ?? ""} onchange={(e) => (ctrl.chartSeriesId = e.currentTarget.value || null)}>
-              <option value="">(none)</option>
-              {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
-            </select>
-          </label>
-        {/if}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">{wantsSecondMeasure ? "X" : ctrl.chartType === "gauge" ? "Metric" : "Value"}</span>
-          <select value={ctrl.chartMeasureId ?? ""} onchange={(e) => (ctrl.chartMeasureId = e.currentTarget.value || null)}>
-            {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
-          </select>
-        </label>
-        {#if wantsSecondMeasure}
-          <label class="sv-grid-chart-ctl">
-            <span class="sv-grid-chart-ctl-lbl">Y</span>
-            <select value={ctrl.effectiveChartMeasure2Id ?? ""} onchange={(e) => (ctrl.chartMeasure2Id = e.currentTarget.value || null)}>
-              {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
-            </select>
-          </label>
-        {/if}
-        {#if wantsReduce}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Aggregate</span>
-          <select value={ctrl.chartReduce} onchange={(e) => (ctrl.chartReduce = e.currentTarget.value as "sum" | "avg" | "count")}>
-            {#each REDUCERS as r (r.value)}<option value={r.value}>{r.label}</option>{/each}
-          </select>
-        </label>
-        {/if}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Format</span>
-          <select value={ctrl.chartValueFormat} onchange={(e) => (ctrl.chartValueFormat = e.currentTarget.value as "number" | "currency" | "percent")}>
-            {#each FORMATS as f (f.value)}<option value={f.value}>{f.label}</option>{/each}
-          </select>
-        </label>
-        {#if wantsStacked}
-          <label class="sv-grid-chart-toggle">
-            <input type="checkbox" checked={ctrl.chartStacked} onchange={(e) => (ctrl.chartStacked = e.currentTarget.checked)} />
-            Stacked
-          </label>
-          <label class="sv-grid-chart-toggle" title="Normalise each category to 100 percent">
-            <input type="checkbox" checked={ctrl.chartStacked100} onchange={(e) => (ctrl.chartStacked100 = e.currentTarget.checked)} />
-            100%
-          </label>
-        {/if}
-        {#if wantsHorizontal}
-          <label class="sv-grid-chart-toggle" title="Bars grow rightwards - suits long category labels">
-            <input
-              type="checkbox"
-              checked={ctrl.chartOrientation === "horizontal"}
-              onchange={(e) => (ctrl.chartOrientation = e.currentTarget.checked ? "horizontal" : "vertical")}
-            />
-            Horizontal
-          </label>
-        {/if}
-        {#if wantsDonut}
-          <label class="sv-grid-chart-toggle">
-            <input type="checkbox" checked={ctrl.chartDonut} onchange={(e) => (ctrl.chartDonut = e.currentTarget.checked)} />
-            Donut
-          </label>
-        {/if}
-        <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Colours</span>
-          <select
-            value={activePalette}
-            onchange={(e) => (ctrl.chartPalette = PALETTES.find((x) => x.key === e.currentTarget.value)?.colors ?? null)}
-          >
-            {#each PALETTES as pal (pal.key)}<option value={pal.key}>{pal.label}</option>{/each}
-          </select>
-        </label>
-        {#if wantsDataLabels}
-          <label class="sv-grid-chart-toggle">
-            <input type="checkbox" checked={ctrl.chartDataLabels} onchange={(e) => (ctrl.chartDataLabels = e.currentTarget.checked)} />
-            Labels
-          </label>
-        {/if}
-        {#if wantsLogScale}
-          <label class="sv-grid-chart-toggle" title="Logarithmic value axis - flattens wide-range data">
-            <input type="checkbox" checked={ctrl.chartLogScale} onchange={(e) => (ctrl.chartLogScale = e.currentTarget.checked)} />
-            Log scale
-          </label>
-        {/if}
-        {#if ctrl.chartDimensionIsDate && CARTESIAN.includes(ctrl.chartType)}
-          <label class="sv-grid-chart-toggle" title="Space points by actual date - real time ticks and proportional gaps">
-            <input type="checkbox" checked={ctrl.chartTimeAxis} onchange={(e) => (ctrl.chartTimeAxis = e.currentTarget.checked)} />
-            Date axis
-          </label>
-        {/if}
-      {/if}
-      {#if typeIssue}
-        <p class="sv-grid-chart-hint" role="note">{typeIssue}</p>
-      {/if}
-    </div>
+    {#if !isCustom}
+      <SvGridChartPickers {ctrl} messages={m} />
+    {/if}
   </header>
 
-  <div class="sv-grid-chart-panel-body" bind:this={bodyEl} bind:clientWidth={bodyW} bind:clientHeight={bodyH}>
+  <div class="sv-grid-chart-panel-body" bind:this={bodyEl}>
     <!-- A gauge is one number, so it legitimately carries no series and no
          categories. Gating purely on `series.length` sent it to the "No data"
          message even with a perfectly good spec. -->
-    {#if spec && (spec.series.length || spec.gaugeValue != null || isCustom)}
+    {#if spec && ctrl.chartIndicatorPanes.length && spec.series[0]?.ohlc}
+      <div class="sv-grid-chart-panes-host">
+        <SvChartPanes
+          {spec}
+          indicators={ctrl.chartIndicatorPanes}
+          onSelect={onChartSelect}
+          interactive
+          legend={false}
+          zoomable={cfg?.zoom ?? false}
+          bind:zoom={ctrl.chartZoom}
+          rangePresets={cfg?.rangePresets}
+          syncGroup={cfg?.syncGroup}
+          contextMenu={cfg?.contextMenu}
+          animate={cfg?.animate}
+          localeText={cfg?.localeText}
+          crosshairLabels={crosshairLabelsProp}
+          toolbar={cfg?.export === true ? true : undefined}
+        />
+      </div>
+    {:else if spec && (spec.series.length || spec.gaugeValue != null || isCustom)}
       <SvGridChart
         {spec}
-        width={chartW}
-        height={chartH}
+        autosize
         onSelect={onChartSelect}
         interactive
-        legend
-        dataLabels={ctrl.chartDataLabels}
-        zoomable={cfg?.zoom === true}
+        legend={legendProp}
+        dataLabels={dataLabelsProp}
+        zoomable={cfg?.zoom ?? false}
+        bind:zoom={ctrl.chartZoom}
         brush={cfg?.brush === true}
+        rangePresets={cfg?.rangePresets}
+        syncGroup={cfg?.syncGroup}
+        contextMenu={cfg?.contextMenu}
+        animate={cfg?.animate}
+        localeText={cfg?.localeText}
+        crosshairLabels={crosshairLabelsProp}
         toolbar={cfg?.export === true ? true : undefined}
       />
     {:else}
       <p class="sv-grid-chart-empty">
         {#if !columns.dims.length || !columns.measures.length}
-          Charting needs at least one text column (to group by) and one numeric column (to measure).
+          {m.chartEmptyColumns}
         {:else}
-          No data to chart.
+          {m.chartEmptyData}
         {/if}
       </p>
     {/if}
   </div>
 
+  {#if Builder}
+    <Builder {ctrl} bind:open={builderOpen} types={availableTypes} messages={m} />
+  {/if}
+
   {#if floating && !maximized}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="sv-grid-chart-float-resizer"
       onpointerdown={startFloatResize}
       role="separator"
-      aria-label="Resize chart window"
+      aria-label={m.chartResizeWindow}
     ></div>
   {/if}
 </section>