@opendata-ai/openchart-engine 1.2.0

package/src/tables/__tests__/format-cells.test.ts

@@ -0,0 +1,126 @@
+import type { ColumnConfig } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { formatCell, formatValueForSearch } from '../format-cells';
+
+describe('formatCell', () => {
+  it('formats null as empty string', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(null, col);
+    expect(result.formattedValue).toBe('');
+    expect(result.value).toBeNull();
+  });
+
+  it('formats undefined as empty string', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(undefined, col);
+    expect(result.formattedValue).toBe('');
+    expect(result.value).toBeUndefined();
+  });
+
+  it('applies d3-format string to numbers', () => {
+    const col: ColumnConfig = { key: 'x', format: ',.0f' };
+    const result = formatCell(1234567, col);
+    expect(result.formattedValue).toBe('1,234,567');
+  });
+
+  it('applies d3-format with dollar sign', () => {
+    const col: ColumnConfig = { key: 'x', format: '$,.2f' };
+    const result = formatCell(1234.5, col);
+    expect(result.formattedValue).toBe('$1,234.50');
+  });
+
+  it('applies d3-format with percentage', () => {
+    const col: ColumnConfig = { key: 'x', format: '.1%' };
+    const result = formatCell(0.456, col);
+    expect(result.formattedValue).toBe('45.6%');
+  });
+
+  it('auto-formats numbers without explicit format', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(42, col);
+    // Should produce some formatted string (formatNumber)
+    expect(result.formattedValue).toBeTruthy();
+    expect(typeof result.formattedValue).toBe('string');
+  });
+
+  it('formats Date values', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const date = new Date('2023-06-15');
+    const result = formatCell(date, col);
+    expect(result.formattedValue).toBeTruthy();
+    expect(typeof result.formattedValue).toBe('string');
+  });
+
+  it('handles NaN gracefully (not numeric, falls through to String)', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(NaN, col);
+    // NaN is not isFinite, so falls through to String(NaN)
+    expect(result.formattedValue).toBe('NaN');
+  });
+
+  it('handles Infinity gracefully (not numeric, falls through to String)', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(Infinity, col);
+    expect(result.formattedValue).toBe('Infinity');
+  });
+
+  it('handles -Infinity gracefully', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(-Infinity, col);
+    expect(result.formattedValue).toBe('-Infinity');
+  });
+
+  it('does not crash on invalid d3-format string', () => {
+    const col: ColumnConfig = { key: 'x', format: '%%%invalid%%%' };
+    // Should not throw, falls through to auto-format
+    const result = formatCell(42, col);
+    expect(result.formattedValue).toBeTruthy();
+  });
+
+  it('formats plain strings as-is', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell('hello world', col);
+    expect(result.formattedValue).toBe('hello world');
+  });
+
+  it('formats booleans as strings', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(true, col);
+    expect(result.formattedValue).toBe('true');
+  });
+
+  it('preserves raw value in output', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell(42, col);
+    expect(result.value).toBe(42);
+  });
+
+  it('returns empty style object', () => {
+    const col: ColumnConfig = { key: 'x' };
+    const result = formatCell('test', col);
+    expect(result.style).toBeDefined();
+  });
+
+  it('d3-format string ignored for non-numeric values', () => {
+    const col: ColumnConfig = { key: 'x', format: ',.0f' };
+    const result = formatCell('not a number', col);
+    expect(result.formattedValue).toBe('not a number');
+  });
+});
+
+describe('formatValueForSearch', () => {
+  it('returns empty string for null', () => {
+    const col: ColumnConfig = { key: 'x' };
+    expect(formatValueForSearch(null, col)).toBe('');
+  });
+
+  it('formats numbers with d3-format for search', () => {
+    const col: ColumnConfig = { key: 'x', format: ',.0f' };
+    expect(formatValueForSearch(1234, col)).toBe('1,234');
+  });
+
+  it('falls back to String for non-numeric values', () => {
+    const col: ColumnConfig = { key: 'x' };
+    expect(formatValueForSearch('hello', col)).toBe('hello');
+  });
+});

package/src/tables/__tests__/heatmap.test.ts

