@svgrid/grid 3.0.1 → 3.0.2

package/dist/grid-icons.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Grid chrome icons. Every glyph `<SvGrid>` draws for its own UI - sort
+ * indicators, the filter funnel, expanders, the pager arrows, tool-panel
+ * buttons - has a name here, and the `icons` prop replaces any subset of them.
+ *
+ * This mirrors `grid-messages.ts`: a name-keyed map with built-in defaults,
+ * where an unset name keeps the default. A partial map is all a consumer ever
+ * needs, so `icons` is safe to pass without knowing the full catalogue. That
+ * matters more than it looks - a single catch-all snippet would make the
+ * consumer responsible for every name the grid can ask for, and missing one
+ * renders an empty box. The `op-between` comment in SvGrid.svelte records what
+ * that looks like when it ships.
+ *
+ * Deliberately NOT in here:
+ *   - the scrollbar stepper arrows. `sv-grid-scrollbar.ts` is a custom element
+ *     that builds its SVG with `createElementNS` inside a shadow root, on
+ *     purpose, so it stays compatible with strict CSP / Trusted Types. A Svelte
+ *     snippet cannot render there. Theme it with the `--sg-scrollbar-*` tokens.
+ *   - the checkbox tick and its indeterminate dash. Both are `::after`
+ *     pseudo-elements drawn from borders (SvGrid.css), a form-control
+ *     affordance rather than an icon, and they render once per visible row.
+ *   - conditional formatting's `iconSet`. Those are value-driven data glyphs a
+ *     consumer already chooses; a different concept that shares the word.
+ */
+import type { Snippet } from 'svelte';
+/**
+ * Every icon `<SvGrid>` draws for its own chrome. Pass any subset of these to
+ * the `icons` prop to swap the built-in glyph for your own markup.
+ */
+export type GridIconName = 'sort' | 'sort-asc' | 'sort-desc' | 'filter' | 'menu' | 'group' | 'x' | 'chevron-down' | 'chevron-right' | 'autosize' | 'columns' | 'reset' | 'op-contains' | 'op-notContains' | 'op-equals' | 'op-notEquals' | 'op-startsWith' | 'op-endsWith' | 'op-regex' | 'op-in' | 'op-notIn' | 'op-greaterThan' | 'op-lessThan' | 'op-between' | 'op-isBlank' | 'op-isNotBlank' | 'pin-left' | 'pin-right' | 'unpin' | 'search' | 'tool-panel' | 'chart' | 'advanced-filter' | 'column-group-caret' | 'close' | 'clear' | 'remove' | 'row-number' | 'pinned-row-top' | 'pinned-row-bottom' | 'find-prev' | 'find-next' | 'move-up' | 'move-down' | 'group-add' | 'page-first' | 'page-prev' | 'page-next' | 'page-last' | 'page-size-caret' | 'drag-handle' | 'breadcrumb-separator';
+/**
+ * Consumer icon overrides, keyed by name. Any subset; names you leave out keep
+ * their built-in glyph, so `icons` never has to be exhaustive.
+ */
+export type GridIcons = Partial<Record<GridIconName, Snippet>>;
+/**
+ * Icons whose built-in form is a character rather than an SVG path. Kept as
+ * data so `<SvGrid>`, its footer and the standalone `SvRowGroupPanel` render
+ * the same defaults instead of three copies drifting apart.
+ *
+ * Each is the exact character that shipped inline before, so a grid that sets
+ * no `icons` renders byte-for-byte what it always did.
+ */
+export declare const GRID_ICON_GLYPHS: Partial<Record<GridIconName, string>>;
+/**
+ * Every icon name, in catalogue order. Exported for tests and docs generation;
+ * the grid itself never reads it, so it costs a consumer's bundle nothing.
+ */
+export declare const GRID_ICON_NAMES: ReadonlyArray<GridIconName>;

package/dist/grid-icons.js

