@opendata-ai/openchart-engine 1.2.0

package/src/__tests__/dimensions.test.ts

@@ -0,0 +1,151 @@
+import type { LegendLayout } from '@opendata-ai/openchart-core';
+import { adaptTheme, resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../compiler/types';
+import { computeDimensions } from '../layout/dimensions';
+
+const baseSpec: NormalizedChartSpec = {
+  type: 'line',
+  data: [
+    { date: '2020-01-01', value: 10 },
+    { date: '2021-01-01', value: 20 },
+  ],
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+  },
+  chrome: { title: { text: 'Test Chart' } },
+  annotations: [],
+  responsive: true,
+  theme: {},
+  darkMode: 'off',
+  labels: { density: 'auto', format: '' },
+};
+
+const lightTheme = resolveTheme(baseSpec.theme);
+const darkTheme = adaptTheme(lightTheme);
+
+const emptyLegend: LegendLayout = {
+  position: 'top',
+  entries: [],
+  bounds: { x: 0, y: 0, width: 0, height: 0 },
+  labelStyle: {
+    fontFamily: 'Inter',
+    fontSize: 11,
+    fontWeight: 400,
+    fill: '#333',
+    lineHeight: 1.3,
+  },
+  swatchSize: 12,
+  swatchGap: 6,
+  entryGap: 16,
+};
+
+const rightLegend: LegendLayout = {
+  ...emptyLegend,
+  position: 'right',
+  entries: [{ label: 'US', color: '#1b7fa3', shape: 'line' }],
+  bounds: { x: 500, y: 0, width: 100, height: 200 },
+};
+
+const topLegend: LegendLayout = {
+  ...emptyLegend,
+  position: 'top',
+  entries: [{ label: 'US', color: '#1b7fa3', shape: 'line' }],
+  bounds: { x: 0, y: 0, width: 400, height: 28 },
+};
+
+describe('computeDimensions', () => {
+  it('computes chart area within total dimensions', () => {
+    const dims = computeDimensions(baseSpec, { width: 600, height: 400 }, emptyLegend, lightTheme);
+
+    expect(dims.total).toEqual({ x: 0, y: 0, width: 600, height: 400 });
+    expect(dims.chartArea.width).toBeLessThan(600);
+    expect(dims.chartArea.height).toBeLessThan(400);
+    expect(dims.chartArea.width).toBeGreaterThan(0);
+    expect(dims.chartArea.height).toBeGreaterThan(0);
+  });
+
+  it('accounts for chrome height in chart area', () => {
+    const noChrome: NormalizedChartSpec = { ...baseSpec, chrome: {} };
+    const withChrome = baseSpec;
+
+    const dimsNoChrome = computeDimensions(
+      noChrome,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsWithChrome = computeDimensions(
+      withChrome,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // With chrome, the chart area should be shorter (less height available)
+    expect(dimsWithChrome.chartArea.height).toBeLessThan(dimsNoChrome.chartArea.height);
+    // Chrome should have nonzero top height
+    expect(dimsWithChrome.chrome.topHeight).toBeGreaterThan(0);
+  });
+
+  it('reserves space for right-positioned legend', () => {
+    const withoutLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const withLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      rightLegend,
+      lightTheme,
+    );
+
+    expect(withLegend.chartArea.width).toBeLessThan(withoutLegend.chartArea.width);
+  });
+
+  it('reserves space for top-positioned legend', () => {
+    const withoutLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const withLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+
+    expect(withLegend.chartArea.height).toBeLessThan(withoutLegend.chartArea.height);
+  });
+
+  it('applies dark mode theme adaptation', () => {
+    const lightDims = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const darkDims = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400, darkMode: true },
+      emptyLegend,
+      darkTheme,
+    );
+
+    expect(lightDims.theme.isDark).toBe(false);
+    expect(darkDims.theme.isDark).toBe(true);
+    expect(darkDims.theme.colors.background).not.toBe(lightDims.theme.colors.background);
+  });
+
+  it('prevents negative chart area dimensions', () => {
+    // Tiny container
+    const dims = computeDimensions(baseSpec, { width: 50, height: 30 }, emptyLegend, lightTheme);
+    expect(dims.chartArea.width).toBeGreaterThanOrEqual(0);
+    expect(dims.chartArea.height).toBeGreaterThanOrEqual(0);
+  });
+});

