@opendata-ai/openchart-engine 6.19.3 → 6.20.0

package/dist/index.js

@@ -583,7 +583,7 @@ function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, o
 }
 
 // src/charts/bar/compute.ts
-import { abbreviateNumber, formatNumber, isGradientDef } from "@opendata-ai/openchart-core";
+import { isGradientDef } from "@opendata-ai/openchart-core";
 
 // src/transforms/predicates.ts
 function isFieldPredicate(pred) {
@@ -653,6 +653,13 @@ function isConditionalValueDef(def) {
   return def !== null && typeof def === "object" && "condition" in def;
 }
 
+// src/charts/_shared/format-label-value.ts
+import { abbreviateNumber, formatNumber } from "@opendata-ai/openchart-core";
+function formatLabelValue(value2) {
+  if (Math.abs(value2) >= 1e3) return abbreviateNumber(value2);
+  return formatNumber(value2);
+}
+
 // src/charts/utils.ts
 var DEFAULT_COLOR = "#1b7fa3";
 function scaleValue(scale, scaleType, value2) {
@@ -735,10 +742,6 @@ function orientGradientForHorizontalBar(grad) {
   return { ...lg, x1: 0, y1: 0, x2: 1, y2: 0 };
 }
 var MIN_BAR_WIDTH = 1;
-function formatBarValue(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber(value2);
-  return formatNumber(value2);
-}
 function computeBarMarks(spec, scales, _chartArea, _strategy) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -836,7 +839,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
       const xRight = xScale(cumulativeValue + value2);
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatBarValue(rawValue)}`
+        label: `${category}, ${groupKey2}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -883,7 +886,7 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
       const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
       const subY = bandY + groupIndex * (subBandHeight + gap);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatBarValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -914,7 +917,7 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
     const xPos = value2 >= 0 ? baseline : xScale(value2);
     const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
     const aria = {
-      label: `${category}, ${groupKey2}: ${formatBarValue(value2)}`
+      label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -955,7 +958,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
     const xPos = value2 >= 0 ? baseline : xScale(value2);
     const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
     const aria = {
-      label: `${category}: ${formatBarValue(value2)}`
+      label: `${category}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -975,17 +978,11 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 
 // src/charts/bar/labels.ts
 import {
-  abbreviateNumber as abbreviateNumber2,
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth2,
-  formatNumber as formatNumber2,
   getRepresentativeColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
-function formatBarValue2(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber2(value2);
-  return formatNumber2(value2);
-}
 var SUFFIX_MULTIPLIERS = {
   K: 1e3,
   M: 1e6,
@@ -1023,7 +1020,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatBarValue2(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       const ariaLabel = mark.aria.label;
       const lastColon = ariaLabel.lastIndexOf(":");
@@ -1135,12 +1132,8 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/column/compute.ts
-import { abbreviateNumber as abbreviateNumber3, formatNumber as formatNumber3, isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
+import { isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
 var MIN_COLUMN_HEIGHT = 1;
-function formatColumnValue(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber3(value2);
-  return formatNumber3(value2);
-}
 function computeColumnMarks(spec, scales, _chartArea, _strategy) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -1241,7 +1234,7 @@ function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, b
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value2 >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}: ${formatColumnValue(value2)}`
+      label: `${category}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -1272,7 +1265,7 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value2 >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
+      label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -1320,7 +1313,7 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
       const y2 = value2 >= 0 ? yPos : baseline;
       const subX = bandX + groupIndex * (subBandWidth + gap);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -1360,7 +1353,7 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
       const yBottom = yScale(cumulativeValue);
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatColumnValue(rawValue)}`
+        label: `${category}, ${groupKey2}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -1383,17 +1376,11 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
 
 // src/charts/column/labels.ts
 import {
-  abbreviateNumber as abbreviateNumber4,
   buildD3Formatter as buildD3Formatter2,
   estimateTextWidth as estimateTextWidth3,
-  formatNumber as formatNumber4,
   getRepresentativeColor as getRepresentativeColor2,
   resolveCollisions as resolveCollisions2
 } from "@opendata-ai/openchart-core";
-function formatColumnValue2(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber4(value2);
-  return formatNumber4(value2);
-}
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
 var LABEL_OFFSET_Y = 6;
@@ -1408,7 +1395,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatColumnValue2(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       const ariaLabel = mark.aria.label;
       const lastColon = ariaLabel.lastIndexOf(":");
@@ -1627,17 +1614,11 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
 
 // src/charts/dot/labels.ts
 import {
-  abbreviateNumber as abbreviateNumber5,
   buildD3Formatter as buildD3Formatter3,
   estimateTextWidth as estimateTextWidth4,
-  formatNumber as formatNumber5,
   getRepresentativeColor as getRepresentativeColor3,
   resolveCollisions as resolveCollisions3
 } from "@opendata-ai/openchart-core";
-function formatDotValue(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber5(value2);
-  return formatNumber5(value2);
-}
 var LABEL_FONT_SIZE3 = 11;
 var LABEL_FONT_WEIGHT3 = 600;
 var LABEL_OFFSET_X = 10;
@@ -1652,7 +1633,7 @@ function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix, labe
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatDotValue(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       const ariaLabel = mark.aria.label;
       const lastColon = ariaLabel.lastIndexOf(":");
@@ -7769,12 +7750,12 @@ var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes.ts
 import {
-  abbreviateNumber as abbreviateNumber6,
+  abbreviateNumber as abbreviateNumber2,
   buildD3Formatter as buildD3Formatter4,
   buildTemporalFormatter,
   estimateTextWidth as estimateTextWidth7,
   formatDate,
-  formatNumber as formatNumber6
+  formatNumber as formatNumber2
 } from "@opendata-ai/openchart-core";
 var TICK_COUNTS = {
   full: 12,
@@ -7904,8 +7885,8 @@ function formatTickLabel(value2, resolvedScale) {
       const fmt = buildD3Formatter4(formatStr);
       if (fmt) return fmt(num);
     }
-    if (Math.abs(num) >= 1e3) return abbreviateNumber6(num);
-    return formatNumber6(num);
+    if (Math.abs(num) >= 1e3) return abbreviateNumber2(num);
+    return formatNumber2(num);
   }
   return String(value2);
 }
@@ -8719,10 +8700,46 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { BRAND_RESERVE_WIDTH, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+import { BRAND_RESERVE_WIDTH, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
+
+// src/legend/wrap.ts
+import { estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
+function measureLegendWrap(entries, maxWidth, labelStyle, maxRows) {
+  if (entries.length === 0) {
+    return { rowCount: 0, fittingCount: 0, rowWidths: [] };
+  }
+  let rowCount = 1;
+  let rowWidth = 0;
+  const rowWidths = [];
+  let fittingCount = entries.length;
+  let fittingCountLocked = false;
+  for (let i = 0; i < entries.length; i++) {
+    const labelWidth = estimateTextWidth9(
+      entries[i].label,
+      labelStyle.fontSize,
+      labelStyle.fontWeight
+    );
+    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
+      rowWidths.push(rowWidth);
+      rowCount++;
+      rowWidth = entryWidth;
+      if (!fittingCountLocked && maxRows != null && rowCount > maxRows) {
+        fittingCount = i;
+        fittingCountLocked = true;
+      }
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  rowWidths.push(rowWidth);
+  return { rowCount, fittingCount, rowWidths };
+}
+
+// src/legend/compute.ts
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
@@ -8763,26 +8780,6 @@ function extractColorEntries(spec, theme) {
     };
   });
 }
-function entriesThatFit(entries, maxWidth, maxRows, labelStyle) {
-  let row = 1;
-  let rowWidth = 0;
-  for (let i = 0; i < entries.length; i++) {
-    const labelWidth = estimateTextWidth9(
-      entries[i].label,
-      labelStyle.fontSize,
-      labelStyle.fontWeight
-    );
-    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
-    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
-      row++;
-      rowWidth = entryWidth;
-      if (row > maxRows) return i;
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
-  return entries.length;
-}
 function truncateEntries(entries, maxCount) {
   if (maxCount >= entries.length || maxCount <= 0) return entries;
   const truncated = entries.slice(0, maxCount);
@@ -8850,7 +8847,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   }
   if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
     const maxLabelWidth = Math.max(
-      ...entries.map((e) => estimateTextWidth9(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+      ...entries.map((e) => estimateTextWidth10(e.label, labelStyle.fontSize, labelStyle.fontWeight))
     );
     const legendWidth = Math.min(
       LEGEND_RIGHT_WIDTH,
@@ -8896,26 +8893,15 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     }
   }
   const maxRows = spec.legend?.maxRows != null ? Math.max(1, spec.legend.maxRows) : spec.legend?.columns != null ? Math.ceil(entries.length / spec.legend.columns) : TOP_LEGEND_MAX_ROWS;
-  const maxFit = entriesThatFit(entries, availableWidth, maxRows, labelStyle);
-  if (maxFit < entries.length) {
-    entries = truncateEntries(entries, maxFit);
+  const { fittingCount } = measureLegendWrap(entries, availableWidth, labelStyle, maxRows);
+  if (fittingCount < entries.length) {
+    entries = truncateEntries(entries, fittingCount);
   }
   const totalWidth = entries.reduce((sum2, entry) => {
-    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const labelWidth = estimateTextWidth10(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
     return sum2 + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
   }, 0);
-  let rowCount = 1;
-  let rowWidth = 0;
-  for (const entry of entries) {
-    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
-    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
-    if (rowWidth + entryWidth > availableWidth && rowWidth > 0) {
-      rowCount++;
-      rowWidth = entryWidth;
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
+  const { rowCount } = measureLegendWrap(entries, availableWidth, labelStyle);
   const rowHeight = SWATCH_SIZE2 + 4;
   const legendHeight = rowCount * rowHeight + LEGEND_PADDING * 2;
   const offsetDx = spec.legend?.offset?.dx ?? 0;
@@ -8941,8 +8927,8 @@ import {
   adaptTheme as adaptTheme2,
   buildD3Formatter as buildD3Formatter5,
   computeChrome as computeChrome3,
-  estimateTextWidth as estimateTextWidth10,
-  formatNumber as formatNumber7,
+  estimateTextWidth as estimateTextWidth11,
+  formatNumber as formatNumber3,
   resolveTheme as resolveTheme2
 } from "@opendata-ai/openchart-core";
 
@@ -9418,9 +9404,6 @@ function generateLinkPath(link) {
 }
 
 // src/sankey/compile-sankey.ts
-var SWATCH_SIZE3 = 12;
-var SWATCH_GAP3 = 6;
-var ENTRY_GAP3 = 16;
 var LABEL_GAP = 6;
 var LINK_OPACITY_LIGHT = 0.5;
 var LINK_OPACITY_DARK = 0.75;
@@ -9625,7 +9608,7 @@ function compileSankey(spec, options) {
     if (labelsLeft) continue;
     const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP;
     const labelText = node.label ?? node.id;
-    const labelWidth = estimateTextWidth10(labelText, labelFontSize, labelFontWeight);
+    const labelWidth = estimateTextWidth11(labelText, labelFontSize, labelFontWeight);
     const overflow = labelX + labelWidth - rightEdge;
     if (overflow > maxOverflow) maxOverflow = overflow;
   }
@@ -9790,22 +9773,11 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
   }
   let bounds = { x: 0, y: 0, width: 0, height: 0 };
   if (entries.length > 0) {
-    const ROW_HEIGHT = SWATCH_SIZE3 + 4;
+    const ROW_HEIGHT = SWATCH_SIZE2 + 4;
     const availableWidth = area.width;
-    let rowCount = 1;
-    let rowX = 0;
-    for (const entry of entries) {
-      const labelWidth = estimateTextWidth10(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
-      const entryWidth = SWATCH_SIZE3 + SWATCH_GAP3 + labelWidth + ENTRY_GAP3;
-      if (rowX > 0 && rowX + entryWidth > availableWidth) {
-        rowCount++;
-        rowX = entryWidth;
-      } else {
-        rowX += entryWidth;
-      }
-    }
-    rowCount = Math.min(rowCount, 2);
-    const legendHeight = rowCount * ROW_HEIGHT;
+    const { rowCount } = measureLegendWrap(entries, availableWidth, labelStyle);
+    const cappedRowCount = Math.min(rowCount, 2);
+    const legendHeight = cappedRowCount * ROW_HEIGHT;
     bounds = {
       x: area.x,
       y: area.y,
@@ -9818,9 +9790,9 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
     entries,
     bounds,
     labelStyle,
-    swatchSize: SWATCH_SIZE3,
-    swatchGap: SWATCH_GAP3,
-    entryGap: ENTRY_GAP3
+    swatchSize: SWATCH_SIZE2,
+    swatchGap: SWATCH_GAP2,
+    entryGap: ENTRY_GAP2
   };
 }
 function formatFlowValue(value2, valueFormat) {
@@ -9828,7 +9800,7 @@ function formatFlowValue(value2, valueFormat) {
     const fmt = buildD3Formatter5(valueFormat);
     if (fmt) return fmt(value2);
   }
-  return formatNumber7(value2);
+  return formatNumber3(value2);
 }
 function buildTooltipDescriptors(nodes, links, valueFormat) {
   const descriptors = /* @__PURE__ */ new Map();
@@ -9876,9 +9848,9 @@ function emptyLayout(area, chrome, theme, options, watermark) {
         fill: theme.colors.text,
         lineHeight: 1.3
       },
-      swatchSize: SWATCH_SIZE3,
-      swatchGap: SWATCH_GAP3,
-      entryGap: ENTRY_GAP3
+      swatchSize: SWATCH_SIZE2,
+      swatchGap: SWATCH_GAP2,
+      entryGap: ENTRY_GAP2
     },
     tooltipDescriptors: /* @__PURE__ */ new Map(),
     a11y: {
@@ -9897,7 +9869,7 @@ function emptyLayout(area, chrome, theme, options, watermark) {
 }
 
 // src/tables/compile-table.ts
-import { computeChrome as computeChrome4, estimateTextWidth as estimateTextWidth11 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome4, estimateTextWidth as estimateTextWidth12 } from "@opendata-ai/openchart-core";
 
 // src/tables/bar-column.ts
 var NEGATIVE_BAR_COLOR = "#c44e52";
@@ -10014,7 +9986,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 }
 
 // src/tables/format-cells.ts
-import { buildD3Formatter as buildD3Formatter6, formatDate as formatDate2, formatNumber as formatNumber8 } from "@opendata-ai/openchart-core";
+import { buildD3Formatter as buildD3Formatter6, formatDate as formatDate2, formatNumber as formatNumber4 } from "@opendata-ai/openchart-core";
 function isNumericValue(value2) {
   if (typeof value2 === "number") return Number.isFinite(value2);
   return false;
@@ -10045,7 +10017,7 @@ function formatCell(value2, column) {
   if (isNumericValue(value2)) {
     return {
       value: value2,
-      formattedValue: formatNumber8(value2),
+      formattedValue: formatNumber4(value2),
       style
     };
   }
@@ -10071,7 +10043,7 @@ function formatValueForSearch(value2, column) {
     }
   }
   if (isNumericValue(value2)) {
-    return formatNumber8(value2);
+    return formatNumber4(value2);
   }
   return String(value2);
 }
@@ -10312,13 +10284,13 @@ function estimateColumnWidth(col, data, fontSize) {
   if (col.image) return (col.image.width ?? 24) + PADDING;
   if (col.flag) return 60;
   const label = col.label ?? col.key;
-  const headerWidth = estimateTextWidth11(label, fontSize, 600) + PADDING;
+  const headerWidth = estimateTextWidth12(label, fontSize, 600) + PADDING;
   const sampleSize = Math.min(100, data.length);
   let maxDataWidth = 0;
   for (let i = 0; i < sampleSize; i++) {
     const val = data[i][col.key];
     const text = val == null ? "" : String(val);
-    const width = estimateTextWidth11(text, fontSize, 400) + PADDING;
+    const width = estimateTextWidth12(text, fontSize, 400) + PADDING;
     if (width > maxDataWidth) maxDataWidth = width;
   }
   return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
@@ -10546,7 +10518,7 @@ function compileTableLayout(spec, options, theme) {
 import {
   buildTemporalFormatter as buildTemporalFormatter2,
   formatDate as formatDate3,
-  formatNumber as formatNumber9,
+  formatNumber as formatNumber5,
   getRepresentativeColor as getRepresentativeColor10
 } from "@opendata-ai/openchart-core";
 function formatValue(value2, fieldType, format2) {
@@ -10561,10 +10533,10 @@ function formatValue(value2, fieldType, format2) {
       try {
         return format(format2)(value2);
       } catch {
-        return formatNumber9(value2);
+        return formatNumber5(value2);
       }
     }
-    return formatNumber9(value2);
+    return formatNumber5(value2);
   }
   return String(value2);
 }