@opendata-ai/openchart-engine 7.0.0 → 7.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "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": "7.0.0",
+    "@opendata-ai/openchart-core": "7.0.3",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/compile/layer.ts

@@ -491,6 +491,7 @@ function buildPrimarySpec(leaves: ChartSpec[], layerSpec: LayerSpec): ChartSpec
     darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
     watermark: layerSpec.watermark ?? leaves[0].watermark,
     hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries,
+    endpointLabels: layerSpec.endpointLabels ?? leaves[0].endpointLabels,
   };
 
   return primary;

package/src/compile.ts

@@ -552,15 +552,25 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // chartArea was shrunk to exclude legend space, so expand it back to include
   // the reserved margin. This way computeLegend positions the legend outside
   // the data area (in the margin) instead of overlapping data marks.
+  //
+  // Top/bottom legends sit above/below the chart and aren't constrained by
+  // y-axis labels. Use the full container width so wrapping decisions match
+  // the first pass (which uses options.width). Without this, charts with wide
+  // y-axis labels (horizontal bars, long category names) artificially narrow
+  // the legend and trigger premature wrapping.
   const legendArea: Rect = { ...chartArea };
   if ('entries' in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case 'top':
+        legendArea.x = theme.spacing.padding;
+        legendArea.width = options.width - theme.spacing.padding * 2;
         legendArea.y -= legendLayout.bounds.height + gap;
         legendArea.height += legendLayout.bounds.height + gap;
         break;
       case 'bottom':
+        legendArea.x = theme.spacing.padding;
+        legendArea.width = options.width - theme.spacing.padding * 2;
         // Bottom legend sits below the x-axis tick row, not over it. Expand
         // legendArea by xAxisHeight + legendHeight + gap so the bottom-anchored
         // legend lands beneath the axis. Mirrors dimensions.ts which reserved

package/src/compiler/normalize.ts

@@ -468,6 +468,7 @@ export function flattenLayers(
   parentEncoding?: Encoding,
   parentTransforms?: import('@opendata-ai/openchart-core').Transform[],
   parentWatermark?: boolean,
+  parentEndpointLabels?: boolean | import('@opendata-ai/openchart-core').EndpointLabelsConfig,
 ): ChartSpec[] {
   const resolvedData = spec.data ?? parentData;
   const resolvedEncoding: Encoding | undefined =
@@ -477,6 +478,7 @@ export function flattenLayers(
   const resolvedTransforms = [...(parentTransforms ?? []), ...(spec.transform ?? [])];
   // Layer-level watermark propagates to children (child can still override)
   const resolvedWatermark = spec.watermark ?? parentWatermark;
+  const resolvedEndpointLabels = spec.endpointLabels ?? parentEndpointLabels;
 
   const leaves: ChartSpec[] = [];
 
@@ -490,6 +492,7 @@ export function flattenLayers(
           resolvedEncoding,
           resolvedTransforms,
           resolvedWatermark,
+          resolvedEndpointLabels,
         ),
       );
     } else {
@@ -509,6 +512,9 @@ export function flattenLayers(
         ...(child.watermark === undefined && resolvedWatermark !== undefined
           ? { watermark: resolvedWatermark }
           : {}),
+        ...(child.endpointLabels === undefined && resolvedEndpointLabels !== undefined
+          ? { endpointLabels: resolvedEndpointLabels }
+          : {}),
       } as ChartSpec);
     }
   }

package/src/layout/dimensions.ts

@@ -153,12 +153,13 @@ function getSparklinePad(spec: NormalizedChartSpec): {
     point === 'last' || point === true || point === 'endpoints' || point === 'transparent';
   const dotLeft =
     point === 'first' || point === true || point === 'endpoints' || point === 'transparent';
+  const hasDots = dotRight || dotLeft;
 
   return {
     left: dotLeft ? Math.max(strokePad, dotPad) : strokePad,
     right: dotRight ? Math.max(strokePad, dotPad) : strokePad,
-    top: strokePad,
-    bottom: strokePad,
+    top: hasDots ? Math.max(strokePad, dotPad) : strokePad,
+    bottom: hasDots ? Math.max(strokePad, dotPad) : strokePad,
   };
 }
 
@@ -361,8 +362,13 @@ export function computeDimensions(
   // is kept; the rollback path subtracts it back when stripped.
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== 'hidden';
   const tentativeMetricsHeight = wantsMetrics ? metricBarHeight() : 0;
+  // topAxisGap sits between the legend (or chrome, if no legend) and the
+  // chart area. It accounts for the general axis margin plus any inline
+  // tick-label overhang. Placing it after the legend (below) keeps the
+  // subtitle-to-legend gap tight while reserving physical space for ticks
+  // that protrude above the chart area.
   const margins: Margins = {
-    top: topPad + chrome.topHeight + tentativeMetricsHeight + topAxisGap,
+    top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
     bottom: padding + chrome.bottomHeight + xAxisHeight,
     left: hPad + (isRadial ? hPad : axisMargin),
@@ -609,6 +615,10 @@ export function computeDimensions(
     // above.
   }
 
+  // Add topAxisGap after legend so it sits between the legend (or chrome
+  // when there's no legend) and the chart area.
+  margins.top += topAxisGap;
+
   // Chart area is what's left after margins
   let chartArea: Rect = {
     x: margins.left,
@@ -643,7 +653,7 @@ export function computeDimensions(
     // until resolveMetrics decides otherwise).
     const fallbackTopAxisGap =
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
-    const newTop = topPad + fallbackChrome.topHeight + fallbackTopAxisGap + tentativeMetricsHeight;
+    const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
     const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
     const bottomDelta = margins.bottom - newBottom;
@@ -656,7 +666,8 @@ export function computeDimensions(
         legendLayout.entries.length > 0 &&
         legendLayout.position === 'top'
           ? legendLayout.bounds.height + gap
-          : 0);
+          : 0) +
+        fallbackTopAxisGap;
       margins.bottom = newBottom;
 
       chartArea = {
@@ -709,8 +720,8 @@ export function computeDimensions(
   //   topPad
   //   chrome.topHeight              (title / subtitle / eyebrow)
   //   tentativeMetricsHeight        (KPI bar — placed here)
-  //   topAxisGap                    (axisMargin + inlineTickOverhang)
   //   [optional top legend band]
+  //   topAxisGap                    (axisMargin + inlineTickOverhang)
   //   chartArea
   // The metric bar belongs with chrome, above the legend, so its y is
   // computed off chrome.topHeight only — not the full legend-inclusive