@opendata-ai/openchart-engine 6.12.0 → 6.15.0

package/src/charts/column/labels.ts

@@ -18,12 +18,24 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
+  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
+  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Format a column value for display (abbreviate large numbers). */
+function formatColumnValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -47,6 +59,7 @@ export function computeColumnLabels(
   density: LabelDensity = 'auto',
   labelFormat?: string,
   labelPrefix?: string,
+  valueField?: string,
 ): ResolvedLabel[] {
   // 'none': no labels at all
   if (density === 'none') return [];
@@ -60,19 +73,28 @@ export function computeColumnLabels(
   const candidates: LabelCandidate[] = [];
 
   for (const mark of targetMarks) {
-    // Extract the display value from the aria label.
-    // Format is "category: value" or "category, group: value".
-    // Use the last colon to split, which handles colons in category names.
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(':');
-    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
-    if (!rawValue) continue;
-
-    // Apply label format if provided (re-parse the number from the aria string)
-    let valuePart = rawValue;
-    if (formatter) {
-      const num = Number(rawValue.replace(/[^0-9.-]/g, ''));
-      if (!Number.isNaN(num)) valuePart = formatter(num);
+    // Get the original numeric value from the data row when possible,
+    // falling back to parsing the aria label (which may lose precision
+    // due to abbreviation rounding, e.g. 1955 → "2K" → 2000).
+    let valuePart: string;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatColumnValue(rawNum);
+    } else {
+      // Fallback: extract from aria label
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(':');
+      const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
+      if (!rawValue) continue;
+      if (formatter) {
+        const num = Number(rawValue.replace(/[^0-9.-]/g, ''));
+        valuePart = !Number.isNaN(num) ? formatter(num) : rawValue;
+      } else {
+        valuePart = rawValue;
+      }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
 

package/src/charts/dot/index.ts

@@ -26,7 +26,16 @@ export const dotRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
   const pointMarks = marks.filter((m): m is PointMark => m.type === 'point');
 
   // Compute and attach labels to point marks (respects spec.labels.density)
-  const labels = computeDotLabels(pointMarks, chartArea, spec.labels.density, spec.labels.prefix);
+  const valueField =
+    spec.encoding?.x && 'field' in spec.encoding.x ? spec.encoding.x.field : undefined;
+  const labels = computeDotLabels(
+    pointMarks,
+    chartArea,
+    spec.labels.density,
+    spec.labels.prefix,
+    spec.labels.format,
+    valueField,
+  );
   let labelIdx = 0;
   for (const mark of marks) {
     if (mark.type === 'point' && labelIdx < labels.length) {

package/src/charts/dot/labels.ts

@@ -18,11 +18,24 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
+  abbreviateNumber,
+  buildD3Formatter,
   estimateTextWidth,
+  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Format a dot value for display (abbreviate large numbers). */
+function formatDotValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -45,6 +58,8 @@ export function computeDotLabels(
   _chartArea: Rect,
   density: LabelDensity = 'auto',
   labelPrefix?: string,
+  labelFormat?: string,
+  valueField?: string,
 ): ResolvedLabel[] {
   // 'none': no labels at all
   if (density === 'none') return [];
@@ -53,15 +68,31 @@ export function computeDotLabels(
   const targetMarks =
     density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
 
+  const formatter = buildD3Formatter(labelFormat);
   const candidates: LabelCandidate[] = [];
 
   for (const mark of targetMarks) {
-    // Extract the display value from the aria label.
-    // Format is "category: value". Use the last colon to handle colons in category names.
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(':');
-    let valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
-    if (!valuePart) continue;
+    // Get the original numeric value from the data row when possible,
+    // falling back to parsing the aria label (which may lose precision
+    // due to abbreviation rounding, e.g. 1955 → "2K" → 2000).
+    let valuePart: string;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatDotValue(rawNum);
+    } else {
+      // Fallback: extract from aria label
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(':');
+      valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
+      if (!valuePart) continue;
+      if (formatter) {
+        const num = Number(valuePart.replace(/[^0-9.-]/g, ''));
+        if (!Number.isNaN(num)) valuePart = formatter(num);
+      }
+    }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
 
     const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);

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';
@@ -66,8 +74,12 @@ 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);
+    // Sort rows by x-axis field so areas draw left-to-right.
+    // For nominal/ordinal axes, preserve data order.
+    const sortedRows =
+      xChannel.type === 'nominal' || xChannel.type === 'ordinal'
+        ? rows
+        : sortByField(rows, xChannel.field);
 
     // Compute points, filtering out null values
     const validPoints: { x: number; yTop: number; yBottom: number; row: DataRow }[] = [];
@@ -154,8 +166,12 @@ 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);
+  // Sort data by x field so stacked areas render left-to-right.
+  // For nominal/ordinal axes, preserve data order.
+  const sortedData =
+    xChannel.type === 'nominal' || xChannel.type === 'ordinal'
+      ? spec.data
+      : 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
@@ -200,11 +216,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>;

package/src/charts/line/compute.ts

@@ -75,8 +75,13 @@ export function computeLineMarks(
       : getColor(scales, seriesKey);
     const strokeColor = getRepresentativeColor(color);
 
-    // Sort rows by x-axis field so lines draw left-to-right
-    const sortedRows = sortByField(rows, xChannel.field);
+    // Sort rows by x-axis field so lines draw left-to-right.
+    // For nominal/ordinal axes, preserve data order since there's no
+    // natural sort and the scale domain already reflects intended order.
+    const sortedRows =
+      xChannel.type === 'nominal' || xChannel.type === 'ordinal'
+        ? rows
+        : sortByField(rows, xChannel.field);
 
     // Compute pixel positions for each data point, preserving nulls
     // for line break handling

package/src/charts/line/index.ts

@@ -4,7 +4,8 @@
  * Exports line and area chart renderers and computation functions.
  */
 
-import type { LineMark, Mark } from '@opendata-ai/openchart-core';
+import type { AreaMark, LineMark, Mark } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 import type { ChartRenderer } from '../registry';
 import { computeAreaMarks } from './area';
 import { computeLineMarks } from './compute';
@@ -53,12 +54,42 @@ export const lineRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _
  */
 export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const areas = computeAreaMarks(spec, scales, chartArea);
-  const lines = computeLineMarks(spec, scales, chartArea, strategy);
+
+  const encoding = spec.encoding;
+  const hasColor = !!(encoding.color && 'field' in encoding.color);
+
+  // For stacked areas, derive line marks from the area top paths so lines
+  // align with stacked positions. For non-stacked, compute lines normally.
+  const lines = hasColor
+    ? linesFromAreas(areas)
+    : computeLineMarks(spec, scales, chartArea, strategy);
 
   // Areas go first (rendered behind lines), then lines on top
   return [...areas, ...lines] as Mark[];
 };
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Derive LineMark[] from stacked AreaMark[] using each area's top boundary.
+ * This ensures lines sit on top of their corresponding stacked area bands.
+ */
+function linesFromAreas(areas: AreaMark[]): LineMark[] {
+  return areas.map((a) => ({
+    type: 'line' as const,
+    points: a.topPoints,
+    path: a.topPath,
+    stroke: getRepresentativeColor(a.fill),
+    strokeWidth: a.strokeWidth ?? 1,
+    seriesKey: a.seriesKey,
+    data: a.data,
+    dataPoints: a.dataPoints,
+    aria: { label: `${a.seriesKey ?? 'Series'}: line with ${a.topPoints.length} data points` },
+  }));
+}
+
 // ---------------------------------------------------------------------------
 // Public exports
 // ---------------------------------------------------------------------------

package/src/charts/post-process.ts

@@ -0,0 +1,215 @@
+/**
+ * Mark post-processing: obstacle computation, renderer dispatch, and
+ * animation index assignment. These are mark-type-aware operations that
+ * run after the chart renderer has produced marks.
+ */
+
+import type {
+  Encoding,
+  Mark,
+  MarkDef,
+  PointMark,
+  Rect,
+  RectMark,
+  ResolvedAnimation,
+} from '@opendata-ai/openchart-core';
+import type { ResolvedScales } from '../layout/scales';
+
+// ---------------------------------------------------------------------------
+// Mark obstacles for annotation collision avoidance
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute bounding rects from marks to use as obstacles for annotation nudging.
+ *
+ * For band-scale charts (bar, dot): groups marks by band row and returns
+ * a single obstacle per row spanning the full band height and x-range.
+ *
+ * For other charts (column, scatter): returns individual mark bounds so
+ * annotations avoid overlapping any visible data mark.
+ */
+export function computeMarkObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
+  // Band-scale y-axis: group marks by row for efficient obstacle computation
+  if (scales.y?.type === 'band') {
+    return computeBandRowObstacles(marks, scales);
+  }
+
+  // All other charts: use individual rect/point mark bounds as obstacles
+  const obstacles: Rect[] = [];
+  for (const mark of marks) {
+    if (mark.type === 'rect') {
+      const rm = mark as RectMark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === 'point') {
+      const pm = mark as PointMark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2,
+      });
+    }
+  }
+  return obstacles;
+}
+
+/** Group band-scale marks by row, returning one obstacle per band. */
+function computeBandRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
+  const rows = new Map<number, { minX: number; maxX: number; bandY: number }>();
+
+  for (const mark of marks) {
+    let cy: number;
+    let left: number;
+    let right: number;
+
+    if (mark.type === 'point') {
+      const pm = mark as PointMark;
+      cy = pm.cy;
+      left = pm.cx - pm.r;
+      right = pm.cx + pm.r;
+    } else if (mark.type === 'rect') {
+      const rm = mark as RectMark;
+      cy = rm.y + rm.height / 2;
+      left = rm.x;
+      right = rm.x + rm.width;
+    } else {
+      continue;
+    }
+
+    // Round cy to group marks on the same band
+    const key = Math.round(cy);
+    const existing = rows.get(key);
+    if (existing) {
+      existing.minX = Math.min(existing.minX, left);
+      existing.maxX = Math.max(existing.maxX, right);
+    } else {
+      rows.set(key, { minX: left, maxX: right, bandY: cy });
+    }
+  }
+
+  // Get bandwidth from the band scale
+  const bandScale = scales.y!.scale as { bandwidth?: () => number };
+  const bandwidth = bandScale.bandwidth?.() ?? 0;
+  if (bandwidth === 0) return [];
+
+  const obstacles: Rect[] = [];
+  for (const { minX, maxX, bandY } of rows.values()) {
+    obstacles.push({
+      x: minX,
+      y: bandY - bandwidth / 2,
+      width: maxX - minX,
+      height: bandwidth,
+    });
+  }
+
+  return obstacles;
+}
+
+// ---------------------------------------------------------------------------
+// Renderer key dispatch
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve the renderer key from mark type, encoding, and mark definition.
+ *
+ * - 'bar' -> 'bar' (horizontal) or 'bar:vertical' based on encoding axis types
+ * - 'arc' -> 'arc' (pie) or 'arc:donut' based on innerRadius
+ * - All other mark types pass through unchanged
+ */
+export function resolveRendererKey(
+  markType: string,
+  encoding: Partial<Encoding>,
+  markDef: Partial<MarkDef>,
+): string {
+  if (markType === 'bar') {
+    const xType = encoding.x?.type;
+    const yType = encoding.y?.type;
+    const isVertical =
+      (xType === 'nominal' || xType === 'ordinal' || xType === 'temporal') &&
+      yType === 'quantitative';
+    if (isVertical) {
+      return 'bar:vertical';
+    }
+  } else if (markType === 'arc') {
+    const innerRadius = markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      return 'arc:donut';
+    }
+  }
+  return markType;
+}
+
+// ---------------------------------------------------------------------------
+// Animation index assignment
+// ---------------------------------------------------------------------------
+
+/** Extract the primary quantitative value from a mark for value-based stagger ordering. */
+function getMarkPrimaryValue(mark: Mark): number {
+  switch (mark.type) {
+    case 'rect':
+      return mark.height; // bar height is the primary value encoding
+    case 'point':
+      return mark.cy; // y position for scatter
+    case 'arc':
+      return mark.endAngle - mark.startAngle; // arc angle extent
+    case 'line':
+    case 'area':
+      return 0; // series marks don't have individual values
+    default:
+      return 0;
+  }
+}
+
+/**
+ * Assign animation indices to marks for stagger ordering.
+ *
+ * Two phases:
+ * 1. Value-based stagger: sorts marks by primary value, assigns sequential indices.
+ *    Skips stacked rects since they get group-based indices in phase 2.
+ * 2. Stack-based stagger: groups marks by stackGroup, assigns the same index to
+ *    all segments in a group, and computes stackPos (segment position: 0, 1, 2...).
+ *    This intentionally overwrites any value-based indices for stacked marks.
+ */
+export function assignAnimationIndices(
+  marks: Mark[],
+  animation: ResolvedAnimation | undefined,
+): void {
+  if (!animation?.enabled) return;
+
+  // Phase 1: Value-based stagger ordering. Skip stacked rects
+  // since they get group-based indices below (avoids wasted work that gets overwritten).
+  if (animation.staggerOrder === 'value') {
+    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
+    indexed.sort((a, b) => {
+      const av = getMarkPrimaryValue(a.mark);
+      const bv = getMarkPrimaryValue(b.mark);
+      return av - bv;
+    });
+    for (let i = 0; i < indexed.length; i++) {
+      const m = indexed[i].mark;
+      if (m.type === 'rect' && (m as RectMark).stackGroup) continue;
+      m.animationIndex = i;
+    }
+  }
+
+  // Phase 2: For stacked bars/columns, assign the same animationIndex to all segments
+  // sharing a stackGroup so they animate as one contiguous bar per category.
+  // Also compute stackPos (segment position within each group: 0, 1, 2...)
+  // so the renderer can chain segment animations sequentially.
+  const groupIndexMap = new Map<string, number>();
+  const groupStackPos = new Map<string, number>();
+  let nextGroupIndex = 0;
+  for (const mark of marks) {
+    if (mark.type === 'rect' && (mark as RectMark).stackGroup) {
+      const rect = mark as RectMark;
+      const group = rect.stackGroup!;
+      if (!groupIndexMap.has(group)) {
+        groupIndexMap.set(group, nextGroupIndex++);
+      }
+      rect.animationIndex = groupIndexMap.get(group)!;
+      const pos = groupStackPos.get(group) ?? 0;
+      rect.stackPos = pos;
+      groupStackPos.set(group, pos + 1);
+    }
+  }
+}