@opendata-ai/openchart-engine 7.1.3 → 7.2.0

package/src/layout/dimensions.ts

@@ -23,6 +23,7 @@ import type {
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import {
+  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD,
   BREAKPOINT_COMPACT_MAX,
   computeChrome,
@@ -337,7 +338,8 @@ export function computeDimensions(
     const labelHeight = Math.min(rotatedHeight, 120);
     xAxisHeight = hasXAxisLabel ? labelHeight + 20 : labelHeight;
   } else {
-    xAxisHeight = hasXAxisLabel ? 48 : 26;
+    const base = theme.spacing.xAxisHeight;
+    xAxisHeight = hasXAxisLabel ? base + 22 : base;
   }
 
   // Resolve effective y-axis tickPosition early so margin math can account
@@ -633,9 +635,8 @@ export function computeDimensions(
       );
     }
     // Mirror the renderer's dynamic offset formula:
-    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + 8px gap
-    //   titleOffset = max(dynamicOffset, AXIS_TITLE_OFFSET_COMPACT)
-    const AXIS_TITLE_GAP = 8;
+    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + AXIS_TITLE_GAP(14)
+    //   titleOffset = max(dynamicOffset, getAxisTitleOffset(width))
     const dynamicTitleOffset = TICK_LABEL_OFFSET + estTickLabelWidth + AXIS_TITLE_GAP;
     const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset(width));
     const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
@@ -658,6 +659,8 @@ export function computeDimensions(
   // here. The legend lands below the x-axis tick row (which is reserved via
   // `xAxisHeight` in the base bottom margin) and source/byline/footer chrome
   // stacks underneath the legend band rather than colliding with it.
+  const hasTopLegend =
+    'entries' in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === 'top';
   if ('entries' in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(width);
     if (legendLayout.position === 'right' || legendLayout.position === 'bottom-right') {
@@ -669,9 +672,12 @@ 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;
+  // topAxisGap sits between the legend (or chrome, if no legend) and the
+  // chart area. When a top legend is present, the legendGap already provides
+  // breathing room, so only the inlineTickOverhang is needed (the axisMargin
+  // component would double up with legendGap). Without a top legend, the
+  // full topAxisGap (axisMargin + inlineTickOverhang) applies.
+  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
 
   // Chart area is what's left after margins
   let chartArea: Rect = {
@@ -707,6 +713,7 @@ export function computeDimensions(
     // until resolveMetrics decides otherwise).
     const fallbackTopAxisGap =
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
+    const fallbackEffectiveAxisGap = hasTopLegend ? inlineTickOverhang : fallbackTopAxisGap;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
     const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
@@ -721,7 +728,7 @@ export function computeDimensions(
         legendLayout.position === 'top'
           ? legendLayout.bounds.height + gap
           : 0) +
-        fallbackTopAxisGap;
+        fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
 
       chartArea = {

package/src/layout/scales.ts

@@ -679,8 +679,17 @@ export function computeScales(
       xStackEnabled
     ) {
       if (encoding.x.stack === 'normalize') {
-        // Normalize: domain is [0, 1]
-        xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
+        // Normalize: domain is [0, 1], default to percentage axis
+        const existingAxis = encoding.x.axis;
+        const axis =
+          existingAxis === false || existingAxis?.format
+            ? existingAxis
+            : { ...(typeof existingAxis === 'object' ? existingAxis : {}), format: '.0%' };
+        xChannel = {
+          ...encoding.x,
+          scale: { ...encoding.x.scale, domain: [0, 1], nice: false },
+          axis,
+        };
       } else if (encoding.x.stack === 'center') {
         // Center: compute max half-sum for symmetric domain
         const yField = encoding.y?.field;
@@ -785,8 +794,17 @@ export function computeScales(
     }
     if ((isBarStacked || isAreaStacked) && encoding.color && encoding.y.type === 'quantitative') {
       if (encoding.y.stack === 'normalize') {
-        // Normalize: domain is [0, 1] (VL convention)
-        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+        // Normalize: domain is [0, 1] (VL convention), default to percentage axis
+        const existingAxis = encoding.y.axis;
+        const axis =
+          existingAxis === false || existingAxis?.format
+            ? existingAxis
+            : { ...(typeof existingAxis === 'object' ? existingAxis : {}), format: '.0%' };
+        yChannel = {
+          ...encoding.y,
+          scale: { ...encoding.y.scale, domain: [0, 1], nice: false },
+          axis,
+        };
       } else if (encoding.y.stack === 'center') {
         // Center: compute max half-sum for symmetric domain
         const xField = encoding.x?.field;