@opendata-ai/openchart-engine 6.15.0 → 6.16.0

package/dist/index.js

@@ -596,7 +596,7 @@ function evaluateFieldPredicate(datum, pred) {
     return pred.valid ? isValid : !isValid;
   }
   if (pred.equal !== void 0) {
-    return value2 === pred.equal;
+    return value2 == pred.equal;
   }
   const numValue = Number(value2);
   if (pred.lt !== void 0) {
@@ -616,7 +616,7 @@ function evaluateFieldPredicate(datum, pred) {
     return numValue >= min4 && numValue <= max4;
   }
   if (pred.oneOf !== void 0) {
-    return pred.oneOf.includes(value2);
+    return pred.oneOf.some((v) => v == value2);
   }
   return true;
 }
@@ -727,6 +727,13 @@ function getSequentialColor(scales, value2, fallback = DEFAULT_COLOR) {
 }
 
 // src/charts/bar/compute.ts
+function orientGradientForHorizontalBar(grad) {
+  if (grad.gradient !== "linear") return grad;
+  const lg = grad;
+  const isDefaultVertical = (lg.x1 === void 0 || lg.x1 === 0) && (lg.y1 === void 0 || lg.y1 === 0) && (lg.x2 === void 0 || lg.x2 === 0) && (lg.y2 === void 0 || lg.y2 === 1);
+  if (!isDefaultVertical) return grad;
+  return { ...lg, x1: 0, y1: 0, x2: 1, y2: 0 };
+}
 var MIN_BAR_WIDTH = 1;
 function formatBarValue(value2) {
   if (Math.abs(value2) >= 1e3) return abbreviateNumber(value2);
@@ -837,7 +844,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
         y: bandY,
         width: barWidth,
         height: bandwidth,
-        fill: color2,
+        fill: isGradientDef(color2) ? orientGradientForHorizontalBar(color2) : color2,
         cornerRadius: 0,
         data: row,
         aria,
@@ -884,7 +891,7 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
         y: subY,
         width: barWidth,
         height: subBandHeight,
-        fill: color2,
+        fill: isGradientDef(color2) ? orientGradientForHorizontalBar(color2) : color2,
         cornerRadius: 2,
         data: row,
         aria,
@@ -915,7 +922,7 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
       y: bandY,
       width: barWidth,
       height: bandwidth,
-      fill: color2,
+      fill: isGradientDef(color2) ? orientGradientForHorizontalBar(color2) : color2,
       cornerRadius: 2,
       data: row,
       aria,
@@ -956,7 +963,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
       y: bandY,
       width: barWidth,
       height: bandwidth,
-      fill: color2,
+      fill: isGradientDef(color2) ? orientGradientForHorizontalBar(color2) : color2,
       cornerRadius: 2,
       data: row,
       aria,
@@ -6748,7 +6755,7 @@ function validateChartSpec(spec, errors) {
         message: `Spec error: encoding.${channel} must have a "field" string`,
         path: `encoding.${channel}.field`,
         code: "MISSING_FIELD",
-        suggestion: `Add a field name from your data columns: ${availableColumns}`
+        suggestion: `For constant colors, use mark.fill (e.g., mark: { type: "bar", fill: "#1b7fa3" }) instead of encoding.${channel}. Encoding channels require a data field: ${availableColumns}`
       });
       continue;
     }
@@ -8116,7 +8123,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         }
       }
       if (maxLabelWidth > 0) {
-        margins.right = Math.max(margins.right, padding + maxLabelWidth + 16);
+        margins.right = Math.max(margins.right, padding + maxLabelWidth + 8);
       }
     }
   }
