@opendata-ai/openchart-engine 7.0.4 → 7.1.0

package/src/__tests__/compile-chart.test.ts

@@ -230,7 +230,10 @@ describe('compileChart', () => {
 
     expect(light.theme.isDark).toBe(false);
     expect(dark.theme.isDark).toBe(true);
-    expect(dark.theme.colors.background).not.toBe(light.theme.colors.background);
+    // Both modes preserve transparent background — dark mode swaps text/axis/gridline
+    // colors but keeps transparency so the host surface shows through.
+    expect(dark.theme.colors.background).toBe('transparent');
+    expect(light.theme.colors.background).toBe('transparent');
     // Dark mode text should be light, light mode text should be dark
     expect(dark.theme.colors.text).not.toBe(light.theme.colors.text);
   });

package/src/__tests__/dimensions.test.ts

@@ -142,7 +142,12 @@ describe('computeDimensions', () => {
 
     expect(lightDims.theme.isDark).toBe(false);
     expect(darkDims.theme.isDark).toBe(true);
-    expect(darkDims.theme.colors.background).not.toBe(lightDims.theme.colors.background);
+    // Both modes use transparent background — the dark adaptation changes text/axis
+    // colors while keeping transparency so the host surface shows through.
+    expect(darkDims.theme.colors.background).toBe('transparent');
+    expect(lightDims.theme.colors.background).toBe('transparent');
+    // Dark mode uses a different text color
+    expect(darkDims.theme.colors.text).not.toBe(lightDims.theme.colors.text);
   });
 
   it('prevents negative chart area dimensions', () => {

package/src/charts/column/labels.ts

@@ -32,7 +32,7 @@ import { formatLabelValue } from '../_shared/format-label-value';
 
 const LABEL_FONT_SIZE = 10;
 const LABEL_FONT_WEIGHT = 600;
-const LABEL_OFFSET_Y = 6;
+const LABEL_OFFSET_Y = 8;
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -91,8 +91,11 @@ export function computeColumnLabels(
     const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
     const textHeight = LABEL_FONT_SIZE * 1.2;
 
-    // For positive values, place label above the column top.
-    // For negative values, place label below the column bottom.
+    // anchorY is the TOP of the label bounding box so the collision system's
+    // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
+    // correct. dominantBaseline 'hanging' anchors the glyph top at anchorY.
+    //   Positive bar: top = barTop - LABEL_OFFSET_Y - textHeight, text floats above
+    //   Negative bar: top = barBottom + LABEL_OFFSET_Y, text hangs below
     const anchorX = mark.x + mark.width / 2;
     const anchorY = isNegative
       ? mark.y + mark.height + LABEL_OFFSET_Y
@@ -112,7 +115,7 @@ export function computeColumnLabels(
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
-        dominantBaseline: isNegative ? 'hanging' : 'auto',
+        dominantBaseline: 'hanging',
       },
     });
   }

package/src/charts/line/__tests__/compute.test.ts

@@ -620,12 +620,31 @@ describe('computeAreaMarks', () => {
       expect(fill.gradient).toBe('linear');
       expect(fill.stops).toHaveLength(2);
       expect(fill.stops[0].opacity).toBe(0.65);
-      expect(fill.stops[1].opacity).toBe(0.35);
+      // Light mode: bottom fades to 0 so the colored wash at the base is avoided
+      expect(fill.stops[1].opacity).toBe(0);
       // fillOpacity should be 1 so gradient stop-opacity controls the fade
       expect(mark.fillOpacity).toBe(1);
     }
   });
 