@@ -0,0 +1,86 @@
+/**
+ * Icons whose built-in form is a character rather than an SVG path. Kept as
+ * data so `<SvGrid>`, its footer and the standalone `SvRowGroupPanel` render
+ * the same defaults instead of three copies drifting apart.
+ *
+ * Each is the exact character that shipped inline before, so a grid that sets
+ * no `icons` renders byte-for-byte what it always did.
+ */
+export const GRID_ICON_GLYPHS = {
+    close: '✕', // multiplication X
+    clear: '✕',
+    remove: '×', // multiplication sign
+    'row-number': '#',
+    'pinned-row-top': '↑', // upwards arrow
+    'pinned-row-bottom': '↓', // downwards arrow
+    'find-prev': '↑',
+    'find-next': '↓',
+    'move-up': '↑',
+    'move-down': '↓',
+    'group-add': '⊞', // squared plus
+    'page-first': '⇤', // leftwards arrow to bar
+    'page-prev': '‹', // single left-pointing angle quote
+    'page-next': '›', // single right-pointing angle quote
+    'page-last': '⇥', // rightwards arrow to bar
+    'page-size-caret': '▾', // black down-pointing small triangle
+    'drag-handle': '⠿', // braille pattern dots-123456, the grip
+    'breadcrumb-separator': '›',
+};
+/**
+ * Every icon name, in catalogue order. Exported for tests and docs generation;
+ * the grid itself never reads it, so it costs a consumer's bundle nothing.
+ */
+export const GRID_ICON_NAMES = [
+    'sort',
+    'sort-asc',
+    'sort-desc',
+    'filter',
+    'menu',
+    'group',
+    'x',
+    'chevron-down',
+    'chevron-right',
+    'autosize',
+    'columns',
+    'reset',
+    'op-contains',
+    'op-notContains',
+    'op-equals',
+    'op-notEquals',
+    'op-startsWith',
+    'op-endsWith',
+    'op-regex',
+    'op-in',
+    'op-notIn',
+    'op-greaterThan',
+    'op-lessThan',
+    'op-between',
+    'op-isBlank',
+    'op-isNotBlank',
+    'pin-left',
+    'pin-right',
+    'unpin',
+    'search',
+    'tool-panel',
+    'chart',
+    'advanced-filter',
+    'column-group-caret',
+    'close',
+    'clear',
+    'remove',
+    'row-number',
+    'pinned-row-top',
+    'pinned-row-bottom',
+    'find-prev',
+    'find-next',
+    'move-up',
+    'move-down',
+    'group-add',
+    'page-first',
+    'page-prev',
+    'page-next',
+    'page-last',
+    'page-size-caret',
+    'drag-handle',
+    'breadcrumb-separator',
+];

package/dist/index.d.ts

@@ -193,8 +193,8 @@ export { default as SvChart } from './SvGridChart.svelte';
 export { default as SvChartPanel } from './SvGridChartPanel.svelte';
 export type { ChartingConfig, ChartAggregateRequest, ChartAggregateBucket } from './SvGrid.types.js';
 export type { GridLocalization } from './SvGrid.types.js';
-export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type ChartValueFormat, type TreeNode, } from './chart.js';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, type ChartExportOptions, } from './chart-export.js';
+export { buildChart, formatChartValue, rowsToChartSpec, rowsToBoxSpec, rowsToDirectSpec, boxStats, sliceChartWindow, chartScales, ordinalDateTicks, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartScales, type ChartBar, type ChartCandle, type ChartBox, type ChartErrorBar, type BoxStats, type OhlcBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type ChartValueFormat, type TreeNode, } from './chart.js';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartCsvExportable, chartSpecToCsv, downloadChartCsv, type ChartExportOptions, } from './chart-export.js';
 export { buildSparkline, toSparklineValues, type SparklineConfig, type SparklineType, type SparklineGeometry, } from './sparkline.js';
 export { spreadsheetLayout, spansToMerges, type SpanColumn, type SpreadsheetActionOptions, type MergeSpec, type CellBorderSpec, type BorderSpec, } from './spreadsheet.js';
 export { rowResize, type RowResizeOptions } from './row-resize.js';
@@ -211,6 +211,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, type SavedView, type ViewStorage, type NamedViews, type AutoSavedViewOptions, } from './named-views.js';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, type ConditionalFormat, type ConditionalFormatSpec, type ColorScaleFormat, type ColorScaleStop, type ScaleBounds, type DataBarFormat, type IconSetFormat, type RuleFormat, type ResolvedCellFormat, } from './conditional-formatting.js';
 export { defaultGridMessages, resolveGridMessages, type GridMessages, } from './grid-messages.js';