@@ -0,0 +1,124 @@
+import type { ColumnConfig, ResolvedTheme } from '@opendata-ai/openchart-core';
+import { adaptTheme, contrastRatio, resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeHeatmapColors } from '../heatmap';
+
+function getTheme(dark = false): ResolvedTheme {
+  const theme = resolveTheme();
+  return dark ? adaptTheme(theme) : theme;
+}
+
+describe('computeHeatmapColors', () => {
+  const data = [{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }];
+
+  const column: ColumnConfig = {
+    key: 'value',
+    heatmap: { palette: 'blue' },
+  };
+
+  it('assigns lighter colors to lower values and darker to higher', () => {
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, column, theme, false);
+
+    expect(colors.size).toBe(5);
+
+    // Lowest value should have a lighter background
+    const lowBg = colors.get(0)!.backgroundColor!;
+    const highBg = colors.get(4)!.backgroundColor!;
+
+    // Check that they're different colors
+    expect(lowBg).not.toBe(highBg);
+  });
+
+  it('text color meets AA contrast against background', () => {
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, column, theme, false);
+
+    for (const [, style] of colors) {
+      const bg = style.backgroundColor!;
+      const fg = style.color!;
+      const ratio = contrastRatio(fg, bg);
+      // Should pick black or white, both of which should exceed 3:1
+      expect(ratio).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it('supports custom domain', () => {
+    const col: ColumnConfig = {
+      key: 'value',
+      heatmap: { palette: 'blue', domain: [0, 200] },
+    };
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, col, theme, false);
+
+    // All values are in the lower half of the domain, so should all have lighter colors
+    expect(colors.size).toBe(5);
+  });
+
+  it('values outside custom domain are clamped', () => {
+    const col: ColumnConfig = {
+      key: 'value',
+      heatmap: { palette: 'blue', domain: [25, 75] },
+    };
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, col, theme, false);
+
+    // value=0 is clamped to domain min, value=100 to domain max
+    expect(colors.has(0)).toBe(true);
+    expect(colors.has(4)).toBe(true);
+  });
+
+  it('supports colorByField', () => {
+    const dataWithLabel = [
+      { label: 'A', score: 10 },
+      { label: 'B', score: 90 },
+    ];
+    const col: ColumnConfig = {
+      key: 'label',
+      heatmap: { palette: 'blue', colorByField: 'score' },
+    };
+    const theme = getTheme();
+    const colors = computeHeatmapColors(dataWithLabel, col, theme, false);
+
+    // Should have colors for both rows since score has numeric values
+    expect(colors.size).toBe(2);
+  });
+
+  it('returns empty map for non-numeric columns', () => {
+    const nonNumericData = [{ value: 'hello' }, { value: 'world' }];
+    const theme = getTheme();
+    const colors = computeHeatmapColors(nonNumericData, column, theme, false);
+    expect(colors.size).toBe(0);
+  });
+
+  it('returns empty map when no heatmap config', () => {
+    const col: ColumnConfig = { key: 'value' };
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, col, theme, false);
+    expect(colors.size).toBe(0);
+  });
+
+  it('adapts colors for dark mode', () => {
+    const theme = getTheme(true);
+    const colors = computeHeatmapColors(data, column, theme, true);
+
+    expect(colors.size).toBe(5);
+    // In dark mode, text colors should still have adequate contrast
+    for (const [, style] of colors) {
+      const bg = style.backgroundColor!;
+      const fg = style.color!;
+      const ratio = contrastRatio(fg, bg);
+      expect(ratio).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it('supports array of color stops as palette', () => {
+    const col: ColumnConfig = {
+      key: 'value',
+      heatmap: { palette: ['#ffffff', '#ff0000'] },
+    };
+    const theme = getTheme();
+    const colors = computeHeatmapColors(data, col, theme, false);
+    expect(colors.size).toBe(5);
+  });
+});

package/src/tables/__tests__/pagination.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+import { paginateData } from '../pagination';
+
+const data = Array.from({ length: 50 }, (_, i) => ({ id: i, value: i * 10 }));
+
+describe('paginateData', () => {
+  it('returns the correct page slice', () => {
+    const result = paginateData(data, 0, 10);
+    expect(result.rows).toHaveLength(10);
+    expect(result.rows[0].id).toBe(0);
+    expect(result.rows[9].id).toBe(9);
+  });
+
+  it('returns correct second page', () => {
+    const result = paginateData(data, 1, 10);
+    expect(result.rows).toHaveLength(10);
+    expect(result.rows[0].id).toBe(10);
+    expect(result.rows[9].id).toBe(19);
+  });
+
+  it('returns correct last page (partial)', () => {
+    // 50 items, page size 15 = 4 pages (15+15+15+5)
+    const result = paginateData(data, 3, 15);
+    expect(result.rows).toHaveLength(5);
+    expect(result.rows[0].id).toBe(45);
+  });
+
+  it('clamps page to valid range (too high)', () => {
+    const result = paginateData(data, 999, 10);
+    expect(result.page).toBe(4); // Last page (0-indexed)
+    expect(result.rows).toHaveLength(10);
+    expect(result.rows[0].id).toBe(40);
+  });
+
+  it('clamps page to valid range (negative)', () => {
+    const result = paginateData(data, -5, 10);
+    expect(result.page).toBe(0);
+    expect(result.rows[0].id).toBe(0);
+  });
+
+  it('computes totalPages correctly', () => {
+    const result = paginateData(data, 0, 10);
+    expect(result.totalPages).toBe(5);
+    expect(result.totalRows).toBe(50);
+  });
+
+  it('computes totalPages for non-even division', () => {
+    const result = paginateData(data, 0, 15);
+    expect(result.totalPages).toBe(4); // ceil(50/15) = 4
+  });
+
+  it('handles disabled pagination (pageSize <= 0)', () => {
+    const result = paginateData(data, 0, 0);
+    expect(result.rows).toHaveLength(50);
+    expect(result.totalPages).toBe(1);
+    expect(result.page).toBe(0);
+  });
+
+  it('handles negative pageSize as disabled', () => {
+    const result = paginateData(data, 0, -10);
+    expect(result.rows).toHaveLength(50);
+    expect(result.totalPages).toBe(1);
+  });
+
+  it('handles empty data', () => {
+    const result = paginateData([], 0, 10);
+    expect(result.rows).toHaveLength(0);
+    expect(result.totalRows).toBe(0);
+    expect(result.totalPages).toBe(1);
+    expect(result.page).toBe(0);
+  });
+
+  it('handles single row', () => {
+    const result = paginateData([{ id: 1 }], 0, 10);
+    expect(result.rows).toHaveLength(1);
+    expect(result.totalPages).toBe(1);
+  });
+});

package/src/tables/__tests__/search.test.ts

@@ -0,0 +1,94 @@
+import type { ColumnConfig } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { buildSearchIndex, filterBySearch } from '../search';
+
+const data = [
+  { name: 'Alice Smith', age: 30, score: 88.5 },
+  { name: 'Bob Johnson', age: 25, score: 92.1 },
+  { name: 'Charlie Brown', age: 35, score: 76.3 },
+];
+
+const columns: ColumnConfig[] = [{ key: 'name' }, { key: 'age' }, { key: 'score' }];
+
+describe('buildSearchIndex', () => {
+  it('builds an index for all rows', () => {
+    const index = buildSearchIndex(data, columns);
+    expect(index.size).toBe(3);
+    expect(index.has(0)).toBe(true);
+    expect(index.has(1)).toBe(true);
+    expect(index.has(2)).toBe(true);
+  });
+
+  it('includes all column values in the search string', () => {
+    const index = buildSearchIndex(data, columns);
+    const row0 = index.get(0)!;
+    expect(row0).toContain('alice');
+    expect(row0).toContain('30');
+  });
+
+  it('lowercases all values', () => {
+    const index = buildSearchIndex(data, columns);
+    const row0 = index.get(0)!;
+    // Should be lowercase
+    expect(row0).not.toContain('Alice');
+    expect(row0).toContain('alice');
+  });
+});
+
+describe('filterBySearch', () => {
+  it('returns all data for empty query', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, '', index, indices);
+    expect(result.data).toHaveLength(3);
+    expect(result.indices).toEqual([0, 1, 2]);
+  });
+
+  it('returns all data for whitespace-only query', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, '   ', index, indices);
+    expect(result.data).toHaveLength(3);
+  });
+
+  it('filters by substring match', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, 'alice', index, indices);
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0].name).toBe('Alice Smith');
+    expect(result.indices).toEqual([0]);
+  });
+
+  it('is case insensitive', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, 'ALICE', index, indices);
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0].name).toBe('Alice Smith');
+  });
+
+  it('matches across formatted numeric values', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    // Search for a number value
+    const result = filterBySearch(data, '35', index, indices);
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0].name).toBe('Charlie Brown');
+  });
+
+  it('returns empty when no match', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, 'zzz_no_match', index, indices);
+    expect(result.data).toHaveLength(0);
+    expect(result.indices).toHaveLength(0);
+  });
+
+  it('preserves original indices through filtering', () => {
+    const index = buildSearchIndex(data, columns);
+    const indices = [0, 1, 2];
+    const result = filterBySearch(data, 'brown', index, indices);
+    expect(result.indices).toEqual([2]);
+  });
+});