package/src/__tests__/legend.test.ts

@@ -0,0 +1,113 @@
+import type { LayoutStrategy, Rect, ResolvedTheme } from '@opendata-ai/openchart-core';
+import { resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../compiler/types';
+import { computeLegend } from '../legend/compute';
+
+const specWithColor: NormalizedChartSpec = {
+  type: 'line',
+  data: [
+    { date: '2020', value: 10, country: 'US' },
+    { date: '2021', value: 20, country: 'UK' },
+    { date: '2022', value: 30, country: 'Germany' },
+  ],
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+    color: { field: 'country', type: 'nominal' },
+  },
+  chrome: {},
+  annotations: [],
+  responsive: true,
+  theme: {},
+  darkMode: 'off',
+  labels: { density: 'auto', format: '' },
+};
+
+const specWithoutColor: NormalizedChartSpec = {
+  ...specWithColor,
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+  },
+};
+
+const chartArea: Rect = { x: 50, y: 50, width: 500, height: 300 };
+const theme: ResolvedTheme = resolveTheme();
+
+const fullStrategy: LayoutStrategy = {
+  labelMode: 'all',
+  legendPosition: 'right',
+  annotationPosition: 'inline',
+  axisLabelDensity: 'full',
+};
+
+const compactStrategy: LayoutStrategy = {
+  labelMode: 'none',
+  legendPosition: 'top',
+  annotationPosition: 'tooltip-only',
+  axisLabelDensity: 'minimal',
+};
+
+describe('computeLegend', () => {
+  it('derives entries from color encoding unique values', () => {
+    const legend = computeLegend(specWithColor, fullStrategy, theme, chartArea);
+    expect(legend.entries).toHaveLength(3);
+    expect(legend.entries.map((e) => e.label)).toEqual(['US', 'UK', 'Germany']);
+  });
+
+  it('assigns distinct colors from the theme palette', () => {
+    const legend = computeLegend(specWithColor, fullStrategy, theme, chartArea);
+    const colors = legend.entries.map((e) => e.color);
+    const uniqueColors = new Set(colors);
+    expect(uniqueColors.size).toBe(3);
+  });
+
+  it('returns empty entries when no color encoding', () => {
+    const legend = computeLegend(specWithoutColor, fullStrategy, theme, chartArea);
+    expect(legend.entries).toHaveLength(0);
+    expect(legend.bounds.width).toBe(0);
+    expect(legend.bounds.height).toBe(0);
+  });
+
+  it('positions legend on right at full width', () => {
+    const legend = computeLegend(specWithColor, fullStrategy, theme, chartArea);
+    expect(legend.position).toBe('right');
+    expect(legend.bounds.width).toBeGreaterThan(0);
+  });
+
+  it('positions legend on top at compact width', () => {
+    const legend = computeLegend(specWithColor, compactStrategy, theme, chartArea);
+    expect(legend.position).toBe('top');
+    expect(legend.bounds.height).toBeGreaterThan(0);
+  });
+
+  it('uses correct swatch shape for chart type', () => {
+    const lineLegend = computeLegend(specWithColor, fullStrategy, theme, chartArea);
+    expect(lineLegend.entries[0].shape).toBe('line');
+
+    const barSpec: NormalizedChartSpec = {
+      ...specWithColor,
+      type: 'bar',
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'date', type: 'nominal' },
+        color: { field: 'country', type: 'nominal' },
+      },
+    };
+    const barLegend = computeLegend(barSpec, fullStrategy, theme, chartArea);
+    expect(barLegend.entries[0].shape).toBe('square');
+
+    const scatterSpec: NormalizedChartSpec = {
+      ...specWithColor,
+      type: 'scatter',
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'value', type: 'quantitative' },
+        color: { field: 'country', type: 'nominal' },
+      },
+    };
+    const scatterLegend = computeLegend(scatterSpec, fullStrategy, theme, chartArea);
+    expect(scatterLegend.entries[0].shape).toBe('circle');
+  });
+});

