@svgrid/grid 3.0.0 → 3.0.2

package/src/cell-values.ts

@@ -1,148 +1,148 @@
-// Pure column/cell value access + display-formatting helpers. They operate
-// only on their Column/Row/data arguments (plus the numeric formatter), so
-// they hold no grid state and live outside the controller.
-import type {
-  CellFormatConfig,
-  Column,
-  ColumnDef,
-  Row,
-  RowData,
-  TableFeatures,
-} from "./index";
-import { formatNumericWithConfig } from "./cell-formatting";
-
-export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, column: Column<TData>) {
-  const def = column.columnDef;
-  if (def.fieldFn) return def.fieldFn(row.original);
-  if (def.field) return row.original[def.field];
-  return row.getCellValueByColumnId(column.id);
-}
-
-/**
- * Map a visible row back to its slot in the data array.
- *
- * The bulk writers (paste, clear) rebuild `internalData` immutably, so unlike
- * the inline editor - which mutates `row.original` in place and never needs an
- * index - they have to locate the slot first. They used to read it as
- * `Number(row.id)`, which is only the array index under the DEFAULT `getRowId`.
- * A grid with `getRowId={(t) => String(t.id)}` over 1-based ids wrote one row
- * BELOW the selection on every paste, and one with non-numeric ids ('PLAT-412')
- * parsed to NaN and dropped the write silently.
- *
- * Identity is the reliable key: the row model's `original` IS the object in
- * `data`. Returns a lookup rather than a per-row scan so a multi-row paste
- * stays O(n) instead of O(n * rows).
- */
-export function createDataIndexLookup<TData extends RowData>(
-  data: ReadonlyArray<TData>,
-): (row: Row<TData>) => number {
-  const byRef = new Map<unknown, number>();
-  for (let i = 0; i < data.length; i += 1) {
-    // First slot wins: with a duplicated object reference in `data`, writing
-    // the earlier one matches what the row model itself resolves to.
-    if (!byRef.has(data[i])) byRef.set(data[i], i);
-  }
-  return (row) => {
-    const hit = byRef.get(row?.original);
-    return hit === undefined ? -1 : hit;
-  };
-}
-
-export function isGroupRow<TData extends RowData>(row: Row<TData>) {
-  // Tree rows are expandable too, but they are real data rows - rendering one as
-  // a full-width banner would swallow its cells. Only grouping's synthetic rows
-  // are banners.
-  if ((row as { __treeRow?: boolean }).__treeRow) return false;
-  return typeof row.getCanExpand === "function" && row.getCanExpand();
-}
-
-export function toolPanelHeaderLabel<TData extends RowData>(column: Column<TData>): string {
-  const h = column.columnDef.header;
-  return typeof h === "string" ? h : column.id;
-}
-
-/** Apply the column's `format` config to a raw numeric summary value
- *  (sum / avg / etc.). Mirrors the currency/number/percent branches in
- *  `formatCellValue` so a totaled salary column shows "$1,234,567" in
- *  the footer instead of "1234567". Per-row `formatter` functions are
- *  intentionally NOT invoked here - they may close over row state. */
-export function formatSummaryNumeric<TData extends RowData>(column: Column<TData>, value: number): string {
-  const formatConfig = column.columnDef.format as
-    | CellFormatConfig
-    | undefined;
-  if (
-    formatConfig &&
-    (formatConfig.type === "number" ||
-      formatConfig.type === "currency" ||
-      formatConfig.type === "percent")
-  ) {
-    return formatNumericWithConfig(value, {
-      type: formatConfig.type,
-      locales: formatConfig.locales,
-      currency:
-        formatConfig.type === "currency"
-          ? (formatConfig.currency ?? "USD")
-          : undefined,
-      valueIsPercentPoints:
-        formatConfig.type === "percent"
-          ? formatConfig.valueIsPercentPoints
-          : undefined,
-      options: formatConfig.options,
-    });
-  }
-  return String(value);
-}
-
-/**
- * Effective horizontal alignment for a column. Honors the explicit
- * `align` prop on the ColumnDef; otherwise picks a sensible default
- * based on `editorType`:
- *   number / date / datetime → 'right'
- *   checkbox                 → 'center'
- *   everything else          → 'left'
- */
-export function getColumnAlign<TData extends RowData>(column: Column<TData>): "left" | "center" | "right" {
-  const explicit = column.columnDef.align;
-  if (explicit) return explicit;
-  const editorType = column.columnDef.editorType;
-  if (
-    editorType === "number" ||
-    editorType === "date" ||
-    editorType === "datetime"
-  ) {
-    return "right";
-  }
-  if (editorType === "checkbox") return "center";
-  return "left";
-}
-
-/**
- * Read a cell value from a PINNED row. Pinned rows aren't bound to a
- * TanStack Row<TData>, so we resolve the value directly off the raw
- * TData via `fieldFn` or `field`. Mirrors `getColumnBaseValue`'s
- * lookup path minus the Row indirection.
- */
-export function getPinnedCellValue<TData extends RowData>(
-  rowData: TData,
-  column: Column<TData>,
-): unknown {
-  const def = column.columnDef;
-  if (def.fieldFn) return def.fieldFn(rowData);
-  const field = def.field as string | undefined;
-  if (!field) return undefined;
-  return (rowData as unknown as Record<string, unknown>)[field];
-}
-
-export function getColumnAccessorValue<TData extends RowData>(rowData: TData, column: Column<TData>) {
-  const def = column.columnDef;
-  if (def.fieldFn) return def.fieldFn(rowData);
-  if (def.field) return rowData[def.field];
-  return undefined;
-}
-
-export function columnDefMatchesId<TFeatures extends TableFeatures, TData extends RowData>(
-  def: ColumnDef<TFeatures, TData>,
-  columnId: string,
-): boolean {
-  return (def.id ?? def.field ?? null) === columnId;
-}
+// Pure column/cell value access + display-formatting helpers. They operate
+// only on their Column/Row/data arguments (plus the numeric formatter), so
+// they hold no grid state and live outside the controller.
+import type {
+  CellFormatConfig,
+  Column,
+  ColumnDef,
+  Row,
+  RowData,
+  TableFeatures,
+} from "./index";
+import { formatNumericWithConfig } from "./cell-formatting";
+
+export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, column: Column<TData>) {
+  const def = column.columnDef;
+  if (def.fieldFn) return def.fieldFn(row.original);
+  if (def.field) return row.original[def.field];
+  return row.getCellValueByColumnId(column.id);
+}
+
+/**
+ * Map a visible row back to its slot in the data array.
+ *
+ * The bulk writers (paste, clear) rebuild `internalData` immutably, so unlike
+ * the inline editor - which mutates `row.original` in place and never needs an
+ * index - they have to locate the slot first. They used to read it as
+ * `Number(row.id)`, which is only the array index under the DEFAULT `getRowId`.
+ * A grid with `getRowId={(t) => String(t.id)}` over 1-based ids wrote one row
+ * BELOW the selection on every paste, and one with non-numeric ids ('PLAT-412')
+ * parsed to NaN and dropped the write silently.
+ *
+ * Identity is the reliable key: the row model's `original` IS the object in
+ * `data`. Returns a lookup rather than a per-row scan so a multi-row paste
+ * stays O(n) instead of O(n * rows).
+ */
+export function createDataIndexLookup<TData extends RowData>(
+  data: ReadonlyArray<TData>,
+): (row: Row<TData>) => number {
+  const byRef = new Map<unknown, number>();
+  for (let i = 0; i < data.length; i += 1) {
+    // First slot wins: with a duplicated object reference in `data`, writing
+    // the earlier one matches what the row model itself resolves to.
+    if (!byRef.has(data[i])) byRef.set(data[i], i);
+  }
+  return (row) => {
+    const hit = byRef.get(row?.original);
+    return hit === undefined ? -1 : hit;
+  };
+}
+
+export function isGroupRow<TData extends RowData>(row: Row<TData>) {
+  // Tree rows are expandable too, but they are real data rows - rendering one as
+  // a full-width banner would swallow its cells. Only grouping's synthetic rows
+  // are banners.
+  if ((row as { __treeRow?: boolean }).__treeRow) return false;
+  return typeof row.getCanExpand === "function" && row.getCanExpand();
+}
+
+export function toolPanelHeaderLabel<TData extends RowData>(column: Column<TData>): string {
+  const h = column.columnDef.header;
+  return typeof h === "string" ? h : column.id;
+}
+
+/** Apply the column's `format` config to a raw numeric summary value
+ *  (sum / avg / etc.). Mirrors the currency/number/percent branches in
+ *  `formatCellValue` so a totaled salary column shows "$1,234,567" in
+ *  the footer instead of "1234567". Per-row `formatter` functions are
+ *  intentionally NOT invoked here - they may close over row state. */
+export function formatSummaryNumeric<TData extends RowData>(column: Column<TData>, value: number): string {
+  const formatConfig = column.columnDef.format as
+    | CellFormatConfig
+    | undefined;
+  if (
+    formatConfig &&
+    (formatConfig.type === "number" ||
+      formatConfig.type === "currency" ||
+      formatConfig.type === "percent")
+  ) {
+    return formatNumericWithConfig(value, {
+      type: formatConfig.type,
+      locales: formatConfig.locales,
+      currency:
+        formatConfig.type === "currency"
+          ? (formatConfig.currency ?? "USD")
+          : undefined,
+      valueIsPercentPoints:
+        formatConfig.type === "percent"
+          ? formatConfig.valueIsPercentPoints
+          : undefined,
+      options: formatConfig.options,
+    });
+  }
+  return String(value);
+}
+
+/**
+ * Effective horizontal alignment for a column. Honors the explicit
+ * `align` prop on the ColumnDef; otherwise picks a sensible default
+ * based on `editorType`:
+ *   number / date / datetime → 'right'
+ *   checkbox                 → 'center'
+ *   everything else          → 'left'
+ */
+export function getColumnAlign<TData extends RowData>(column: Column<TData>): "left" | "center" | "right" {
+  const explicit = column.columnDef.align;
+  if (explicit) return explicit;
+  const editorType = column.columnDef.editorType;
+  if (
+    editorType === "number" ||
+    editorType === "date" ||
+    editorType === "datetime"
+  ) {
+    return "right";
+  }
+  if (editorType === "checkbox") return "center";
+  return "left";
+}
+
+/**
+ * Read a cell value from a PINNED row. Pinned rows aren't bound to a
+ * TanStack Row<TData>, so we resolve the value directly off the raw
+ * TData via `fieldFn` or `field`. Mirrors `getColumnBaseValue`'s
+ * lookup path minus the Row indirection.
+ */
+export function getPinnedCellValue<TData extends RowData>(
+  rowData: TData,
+  column: Column<TData>,
+): unknown {
+  const def = column.columnDef;
+  if (def.fieldFn) return def.fieldFn(rowData);
+  const field = def.field as string | undefined;
+  if (!field) return undefined;
+  return (rowData as unknown as Record<string, unknown>)[field];
+}
+
+export function getColumnAccessorValue<TData extends RowData>(rowData: TData, column: Column<TData>) {
+  const def = column.columnDef;
+  if (def.fieldFn) return def.fieldFn(rowData);
+  if (def.field) return rowData[def.field];
+  return undefined;
+}
+
+export function columnDefMatchesId<TFeatures extends TableFeatures, TData extends RowData>(
+  def: ColumnDef<TFeatures, TData>,
+  columnId: string,
+): boolean {
+  return (def.id ?? def.field ?? null) === columnId;
+}

