@opendata-ai/openchart-engine 6.10.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) {
@@ -933,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 {
@@ -966,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 = {
@@ -1024,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;
@@ -1103,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);
@@ -1192,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 {
@@ -1342,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;
@@ -1380,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"
@@ -1565,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;
@@ -1592,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"
@@ -1627,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() {
@@ -2581,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),
@@ -2668,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) => {
@@ -2695,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) {
@@ -2712,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 = [];
@@ -2760,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,
@@ -2905,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",
@@ -2943,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) {
@@ -2993,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 {
@@ -3131,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;
@@ -3173,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 = {
@@ -5980,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;
@@ -6005,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
@@ -6030,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;
@@ -6045,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]}`
     };
@@ -10082,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) {
@@ -10166,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) {
@@ -10184,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;
@@ -10202,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))
       };
     }
   }
@@ -10630,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) {