@opendata-ai/openchart-engine 6.25.0 → 6.25.2

package/package.json

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

package/src/compile.ts

@@ -33,16 +33,21 @@ import type {
   Transform,
 } from '@opendata-ai/openchart-core';
 import {
+  AXIS_TITLE_TRAILING_PAD,
   adaptTheme,
+  BREAKPOINT_COMPACT_MAX,
   computeLabelBounds,
   estimateTextWidth,
   generateAltText,
   generateDataTable,
+  getAxisTitleOffset,
   getBreakpoint,
   getHeightClass,
   getLayoutStrategy,
   resolveTheme,
+  TICK_LABEL_OFFSET,
 } from '@opendata-ai/openchart-core';
+import { format as d3Format } from 'd3-format';
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, area as d3area, line as d3line } from 'd3-shape';
 import { computeAnnotations } from './annotations/compute';
@@ -495,7 +500,15 @@ export function compileLayer(spec: LayerSpec, options: CompileOptions): ChartLay
     seenLabels.add(entry.label);
   }
 
-  for (const leaf of leaves) {
+  // Sort leaves by zIndex for render order while preserving original indices
+  // for axis assignment. Default zIndex is the array position.
+  const indexedLeaves = leaves.map((leaf, i) => ({
+    leaf,
+    zIndex: (leaf as ChartSpec).zIndex ?? i,
+  }));
+  indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
+
+  for (const { leaf } of indexedLeaves) {
     const leafLayout = compileChart(leaf as unknown, options);
 
     allMarks.push(...leafLayout.marks);
@@ -548,18 +561,30 @@ function estimateYAxisLabelWidth(
   }
 
   // Quantitative/temporal: estimate from the largest value
+  const yAxisFormat = (encoding.y.axis as Record<string, unknown> | undefined)?.format as
+    | string
+    | undefined;
   let maxAbsVal = 0;
   for (const row of data) {
     const v = Number(row[yField]);
     if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
   }
   let sampleLabel: string;
-  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';
+  if (yAxisFormat) {
+    try {
+      const fmt = d3Format(yAxisFormat);
+      sampleLabel = fmt(maxAbsVal);
+    } catch {
+      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';
+  }
   const hasNeg = data.some((r) => Number(r[yField]) < 0);
   const labelEst = (hasNeg ? '-' : '') + sampleLabel;
   return estimateTextWidth(labelEst, baseFontSize, 400) + 10;
@@ -596,13 +621,24 @@ function compileLayerIndependent(
     );
   }
 
-  // Estimate right-axis label width to reserve margin space
+  // Estimate right-axis label width to reserve margin space.
+  // Tick labels sit at chartEdge+6 and extend rightward by their width.
+  // The rotated title sits at chartEdge+45 and extends by half the font height.
+  // These overlap spatially, so use max (not sum) to mirror the left-margin pattern.
   const theme = resolveTheme(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
   const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
-  // Add space for the rotated axis title if present (match left-axis 45px clearance)
   const hasRightAxisTitle = !!leaf1.encoding?.y?.axis?.title;
-  const rightReserve = rightAxisWidth + (hasRightAxisTitle ? 45 : 0);
+  const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
+  const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
+  const axisTitleOffset = getAxisTitleOffset(options.width);
+  const halfGlyph = Math.ceil(bodyFontSize / 2);
+  const titleExtent = hasRightAxisTitle
+    ? axisTitleOffset +
+      halfGlyph +
+      (options.width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD)
+    : 0;
+  const rightReserve = Math.max(tickExtent, titleExtent);
 
   const optionsWithReserve: CompileOptions = {
     ...options,
@@ -793,6 +829,14 @@ function compileLayerIndependent(
     }
   }
 
+  // Determine mark render order. By default, layer 0 paints first (behind),
+  // layer 1 paints second (on top). zIndex on the original leaf specs can
+  // reverse this so e.g. a line in layer 0 renders on top of bars in layer 1.
+  const z0 = leaf0.zIndex ?? 0;
+  const z1 = leaf1.zIndex ?? 1;
+  const marks =
+    z0 <= z1 ? [...adjustedMarks0, ...taggedMarks1] : [...taggedMarks1, ...adjustedMarks0];
+
   return {
     ...layout0,
     axes: {
@@ -800,7 +844,7 @@ function compileLayerIndependent(
       y: layout0.axes.y,
       y2: y2Axis,
     },
-    marks: [...adjustedMarks0, ...taggedMarks1],
+    marks,
     legend: {
       ...layout0.legend,
       entries: mergedLegendEntries,
@@ -960,6 +1004,7 @@ function buildPrimarySpec(leaves: ChartSpec[], layerSpec: LayerSpec): ChartSpec
     data: allData,
     // Layer-level chrome overrides leaf chrome
     chrome: layerSpec.chrome ?? leaves[0].chrome,
+    annotations: layerSpec.annotations ?? leaves[0].annotations,
     labels: layerSpec.labels ?? leaves[0].labels,
     legend: layerSpec.legend ?? leaves[0].legend,
     responsive: layerSpec.responsive ?? leaves[0].responsive,

package/src/layout/axes/ticks.ts

@@ -211,10 +211,11 @@ export function categoricalTicks(
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
   const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
 
-  // Band scales (bar charts) show all category labels by default.
-  // Only thin when there's an explicit tickCount override or for point/ordinal scales.
+  // Band scales show all labels at full density but thin at reduced/minimal
+  // to prevent overlap on narrow containers (e.g. 17 bars on mobile).
   let selectedValues = domain;
-  if ((resolvedScale.type !== 'band' || explicitTickCount) && domain.length > maxTicks) {
+  const shouldThinBand = resolvedScale.type === 'band' && (explicitTickCount || density !== 'full');
+  if ((resolvedScale.type !== 'band' || shouldThinBand) && domain.length > maxTicks) {
     const step = Math.ceil(domain.length / maxTicks);
     selectedValues = domain.filter((_: string, i: number) => i % step === 0);
   }

package/src/layout/dimensions.ts

@@ -21,7 +21,23 @@ import type {
   ResolvedChrome,
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
-import { computeChrome, estimateTextWidth } from '@opendata-ai/openchart-core';
+import {
+  AXIS_TITLE_TRAILING_PAD,
+  BREAKPOINT_COMPACT_MAX,
+  computeChrome,
+  estimateTextWidth,
+  getAxisTitleOffset,
+  HPAD_COMPACT_FRACTION,
+  HPAD_COMPACT_MIN,
+  LABEL_GAP_COMPACT,
+  LABEL_GAP_DEFAULT,
+  MAX_LEFT_LABEL_FRACTION_COMPACT,
+  MAX_LEFT_LABEL_FRACTION_DEFAULT,
+  MAX_LEFT_LABEL_FRACTION_MEDIUM,
+  MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
+  NARROW_VIEWPORT_MAX,
+  TOP_PAD_EXTRA_NARROW,
+} from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
 
 import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
@@ -102,6 +118,12 @@ export function computeDimensions(
   const { width, height } = options;
 
   const padding = scalePadding(theme.spacing.padding, width, height);
+  // Horizontal padding can be tighter than the chrome text padding on narrow
+  // containers because axis titles and tick labels tolerate closer edges.
+  const hPad =
+    width < BREAKPOINT_COMPACT_MAX
+      ? Math.max(Math.round(padding * HPAD_COMPACT_FRACTION), HPAD_COMPACT_MIN)
+      : padding;
   const axisMargin = theme.spacing.axisMargin;
   const chromeMode = strategy?.chromeMode ?? 'full';
 
@@ -160,11 +182,14 @@ export function computeDimensions(
   // added when there's actual chrome content that needs separation from the
   // chart area. When chrome is empty the margin is just padding.
   const topAxisGap = isRadial && chrome.topHeight === 0 ? 0 : axisMargin;
+  // Extra top padding on narrow viewports prevents iOS Safari from clipping
+  // the title chrome behind the browser UI.
+  const topPad = width < NARROW_VIEWPORT_MAX ? padding + TOP_PAD_EXTRA_NARROW : padding;
   const margins: Margins = {
-    top: padding + chrome.topHeight + topAxisGap,
-    right: padding + (isRadial ? padding : axisMargin),
+    top: topPad + chrome.topHeight + topAxisGap,
+    right: hPad + (isRadial ? hPad : axisMargin),
     bottom: padding + chrome.bottomHeight + xAxisHeight,
-    left: padding + (isRadial ? padding : axisMargin),
+    left: hPad + (isRadial ? hPad : axisMargin),
   };
 
   // Dynamic right margin for line/area end-of-line labels.
@@ -191,7 +216,7 @@ export function computeDimensions(
         }
       }
       if (maxLabelWidth > 0) {
-        margins.right = Math.max(margins.right, padding + maxLabelWidth + 8);
+        margins.right = Math.max(margins.right, hPad + maxLabelWidth + 8);
       }
     }
   }
@@ -232,7 +257,7 @@ export function computeDimensions(
                   textWidth / 2; // centered (top/bottom/auto)
           const rightOverflow = Math.max(0, baseRightExtent + dx);
           if (rightOverflow > 0) {
-            margins.right = Math.max(margins.right, padding + rightOverflow + 12);
+            margins.right = Math.max(margins.right, hPad + rightOverflow + 12);
           }
         }
       }
@@ -258,13 +283,18 @@ export function computeDimensions(
       }
       if (maxLabelWidth > 0) {
         // Tighter label-to-chart gap on narrow containers
-        const labelGap = width < 500 ? 8 : 12;
+        const labelGap = width < NARROW_VIEWPORT_MAX ? LABEL_GAP_COMPACT : LABEL_GAP_DEFAULT;
         // Clamp reservation so bars keep at least ~45% of container width on
         // narrow viewports. Labels that exceed the cap will be truncated by
         // the axis renderer (see axes.ts).
-        const maxLeftFraction = width < 400 ? 0.45 : width < 600 ? 0.55 : 1;
+        const maxLeftFraction =
+          width < BREAKPOINT_COMPACT_MAX
+            ? MAX_LEFT_LABEL_FRACTION_COMPACT
+            : width < MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX
+              ? MAX_LEFT_LABEL_FRACTION_MEDIUM
+              : MAX_LEFT_LABEL_FRACTION_DEFAULT;
         const maxLeftReserved = Math.floor(width * maxLeftFraction);
-        const reserved = Math.min(padding + maxLabelWidth + labelGap, maxLeftReserved);
+        const reserved = Math.min(hPad + maxLabelWidth + labelGap, maxLeftReserved);
         margins.left = Math.max(margins.left, reserved);
       }
     } else if (encoding.y.type === 'quantitative' || encoding.y.type === 'temporal') {
@@ -306,20 +336,26 @@ export function computeDimensions(
         theme.fonts.weights.normal,
       );
       // 6px gap between label and chart area edge
-      margins.left = Math.max(margins.left, padding + labelWidth + 10);
+      margins.left = Math.max(margins.left, hPad + labelWidth + 10);
     }
   }
 
-  // Rotated y-axis label needs extra left margin (rendered at area.x - 45 in SVG)
+  // Rotated y-axis label needs extra left margin (rendered at area.x - offset in SVG).
+  // Tighter on compact viewports where horizontal space is scarce.
   const yAxis = encoding.y?.axis as Record<string, unknown> | undefined;
   if (yAxis && (yAxis.title || yAxis.label) && !isRadial) {
-    const rotatedLabelMargin = 45 + Math.ceil(theme.fonts.sizes.body / 2) + 4;
-    margins.left = Math.max(margins.left, padding + rotatedLabelMargin);
+    const axisTitleOffset = getAxisTitleOffset(width);
+    const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
+    const rotatedLabelMargin =
+      axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
+    margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
   }
 
-  // Reserve space for a secondary (right) y-axis in dual-axis charts
+  // Reserve space for a secondary (right) y-axis in dual-axis charts.
+  // Use Math.max (not +=) to mirror the left-margin pattern: the reserve
+  // replaces the base axisMargin when it's larger, instead of stacking.
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
-    margins.right += options.rightAxisReserve;
+    margins.right = Math.max(margins.right, hPad + options.rightAxisReserve);
   }
 
   // Reserve legend space
@@ -359,9 +395,10 @@ export function computeDimensions(
       watermark,
     );
 
-    // Recalculate top/bottom margins with stripped chrome
+    // Recalculate top/bottom margins with stripped chrome.
+    // Use topPad (not padding) to preserve the iOS Safari clearance on narrow viewports.
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin;
-    const newTop = padding + fallbackChrome.topHeight + fallbackTopAxisGap;
+    const newTop = topPad + fallbackChrome.topHeight + fallbackTopAxisGap;
     const topDelta = margins.top - newTop;
     const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
     const bottomDelta = margins.bottom - newBottom;