@opendata-ai/openchart-engine 6.12.0 → 6.13.0

package/src/charts/__tests__/post-process.test.ts

@@ -0,0 +1,258 @@
+import type { Mark, PointMark, RectMark, ResolvedAnimation } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { ResolvedScales } from '../../layout/scales';
+import { assignAnimationIndices, computeMarkObstacles, resolveRendererKey } from '../post-process';
+
+// ---------------------------------------------------------------------------
+// computeMarkObstacles
+// ---------------------------------------------------------------------------
+
+describe('computeMarkObstacles', () => {
+  it('returns individual rects for non-band rect marks', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 10, y: 20, width: 50, height: 30, fill: '#000' } as RectMark,
+      { type: 'rect', x: 80, y: 20, width: 50, height: 30, fill: '#000' } as RectMark,
+    ];
+    const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles(marks, scales);
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({ x: 10, y: 20, width: 50, height: 30 });
+    expect(result[1]).toEqual({ x: 80, y: 20, width: 50, height: 30 });
+  });
+
+  it('returns point mark bounds as bounding box from cx/cy/r', () => {
+    const marks: Mark[] = [{ type: 'point', cx: 100, cy: 100, r: 10, fill: '#000' } as PointMark];
+    const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles(marks, scales);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({ x: 90, y: 90, width: 20, height: 20 });
+  });
+
+  it('returns grouped row obstacles for band-scale charts', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 10, y: 50, width: 40, height: 20, fill: '#000' } as RectMark,
+      { type: 'rect', x: 60, y: 50, width: 30, height: 20, fill: '#000' } as RectMark,
+    ];
+    const bandScale = Object.assign((v: string) => (v === 'A' ? 40 : 100), {
+      bandwidth: () => 30,
+      domain: () => ['A', 'B'],
+    });
+    const scales = { y: { type: 'band', scale: bandScale } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles(marks, scales);
+    // Both marks have cy ~60, so they group into one row obstacle
+    expect(result).toHaveLength(1);
+    expect(result[0].x).toBe(10);
+    expect(result[0].width).toBe(80); // 90 - 10
+  });
+
+  it('returns empty array for empty marks', () => {
+    const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles([], scales);
+    expect(result).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolveRendererKey
+// ---------------------------------------------------------------------------
+
+describe('resolveRendererKey', () => {
+  it('keeps bar as bar when x=quantitative, y=nominal (horizontal)', () => {
+    const encoding = {
+      x: { field: 'val', type: 'quantitative' },
+      y: { field: 'cat', type: 'nominal' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar');
+  });
+
+  it('resolves bar to bar:vertical when x=nominal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'cat', type: 'nominal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves bar to bar:vertical when x=ordinal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'cat', type: 'ordinal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves bar to bar:vertical when x=temporal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves arc to arc:donut when innerRadius > 0', () => {
+    expect(resolveRendererKey('arc', {}, { innerRadius: 50 })).toBe('arc:donut');
+  });
+
+  it('keeps arc as arc when no innerRadius', () => {
+    expect(resolveRendererKey('arc', {}, {})).toBe('arc');
+  });
+
+  it('keeps arc as arc when innerRadius is 0', () => {
+    expect(resolveRendererKey('arc', {}, { innerRadius: 0 })).toBe('arc');
+  });
+
+  it('passes through other mark types unchanged', () => {
+    expect(resolveRendererKey('line', {}, {})).toBe('line');
+    expect(resolveRendererKey('area', {}, {})).toBe('area');
+    expect(resolveRendererKey('point', {}, {})).toBe('point');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// assignAnimationIndices
+// ---------------------------------------------------------------------------
+
+describe('assignAnimationIndices', () => {
+  it('assigns sequential indices sorted by primary value for value stagger', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+      { type: 'rect', x: 0, y: 0, width: 10, height: 10, fill: '#000' } as RectMark,
+      { type: 'rect', x: 0, y: 0, width: 10, height: 50, fill: '#000' } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Sorted by height: 10, 30, 50 -> indices 0, 1, 2
+    expect(marks[0].animationIndex).toBe(1); // height 30
+    expect(marks[1].animationIndex).toBe(0); // height 10
+    expect(marks[2].animationIndex).toBe(2); // height 50
+  });
+
+  it('assigns group-based indices for stacked rects', () => {
+    const marks: Mark[] = [
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 30,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 20,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 40,
+        fill: '#000',
+        stackGroup: 'B',
+      } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Stack group A gets index 0, B gets index 1
+    const rectMarks = marks as RectMark[];
+    expect(rectMarks[0].animationIndex).toBe(0);
+    expect(rectMarks[0].stackPos).toBe(0);
+    expect(rectMarks[1].animationIndex).toBe(0);
+    expect(rectMarks[1].stackPos).toBe(1);
+    expect(rectMarks[2].animationIndex).toBe(1);
+    expect(rectMarks[2].stackPos).toBe(0);
+  });
+
+  it('stack indices overwrite value-based indices', () => {
+    const marks: Mark[] = [
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 30,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 50,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Both should have the same group index (0), not value-sorted indices
+    expect((marks[0] as RectMark).animationIndex).toBe(0);
+    expect((marks[1] as RectMark).animationIndex).toBe(0);
+  });
+
+  it('is a no-op when animation is undefined', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+    ];
+    assignAnimationIndices(marks, undefined);
+    expect(marks[0].animationIndex).toBeUndefined();
+  });
+
+  it('is a no-op when animation is disabled', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: false,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    expect(marks[0].animationIndex).toBeUndefined();
+  });
+
+  it('handles empty marks array', () => {
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    const marks: Mark[] = [];
+    assignAnimationIndices(marks, animation);
+    expect(marks).toHaveLength(0);
+  });
+});

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

@@ -185,3 +185,34 @@ describe('computeBarLabels with $~s format and abbreviated aria values', () => {
     expect(labels[0].text).toBe('$500');
   });
 });
+
+// ---------------------------------------------------------------------------
+// Unicode minus sign handling
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
+  function makeUnicodeMinusMark(index: number, ariaValue: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: index * 30,
+      width: 200,
+      height: 25,
+      fill: '#4e79a7',
+      data: { category: `Cat${index}` },
+      aria: { label: `Cat${index}: ${ariaValue}` },
+    };
+  }
+
+  it('parses Unicode minus and applies format with % suffix', () => {
+    const unicodeMarks: RectMark[] = [
+      makeUnicodeMinusMark(0, '\u221234'), // −34
+      makeUnicodeMinusMark(1, '\u22125'), // −5
+    ];
+
+    const labels = computeBarLabels(unicodeMarks, chartArea, 'all', '+.0f%');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('\u221234%'); // −34%
+    expect(labels[1].text).toBe('\u22125%'); // −5%
+  });
+});