+export { GRID_ICON_GLYPHS, GRID_ICON_NAMES, type GridIconName, type GridIcons, } from './grid-icons.js';
 export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, type GroupDisplayType, type GroupFooterOptions, type AutoGroupColumnSpec, type AutoGroupResult, type GroupPaginationOptions, type GroupPaginationResult, } from './group-display.js';
 export { getKeyboardIntent, getNextActiveCell, type GridKeyboardIntent } from './keyboard.js';
 export { createVirtualizer } from './virtualization/virtualizer.js';

package/dist/index.js

@@ -230,8 +230,8 @@ export { default as SvGridChartPanel } from './SvGridChartPanel.svelte';
 // as aliases so existing imports keep working.
 export { default as SvChart } from './SvGridChart.svelte';
 export { default as SvChartPanel } from './SvGridChartPanel.svelte';
-export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart.js';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, } from './chart-export.js';
+export { buildChart, formatChartValue, rowsToChartSpec, rowsToBoxSpec, rowsToDirectSpec, boxStats, sliceChartWindow, chartScales, ordinalDateTicks, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart.js';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartCsvExportable, chartSpecToCsv, downloadChartCsv, } from './chart-export.js';
 export { buildSparkline, toSparklineValues, } from './sparkline.js';
 export { spreadsheetLayout, spansToMerges, } from './spreadsheet.js';
 // The two resize actions, exported as a matched pair. `<SvGrid>` drives both
@@ -253,6 +253,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, } from './named-views.js';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, } from './conditional-formatting.js';
 export { defaultGridMessages, resolveGridMessages, } from './grid-messages.js';
+export { GRID_ICON_GLYPHS, GRID_ICON_NAMES, } from './grid-icons.js';
 export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, } from './group-display.js';
 export { getKeyboardIntent, getNextActiveCell } from './keyboard.js';
 export { createVirtualizer } from './virtualization/virtualizer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -116,15 +116,6 @@
     "themes",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "clean": "rimraf ./build && rimraf ./dist",
-    "test:eslint": "eslint ./src",
-    "test:types": "svelte-check --tsconfig ./tsconfig.json",
-    "test:lib": "vitest run --coverage",
-    "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ../../tools/add-dist-extensions.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
-    "lint": "eslint ./src"
-  },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -141,5 +132,14 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:lib": "vitest run --coverage",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ../../tools/add-dist-extensions.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
+    "lint": "eslint ./src"
   }
-}
+}

package/src/GridFooter.svelte

@@ -7,16 +7,25 @@
   import {
       fmtStat,
     } from "./SvGrid.helpers";
+  import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
   let {
     ctrl,
+    icon,
     pager = true,
     showStatus = true,
     top = false,
     pageSizeOptions,
   }: {
     ctrl: SvGridController<TFeatures, TData>;
+    /**
+     * The grid's icon resolver, so the pager arrows honour the `icons` prop.
+     * Required rather than optional: SvGrid is the only thing that mounts this
+     * component, so a missing icon would be a bug, not a supported call.
+     */
+    icon: Snippet<[GridIconName]>;
     /** Render the pagination controls in this instance. */
     pager?: boolean;
     /** Render the status bar in this instance. */
@@ -132,7 +141,7 @@
                   onclick={openPageSize}
                 >
                   <span class="sv-grid-dropdown-label">{pageSize}</span>
-                  <span class="sv-grid-dropdown-caret" aria-hidden="true">▾</span>
+                  <span class="sv-grid-dropdown-caret" aria-hidden="true">{@render icon("page-size-caret")}</span>
                 </button>
               </div>
             {/if}
@@ -149,14 +158,14 @@
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => goToPage(0)}
-            aria-label={messages.firstPage}>⇤</button
+            aria-label={messages.firstPage}>{@render icon("page-first")}</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => changePage(-1)}
-            aria-label={messages.prevPage}>‹</button
+            aria-label={messages.prevPage}>{@render icon("page-prev")}</button
           >
           <span class="sv-grid-pagination-label">
             {messages.page} <strong>{currentPage.toLocaleString()}</strong> {messages.of}
@@ -167,14 +176,14 @@
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => changePage(1)}
-            aria-label={messages.nextPage}>›</button
+            aria-label={messages.nextPage}>{@render icon("page-next")}</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => goToPage(pageCount - 1)}
-            aria-label={messages.lastPage}>⇥</button
+            aria-label={messages.lastPage}>{@render icon("page-last")}</button
           >
         </div>
       </div>

