@svgrid/grid 2.2.16 → 2.2.18

package/src/menus.test.ts

@@ -666,3 +666,35 @@ describe('createMenus - comments', () => {
     expect(ctx.commentEditFor).toBeNull()
   })
 })
+
+describe('createMenus - chart context-menu item', () => {
+  const target = { rowIndex: 0, colIndex: 0, columnId: 'a', rowId: '0', row: {} }
+
+  it('appends "Chart selected range" to the default menu when charting is enabled', () => {
+    const ctx = makeCtx({ props: { contextMenu: true }, chartingEnabled: true, contextMenuFor: target })
+    const items = createMenus(ctx).contextMenuItems()
+    expect(items.map((i) => i.label)).toContain('Chart selected range')
+  })
+
+  it('omits the chart item when charting is disabled', () => {
+    const ctx = makeCtx({ props: { contextMenu: true }, chartingEnabled: false, contextMenuFor: target })
+    const items = createMenus(ctx).contextMenuItems()
+    expect(items.map((i) => i.label)).not.toContain('Chart selected range')
+  })
+
+  it('clicking the chart item opens the chart panel', () => {
+    const ctx = makeCtx({ props: { contextMenu: true }, chartingEnabled: true, chartPanelOpen: false, contextMenuFor: target })
+    const item = createMenus(ctx).contextMenuItems().find((i) => i.label === 'Chart selected range')
+    item?.run?.()
+    expect(ctx.chartPanelOpen).toBe(true)
+  })
+
+  it('localizes the chart item label via ctx.messages', () => {
+    const ctx = makeCtx({
+      props: { contextMenu: true }, chartingEnabled: true, contextMenuFor: target,
+      messages: { chartRange: 'Graphique de la selection' },
+    })
+    const items = createMenus(ctx).contextMenuItems()
+    expect(items.map((i) => i.label)).toContain('Graphique de la selection')
+  })
+})

package/src/menus.ts

@@ -491,16 +491,21 @@ export function createMenus<
   }
 
   // Built-in items, keyed. `run` reads the live target passed at click time.
