@opendata-ai/openchart-engine 6.1.1 → 6.1.2

package/package.json

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

package/src/layout/dimensions.ts

@@ -22,6 +22,7 @@ import type {
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import { computeChrome, estimateTextWidth } from '@opendata-ai/openchart-core';
+import { format as d3Format } from 'd3-format';
 
 import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
 
@@ -187,6 +188,27 @@ export function computeDimensions(
     }
   }
 
+  // Reserve right margin for text annotations near the chart's right edge.
+  // Without this, annotation text at the last data point clips outside the SVG.
+  if (spec.annotations.length > 0 && encoding.x) {
+    const xField = encoding.x.field;
+    // Find the maximum x value in the data
+    let maxX: string | number | undefined;
+    for (const row of spec.data) {
+      const v = row[xField];
+      if (v != null && (maxX == null || String(v) >= String(maxX))) maxX = v as string | number;
+    }
+    if (maxX != null) {
+      const maxXStr = String(maxX);
+      for (const ann of spec.annotations) {
+        if (ann.type === 'text' && String(ann.x) === maxXStr) {
+          const textWidth = estimateTextWidth(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
+          margins.right = Math.max(margins.right, padding + textWidth + 12);
+        }
+      }
+    }
+  }
+
   // Dynamic left margin for y-axis labels
   if (encoding.y && !isRadial) {
     if (
@@ -209,19 +231,33 @@ export function computeDimensions(
     } else if (encoding.y.type === 'quantitative' || encoding.y.type === 'temporal') {
       // Numeric tick labels on the left. Estimate width from the data range.
       const yField = encoding.y.field;
+      const yAxisFormat = (encoding.y.axis as Record<string, unknown> | undefined)?.format as
+        | string
+        | undefined;
       let maxAbsVal = 0;
       for (const row of spec.data) {
         const v = Number(row[yField]);
         if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
       }
-      // Estimate the formatted label: abbreviateNumber for >= 1000, formatNumber otherwise
+
       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) {
+        // Use the actual d3-format to produce a realistic label estimate
+        try {
+          const fmt = d3Format(yAxisFormat);
+          sampleLabel = fmt(maxAbsVal);
+        } catch {
+          sampleLabel = String(maxAbsVal);
+        }
+      } else {
+        // Fallback: estimate from magnitude
+        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';
+      }
       // Account for negative sign
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? '-' : '';
       const labelEst = negPrefix + sampleLabel;
@@ -236,7 +272,8 @@ export function computeDimensions(
   }
 
   // Rotated y-axis label needs extra left margin (rendered at area.x - 45 in SVG)
-  if (encoding.y?.axis && (encoding.y.axis as Record<string, unknown>).label && !isRadial) {
+  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);
   }