@opendata-ai/openchart-engine 8.0.0-rc.12 → 8.0.0-rc.3

package/src/charts/line/__tests__/curves.test.ts

@@ -0,0 +1,51 @@
+import {
+  curveBasis,
+  curveCardinal,
+  curveLinear,
+  curveMonotoneX,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+} from 'd3-shape';
+import { describe, expect, it } from 'vitest';
+import { resolveCurve } from '../curves';
+
+describe('resolveCurve', () => {
+  it('defaults to curveMonotoneX when no interpolation is specified', () => {
+    expect(resolveCurve()).toBe(curveMonotoneX);
+    expect(resolveCurve(undefined)).toBe(curveMonotoneX);
+  });
+
+  it('maps "linear" to curveLinear', () => {
+    expect(resolveCurve('linear')).toBe(curveLinear);
+  });
+
+  it('maps "monotone" to curveMonotoneX', () => {
+    expect(resolveCurve('monotone')).toBe(curveMonotoneX);
+  });
+
+  it('maps "step" to curveStep', () => {
+    expect(resolveCurve('step')).toBe(curveStep);
+  });
+
+  it('maps "step-before" to curveStepBefore', () => {
+    expect(resolveCurve('step-before')).toBe(curveStepBefore);
+  });
+
+  it('maps "step-after" to curveStepAfter', () => {
+    expect(resolveCurve('step-after')).toBe(curveStepAfter);
+  });
+
+  it('maps "basis" to curveBasis', () => {
+    expect(resolveCurve('basis')).toBe(curveBasis);
+  });
+
+  it('maps "cardinal" to curveCardinal', () => {
+    expect(resolveCurve('cardinal')).toBe(curveCardinal);
+  });
+
+  it('maps "natural" to curveNatural', () => {
+    expect(resolveCurve('natural')).toBe(curveNatural);
+  });
+});

package/src/charts/line/__tests__/labels.test.ts

@@ -0,0 +1,94 @@
+import type { LayoutStrategy, LineMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeLineLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const fullStrategy: LayoutStrategy = {
+  labelMode: 'all',
+  legendPosition: 'right',
+  annotationPosition: 'inline',
+  axisLabelDensity: 'full',
+};
+
+const compactStrategy: LayoutStrategy = {
+  labelMode: 'none',
+  legendPosition: 'top',
+  annotationPosition: 'tooltip-only',
+  axisLabelDensity: 'minimal',
+};
+
+function makeLine(series: string, color: string, yOffset: number): LineMark {
+  return {
+    markType: 'line',
+    markDef: { type: 'line' },
+    points: [
+      { x: 50, y: 100 + yOffset },
+      { x: 150, y: 80 + yOffset },
+      { x: 250, y: 120 + yOffset },
+      { x: 350, y: 60 + yOffset },
+    ],
+    stroke: color,
+    strokeWidth: 2,
+    seriesKey: series,
+    data: [],
+    aria: { label: `${series} trend line` },
+  };
+}
+
+const marks: LineMark[] = [
+  makeLine('US', '#4e79a7', 0),
+  makeLine('UK', '#f28e2c', 30),
+  makeLine('Canada', '#e15759', 60),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeLineLabels density modes', () => {
+  it('density "auto" produces labels with collision detection', () => {
+    const labelMap = computeLineLabels(marks, fullStrategy, 'auto');
+    expect(labelMap.size).toBeGreaterThan(0);
+    // Each label should have a visibility flag
+    for (const label of labelMap.values()) {
+      expect(typeof label.visible).toBe('boolean');
+    }
+  });
+
+  it('density "all" shows every series label as visible', () => {
+    const labelMap = computeLineLabels(marks, fullStrategy, 'all');
+    expect(labelMap.size).toBe(3);
+    expect(labelMap.has('US')).toBe(true);
+    expect(labelMap.has('UK')).toBe(true);
+    expect(labelMap.has('Canada')).toBe(true);
+    for (const label of labelMap.values()) {
+      expect(label.visible).toBe(true);
+    }
+  });
+
+  it('density "none" returns empty map', () => {
+    const labelMap = computeLineLabels(marks, fullStrategy, 'none');
+    expect(labelMap.size).toBe(0);
+  });
+
+  it('density "endpoints" works like auto for line charts', () => {
+    const autoMap = computeLineLabels(marks, fullStrategy, 'auto');
+    const endpointsMap = computeLineLabels(marks, fullStrategy, 'endpoints');
+    // Line labels are already endpoint labels (end-of-line), so same behavior
+    expect(endpointsMap.size).toBe(autoMap.size);
+  });
+
+  it('compact strategy suppresses labels regardless of density', () => {
+    const labelMap = computeLineLabels(marks, compactStrategy, 'all');
+    expect(labelMap.size).toBe(0);
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeLineLabels(marks, fullStrategy, 'auto');
+    const withDefault = computeLineLabels(marks, fullStrategy);
+    expect(withDefault.size).toBe(withAuto.size);
+  });
+});

package/src/charts/line/__tests__/mark-options.test.ts