-  const builtins: Record<string, { label: string; run: (t: CtxTarget) => void }> = {
-    copy: { label: "Copy", run: () => ctx.copySelectionToClipboard() },
-    cut: { label: "Cut", run: () => ctx.cutSelectionToClipboard() },
-    paste: { label: "Paste", run: () => void ctx.pasteFromClipboard() },
-    clear: { label: "Clear", run: () => ctx.clearSelectedCells() },
-    row_above: { label: "Insert row above", run: (t) => insertRowAt(t, 0) },
-    row_below: { label: "Insert row below", run: (t) => insertRowAt(t, 1) },
-    remove_row: { label: "Remove row", run: removeRowAt },
-    remove_col: { label: "Remove column", run: removeColAt },
-    comment: { label: "Edit comment", run: (t) => openCommentEditor(t) },
+  // `msg` names the GridMessages key so the label localizes (falls back to the
+  // English `label` when no `localeText` is set).
+  const builtins: Record<string, { label: string; msg?: string; run: (t: CtxTarget) => void }> = {
+    copy: { label: "Copy", msg: "menuCopy", run: () => ctx.copySelectionToClipboard() },
+    cut: { label: "Cut", msg: "menuCut", run: () => ctx.cutSelectionToClipboard() },
+    paste: { label: "Paste", msg: "menuPaste", run: () => void ctx.pasteFromClipboard() },
+    clear: { label: "Clear", msg: "menuClear", run: () => ctx.clearSelectedCells() },
+    row_above: { label: "Insert row above", msg: "menuInsertRowAbove", run: (t) => insertRowAt(t, 0) },
+    row_below: { label: "Insert row below", msg: "menuInsertRowBelow", run: (t) => insertRowAt(t, 1) },
+    remove_row: { label: "Remove row", msg: "menuRemoveRow", run: removeRowAt },
+    remove_col: { label: "Remove column", msg: "menuRemoveColumn", run: removeColAt },
+    comment: { label: "Edit comment", msg: "menuEditComment", run: (t) => openCommentEditor(t) },
+    // Charting: open the chart panel scoped to the current cell selection. Gated
+    // on `chartingEnabled` in the resolver below.
+    chart: { label: "Chart selected range", msg: "chartRange", run: () => { ctx.chartPanelOpen = true; } },
   };
   const DEFAULT_ITEMS = [
     "copy", "cut", "paste", "clear", "separator",
@@ -574,16 +579,24 @@ export function createMenus<
     const target = ctx.contextMenuFor as CtxTarget | null;
     if (!target) return [];
     const cfg = ctx.props.contextMenu;
+    const messages = ctx.messages;
     const entries: any[] = Array.isArray(cfg)
       ? cfg
-      : [...DEFAULT_ITEMS, ...(ctx.props.editableComments ? ["separator", "comment"] : [])];
+      : [
+          ...DEFAULT_ITEMS,
+          ...(ctx.chartingEnabled ? ["separator", "chart"] : []),
+          ...(ctx.props.editableComments ? ["separator", "comment"] : []),
+        ];
     const out: ResolvedItem[] = [];
     for (const entry of entries) {
       if (entry === "separator") { out.push({ key: "sep" + out.length, label: "", separator: true }); continue; }
       if (typeof entry === "string") {
+        // The chart item only makes sense when charting is enabled.
+        if (entry === "chart" && !ctx.chartingEnabled) continue;
         const b = builtins[entry];
         if (!b) continue;
-        out.push({ key: entry, label: b.label, run: () => b.run(target) });
+        const label = (b.msg && messages?.[b.msg]) || b.label;
+        out.push({ key: entry, label, run: () => b.run(target) });
         continue;
       }
       if (entry.hidden?.(target)) continue;

package/src/pivot-view.svelte.ts

@@ -0,0 +1,90 @@
+/**
+ * pivot-engine registry - the injection seam for in-grid pivot mode. Setting the
+ * `pivot` prop on `<SvGrid>` turns the live grid into a pivot table in place, but
+ * the pivot ENGINE (which aggregates rows into a pivot result with nested column
+ * headers) ships in `@svgrid/enterprise`. This tiny reactive holder lets
+ * enterprise register that engine at import time; the grid looks it up and runs
+ * it over its filtered + sorted rows, or shows an upsell placeholder when the
+ * engine is absent. Mirrors the `scheduler-view` / `editor-registry` pattern.
+ *
+ * Unlike the scheduler (which swaps in a whole renderer component), the pivot
+ * engine is a PURE function - the pivot result renders through the grid's normal
+ * table + grouped-column-header path.
+ *
+ * ONE ENGINE, two entry points: the engine registered here is enterprise's
+ * `createPivotModel`. The `pivot` prop on `<SvGrid>` (declarative, no UI) reaches
+ * it through this seam; the visual `<SvPivotDesigner>` component calls the same
+ * `createPivotModel` directly and adds a drag-drop field designer, heat-tinting,
+ * expand/collapse and a chart view on top. Pick the prop for code-defined
+ * pivots, the designer for an end-user field picker - both aggregate identically.
+ *
+ * ```ts
+ * // in @svgrid/enterprise, at module load (via enablePivot()):
+ * import { registerPivotEngine } from '@svgrid/grid'
+ * import { createPivotModel } from './pivot'
+ * registerPivotEngine((data, config) => createPivotModel(data, config))
+ * ```
+ */
+import type { ColumnDef, RowData, TableFeatures } from './index'
+
+/** One value measure in a pivot: which field, how to aggregate, how to label. */
+export type GridPivotValue<TData = RowData> = {
+  field: keyof TData & string
+  agg?: 'sum' | 'avg' | 'min' | 'max' | 'count' | 'countDistinct' | 'first' | 'last'
+  label?: string
+  format?: unknown
+}
+
+/**
+ * Free-grid pivot config. Structurally compatible with enterprise `PivotConfig`
+ * so the free package carries zero dependency on enterprise; the enterprise
+ * config remains assignable to this.
+ */
+export type GridPivotConfig<TData = RowData> = {
+  /** Row-axis dimensions, outer-most first. */
+  rows: ReadonlyArray<keyof TData & string>
+  /** Column-axis dimensions, outer-most first. */
+  cols: ReadonlyArray<keyof TData & string>
+  /** One or more measures aggregated under each column-axis leaf. */
+  values: ReadonlyArray<GridPivotValue<TData>>
+  grandTotalRow?: boolean
+  grandTotalCol?: boolean
+  rowSubtotals?: boolean
+  colSort?: (a: unknown, b: unknown, level: number) => number
+  rowSort?: (a: unknown, b: unknown, level: number) => number
+}
+
+/** A pivot row as emitted by the engine (plain object, keyed by leaf column id). */
+export type GridPivotRow = Record<string, unknown> & {
+  __pivotId: string
+  __pivotDepth: number
+  __pivotLabel: string
+  __pivotParentId: string | null
+  __pivotExpandable: boolean
+}
+
+/** The registered pivot engine: pure `(data, config) => { rows, columns }`. */
+export type PivotEngine = <
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(
+  data: ReadonlyArray<TData>,
+  config: GridPivotConfig<TData>,
+) => { rows: GridPivotRow[]; columns: Array<ColumnDef<TFeatures, GridPivotRow>> }
+
+let engine = $state<PivotEngine | null>(null)
+
+/** Register the pivot engine. Enterprise calls this from `enablePivot()`. */
+export function registerPivotEngine(fn: PivotEngine): void {
+  engine = fn
+}
+
+/** The registered pivot engine, or null when enterprise is not installed. */
+export function getPivotEngine(): PivotEngine | null {
+  return engine
+}
+
+/** Whether a pivot engine has been registered. */
+export function hasPivotEngine(): boolean {
+  return engine != null
+}

package/src/pivot-view.test.ts

@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  getPivotEngine,
+  hasPivotEngine,
+  registerPivotEngine,
+  type GridPivotRow,
+} from './pivot-view.svelte'
+
+// A tiny stand-in engine so the seam can be exercised without @svgrid/enterprise.
+const fakeEngine = (data: ReadonlyArray<Record<string, unknown>>) => {
+  const rows: GridPivotRow[] = [
+    { __pivotId: 'g1', __pivotDepth: 0, __pivotLabel: 'All', __pivotParentId: null, __pivotExpandable: true, total: data.length },
+  ]
+  return { rows, columns: [{ id: 'total', header: 'Total', field: 'total' }] as never }
+}
+
+afterEach(() => {
+  // reset the module singleton between tests
+  registerPivotEngine(null as never)
+})
+
+describe('pivot-view seam', () => {
+  it('reports no engine until one is registered', () => {
+    expect(hasPivotEngine()).toBe(false)
+    expect(getPivotEngine()).toBeNull()
+  })
+
+  it('round-trips a registered engine', () => {
+    registerPivotEngine(fakeEngine as never)
+    expect(hasPivotEngine()).toBe(true)
+    const engine = getPivotEngine()
+    expect(engine).not.toBeNull()
+    const result = engine!([{ a: 1 }, { a: 2 }], { rows: [], cols: [], values: [] })
+    expect(result.rows).toHaveLength(1)
+    expect(result.rows[0]!.total).toBe(2)
+    expect(result.columns[0]!.id).toBe('total')
+  })
+})

package/src/pivot.grid.test.ts

@@ -0,0 +1,102 @@
+/**
+ * DOM: in-grid pivot mode. Without a registered engine the grid shows an upsell
+ * note; after `registerPivotEngine(...)` the pivot result renders in place (as a
+ * nested grid) and the toolbar toggle flips back to the flat table.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  registerPivotEngine,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  type ColumnDef,
+  type GridPivotRow,
+} from './index'
+
+type Row = { id: number; region: string; sales: number }
+const features = tableFeatures({ rowSortingFeature })
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'region', header: 'Region', width: 140 },
+  { field: 'sales', header: 'Sales', width: 120, editorType: 'number' },
+]
+const data: Row[] = [
+  { id: 1, region: 'EU', sales: 100 },
+  { id: 2, region: 'EU', sales: 40 },
+  { id: 3, region: 'US', sales: 70 },
+]
+
+// A minimal pivot engine: one row per region with a summed `total` column.
+const engine = (rows: ReadonlyArray<Record<string, unknown>>) => {
+  const byRegion = new Map<string, number>()
+  for (const r of rows) byRegion.set(String(r.region), (byRegion.get(String(r.region)) ?? 0) + Number(r.sales))
+  const pivotRows: GridPivotRow[] = [...byRegion].map(([region, total], i) => ({
+    __pivotId: `p${i}`, __pivotDepth: 0, __pivotLabel: region, __pivotParentId: null, __pivotExpandable: false,
+    region, total,
+  }))
+  return {
+    rows: pivotRows,
+    columns: [
+      { id: 'region', header: 'Region', field: 'region', width: 140 },
+      { id: 'total', header: 'Total sales', field: 'total', width: 140 },
+    ] as never,
+  }
+}
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 300,
+      virtualization: false,
+      pivot: { rows: ['region'], cols: [], values: [{ field: 'sales', agg: 'sum' }] },
+      pivotMode: true,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => {
+  registerPivotEngine(null as never)
+  cleanup?.(); cleanup = null
+})
+
+describe('in-grid pivot mode', () => {
+  it('shows an upsell note when no pivot engine is registered', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    expect(target.querySelector('.sv-grid-pivot-upsell')).toBeTruthy()
+  })
+
+  it('renders the pivot result in place once an engine is registered', async () => {
+    registerPivotEngine(engine as never)
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    await tick()
+    expect(target.querySelector('.sv-grid-pivot-root')).toBeTruthy()
+    // The pivot's aggregated column header + a summed value render.
+    expect(target.textContent).toContain('Total sales')
+    expect(target.textContent).toContain('140') // EU 100 + 40
+  })
+})

package/src/positioning.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest'
+import { computePosition, parsePlacement, type Rect, type Viewport } from './positioning'
+
+const VP: Viewport = { width: 1000, height: 800 }
+// A reference in the middle of the viewport, 100x40.
+const mid: Rect = { x: 450, y: 380, width: 100, height: 40 }
+const floating: Viewport = { width: 200, height: 120 }
+
+describe('parsePlacement', () => {
+  it('defaults the bare side to center alignment', () => {
+    expect(parsePlacement('bottom')).toEqual({ side: 'bottom', align: 'center' })
+    expect(parsePlacement('top-start')).toEqual({ side: 'top', align: 'start' })
+    expect(parsePlacement('right-end')).toEqual({ side: 'right', align: 'end' })
+  })
+})
+
+describe('computePosition - placements', () => {
+  it('bottom-start sits below, left-aligned to the reference', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom-start', offset: 6, viewport: VP })
+    expect(r.side).toBe('bottom')
+    expect(r.y).toBe(mid.y + mid.height + 6) // 426
+    expect(r.x).toBe(mid.x) // 450
+  })
+
+  it('bottom (center) centers the floating over the reference', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom', offset: 6, viewport: VP, shift: false })
+    expect(r.x).toBe(mid.x + mid.width / 2 - floating.width / 2) // 500 - 100 = 400
+  })
+
+  it('bottom-end right-aligns the floating to the reference', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom-end', offset: 6, viewport: VP })
+    expect(r.x).toBe(mid.x + mid.width - floating.width) // 550 - 200 = 350
+  })
+
+  it('top places above the reference', () => {
+    const r = computePosition(mid, floating, { placement: 'top-start', offset: 6, viewport: VP })
+    expect(r.side).toBe('top')
+    expect(r.y).toBe(mid.y - floating.height - 6) // 380 - 126 = 254
+  })
+
+  it('right places to the right, vertically centered', () => {
+    const r = computePosition(mid, floating, { placement: 'right', offset: 6, viewport: VP, shift: false })
+    expect(r.side).toBe('right')
+    expect(r.x).toBe(mid.x + mid.width + 6) // 556
+    expect(r.y).toBe(mid.y + mid.height / 2 - floating.height / 2) // 400 - 60 = 340
+  })
+
+  it('left places to the left of the reference', () => {
+    const r = computePosition(mid, floating, { placement: 'left', offset: 6, viewport: VP, shift: false })
+    expect(r.x).toBe(mid.x - floating.width - 6) // 450 - 206 = 244
+  })
+})
+
+describe('computePosition - flip', () => {
+  it('flips bottom -> top when there is no room below', () => {
+    const nearBottom: Rect = { x: 450, y: 760, width: 100, height: 30 } // 30px below to viewport edge
+    const r = computePosition(nearBottom, floating, { placement: 'bottom-start', viewport: VP })
+    expect(r.side).toBe('top')
+    expect(r.y).toBe(nearBottom.y - floating.height - 6)
+  })
+
+  it('does NOT flip when the preferred side fits', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom-start', viewport: VP })
+    expect(r.side).toBe('bottom')
+  })
+
+  it('keeps the preferred side when flip is disabled even if it overflows', () => {
+    const nearBottom: Rect = { x: 450, y: 760, width: 100, height: 30 }
+    const r = computePosition(nearBottom, floating, { placement: 'bottom-start', flip: false, viewport: VP })
+    expect(r.side).toBe('bottom')
+  })
+
+  it('flips right -> left when there is no room on the right', () => {
+    const nearRight: Rect = { x: 940, y: 380, width: 50, height: 40 } // 10px to right edge
+    const r = computePosition(nearRight, floating, { placement: 'right', viewport: VP })
+    expect(r.side).toBe('left')
+  })
+})
+
+describe('computePosition - shift', () => {
+  it('clamps a start-aligned floating back inside the right edge', () => {
+    const nearRight: Rect = { x: 950, y: 380, width: 40, height: 40 }
+    const r = computePosition(nearRight, floating, { placement: 'bottom-start', padding: 8, viewport: VP })
+    // Would be x=950, but must fit: max x = 1000 - 8 - 200 = 792
+    expect(r.x).toBe(792)
+  })
+
+  it('clamps to the left padding when the floating is wider than the room', () => {
+    const nearLeft: Rect = { x: 4, y: 380, width: 40, height: 40 }
+    const r = computePosition(nearLeft, floating, { placement: 'bottom-start', padding: 8, viewport: VP })
+    expect(r.x).toBe(8) // left padding
+  })
+
+  it('does not shift when disabled', () => {
+    const nearRight: Rect = { x: 950, y: 380, width: 40, height: 40 }
+    const r = computePosition(nearRight, floating, { placement: 'bottom-start', shift: false, viewport: VP })
+    expect(r.x).toBe(950)
+  })
+})
+
+describe('computePosition - size', () => {
+  it('reports the room below for a bottom placement', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom-start', offset: 6, padding: 8, viewport: VP })
+    // 800 - 8 - (380 + 40 + 6) = 366
+    expect(r.maxHeight).toBe(366)
+    expect(r.maxWidth).toBe(VP.width - 16)
+  })
+
+  it('reports the room above for a top placement', () => {
+    const r = computePosition(mid, floating, { placement: 'top-start', offset: 6, padding: 8, viewport: VP })
+    // 380 - 6 - 8 = 366
+    expect(r.maxHeight).toBe(366)
+  })
+
+  it('honors the minMainAxis floor when the side is cramped', () => {
+    const nearBottom: Rect = { x: 450, y: 790, width: 100, height: 8 }
+    const r = computePosition(nearBottom, floating, { placement: 'bottom-start', flip: false, minMainAxis: 96, viewport: VP })
+    expect(r.maxHeight).toBe(96)
+  })
+})
+
+describe('computePosition - arrow', () => {
+  it('points the arrow at the reference center for a bottom placement', () => {
+    const r = computePosition(mid, floating, { placement: 'bottom-start', arrow: { size: 10 }, viewport: VP })
+    // reference center x = 500; floating x = 450; arrow = 500 - 450 - 5 = 45
+    expect(r.arrow?.x).toBe(45)
+  })
+
+  it('clamps the arrow inside the floating (minus padding)', () => {
+    // end-aligned so the reference center is near the floating's leading edge
+    const r = computePosition(mid, floating, { placement: 'bottom-end', arrow: { size: 10 }, padding: 8, viewport: VP })
+    // floating x = 350; center 500; raw arrow = 500 - 350 - 5 = 145; max = 200 - 10 - 8 = 182 -> stays 145
+    expect(r.arrow?.x).toBe(145)
+  })
+
+  it('produces a y arrow offset for side placements', () => {
+    const r = computePosition(mid, floating, { placement: 'right', arrow: { size: 10 }, shift: false, viewport: VP })
+    // reference center y = 400; floating y = 340; arrow y = 400 - 340 - 5 = 55
+    expect(r.arrow?.y).toBe(55)
+  })
+})