@opendata-ai/openchart-engine 6.13.0 → 6.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.13.0",
+  "version": "6.15.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -45,7 +45,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.13.0",
+    "@opendata-ai/openchart-core": "6.15.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/encoding-sugar.test.ts

@@ -234,11 +234,12 @@ describe('categorical sort', () => {
     seriesStyles: {},
   });
 
-  it('sorts domain ascending by default (undefined sort)', () => {
+  it('preserves data order by default (undefined sort)', () => {
     const spec = makeBarSpec(undefined);
     const scales = computeScales(spec, chartArea, spec.data);
     const domain = (scales.y!.scale as ScaleBand<string>).domain();
-    expect(domain).toEqual(['Apple', 'Banana', 'Cherry']);
+    // Data order: Banana, Apple, Cherry
+    expect(domain).toEqual(['Banana', 'Apple', 'Cherry']);
   });
 
   it('sorts domain ascending when sort is "ascending"', () => {

package/src/charts/bar/index.ts

@@ -17,12 +17,15 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
+  const valueField =
+    spec.encoding?.x && 'field' in spec.encoding.x ? spec.encoding.x.field : undefined;
   const labels = computeBarLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
+    valueField,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -18,8 +18,10 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
+  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
+  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
@@ -28,6 +30,12 @@ import {
 // Helpers
 // ---------------------------------------------------------------------------
 
+/** Format a bar value for display (abbreviate large numbers). */
+function formatBarValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+
 /** Suffix multipliers mirroring core's abbreviateNumber output (K/M/B/T). */
 const SUFFIX_MULTIPLIERS: Record<string, number> = {
   K: 1_000,
@@ -90,6 +98,7 @@ export function computeBarLabels(
   density: LabelDensity = 'auto',
   labelFormat?: string,
   labelPrefix?: string,
+  valueField?: string,
 ): ResolvedLabel[] {
   // 'none': no labels at all
   if (density === 'none') return [];
@@ -106,19 +115,28 @@ export function computeBarLabels(
   const formatter = buildD3Formatter(labelFormat);
 
   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 = parseDisplayNumber(rawValue);
-      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 = formatBarValue(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 = parseDisplayNumber(rawValue);
+        valuePart = !Number.isNaN(num) ? formatter(num) : rawValue;
+      } else {
+        valuePart = rawValue;
+      }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
 

package/src/charts/column/index.ts

@@ -17,12 +17,15 @@ export const columnRenderer: ChartRenderer = (spec, scales, chartArea, strategy,
   const marks = computeColumnMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
+  const valueField =
+    spec.encoding?.y && 'field' in spec.encoding.y ? spec.encoding.y.field : undefined;
   const labels = computeColumnLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
+    valueField,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

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

@@ -74,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 }[] = [];
@@ -162,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

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/compile.ts

@@ -503,6 +503,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     },
     animation: resolvedAnimation,
     watermark,
+    measureText: options.measureText,
   };
 }
 

package/src/layout/axes.ts

@@ -38,8 +38,8 @@ import type {
 
 /** Base tick counts by axis label density. */
 const TICK_COUNTS: Record<AxisLabelDensity, number> = {
-  full: 8,
-  reduced: 5,
+  full: 10,
+  reduced: 7,
   minimal: 3,
 };
 

package/src/layout/scales.ts

@@ -141,18 +141,16 @@ function uniqueStrings(values: unknown[]): string[] {
 }
 
 /**
- * Apply sort order to categorical domain values (Vega-Lite aligned).
+ * Apply sort order to categorical domain values.
  * - 'ascending': sort alphabetically/numerically ascending
  * - 'descending': sort descending
- * - null: preserve data order (no sorting)
- * - undefined: ascending (VL default)
+ * - null | undefined: preserve data order (no sorting)
  */
 function applyCategoricalSort(
   values: string[],
   sort: 'ascending' | 'descending' | null | undefined,
 ): string[] {
-  // null means use data order
-  if (sort === null) return values;
+  if (!sort) return values;
 
   const sorted = [...values].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
   if (sort === 'descending') sorted.reverse();
@@ -194,7 +192,11 @@ function buildTimeScale(
 
   const scale = scaleTime().domain(domain).range([rangeStart, rangeEnd]);
 
-  if (channel.scale?.nice !== false) {
+  // Temporal scales default to nice: false because date data typically starts
+  // at clean boundaries and nice() rounds the domain outward, creating visible
+  // gaps (e.g. data starting 2018-01-01 gets rounded to 2017-01-01).
+  // Users can opt in with scale: { nice: true }.
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -215,7 +217,8 @@ function buildUtcScale(
 
   const scale = scaleUtc().domain(domain).range([rangeStart, rangeEnd]);
 
-  if (channel.scale?.nice !== false) {
+  // Temporal scales default to nice: false (see buildTimeScale comment).
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -251,7 +254,7 @@ function buildLinearScale(
 
   const scale = scaleLinear().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
 
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -278,7 +281,7 @@ function buildLogScale(
   if (channel.scale?.base !== undefined) {
     scale.base(channel.scale.base);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -313,7 +316,7 @@ function buildPowScale(
   if (channel.scale?.exponent !== undefined) {
     scale.exponent(channel.scale.exponent);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -345,7 +348,7 @@ function buildSqrtScale(
 
   const scale = scaleSqrt().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
 
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -380,7 +383,7 @@ function buildSymlogScale(
   if (channel.scale?.constant !== undefined) {
     scale.constant(channel.scale.constant);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);

package/src/legend/compute.ts

@@ -219,11 +219,9 @@ export function computeLegend(
       1,
       Math.floor((maxLegendHeight - LEGEND_PADDING * 2) / (entryHeight + 4)),
     );
-    // symbolLimit overrides the space-based limit when set (minimum 1)
+    // symbolLimit overrides the space-based limit when explicitly set (minimum 1)
     const maxEntries =
-      spec.legend?.symbolLimit != null
-        ? Math.min(Math.max(1, spec.legend.symbolLimit), maxFromSpace)
-        : maxFromSpace;
+      spec.legend?.symbolLimit != null ? Math.max(1, spec.legend.symbolLimit) : maxFromSpace;
     if (entries.length > maxEntries) {
       entries = truncateEntries(entries, maxEntries);
     }

package/src/tooltips/compute.ts

@@ -84,12 +84,25 @@ function buildFields(row: DataRow, encoding: Encoding, color?: string): TooltipF
 
   const fields: TooltipField[] = [];
 
+  // Color/series field (e.g. "Source: Coal") so the user knows which series
+  if (encoding.color && 'field' in encoding.color) {
+    fields.push({
+      label: resolveLabel(encoding.color),
+      value: formatValue(
+        row[encoding.color.field],
+        encoding.color.type,
+        resolveFormat(encoding.color),
+      ),
+      color,
+    });
+  }
+
   // Y-axis value (the "main" value in most charts)
   if (encoding.y) {
     fields.push({
       label: resolveLabel(encoding.y),
       value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
-      color,
+      color: encoding.color ? undefined : color,
     });
   }
 
@@ -138,6 +151,21 @@ function getTooltipTitle(row: DataRow, encoding: Encoding): string | undefined {
     return String(row[encoding.y.field] ?? '');
   }
 
+  // For scatter/bubble (both axes quantitative), find a name-like string field
+  // in the data row that isn't already used by an encoding channel
+  if (encoding.x?.type === 'quantitative' && encoding.y?.type === 'quantitative') {
+    const encodedFields = new Set(
+      [encoding.x, encoding.y, encoding.color, encoding.size, encoding.detail]
+        .filter((ch): ch is EncodingChannel => !!ch && 'field' in ch)
+        .map((ch) => ch.field),
+    );
+    for (const [key, value] of Object.entries(row)) {
+      if (!encodedFields.has(key) && typeof value === 'string') {
+        return value;
+      }
+    }
+  }
+
   // For color-encoded series, use the series name (skip conditional defs)
   if (encoding.color && 'field' in encoding.color) {
     return String(row[encoding.color.field] ?? '');