@opendata-ai/openchart-engine 7.2.2 → 7.2.3

package/package.json

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

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

@@ -443,6 +443,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -1419,6 +1421,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -2010,6 +2014,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,

package/src/annotations/__tests__/compute.test.ts

@@ -624,6 +624,25 @@ describe('computeAnnotations', () => {
       expect(annotations[0].strokeDasharray).toBeDefined();
     });
 
+    it('refline label defaults to fontSize 11', () => {
+      const spec = makeSpec([{ type: 'refline', x: '2020-06-01', label: 'Event' }]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(11);
+    });
+
+    it('refline label honors fontSize and fontWeight overrides', () => {
+      const spec = makeSpec([
+        { type: 'refline', x: '2020-06-01', label: 'Event', fontSize: 24, fontWeight: 600 },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(24);
+      expect(annotations[0].label!.style.fontWeight).toBe(600);
+    });
+
     it('solid refline has no dasharray', () => {
       const spec = makeSpec([{ type: 'refline', y: 20, style: 'solid' }]);
       const scales = computeScales(spec, chartArea, spec.data);

package/src/annotations/resolve-refline.ts

@@ -123,7 +123,12 @@ export function resolveRefLineAnnotation(
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
 
     const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 400,
+      annotation.stroke ?? defaultStroke,
+      isDark,
+    );
     style.textAnchor = textAnchor;
 
     label = {

package/src/layout/dimensions.ts

@@ -45,7 +45,12 @@ import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
 import { predictEndpointLabelsWidth } from '../endpoint-labels/predict';
 import { countColorSeries, resolveSuppression } from '../legend/suppression';
 import { legendGap } from '../legend/wrap';
-import { computeMetricBar, metricBarHeight } from './metrics';
+import { computeMetricBar, type MetricFontSizes, metricBarHeight } from './metrics';
+
+/** Pull the metric-row font sizes from the resolved theme. */
+function metricFonts(theme: ResolvedTheme): MetricFontSizes {
+  return { label: theme.fonts.sizes.metricLabel, value: theme.fonts.sizes.metricValue };
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -372,7 +377,7 @@ export function computeDimensions(
   // We reserve optimistically so the chart-area math is correct when the bar
   // 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;
+  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 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
@@ -749,6 +754,7 @@ export function computeDimensions(
             fallbackMetricsArea,
             chartArea.height,
             options.measureText,
+            theme,
           )
         : undefined;
       if (wantsMetrics && !fallbackMetrics) {
@@ -790,7 +796,7 @@ export function computeDimensions(
   const metricsTopY = topPad + chrome.topHeight;
   const metricsArea = { x: hPad, width: Math.max(0, width - hPad * 2) };
   const resolvedMetrics = wantsMetrics
-    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText)
+    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText, theme)
     : undefined;
   if (wantsMetrics && !resolvedMetrics) {
     // See fallback path above for the clamp rationale.
@@ -824,6 +830,7 @@ function resolveMetrics(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText: import('@opendata-ai/openchart-core').MeasureTextFn | undefined,
+  theme: ResolvedTheme,
 ): ResolvedMetricBar | undefined {
   return computeMetricBar(
     spec.metrics,
@@ -831,5 +838,6 @@ function resolveMetrics(
     metricsArea,
     remainingChartHeight,
     measureText,
+    metricFonts(theme),
   );
 }

package/src/layout/metrics.ts

@@ -14,19 +14,32 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
-// Visual constants. Sized to match the editorial KPI mock: a 10px uppercase
-// label sits above a 22px primary value, with breathing room below before the
-// chart area starts. Derived from the 4px grid.
-const LABEL_FONT_SIZE = 10;
-const VALUE_FONT_SIZE = 22;
-const LABEL_LINE_HEIGHT_RATIO = 1.4; // 14px
-const VALUE_LINE_HEIGHT_RATIO = 1.15; // ~25.3px
+// Font sizes default to the editorial KPI mock (10px uppercase label above a
+// 22px primary value) but are theme-driven so charts can scale the row. The
+// label/value sizes flow in from `theme.fonts.sizes.metricLabel/metricValue`.
+const DEFAULT_LABEL_FONT_SIZE = 10;
+const DEFAULT_VALUE_FONT_SIZE = 22;
+const LABEL_LINE_HEIGHT_RATIO = 1.4;
+const VALUE_LINE_HEIGHT_RATIO = 1.15;
 const INTER_ROW_GAP = 4;
 // Breathing room above labels (separates metric row from the subtitle).
 const TOP_GAP = 16;
 // Breathing room below values (separates metric row from legend / chart top).
 const BOTTOM_GAP = 20;
 
+/** Font sizes the metric layout reserves space for. */
+export interface MetricFontSizes {
+  /** Uppercase label size (px). */
+  label: number;
+  /** Primary value size (px). */
+  value: number;
+}
+
+const DEFAULT_METRIC_FONT_SIZES: MetricFontSizes = {
+  label: DEFAULT_LABEL_FONT_SIZE,
+  value: DEFAULT_VALUE_FONT_SIZE,
+};
+
 /** Minimum container width that can fit a metric bar. */
 const MIN_BAR_WIDTH = 480;
 /** Minimum chart-area height after metric reservation. */
@@ -35,12 +48,12 @@ const MIN_CHART_HEIGHT = 150;
 const CELL_INNER_PAD = 8;
 
 /**
- * Total height the metric bar reserves above the chart area.
- * Always derived from the constants above; never hardcoded at the call site.
+ * Total height the metric bar reserves above the chart area. Derived from the
+ * font sizes (theme-driven) plus the fixed gaps; never hardcoded at the call site.
  */
-export function metricBarHeight(): number {
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const valueLine = VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO;
+export function metricBarHeight(fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES): number {
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const valueLine = fonts.value * VALUE_LINE_HEIGHT_RATIO;
   return TOP_GAP + labelLine + INTER_ROW_GAP + valueLine + BOTTOM_GAP;
 }
 
@@ -66,6 +79,7 @@ export function computeMetricBar(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText?: MeasureTextFn,
+  fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES,
 ): ResolvedMetricBar | undefined {
   if (!metrics || metrics.length === 0) return undefined;
   if (metricsArea.width < MIN_BAR_WIDTH) return undefined;
@@ -78,14 +92,14 @@ export function computeMetricBar(
   for (const metric of metrics) {
     const text = valueRunText(metric);
     const measured = measureText
-      ? measureText(text, VALUE_FONT_SIZE, 510).width
-      : estimateTextWidth(text, VALUE_FONT_SIZE, 510);
+      ? measureText(text, fonts.value, 510).width
+      : estimateTextWidth(text, fonts.value, 510);
     if (measured > cellWidth - CELL_INNER_PAD) return undefined;
   }
 
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const labelY = metricsTopY + TOP_GAP + LABEL_FONT_SIZE; // baseline for uppercase label
-  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + VALUE_FONT_SIZE;
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const labelY = metricsTopY + TOP_GAP + fonts.label; // baseline for uppercase label
+  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + fonts.value;
 
   const cells: ResolvedMetricCell[] = metrics.map((metric, i) => ({
     x: metricsArea.x + i * cellWidth,
@@ -98,15 +112,15 @@ export function computeMetricBar(
 
   return {
     y: metricsTopY,
-    height: metricBarHeight(),
+    height: metricBarHeight(fonts),
     cells,
   };
 }
 
 // Exposed for tests and consumers needing the same constants.
 export const METRIC_BAR_INTERNALS = {
-  LABEL_FONT_SIZE,
-  VALUE_FONT_SIZE,
+  DEFAULT_LABEL_FONT_SIZE,
+  DEFAULT_VALUE_FONT_SIZE,
   LABEL_LINE_HEIGHT_RATIO,
   VALUE_LINE_HEIGHT_RATIO,
   INTER_ROW_GAP,