@opendata-ai/openchart-engine 7.2.3 → 7.3.0

package/src/annotations/resolve-text.ts

@@ -3,13 +3,12 @@
  * optional callout connector to the data point.
  */
 
-import {
-  estimateTextWidth,
-  type Rect,
-  type ResolvedAnnotation,
-  type ResolvedLabel,
-  type TextAnnotation,
-  type TextStyle,
+import type {
+  Rect,
+  ResolvedAnnotation,
+  ResolvedLabel,
+  TextAnnotation,
+  TextStyle,
 } from '@opendata-ai/openchart-core';
 import type { ResolvedScales } from '../layout/scales';
 import {
@@ -27,7 +26,15 @@ import {
   SUBTITLE_FONT_SIZE_RATIO,
   SUBTITLE_GAP,
 } from './constants';
-import { applyOffset, computeAnchorOffset, computeConnectorOrigin } from './geometry';
+import {
+  type AnnotationMeasureTextFn,
+  applyOffset,
+  computeAnchorOffset,
+  computeConnectorOrigin,
+  computeTextBlockBounds,
+  heuristicMeasure,
+  unionRects,
+} from './geometry';
 import { resolvePosition } from './position';
 
 /** Horizontal gap between the drop-line and the label text. */
@@ -59,6 +66,7 @@ export function resolveTextAnnotation(
   scales: ResolvedScales,
   chartArea: Rect,
   isDark: boolean,
+  measure: AnnotationMeasureTextFn = heuristicMeasure,
 ): ResolvedAnnotation | null {
   const px = resolvePosition(annotation.x, scales.x);
   const py = resolvePosition(annotation.y, scales.y);
@@ -78,7 +86,23 @@ export function resolveTextAnnotation(
   // label sitting flush beside it. Auto-flips to the opposite side if the
   // chosen side would overflow the chart area.
   if (annotation.connector === 'drop-line') {
-    return resolveDropLineAnnotation(annotation, px, py, chartArea, labelStyle, defaultTextFill);
+    return resolveDropLineAnnotation(
+      annotation,
+      px,
+      py,
+      chartArea,
+      labelStyle,
+      defaultTextFill,
+      measure,
+    );
+  }
+
+  // Multi-line non-drop-line: engine sets textAnchor to 'middle' so bounds
+  // and rendering derive from the same anchor (previously the renderer
+  // forced this override, causing bounds to lie).
+  const isMultiLine = annotation.text.includes('\n');
+  if (isMultiLine) {
+    labelStyle.textAnchor = 'middle';
   }
 
   // Compute position from anchor direction + user offset
@@ -130,6 +154,8 @@ export function resolveTextAnnotation(
       ? { x: adjustedToRaw.x - (cdx / dist) * GAP, y: adjustedToRaw.y - (cdy / dist) * GAP }
       : adjustedToRaw;
 
+  const labelBounds = computeTextBlockBounds(labelX, labelY, annotation.text, labelStyle, measure);
+
   const label: ResolvedLabel = {
     text: annotation.text,
     x: labelX,
@@ -147,6 +173,7 @@ export function resolveTextAnnotation(
       : undefined,
     background: annotation.background,
     halo: annotation.halo,
+    bounds: labelBounds,
   };
 
   // Resolve dot marker. Uses the connector's "to" endpoint coordinates
@@ -170,6 +197,7 @@ export function resolveTextAnnotation(
   // Resolve subtitle. Positioned below the primary text block by
   // (lineHeight * primaryLineCount * fontSize) + gap.
   let subtitle: ResolvedAnnotation['subtitle'] | undefined;
+  let annotationBounds: Rect = labelBounds;
   if (annotation.subtitle) {
     const primaryLineCount = annotation.text.split('\n').length;
     const subtitleFontSize = Math.round(fontSize * SUBTITLE_FONT_SIZE_RATIO);
@@ -187,6 +215,14 @@ export function resolveTextAnnotation(
       y: subtitleY,
       style: subtitleStyle,
     };
+    const subtitleBounds = computeTextBlockBounds(
+      labelX,
+      subtitleY,
+      annotation.subtitle,
+      subtitleStyle,
+      measure,
+    );
+    annotationBounds = unionRects(labelBounds, subtitleBounds);
   }
 
   return {
@@ -199,6 +235,7 @@ export function resolveTextAnnotation(
     zIndex: annotation.zIndex,
     dot,
     subtitle,
+    bounds: annotationBounds,
   };
 }
 
@@ -214,13 +251,14 @@ function resolveDropLineAnnotation(
   chartArea: Rect,
   labelStyle: TextStyle,
   defaultTextFill: string,
+  measure: AnnotationMeasureTextFn = heuristicMeasure,
 ): ResolvedAnnotation {
   const fontSize = annotation.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
   const fontWeight = annotation.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
   const lines = annotation.text.split('\n');
   const estimatedWidth = Math.max(
     0,
-    ...lines.map((line) => estimateTextWidth(line, fontSize, fontWeight)),
+    ...lines.map((line) => measure(line, { fontSize, fontWeight })),
   );
 
   // Pick initial side from anchor; default to 'left' (label sits to the left
@@ -261,6 +299,14 @@ function resolveDropLineAnnotation(
   const from = { x: px, y: labelTopY - DROP_LINE_TOP_GAP };
   const to = { x: px, y: py - DROP_LINE_BOTTOM_GAP };
 
+  const labelBounds = computeTextBlockBounds(
+    labelX,
+    labelBaselineY,
+    annotation.text,
+    resolvedStyle,
+    measure,
+  );
+
   const label: ResolvedLabel = {
     text: annotation.text,
     x: labelX,
@@ -276,6 +322,7 @@ function resolveDropLineAnnotation(
     },
     background: annotation.background,
     halo: annotation.halo,
+    bounds: labelBounds,
   };
 
   return {
@@ -286,5 +333,6 @@ function resolveDropLineAnnotation(
     fill: annotation.fill,
     opacity: annotation.opacity,
     zIndex: annotation.zIndex,
+    bounds: labelBounds,
   };
 }

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

@@ -16,8 +16,8 @@ describe('computeMarkObstacles', () => {
     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 });
+    expect(result[0]).toEqual({ x: 10, y: 20, width: 50, height: 30, kind: 'mark' });
+    expect(result[1]).toEqual({ x: 80, y: 20, width: 50, height: 30, kind: 'mark' });
   });
 
   it('returns point mark bounds as bounding box from cx/cy/r', () => {
@@ -25,7 +25,7 @@ describe('computeMarkObstacles', () => {
     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 });
+    expect(result[0]).toEqual({ x: 90, y: 90, width: 20, height: 20, kind: 'mark' });
   });
 
   it('returns grouped row obstacles for band-scale charts', () => {

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

@@ -490,6 +490,73 @@ describe('computeBarMarks', () => {
     });
   });
 
+  describe('x-domain excludes zero', () => {
+    it('simple bars anchor at the domain minimum, not xScale(0)', () => {
+      const spec = makeSimpleBarSpec();
+      (spec.encoding.x as { scale?: { domain: number[] } }).scale = { domain: [65, 95] };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const left = xScale(65);
+
+      // Every bar starts at the plot-area left edge (xScale of the domain min),
+      // not at the far-left extrapolation of xScale(0).
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(left, 5);
+        // Bars never bleed left of the plot area into the y-axis label gutter.
+        expect(mark.x).toBeGreaterThanOrEqual(chartArea.x);
+      }
+      // Guard against the old behavior: xScale(0) lands well left of the plot area.
+      expect(xScale(0)).toBeLessThan(chartArea.x);
+    });
+
+    it('grouped bars anchor at the domain minimum, not xScale(0)', () => {
+      const spec = makeGroupedBarSpec();
+      (spec.encoding.x as { scale?: { domain: number[] } }).scale = { domain: [65, 95] };
+      // Lift values into the [65, 95] window so widths stay positive.
+      spec.data = spec.data.map((d) => ({ ...d, value: 70 + (d.value as number) / 10 }));
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const left = xScale(65);
+
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(left, 5);
+        expect(mark.x).toBeGreaterThanOrEqual(chartArea.x);
+      }
+    });
+  });
+
+  describe('x-domain includes zero (no regression)', () => {
+    it('simple bars still anchor at xScale(0) for a default [0, max] domain', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(xScale(0), 5);
+      }
+    });
+
+    it('diverging bars (domain crosses zero) still anchor at xScale(0)', () => {
+      const spec = makeNegativeBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const zero = xScale(0);
+
+      const growth = marks.find((m) => m.aria.label.includes('Growth'))!;
+      const decline = marks.find((m) => m.aria.label.includes('Decline'))!;
+      // Positive bar starts at zero; negative bar ends at zero.
+      expect(growth.x).toBeCloseTo(zero, 5);
+      expect(decline.x + decline.width).toBeCloseTo(zero, 5);
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {

package/src/charts/bar/compute.ts

@@ -88,7 +88,14 @@ export function computeBarMarks(
   }
 
   const bandwidth = yScale.bandwidth();
-  const baseline = xScale(0);
+  // Baseline = pixel x where the bar's left edge anchors. When the x-domain
+  // includes zero (the common case), this is xScale(0). When the domain
+  // excludes zero (explicit non-zero domain or scale.zero: false), xScale(0)
+  // would extrapolate outside the plot area and overrun the y-axis labels, so
+  // anchor to the domain minimum (the plot-area left edge) instead.
+  const xDomain = xScale.domain() as [number, number];
+  const xIncludesZero = xDomain[0] <= 0 && xDomain[1] >= 0;
+  const baseline = xIncludesZero ? xScale(0) : xScale(xDomain[0]);
   const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
   const conditionalColor =
     encoding.color && isConditionalValueDef(encoding.color)

package/src/charts/post-process.ts

@@ -5,14 +5,17 @@
  */
 
 import type {
+  AreaMark,
   Encoding,
+  LineMark,
   Mark,
   MarkDef,
   PointMark,
-  Rect,
   RectMark,
   ResolvedAnimation,
 } from '@opendata-ai/openchart-core';
+import type { PlacementObstacle } from '../annotations/placement';
+import { sampleAreaObstacles, samplePolylineObstacles } from '../annotations/placement';
 import type { ResolvedScales } from '../layout/scales';
 
 // ---------------------------------------------------------------------------
@@ -28,18 +31,17 @@ import type { ResolvedScales } from '../layout/scales';
  * 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[] {
+export function computeMarkObstacles(marks: Mark[], scales: ResolvedScales): PlacementObstacle[] {
   // 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[] = [];
+  const obstacles: PlacementObstacle[] = [];
   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 });
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height, kind: 'mark' });
     } else if (mark.type === 'point') {
       const pm = mark as PointMark;
       obstacles.push({
@@ -47,14 +49,25 @@ export function computeMarkObstacles(marks: Mark[], scales: ResolvedScales): Rec
         y: pm.cy - pm.r,
         width: pm.r * 2,
         height: pm.r * 2,
+        kind: 'mark',
       });
+    } else if (mark.type === 'line') {
+      const lm = mark as LineMark;
+      if (lm.points.length > 0) {
+        obstacles.push(...samplePolylineObstacles(lm.points, 'line'));
+      }
+    } else if (mark.type === 'area') {
+      const am = mark as AreaMark;
+      if (am.topPoints.length > 0) {
+        obstacles.push(...sampleAreaObstacles(am.topPoints, am.bottomPoints));
+      }
     }
   }
   return obstacles;
 }
 
 /** Group band-scale marks by row, returning one obstacle per band. */
-function computeBandRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
+function computeBandRowObstacles(marks: Mark[], scales: ResolvedScales): PlacementObstacle[] {
   const rows = new Map<number, { minX: number; maxX: number; bandY: number }>();
 
   for (const mark of marks) {
@@ -92,13 +105,14 @@ function computeBandRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[]
   const bandwidth = bandScale.bandwidth?.() ?? 0;
   if (bandwidth === 0) return [];
 
-  const obstacles: Rect[] = [];
+  const obstacles: PlacementObstacle[] = [];
   for (const { minX, maxX, bandY } of rows.values()) {
     obstacles.push({
       x: minX,
       y: bandY - bandwidth / 2,
       width: maxX - minX,
       height: bandwidth,
+      kind: 'mark',
     });
   }
 

package/src/compile/layer.ts

@@ -9,8 +9,10 @@ import type {
 } from '@opendata-ai/openchart-core';
 import {
   AXIS_TITLE_TRAILING_PAD,
+  abbreviateNumber,
   BREAKPOINT_COMPACT_MAX,
   estimateTextWidth,
+  formatNumber,
   getAxisTitleOffset,
   resolveTheme,
   TICK_LABEL_OFFSET,
@@ -19,6 +21,8 @@ import { format as d3Format } from 'd3-format';
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, area as d3area, line as d3line } from 'd3-shape';
 import { flattenLayers } from '../compiler/index';
+import type { MeasureFn } from '../layout/plan';
+import { createMeasureFn } from '../layout/plan';
 
 type ChartCompiler = (spec: unknown, options: CompileOptions) => ChartLayout;
 
@@ -100,18 +104,21 @@ function estimateYAxisLabelWidth(
   data: DataRow[],
   encoding: Encoding | undefined,
   baseFontSize: number,
+  measure?: MeasureFn,
 ): number {
   if (!encoding?.y) return 40;
   const yEnc = encoding.y;
   const yField = yEnc.field;
   if (!yField) return 40;
 
+  const m = measure ?? estimateTextWidth;
+
   const yType = yEnc.type;
   if (yType === 'nominal' || yType === 'ordinal') {
     let maxWidth = 0;
     for (const row of data) {
       const label = String(row[yField] ?? '');
-      const w = estimateTextWidth(label, baseFontSize, 400);
+      const w = m(label, baseFontSize, 400);
       if (w > maxWidth) maxWidth = w;
     }
     return maxWidth > 0 ? maxWidth + 10 : 40;
@@ -134,16 +141,13 @@ function estimateYAxisLabelWidth(
       sampleLabel = String(maxAbsVal);
     }
   } else {
-    if (maxAbsVal >= 1_000_000_000) sampleLabel = '1.5B';
-    else if (maxAbsVal >= 1_000_000) sampleLabel = '1.5M';
-    else if (maxAbsVal >= 1_000) sampleLabel = '1.5K';
-    else if (maxAbsVal >= 100) sampleLabel = '100';
-    else if (maxAbsVal >= 10) sampleLabel = '10';
-    else sampleLabel = '0.0';
+    // Use the same formatting as tick labels instead of hardcoded magnitude guesses
+    sampleLabel =
+      Math.abs(maxAbsVal) >= 1000 ? abbreviateNumber(maxAbsVal) : formatNumber(maxAbsVal);
   }
   const hasNeg = data.some((r) => Number(r[yField]) < 0);
   const labelEst = (hasNeg ? '-' : '') + sampleLabel;
-  return estimateTextWidth(labelEst, baseFontSize, 400) + 10;
+  return m(labelEst, baseFontSize, 400) + 10;
 }
 
 function compileLayerIndependent(
@@ -173,7 +177,13 @@ function compileLayerIndependent(
 
   const theme = resolveTheme(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
-  const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
+  const measureFn = createMeasureFn(options.measureText);
+  const rightAxisWidth = estimateYAxisLabelWidth(
+    leaf1.data,
+    leaf1.encoding,
+    axisFontSize,
+    measureFn,
+  );
   const yAxisConfig = leaf1.encoding?.y?.axis || undefined;
   const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
@@ -227,6 +237,18 @@ function compileLayerIndependent(
           x: layout0.area.x + layout0.area.width,
           y: layout0.area.y + layout0.area.height,
         },
+        ...(layout1.axes.y.label
+          ? {
+              titlePosition: {
+                x:
+                  layout0.area.x +
+                  layout0.area.width +
+                  getAxisTitleOffset(layout0.dimensions.width),
+                y: layout0.area.y + layout0.area.height / 2,
+                angle: 90,
+              },
+            }
+          : {}),
       }
     : undefined;