@opendata-ai/openchart-engine 7.2.2 → 7.2.3

package/dist/index.js

@@ -900,7 +900,12 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
     }
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
     const defaultStroke2 = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke2, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 400,
+      annotation.stroke ?? defaultStroke2,
+      isDark
+    );
     style.textAnchor = textAnchor;
     label = {
       text: annotation.label,
@@ -10304,19 +10309,23 @@ function measureLegendWrap(entries, maxWidth, labelStyle, maxRows, entryGap = EN
 
 // src/layout/metrics.ts
 import { estimateTextWidth as estimateTextWidth14 } from "@opendata-ai/openchart-core";
-var LABEL_FONT_SIZE7 = 10;
-var VALUE_FONT_SIZE2 = 22;
+var DEFAULT_LABEL_FONT_SIZE = 10;
+var DEFAULT_VALUE_FONT_SIZE = 22;
 var LABEL_LINE_HEIGHT_RATIO = 1.4;
 var VALUE_LINE_HEIGHT_RATIO = 1.15;
 var INTER_ROW_GAP = 4;
 var TOP_GAP = 16;
 var BOTTOM_GAP = 20;
+var DEFAULT_METRIC_FONT_SIZES = {
+  label: DEFAULT_LABEL_FONT_SIZE,
+  value: DEFAULT_VALUE_FONT_SIZE
+};
 var MIN_BAR_WIDTH2 = 480;
 var MIN_CHART_HEIGHT = 150;
 var CELL_INNER_PAD = 8;
-function metricBarHeight() {
-  const labelLine = LABEL_FONT_SIZE7 * LABEL_LINE_HEIGHT_RATIO;
-  const valueLine = VALUE_FONT_SIZE2 * VALUE_LINE_HEIGHT_RATIO;
+function metricBarHeight(fonts = DEFAULT_METRIC_FONT_SIZES) {
+  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;
 }
 function valueRunText(metric) {
@@ -10325,19 +10334,19 @@ function valueRunText(metric) {
   if (metric.secondary) parts.push(metric.secondary);
   return parts.join(" ");
 }
-function computeMetricBar(metrics, metricsTopY, metricsArea, remainingChartHeight, measureText) {
+function computeMetricBar(metrics, metricsTopY, metricsArea, remainingChartHeight, measureText, fonts = DEFAULT_METRIC_FONT_SIZES) {
   if (!metrics || metrics.length === 0) return void 0;
   if (metricsArea.width < MIN_BAR_WIDTH2) return void 0;
   if (remainingChartHeight < MIN_CHART_HEIGHT) return void 0;
   const cellWidth = metricsArea.width / metrics.length;
   for (const metric of metrics) {
     const text = valueRunText(metric);
-    const measured = measureText ? measureText(text, VALUE_FONT_SIZE2, 510).width : estimateTextWidth14(text, VALUE_FONT_SIZE2, 510);
+    const measured = measureText ? measureText(text, fonts.value, 510).width : estimateTextWidth14(text, fonts.value, 510);
     if (measured > cellWidth - CELL_INNER_PAD) return void 0;
   }
-  const labelLine = LABEL_FONT_SIZE7 * LABEL_LINE_HEIGHT_RATIO;
-  const labelY = metricsTopY + TOP_GAP + LABEL_FONT_SIZE7;
-  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + VALUE_FONT_SIZE2;
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const labelY = metricsTopY + TOP_GAP + fonts.label;
+  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + fonts.value;
   const cells = metrics.map((metric, i) => ({
     x: metricsArea.x + i * cellWidth,
     cellWidth,
@@ -10348,12 +10357,15 @@ function computeMetricBar(metrics, metricsTopY, metricsArea, remainingChartHeigh
   }));
   return {
     y: metricsTopY,
-    height: metricBarHeight(),
+    height: metricBarHeight(fonts),
     cells
   };
 }
 
 // src/layout/dimensions.ts
+function metricFonts(theme) {
+  return { label: theme.fonts.sizes.metricLabel, value: theme.fonts.sizes.metricValue };
+}
 function chromeToInput(chrome) {
   return {
     eyebrow: chrome.eyebrow,
@@ -10485,7 +10497,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const topAxisGap = isRadial && chrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
   const topPad = width < NARROW_VIEWPORT_MAX ? padding + TOP_PAD_EXTRA_NARROW : padding;
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== "hidden";
-  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight() : 0;
+  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 0;
   const margins = {
     top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
@@ -10719,7 +10731,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         fallbackMetricsTopY,
         fallbackMetricsArea,
         chartArea.height,
-        options.measureText
+        options.measureText,
+        theme
       ) : void 0;
       if (wantsMetrics && !fallbackMetrics) {
         margins.top = Math.max(0, margins.top - tentativeMetricsHeight);
@@ -10742,7 +10755,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   }
   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) : void 0;
+  const resolvedMetrics = wantsMetrics ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText, theme) : void 0;
   if (wantsMetrics && !resolvedMetrics) {
     margins.top = Math.max(0, margins.top - tentativeMetricsHeight);
     chartArea = {
@@ -10761,13 +10774,14 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     xAxisHeight
   };
 }
-function resolveMetrics(spec, metricsTopY, metricsArea, remainingChartHeight, measureText) {
+function resolveMetrics(spec, metricsTopY, metricsArea, remainingChartHeight, measureText, theme) {
   return computeMetricBar(
     spec.metrics,
     metricsTopY,
     metricsArea,
     remainingChartHeight,
-    measureText
+    measureText,
+    metricFonts(theme)
   );
 }