@opendata-ai/openchart-engine 7.2.4 → 7.4.0

package/src/charts/bar/compute.ts

@@ -17,7 +17,7 @@ import type {
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { isGradientDef } from '@opendata-ai/openchart-core';
+import { isGradientDef, NARROW_VIEWPORT_MAX } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -54,6 +54,16 @@ function orientGradientForHorizontalBar(grad: GradientDef): GradientDef {
 
 const MIN_BAR_WIDTH = 1;
 
+/**
+ * Readable floor (px) for a single grouped-bar thickness. Value labels render at
+ * fontSize 10 with ~12px line height; below this a bar is thinner than its own
+ * label and the chart reads as stripes (observed on iOS at 375-430px). When
+ * grouped sub-bars would fall under this, we reclaim the band scale's reserved
+ * inter-category whitespace (step - bandwidth) before letting bars shrink,
+ * trading padding for legibility rather than inventing extra height.
+ */
+const MIN_GROUPED_BAR_THICKNESS = 8;
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -70,6 +80,7 @@ export function computeBarMarks(
   scales: ResolvedScales,
   _chartArea: Rect,
   _strategy: LayoutStrategy,
+  containerWidth: number,
 ): RectMark[] {
   const encoding = spec.encoding as Encoding;
   const xChannel = encoding.x;
@@ -144,6 +155,7 @@ export function computeBarMarks(
           bandwidth,
           baseline,
           scales,
+          containerWidth,
         );
       } else {
         const stackMode =
@@ -267,6 +279,7 @@ function computeGroupedBars(
   bandwidth: number,
   baseline: number,
   scales: ResolvedScales,
+  containerWidth: number,
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -282,9 +295,36 @@ function computeGroupedBars(
   const groupCount = groupIndexMap.size;
   if (groupCount === 0) return marks;
 
-  // Subdivide the band height by group count with a small gap
+  // Subdivide the band height by group count with a small gap.
   const gap = Math.min(1, bandwidth * 0.05);
-  const subBandHeight = Math.max((bandwidth - gap * (groupCount - 1)) / groupCount, MIN_BAR_WIDTH);
+  let groupHeight = bandwidth;
+  let subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+
+  // At tight bandwidths sub-bars fall below the readable floor and read as
+  // stripes. The band scale reserves whitespace between categories (step -
+  // bandwidth); reclaim it by growing the group height toward the full step
+  // before letting bars shrink. Bars stay centered in the band so the widened
+  // group doesn't touch its neighbors. A one-pixel residual keeps adjacent
+  // categories visually separable even at full reclaim.
+  //
+  // Gated to narrow containers (< NARROW_VIEWPORT_MAX): the fix targets phones
+  // where this was observed. Gating on the container width (not the derived plot
+  // width) keeps desktop embeds pixel-identical even when a wide container's
+  // left gutter shrinks the plot below 500px.
+  const step = typeof yScale.step === 'function' ? yScale.step() : bandwidth;
+  const maxGroupHeight = Math.max(bandwidth, step - MIN_BAR_WIDTH);
+  if (
+    containerWidth < NARROW_VIEWPORT_MAX &&
+    subBandHeight < MIN_GROUPED_BAR_THICKNESS &&
+    maxGroupHeight > bandwidth
+  ) {
+    const needed = MIN_GROUPED_BAR_THICKNESS * groupCount + gap * (groupCount - 1);
+    groupHeight = Math.min(Math.max(groupHeight, needed), maxGroupHeight);
+    subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+  }
+  subBandHeight = Math.max(subBandHeight, MIN_BAR_WIDTH);
+  // Center the (possibly widened) group within the band.
+  const groupOffset = (bandwidth - groupHeight) / 2;
 
   for (const [category, rows] of categoryGroups) {
     const bandY = yScale(category);
@@ -299,7 +339,7 @@ function computeGroupedBars(
       const color = getColor(scales, groupKey);
       const xPos = value >= 0 ? baseline : xScale(value);
       const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
-      const subY = bandY + groupIndex * (subBandHeight + gap);
+      const subY = bandY + groupOffset + groupIndex * (subBandHeight + gap);
 
       const aria: MarkAria = {
         label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,

package/src/charts/bar/index.ts

@@ -13,8 +13,15 @@ import { computeBarLabels } from './labels';
 // Bar chart renderer
 // ---------------------------------------------------------------------------
 
-export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computeBarMarks(spec, scales, chartArea, strategy);
+export const barRenderer: ChartRenderer = (
+  spec,
+  scales,
+  chartArea,
+  strategy,
+  theme,
+  containerWidth,
+) => {
+  const marks = computeBarMarks(spec, scales, chartArea, strategy, containerWidth);
 
   // Compute and attach value labels (respects spec.labels.density)
   const valueField =

package/src/charts/bar/labels.ts

@@ -5,8 +5,10 @@
  * if the bar is wide enough, or outside (to the right) otherwise.
  *
  * Respects the spec's label density setting:
- * - 'all': show every label, skip collision detection
- * - 'auto': existing behavior (collision detection)
+ * - 'all': consider every bar's label (no density pre-filter), but still run
+ *   collision resolution so colliding losers are hidden rather than drawn on
+ *   top of each other. Composes with the stacked-segment pre-hide pass below.
+ * - 'auto': existing behavior (density pre-filter + collision detection)
  * - 'endpoints': first and last bars only
  * - 'none': return empty array
  */
@@ -106,6 +108,10 @@ export function computeBarLabels(
   // Track whether each candidate fits within its stacked segment.
   // Non-stacked bars are always considered fitting (undefined = fits).
   const fitsInSegment: boolean[] = [];
+  // The display anchor x (start/end/middle reference point) for each candidate.
+  // Candidates carry the box's LEFT edge for collision math; on emit we map any
+  // horizontal nudge back onto this display anchor so textAnchor stays honored.
+  const displayAnchorX: number[] = [];
 
   const formatter = buildD3Formatter(labelFormat);
 
@@ -183,17 +189,32 @@ export function computeBarLabels(
       }
     }
 
-    // anchorY = bar vertical center. With dominant-baseline: central,
-    // SVG places the text center at this y coordinate.
-    const anchorY = mark.y + mark.height / 2;
+    // Collision math works in top-left-edge space so the AABB
+    // (rect = { x: anchorX, y: anchorY, width, height }) matches the label's
+    // real footprint. The renderer anchors text by textAnchor (start/end/
+    // middle) and centers it vertically (dominant-baseline: central), so we
+    // convert the display anchor to the box's top-left corner here and shift
+    // back on emit. Feeding the display anchor directly desynced the collision
+    // box from the drawn text (by width for end/middle, by textHeight/2
+    // vertically), letting adjacent bar labels pass the overlap check while
+    // visibly colliding.
+    const centerY = mark.y + mark.height / 2;
+    const anchorY = centerY - textHeight / 2;
+    const leftEdgeX =
+      textAnchor === 'end'
+        ? anchorX - textWidth
+        : textAnchor === 'middle'
+          ? anchorX - textWidth / 2
+          : anchorX;
 
     // Check if label text fits within the stacked segment
     const fits = !(isStacked && textWidth > mark.width - 2 * LABEL_PADDING);
 
+    displayAnchorX.push(anchorX);
     fitsInSegment.push(fits);
     candidates.push({
       text: valuePart,
-      anchorX,
+      anchorX: leftEdgeX,
       anchorY,
       width: textWidth,
       height: textHeight,
@@ -212,46 +233,76 @@ export function computeBarLabels(
 
   if (candidates.length === 0) return [];
 
-  // 'all': skip collision detection, mark everything visible
-  // (but hide labels that don't fit in their stacked segment)
-  if (density === 'all') {
-    return candidates.map((c, i) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: fitsInSegment[i] !== false,
-    }));
-  }
-
-  // For 'auto' and 'endpoints': pre-mark candidates that don't fit their
-  // stacked segment as hidden before running collision detection.
+  // Every density that reaches here ('all' and 'auto') pre-hides candidates
+  // that don't fit their stacked segment, then runs collision resolution.
+  // 'all' just skips the density pre-filter above so every mark is a
+  // candidate; colliding losers are still hidden by resolveCollisions.
   const fittingCandidates: LabelCandidate[] = [];
   const unfittingIndices = new Set<number>();
   for (let i = 0; i < candidates.length; i++) {
     if (fitsInSegment[i] === false) {
       unfittingIndices.add(i);
     } else {
-      fittingCandidates.push(candidates[i]);
+      // Carry the original candidate index so we can zip the resolved output
+      // back to it regardless of any reordering resolveCollisions performs.
+      fittingCandidates.push({ ...candidates[i], index: i });
     }
   }
 
-  const resolved = resolveCollisions(fittingCandidates);
+  // resolveCollisions may reorder its output (it sorts by priority), so key the
+  // result by the source index we carried rather than by position.
+  const resolvedByOrig = new Map<number, ResolvedLabel>();
+  for (const r of resolveCollisions(fittingCandidates)) {
+    if (r.index !== undefined) resolvedByOrig.set(r.index, r);
+  }
+
+  // Shift resolved y back from top-edge space to the vertical center that the
+  // central-baseline renderer expects (see anchorY derivation above).
+  const halfHeight = FONT_SIZE * 1.2 * 0.5;
 
   // Re-insert hidden labels for candidates that didn't fit, preserving order
   const results: ResolvedLabel[] = [];
-  let resolvedIdx = 0;
   for (let i = 0; i < candidates.length; i++) {
     if (unfittingIndices.has(i)) {
       results.push({
         text: candidates[i].text,
-        x: candidates[i].anchorX,
-        y: candidates[i].anchorY,
+        x: displayAnchorX[i],
+        y: candidates[i].anchorY + halfHeight,
         style: candidates[i].style,
         visible: false,
       });
     } else {
-      results.push(resolved[resolvedIdx++]);
+      const r = resolvedByOrig.get(i);
+      if (!r) continue;
+      // Collision math ran in left-edge/top space; renderers draw at the display
+      // anchor with central baseline. The inverse mapping shifts every point by
+      // dx (left-edge -> display anchor) on x and +halfHeight on y. Apply it to
+      // the label AND both connector endpoints, or the leader line for an
+      // end/middle-anchored label points to the box's top-left corner (up to
+      // textWidth + halfHeight away from the text it's calling out).
+      const dx = displayAnchorX[i] - candidates[i].anchorX;
+      // Drop the internal zip index so it doesn't leak into the label output.
+      const { index: _index, ...rest } = r;
+      results.push({
+        ...rest,
+        x: r.x + dx,
+        y: r.y + halfHeight,
+        connector: r.connector
+          ? {
+              ...r.connector,
+              from: {
+                ...r.connector.from,
+                x: r.connector.from.x + dx,
+                y: r.connector.from.y + halfHeight,
+              },
+              to: {
+                ...r.connector.to,
+                x: r.connector.to.x + dx,
+                y: r.connector.to.y + halfHeight,
+              },
+            }
+          : undefined,
+      });
     }
   }
 

package/src/charts/column/labels.ts

@@ -5,8 +5,10 @@
  * or below (for negative values).
  *
  * Respects the spec's label density setting:
- * - 'all': show every label, skip collision detection
- * - 'auto': existing behavior (collision detection)
+ * - 'all': consider every column's label (no density pre-filter), but still
+ *   run collision resolution so colliding losers are hidden rather than drawn
+ *   on top of each other
+ * - 'auto': existing behavior (density pre-filter + collision detection)
  * - 'endpoints': first and last columns only
  * - 'none': return empty array
  */
@@ -22,6 +24,7 @@ import {
   estimateTextWidth,
   getRepresentativeColor,
   resolveCollisions,
+  textAscent,
 } from '@opendata-ai/openchart-core';
 import { filterByDensity } from '../_shared/density-filter';
 import { formatLabelValue } from '../_shared/format-label-value';
@@ -97,7 +100,8 @@ export function computeColumnLabels(
 
     // anchorY is the TOP of the label bounding box so the collision system's
     // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
-    // correct. dominantBaseline 'hanging' anchors the glyph top at anchorY.
+    // correct. Collision math stays in top-coordinate space; the ascent shift
+    // to the alphabetic baseline is applied only at emission (see below).
     //   Positive bar: top = barTop - LABEL_OFFSET_Y - textHeight, text floats above
     //   Negative bar: top = barBottom + LABEL_OFFSET_Y, text hangs below
     const anchorX = mark.x + mark.width / 2;
@@ -119,23 +123,32 @@ export function computeColumnLabels(
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
-        dominantBaseline: 'hanging',
       },
     });
   }
 
   if (candidates.length === 0) return [];
 
-  // 'all': skip collision detection, mark everything visible
-  if (density === 'all') {
-    return candidates.map((c) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: true,
-    }));
-  }
-
-  return resolveCollisions(candidates);
+  // Collision resolution keeps y in top-edge coordinates; renderers position
+  // text on the alphabetic baseline, so shift every emitted y down by the
+  // ascent instead of relying on dominant-baseline:hanging (WebKit computes
+  // hanging from different font metrics than Blink, clipping labels on iOS).
+  const ascent = textAscent(FONT_SIZE);
+
+  // Every density that reaches here ('all' and 'auto') runs collision
+  // resolution. 'all' just skips the density pre-filter above so every mark is
+  // a candidate; colliding losers are still hidden by resolveCollisions rather
+  // than stacked on top of each other.
+  return resolveCollisions(candidates).map((label) => ({
+    ...label,
+    y: label.y + ascent,
+    // The connector originates at the label; shift its start to the baseline
+    // too so the leader stays glued to the shifted text.
+    connector: label.connector
+      ? {
+          ...label.connector,
+          from: { ...label.connector.from, y: label.connector.from.y + ascent },
+        }
+      : undefined,
+  }));
 }

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/charts/registry.ts

@@ -19,8 +19,9 @@ import type { ResolvedScales } from '../layout/scales';
  * A chart renderer function.
  *
  * Takes a normalized spec, resolved scales, chart area, layout strategy,
- * and the resolved theme for theme-aware styling (e.g. label colors).
- * Returns an array of marks to render.
+ * the resolved theme for theme-aware styling (e.g. label colors), and the
+ * full container width (used by geometry gates that must key off the
+ * container, not the derived plot width). Returns an array of marks to render.
  */
 export type ChartRenderer = (
   spec: NormalizedChartSpec,
@@ -28,6 +29,7 @@ export type ChartRenderer = (
   chartArea: Rect,
   strategy: LayoutStrategy,
   theme: ResolvedTheme,
+  containerWidth: number,
 ) => 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;