@opendata-ai/openchart-engine 7.1.4 → 7.2.1

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];
@@ -3924,6 +3932,7 @@ function computeLineLabels(marks, strategy, density = "auto", labelOffsets, spec
 }
 
 // src/charts/line/index.ts
+var AREA_POINT_RADIUS = 3;
 var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeLineMarks(spec, scales, chartArea, strategy);
   const lineMarks = marks.filter((m) => m.type === "line");
@@ -3949,7 +3958,8 @@ var areaRenderer = (spec, scales, chartArea, strategy, theme) => {
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && "field" in encoding.color);
   const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy);
-  return [...areas, ...lines];
+  const points = hasColor && spec.markDef.point ? pointsFromAreas(areas, spec.markDef.point) : [];
+  return [...areas, ...lines, ...points];
 };
 function linesFromAreas(areas) {
   return areas.map((a) => ({
@@ -3964,6 +3974,34 @@ function linesFromAreas(areas) {
     aria: { label: `${a.seriesKey ?? "Series"}: line with ${a.topPoints.length} data points` }
   }));
 }
+function pointsFromAreas(areas, pointMode) {
+  const isTransparent = pointMode === "transparent";
+  const isEndpoints = pointMode === "endpoints";
+  const points = [];
+  for (const a of areas) {
+    const stroke = getRepresentativeColor6(a.fill);
+    const lastIdx = a.topPoints.length - 1;
+    for (let i = 0; i < a.topPoints.length; i++) {
+      const pt = a.topPoints[i];
+      const isEndpoint = i === 0 || i === lastIdx;
+      const visible = !isTransparent && (!isEndpoints || isEndpoint);
+      const hollow = isEndpoints && visible;
+      points.push({
+        type: "point",
+        cx: pt.x,
+        cy: pt.y,
+        r: visible ? AREA_POINT_RADIUS : 0,
+        fill: hollow ? "transparent" : stroke,
+        stroke: hollow ? stroke : visible ? "#ffffff" : "transparent",
+        strokeWidth: visible ? 1.5 : 0,
+        fillOpacity: isTransparent ? 0 : 1,
+        data: a.data[i] ?? {},
+        aria: { decorative: true }
+      });
+    }
+  }
+  return points;
+}
 
 // src/charts/pie/compute.ts
 import { isConditionalDef, isGradientDef as isGradientDef4 } from "@opendata-ai/openchart-core";
@@ -7287,8 +7325,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 +9798,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 +10467,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;
@@ -10966,7 +11008,7 @@ function buildBandScale(channel, data, rangeStart, rangeEnd) {
 }
 function buildPointScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
-  const padding = channel.scale?.padding ?? 0.5;
+  const padding = channel.scale?.padding ?? channel.scale?.paddingOuter ?? 0.5;
   const scale = point4().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.reverse) {
     const [r0, r1] = scale.range();