@opendata-ai/openchart-engine 6.7.1 → 6.9.0

package/dist/index.d.ts

@@ -298,11 +298,14 @@ interface NormalizedSankeySpec {
     nodeAlign: SankeyNodeAlign;
     iterations: number;
     linkStyle: SankeyLinkColor;
+    nodeLabelAlign: 'auto' | 'left' | 'right';
     chrome: NormalizedChrome;
     legend?: LegendConfig;
     theme: ThemeConfig;
     darkMode: DarkMode;
     animation?: AnimationSpec;
+    valueFormat?: string;
+    linkOpacity?: number;
 }
 
 /**

package/dist/index.js

@@ -296,19 +296,61 @@ 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 = anchor === "bottom" ? 14 : -4;
+    const anchor = annotation.labelAnchor ?? (isHorizontal ? "top" : "left");
+    let baseDx;
+    let baseDy;
+    let labelX;
+    let labelY;
+    let textAnchor;
+    if (isHorizontal) {
+      if (anchor === "left") {
+        baseDx = 4;
+        baseDy = -4;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "start";
+      } else if (anchor === "bottom") {
+        baseDx = -4;
+        baseDy = 14;
+        labelX = end.x;
+        labelY = end.y;
+        textAnchor = "end";
+      } else {
+        baseDx = -4;
+        baseDy = -4;
+        labelX = end.x;
+        labelY = end.y;
+        textAnchor = "end";
+      }
+    } else {
+      if (anchor === "right") {
+        baseDx = -4;
+        baseDy = 14;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "end";
+      } else if (anchor === "bottom") {
+        baseDx = 4;
+        baseDy = -4;
+        labelX = start.x;
+        labelY = end.y;
+        textAnchor = "start";
+      } else {
+        baseDx = 4;
+        baseDy = 14;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "start";
+      }
+    }
     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);
-    if (isHorizontal) {
-      style.textAnchor = "end";
-    }
+    style.textAnchor = textAnchor;
     label = {
       text: annotation.label,
-      x: (isHorizontal ? end.x : start.x) + labelDelta.dx,
-      y: (isHorizontal ? end.y : start.y) + labelDelta.dy,
+      x: labelX + labelDelta.dx,
+      y: labelY + labelDelta.dy,
       style,
       visible: true
     };
@@ -729,7 +771,22 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
       conditionalColor
     );
   }
-  return computeStackedBars(
+  const categoryGroups = groupByField(spec.data, yChannel.field);
+  const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
+  if (needsStacking) {
+    return computeStackedBars(
+      spec.data,
+      xChannel.field,
+      yChannel.field,
+      colorField,
+      xScale,
+      yScale,
+      bandwidth,
+      baseline,
+      scales
+    );
+  }
+  return computeColoredBars(
     spec.data,
     xChannel.field,
     yChannel.field,
@@ -777,6 +834,36 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
   }
   return marks;
 }
+function computeColoredBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, baseline, scales) {
+  const marks = [];
+  for (const row of data) {
+    const category = String(row[categoryField] ?? "");
+    const value2 = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value2)) continue;
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    const groupKey = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey);
+    const xPos = value2 >= 0 ? baseline : xScale(value2);
+    const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
+    const aria = {
+      label: `${category}, ${groupKey}: ${formatBarValue(value2)}`
+    };
+    marks.push({
+      type: "rect",
+      x: xPos,
+      y: bandY,
+      width: barWidth,
+      height: bandwidth,
+      fill: color2,
+      cornerRadius: 2,
+      data: row,
+      aria,
+      orient: "horizontal"
+    });
+  }
+  return marks;
+}
 function computeSimpleBars(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false, conditionalColor) {
   const marks = [];
   for (const row of data) {
@@ -6024,11 +6111,14 @@ function normalizeSankeySpec(spec, _warnings) {
     nodeAlign: spec.nodeAlign ?? "justify",
     iterations: spec.iterations ?? 6,
     linkStyle: spec.linkStyle ?? "gradient",
+    nodeLabelAlign: spec.nodeLabelAlign ?? "auto",
     chrome: normalizeChrome(spec.chrome),
     legend: spec.legend,
     theme: spec.theme ?? {},
     darkMode: spec.darkMode ?? "off",
-    animation: spec.animation
+    animation: spec.animation,
+    valueFormat: spec.valueFormat,
+    linkOpacity: spec.linkOpacity
   };
 }
 function normalizeGraphSpec(spec, _warnings) {
@@ -8270,7 +8360,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entries = truncateEntries(entries, limit);
     }
   }
-  const maxRows = spec.legend?.columns != null ? Math.ceil(entries.length / spec.legend.columns) : TOP_LEGEND_MAX_ROWS;
+  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);
@@ -8314,6 +8404,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
 // src/sankey/compile-sankey.ts
 import {
   adaptTheme as adaptTheme2,
+  buildD3Formatter as buildD3Formatter4,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth10,
   formatNumber as formatNumber4,
@@ -8789,7 +8880,8 @@ var SWATCH_SIZE3 = 12;
 var SWATCH_GAP3 = 6;
 var ENTRY_GAP3 = 16;
 var LABEL_GAP = 6;
-var LINK_OPACITY = 0.35;
+var LINK_OPACITY_LIGHT = 0.5;
+var LINK_OPACITY_DARK = 0.75;
 var NODE_CORNER_RADIUS = 2;
 function pickColor(palette, index) {
   return palette[index % palette.length];
@@ -8833,9 +8925,16 @@ function getLinkColors(linkStyle, sourceColor, targetColor, neutralColor) {
       return { sourceColor, targetColor };
   }
 }
-function computeNodeLabel(node, maxDepth, theme, nodeWidth) {
+function computeNodeLabel(node, maxDepth, theme, nodeWidth, nodeLabelAlign = "auto") {
   const depth = node.depth ?? 0;
-  const isRightmost = depth === maxDepth;
+  let placeLeft;
+  if (nodeLabelAlign === "left") {
+    placeLeft = true;
+  } else if (nodeLabelAlign === "right") {
+    placeLeft = false;
+  } else {
+    placeLeft = depth === maxDepth;
+  }
   const style = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -8848,7 +8947,7 @@ function computeNodeLabel(node, maxDepth, theme, nodeWidth) {
   const y0 = node.y0 ?? 0;
   const y1 = node.y1 ?? 0;
   const midY = (y0 + y1) / 2;
-  if (isRightmost) {
+  if (placeLeft) {
     return {
       text: node.label ?? node.id,
       x: x0 - LABEL_GAP,
@@ -8874,9 +8973,14 @@ function compileSankey(spec, options) {
   }
   const sankeySpec = normalized;
   const mergedThemeConfig = options.theme ? { ...sankeySpec.theme, ...options.theme } : sankeySpec.theme;
-  let theme = resolveTheme2(mergedThemeConfig);
+  const lightTheme = resolveTheme2(mergedThemeConfig);
+  let theme = lightTheme;
   if (options.darkMode) {
     theme = adaptTheme2(theme);
+    theme = {
+      ...theme,
+      colors: { ...theme.colors, categorical: lightTheme.colors.categorical }
+    };
   }
   const chrome = computeChrome3(
     {
@@ -8936,17 +9040,55 @@ function compileSankey(spec, options) {
   if (area.height <= 0) {
     return emptyLayout(area, chrome, theme, options);
   }
-  const { nodes, links } = computeSankeyLayout(
+  const labelFontSize = theme.fonts.sizes.small;
+  const labelFontWeight = theme.fonts.weights.normal;
+  const nodeWidth = sankeySpec.nodeWidth ?? 12;
+  let layoutArea = { ...area };
+  let { nodes, links } = computeSankeyLayout(
     sankeySpec.data,
     sourceField,
     targetField,
     valueField,
-    area,
+    layoutArea,
     sankeySpec.nodeWidth,
     sankeySpec.nodePadding,
     sankeySpec.nodeAlign,
     sankeySpec.iterations
   );
+  const nodeLabelAlign = sankeySpec.nodeLabelAlign ?? "auto";
+  const maxDepthFirst = nodes.reduce((max4, n) => Math.max(max4, n.depth ?? 0), 0);
+  const rightEdge = area.x + area.width;
+  let maxOverflow = 0;
+  for (const node of nodes) {
+    const depth = node.depth ?? 0;
+    const labelsLeft = nodeLabelAlign === "left" || nodeLabelAlign === "auto" && depth === maxDepthFirst;
+    if (labelsLeft) continue;
+    const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP;
+    const labelText = node.label ?? node.id;
+    const labelWidth = estimateTextWidth10(labelText, labelFontSize, labelFontWeight);
+    const overflow = labelX + labelWidth - rightEdge;
+    if (overflow > maxOverflow) maxOverflow = overflow;
+  }
+  if (maxOverflow > 0) {
+    const margin = Math.ceil(maxOverflow) + 4;
+    layoutArea = {
+      x: area.x,
+      y: area.y,
+      width: Math.max(area.width - margin, 40),
+      height: area.height
+    };
+    ({ nodes, links } = computeSankeyLayout(
+      sankeySpec.data,
+      sourceField,
+      targetField,
+      valueField,
+      layoutArea,
+      sankeySpec.nodeWidth,
+      sankeySpec.nodePadding,
+      sankeySpec.nodeAlign,
+      sankeySpec.iterations
+    ));
+  }
   const nodeColorMap = buildNodeColorMap(
     nodes,
     theme.colors.categorical,
@@ -8967,14 +9109,14 @@ function compileSankey(spec, options) {
       height: (node.y1 ?? 0) - (node.y0 ?? 0),
       fill,
       cornerRadius: NODE_CORNER_RADIUS,
-      label: computeNodeLabel(node, maxDepth, theme, sankeySpec.nodeWidth),
+      label: computeNodeLabel(node, maxDepth, theme, sankeySpec.nodeWidth, nodeLabelAlign),
       nodeId: node.id,
       value: node.value ?? 0,
       depth,
       data: { id: node.id, label: node.label },
       aria: {
         role: "img",
-        label: `${node.label}: ${formatNumber4(node.value ?? 0)}`
+        label: `${node.label}: ${formatFlowValue(node.value ?? 0, sankeySpec.valueFormat)}`
       },
       animationIndex: 0
       // Reassigned below after sorting by depth
@@ -8996,7 +9138,7 @@ function compileSankey(spec, options) {
       path: generateLinkPath(link),
       sourceColor: colors.sourceColor,
       targetColor: colors.targetColor,
-      fillOpacity: LINK_OPACITY,
+      fillOpacity: sankeySpec.linkOpacity ?? (options.darkMode ? LINK_OPACITY_DARK : LINK_OPACITY_LIGHT),
       sourceId: sourceNode.id,
       targetId: targetNode.id,
       width: link.width ?? 0,
@@ -9004,7 +9146,7 @@ function compileSankey(spec, options) {
       data: link.data ?? {},
       aria: {
         role: "img",
-        label: `${sourceNode.label} to ${targetNode.label}: ${formatNumber4(link.value)}`
+        label: `${sourceNode.label} to ${targetNode.label}: ${formatFlowValue(link.value, sankeySpec.valueFormat)}`
       },
       // Links animate after nodes
       animationIndex: nodeMarks.length + i
@@ -9019,7 +9161,7 @@ function compileSankey(spec, options) {
     theme,
     fullArea
   );
-  const tooltipDescriptors = buildTooltipDescriptors(nodeMarks, linkMarks);
+  const tooltipDescriptors = buildTooltipDescriptors(nodeMarks, linkMarks, sankeySpec.valueFormat);
   const a11y = {
     altText: `Sankey diagram with ${nodeMarks.length} nodes and ${linkMarks.length} links`,
     dataTableFallback: linkMarks.map((l) => [l.sourceId, l.targetId, String(l.value)]),
@@ -9111,13 +9253,20 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
     entryGap: ENTRY_GAP3
   };
 }
-function buildTooltipDescriptors(nodes, links) {
+function formatFlowValue(value2, valueFormat) {
+  if (valueFormat) {
+    const fmt = buildD3Formatter4(valueFormat);
+    if (fmt) return fmt(value2);
+  }
+  return formatNumber4(value2);
+}
+function buildTooltipDescriptors(nodes, links, valueFormat) {
   const descriptors = /* @__PURE__ */ new Map();
   for (const node of nodes) {
     const fields = [
       {
         label: "Total flow",
-        value: formatNumber4(node.value)
+        value: formatFlowValue(node.value, valueFormat)
       }
     ];
     descriptors.set(`node-${node.nodeId}`, {
@@ -9125,14 +9274,15 @@ function buildTooltipDescriptors(nodes, links) {
       fields
     });
   }
-  for (const link of links) {
+  for (let i = 0; i < links.length; i++) {
+    const link = links[i];
     const fields = [
       {
         label: "Flow",
-        value: formatNumber4(link.value)
+        value: formatFlowValue(link.value, valueFormat)
       }
     ];
-    descriptors.set(`link-${link.sourceId}-${link.targetId}`, {
+    descriptors.set(`link-${link.sourceId}-${link.targetId}-${i}`, {
       title: `${link.sourceId} \u2192 ${link.targetId}`,
       fields
     });
@@ -9284,7 +9434,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 }
 
 // src/tables/format-cells.ts
-import { formatDate as formatDate2, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
+import { buildD3Formatter as buildD3Formatter5, formatDate as formatDate2, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
 function isNumericValue(value2) {
   if (typeof value2 === "number") return Number.isFinite(value2);
   return false;
@@ -9303,14 +9453,13 @@ function formatCell(value2, column) {
     };
   }
   if (column.format && isNumericValue(value2)) {
-    try {
-      const formatter = format(column.format);
+    const formatter = buildD3Formatter5(column.format);
+    if (formatter) {
       return {
         value: value2,
         formattedValue: formatter(value2),
         style
       };
-    } catch {
     }
   }
   if (isNumericValue(value2)) {
@@ -9336,9 +9485,9 @@ function formatCell(value2, column) {
 function formatValueForSearch(value2, column) {
   if (value2 == null) return "";
   if (column.format && isNumericValue(value2)) {
-    try {
-      return format(column.format)(value2);
-    } catch {
+    const formatter = buildD3Formatter5(column.format);
+    if (formatter) {
+      return formatter(value2);
     }
   }
   if (isNumericValue(value2)) {