@opendata-ai/openchart-engine 7.1.3 → 7.1.4

package/package.json

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

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -227,7 +227,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -260,7 +260,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -293,7 +293,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,

package/src/__tests__/dimensions.test.ts

@@ -126,6 +126,84 @@ describe('computeDimensions', () => {
     expect(withLegend.chartArea.height).toBeLessThan(withoutLegend.chartArea.height);
   });
 
+  it('reserves enough left margin for y-axis title to clear tick labels', () => {
+    const specWithYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Share of districts' } },
+      },
+    };
+    const specWithoutYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const dimsWithTitle = computeDimensions(
+      specWithYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsWithoutTitle = computeDimensions(
+      specWithoutYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // A chart with a y-axis title needs more left margin than one without
+    expect(dimsWithTitle.margins.left).toBeGreaterThan(dimsWithoutTitle.margins.left);
+    // The difference should be at least enough for the rotated title glyph
+    // plus breathing room (halfGlyph ~7 + trailing pad 4 = 11px minimum)
+    expect(dimsWithTitle.margins.left - dimsWithoutTitle.margins.left).toBeGreaterThanOrEqual(11);
+  });
+
+  it('y-axis title margin scales with tick label width', () => {
+    const smallValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 5 },
+        { date: '2021-01-01', value: 9 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Count' } },
+      },
+    };
+    const largeValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 1_500_000 },
+        { date: '2021-01-01', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Revenue ($)' } },
+      },
+    };
+
+    const dimsSmall = computeDimensions(
+      smallValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsLarge = computeDimensions(
+      largeValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Larger numeric values produce wider tick labels (e.g. "1.5M" vs "0.0"),
+    // so the y-axis title margin should grow to keep clearance
+    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+  });
+
   it('applies dark mode theme adaptation', () => {
     const lightDims = computeDimensions(
       baseSpec,
@@ -382,6 +460,36 @@ describe('computeDimensions', () => {
     });
   });
 
+  it('avoids doubling axisMargin and legendGap when top legend is present', () => {
+    const dimsWithTopLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+    const dimsNoLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Without a top legend, the full topAxisGap (axisMargin + inlineTickOverhang)
+    // separates chrome from chart area. With a top legend, legendGap already
+    // provides separation, so only inlineTickOverhang is added (not the full
+    // topAxisGap). This means the chart area gains back ~axisMargin (6px)
+    // that would otherwise be redundant spacing.
+    //
+    // The top margin with legend includes: legendHeight(28) + legendGap(8)
+    // + inlineTickOverhang(17) instead of the no-legend topAxisGap(23).
+    // Net: margin delta = 28 + 8 + 17 - 23 = 30px.
+    // If axisMargin were doubling up: 28 + 8 + 23 - 23 = 36px.
+    const topMarginDelta = dimsWithTopLegend.margins.top - dimsNoLegend.margins.top;
+    expect(topMarginDelta).toBeLessThan(topLegend.bounds.height + legendGap(600) + 1);
+    // With a legend present, the chart area should still be shorter
+    expect(dimsWithTopLegend.chartArea.height).toBeLessThan(dimsNoLegend.chartArea.height);
+  });
+
   it('tightens legend gap on narrow viewports', () => {
     const wideDims = computeDimensions(
       baseSpec,

package/src/charts/bar/__tests__/labels.test.ts

@@ -217,3 +217,75 @@ describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
     expect(labels[1].text).toBe('\u22125%'); // −5%
   });
 });
+
+// ---------------------------------------------------------------------------
+// Dark-mode inside-label color
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels inside-label color by mode', () => {
+  // Wide bar (>= 40px) so the label is placed inside and uses pickLabelColor.
+  function makeFilledMark(fill: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 25,
+      fill,
+      data: { category: 'A', value: 100 },
+      aria: { label: 'A: 100' },
+    };
+  }
+
+  it('mid-tone fill gets white inside-label in light mode, dark in dark mode', () => {
+    const slate = [makeFilledMark('#94a3b8')];
+    const light = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#111111');
+  });
+
+  it('saturated fill keeps white inside-label in both modes', () => {
+    const red = [makeFilledMark('#c0392b')];
+    const light = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#ffffff');
+  });
+});

package/src/charts/bar/index.ts

@@ -13,7 +13,7 @@ import { computeBarLabels } from './labels';
 // Bar chart renderer
 // ---------------------------------------------------------------------------
 
-export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
+export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
@@ -27,6 +27,7 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
     spec.labels.prefix,
     valueField,
     spec.labels.color,
+    theme.isDark,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -95,6 +95,7 @@ export function computeBarLabels(
   labelPrefix?: string,
   valueField?: string,
   labelColor?: string,
+  darkMode = false,
 ): ResolvedLabel[] {
   const targetMarks = filterByDensity(marks, density);
 
@@ -150,18 +151,18 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = pickLabelColor(bgColor);
+      fill = pickLabelColor(bgColor, darkMode);
       textAnchor = 'middle';
     } else if (isInside) {
       if (isNegative) {
         // Negative bar: left-aligned within bar (bar extends leftward)
         anchorX = mark.x + LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'start';
       } else {
         // Positive bar: right-aligned within bar
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'end';
       }
     } else {

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,
@@ -633,9 +634,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 +658,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 +671,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 +712,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 +727,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;