@@ -0,0 +1,175 @@
+import type { LayoutStrategy, LineMark, PointMark, Rect } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../../../compiler/types';
+import { computeScales } from '../../../layout/scales';
+import { computeLineMarks } from '../compute';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea: Rect = { x: 50, y: 20, width: 500, height: 300 };
+
+const fullStrategy: LayoutStrategy = {
+  labelMode: 'all',
+  legendPosition: 'right',
+  annotationPosition: 'inline',
+  axisLabelDensity: 'full',
+};
+
+function makeSpec(markDef: NormalizedChartSpec['markDef']): NormalizedChartSpec {
+  return {
+    markType: 'line',
+    markDef,
+    data: [
+      { date: '2020-01-01', value: 10 },
+      { date: '2021-01-01', value: 40 },
+      { date: '2022-01-01', value: 30 },
+    ],
+    encoding: {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'value', type: 'quantitative' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+    hiddenSeries: [],
+    seriesStyles: {},
+  };
+}
+
+// ---------------------------------------------------------------------------
+// markDef.point controls PointMark emission
+// ---------------------------------------------------------------------------
+
+describe('markDef.point controls PointMark emission', () => {
+  it('does not emit PointMark when point is undefined (default)', () => {
+    const spec = makeSpec({ type: 'line' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const lineMarks = marks.filter((m) => m.type === 'line');
+    const pointMarks = marks.filter((m) => m.type === 'point');
+
+    expect(lineMarks.length).toBeGreaterThan(0);
+    expect(pointMarks.length).toBe(0);
+  });
+
+  it('does not emit PointMark when point is false', () => {
+    const spec = makeSpec({ type: 'line', point: false });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point');
+    expect(pointMarks.length).toBe(0);
+  });
+
+  it('emits visible PointMark when point is true', () => {
+    const spec = makeSpec({ type: 'line', point: true });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point') as PointMark[];
+    expect(pointMarks.length).toBe(3); // One per data point
+
+    // Points should have a non-zero radius (visible)
+    for (const p of pointMarks) {
+      expect(p.r).toBeGreaterThan(0);
+    }
+  });
+
+  it('emits transparent PointMark when point is "transparent"', () => {
+    const spec = makeSpec({ type: 'line', point: 'transparent' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point') as PointMark[];
+    expect(pointMarks.length).toBe(3);
+
+    // Transparent points have zero radius and zero opacity
+    for (const p of pointMarks) {
+      expect(p.r).toBe(0);
+      expect(p.fillOpacity).toBe(0);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dataPoints on LineMark
+// ---------------------------------------------------------------------------
+
+describe('LineMark.dataPoints', () => {
+  it('populates dataPoints with pixel coordinates and original data', () => {
+    const spec = makeSpec({ type: 'line' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const lineMarks = marks.filter((m) => m.type === 'line') as LineMark[];
+    expect(lineMarks.length).toBe(1);
+
+    const lineMark = lineMarks[0];
+    expect(lineMark.dataPoints).toBeDefined();
+    expect(lineMark.dataPoints!.length).toBe(3);
+
+    for (const dp of lineMark.dataPoints!) {
+      expect(typeof dp.x).toBe('number');
+      expect(typeof dp.y).toBe('number');
+      expect(dp.datum).toBeDefined();
+      expect(dp.datum.date).toBeDefined();
+      expect(dp.datum.value).toBeDefined();
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// markDef.interpolate affects line path computation
+// ---------------------------------------------------------------------------
+
+describe('markDef.interpolate affects line generation', () => {
+  it('produces different paths for different interpolation modes', () => {
+    const defaultSpec = makeSpec({ type: 'line' });
+    const linearSpec = makeSpec({ type: 'line', interpolate: 'linear' });
+    const stepSpec = makeSpec({ type: 'line', interpolate: 'step' });
+
+    const defaultScales = computeScales(defaultSpec, chartArea, defaultSpec.data);
+    const linearScales = computeScales(linearSpec, chartArea, linearSpec.data);
+    const stepScales = computeScales(stepSpec, chartArea, stepSpec.data);
+
+    const defaultMarks = computeLineMarks(defaultSpec, defaultScales, chartArea, fullStrategy);
+    const linearMarks = computeLineMarks(linearSpec, linearScales, chartArea, fullStrategy);
+    const stepMarks = computeLineMarks(stepSpec, stepScales, chartArea, fullStrategy);
+
+    const defaultLine = defaultMarks.find((m) => m.type === 'line') as LineMark;
+    const linearLine = linearMarks.find((m) => m.type === 'line') as LineMark;
+    const stepLine = stepMarks.find((m) => m.type === 'line') as LineMark;
+
+    // Default (monotone) and linear should produce different paths
+    expect(defaultLine.path).not.toBe(linearLine.path);
+    // Linear and step should produce different paths
+    expect(linearLine.path).not.toBe(stepLine.path);
+    // All paths should be non-empty
+    expect(defaultLine.path!.length).toBeGreaterThan(0);
+    expect(linearLine.path!.length).toBeGreaterThan(0);
+    expect(stepLine.path!.length).toBeGreaterThan(0);
+  });
+
+  it('uses monotone interpolation by default', () => {
+    const spec = makeSpec({ type: 'line' });
+    const monotoneSpec = makeSpec({ type: 'line', interpolate: 'monotone' });
+
+    const scales = computeScales(spec, chartArea, spec.data);
+    const monotoneScales = computeScales(monotoneSpec, chartArea, monotoneSpec.data);
+
+    const defaultMarks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+    const monotoneMarks = computeLineMarks(monotoneSpec, monotoneScales, chartArea, fullStrategy);
+
+    const defaultLine = defaultMarks.find((m) => m.type === 'line') as LineMark;
+    const monotoneLine = monotoneMarks.find((m) => m.type === 'line') as LineMark;
+
+    // Default and explicit monotone should produce the same path
+    expect(defaultLine.path).toBe(monotoneLine.path);
+  });
+});