@opendata-ai/openchart-vanilla 7.2.1 → 7.2.3

package/dist/index.js

@@ -5259,7 +5259,7 @@ function renderAnnotations(parent, layout) {
 
 // src/renderers/axes.ts
 import {
-  AXIS_TITLE_GAP,
+  axisTitleOffset,
   estimateTextWidth as estimateTextWidth2,
   getAxisTitleOffset,
   TICK_LABEL_OFFSET
@@ -5318,7 +5318,8 @@ function renderAxis(parent, axis, orientation, layout) {
         setAttrs2(label, {
           x: tick.position,
           y: area.y + area.height + xLabelPad,
-          "text-anchor": "middle"
+          "text-anchor": "middle",
+          "dominant-baseline": "hanging"
         });
       }
       applyTextStyle(label, axis.tickLabelStyle);
@@ -5484,8 +5485,11 @@ function renderAxis(parent, axis, orientation, layout) {
         );
         return Math.max(max, w);
       }, 0);
-      const dynamicOffset = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP;
-      const titleOffset = Math.max(dynamicOffset, getAxisTitleOffset(layout.dimensions.width));
+      const titleOffset = axisTitleOffset(
+        maxTickLabelWidth,
+        axis.labelStyle.fontSize,
+        layout.dimensions.width
+      );
       setAttrs2(axisLabel, {
         x: area.x - titleOffset,
         y: area.y + area.height / 2,
@@ -6222,26 +6226,31 @@ function renderMarks(parent, layout) {
 }
 
 // src/renderers/metrics.ts
+var DELTA_SIZE_RATIO = 12 / 22;
 function renderMetrics(parent, layout) {
   const bar = layout.metrics;
   if (!bar || bar.cells.length === 0) return;
+  const labelSize = layout.theme.fonts.sizes.metricLabel;
+  const valueSize = layout.theme.fonts.sizes.metricValue;
+  const deltaSize = Math.round(valueSize * DELTA_SIZE_RATIO);
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-metrics");
   for (const cell of bar.cells) {
     const label = createSVGElement2("text");
     label.setAttribute("class", "oc-metric-label");
-    setAttrs2(label, { x: cell.x, y: cell.labelY });
+    setAttrs2(label, { x: cell.x, y: cell.labelY, "font-size": labelSize });
     label.textContent = cell.metric.label.toUpperCase();
     g.appendChild(label);
     const value = createSVGElement2("text");
     value.setAttribute("class", "oc-metric-value");
-    setAttrs2(value, { x: cell.x, y: cell.valueY });
+    setAttrs2(value, { x: cell.x, y: cell.valueY, "font-size": valueSize });
     value.textContent = cell.metric.value;
     if (cell.metric.delta) {
       const delta = createSVGElement2("tspan");
       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);
     }
@@ -6249,6 +6258,7 @@ function renderMetrics(parent, layout) {
       const secondary = createSVGElement2("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);
     }