package/src/__tests__/scales.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../compiler/types';
+import { computeScales } from '../layout/scales';
+
+const lineSpec: NormalizedChartSpec = {
+  type: 'line',
+  data: [
+    { date: '2020-01-01', value: 10, country: 'US' },
+    { date: '2021-01-01', value: 50, country: 'US' },
+    { date: '2022-01-01', value: 30, country: 'UK' },
+  ],
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+    color: { field: 'country', type: 'nominal' },
+  },
+  chrome: {},
+  annotations: [],
+  responsive: true,
+  theme: {},
+  darkMode: 'off',
+  labels: { density: 'auto', format: '' },
+};
+
+const barSpec: NormalizedChartSpec = {
+  type: 'bar',
+  data: [
+    { category: 'A', count: 10 },
+    { category: 'B', count: 30 },
+    { category: 'C', count: 20 },
+  ],
+  encoding: {
+    x: { field: 'count', type: 'quantitative' },
+    y: { field: 'category', type: 'nominal' },
+  },
+  chrome: {},
+  annotations: [],
+  responsive: true,
+  theme: {},
+  darkMode: 'off',
+  labels: { density: 'auto', format: '' },
+};
+
+const chartArea = { x: 50, y: 50, width: 500, height: 300 };
+
+describe('computeScales', () => {
+  it('creates a time scale for temporal x encoding', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    expect(scales.x).toBeDefined();
+    expect(scales.x!.type).toBe('time');
+
+    // The scale should map dates within the range
+    const pos = scales.x!.scale(new Date('2020-06-01'));
+    expect(pos).toBeGreaterThanOrEqual(chartArea.x);
+    expect(pos).toBeLessThanOrEqual(chartArea.x + chartArea.width);
+  });
+
+  it('creates a linear scale for quantitative y encoding', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    expect(scales.y).toBeDefined();
+    expect(scales.y!.type).toBe('linear');
+
+    // Y is inverted (SVG coordinates)
+    const domain = scales.y!.scale.domain();
+    expect(domain[0]).toBeLessThanOrEqual(0); // Should include 0
+    expect(domain[1]).toBeGreaterThanOrEqual(50);
+  });
+
+  it('includes zero in quantitative domain by default', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const domain = scales.y!.scale.domain();
+    expect(domain[0]).toBe(0);
+  });
+
+  it('creates an ordinal scale for color encoding', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    expect(scales.color).toBeDefined();
+    expect(scales.color!.type).toBe('ordinal');
+
+    const usColor = scales.color!.scale('US');
+    const ukColor = scales.color!.scale('UK');
+    expect(typeof usColor).toBe('string');
+    expect(usColor).not.toBe(ukColor);
+  });
+
+  it('creates band scales for bar chart categorical axis', () => {
+    const scales = computeScales(barSpec, chartArea, barSpec.data);
+    expect(scales.y).toBeDefined();
+    expect(scales.y!.type).toBe('band');
+
+    // Band scale should have bandwidth
+    expect(scales.y!.scale.bandwidth()).toBeGreaterThan(0);
+  });
+
+  it('derives correct domain from data', () => {
+    const scales = computeScales(barSpec, chartArea, barSpec.data);
+
+    // Y should have all categories
+    const yDomain = scales.y!.scale.domain();
+    expect(yDomain).toContain('A');
+    expect(yDomain).toContain('B');
+    expect(yDomain).toContain('C');
+
+    // X domain should span 0 to >= max value
+    const xDomain = scales.x!.scale.domain();
+    expect(xDomain[0]).toBe(0);
+    expect(xDomain[1]).toBeGreaterThanOrEqual(30);
+  });
+});