package/src/chart-export.test.ts

@@ -4,7 +4,10 @@ import {
   chartToPngBlob,
   downloadChartSvg,
   downloadChartPng,
+  chartSpecToCsv,
+  chartCsvExportable,
 } from './chart-export'
+import type { ChartSpec } from './chart'
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
 
@@ -368,3 +371,112 @@ describe('downloadChartPng', () => {
     expect(revoke).toHaveBeenCalledWith('blob:png-url')
   })
 })
+
+describe('chartSpecToCsv: series that carry more than one number', () => {
+  it('keeps a plain series byte-identical', () => {
+    const csv = chartSpecToCsv({
+      type: 'bar',
+      categories: ['a', 'b'],
+      series: [{ label: 'rev', values: [1, 2] }, { label: 'cost', values: [3, 4] }],
+    })
+    expect(csv).toBe('Category,rev,cost\na,1,3\nb,2,4')
+  })
+
+  it('writes all four prices for a candlestick, not just the closes', () => {
+    // The screen-reader table was given the four real numbers on purpose. The
+    // export is what people actually take away, and it wrote `values` - the
+    // closes - and silently dropped the rest.
+    const csv = chartSpecToCsv({
+      type: 'candlestick',
+      categories: ['2026-03-02', '2026-03-03'],
+      series: [{
+        label: 'ACME',
+        values: [105, 101],
+        ohlc: [{ o: 100, h: 110, l: 95, c: 105 }, { o: 105, h: 108, l: 99, c: 101 }],
+      }],
+    })
+    const [header, ...rows] = csv.split('\n')
+    expect(header).toBe('Category,ACME Open,ACME High,ACME Low,ACME Close')
+    expect(rows[0]).toBe('2026-03-02,100,110,95,105')
+    expect(rows[1]).toBe('2026-03-03,105,108,99,101')
+  })
+
+  it('writes the whole five-number summary for a box plot', () => {
+    const csv = chartSpecToCsv({
+      type: 'boxplot',
+      categories: ['eu', 'ap'],
+      series: [{
+        label: 'ms',
+        values: [20, 30],
+        boxes: [
+          { min: 10, q1: 15, median: 20, q3: 25, max: 30, outliers: [90, 120] },
+          { min: 20, q1: 25, median: 30, q3: 35, max: 40 },
+        ],
+      }],
+    })
+    const [header, ...rows] = csv.split('\n')
+    expect(header).toBe('Category,ms Min,ms Q1,ms Median,ms Q3,ms Max,ms Outliers')
+    expect(rows[0]).toBe('eu,10,15,20,25,30,90 120')
+    // A box with no outliers leaves the cell empty rather than writing "0".
+    expect(rows[1]).toBe('ap,20,25,30,35,40,')
+  })
+
+  it('resolves error bars to absolute low / high', () => {
+    const csv = chartSpecToCsv({
+      type: 'bar',
+      categories: ['a', 'b', 'c'],
+      series: [{ label: 'mean', values: [10, 20, 30], errors: [2, { lo: 25, hi: 18 }, null] }],
+    })
+    const [header, ...rows] = csv.split('\n')
+    expect(header).toBe('Category,mean,mean Low,mean High')
+    expect(rows[0]).toBe('a,10,8,12')       // symmetric margin
+    expect(rows[1]).toBe('b,20,18,25')      // explicit pair, order normalised
+    expect(rows[2]).toBe('c,30,,')          // null: value only
+  })
+
+  it('exports scatter points instead of nothing', () => {
+    // Scatter has no categories, so this used to return '' and the export
+    // button did nothing at all.
+    const csv = chartSpecToCsv({
+      type: 'scatter',
+      categories: [],
+      series: [
+        { label: 'EMEA', values: [], points: [{ x: 1, y: 2, r: 3, label: 'Ada' }] },
+        { label: 'APAC', values: [], points: [{ x: 4, y: 5 }] },
+      ],
+    })
+    expect(csv.split('\n')).toEqual([
+      'Series,X,Y,Size,Label',
+      'EMEA,1,2,3,Ada',
+      'APAC,4,5,,',
+    ])
+  })
+
+  it('still writes nothing for the specs with no rectangular data', () => {
+    expect(chartSpecToCsv({ type: 'gauge', categories: [], series: [], gaugeValue: 5 })).toBe('')
+    expect(chartSpecToCsv({ type: 'bar', categories: [], series: [] })).toBe('')
+  })
+})
+
+describe('chartCsvExportable', () => {
+  it('agrees with the serializer on every shape', () => {
+    // The panel greys out its CSV item on this predicate rather than on
+    // `chartSpecToCsv(spec) !== ''`, because that would serialise a 100k-point
+    // series on every render just to decide whether a button is enabled. The
+    // cost of a mirror is drift, so assert the two agree.
+    const specs: ChartSpec[] = [
+      { type: 'bar', categories: ['a'], series: [{ label: 's', values: [1] }] },
+      { type: 'bar', categories: [], series: [] },
+      { type: 'bar', categories: ['a'], series: [] },
+      { type: 'bar', categories: [], series: [{ label: 's', values: [] }] },
+      { type: 'gauge', categories: [], series: [], gaugeValue: 5 },
+      { type: 'scatter', categories: [], series: [{ label: 's', values: [], points: [{ x: 1, y: 2 }] }] },
+      { type: 'scatter', categories: [], series: [{ label: 's', values: [], points: [] }] },
+    ]
+    for (const spec of specs) {
+      expect(chartCsvExportable(spec), JSON.stringify(spec.type + ':' + spec.categories.length)).toBe(
+        chartSpecToCsv(spec) !== '',
+      )
+    }
+  })
+})