@opendata-ai/openchart-engine 6.9.0 → 6.10.0

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);
@@ -8130,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) {
@@ -8158,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) {