package/src/charts/bar/compute.ts

@@ -116,6 +116,13 @@ export function computeBarMarks(
       );
     }
 
+    const stackMode =
+      xChannel.stack === 'normalize'
+        ? 'normalize'
+        : xChannel.stack === 'center'
+          ? 'center'
+          : 'zero';
+
     return computeStackedBars(
       spec.data,
       xChannel.field,
@@ -126,6 +133,7 @@ export function computeBarMarks(
       bandwidth,
       baseline,
       scales,
+      stackMode,
     );
   }
 
@@ -143,7 +151,7 @@ export function computeBarMarks(
   );
 }
 
-/** Compute stacked horizontal bars. */
+/** Compute stacked horizontal bars with support for zero/normalize/center modes. */
 function computeStackedBars(
   data: DataRow[],
   valueField: string,
@@ -154,6 +162,7 @@ function computeStackedBars(
   bandwidth: number,
   _baseline: number,
   scales: ResolvedScales,
+  stackMode: 'zero' | 'normalize' | 'center' = 'zero',
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -162,13 +171,25 @@ function computeStackedBars(
     const bandY = yScale(category);
     if (bandY === undefined) continue;
 
-    let cumulativeValue = 0;
+    // Compute category total for normalize/center modes
+    let categoryTotal = 0;
+    for (const row of rows) {
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+
+    // For center mode, offset so the stack is centered around zero
+    let cumulativeValue = stackMode === 'center' ? -categoryTotal / 2 : 0;
 
     for (const row of rows) {
       const groupKey = String(row[colorField] ?? '');
-      const value = Number(row[valueField] ?? 0);
+      const rawValue = Number(row[valueField] ?? 0);
       // Only stack positive values (same approach as stacked columns)
-      if (!Number.isFinite(value) || value <= 0) continue;
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+
+      // For normalize mode, scale the value to a fraction of the total
+      const value =
+        stackMode === 'normalize' && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
 
       const color = getColor(scales, groupKey);
 
@@ -177,12 +198,12 @@ function computeStackedBars(
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatBarValue(rawValue)}`,
       };
 
       marks.push({
         type: 'rect',
-        x: xLeft,
+        x: Math.min(xLeft, xRight),
         y: bandY,
         width: barWidth,
         height: bandwidth,

package/src/charts/bar/labels.ts

@@ -42,7 +42,8 @@ const SUFFIX_MULTIPLIERS: Record<string, number> = {
  * Returns NaN when the string cannot be parsed.
  */
 function parseDisplayNumber(raw: string): number {
-  const trimmed = raw.trim();
+  // Normalize Unicode minus (U+2212, produced by d3-format) to ASCII hyphen-minus
+  const trimmed = raw.trim().replace(/\u2212/g, '-');
   if (!trimmed) return NaN;
 
   // Check for trailing abbreviation suffix (case-insensitive)
@@ -54,6 +55,11 @@ function parseDisplayNumber(raw: string): number {
     return Number.isNaN(n) ? NaN : n * multiplier;
   }
 
+  // Strip literal % suffix (e.g., from "+.0f%" d3-format strings)
+  if (last === '%') {
+    return Number(trimmed.slice(0, -1).replace(/,/g, ''));
+  }
+
   // No suffix — strip commas and parse
   return Number(trimmed.replace(/,/g, ''));
 }

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

@@ -424,3 +424,102 @@ describe('computeColumnLabels', () => {
     expect(texts).toContain('200%');
   });
 });
+
+// ---------------------------------------------------------------------------
+// Stack mode tests
+// ---------------------------------------------------------------------------
+
+describe('stack modes', () => {
+  function makeStackedSpec(
+    stackMode: boolean | 'zero' | 'normalize' | 'center' | null,
+  ): NormalizedChartSpec {
+    return {
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: [
+        { cat: 'A', val: 30, grp: 'X' },
+        { cat: 'A', val: 70, grp: 'Y' },
+        { cat: 'B', val: 40, grp: 'X' },
+        { cat: 'B', val: 60, grp: 'Y' },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative', stack: stackMode },
+        color: { field: 'grp', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+  }
+
+  it('normalize: produces marks whose stacked fractions sum to ~1 per category', () => {
+    const spec = makeStackedSpec('normalize');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+
+    // Group by category (stackGroup) and verify normalized heights
+    const catA = marks.filter((m) => m.stackGroup === 'A');
+    const catB = marks.filter((m) => m.stackGroup === 'B');
+    expect(catA).toHaveLength(2);
+    expect(catB).toHaveLength(2);
+
+    // The y scale domain is [0, 1] for normalize. Verify marks don't overlap
+    // and each category's marks span the full [0, 1] range when mapped back.
+    // Category A: 30/(30+70)=0.3, 70/(30+70)=0.7
+    // Category B: 40/(40+60)=0.4, 60/(40+60)=0.6
+    // All marks should have non-zero height
+    for (const mark of marks) {
+      expect(mark.height).toBeGreaterThan(0);
+    }
+  });
+
+  it('center: produces marks with symmetric offsets around zero', () => {
+    const spec = makeStackedSpec('center');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+
+    // All marks should have non-zero height
+    for (const mark of marks) {
+      expect(mark.height).toBeGreaterThan(0);
+    }
+  });
+
+  it('existing zero mode still works correctly', () => {
+    const spec = makeStackedSpec('zero');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+    // All stacked marks should have stackGroup set
+    for (const mark of marks) {
+      expect(mark.stackGroup).toBeDefined();
+    }
+  });
+
+  it('null/false disables stacking (grouped mode)', () => {
+    const specNull = makeStackedSpec(null);
+    const scalesNull = computeScales(specNull, chartArea, specNull.data);
+    const marksNull = computeColumnMarks(specNull, scalesNull, chartArea, fullStrategy);
+
+    // Grouped mode: no stackGroup
+    for (const mark of marksNull) {
+      expect(mark.stackGroup).toBeUndefined();
+    }
+
+    const specFalse = makeStackedSpec(false);
+    const scalesFalse = computeScales(specFalse, chartArea, specFalse.data);
+    const marksFalse = computeColumnMarks(specFalse, scalesFalse, chartArea, fullStrategy);
+
+    for (const mark of marksFalse) {
+      expect(mark.stackGroup).toBeUndefined();
+    }
+  });
+});

package/src/charts/column/compute.ts

@@ -106,6 +106,13 @@ export function computeColumnMarks(
         );
       }
 
+      const stackMode =
+        yChannel.stack === 'normalize'
+          ? 'normalize'
+          : yChannel.stack === 'center'
+            ? 'center'
+            : 'zero';
+
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -116,6 +123,7 @@ export function computeColumnMarks(
         bandwidth,
         baseline,
         scales,
+        stackMode,
       );
     }
 
@@ -333,7 +341,7 @@ function computeGroupedColumns(
   return marks;
 }
 
-/** Compute stacked vertical columns. */
+/** Compute stacked vertical columns with support for zero/normalize/center modes. */
 function computeStackedColumns(
   data: DataRow[],
   categoryField: string,
@@ -344,6 +352,7 @@ function computeStackedColumns(
   bandwidth: number,
   _baseline: number,
   scales: ResolvedScales,
+  stackMode: 'zero' | 'normalize' | 'center' = 'zero',
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -352,14 +361,26 @@ function computeStackedColumns(
     const bandX = xScale(category);
     if (bandX === undefined) continue;
 
-    let cumulativeValue = 0;
+    // Compute category total for normalize/center modes
+    let categoryTotal = 0;
+    for (const row of rows) {
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+
+    // For center mode, offset so the stack is centered around zero
+    let cumulativeValue = stackMode === 'center' ? -categoryTotal / 2 : 0;
 
     for (const row of rows) {
       const groupKey = String(row[colorField] ?? '');
-      const value = Number(row[valueField] ?? 0);
+      const rawValue = Number(row[valueField] ?? 0);
       // Stacking only applies to positive values; negative/zero rows are skipped
       // since cumulative stacking doesn't make visual sense for mixed signs.
-      if (!Number.isFinite(value) || value <= 0) continue;
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+
+      // For normalize mode, scale the value to a fraction of the total
+      const value =
+        stackMode === 'normalize' && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
 
       const color = getColor(scales, groupKey);
 
@@ -368,13 +389,13 @@ function computeStackedColumns(
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatColumnValue(rawValue)}`,
       };
 
       marks.push({
         type: 'rect',
         x: bandX,
-        y: yTop,
+        y: Math.min(yTop, yBottom),
         width: bandwidth,
         height: columnHeight,
         fill: color,

package/src/charts/line/area.ts

@@ -9,7 +9,15 @@
 import type { AreaMark, DataRow, Encoding, MarkAria, Rect } from '@opendata-ai/openchart-core';
 import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 import type { ScaleLinear } from 'd3-scale';
-import { area, line, stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
+import {
+  area,
+  line,
+  stack,
+  stackOffsetExpand,
+  stackOffsetNone,
+  stackOffsetSilhouette,
+  stackOrderNone,
+} from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -200,11 +208,20 @@ function computeStackedArea(
     return pivot;
   });
 
+  // Resolve stack offset from the y channel's stack property
+  const stackProp = yChannel.stack;
+  const offsetFn =
+    stackProp === 'normalize'
+      ? stackOffsetExpand
+      : stackProp === 'center'
+        ? stackOffsetSilhouette
+        : stackOffsetNone;
+
   // Use d3 stack to compute the stacked layout
   const stackGenerator = stack<Record<string, unknown>>()
     .keys(keys)
     .order(stackOrderNone)
-    .offset(stackOffsetNone);
+    .offset(offsetFn);
 
   const stackedData = stackGenerator(pivotData);
   const yScale = scales.y.scale as ScaleLinear<number, number>;