@opendata-ai/openchart-vanilla 7.2.2 → 7.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "7.2.2",
+  "version": "7.2.4",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "7.2.2",
-    "@opendata-ai/openchart-engine": "7.2.2",
+    "@opendata-ai/openchart-core": "7.2.4",
+    "@opendata-ai/openchart-engine": "7.2.4",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/graph/__tests__/canvas-renderer.test.ts

@@ -86,7 +86,15 @@ function makeTheme(isDark = false): ResolvedTheme {
     fonts: {
       family: 'Inter, sans-serif',
       mono: 'monospace',
-      sizes: { title: 18, subtitle: 14, body: 12, small: 10, axisTick: 11 },
+      sizes: {
+        title: 18,
+        subtitle: 14,
+        body: 12,
+        small: 10,
+        axisTick: 11,
+        metricLabel: 10,
+        metricValue: 22,
+      },
       weights: { normal: 400, medium: 500, semibold: 600, bold: 700 },
     },
     spacing: {

package/src/renderers/metrics.ts

@@ -7,23 +7,34 @@
 import type { ChartLayout } from '@opendata-ai/openchart-core';
 import { createSVGElement, setAttrs } from './svg-dom';
 
+// Delta and secondary text run at a fraction of the primary value size. This
+// preserves the editorial mock's proportion (12px delta against a 22px value)
+// at any theme-driven value size, so scaling metricValue scales the whole cell.
+const DELTA_SIZE_RATIO = 12 / 22;
+
 export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
   const bar = layout.metrics;
   if (!bar || bar.cells.length === 0) return;
 
+  // Font sizes flow from the theme. Set them inline so they override the CSS
+  // defaults (.oc-metric-* in chrome.css) when a chart customizes the sizes.
+  const labelSize = layout.theme.fonts.sizes.metricLabel;
+  const valueSize = layout.theme.fonts.sizes.metricValue;
+  const deltaSize = Math.round(valueSize * DELTA_SIZE_RATIO);
+
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-metrics');
 
   for (const cell of bar.cells) {
     const label = createSVGElement('text');
     label.setAttribute('class', 'oc-metric-label');
-    setAttrs(label, { x: cell.x, y: cell.labelY });
+    setAttrs(label, { x: cell.x, y: cell.labelY, 'font-size': labelSize });
     label.textContent = cell.metric.label.toUpperCase();
     g.appendChild(label);
 
     const value = createSVGElement('text');
     value.setAttribute('class', 'oc-metric-value');
-    setAttrs(value, { x: cell.x, y: cell.valueY });
+    setAttrs(value, { x: cell.x, y: cell.valueY, 'font-size': valueSize });
     value.textContent = cell.metric.value;
 
     if (cell.metric.delta) {
@@ -31,6 +42,7 @@ export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
       const tone = cell.metric.deltaTone ?? 'up';
       delta.setAttribute('class', tone === 'down' ? 'oc-metric-delta-down' : 'oc-metric-delta-up');
       delta.setAttribute('dx', '8');
+      delta.setAttribute('font-size', String(deltaSize));
       delta.textContent = cell.metric.delta;
       value.appendChild(delta);
     }
@@ -39,6 +51,7 @@ export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
       const secondary = createSVGElement('tspan');
       secondary.setAttribute('class', 'oc-metric-secondary');
       secondary.setAttribute('dx', '6');
+      secondary.setAttribute('font-size', String(deltaSize));
       secondary.textContent = cell.metric.secondary;
       value.appendChild(secondary);
     }