@svgrid/grid 3.0.0 → 3.0.2

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: {

package/src/SvGrid.css

@@ -153,6 +153,10 @@
 /* Advanced-filter indicator. Reads as state rather than as another action, so
    it uses the accent fill the toolbar buttons reserve for `is-active` instead
    of the neutral button shell. */
+.sv-grid-advf-chip > .sv-grid-icon {
+  width: 13px;
+  height: 13px;
+}
 .sv-grid-advf-chip {
   display: inline-flex;
   align-items: center;
@@ -261,6 +265,12 @@
   flex-shrink: 0;
 }
 .sv-grid-tool-panel-btn {
+  /* Centred as flex because these draw an icon now, not a bare character: a
+     glyph default still centres, and an SVG override no longer sits on the
+     text baseline. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 22px;
   height: 22px;
   border: 0;
@@ -807,9 +817,18 @@
   color: var(--sg-accent, #2563eb);
 }
 .sv-grid-group-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
   flex-shrink: 0;
   transition: transform 140ms ease;
 }
+.sv-grid-group-caret > .sv-grid-icon {
+  width: 100%;
+  height: 100%;
+}
 /* Collapsed: point the caret right (like a closed disclosure). */
 .sv-grid-group-toggle.is-collapsed .sv-grid-group-caret {
   transform: rotate(-90deg);
@@ -1855,6 +1874,23 @@ select.sv-grid-fr-editor {
   display: block;
   flex: none;
 }
+/* A consumer icon from the `icons` prop. SvGrid wraps the override in this box
+   rather than asking the consumer to add `.sv-grid-icon` themselves, so it
+   inherits every per-site size rule below and the expander's rotate-on-open
+   without needing to know those rules exist. Must stay AFTER .sv-grid-icon:
+   equal specificity, and this display has to win. */
+.sv-grid-icon-custom {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.sv-grid-icon-custom > svg,
+.sv-grid-icon-custom > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 
 .sv-grid-header-cell {
   display: flex;
@@ -2453,14 +2489,19 @@ select.sv-grid-fr-editor {
    group banners and auto-group columns, SvGroupCell and SvTree all draw the
    same `chevron-right` and rotate it open, rather than swapping between two
    different glyphs. */
-.sv-grid-tree-toggle .sv-grid-icon,
-.sv-grid-group-toggle .sv-grid-icon {
+/* Direct child, not descendant. The column-group header button also carries
+   `sv-grid-group-toggle` + `aria-expanded`, and its caret is wrapped one level
+   deeper - a descendant selector would rotate that caret 90deg too, so an
+   expanded down-caret would point left. The three row/tree expanders render
+   their icon as an immediate child, so `>` changes nothing for them. */
+.sv-grid-tree-toggle > .sv-grid-icon,
+.sv-grid-group-toggle > .sv-grid-icon {
   width: 12px;
   height: 12px;
   transition: transform 0.15s ease;
 }
-.sv-grid-tree-toggle[aria-expanded="true"] .sv-grid-icon,
-.sv-grid-group-toggle[aria-expanded="true"] .sv-grid-icon {
+.sv-grid-tree-toggle[aria-expanded="true"] > .sv-grid-icon,
+.sv-grid-group-toggle[aria-expanded="true"] > .sv-grid-icon {
   transform: rotate(90deg);
 }
 .sv-grid-tree-toggle:focus-visible {
@@ -2624,7 +2665,7 @@ select.sv-grid-fr-editor {
   box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
   min-width: 280px;
 }
-.sv-grid-find-icon {
+.sv-grid-find > .sv-grid-icon {
   width: 14px; height: 14px;
   color: var(--sg-muted, #94a3b8);
   flex: none;
@@ -2868,13 +2909,26 @@ select.sv-grid-fr-editor {
   opacity: 1;
 }
 
-/* Magnifier prefix on the menu's search input. */
+/* Magnifier prefix on the menu's search input. Real markup rather than a
+   background-image, so it follows the theme and the `icons` prop can replace
+   it; the input keeps its own class because focusFilterPanel() and a test both
+   resolve `.sv-grid-menu-search`. */
 .sv-grid-menu-search {
   padding-left: 28px;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
-  background-position: 8px center;
-  background-repeat: no-repeat;
-  background-size: 14px 14px;
+}
+.sv-grid-menu-search-wrap {
+  position: relative;
+  display: block;
+}
+.sv-grid-menu-search-wrap > .sv-grid-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--sg-muted, #94a3b8);
+  pointer-events: none;
 }
 
 /* Filter menu vertical rhythm. */
@@ -2910,6 +2964,11 @@ select.sv-grid-fr-editor {
   opacity: 1;
 }
 
+.sv-grid-board-search > .sv-grid-icon {
+  width: 14px;
+  height: 14px;
+}
+
 /* Kanban board mode search box (board.searchable) */
 .sv-grid-board-search {
   display: flex;
@@ -3048,6 +3107,16 @@ select.sv-grid-fr-editor {
 .sv-grid-chart-actions { display: inline-flex; align-items: center; gap: 6px; }
 .sv-grid-chart-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
 .sv-grid-chart-controls:empty { display: none; }
+/* Says why the chosen chart type cannot draw yet - a missing Split by, too few
+   groups. The picker deliberately does NOT hide such a type: options that come
+   and go as the user filters are worse than one sentence of explanation. */
+.sv-grid-chart-hint {
+  flex-basis: 100%;
+  margin: 2px 0 0;
+  font-size: 11.5px;
+  font-weight: 400;
+  color: var(--sg-muted, #64748b);
+}
 .sv-grid-chart-ctl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
 .sv-grid-chart-ctl select {
   font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-fg, #0f172a);