package/src/GridMenus.svelte

@@ -10,6 +10,7 @@
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import SvListBox from "./SvListBox.svelte";
   import type {
     FilterOperator,
@@ -23,7 +24,7 @@
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
-  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[string]> } = $props();
+  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[GridIconName]> } = $props();
 
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -403,7 +404,7 @@
               onclick={() => patchFilter(colId, { join: "OR" })}>OR</button>
             <button type="button" class="sv-grid-menu-join-x" title="Remove second condition"
               aria-label="Remove second condition"
-              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>×</button>
+              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>{@render icon("remove")}</button>
           </div>
           <select
             class="sv-grid-menu-operator-select"
@@ -452,11 +453,18 @@
           <span class="sv-grid-menu-head-note">{pickedCount} of {totalCount}</span>
         {/if}
       </div>
-      <input
-        class="sv-grid-menu-search"
-        placeholder="Search values..."
-        bind:value={ctrl.columnMenuSearch}
-      />
+      <!-- The magnifier used to be a background-image data URI in SvGrid.css
+           with a hard-coded stroke colour, so it ignored every theme and could
+           not be overridden. It is markup now, and the input keeps its own
+           class: focusFilterPanel() and a test both resolve `.sv-grid-menu-search`. -->
+      <span class="sv-grid-menu-search-wrap">
+        {@render icon("search")}
+        <input
+          class="sv-grid-menu-search"
+          placeholder="Search values..."
+          bind:value={ctrl.columnMenuSearch}
+        />
+      </span>
       <label class="sv-grid-facet sv-grid-facet-all">
         <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
         <!-- Says what it will actually do: with a query typed it acts on the
