@opendata-ai/openchart-engine 1.2.0 → 2.1.0

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

@@ -218,6 +218,182 @@ describe('computeLineMarks', () => {
     });
   });
 
+  describe('x-axis sorting', () => {
+    it('sorts unsorted temporal data so points increase left-to-right', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // Points should have monotonically increasing x pixel values
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts reverse-ordered dates correctly', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2025-01-01', value: 50 },
+          { date: '2024-01-01', value: 40 },
+          { date: '2023-01-01', value: 30 },
+          { date: '2022-01-01', value: 20 },
+          { date: '2021-01-01', value: 10 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      expect(lineMark.points).toHaveLength(5);
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts unsorted numeric x-axis data', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: 2022, value: 30 },
+          { date: 2020, value: 10 },
+          { date: 2021, value: 40 },
+        ],
+        encoding: {
+          x: { field: 'date', type: 'quantitative' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts each series independently in multi-series', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30, country: 'US' },
+          { date: '2020-01-01', value: 10, country: 'US' },
+          { date: '2021-01-01', value: 40, country: 'US' },
+          { date: '2022-01-01', value: 45, country: 'UK' },
+          { date: '2020-01-01', value: 15, country: 'UK' },
+          { date: '2021-01-01', value: 35, country: 'UK' },
+        ],
+      };
+      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');
+      for (const lm of lineMarks) {
+        for (let i = 1; i < lm.points.length; i++) {
+          expect(lm.points[i].x).toBeGreaterThan(lm.points[i - 1].x);
+        }
+      }
+    });
+
+    it('attaches data rows in sorted order on marks', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // The data array on the mark should be chronologically ordered
+      const dates = lineMark.data!.map((r) => r.date);
+      expect(dates).toEqual(['2020-01-01', '2021-01-01', '2022-01-01']);
+    });
+
+    it('sorts data before handling null y-value line breaks', () => {
+      // Unsorted data with a null in the middle chronologically.
+      // After sorting: 2020 (10), 2021 (null), 2022 (30) -> line breaks at 2021
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2021-01-01', value: null },
+          { date: '2020-01-01', value: 10 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // Null is excluded, so only 2 valid points
+      expect(lineMark.points).toHaveLength(2);
+      // The two valid points should still be left-to-right
+      expect(lineMark.points[1].x).toBeGreaterThan(lineMark.points[0].x);
+    });
+
+    it('produces identical output for already-sorted data', () => {
+      // Verify sorting doesn't break pre-sorted input (regression check)
+      const sorted = makeSingleSeriesSpec(); // already chronological
+      const shuffled: NormalizedChartSpec = {
+        ...sorted,
+        data: [
+          { date: '2021-01-01', value: 40 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2022-01-01', value: 30 },
+        ],
+      };
+
+      const sortedScales = computeScales(sorted, chartArea, sorted.data);
+      const sortedMarks = computeLineMarks(sorted, sortedScales, chartArea, fullStrategy);
+
+      const shuffledScales = computeScales(shuffled, chartArea, shuffled.data);
+      const shuffledMarks = computeLineMarks(shuffled, shuffledScales, chartArea, fullStrategy);
+
+      const sortedLine = sortedMarks.find((m): m is LineMark => m.type === 'line')!;
+      const shuffledLine = shuffledMarks.find((m): m is LineMark => m.type === 'line')!;
+
+      // Both should produce the same pixel positions
+      expect(sortedLine.points).toEqual(shuffledLine.points);
+    });
+
+    it('sorts within-year dates by month in multi-series', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2020-12-01', value: 30, country: 'US' },
+          { date: '2020-03-01', value: 10, country: 'US' },
+          { date: '2020-07-01', value: 20, country: 'US' },
+          { date: '2020-12-01', value: 45, country: 'UK' },
+          { date: '2020-03-01', value: 15, country: 'UK' },
+          { date: '2020-07-01', value: 25, country: 'UK' },
+        ],
+      };
+      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(2);
+
+      for (const lm of lineMarks) {
+        // Data rows should be Mar -> Jul -> Dec
+        const dates = lm.data!.map((r) => r.date);
+        expect(dates).toEqual(['2020-03-01', '2020-07-01', '2020-12-01']);
+      }
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
@@ -307,6 +483,122 @@ describe('computeAreaMarks', () => {
     expect(seriesKeys).toContain('UK');
   });
 
+  describe('x-axis sorting', () => {
+    it('sorts unsorted temporal data for single area', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      expect(marks).toHaveLength(1);
+      for (let i = 1; i < marks[0].topPoints.length; i++) {
+        expect(marks[0].topPoints[i].x).toBeGreaterThan(marks[0].topPoints[i - 1].x);
+      }
+    });
+
+    it('sorts unsorted temporal data for stacked area', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30, country: 'US' },
+          { date: '2020-01-01', value: 10, country: 'US' },
+          { date: '2021-01-01', value: 40, country: 'US' },
+          { date: '2022-01-01', value: 45, country: 'UK' },
+          { date: '2020-01-01', value: 15, country: 'UK' },
+          { date: '2021-01-01', value: 35, country: 'UK' },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      for (const mark of marks) {
+        for (let i = 1; i < mark.topPoints.length; i++) {
+          expect(mark.topPoints[i].x).toBeGreaterThan(mark.topPoints[i - 1].x);
+        }
+      }
+    });
+
+    it('attaches sorted data rows on single area marks', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      const dates = marks[0].data!.map((r) => r.date);
+      expect(dates).toEqual(['2020-01-01', '2021-01-01', '2022-01-01']);
+    });
+
+    it('sorts stacked area with 3+ series and shuffled dates', () => {
+      const spec: NormalizedChartSpec = {
+        type: 'line',
+        data: [
+          { date: '2022-01-01', value: 30, region: 'A' },
+          { date: '2020-01-01', value: 10, region: 'A' },
+          { date: '2021-01-01', value: 20, region: 'A' },
+          { date: '2021-01-01', value: 25, region: 'B' },
+          { date: '2022-01-01', value: 35, region: 'B' },
+          { date: '2020-01-01', value: 15, region: 'B' },
+          { date: '2022-01-01', value: 40, region: 'C' },
+          { date: '2020-01-01', value: 5, region: 'C' },
+          { date: '2021-01-01', value: 30, region: 'C' },
+        ],
+        encoding: {
+          x: { field: 'date', type: 'temporal' },
+          y: { field: 'value', type: 'quantitative' },
+          color: { field: 'region', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      expect(marks).toHaveLength(3);
+      for (const mark of marks) {
+        for (let i = 1; i < mark.topPoints.length; i++) {
+          expect(mark.topPoints[i].x).toBeGreaterThan(mark.topPoints[i - 1].x);
+        }
+      }
+    });
+
+    it('produces identical output for pre-sorted and shuffled single area data', () => {
+      const preSorted = makeSingleSeriesSpec();
+      const shuffled: NormalizedChartSpec = {
+        ...preSorted,
+        data: [
+          { date: '2021-01-01', value: 40 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2022-01-01', value: 30 },
+        ],
+      };
+
+      const preSortedScales = computeScales(preSorted, chartArea, preSorted.data);
+      const preSortedMarks = computeAreaMarks(preSorted, preSortedScales, chartArea);
+
+      const shuffledScales = computeScales(shuffled, chartArea, shuffled.data);
+      const shuffledMarks = computeAreaMarks(shuffled, shuffledScales, chartArea);
+
+      expect(preSortedMarks[0].topPoints).toEqual(shuffledMarks[0].topPoints);
+      expect(preSortedMarks[0].bottomPoints).toEqual(shuffledMarks[0].bottomPoints);
+    });
+  });
+
   it('stacked areas: each layer has different baselines', () => {
     const spec = makeMultiSeriesSpec();
     const scales = computeScales(spec, chartArea, spec.data);
@@ -320,6 +612,78 @@ describe('computeAreaMarks', () => {
       expect(firstBottom).not.toBe(secondBottom);
     }
   });
+
+  it('stacked areas: y-domain covers the stacked sum, not individual max', () => {
+    // Three series each with value 100 at the same x point. The stacked sum
+    // 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',
+      data: [
+        { date: '2020-01-01', value: 100, group: 'A' },
+        { date: '2021-01-01', value: 100, group: 'A' },
+        { date: '2020-01-01', value: 100, group: 'B' },
+        { date: '2021-01-01', value: 100, group: 'B' },
+        { date: '2020-01-01', value: 100, group: 'C' },
+        { date: '2021-01-01', value: 100, group: 'C' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        color: { field: 'group', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    expect(marks).toHaveLength(3);
+
+    // The topmost layer's top points should be within the chart area, not
+    // clipped beyond it. With a proper stacked domain the y-scale covers
+    // 0..300 (niced), so all pixel positions stay within bounds.
+    const lastLayer = marks[marks.length - 1];
+    for (const pt of lastLayer.topPoints) {
+      expect(pt.y).toBeGreaterThanOrEqual(chartArea.y);
+      expect(pt.y).toBeLessThanOrEqual(chartArea.y + chartArea.height);
+    }
+  });
+
+  it('returns empty marks for unparseable temporal data', () => {
+    // Quarterly strings like '2022-Q1' are not valid Date strings. The engine
+    // should handle this gracefully (empty marks) rather than crashing or
+    // producing NaN-filled paths.
+    const spec: NormalizedChartSpec = {
+      type: 'area',
+      data: [
+        { quarter: '2022-Q1', revenue: 45, segment: 'Services' },
+        { quarter: '2022-Q2', revenue: 52, segment: 'Services' },
+        { quarter: '2022-Q1', revenue: 120, segment: 'Products' },
+        { quarter: '2022-Q2', revenue: 135, segment: 'Products' },
+      ],
+      encoding: {
+        x: { field: 'quarter', type: 'temporal' },
+        y: { field: 'revenue', type: 'quantitative' },
+        color: { field: 'segment', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    // Should produce empty marks since dates can't be parsed, not crash
+    expect(marks).toHaveLength(0);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/charts/line/area.ts

@@ -12,7 +12,7 @@ import { area, curveMonotoneX, line, stack, stackOffsetNone, stackOrderNone } fr
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, scaleValue } from '../utils';
+import { getColor, scaleValue, sortByField } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -64,10 +64,13 @@ function computeSingleArea(
   for (const [seriesKey, rows] of groups) {
     const color = getColor(scales, seriesKey);
 
+    // Sort rows by x-axis field so areas draw left-to-right
+    const sortedRows = sortByField(rows, xChannel.field);
+
     // Compute points, filtering out null values
     const validPoints: { x: number; yTop: number; yBottom: number; row: DataRow }[] = [];
 
-    for (const row of rows) {
+    for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
 
@@ -147,6 +150,9 @@ function computeStackedArea(
     return computeSingleArea(spec, scales, chartArea);
   }
 
+  // Sort data by x field so stacked areas render left-to-right
+  const sortedData = sortByField(spec.data, xChannel.field);
+
   // Collect unique series keys and x values, and build a lookup from
   // (x-value, series-key) -> original data row so stacked area marks
   // get original rows instead of pivot rows.
@@ -155,7 +161,7 @@ function computeStackedArea(
   const rowsByXSeries = new Map<string, DataRow>();
   const rowsByX = new Map<string, DataRow[]>();
 
-  for (const row of spec.data) {
+  for (const row of sortedData) {
     const xStr = String(row[xChannel.field]);
     const series = String(row[colorField]);
     seriesKeys.add(series);

package/src/charts/line/compute.ts

@@ -20,7 +20,7 @@ import { curveMonotoneX, line } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, groupByField, scaleValue } from '../utils';
+import { getColor, groupByField, scaleValue, sortByField } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -64,6 +64,9 @@ export function computeLineMarks(
   for (const [seriesKey, rows] of groups) {
     const color = getColor(scales, seriesKey);
 
+    // Sort rows by x-axis field so lines draw left-to-right
+    const sortedRows = sortByField(rows, xChannel.field);
+
     // Compute pixel positions for each data point, preserving nulls
     // for line break handling
     const pointsWithData: {
@@ -76,7 +79,7 @@ export function computeLineMarks(
     const segments: { x: number; y: number }[][] = [];
     let currentSegment: { x: number; y: number }[] = [];
 
-    for (const row of rows) {
+    for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
 

package/src/charts/utils.ts

@@ -80,6 +80,54 @@ export function groupByField(data: DataRow[], field: string | undefined): Map<st
   return groups;
 }
 
+// ---------------------------------------------------------------------------
+// Sorting
+// ---------------------------------------------------------------------------
+
+/**
+ * Sort data rows by a field value in ascending order.
+ *
+ * Type-aware: numbers compared numerically, Date objects by timestamp,
+ * string-encoded numbers parsed and compared numerically, and everything
+ * else compared lexicographically (which also handles ISO date strings).
+ * Nulls are sorted last. Returns a new array (no mutation).
+ */
+export function sortByField(data: DataRow[], field: string): DataRow[] {
+  if (data.length <= 1) return [...data];
+
+  return [...data].sort((a, b) => {
+    const aVal = a[field];
+    const bVal = b[field];
+
+    // Nulls last
+    if (aVal == null && bVal == null) return 0;
+    if (aVal == null) return 1;
+    if (bVal == null) return -1;
+
+    // Both numbers
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return aVal - bVal;
+    }
+
+    // Both Dates
+    if (aVal instanceof Date && bVal instanceof Date) {
+      return aVal.getTime() - bVal.getTime();
+    }
+
+    // String values: try numeric parse, then lexicographic
+    const aStr = String(aVal);
+    const bStr = String(bVal);
+
+    const aNum = Number(aStr);
+    const bNum = Number(bStr);
+    if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+      return aNum - bNum;
+    }
+
+    return aStr.localeCompare(bStr);
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Color helpers
 // ---------------------------------------------------------------------------

package/src/layout/axes.ts

@@ -56,12 +56,13 @@ function continuousTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity
 function categoricalTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
   const domain: string[] = scale.domain();
-  const maxTicks = TICK_COUNTS[density];
+  const explicitTickCount = resolvedScale.channel.axis?.tickCount;
+  const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
 
-  // Band scales (bar charts) should always show all category labels.
-  // Only thin point/ordinal scales used for continuous-like axes (e.g. line charts).
+  // Band scales (bar charts) show all category labels by default.
+  // Only thin when there's an explicit tickCount override or for point/ordinal scales.
   let selectedValues = domain;
-  if (resolvedScale.type !== 'band' && domain.length > maxTicks) {
+  if ((resolvedScale.type !== 'band' || explicitTickCount) && domain.length > maxTicks) {
     const step = Math.ceil(domain.length / maxTicks);
     selectedValues = domain.filter((_: string, i: number) => i % step === 0);
   }

package/src/layout/scales.ts

@@ -367,10 +367,15 @@ export function computeScales(
   }
 
   if (encoding.y) {
-    // For stacked columns, the y-domain needs the max category sum, not max individual value.
-    // Without this, stacked bars would clip above the chart area.
+    // For stacked columns and stacked areas, the y-domain needs the max category
+    // sum, not the max individual value. Without this, stacked marks would clip
+    // above the chart area.
     let yData = data;
-    if (spec.type === 'column' && encoding.color && encoding.y.type === 'quantitative') {
+    if (
+      (spec.type === 'column' || spec.type === 'area') &&
+      encoding.color &&
+      encoding.y.type === 'quantitative'
+    ) {
       const xField = encoding.x?.field;
       const yField = encoding.y.field;
       if (xField) {