@opendata-ai/openchart-engine 7.2.1 → 7.2.3

package/dist/index.js

@@ -766,16 +766,18 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
   let y2 = chartArea.y;
   let width = chartArea.width;
   let height = chartArea.height;
+  const extend2 = annotation.extendToEdges !== false;
+  const resolveEdge = (value2, scale, edge) => extend2 ? resolvePositionEdge(value2, scale, edge) : resolvePosition(value2, scale);
   if (annotation.x1 !== void 0 && annotation.x2 !== void 0) {
-    const x1px = resolvePositionEdge(annotation.x1, scales.x, "start");
-    const x2px = resolvePositionEdge(annotation.x2, scales.x, "end");
+    const x1px = resolveEdge(annotation.x1, scales.x, "start");
+    const x2px = resolveEdge(annotation.x2, scales.x, "end");
     if (x1px === null || x2px === null) return null;
     x2 = Math.min(x1px, x2px);
     width = Math.abs(x2px - x1px);
   }
   if (annotation.y1 !== void 0 && annotation.y2 !== void 0) {
-    const y1px = resolvePositionEdge(annotation.y1, scales.y, "end");
-    const y2px = resolvePositionEdge(annotation.y2, scales.y, "start");
+    const y1px = resolveEdge(annotation.y1, scales.y, "end");
+    const y2px = resolveEdge(annotation.y2, scales.y, "start");
     if (y1px === null || y2px === null) return null;
     y2 = Math.min(y1px, y2px);
     height = Math.abs(y2px - y1px);
@@ -788,7 +790,12 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
     const baseDx = centered ? 0 : anchor === "right" ? -4 : 4;
     const baseDy = 14;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
-    const style = makeAnnotationLabelStyle(11, 500, void 0, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 500,
+      void 0,
+      isDark
+    );
     if (centered) {
       style.textAnchor = "middle";
     } else if (anchor === "right") {
@@ -893,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,
@@ -8973,9 +8985,9 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
   const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
-  const axisTitleOffset = getAxisTitleOffset(options.width);
+  const axisTitleOffset2 = getAxisTitleOffset(options.width);
   const halfGlyph = Math.ceil(bodyFontSize / 2);
-  const titleExtent = hasRightAxisTitle ? axisTitleOffset + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD) : 0;
+  const titleExtent = hasRightAxisTitle ? axisTitleOffset2 + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD) : 0;
   const rightReserve = Math.max(tickExtent, titleExtent);
   const optionsWithReserve = {
     ...options,
@@ -10187,12 +10199,11 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
 
 // src/layout/dimensions.ts
 import {
-  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD as AXIS_TITLE_TRAILING_PAD2,
+  axisTitleOffset,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth15,
-  getAxisTitleOffset as getAxisTitleOffset2,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
   LABEL_GAP_COMPACT,
@@ -10202,7 +10213,6 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
-  TICK_LABEL_OFFSET as TICK_LABEL_OFFSET2,
   TOP_PAD_EXTRA_NARROW
 } from "@opendata-ai/openchart-core";
 
@@ -10299,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) {
@@ -10320,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,
@@ -10343,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,
@@ -10480,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),
@@ -10653,10 +10670,10 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         theme.fonts.weights.normal
       );
     }
-    const dynamicTitleOffset = TICK_LABEL_OFFSET2 + estTickLabelWidth + AXIS_TITLE_GAP;
-    const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset2(width));
-    const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
-    const rotatedLabelMargin = axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2);
+    const titleFontSize = theme.fonts.sizes.body;
+    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+    const halfGlyph = Math.ceil(titleFontSize / 2);
+    const rotatedLabelMargin = offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
   }
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
@@ -10714,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);
@@ -10737,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 = {
@@ -10756,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)
   );
 }
 
@@ -14265,17 +14284,18 @@ function compileChart(spec, options) {
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if ("entries" in legendLayout && legendLayout.entries.length > 0) {
+    const legendInnerWidth = options.width - theme.spacing.padding - chartArea.x;
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case "top":
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.y -= legendLayout.bounds.height + gap;
         legendArea.height += legendLayout.bounds.height + gap;
         break;
       case "bottom":
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.height += legendLayout.bounds.height + gap + dims.xAxisHeight;
         break;
       case "right":