@opendata-ai/openchart-engine 6.0.0 → 6.1.0

package/src/charts/bar/__tests__/compute.test.ts

@@ -20,7 +20,8 @@ const fullStrategy: LayoutStrategy = {
 
 function makeSimpleBarSpec(): NormalizedChartSpec {
   return {
-    type: 'bar',
+    markType: 'bar',
+    markDef: { type: 'bar' },
     data: [
       { category: 'Apple', value: 50 },
       { category: 'Banana', value: 30 },
@@ -41,7 +42,8 @@ function makeSimpleBarSpec(): NormalizedChartSpec {
 
 function makeGroupedBarSpec(): NormalizedChartSpec {
   return {
-    type: 'bar',
+    markType: 'bar',
+    markDef: { type: 'bar' },
     data: [
       { category: 'Q1', value: 50, region: 'East' },
       { category: 'Q1', value: 40, region: 'West' },
@@ -66,7 +68,8 @@ function makeGroupedBarSpec(): NormalizedChartSpec {
 
 function makeNegativeBarSpec(): NormalizedChartSpec {
   return {
-    type: 'bar',
+    markType: 'bar',
+    markDef: { type: 'bar' },
     data: [
       { category: 'Growth', value: 15 },
       { category: 'Decline', value: -10 },
@@ -227,7 +230,8 @@ describe('computeBarMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'bar',
+        markType: 'bar',
+        markDef: { type: 'bar' },
         data: [{ category: 'A', value: 10 }],
         encoding: {
           y: { field: 'category', type: 'nominal' },
@@ -246,7 +250,8 @@ describe('computeBarMarks', () => {
 
     it('returns empty array for empty data', () => {
       const spec: NormalizedChartSpec = {
-        type: 'bar',
+        markType: 'bar',
+        markDef: { type: 'bar' },
         data: [],
         encoding: {
           x: { field: 'value', type: 'quantitative' },
@@ -306,7 +311,8 @@ describe('computeBarLabels', () => {
 
   it('applies format with literal alpha suffix (e.g. "T")', () => {
     const spec: NormalizedChartSpec = {
-      type: 'bar',
+      markType: 'bar',
+      markDef: { type: 'bar' },
       data: [
         { company: 'Apple', cap: 3.75 },
         { company: 'Meta', cap: 1.63 },

package/src/charts/bar/compute.ts

@@ -7,6 +7,7 @@
  */
 
 import type {
+  ConditionalValueDef,
   DataRow,
   Encoding,
   LayoutStrategy,
@@ -19,6 +20,7 @@ import type { ScaleBand, ScaleLinear } from 'd3-scale';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
+import { isConditionalValueDef, resolveConditionalValue } from '../../transforms/conditional';
 import { getColor, getSequentialColor, groupByField } from '../utils';
 
 // ---------------------------------------------------------------------------
@@ -68,8 +70,13 @@ export function computeBarMarks(
 
   const bandwidth = yScale.bandwidth();
   const baseline = xScale(0);
-  const colorField = encoding.color?.field;
-  const isSequentialColor = encoding.color?.type === 'quantitative';
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const conditionalColor =
+    encoding.color && isConditionalValueDef(encoding.color)
+      ? (encoding.color as ConditionalValueDef)
+      : undefined;
+  const colorField = colorEnc?.field;
+  const isSequentialColor = colorEnc?.type === 'quantitative';
 
   // If no color encoding, or sequential color (value-based gradient), render simple bars
   if (!colorField || isSequentialColor) {
@@ -83,6 +90,7 @@ export function computeBarMarks(
       baseline,
       scales,
       isSequentialColor,
+      conditionalColor,
     );
   }
 
@@ -167,6 +175,7 @@ function computeSimpleBars(
   baseline: number,
   scales: ResolvedScales,
   sequentialColor = false,
+  conditionalColor?: ConditionalValueDef,
 ): RectMark[] {
   const marks: RectMark[] = [];
 
@@ -178,9 +187,16 @@ function computeSimpleBars(
     const bandY = yScale(category);
     if (bandY === undefined) continue;
 
-    const color = sequentialColor
-      ? getSequentialColor(scales, value)
-      : getColor(scales, '__default__');
+    let color: string;
+    if (conditionalColor) {
+      color = String(
+        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, '__default__'),
+      );
+    } else if (sequentialColor) {
+      color = getSequentialColor(scales, value);
+    } else {
+      color = getColor(scales, '__default__');
+    }
     const xPos = value >= 0 ? baseline : xScale(value);
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
 

package/src/charts/column/__tests__/compute.test.ts

@@ -20,7 +20,8 @@ const fullStrategy: LayoutStrategy = {
 
 function makeSimpleColumnSpec(): NormalizedChartSpec {
   return {
-    type: 'column',
+    markType: 'bar',
+    markDef: { type: 'bar', orient: 'vertical' },
     data: [
       { month: 'Jan', sales: 120 },
       { month: 'Feb', sales: 80 },
@@ -42,7 +43,8 @@ function makeSimpleColumnSpec(): NormalizedChartSpec {
 
 function makeGroupedColumnSpec(): NormalizedChartSpec {
   return {
-    type: 'column',
+    markType: 'bar',
+    markDef: { type: 'bar', orient: 'vertical' },
     data: [
       { month: 'Jan', sales: 120, region: 'North' },
       { month: 'Jan', sales: 80, region: 'South' },
@@ -67,7 +69,8 @@ function makeGroupedColumnSpec(): NormalizedChartSpec {
 
 function makeNegativeColumnSpec(): NormalizedChartSpec {
   return {
-    type: 'column',
+    markType: 'bar',
+    markDef: { type: 'bar', orient: 'vertical' },
     data: [
       { quarter: 'Q1', growth: 5 },
       { quarter: 'Q2', growth: -3 },
@@ -211,7 +214,8 @@ describe('computeColumnMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no y encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'column',
+        markType: 'bar',
+        markDef: { type: 'bar', orient: 'vertical' },
         data: [{ month: 'Jan', sales: 100 }],
         encoding: {
           x: { field: 'month', type: 'nominal' },
@@ -230,7 +234,8 @@ describe('computeColumnMarks', () => {
 
     it('returns empty array for empty data', () => {
       const spec: NormalizedChartSpec = {
-        type: 'column',
+        markType: 'bar',
+        markDef: { type: 'bar', orient: 'vertical' },
         data: [],
         encoding: {
           x: { field: 'month', type: 'nominal' },
@@ -288,7 +293,8 @@ describe('computeColumnLabels', () => {
 
   it('applies format with trailing zero trim (~)', () => {
     const spec: NormalizedChartSpec = {
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: [
         { company: 'A', cap: 3.1 },
         { company: 'B', cap: 2.85 },
@@ -315,7 +321,8 @@ describe('computeColumnLabels', () => {
 
   it('applies format with literal alpha suffix (e.g. "T")', () => {
     const spec: NormalizedChartSpec = {
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: [
         { company: 'Apple', cap: 3.75 },
         { company: 'Meta', cap: 1.63 },

package/src/charts/column/compute.ts

@@ -10,6 +10,7 @@
  */
 
 import type {
+  ConditionalValueDef,
   DataRow,
   Encoding,
   LayoutStrategy,
@@ -19,9 +20,9 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
-
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
+import { isConditionalValueDef, resolveConditionalValue } from '../../transforms/conditional';
 import { getColor, getSequentialColor, groupByField } from '../utils';
 
 // ---------------------------------------------------------------------------
@@ -71,9 +72,14 @@ export function computeColumnMarks(
 
   const bandwidth = xScale.bandwidth();
   const baseline = yScale(0);
-  const colorField = encoding.color?.field;
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const conditionalColor =
+    encoding.color && isConditionalValueDef(encoding.color)
+      ? (encoding.color as ConditionalValueDef)
+      : undefined;
+  const colorField = colorEnc?.field;
 
-  const isSequentialColor = encoding.color?.type === 'quantitative';
+  const isSequentialColor = colorEnc?.type === 'quantitative';
 
   // Color encoding present: decide between colored simple columns vs stacked
   if (colorField && !isSequentialColor) {
@@ -119,6 +125,7 @@ export function computeColumnMarks(
     baseline,
     scales,
     isSequentialColor,
+    conditionalColor,
   );
 }
 
@@ -133,6 +140,7 @@ function computeSimpleColumns(
   baseline: number,
   scales: ResolvedScales,
   sequentialColor = false,
+  conditionalColor?: ConditionalValueDef,
 ): RectMark[] {
   const marks: RectMark[] = [];
 
@@ -144,9 +152,16 @@ function computeSimpleColumns(
     const bandX = xScale(category);
     if (bandX === undefined) continue;
 
-    const color = sequentialColor
-      ? getSequentialColor(scales, value)
-      : getColor(scales, '__default__');
+    let color: string;
+    if (conditionalColor) {
+      color = String(
+        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, '__default__'),
+      );
+    } else if (sequentialColor) {
+      color = getSequentialColor(scales, value);
+    } else {
+      color = getColor(scales, '__default__');
+    }
     const yPos = yScale(value);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
 

package/src/charts/dot/__tests__/compute.test.ts

@@ -20,7 +20,8 @@ const fullStrategy: LayoutStrategy = {
 
 function makeSimpleDotSpec(): NormalizedChartSpec {
   return {
-    type: 'dot',
+    markType: 'circle',
+    markDef: { type: 'circle' },
     data: [
       { country: 'USA', score: 85 },
       { country: 'UK', score: 72 },
@@ -42,7 +43,8 @@ function makeSimpleDotSpec(): NormalizedChartSpec {
 
 function makeColoredDotSpec(): NormalizedChartSpec {
   return {
-    type: 'dot',
+    markType: 'circle',
+    markDef: { type: 'circle' },
     data: [
       { item: 'Revenue', value: 120, status: 'good' },
       { item: 'Costs', value: 80, status: 'neutral' },
@@ -142,7 +144,8 @@ describe('computeDotMarks', () => {
   describe('dumbbell (multi-series)', () => {
     function makeDumbbellSpec(): NormalizedChartSpec {
       return {
-        type: 'dot',
+        markType: 'circle',
+        markDef: { type: 'circle' },
         data: [
           { country: 'USA', rate: 78, gender: 'Male' },
           { country: 'USA', rate: 82, gender: 'Female' },
@@ -264,7 +267,8 @@ describe('computeDotMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'dot',
+        markType: 'circle',
+        markDef: { type: 'circle' },
         data: [{ country: 'USA', score: 85 }],
         encoding: {
           y: { field: 'country', type: 'nominal' },
@@ -283,7 +287,8 @@ describe('computeDotMarks', () => {
 
     it('returns empty array for empty data', () => {
       const spec: NormalizedChartSpec = {
-        type: 'dot',
+        markType: 'circle',
+        markDef: { type: 'circle' },
         data: [],
         encoding: {
           x: { field: 'score', type: 'quantitative' },

package/src/charts/dot/compute.ts

@@ -22,7 +22,7 @@ import type { ScaleBand, ScaleLinear } from 'd3-scale';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, groupByField } from '../utils';
+import { getColor, getSequentialColor, groupByField } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -68,9 +68,11 @@ export function computeDotMarks(
 
   const bandwidth = yScale.bandwidth();
   const baseline = xScale(0);
-  const colorField = encoding.color?.field;
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const isSequentialColor = colorEnc?.type === 'quantitative';
+  const colorField = isSequentialColor ? undefined : colorEnc?.field;
 
-  // Multi-series: dumbbell chart with connecting bars
+  // Multi-series (categorical): dumbbell chart with connecting bars
   if (colorField) {
     return computeDumbbellMarks(
       spec.data,
@@ -94,6 +96,7 @@ export function computeDotMarks(
     bandwidth,
     baseline,
     scales,
+    isSequentialColor,
   );
 }
 
@@ -198,6 +201,7 @@ function computeLollipopMarks(
   bandwidth: number,
   baseline: number,
   scales: ResolvedScales,
+  isSequentialColor = false,
 ): (PointMark | RectMark)[] {
   const marks: (PointMark | RectMark)[] = [];
 
@@ -212,7 +216,9 @@ function computeLollipopMarks(
     const cx = xScale(value);
     const cy = bandY + bandwidth / 2;
 
-    const color = getColor(scales, '__default__');
+    const color = isSequentialColor
+      ? getSequentialColor(scales, value)
+      : getColor(scales, '__default__');
 
     // Stem: thin rectangle from baseline to dot center
     const stemX = Math.min(baseline, cx);

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

@@ -28,7 +28,8 @@ const compactStrategy: LayoutStrategy = {
 
 function makeSingleSeriesSpec(): NormalizedChartSpec {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line', point: true },
     data: [
       { date: '2020-01-01', value: 10 },
       { date: '2021-01-01', value: 40 },
@@ -49,7 +50,8 @@ function makeSingleSeriesSpec(): NormalizedChartSpec {
 
 function makeMultiSeriesSpec(): NormalizedChartSpec {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line', point: true },
     data: [
       { date: '2020-01-01', value: 10, country: 'US' },
       { date: '2021-01-01', value: 40, country: 'US' },
@@ -74,7 +76,8 @@ function makeMultiSeriesSpec(): NormalizedChartSpec {
 
 function makeMissingDataSpec(): NormalizedChartSpec {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line', point: true },
     data: [
       { date: '2020-01-01', value: 10 },
       { date: '2021-01-01', value: null },
@@ -144,14 +147,14 @@ describe('computeLineMarks', () => {
       expect(lineMark.seriesKey).toBeUndefined();
     });
 
-    it('point marks have invisible fill (for hover only)', () => {
+    it('visible point marks have filled opacity when point: true', () => {
       const spec = makeSingleSeriesSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
 
       const pointMarks = marks.filter((m): m is PointMark => m.type === 'point');
       for (const pm of pointMarks) {
-        expect(pm.fillOpacity).toBe(0);
+        expect(pm.fillOpacity).toBe(1);
       }
     });
   });
@@ -397,7 +400,8 @@ describe('computeLineMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'line',
+        markType: 'line',
+        markDef: { type: 'line', point: true },
         data: [{ value: 10 }],
         encoding: {
           y: { field: 'value', type: 'quantitative' },
@@ -416,7 +420,8 @@ describe('computeLineMarks', () => {
 
     it('returns empty array for empty data', () => {
       const spec: NormalizedChartSpec = {
-        type: 'line',
+        markType: 'line',
+        markDef: { type: 'line', point: true },
         data: [],
         encoding: {
           x: { field: 'date', type: 'temporal' },
@@ -542,7 +547,8 @@ describe('computeAreaMarks', () => {
 
     it('sorts stacked area with 3+ series and shuffled dates', () => {
       const spec: NormalizedChartSpec = {
-        type: 'line',
+        markType: 'line',
+        markDef: { type: 'line', point: true },
         data: [
           { date: '2022-01-01', value: 30, region: 'A' },
           { date: '2020-01-01', value: 10, region: 'A' },
@@ -618,7 +624,8 @@ describe('computeAreaMarks', () => {
     // is 300, so the y-scale domain must go up to at least 300. Without the
     // stacked domain fix, the domain only reaches 100 and the top layers clip.
     const spec: NormalizedChartSpec = {
-      type: 'area',
+      markType: 'area',
+      markDef: { type: 'area' },
       data: [
         { date: '2020-01-01', value: 100, group: 'A' },
         { date: '2021-01-01', value: 100, group: 'A' },
@@ -659,7 +666,8 @@ describe('computeAreaMarks', () => {
     // should handle this gracefully (empty marks) rather than crashing or
     // producing NaN-filled paths.
     const spec: NormalizedChartSpec = {
-      type: 'area',
+      markType: 'area',
+      markDef: { type: 'area' },
       data: [
         { quarter: '2022-Q1', revenue: 45, segment: 'Services' },
         { quarter: '2022-Q2', revenue: 52, segment: 'Services' },
@@ -750,7 +758,8 @@ describe('computeLineLabels', () => {
   it('collision detection resolves overlapping labels', () => {
     // Create a spec where series end at the same y position
     const spec: NormalizedChartSpec = {
-      type: 'line',
+      markType: 'line',
+      markDef: { type: 'line', point: true },
       data: [
         { date: '2020-01-01', value: 10, country: 'A' },
         { date: '2021-01-01', value: 30, country: 'A' },
@@ -908,3 +917,85 @@ describe('seriesStyles', () => {
     }
   });
 });
+
+// ---------------------------------------------------------------------------
+// Sequential (quantitative) color
+// ---------------------------------------------------------------------------
+
+describe('sequential color encoding', () => {
+  function makeSequentialColorSpec(): NormalizedChartSpec {
+    return {
+      markType: 'line',
+      markDef: { type: 'line' },
+      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' },
+        color: { field: 'value', type: 'quantitative' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+  }
+
+  it('produces a single line mark (no grouping) with sequential color', () => {
+    const spec = makeSequentialColorSpec();
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const lineMarks = marks.filter((m): m is LineMark => m.type === 'line');
+    expect(lineMarks).toHaveLength(1);
+    // Should not group into multiple series
+    expect(lineMarks[0].seriesKey).toBeUndefined();
+  });
+
+  it('auto-shows point marks for sequential color', () => {
+    const spec = makeSequentialColorSpec();
+    // markDef.point is NOT set, but points should appear anyway for sequential color
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m): m is PointMark => m.type === 'point');
+    expect(pointMarks).toHaveLength(3);
+    // Points should be visible (r > 0)
+    expect(pointMarks.every((p) => p.r > 0)).toBe(true);
+  });
+
+  it('assigns different colors to points based on data value', () => {
+    const spec = makeSequentialColorSpec();
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m): m is PointMark => m.type === 'point');
+    // The three points have values 10, 40, 30 so should get distinct colors
+    const colors = pointMarks.map((p) => p.fill);
+    // Min (10) and max (40) should definitely differ
+    expect(colors[0]).not.toBe(colors[1]);
+  });
+
+  it('handles NaN values gracefully in sequential color', () => {
+    const spec = makeSequentialColorSpec();
+    spec.data = [
+      { date: '2020-01-01', value: 10 },
+      { date: '2021-01-01', value: 'not a number' },
+      { date: '2022-01-01', value: 30 },
+    ];
+    const scales = computeScales(spec, chartArea, spec.data);
+    // Should not throw
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+    const pointMarks = marks.filter((m): m is PointMark => m.type === 'point');
+    // All points should have a valid fill color (string)
+    for (const p of pointMarks) {
+      expect(typeof p.fill).toBe('string');
+      expect(p.fill.length).toBeGreaterThan(0);
+    }
+  });
+});

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

@@ -22,7 +22,8 @@ const compactStrategy: LayoutStrategy = {
 
 function makeLine(series: string, color: string, yOffset: number): LineMark {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line' },
     points: [
       { x: 50, y: 100 + yOffset },
       { x: 150, y: 80 + yOffset },