@opendata-ai/openchart-engine 6.8.0 → 6.10.0

package/dist/index.d.ts

@@ -298,6 +298,7 @@ interface NormalizedSankeySpec {
     nodeAlign: SankeyNodeAlign;
     iterations: number;
     linkStyle: SankeyLinkColor;
+    nodeLabelAlign: 'auto' | 'left' | 'right';
     chrome: NormalizedChrome;
     legend?: LegendConfig;
     theme: ThemeConfig;

package/dist/index.js

@@ -774,6 +774,20 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
   const categoryGroups = groupByField(spec.data, yChannel.field);
   const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
   if (needsStacking) {
+    const stackDisabled = xChannel.stack === null || xChannel.stack === false;
+    if (stackDisabled) {
+      return computeGroupedBars(
+        spec.data,
+        xChannel.field,
+        yChannel.field,
+        colorField,
+        xScale,
+        yScale,
+        bandwidth,
+        baseline,
+        scales
+      );
+    }
     return computeStackedBars(
       spec.data,
       xChannel.field,
@@ -834,6 +848,51 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
   }
   return marks;
 }
+function computeGroupedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, baseline, scales) {
+  const marks = [];
+  const categoryGroups = groupByField(data, categoryField);
+  const groupIndexMap = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = String(row[colorField] ?? "");
+    if (!groupIndexMap.has(key)) {
+      groupIndexMap.set(key, groupIndexMap.size);
+    }
+  }
+  const groupCount = groupIndexMap.size;
+  if (groupCount === 0) return marks;
+  const gap = Math.min(1, bandwidth * 0.05);
+  const subBandHeight = Math.max((bandwidth - gap * (groupCount - 1)) / groupCount, MIN_BAR_WIDTH);
+  for (const [category, rows] of categoryGroups) {
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? "");
+      const value2 = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value2)) continue;
+      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
+      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 subY = bandY + groupIndex * (subBandHeight + gap);
+      const aria = {
+        label: `${category}, ${groupKey}: ${formatBarValue(value2)}`
+      };
+      marks.push({
+        type: "rect",
+        x: xPos,
+        y: subY,
+        width: barWidth,
+        height: subBandHeight,
+        fill: color2,
+        cornerRadius: 2,
+        data: row,
+        aria,
+        orient: "horizontal"
+      });
+    }
+  }
+  return marks;
+}
 function computeColoredBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, baseline, scales) {
   const marks = [];
   for (const row of data) {
@@ -1072,6 +1131,20 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
     const categoryGroups = groupByField(spec.data, xChannel.field);
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
     if (needsStacking) {
+      const stackDisabled = yChannel.stack === null || yChannel.stack === false;
+      if (stackDisabled) {
+        return computeGroupedColumns(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales
+        );
+      }
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -1179,6 +1252,55 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
   }
   return marks;
 }
+function computeGroupedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, baseline, scales) {
+  const marks = [];
+  const categoryGroups = groupByField(data, categoryField);
+  const groupIndexMap = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = String(row[colorField] ?? "");
+    if (!groupIndexMap.has(key)) {
+      groupIndexMap.set(key, groupIndexMap.size);
+    }
+  }
+  const groupCount = groupIndexMap.size;
+  if (groupCount === 0) return marks;
+  const gap = Math.min(1, bandwidth * 0.05);
+  const subBandWidth = Math.max(
+    (bandwidth - gap * (groupCount - 1)) / groupCount,
+    MIN_COLUMN_HEIGHT
+  );
+  for (const [category, rows] of categoryGroups) {
+    const bandX = xScale(category);
+    if (bandX === void 0) continue;
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? "");
+      const value2 = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value2)) continue;
+      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
+      const color2 = getColor(scales, groupKey);
+      const yPos = yScale(value2);
+      const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
+      const y2 = value2 >= 0 ? yPos : baseline;
+      const subX = bandX + groupIndex * (subBandWidth + gap);
+      const aria = {
+        label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+      };
+      marks.push({
+        type: "rect",
+        x: subX,
+        y: y2,
+        width: subBandWidth,
+        height: columnHeight,
+        fill: color2,
+        cornerRadius: 2,
+        data: row,
+        aria,
+        orient: "vertical"
+      });
+    }
+  }
+  return marks;
+}
 function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
   const marks = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -6111,6 +6233,7 @@ 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 ?? {},
@@ -8129,7 +8252,8 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.x) {
     let xData = data;
-    if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative") {
+    const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
+    if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && !xStackDisabled) {
       const yField = encoding.y?.field;
       const xField = encoding.x.field;
       if (yField) {
@@ -8157,7 +8281,8 @@ function computeScales(spec, chartArea, data) {
   if (encoding.y) {
     let yData = data;
     const isVerticalBar = spec.markType === "bar" && (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") && encoding.y.type === "quantitative";
-    if ((isVerticalBar || spec.markType === "area") && encoding.color && encoding.y.type === "quantitative") {
+    const yStackDisabled = encoding.y.stack === null || encoding.y.stack === false;
+    if ((isVerticalBar || spec.markType === "area") && encoding.color && encoding.y.type === "quantitative" && !yStackDisabled) {
       const xField = encoding.x?.field;
       const yField = encoding.y.field;
       if (xField) {
@@ -8924,9 +9049,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,
@@ -8939,7 +9071,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,
@@ -9047,12 +9179,14 @@ function compileSankey(spec, options) {
     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;
-    if (depth === maxDepthFirst) continue;
+    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);
@@ -9099,7 +9233,7 @@ 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,