@svgrid/grid 2.1.6 → 2.1.8

package/src/SvGrid.svelte

@@ -54,6 +54,7 @@
   } from "./SvGrid.helpers";
   import { createSvGridController } from "./SvGrid.controller.svelte";
   import GridMenus from "./GridMenus.svelte";
+  import SvGridChartPanel from "./SvGridChartPanel.svelte";
   import GridFooter from "./GridFooter.svelte";
   import SvGridBoard from "./SvGridBoard.svelte";
   let props: Props<TFeatures, TData> = $props();
@@ -1303,35 +1304,52 @@
       </label>
     {/if}
 
-    {#if toolPanelEnabled}
+    {#if toolPanelEnabled || ctrl.chartingEnabled}
       <div class="sv-grid-toolbar">
-        <button
-          type="button"
-          class="sv-grid-toolbar-btn"
-          class:is-active={ctrl.toolPanelOpen}
-          aria-label={ctrl.toolPanelOpen
-            ? "Close tool panel"
-            : "Open tool panel (columns & filters)"}
-          aria-expanded={ctrl.toolPanelOpen}
-          onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            width="15"
-            height="15"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
+        {#if toolPanelEnabled}
+          <button
+            type="button"
+            class="sv-grid-toolbar-btn"
+            class:is-active={ctrl.toolPanelOpen}
+            aria-label={ctrl.toolPanelOpen
+              ? "Close tool panel"
+              : "Open tool panel (columns & filters)"}
+            aria-expanded={ctrl.toolPanelOpen}
+            onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="15"
+              height="15"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="3" y="4" width="6" height="16" rx="1" />
+              <rect x="11" y="4" width="4" height="16" rx="1" />
+              <rect x="17" y="4" width="4" height="16" rx="1" />
+            </svg>
+            Columns &amp; Filters
+          </button>
+        {/if}
+        {#if ctrl.chartingEnabled}
+          <button
+            type="button"
+            class="sv-grid-toolbar-btn sv-grid-chart-toggle"
+            class:is-active={ctrl.chartPanelOpen}
+            aria-label={ctrl.chartPanelOpen ? "Close chart" : "Open chart"}
+            aria-expanded={ctrl.chartPanelOpen}
+            onclick={() => (ctrl.chartPanelOpen = !ctrl.chartPanelOpen)}
           >
-            <rect x="3" y="4" width="6" height="16" rx="1" />
-            <rect x="11" y="4" width="4" height="16" rx="1" />
-            <rect x="17" y="4" width="4" height="16" rx="1" />
-          </svg>
-          Columns &amp; Filters
-        </button>
+            <svg viewBox="0 0 24 24" width="15" height="15" 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>
+            Chart
+          </button>
+        {/if}
       </div>
     {/if}
 
@@ -2757,6 +2775,10 @@
         </aside>
       {/if}
     {/if}
+
+    {#if ctrl.chartingEnabled && ctrl.chartPanelOpen}
+      <SvGridChartPanel {ctrl} />
+    {/if}
   </div>
   <!-- /.sv-grid-root -->
 

package/src/SvGrid.types.ts

@@ -10,6 +10,84 @@ import type {
 } from "./index";
 import type { ConditionalFormat } from "./conditional-formatting";
 import type { MenuItem } from "./SvMenuList.svelte";
+import type {
+  ChartType,
+  ChartSpec,
+  ChartAnnotation,
+  ChartReferenceLine,
+} from "./chart";
+
+/** One aggregated bucket returned by a server-side `getAggregate`. */
+export type ChartAggregateBucket = { category: string; series?: string; value: number };
+/** The request a server-side `getAggregate` receives (whole-dataset charting). */
+export type ChartAggregateRequest = {
+  dimension: string | undefined;
+  measure: string | null;
+  series?: string;
+  reduce: "sum" | "avg" | "count";
+  filterModel: Record<string, unknown>;
+};
+
+/**
+ * Config for the built-in `charting` prop. All fields optional and additive;
+ * `charting={true}` is the zero-config form. Column references are column
+ * field names / ids.
+ */
+export type ChartingConfig<TData extends RowData = RowData> = {
+  /** Right-side drawer (default) or bottom dock. */
+  position?: "bottom" | "right";
+  /** Open the panel on first render. */
+  defaultOpen?: boolean;
+  /** Initial chart type. */
+  defaultType?: ChartType;
+  /** Docked-bottom height (px). */
+  height?: number;
+  /** Drawer width (px). */
+  width?: number;
+  /** Clicking a chart category filters the grid on the charted dimension. */
+  crossFilter?: boolean;
+  /** Group-by column. */
+  dimension?: string;
+  /** Split-by column: one series per distinct value. */
+  series?: string;
+  /** Measure column, or several for a multi-series chart. */
+  measures?: string | string[];
+  reduce?: "sum" | "avg" | "count";
+  stacked?: boolean;
+  stacked100?: boolean;
+  /** Per-series-label type override (combo). */
+  seriesTypes?: Record<string, "bar" | "line" | "area">;
+  /** Per-series-label axis override (dual axis). */
+  seriesAxes?: Record<string, "left" | "right">;
+  referenceLines?: ChartReferenceLine[];
+  averageLine?: boolean;
+  trend?: "sma" | "ema" | "linear";
+  annotations?: ChartAnnotation[];
+  yScale?: "linear" | "log";
+  timeAxis?: boolean;
+  valueFormat?: "number" | "currency" | "percent" | "compact";
+  smooth?: boolean;
+  orientation?: "vertical" | "horizontal";
+  donut?: number | boolean;
+  palette?: string[];
+  patternFallback?: boolean;
+  topN?: number;
+  otherLabel?: string;
+  sort?: "value-desc" | "value-asc" | "category" | "none";
+  dataLabels?: boolean;
+  zoom?: boolean;
+  brush?: boolean;
+  /** Show the chart's PNG/SVG export toolbar. */
+  export?: boolean;
+  /** Escape hatch: build a fully custom ChartSpec from the (scoped) rows. */
+  buildSpec?: (rows: TData[]) => ChartSpec | null;
+  /** Server-side aggregation: chart the whole dataset, not just loaded rows. */
+  getAggregate?: (
+    request: ChartAggregateRequest,
+  ) => Promise<ReadonlyArray<ChartAggregateBucket>>;
+  /** Bump to force a server-side refetch. */
+  refreshKey?: unknown;
+};
 
 /**
  * The built-in card detail drawer. Set `board.drawer` (`true` for all fields,
@@ -578,6 +656,11 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * grid; the panel docks on the right edge.
    */
   toolPanel?: boolean;
+  /**
+   * Integrated charting: `true` for the zero-config docked chart panel, or a
+   * {@link ChartingConfig} object to author defaults + advanced options.
+   */
+  charting?: boolean | ChartingConfig<TData>;
   /**
    * Render the header column menu (⋮) as a tabbed popover - **General**,
    * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,

package/src/SvGridBoard.svelte

@@ -656,13 +656,8 @@
     if (dragLaneId == null) return;
     e.preventDefault();
     const ids = lanes.map((l) => l.id);
-    const from = ids.indexOf(dragLaneId);
     const to = ids.indexOf(laneId);
-    if (from > -1 && to > -1 && from !== to) {
-      ids.splice(to, 0, ids.splice(from, 1)[0]!);
-      laneOrder = ids;
-      board.onLaneReorder?.(ids);
-    }
+    if (to > -1) reorderLaneTo(dragLaneId, to);
     dragLaneId = null;
     overLaneId = null;
   }
@@ -671,6 +666,35 @@
     overLaneId = null;
   }
 
+  // Shared by mouse drag-drop (above) and keyboard reorder (below): moves
+  // `fromId` to `toIndex` in the lane order, persists it, and notifies.
+  // Returns the new ordered ids, or null if the move was a no-op / invalid.
+  function reorderLaneTo(fromId: string, toIndex: number): string[] | null {
+    const ids = lanes.map((l) => l.id);
+    const from = ids.indexOf(fromId);
+    if (from < 0 || toIndex < 0 || toIndex >= ids.length || from === toIndex) return null;
+    ids.splice(toIndex, 0, ids.splice(from, 1)[0]!);
+    laneOrder = ids;
+    board.onLaneReorder?.(ids);
+    return ids;
+  }
+  // Keyboard lane reorder: Ctrl/Cmd+ArrowLeft/Right shifts the focused lane
+  // header by one position, mirroring the drag-reorder above.
+  function onLaneHeaderKeydown(e: KeyboardEvent, laneId: string) {
+    if (!board.reorderableLanes) return;
+    if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") || !(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    const ids = lanes.map((l) => l.id);
+    const from = ids.indexOf(laneId);
+    if (from < 0) return;
+    const to = from + (e.key === "ArrowRight" ? 1 : -1);
+    const moved = reorderLaneTo(laneId, to);
+    if (moved) {
+      const pos = moved.indexOf(laneId) + 1;
+      announce(`Moved ${laneTitleById(laneId)} to position ${pos} of ${moved.length}.`);
+    }
+  }
+
   // Runtime group-by change: the position overlay (laneOf/orderOf/laneOrder) is
   // keyed to the old field, so reset it when `groupBy` changes. Edits and
   // sub-tasks (keyed by row) are kept. Skips the initial run so a restored
@@ -874,6 +898,19 @@
       openEditor(row);
       return;
     }
+    // Keyboard multi-select: Ctrl/Cmd+Space toggles this card's selection,
+    // mirroring onCardClick's ctrl/meta-click branch. Kept on a modifier so it
+    // never collides with plain Space, which grabs the card for a move.
+    if (board.selectable && e.key === " " && (e.ctrlKey || e.metaKey) && grabbed == null) {
+      e.preventDefault();
+      const k = key(row);
+      selected[k] = !selected[k];
+      emitSelection();
+      announce(
+        `${selected[k] ? "Selected" : "Deselected"} ${cardLabel(row)}. ${selectedRows().length} selected.`,
+      );
+      return;
+    }
     if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       if (grabbed === row) {
@@ -1214,10 +1251,15 @@
       class:is-reorderable={board.reorderableLanes}
       class:is-lane-dropover={overLaneId === lane.id && dragLaneId !== lane.id}
       draggable={board.reorderableLanes ? true : undefined}
+      tabindex={board.reorderableLanes ? 0 : undefined}
+      role={board.reorderableLanes ? "group" : undefined}
+      aria-roledescription={board.reorderableLanes ? "Reorderable lane" : undefined}
+      title={board.reorderableLanes ? "Ctrl+Left/Right arrow to reorder this lane" : undefined}
       ondragstart={board.reorderableLanes ? (e) => onLaneHeaderDragStart(e, lane.id) : undefined}
       ondragover={board.reorderableLanes ? (e) => onLaneHeaderDragOver(e, lane.id) : undefined}
       ondrop={board.reorderableLanes ? (e) => onLaneHeaderDrop(e, lane.id) : undefined}
       ondragend={board.reorderableLanes ? onLaneHeaderDragEnd : undefined}
+      onkeydown={board.reorderableLanes ? (e) => onLaneHeaderKeydown(e, lane.id) : undefined}
       oncontextmenu={board.laneMenu ? (e) => openLaneMenu(e, lane.id, cards) : undefined}
     >
       {#if board.collapsibleLanes}
@@ -1241,14 +1283,21 @@
           }}
           onblur={() => commitRename(lane.id)}
         />
+      {:else if board.onLaneRename}
+        <button
+          type="button"
+          class="sv-board-lane-title is-renamable"
+          ondblclick={() => startRename(lane)}
+          onkeydown={(e) => {
+            if (e.key === "Enter" || e.key === "F2") {
+              e.preventDefault();
+              startRename(lane);
+            }
+          }}
+          title="Double-click, Enter, or F2 to rename"
+        >{laneTitle(lane)}</button>
       {:else}
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <span
-          class="sv-board-lane-title"
-          class:is-renamable={board.onLaneRename}
-          ondblclick={board.onLaneRename ? () => startRename(lane) : undefined}
-          title={board.onLaneRename ? "Double-click to rename" : undefined}
-        >{laneTitle(lane)}</span>
+        <span class="sv-board-lane-title">{laneTitle(lane)}</span>
       {/if}
       <span
         class="sv-board-lane-count"
@@ -1630,7 +1679,16 @@
     color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
   }
   .sv-board-lane-title.is-renamable {
+    all: unset;
     cursor: text;
+    font-weight: 600;
+    font-size: 0.82rem;
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
   }
   .sv-board-lane-rename {
     flex: 1 1 auto;

package/src/SvGridChart.svelte

@@ -7,7 +7,7 @@
    * focus tooltips, a clickable legend that toggles series, optional data
    * labels, and an `onSelect` drill hook. No external charting dependency.
    */
-  import { buildChart, DEFAULT_PALETTE, type ChartSpec, type ChartSelection } from './chart'
+  import { buildChart, DEFAULT_PALETTE, formatChartValue, type ChartSpec, type ChartSelection } from './chart'
 
   type Props = {
     spec: ChartSpec
@@ -38,6 +38,10 @@
      *  export (PNG / SVG / copy). Default true when zoomable or onDrill is
      *  set, otherwise false. Set to `false` to hide explicitly. */
     toolbar?: boolean
+    /** Explicit chart pixel size (viewBox). When set, the chart lays out to
+     *  fit exactly - used by the docked panel to size the chart to its body. */
+    width?: number
+    height?: number
   }
   let {
     spec,
@@ -51,15 +55,19 @@
     brush = false,
     brushHeight = 88,
     toolbar,
+    width,
+    height,
   }: Props = $props()
   const showToolbar = $derived(toolbar ?? (zoomable || !!onDrill))
 
   const fmt = (v: number) =>
     formatValue
       ? formatValue(v)
-      : Number.isFinite(v)
-        ? v.toLocaleString(undefined, { maximumFractionDigits: 2 })
-        : String(v)
+      : spec.valueFormat
+        ? formatChartValue(v, spec.valueFormat)
+        : Number.isFinite(v)
+          ? v.toLocaleString(undefined, { maximumFractionDigits: 2 })
+          : String(v)
 
   let hidden = $state(new Set<string>())
   // Isolate: double-clicking a legend chip shows ONLY that series/slice.
@@ -290,7 +298,9 @@
   // chartEl) and hand buildChart a light/dark hint so low-value cells render as
   // "cold" rather than glaring white rectangles on a dark grid.
   let isDark = $state(false)
-  const geo = $derived(buildChart(visibleSpec, isDark ? 'dark' : 'light'))
+  const geo = $derived(
+    buildChart(width || height ? { ...visibleSpec, width, height } : visibleSpec, isDark ? 'dark' : 'light'),
+  )
   const isCartesian = $derived(
     spec.type !== 'pie' && spec.type !== 'heatmap' &&
     spec.type !== 'funnel' && spec.type !== 'radar' &&
@@ -727,6 +737,15 @@
           <text class="sv-grid-chart-axis" x={t.x} y={geo.plot.y + geo.plot.h + 16} text-anchor="middle">{truncate(t.label, 16)}</text>
         {/if}
       {/each}
+      <!-- Grouped (nested) category axis: parent tier under the leaf labels. -->
+      {#each geo.categoryGroupTicks as g (g.label + g.x0)}
+        {@const gy = geo.plot.y + geo.plot.h + (geo.xLabelRotated ? 46 : 32)}
+        <line class="sv-grid-chart-gridline" x1={g.x0 + 3} y1={gy - 9} x2={g.x1 - 3} y2={gy - 9} />
+        {#if g.x0 > geo.plot.x + 1}
+          <line class="sv-grid-chart-gridline" x1={g.x0} y1={geo.plot.y + geo.plot.h} x2={g.x0} y2={gy - 9} opacity="0.5" />
+        {/if}
+        <text class="sv-grid-chart-axis sv-grid-chart-group-label" x={g.xCenter} y={gy} text-anchor="middle">{truncate(g.label, Math.max(4, Math.floor((g.x1 - g.x0) / 7)))}</text>
+      {/each}
       {#if spec.yAxisTitle}
         <text class="sv-grid-chart-axis-title" x={13} y={geo.plot.y + geo.plot.h / 2} text-anchor="middle" transform={`rotate(-90 13 ${geo.plot.y + geo.plot.h / 2})`}>{spec.yAxisTitle}</text>
       {/if}
@@ -850,6 +869,7 @@
           onmousemove={(e) => hoverCell(e.clientX, e.clientY, cell)}
           onmouseleave={clearActive}
           onclick={() => select(cell.colLabel, cell.rowLabel, cell.value)}
+          onkeydown={(e) => { if (onSelect && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); select(cell.colLabel, cell.rowLabel, cell.value) } }}
         />
         {#if dataLabels && cell.w > 22 && cell.h > 14}
           <text class="sv-grid-chart-heatlabel" x={cell.x + cell.w / 2} y={cell.y + cell.h / 2 + 3} text-anchor="middle" fill={cell.textColor}>{fmt(cell.value)}</text>
@@ -887,6 +907,7 @@
           onmousemove={(e) => hoverFunnel(e.clientX, e.clientY, seg)}
           onmouseleave={clearActive}
           onclick={() => select(seg.label, seg.label, seg.value, fi)}
+          onkeydown={(e) => { if (onSelect && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); select(seg.label, seg.label, seg.value, fi) } }}
         />
         <text class="sv-grid-chart-funnel-label" x={seg.cx} y={seg.cy - 3} text-anchor="middle" fill={seg.textColor}>{truncate(seg.label, 24)}</text>
         <text class="sv-grid-chart-funnel-value" x={seg.cx} y={seg.cy + 11} text-anchor="middle" fill={seg.textColor}>
@@ -997,15 +1018,18 @@
 
     {#if isTreemap}
       {#each geo.treemapCells as cell, ti (ti)}
-        <!-- svelte-ignore a11y_no_static_element_interactions a11y_mouse_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions a11y_mouse_events_have_key_events a11y_no_noninteractive_tabindex -->
         <rect
           class="sv-grid-chart-treemap-cell"
           x={cell.x} y={cell.y} width={cell.w} height={cell.h}
           fill={cell.color}
+          role={onSelect ? 'button' : 'presentation'}
+          tabindex={onSelect ? 0 : undefined}
           aria-label={`${cell.name}: ${fmt(cell.value)}`}
           onmousemove={(e) => showTip(e.clientX, e.clientY, cell.name, [{ color: cell.color, value: fmt(cell.value) }])}
           onmouseleave={clearActive}
           onclick={() => select(cell.name, '', cell.value)}
+          onkeydown={(e) => { if (onSelect && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); select(cell.name, '', cell.value) } }}
         />
         {#if cell.w > 36 && cell.h > 18}
           <text class="sv-grid-chart-treemap-label" x={cell.x + 4} y={cell.y + 12} fill={cell.textColor}>{truncate(cell.name, Math.max(3, Math.floor(cell.w / 7)))}</text>
@@ -1034,17 +1058,23 @@
       {/each}
       <!-- Node rectangles + labels. -->
       {#each geo.sankeyNodes as node, ni (ni)}
-        <!-- svelte-ignore a11y_no_static_element_interactions a11y_mouse_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions a11y_mouse_events_have_key_events a11y_no_noninteractive_tabindex -->
         <rect
           class="sv-grid-chart-sankey-node"
           x={node.x} y={node.y} width={node.w} height={node.h}
           fill={node.color}
+          tabindex={0}
           aria-label={`${node.label}: in ${fmt(node.totalIn)}, out ${fmt(node.totalOut)}`}
           onmousemove={(e) => showTip(e.clientX, e.clientY, node.label, [
             { label: 'in',  value: fmt(node.totalIn) },
             { label: 'out', value: fmt(node.totalOut) },
           ])}
           onmouseleave={clearActive}
+          onfocus={(e) => { const b = e.currentTarget.getBoundingClientRect(); showTip(b.left + b.width / 2, b.top, node.label, [
+            { label: 'in',  value: fmt(node.totalIn) },
+            { label: 'out', value: fmt(node.totalOut) },
+          ]) }}
+          onblur={clearActive}
         />
         <text class="sv-grid-chart-sankey-label"
           x={node.column === 0 ? node.x + node.w + 4 : node.x - 4}
@@ -1270,6 +1300,10 @@
     font-weight: 600;
     font-family: inherit;
   }
+  .sv-grid-chart-group-label {
+    fill: var(--sg-fg, #0f172a);
+    font-weight: 600;
+  }
   .sv-grid-chart-crosshair {
     stroke: var(--sg-accent, #2563eb);
     stroke-width: 1;