@opendata-ai/openchart-engine 2.5.0 → 2.7.0

package/dist/index.js

@@ -202,14 +202,23 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
   const rect = { x, y, width, height };
   let label;
   if (annotation.label) {
-    const baseDx = 4;
+    const anchor = annotation.labelAnchor ?? "left";
+    const centered = anchor === "top" || anchor === "bottom" || anchor === "auto";
+    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);
+    if (centered) {
+      style.textAnchor = "middle";
+    } else if (anchor === "right") {
+      style.textAnchor = "end";
+    }
+    const baseX = centered ? x + width / 2 : anchor === "right" ? x + width : x;
     label = {
       text: annotation.label,
-      x: x + labelDelta.dx,
+      x: baseX + labelDelta.dx,
       y: y + labelDelta.dy,
-      style: makeAnnotationLabelStyle(11, 500, void 0, isDark),
+      style,
       visible: true
     };
   }
@@ -249,8 +258,9 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
   let label;
   if (annotation.label) {
     const isHorizontal = annotation.y !== void 0;
+    const anchor = annotation.labelAnchor ?? "top";
     const baseDx = isHorizontal ? -4 : 4;
-    const baseDy = -4;
+    const baseDy = anchor === "bottom" ? 14 : -4;
     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);
@@ -579,20 +589,30 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 }
 
 // src/charts/bar/labels.ts
-import { estimateTextWidth as estimateTextWidth2, resolveCollisions } from "@opendata-ai/openchart-core";
+import {
+  buildD3Formatter,
+  estimateTextWidth as estimateTextWidth2,
+  resolveCollisions
+} from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE = 11;
 var LABEL_FONT_WEIGHT = 600;
 var LABEL_PADDING = 6;
 var MIN_WIDTH_FOR_INSIDE_LABEL = 40;
-function computeBarLabels(marks, _chartArea, density = "auto") {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
   const candidates = [];
+  const formatter = buildD3Formatter(labelFormat);
   for (const mark of targetMarks) {
     const ariaLabel = mark.aria.label;
     const lastColon = ariaLabel.lastIndexOf(":");
-    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!valuePart) continue;
+    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!rawValue) continue;
+    let valuePart = rawValue;
+    if (formatter) {
+      const num = Number(rawValue.replace(/[^0-9.-]/g, ""));
+      if (!Number.isNaN(num)) valuePart = formatter(num);
+    }
     const textWidth = estimateTextWidth2(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
     const textHeight = LABEL_FONT_SIZE * 1.2;
     const isStacked = mark.cornerRadius === 0;
@@ -648,7 +668,7 @@ function computeBarLabels(marks, _chartArea, density = "auto") {
 // src/charts/bar/index.ts
 var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
-  const labels = computeBarLabels(marks, chartArea, spec.labels.density);
+  const labels = computeBarLabels(marks, chartArea, spec.labels.density, spec.labels.format);
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
   }
@@ -813,24 +833,34 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
 }
 
 // src/charts/column/labels.ts
-import { estimateTextWidth as estimateTextWidth3, resolveCollisions as resolveCollisions2 } from "@opendata-ai/openchart-core";
+import {
+  buildD3Formatter as buildD3Formatter2,
+  estimateTextWidth as estimateTextWidth3,
+  resolveCollisions as resolveCollisions2
+} from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
 var LABEL_OFFSET_Y = 6;
-function computeColumnLabels(marks, _chartArea, density = "auto") {
+function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const formatter = buildD3Formatter2(labelFormat);
   const candidates = [];
   for (const mark of targetMarks) {
     const ariaLabel = mark.aria.label;
     const lastColon = ariaLabel.lastIndexOf(":");
-    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!valuePart) continue;
+    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!rawValue) continue;
+    let valuePart = rawValue;
+    if (formatter) {
+      const num = Number(rawValue.replace(/[^0-9.-]/g, ""));
+      if (!Number.isNaN(num)) valuePart = formatter(num);
+    }
     const numericValue = parseFloat(valuePart);
     const isNegative = Number.isFinite(numericValue) && numericValue < 0;
     const textWidth = estimateTextWidth3(valuePart, LABEL_FONT_SIZE2, LABEL_FONT_WEIGHT2);
     const textHeight = LABEL_FONT_SIZE2 * 1.2;
-    const anchorX = mark.x + mark.width / 2 - textWidth / 2;
+    const anchorX = mark.x + mark.width / 2;
     const anchorY = isNegative ? mark.y + mark.height + LABEL_OFFSET_Y : mark.y - LABEL_OFFSET_Y - textHeight;
     candidates.push({
       text: valuePart,
@@ -866,7 +896,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto") {
 // src/charts/column/index.ts
 var columnRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeColumnMarks(spec, scales, chartArea, strategy);
-  const labels = computeColumnLabels(marks, chartArea, spec.labels.density);
+  const labels = computeColumnLabels(marks, chartArea, spec.labels.density, spec.labels.format);
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
   }
@@ -2804,7 +2834,12 @@ function compileGraph(spec, options) {
 var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes.ts
-import { abbreviateNumber as abbreviateNumber3, formatDate, formatNumber as formatNumber3 } from "@opendata-ai/openchart-core";
+import {
+  abbreviateNumber as abbreviateNumber3,
+  buildD3Formatter as buildD3Formatter3,
+  formatDate,
+  formatNumber as formatNumber3
+} from "@opendata-ai/openchart-core";
 var TICK_COUNTS = {
   full: 8,
   reduced: 5,
@@ -2864,7 +2899,10 @@ function formatTickLabel(value, resolvedScale) {
   }
   if (resolvedScale.type === "linear" || resolvedScale.type === "log") {
     const num = value;
-    if (formatStr) return formatNumber3(num);
+    if (formatStr) {
+      const fmt = buildD3Formatter3(formatStr);
+      if (fmt) return fmt(num);
+    }
     if (Math.abs(num) >= 1e3) return abbreviateNumber3(num);
     return formatNumber3(num);
   }
@@ -2986,7 +3024,8 @@ function computeDimensions(spec, options, legendLayout, theme) {
     bottom: padding + chrome.bottomHeight + xAxisHeight,
     left: padding + (isRadial ? padding : axisMargin)
   };
-  if (spec.type === "line" || spec.type === "area") {
+  const labelDensity = spec.labels.density;
+  if ((spec.type === "line" || spec.type === "area") && labelDensity !== "none") {
     const colorField = encoding.color?.field;
     if (colorField) {
       let maxLabelWidth = 0;