package/src/tables/__tests__/sort.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from 'vitest';
+import { sortData } from '../sort';
+
+describe('sortData', () => {
+  it('sorts numbers numerically ascending', () => {
+    const data = [
+      { name: 'C', value: 30 },
+      { name: 'A', value: 10 },
+      { name: 'B', value: 20 },
+    ];
+    const result = sortData(data, { column: 'value', direction: 'asc' });
+    expect(result.data.map((r) => r.value)).toEqual([10, 20, 30]);
+  });
+
+  it('sorts numbers numerically descending', () => {
+    const data = [
+      { name: 'A', value: 10 },
+      { name: 'C', value: 30 },
+      { name: 'B', value: 20 },
+    ];
+    const result = sortData(data, { column: 'value', direction: 'desc' });
+    expect(result.data.map((r) => r.value)).toEqual([30, 20, 10]);
+  });
+
+  it('sorts strings via localeCompare', () => {
+    const data = [
+      { name: 'Charlie', value: 1 },
+      { name: 'Alice', value: 2 },
+      { name: 'Bob', value: 3 },
+    ];
+    const result = sortData(data, { column: 'name', direction: 'asc' });
+    expect(result.data.map((r) => r.name)).toEqual(['Alice', 'Bob', 'Charlie']);
+  });
+
+  it('sorts dates by timestamp', () => {
+    const d1 = new Date('2020-01-01');
+    const d2 = new Date('2021-06-15');
+    const d3 = new Date('2019-12-31');
+    const data = [
+      { date: d1, val: 1 },
+      { date: d2, val: 2 },
+      { date: d3, val: 3 },
+    ];
+    const result = sortData(data, { column: 'date', direction: 'asc' });
+    expect(result.data.map((r) => r.val)).toEqual([3, 1, 2]);
+  });
+
+  it('puts null values last regardless of sort direction', () => {
+    const data = [
+      { name: 'A', value: null },
+      { name: 'B', value: 20 },
+      { name: 'C', value: 10 },
+    ];
+
+    const asc = sortData(data, { column: 'value', direction: 'asc' });
+    expect(asc.data.map((r) => r.name)).toEqual(['C', 'B', 'A']);
+
+    const desc = sortData(data, { column: 'value', direction: 'desc' });
+    expect(desc.data.map((r) => r.name)).toEqual(['B', 'C', 'A']);
+  });
+
+  it('is stable (preserves order for equal values)', () => {
+    const data = [
+      { name: 'First', value: 10 },
+      { name: 'Second', value: 10 },
+      { name: 'Third', value: 10 },
+    ];
+    const result = sortData(data, { column: 'value', direction: 'asc' });
+    expect(result.data.map((r) => r.name)).toEqual(['First', 'Second', 'Third']);
+  });
+
+  it('does not mutate the original array', () => {
+    const data = [{ value: 30 }, { value: 10 }, { value: 20 }];
+    const original = [...data];
+    sortData(data, { column: 'value', direction: 'asc' });
+    expect(data).toEqual(original);
+  });
+
+  it('handles single element array', () => {
+    const data = [{ value: 42 }];
+    const result = sortData(data, { column: 'value', direction: 'asc' });
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0].value).toBe(42);
+  });
+
+  it('handles all null values', () => {
+    const data = [
+      { name: 'A', value: null },
+      { name: 'B', value: null },
+    ];
+    const result = sortData(data, { column: 'value', direction: 'asc' });
+    // Stable sort: original order preserved
+    expect(result.data.map((r) => r.name)).toEqual(['A', 'B']);
+  });
+
+  it('returns correct originalIndices for sorted data', () => {
+    const data = [
+      { name: 'C', value: 30 },
+      { name: 'A', value: 10 },
+      { name: 'B', value: 20 },
+    ];
+    const result = sortData(data, { column: 'value', direction: 'asc' });
+    // A (index 1) < B (index 2) < C (index 0)
+    expect(result.originalIndices).toEqual([1, 2, 0]);
+    expect(result.data.map((r) => r.name)).toEqual(['A', 'B', 'C']);
+  });
+});

