@opendata-ai/openchart-engine 7.1.4 → 7.2.0

package/dist/index.d.ts

@@ -298,7 +298,7 @@ interface NormalizedChartSpec {
     metrics?: _opendata_ai_openchart_core.Metric[];
     annotations: Annotation[];
     /** Normalized label configuration with defaults applied. density, format, and prefix are always set; offsets and color stay optional. */
-    labels: Required<Pick<LabelConfig, 'density' | 'format' | 'prefix'>> & Pick<LabelConfig, 'offsets' | 'color'>;
+    labels: Required<Pick<LabelConfig, 'density' | 'format' | 'prefix'>> & Pick<LabelConfig, 'offsets' | 'color' | 'fontSize' | 'suffix'>;
     /** Legend configuration (position override). */
     legend?: LegendConfig;
     /** Right-side endpoint labels column config (multi-series line/area only). */

package/dist/index.js

@@ -1778,7 +1778,8 @@ 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", labelFormat, labelPrefix, valueField, labelColor, darkMode = false) {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor, darkMode = false, fontSize, labelSuffix) {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
   const candidates = [];
   const fitsInSegment = [];
@@ -1804,8 +1805,9 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
       }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
-    const textWidth = estimateTextWidth4(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
-    const textHeight = LABEL_FONT_SIZE * 1.2;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
+    const textWidth = estimateTextWidth4(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = FONT_SIZE * 1.2;
     const isStacked2 = mark.stackGroup !== void 0;
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
     const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
@@ -1850,7 +1852,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
       priority: "data",
       style: {
         fontFamily: "system-ui, -apple-system, sans-serif",
-        fontSize: LABEL_FONT_SIZE,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
         fill,
         lineHeight: 1.2,
@@ -1909,7 +1911,9 @@ var barRenderer = (spec, scales, chartArea, strategy, theme) => {
     spec.labels.prefix,
     valueField,
     spec.labels.color,
-    theme.isDark
+    theme.isDark,
+    spec.labels.fontSize,
+    spec.labels.suffix
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -2214,7 +2218,8 @@ import {
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
 var LABEL_OFFSET_Y = 8;
-function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor) {
+function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor, fontSize, labelSuffix) {
+  const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE2;
   const targetMarks = filterByDensity(marks, density);
   const formatter = buildD3Formatter2(labelFormat);
   const candidates = [];
@@ -2238,11 +2243,12 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
         valuePart = rawValue;
       }
     }
-    if (labelPrefix) valuePart = labelPrefix + valuePart;
     const numericValue = parseFloat(valuePart);
     const isNegative = Number.isFinite(numericValue) && numericValue < 0;
-    const textWidth = estimateTextWidth5(valuePart, LABEL_FONT_SIZE2, LABEL_FONT_WEIGHT2);
-    const textHeight = LABEL_FONT_SIZE2 * 1.2;
+    if (labelPrefix) valuePart = labelPrefix + valuePart;
+    if (labelSuffix) valuePart = valuePart + labelSuffix;
+    const textWidth = estimateTextWidth5(valuePart, FONT_SIZE, LABEL_FONT_WEIGHT2);
+    const textHeight = FONT_SIZE * 1.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({
@@ -2254,7 +2260,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
       priority: "data",
       style: {
         fontFamily: "system-ui, -apple-system, sans-serif",
-        fontSize: LABEL_FONT_SIZE2,
+        fontSize: FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT2,
         fill: labelColor ?? getRepresentativeColor2(mark.fill),
         lineHeight: 1.2,
@@ -2287,7 +2293,9 @@ var columnRenderer = (spec, scales, chartArea, strategy, _theme) => {
     spec.labels.format,
     spec.labels.prefix,
     valueField,
-    spec.labels.color
+    spec.labels.color,
+    spec.labels.fontSize,
+    spec.labels.suffix
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -7287,8 +7295,10 @@ function normalizeLabels(labels) {
     density: labels.density ?? "auto",
     format: labels.format ?? "",
     prefix: labels.prefix ?? "",
+    suffix: labels.suffix,
     offsets: labels.offsets,
-    color: labels.color
+    color: labels.color,
+    fontSize: labels.fontSize
   };
 }
 function normalizeChartSpec(spec, warnings) {
@@ -9758,22 +9768,23 @@ var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
 function formatTickLabel(value2, resolvedScale) {
   const axisConfig = resolvedScale.channel.axis || void 0;
   const formatStr = axisConfig?.format;
+  const suffix = axisConfig?.labelSuffix ?? "";
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
-    if (temporalFmt) return temporalFmt(value2);
+    if (temporalFmt) return temporalFmt(value2) + suffix;
     const useUtc = resolvedScale.type === "utc";
-    return formatDate(value2, void 0, void 0, useUtc);
+    return formatDate(value2, void 0, void 0, useUtc) + suffix;
   }
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value2;
     if (formatStr) {
       const fmt = buildD3Formatter5(formatStr);
-      if (fmt) return fmt(num);
+      if (fmt) return fmt(num) + suffix;
     }
-    if (Math.abs(num) >= 1e3) return abbreviateNumber2(num);
-    return formatNumber3(num);
+    if (Math.abs(num) >= 1e3) return abbreviateNumber2(num) + suffix;
+    return formatNumber3(num) + suffix;
   }
-  return String(value2);
+  return String(value2) + suffix;
 }
 function continuousTicks(resolvedScale, density, targetCount) {
   const scale = resolvedScale.scale;
@@ -10426,7 +10437,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const labelHeight = Math.min(rotatedHeight, 120);
     xAxisHeight = hasXAxisLabel ? labelHeight + 20 : labelHeight;
   } else {
-    xAxisHeight = hasXAxisLabel ? 48 : 26;
+    const base = theme.spacing.xAxisHeight;
+    xAxisHeight = hasXAxisLabel ? base + 22 : base;
   }
   const yAxisCfgPre = encoding.y?.axis ?? void 0;
   const yTickPositionExplicitPre = yAxisCfgPre?.tickPosition;