@@ -593,7 +601,7 @@
           onclick={() => pinColumnLeft(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-startsWith")}</span
+            >{@render icon("pin-left")}</span
           > Pin to left
         </button>
         <button
@@ -604,7 +612,7 @@
           onclick={() => pinColumnRight(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-greaterThan")}</span
+            >{@render icon("pin-right")}</span
           > Pin to right
         </button>
         <button
@@ -614,7 +622,7 @@
           disabled={!menuPinSide}
           onclick={() => unpinColumn(menuColumnId)}
         >
-          <span class="sv-grid-header-icon">{@render icon("x")}</span> Unpin column
+          <span class="sv-grid-header-icon">{@render icon("unpin")}</span> Unpin column
         </button>
       {/if}
       <div class="sv-grid-menu-sep"></div>

package/src/SvGrid.controller.svelte.ts

@@ -2028,6 +2028,18 @@ export function createSvGridController<
     dimensionId: string | null;
     measureId: string | null;
     seriesId: string | null | undefined;
+    /** Scatter only: the Y measure. The X measure reuses `measureId`. */
+    measure2Id: string | null;
+    // These four were config-only until the panel grew controls for them, so
+    // an author could set them and a user could not. Null inherits the config.
+    /** Bar orientation. */
+    orientation: "vertical" | "horizontal" | null;
+    /** Normalise each category to 100 percent. Implies stacked. */
+    stacked100: boolean | null;
+    /** Pie only: draw as a donut. */
+    donut: boolean | null;
+    /** Series colours chosen in the panel. */
+    palette: string[] | null;
     stacked: boolean | null;
     dataLabels: boolean | null;
     logScale: boolean | null;
@@ -2045,6 +2057,11 @@ export function createSvGridController<
     dimensionId: null,
     measureId: null,
     seriesId: undefined,
+    measure2Id: null,
+    orientation: null,
+    stacked100: null,
+    donut: null,
+    palette: null,
     stacked: null,
     dataLabels: null,
     logScale: null,
@@ -2088,14 +2105,22 @@ export function createSvGridController<
   const chartableColumns = $derived.by(function chartableColumns_d() {
     const dims: Array<{ id: string; field: string; label: string }> = [];
     const measures: Array<{ id: string; field: string; label: string }> = [];
+    // Dates are a subset of dims, tracked separately so the panel can tell
+    // whether a calendar chart is possible at all before the user picks
+    // anything. Offering a type that can only render blank is worse than not
+    // offering it.
+    const dates: Array<{ id: string; field: string; label: string }> = [];
     for (const col of allColumns) {
       const field = col.columnDef.field;
       if (!field) continue;
       const entry = { id: col.id, field, label: columnLabel(col) };
       if (isNumericColumn(col)) measures.push(entry);
-      else dims.push(entry);
+      else {
+        dims.push(entry);
+        if (columnIsDate(col)) dates.push(entry);
+      }
     }
-    return { dims, measures };
+    return { dims, measures, dates };
   });
   const chartColumnDefaults = $derived.by(function chartColumnDefaults_d() {
     const { dims, measures } = chartableColumns;
@@ -2139,6 +2164,21 @@ export function createSvGridController<
     if (configured.length) return configured;
     return chartColumnDefaults.measureIds;
   });
+  /** Scatter's Y measure. Defaults to the second numeric column, so picking
+   *  scatter plots something immediately rather than nothing. */
+  const effectiveChartMeasure2Id = $derived(
+    activeChart.measure2Id ??
+      chartableColumns.measures.find((m) => m.id !== effectiveChartMeasureId)?.id ??
+      null,
+  );
+  const effectiveChartOrientation = $derived(
+    activeChart.orientation ?? chartCfg?.orientation ?? "vertical",
+  );
+  const effectiveChartStacked100 = $derived(
+    activeChart.stacked100 ?? chartCfg?.stacked100 === true,
+  );
+  const effectiveChartDonut = $derived(activeChart.donut ?? !!chartCfg?.donut);
+  const effectiveChartPalette = $derived(activeChart.palette ?? chartCfg?.palette ?? null);
   const effectiveChartStacked = $derived(chartStacked ?? chartCfg?.stacked ?? false);
   const effectiveChartDataLabels = $derived(chartDataLabels ?? chartCfg?.dataLabels ?? false);
   const effectiveChartLogScale = $derived(chartLogScale ?? chartCfg?.yScale === "log");
@@ -2162,8 +2202,13 @@ export function createSvGridController<
       ? "Count"
       : `${chartReduce === "avg" ? "Average" : "Sum"} of ${label}`;
   });
-  const chartDimensionIsDate = $derived.by<boolean>(() => {
-    const col = allColumns.find((c) => c.id === effectiveChartDimensionId);
+  /**
+   * Does this column hold dates? Declared type first, then a probe of the
+   * first non-empty value. Lifted out of `chartDimensionIsDate` so the chart
+   * panel can also ask it of columns the user has NOT picked yet, which is
+   * what decides whether a calendar chart is offerable at all.
+   */
+  function columnIsDate(col: Column<TData> | undefined): boolean {
     if (!col) return false;
     if (col.columnDef.cellDataType === "date") return true;
     if (col.columnDef.cellDataType) return false;
@@ -2174,7 +2219,10 @@ export function createSvGridController<
       return typeof v === "string" && /^\d{4}-\d{2}(-\d{2})?/.test(v);
     }
     return false;
-  });
+  }
+  const chartDimensionIsDate = $derived.by<boolean>(() =>
+    columnIsDate(allColumns.find((c) => c.id === effectiveChartDimensionId)),
+  );
   const chartRows = $derived.by<TData[]>(() => {
     const rects = getSelectionRects();
     const pushLeaf = (out: TData[], row: Row<TData> | undefined) => {
@@ -2260,12 +2308,27 @@ export function createSvGridController<
   // null until it resolves, a tick after the panel itself starts loading (which it
   // already does). The `getAggregate` server path uses the local bucketsToSpec and
   // does not need the engine.
-  let chartEngine = $state<typeof import("./chart").rowsToChartSpec | null>(null);
+  // The whole module, not just `rowsToChartSpec`: the panel can now reach
+  // every chart type, and the ones that do not read a categories-by-series
+  // grid (scatter, gauge, treemap, calendar, sankey) need their own builders
+  // from the same lazy chunk. Same `import()`, same boundary.
+  let chartEngine = $state<typeof import("./chart") | null>(null);
   $effect(() => {
     if (chartingEnabled && !chartEngine)
-      import("./chart").then((m) => (chartEngine = m.rowsToChartSpec));
+      import("./chart").then((m) => (chartEngine = m));
   });
 
+  /** Put the chart's numbers in the same locale as the grid's. A grid that set
+   *  `localization.locale` has already said which locale its data is in, and a
+   *  chart of that data reading in a different one is a bug nobody would think
+   *  to look for; `charting.locale` overrides when they really should differ.
+   *  Currency has no such default - only the app knows what the numbers are. */
+  const applyChartLocale = (spec: ChartSpec) => {
+    const locale = chartCfg?.locale ?? props.localization?.locale;
+    if (locale) spec.locale = locale;
+    if (chartCfg?.currency) spec.currency = chartCfg.currency;
+  };
+
   const chartSpec = $derived.by<ChartSpec | null>(() => {
     if (!chartingEnabled || !chartCfg) return null;
     if (chartCfg.getAggregate) {
@@ -2277,6 +2340,7 @@ export function createSvGridController<
       if (effectiveChartTimeAxis) spec.xType = "time";
       if (effectiveChartLogScale) spec.yScale = "log";
       if (effectiveChartValueFormat) spec.valueFormat = effectiveChartValueFormat;
+      applyChartLocale(spec);
       return spec;
     }
     if (chartCfg.buildSpec) return chartCfg.buildSpec(chartRows) ?? null;
@@ -2287,31 +2351,65 @@ export function createSvGridController<
     // Engine not loaded yet (lazy): render nothing until it resolves.
     if (!chartEngine) return null;
     const seriesField = fieldOf(effectiveChartSeriesId);
+    const rowsForChart = chartRows as Array<Record<string, unknown>>;
+
+    // Some types read the rows directly rather than a grouped grid: a scatter
+    // point is one row, a gauge has no category axis at all, and a box plot
+    // needs the whole sample per group rather than one reduced number. The
+    // engine owns that dispatch - naming each type here would put them in the
+    // base bundle, which every grid pays for whether or not it ever charts.
+    // Everything else falls through to the aggregation below and is reshaped
+    // afterwards, so reduce / sort / topN / "Other" keep working for all of it.
+    const direct = chartEngine.rowsToDirectSpec(chartType, rowsForChart, {
+      category: category as string,
+      ...(values[0] ? { value: values[0] } : {}),
+      ...(fieldOf(effectiveChartMeasure2Id) ? { value2: fieldOf(effectiveChartMeasure2Id)! } : {}),
+      ...(seriesField ? { series: seriesField } : {}),
+      reduce: chartReduce,
+      ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
+    });
+    if (direct) return direct;
+    // A direct type that could not build (scatter with no Y picked yet, for
+    // instance) must not fall through to the bar-chart path and draw the wrong
+    // chart - it renders the panel's empty state instead.
+    if (chartType === "scatter" || chartType === "gauge" || chartType === "boxplot") return null;
 
-    const spec = chartEngine<Record<string, unknown>>(chartRows as Array<Record<string, unknown>>, {
+    const spec = chartEngine.rowsToChartSpec<Record<string, unknown>>(rowsForChart, {
       type: chartType,
       category: category as string,
       value: values.length === 1 ? values[0]! : values,
       ...(seriesField ? { series: seriesField } : {}),
       reduce: chartReduce,
-      stacked: effectiveChartStacked || chartCfg.stacked100 === true,
-      stacked100: chartCfg.stacked100 === true,
-      ...(chartCfg.palette ? { palette: chartCfg.palette } : {}),
+      stacked: effectiveChartStacked || effectiveChartStacked100,
+      stacked100: effectiveChartStacked100,
+      ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
       ...(chartCfg.topN ? { topN: chartCfg.topN } : {}),
       ...(chartCfg.otherLabel ? { otherLabel: chartCfg.otherLabel } : {}),
       ...(chartCfg.sort ? { sort: chartCfg.sort } : {}),
     });
 
-    if (chartCfg.orientation) spec.orientation = chartCfg.orientation;
+    // Reshape the aggregated grid into whatever this type actually reads.
+    // These run AFTER the aggregation so grouping, reduce, sort, topN and the
+    // "Other" bucket apply to them exactly as they do to a bar chart.
+    if (chartType === "treemap") spec.treemap = chartEngine.specToTreemap(spec);
+    else if (chartType === "calendar") spec.calendarValues = chartEngine.specToCalendar(spec);
+    else if (chartType === "sankey") {
+      const flow = chartEngine.specToSankey(spec);
+      spec.sankeyNodes = flow.nodes;
+      spec.sankeyLinks = flow.links;
+    }
+
+    if (effectiveChartOrientation === "horizontal") spec.orientation = "horizontal";
     if (effectiveChartTimeAxis) spec.xType = "time";
     if (effectiveChartLogScale) spec.yScale = "log";
     if (effectiveChartValueFormat) spec.valueFormat = effectiveChartValueFormat;
+    applyChartLocale(spec);
     if (chartType !== "pie" && spec.orientation !== "horizontal" && !spec.yAxisTitle && chartAutoYAxisTitle) {
       spec.yAxisTitle = chartAutoYAxisTitle;
     }
     if (effectiveChartValueFormat && activeChart.valueFormat === null) { /* inherited default */ }
     if (chartType === "pie") {
-      if (chartCfg.donut) spec.innerRadius = typeof chartCfg.donut === "number" ? chartCfg.donut : 0.6;
+      if (effectiveChartDonut) spec.innerRadius = typeof chartCfg.donut === "number" ? chartCfg.donut : 0.6;
     }
     if (chartCfg.annotations) spec.annotations = chartCfg.annotations;
     if (chartCfg.patternFallback) spec.patternFallback = true;
@@ -2331,7 +2429,20 @@ export function createSvGridController<
     return spec;
   });
 
+  /**
+   * Can a click on this chart be turned back into a grid filter?
+   *
+   * Only where a clicked mark maps to exactly one value of the charted
+   * dimension. It does not for a sankey (clicking a TARGET would filter the
+   * SOURCE column by a target value and empty the grid), a gauge (no category
+   * at all), or a scatter (the mark carries a point label, not a group).
+   */
+  const chartCrossFilterable = $derived(
+    chartType !== "sankey" && chartType !== "gauge" && chartType !== "scatter",
+  );
+
   function applyChartCrossFilter(category: string) {
+    if (!chartCrossFilterable) return;
     const dimId = effectiveChartDimensionId;
     if (!dimId) return;
     const existing = valueFilters[dimId];
@@ -3937,6 +4048,11 @@ export function createSvGridController<
         dimension: c.dimensionId,
         series: c.seriesId ?? null,
         measure: c.measureId,
+        measure2: c.measure2Id,
+        orientation: c.orientation,
+        stacked100: c.stacked100,
+        donut: c.donut,
+        palette: c.palette,
         reduce: c.reduce,
         stacked: c.stacked,
         dataLabels: c.dataLabels,
@@ -3954,6 +4070,11 @@ export function createSvGridController<
         dimensionId: (c.dimension as string | null) ?? null,
         measureId: (c.measure as string | null) ?? null,
         seriesId: c.series as string | null | undefined,
+        measure2Id: (c.measure2 as string | null) ?? null,
+        orientation: (c.orientation as "vertical" | "horizontal" | null) ?? null,
+        stacked100: (c.stacked100 as boolean | null) ?? null,
+        donut: (c.donut as boolean | null) ?? null,
+        palette: (c.palette as string[] | null) ?? null,
         stacked: (c.stacked as boolean | null) ?? null,
         dataLabels: (c.dataLabels as boolean | null) ?? null,
         logScale: (c.logScale as boolean | null) ?? null,
@@ -3963,6 +4084,18 @@ export function createSvGridController<
       charts = restored.length ? restored : [makeChart("Chart 1")];
       activeChartIndex = Math.max(0, Math.min(charts.length - 1, active ?? 0));
     },
+    get chartCrossFilterable() { return chartCrossFilterable; },
+    get chartOrientation() { return effectiveChartOrientation; },
+    set chartOrientation(v) { activeChart.orientation = v as never; },
+    get chartStacked100() { return effectiveChartStacked100; },
+    set chartStacked100(v) { activeChart.stacked100 = v as never; },
+    get chartDonut() { return effectiveChartDonut; },
+    set chartDonut(v) { activeChart.donut = v as never; },
+    get chartPalette() { return effectiveChartPalette; },
+    set chartPalette(v) { activeChart.palette = v as never; },
+    get chartMeasure2Id() { return activeChart.measure2Id; },
+    set chartMeasure2Id(v) { activeChart.measure2Id = v as never; },
+    get effectiveChartMeasure2Id() { return effectiveChartMeasure2Id; },
     get chartAiHandler() { return chartAiHandler; },
     set chartAiHandler(v) { chartAiHandler = v as never; },
     applyChartConfig(config: {