package/src/tables/__tests__/sparkline.test.ts

@@ -0,0 +1,122 @@
+import type { SparklineColumnConfig } from '@opendata-ai/openchart-core';
+import { resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeSparkline, computeSparklineForRow } from '../sparkline';
+
+const theme = resolveTheme();
+
+describe('computeSparkline', () => {
+  it('normalizes line points to 0-1 range', () => {
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparkline([10, 20, 30, 40, 50], config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.type).toBe('line');
+    expect(result!.points).toHaveLength(5);
+
+    // First point at min should be y=0, last at max should be y=1
+    expect(result!.points[0].y).toBeCloseTo(0);
+    expect(result!.points[4].y).toBeCloseTo(1);
+
+    // X values evenly distributed
+    expect(result!.points[0].x).toBeCloseTo(0);
+    expect(result!.points[4].x).toBeCloseTo(1);
+  });
+
+  it('produces bar data for bar type', () => {
+    const config: SparklineColumnConfig = { type: 'bar' };
+    const result = computeSparkline([0, 50, 100], config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.type).toBe('bar');
+    expect(result!.bars).toHaveLength(3);
+
+    // Normalized: 0->0, 50->0.5, 100->1
+    expect(result!.bars[0]).toBeCloseTo(0);
+    expect(result!.bars[1]).toBeCloseTo(0.5);
+    expect(result!.bars[2]).toBeCloseTo(1);
+  });
+
+  it('produces column data for column type', () => {
+    const config: SparklineColumnConfig = { type: 'column' };
+    const result = computeSparkline([10, 20, 30], config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.type).toBe('column');
+    expect(result!.bars).toHaveLength(3);
+  });
+
+  it('returns null for empty values', () => {
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparkline([], config, theme, false);
+    expect(result).toBeNull();
+  });
+
+  it('handles all equal values (flat line)', () => {
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparkline([5, 5, 5], config, theme, false);
+
+    expect(result).not.toBeNull();
+    // When range is 0, all y values should be 0.5
+    expect(result!.points[0].y).toBeCloseTo(0.5);
+    expect(result!.points[1].y).toBeCloseTo(0.5);
+  });
+
+  it('handles single value', () => {
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparkline([42], config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.points).toHaveLength(1);
+    expect(result!.points[0].x).toBeCloseTo(0.5);
+    expect(result!.points[0].y).toBeCloseTo(0.5);
+  });
+
+  it('uses custom color from config', () => {
+    const config: SparklineColumnConfig = { type: 'line', color: '#ff0000' };
+    const result = computeSparkline([1, 2, 3], config, theme, false);
+    expect(result!.color).toBe('#ff0000');
+  });
+
+  it('defaults to first categorical palette color', () => {
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparkline([1, 2, 3], config, theme, false);
+    expect(result!.color).toBe(theme.colors.categorical[0]);
+  });
+});
+
+describe('computeSparklineForRow', () => {
+  it('extracts values from array field', () => {
+    const row = { trend: [10, 20, 30] };
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparklineForRow(row, 'trend', config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.count).toBe(3);
+  });
+
+  it('uses valuesField to extract from different field', () => {
+    const row = { label: 'Test', data: [5, 15, 25] };
+    const config: SparklineColumnConfig = { type: 'line', valuesField: 'data' };
+    const result = computeSparklineForRow(row, 'label', config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.count).toBe(3);
+  });
+
+  it('returns null when field value is not an array', () => {
+    const row = { trend: 'not an array' };
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparklineForRow(row, 'trend', config, theme, false);
+    expect(result).toBeNull();
+  });
+
+  it('filters out non-numeric values from array', () => {
+    const row = { trend: [10, 'bad', null, 30] };
+    const config: SparklineColumnConfig = { type: 'line' };
+    const result = computeSparklineForRow(row, 'trend', config, theme, false);
+
+    expect(result).not.toBeNull();
+    expect(result!.count).toBe(2); // only 10 and 30
+  });
+});