@@ -8492,14 +8499,18 @@ function buildPointScale(channel, data, rangeStart, rangeEnd) {
 function buildOrdinalColorScale(channel, data, palette) {
   const explicitDomain = channel.scale?.domain;
   const values = explicitDomain ? explicitDomain.map(String) : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
-  const scale = ordinal().domain(values).range(palette);
+  const explicitRange = channel.scale?.range;
+  const colors = explicitRange ?? palette;
+  const scale = ordinal().domain(values).range(colors);
   return { scale, type: "ordinal", channel };
 }
 function buildSequentialColorScale(channel, data, palette) {
   const values = parseNumbers(fieldValues(data, channel.field));
   const domainMin = min2(values) ?? 0;
   const domainMax = max2(values) ?? 1;
-  const scale = linear2().domain([domainMin, domainMax]).range([palette[0], palette[palette.length - 1]]).clamp(true);
+  const explicitRange = channel.scale?.range;
+  const colors = explicitRange ?? palette;
+  const scale = linear2().domain([domainMin, domainMax]).range([colors[0], colors[colors.length - 1]]).clamp(true);
   return { scale, type: "sequential", channel };
 }
 function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, axis) {
@@ -8723,14 +8734,23 @@ function extractColorEntries(spec, theme) {
   if ("condition" in colorEnc) return [];
   if (colorEnc.type === "quantitative") return [];
   const uniqueValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
-  const palette = theme.colors.categorical;
+  const explicitDomain = colorEnc.scale?.domain;
+  const explicitRange = colorEnc.scale?.range;
+  const palette = explicitRange ?? theme.colors.categorical;
   const shape = swatchShapeForType(spec.markType);
-  return uniqueValues.map((value2, i) => ({
-    label: value2,
-    color: palette[i % palette.length],
-    shape,
-    active: true
-  }));
+  return uniqueValues.map((value2, i) => {
+    let colorIndex = i;
+    if (explicitDomain && explicitRange) {
+      const domainIdx = explicitDomain.indexOf(value2);
+      if (domainIdx >= 0) colorIndex = domainIdx;
+    }
+    return {
+      label: value2,
+      color: palette[colorIndex % palette.length],
+      shape,
+      active: true
+    };
+  });
 }
 function entriesThatFit(entries, maxWidth, maxRows, labelStyle) {
   let row = 1;
@@ -9908,8 +9928,13 @@ function computeCategoryColors(data, column, theme, darkMode) {
     if (raw == null) continue;
     const key = String(raw);
     let bg;
-    if (explicitMap[key]) {
+    let isExplicit = false;
+    if (explicitMap[key] != null) {
+      if (explicitMap[key] === "transparent" || explicitMap[key] === "none") {
+        continue;
+      }
       bg = explicitMap[key];
+      isExplicit = true;
     } else if (autoAssigned.has(key)) {
       bg = autoAssigned.get(key);
     } else {
@@ -9917,7 +9942,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
       nextPaletteIndex++;
       autoAssigned.set(key, bg);
     }
-    if (darkMode) {
+    if (darkMode && !isExplicit) {
       bg = adaptColorForDarkMode(bg, lightBg, darkBg);
     }
     const textColor = accessibleTextColor(bg);
@@ -11132,16 +11157,21 @@ function compileChart(spec, options) {
   const renderSpec = renderData !== chartSpec.data ? { ...chartSpec, data: renderData } : chartSpec;
   const scales = computeScales(renderSpec, chartArea, renderSpec.data);
   if (scales.color) {
+    const hasExplicitRange = !!(renderSpec.encoding.color && "field" in renderSpec.encoding.color && renderSpec.encoding.color.scale?.range?.length);
     if (scales.color.type === "sequential") {
-      const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
-      scales.color.scale.range([
-        seqStops[0],
-        seqStops[seqStops.length - 1]
-      ]);
+      if (!hasExplicitRange) {
+        const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
+        scales.color.scale.range([
+          seqStops[0],
+          seqStops[seqStops.length - 1]
+        ]);
+      }
     } else {
-      scales.color.scale.range(
-        theme.colors.categorical
-      );
+      if (!hasExplicitRange) {
+        scales.color.scale.range(
+          theme.colors.categorical
+        );
+      }
     }
   }
   scales.defaultColor = chartSpec.markDef.fill ?? theme.colors.categorical[0];