@opendata-ai/openchart-engine 7.1.3 → 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) {
+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;
@@ -1815,16 +1817,16 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     let textAnchor;
     if (isStacked2 && isInside) {
       anchorX = mark.x + mark.width / 2;
-      fill = pickLabelColor(bgColor);
+      fill = pickLabelColor(bgColor, darkMode);
       textAnchor = "middle";
     } else if (isInside) {
       if (isNegative) {
         anchorX = mark.x + LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = "start";
       } else {
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = "end";
       }
     } else {
@@ -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,
@@ -1898,7 +1900,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
 }
 
 // src/charts/bar/index.ts
-var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
+var barRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
   const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labels = computeBarLabels(
@@ -1908,7 +1910,10 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
     spec.labels.format,
     spec.labels.prefix,
     valueField,
-    spec.labels.color
+    spec.labels.color,
+    theme.isDark,
+    spec.labels.fontSize,
+    spec.labels.suffix
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -2213,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 = [];
@@ -2237,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({
@@ -2253,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,
@@ -2286,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];
@@ -7286,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) {
@@ -9757,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;
@@ -10145,6 +10157,7 @@ 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,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeChrome as computeChrome3,
@@ -10424,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;
@@ -10609,7 +10623,6 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         theme.fonts.weights.normal
       );
     }
-    const AXIS_TITLE_GAP = 8;
     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);
@@ -10619,6 +10632,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
     margins.right = Math.max(margins.right, hPad + options.rightAxisReserve);
   }
+  const hasTopLegend = "entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top";
   if ("entries" in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(width);
     if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
@@ -10627,7 +10641,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       margins.top += legendLayout.bounds.height + gap;
     }
   }
-  margins.top += topAxisGap;
+  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
   let chartArea = {
     x: margins.left,
     y: margins.top,
@@ -10648,13 +10662,14 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       bottomLegendReservation
     );
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
+    const fallbackEffectiveAxisGap = hasTopLegend ? inlineTickOverhang : fallbackTopAxisGap;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
     const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
-      margins.top = newTop + ("entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0) + fallbackTopAxisGap;
+      margins.top = newTop + ("entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0) + fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
       chartArea = {
         x: margins.left,
@@ -11059,7 +11074,13 @@ function computeScales(spec, chartArea, data) {
     const xStackEnabled = encoding.x.stack === true || encoding.x.stack === "zero" || encoding.x.stack === "normalize" || encoding.x.stack === "center";
     if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && xStackEnabled) {
       if (encoding.x.stack === "normalize") {
-        xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
+        const existingAxis = encoding.x.axis;
+        const axis = existingAxis === false || existingAxis?.format ? existingAxis : { ...typeof existingAxis === "object" ? existingAxis : {}, format: ".0%" };
+        xChannel = {
+          ...encoding.x,
+          scale: { ...encoding.x.scale, domain: [0, 1], nice: false },
+          axis
+        };
       } else if (encoding.x.stack === "center") {
         const yField = encoding.y?.field;
         const xField = encoding.x.field;
@@ -11126,7 +11147,13 @@ function computeScales(spec, chartArea, data) {
     }
     if ((isBarStacked || isAreaStacked) && encoding.color && encoding.y.type === "quantitative") {
       if (encoding.y.stack === "normalize") {
-        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+        const existingAxis = encoding.y.axis;
+        const axis = existingAxis === false || existingAxis?.format ? existingAxis : { ...typeof existingAxis === "object" ? existingAxis : {}, format: ".0%" };
+        yChannel = {
+          ...encoding.y,
+          scale: { ...encoding.y.scale, domain: [0, 1], nice: false },
+          axis
+        };
       } else if (encoding.y.stack === "center") {
         const xField = encoding.x?.field;
         const yField = encoding.y.field;