@opendata-ai/openchart-engine 6.9.0 → 6.11.0

package/dist/index.d.ts

@@ -354,14 +354,6 @@ declare function validateSpec(spec: unknown): ValidationResult;
  */
 declare function compile(spec: unknown): CompileResult;
 
-/**
- * Scale computation from encoding spec + data.
- *
- * Creates D3 scales that map data values to pixel positions.
- * Temporal -> scaleTime(), quantitative -> scaleLinear(),
- * nominal/ordinal -> scaleBand() or scaleOrdinal(), depending on context.
- */
-
 /** Continuous D3 scales (linear, time, log, pow, sqrt, symlog) that support .ticks() and .nice(). */
 type D3ContinuousScale = ScaleLinear<number, number> | ScaleTime<number, number> | ScaleLogarithmic<number, number> | ScalePower<number, number> | ScaleSymLog<number, number>;
 /** Discretizing D3 scales (quantile, quantize, threshold). */
@@ -392,8 +384,8 @@ interface ResolvedScales {
     y?: ResolvedScale;
     color?: ResolvedScale;
     size?: ResolvedScale;
-    /** Default color for single-series charts (first categorical palette color). */
-    defaultColor?: string;
+    /** Default color for single-series charts (first categorical palette color or markDef.fill gradient). */
+    defaultColor?: string | _opendata_ai_openchart_core.GradientDef;
 }
 
 /**

package/dist/index.js

@@ -590,7 +590,7 @@ function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, o
 }
 
 // src/charts/bar/compute.ts
-import { abbreviateNumber, formatNumber } from "@opendata-ai/openchart-core";
+import { abbreviateNumber, formatNumber, isGradientDef } from "@opendata-ai/openchart-core";
 
 // src/transforms/predicates.ts
 function isFieldPredicate(pred) {
@@ -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) {
@@ -874,9 +933,12 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
     if (bandY === void 0) continue;
     let color2;
     if (conditionalColor) {
-      color2 = String(
-        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, "__default__")
-      );
+      const resolved = resolveConditionalValue(row, conditionalColor);
+      if (resolved != null) {
+        color2 = isGradientDef(resolved) ? resolved : String(resolved);
+      } else {
+        color2 = getColor(scales, "__default__");
+      }
     } else if (sequentialColor) {
       color2 = getSequentialColor(scales, value2);
     } else {
@@ -907,6 +969,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 import {
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth2,
+  getRepresentativeColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
 var SUFFIX_MULTIPLIERS = {
@@ -965,7 +1028,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
       textAnchor = "end";
     } else {
       anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = mark.fill;
+      fill = getRepresentativeColor(mark.fill);
       textAnchor = "start";
     }
     const anchorY = mark.y + mark.height / 2;
@@ -1044,7 +1107,7 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/column/compute.ts
-import { abbreviateNumber as abbreviateNumber2, formatNumber as formatNumber2 } from "@opendata-ai/openchart-core";
+import { abbreviateNumber as abbreviateNumber2, formatNumber as formatNumber2, isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
 var MIN_COLUMN_HEIGHT = 1;
 function formatColumnValue(value2) {
   if (Math.abs(value2) >= 1e3) return abbreviateNumber2(value2);
@@ -1072,6 +1135,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,
@@ -1119,9 +1196,12 @@ function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, b
     if (bandX === void 0) continue;
     let color2;
     if (conditionalColor) {
-      color2 = String(
-        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, "__default__")
-      );
+      const resolved = resolveConditionalValue(row, conditionalColor);
+      if (resolved != null) {
+        color2 = isGradientDef2(resolved) ? resolved : String(resolved);
+      } else {
+        color2 = getColor(scales, "__default__");
+      }
     } else if (sequentialColor) {
       color2 = getSequentialColor(scales, value2);
     } else {
@@ -1179,6 +1259,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);
@@ -1220,6 +1349,7 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
 import {
   buildD3Formatter as buildD3Formatter2,
   estimateTextWidth as estimateTextWidth3,
+  getRepresentativeColor as getRepresentativeColor2,
   resolveCollisions as resolveCollisions2
 } from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE2 = 10;
@@ -1258,7 +1388,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
         fontFamily: "system-ui, -apple-system, sans-serif",
         fontSize: LABEL_FONT_SIZE2,
         fontWeight: LABEL_FONT_WEIGHT2,
-        fill: mark.fill,
+        fill: getRepresentativeColor2(mark.fill),
         lineHeight: 1.2,
         textAnchor: "middle",
         dominantBaseline: isNegative ? "hanging" : "auto"
@@ -1443,7 +1573,11 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
 }
 
 // src/charts/dot/labels.ts
-import { estimateTextWidth as estimateTextWidth4, resolveCollisions as resolveCollisions3 } from "@opendata-ai/openchart-core";
+import {
+  estimateTextWidth as estimateTextWidth4,
+  getRepresentativeColor as getRepresentativeColor3,
+  resolveCollisions as resolveCollisions3
+} from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE3 = 11;
 var LABEL_FONT_WEIGHT3 = 600;
 var LABEL_OFFSET_X = 10;
@@ -1470,7 +1604,7 @@ function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix) {
         fontFamily: "system-ui, -apple-system, sans-serif",
         fontSize: LABEL_FONT_SIZE3,
         fontWeight: LABEL_FONT_WEIGHT3,
-        fill: mark.fill,
+        fill: getRepresentativeColor3(mark.fill),
         lineHeight: 1.2,
         textAnchor: "start",
         dominantBaseline: "central"
@@ -1505,6 +1639,9 @@ var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
   return marks;
 };
 
+// src/charts/line/area.ts
+import { getRepresentativeColor as getRepresentativeColor4 } from "@opendata-ai/openchart-core";
+
 // ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/constant.js
 function constant_default(x2) {
   return function constant2() {
@@ -2459,7 +2596,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       topPath: topPathStr,
       fill: color2,
       fillOpacity: DEFAULT_FILL_OPACITY,
-      stroke: color2,
+      stroke: getRepresentativeColor4(color2),
       strokeWidth: 2,
       seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
       data: validPoints.map((p) => p.row),
@@ -2546,7 +2683,7 @@ function computeStackedArea(spec, scales, chartArea) {
       fill: color2,
       fillOpacity: 0.7,
       // Higher opacity for stacked so layers are visible
-      stroke: color2,
+      stroke: getRepresentativeColor4(color2),
       strokeWidth: 1,
       seriesKey,
       data: layer.map((d) => {
@@ -2573,6 +2710,7 @@ function computeAreaMarks(spec, scales, chartArea) {
 }
 
 // src/charts/line/compute.ts
+import { getRepresentativeColor as getRepresentativeColor5 } from "@opendata-ai/openchart-core";
 var DEFAULT_STROKE_WIDTH = 2.5;
 var DEFAULT_POINT_RADIUS = 3;
 function computeLineMarks(spec, scales, _chartArea, _strategy) {
@@ -2590,6 +2728,7 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
   const marks = [];
   for (const [seriesKey, rows] of groups) {
     const color2 = isSequentialColor ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField)) : getColor(scales, seriesKey);
+    const strokeColor = getRepresentativeColor5(color2);
     const sortedRows = sortByField(rows, xChannel.field);
     const pointsWithData = [];
     const segments = [];
@@ -2638,7 +2777,7 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
       type: "line",
       points: allPoints,
       path: combinedPath,
-      stroke: color2,
+      stroke: strokeColor,
       strokeWidth: styleOverride?.strokeWidth ?? DEFAULT_STROKE_WIDTH,
       strokeDasharray,
       opacity: styleOverride?.opacity,
@@ -2783,6 +2922,7 @@ var areaRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/pie/compute.ts
+import { isConditionalDef, isGradientDef as isGradientDef3 } from "@opendata-ai/openchart-core";
 var SMALL_SLICE_THRESHOLD = 0.03;
 var DEFAULT_PALETTE = [
   "#1b7fa3",
@@ -2821,6 +2961,7 @@ function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
   const encoding = spec.encoding;
   const valueChannel = encoding.y ?? encoding.x;
   const categoryField = encoding.color && "field" in encoding.color ? encoding.color.field : void 0;
+  const conditionalColor = encoding.color && isConditionalDef(encoding.color) ? encoding.color : void 0;
   if (!valueChannel) return [];
   let slices = [];
   if (categoryField) {
@@ -2871,7 +3012,20 @@ function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
     const arcDatum = arcs[i];
     const slice2 = arcDatum.data;
     let color2;
-    if (scales.color && categoryField) {
+    if (conditionalColor) {
+      const resolved = resolveConditionalValue(
+        slice2.originalRow,
+        conditionalColor
+      );
+      if (resolved != null) {
+        color2 = isGradientDef3(resolved) ? resolved : String(resolved);
+      } else if (scales.color && categoryField) {
+        const colorScale = scales.color.scale;
+        color2 = colorScale(slice2.label);
+      } else {
+        color2 = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+      }
+    } else if (scales.color && categoryField) {
       const colorScale = scales.color.scale;
       color2 = colorScale(slice2.label);
     } else {
@@ -3009,6 +3163,7 @@ function clearRenderers() {
 }
 
 // src/charts/rule/index.ts
+import { getRepresentativeColor as getRepresentativeColor6 } from "@opendata-ai/openchart-core";
 function computeRuleMarks(spec, scales, chartArea) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -3051,7 +3206,9 @@ function computeRuleMarks(spec, scales, chartArea) {
       const y2Val = scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]);
       if (y2Val != null) y2 = y2Val;
     }
-    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const color2 = getRepresentativeColor6(
+      colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
+    );
     const strokeDashEncoding = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
     const strokeDasharray = strokeDashEncoding ? String(row[strokeDashEncoding.field] ?? "") : void 0;
     const aria = {
@@ -5858,6 +6015,7 @@ var scatterRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/text/index.ts
+import { getRepresentativeColor as getRepresentativeColor7 } from "@opendata-ai/openchart-core";
 function computeTextMarks(spec, scales) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -5883,7 +6041,9 @@ function computeTextMarks(spec, scales) {
     }
     const text = String(row[textChannel.field] ?? "");
     if (!text) continue;
-    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const color2 = getRepresentativeColor7(
+      colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
+    );
     const fontSize = sizeEncoding ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12)) : 12;
     const aria = {
       label: text
@@ -5908,6 +6068,7 @@ var textRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
 };
 
 // src/charts/tick/index.ts
+import { getRepresentativeColor as getRepresentativeColor8 } from "@opendata-ai/openchart-core";
 var DEFAULT_TICK_LENGTH = 18;
 function computeTickMarks(spec, scales, _chartArea) {
   const encoding = spec.encoding;
@@ -5923,7 +6084,9 @@ function computeTickMarks(spec, scales, _chartArea) {
     const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
     const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
     if (xVal == null || yVal == null) continue;
-    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const color2 = getRepresentativeColor8(
+      colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
+    );
     const aria = {
       label: `${row[xChannel.field]}, ${row[yChannel.field]}`
     };
@@ -8130,7 +8293,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 +8322,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) {
@@ -9958,7 +10123,12 @@ function compileTableLayout(spec, options, theme) {
 }
 
 // src/tooltips/compute.ts
-import { buildTemporalFormatter as buildTemporalFormatter2, formatDate as formatDate3, formatNumber as formatNumber6 } from "@opendata-ai/openchart-core";
+import {
+  buildTemporalFormatter as buildTemporalFormatter2,
+  formatDate as formatDate3,
+  formatNumber as formatNumber6,
+  getRepresentativeColor as getRepresentativeColor9
+} from "@opendata-ai/openchart-core";
 function formatValue(value2, fieldType, format2) {
   if (value2 == null) return "";
   if (fieldType === "temporal" || value2 instanceof Date) {
@@ -10042,12 +10212,12 @@ function tooltipsForLine(mark, encoding, _markIndex) {
 }
 function tooltipsForPoint(mark, encoding, markIndex) {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, mark.fill);
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor9(mark.fill));
   return [[`point-${markIndex}`, { title, fields }]];
 }
 function tooltipsForRect(mark, encoding, markIndex) {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, mark.fill);
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor9(mark.fill));
   return [[`rect-${markIndex}`, { title, fields }]];
 }
 function tooltipsForArc(mark, encoding, markIndex) {
@@ -10060,14 +10230,14 @@ function tooltipsForArc(mark, encoding, markIndex) {
       fields.push({
         label: categoryName,
         value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
-        color: mark.fill
+        color: getRepresentativeColor9(mark.fill)
       });
     }
   } else if (encoding.y) {
     fields.push({
       label: encoding.y.field,
       value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
-      color: mark.fill
+      color: getRepresentativeColor9(mark.fill)
     });
   }
   const title = colorEnc ? String(row[colorEnc.field] ?? "") : void 0;
@@ -10078,7 +10248,7 @@ function tooltipsForArea(mark, encoding, _markIndex) {
     for (const dp of mark.dataPoints) {
       dp.tooltip = {
         title: getTooltipTitle(dp.datum, encoding),
-        fields: buildFields(dp.datum, encoding, mark.fill)
+        fields: buildFields(dp.datum, encoding, getRepresentativeColor9(mark.fill))
       };
     }
   }
@@ -10506,7 +10676,7 @@ function compileChart(spec, options) {
       );
     }
   }
-  scales.defaultColor = theme.colors.categorical[0];
+  scales.defaultColor = chartSpec.markDef.fill ?? theme.colors.categorical[0];
   const isRadial = chartSpec.markType === "arc";
   const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText);
   if (!isRadial) {