+  it('stacked areas use higher bottom opacity in dark mode', () => {
+    const spec = makeMultiSeriesSpec();
+    spec.encoding.y!.stack = 'zero';
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea, true /* darkMode */);
+
+    expect(marks.length).toBeGreaterThan(0);
+    for (const mark of marks) {
+      const fill = mark.fill as { gradient: string; stops: { opacity?: number }[] };
+      expect(fill.gradient).toBe('linear');
+      expect(fill.stops).toHaveLength(2);
+      expect(fill.stops[0].opacity).toBe(0.65);
+      // Dark mode: bottom stop is 0.35 so bands remain visible on dark surfaces
+      expect(fill.stops[1].opacity).toBe(0.35);
+      expect(mark.fillOpacity).toBe(1);
+    }
+  });
+
   it('stacked: markDef.fill string still overrides per-layer gradient', () => {
     const spec = makeMultiSeriesSpec();
     spec.encoding.y!.stack = 'zero';

package/src/charts/line/area.ts

@@ -80,6 +80,13 @@ const STACKED_GRADIENT_STOPS = [
   { offset: 1, opacity: 0.35 },
 ];
 
+// Light-mode stacked areas: bottom out at opacity 0 rather than 0.35 to avoid
+// the muddy color wash at the base of each band on white/light backgrounds.
+const STACKED_GRADIENT_STOPS_LIGHT = [
+  { offset: 0, opacity: 0.65 },
+  { offset: 1, opacity: 0 },
+];
+
 function buildGradientFill(
   colorStr: string,
   stops: ReadonlyArray<{ offset: number; opacity: number }>,
@@ -257,6 +264,7 @@ function computeStackedArea(
   spec: NormalizedChartSpec,
   scales: ResolvedScales,
   chartArea: Rect,
+  darkMode?: boolean,
 ): AreaMark[] {
   const encoding = spec.encoding as Encoding;
   const xChannel = encoding.x;
@@ -389,7 +397,8 @@ function computeStackedArea(
       fillOpacity = isGradientDef(markFill) ? 1 : (spec.markDef.opacity ?? 0.7);
     } else {
       const colorStr = getRepresentativeColor(color);
-      fillValue = buildGradientFill(colorStr, STACKED_GRADIENT_STOPS);
+      const stackedStops = darkMode ? STACKED_GRADIENT_STOPS : STACKED_GRADIENT_STOPS_LIGHT;
+      fillValue = buildGradientFill(colorStr, stackedStops);
       fillOpacity = 1;
     }
 
@@ -443,12 +452,13 @@ export function computeAreaMarks(
   spec: NormalizedChartSpec,
   scales: ResolvedScales,
   chartArea: Rect,
+  darkMode?: boolean,
 ): AreaMark[] {
   const encoding = spec.encoding as Encoding;
   const yChannel = encoding.y;
 
   if (yChannel && isStacked(yChannel.stack)) {
-    return computeStackedArea(spec, scales, chartArea);
+    return computeStackedArea(spec, scales, chartArea, darkMode);
   }
 
   return computeSingleArea(spec, scales, chartArea);

package/src/charts/line/index.ts

@@ -71,8 +71,8 @@ export const lineRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _
  * of whether the layout is stacked (cumulative tops) or overlap (per-series
  * raw values).
  */
-export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const areas = computeAreaMarks(spec, scales, chartArea);
+export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const areas = computeAreaMarks(spec, scales, chartArea, theme.isDark);
 
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && 'field' in encoding.color);

package/src/endpoint-labels/__tests__/compute.test.ts

@@ -19,6 +19,7 @@ import { describe, expect, it } from 'vitest';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import { bidirectionalSweep, computeEndpointLabels } from '../compute';
+import { ENDPOINT_MARKER_RADIUS } from '../constants';
 
 // ---------------------------------------------------------------------------
 // Fixtures
@@ -281,7 +282,10 @@ describe('computeEndpointLabels', () => {
 
     for (const entry of layout.entries) {
       expect(entry.marker).toBeDefined();
-      expect(entry.marker!.x).toBe(lastX);
+      // dataX is the original line endpoint; x is offset right by radius so the
+      // line terminates at the circle edge rather than its center.
+      expect(entry.marker!.dataX).toBe(lastX);
+      expect(entry.marker!.x).toBe(lastX + ENDPOINT_MARKER_RADIUS);
       // Marker y is at the actual data point (not displaced labelY).
       expect(entry.marker!.y).toBe(entry.dataY);
       // Open-circle convention: fill = background, stroke = series color.

package/src/endpoint-labels/compute.ts

@@ -386,9 +386,12 @@ export function computeEndpointLabels(
       showLeader: showLeader && displaced,
     };
     if (showMarker) {
+      // Offset cx right by markerRadius so the line terminates at the circle's
+      // left edge rather than its center — prevents the line from piercing the ring.
       entry.marker = {
-        x: p.dataX,
+        x: p.dataX + markerRadius,
         y: p.dataY,
+        dataX: p.dataX,
         fill: markerFill,
         stroke: config?.markerStyle?.stroke ?? p.color,
         strokeWidth: markerStrokeWidth,

package/src/layout/axes/thinning.ts

@@ -12,9 +12,11 @@ import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
 /**
  * Minimum gap between adjacent tick labels as a multiple of font size.
- * At the default 12px axis font, this yields ~12px of breathing room.
+ * At the default 11px axis font, this yields ~5-6px of breathing room.
+ * Reduced from 1.0 to 0.5 to prevent over-aggressive thinning on charts
+ * with a small number of categories that clearly have room for all labels.
  */
-const MIN_TICK_GAP_FACTOR = 1.0;
+const MIN_TICK_GAP_FACTOR = 0.5;
 
 /** Always show at least this many ticks, even if they overlap. */
 const MIN_TICK_COUNT = 2;

package/src/layout/dimensions.ts

@@ -37,6 +37,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
+  TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
@@ -93,6 +94,16 @@ function chromeToInput(chrome: NormalizedChrome): import('@opendata-ai/openchart
   };
 }
 
+/**
+ * Compute the bottom margin contribution from chrome.
+ * chrome.bottomHeight already includes its own padding when it has content
+ * (watermark, source, byline, or footer). When zero, fall back to the base
+ * padding so the chart area doesn't butt against the container edge.
+ */
+function bottomMargin(bottomHeight: number, padding: number, xAxisHeight: number): number {
+  return (bottomHeight > 0 ? bottomHeight : padding) + xAxisHeight;
+}
+
 /**
  * Scale padding based on the smaller container dimension.
  * At >= 500px, padding is unchanged. At <= 200px, padding is halved (min 4px).
@@ -370,7 +381,7 @@ export function computeDimensions(
   const margins: Margins = {
     top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
-    bottom: padding + chrome.bottomHeight + xAxisHeight,
+    bottom: bottomMargin(chrome.bottomHeight, padding, xAxisHeight),
     left: hPad + (isRadial ? hPad : axisMargin),
   };
 
@@ -580,10 +591,53 @@ export function computeDimensions(
   }
 
   // Rotated y-axis label needs extra left margin (rendered at area.x - offset in SVG).
-  // Tighter on compact viewports where horizontal space is scarce.
+  // The renderer computes a dynamic offset that accounts for wide tick labels (e.g.
+  // "$100,000" is ~62px wide and would overlap a fixed 45px offset). We replicate
+  // the same formula here so the reserved space matches what the renderer places.
   const yAxis = encoding.y?.axis as Record<string, unknown> | undefined;
   if (yAxis && (yAxis.title || yAxis.label) && !isRadial) {
-    const axisTitleOffset = getAxisTitleOffset(width);
+    // Estimate the widest y-axis tick label width to mirror the renderer's dynamic offset.
+    const yFieldForTitle = encoding.y?.field;
+    const yAxisFormatForTitle = yAxis?.format as string | undefined;
+    let estTickLabelWidth = 0;
+    if (
+      yFieldForTitle &&
+      (encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal')
+    ) {
+      let maxAbsValForTitle = 0;
+      for (const row of spec.data) {
+        const v = Number(row[yFieldForTitle]);
+        if (Number.isFinite(v) && Math.abs(v) > maxAbsValForTitle) maxAbsValForTitle = Math.abs(v);
+      }
+      let sampleLabelForTitle: string;
+      if (yAxisFormatForTitle) {
+        try {
+          const fmt = d3Format(yAxisFormatForTitle);
+          sampleLabelForTitle = fmt(maxAbsValForTitle);
+        } catch {
+          sampleLabelForTitle = String(maxAbsValForTitle);
+        }
+      } else {
+        if (maxAbsValForTitle >= 1_000_000_000) sampleLabelForTitle = '1.5B';
+        else if (maxAbsValForTitle >= 1_000_000) sampleLabelForTitle = '1.5M';
+        else if (maxAbsValForTitle >= 1_000) sampleLabelForTitle = '1.5K';
+        else if (maxAbsValForTitle >= 100) sampleLabelForTitle = '100';
+        else if (maxAbsValForTitle >= 10) sampleLabelForTitle = '10';
+        else sampleLabelForTitle = '0.0';
+      }
+      const negPrefixForTitle = spec.data.some((r) => Number(r[yFieldForTitle]) < 0) ? '-' : '';
+      estTickLabelWidth = estimateTextWidth(
+        negPrefixForTitle + sampleLabelForTitle,
+        theme.fonts.sizes.axisTick,
+        theme.fonts.weights.normal,
+      );
+    }
+    // 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;
+    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);
     const rotatedLabelMargin =
       axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
@@ -655,7 +709,7 @@ export function computeDimensions(
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
-    const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
+    const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
 
     if (topDelta > 0 || bottomDelta > 0) {