@opendata-ai/openchart-engine 6.10.0 → 6.12.0

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]}`
     };
@@ -6203,7 +6244,8 @@ function normalizeChartSpec(spec, warnings) {
     theme: spec.theme ?? {},
     darkMode: spec.darkMode ?? "off",
     hiddenSeries: spec.hiddenSeries ?? [],
-    seriesStyles: spec.seriesStyles ?? {}
+    seriesStyles: spec.seriesStyles ?? {},
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeTableSpec(spec, _warnings) {
@@ -6220,7 +6262,8 @@ function normalizeTableSpec(spec, _warnings) {
     stickyFirstColumn: spec.stickyFirstColumn ?? false,
     compact: spec.compact ?? false,
     responsive: spec.responsive ?? true,
-    animation: spec.animation
+    animation: spec.animation,
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeSankeySpec(spec, _warnings) {
@@ -6240,7 +6283,8 @@ function normalizeSankeySpec(spec, _warnings) {
     darkMode: spec.darkMode ?? "off",
     animation: spec.animation,
     valueFormat: spec.valueFormat,
-    linkOpacity: spec.linkOpacity
+    linkOpacity: spec.linkOpacity,
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeGraphSpec(spec, _warnings) {
@@ -6263,7 +6307,8 @@ function normalizeGraphSpec(spec, _warnings) {
     chrome: normalizeChrome(spec.chrome),
     annotations: normalizeAnnotations(spec.annotations),
     theme: spec.theme ?? {},
-    darkMode: spec.darkMode ?? "off"
+    darkMode: spec.darkMode ?? "off",
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeSpec(spec, warnings = []) {
@@ -6290,14 +6335,23 @@ function normalizeSpec(spec, warnings = []) {
     `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', or type: 'sankey'.`
   );
 }
-function flattenLayers(spec, parentData, parentEncoding, parentTransforms) {
+function flattenLayers(spec, parentData, parentEncoding, parentTransforms, parentWatermark) {
   const resolvedData = spec.data ?? parentData;
   const resolvedEncoding = parentEncoding && spec.encoding ? { ...parentEncoding, ...spec.encoding } : spec.encoding ?? parentEncoding;
   const resolvedTransforms = [...parentTransforms ?? [], ...spec.transform ?? []];
+  const resolvedWatermark = spec.watermark ?? parentWatermark;
   const leaves = [];
   for (const child of spec.layer) {
     if (isLayerSpec(child)) {
-      leaves.push(...flattenLayers(child, resolvedData, resolvedEncoding, resolvedTransforms));
+      leaves.push(
+        ...flattenLayers(
+          child,
+          resolvedData,
+          resolvedEncoding,
+          resolvedTransforms,
+          resolvedWatermark
+        )
+      );
     } else {
       const mergedData = child.data ?? resolvedData ?? [];
       const mergedEncoding = resolvedEncoding ? { ...resolvedEncoding, ...child.encoding } : child.encoding;
@@ -6306,7 +6360,9 @@ function flattenLayers(spec, parentData, parentEncoding, parentTransforms) {
         ...child,
         data: mergedData,
         encoding: mergedEncoding,
-        transform: mergedTransforms.length > 0 ? mergedTransforms : void 0
+        transform: mergedTransforms.length > 0 ? mergedTransforms : void 0,
+        // Inherit parent watermark if child doesn't explicitly set one
+        ...child.watermark === void 0 && resolvedWatermark !== void 0 ? { watermark: resolvedWatermark } : {}
       });
     }
   }
@@ -7365,6 +7421,8 @@ function compileGraph(spec, options) {
     );
   }
   const graphSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
   let theme = resolveTheme(mergedThemeConfig);
   if (options.darkMode) {
@@ -7432,7 +7490,10 @@ function compileGraph(spec, options) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   return {
     nodes: compiledNodes,
@@ -7446,7 +7507,8 @@ function compileGraph(spec, options) {
       width: options.width,
       height: options.height
     },
-    simulationConfig
+    simulationConfig,
+    watermark
   };
 }
 var DEFAULT_COLLISION_PADDING = 5;
@@ -7745,7 +7807,7 @@ function scalePadding(basePadding, width, height) {
 }
 var MIN_CHART_WIDTH = 60;
 var MIN_CHART_HEIGHT = 40;
-function computeDimensions(spec, options, legendLayout, theme, strategy) {
+function computeDimensions(spec, options, legendLayout, theme, strategy, watermark = true) {
   const { width, height } = options;
   const padding = scalePadding(theme.spacing.padding, width, height);
   const axisMargin = theme.spacing.axisMargin;
@@ -7756,7 +7818,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
     width,
     options.measureText,
     chromeMode,
-    padding
+    padding,
+    watermark
   );
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.markType === "arc";
@@ -7914,7 +7977,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
       width,
       options.measureText,
       fallbackMode,
-      padding
+      padding,
+      watermark
     );
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin;
     const newTop = padding + fallbackChrome.topHeight + fallbackTopAxisGap;
@@ -8400,7 +8464,7 @@ function truncateEntries(entries, maxCount) {
   });
   return truncated;
 }
-function computeLegend(spec, strategy, theme, chartArea) {
+function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   if (spec.legend?.show === false || strategy.legendMaxHeight === 0) {
     return {
       position: "top",
@@ -8477,7 +8541,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: 4
     };
   }
-  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - BRAND_RESERVE_WIDTH;
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - (watermark ? BRAND_RESERVE_WIDTH : 0);
   if (spec.legend?.symbolLimit != null) {
     const limit = Math.max(1, spec.legend.symbolLimit);
     if (limit < entries.length) {
@@ -9096,6 +9160,8 @@ function compileSankey(spec, options) {
     );
   }
   const sankeySpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? sankeySpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...sankeySpec.theme, ...options.theme } : sankeySpec.theme;
   const lightTheme = resolveTheme2(mergedThemeConfig);
   let theme = lightTheme;
@@ -9116,7 +9182,10 @@ function compileSankey(spec, options) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   const padding = theme.spacing.padding;
   const fullArea = {
@@ -9126,7 +9195,7 @@ function compileSankey(spec, options) {
     height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout(fullArea, chrome, theme, options);
+    return emptyLayout(fullArea, chrome, theme, options, watermark);
   }
   const sourceField = sankeySpec.encoding.source.field;
   const targetField = sankeySpec.encoding.target.field;
@@ -9162,7 +9231,7 @@ function compileSankey(spec, options) {
     height: fullArea.height - legend.bounds.height - legendGap
   };
   if (area.height <= 0) {
-    return emptyLayout(area, chrome, theme, options);
+    return emptyLayout(area, chrome, theme, options, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
   const labelFontWeight = theme.fonts.weights.normal;
@@ -9306,7 +9375,8 @@ function compileSankey(spec, options) {
       width: options.width,
       height: options.height
     },
-    animation: resolvedAnimation
+    animation: resolvedAnimation,
+    watermark
   };
 }
 function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetField, theme, area) {
@@ -9413,7 +9483,7 @@ function buildTooltipDescriptors(nodes, links, valueFormat) {
   }
   return descriptors;
 }
-function emptyLayout(area, chrome, theme, options) {
+function emptyLayout(area, chrome, theme, options, watermark) {
   return {
     area,
     chrome,
@@ -9445,7 +9515,8 @@ function emptyLayout(area, chrome, theme, options) {
     dimensions: {
       width: options.width,
       height: options.height
-    }
+    },
+    watermark
   };
 }
 
@@ -10045,6 +10116,7 @@ function compileTableLayout(spec, options, theme) {
     });
     return { id: rowId, cells, data: row };
   });
+  const watermark = spec.watermark;
   const chrome = computeChrome4(
     {
       title: spec.chrome.title,
@@ -10055,7 +10127,10 @@ function compileTableLayout(spec, options, theme) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   const titleText = spec.chrome.title?.text ?? "";
   const caption = titleText ? `Table: ${titleText}` : `Data table with ${data.length} rows`;
@@ -10077,12 +10152,18 @@ function compileTableLayout(spec, options, theme) {
       summary: `${resolvedColumns.length} columns, ${totalFiltered} rows`
     },
     theme,
-    animation: resolveAnimation(spec.animation)
+    animation: resolveAnimation(spec.animation),
+    watermark
   };
 }
 
 // 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 +10247,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 +10265,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 +10283,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))
       };
     }
   }
@@ -10518,6 +10599,8 @@ function compileChart(spec, options) {
     throw new Error("compileChart received a sankey spec. Use compileSankey instead.");
   }
   let chartSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? chartSpec.watermark : options.watermark ?? true;
   const rawTransforms = spec.transform;
   if (rawTransforms && rawTransforms.length > 0) {
     chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
@@ -10576,8 +10659,8 @@ function compileChart(spec, options) {
     width: options.width,
     height: options.height
   };
-  const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea);
-  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy);
+  const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea, watermark);
+  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy, watermark);
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if (legendLayout.entries.length > 0) {
@@ -10595,7 +10678,7 @@ function compileChart(spec, options) {
         break;
     }
   }
-  const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea);
+  const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea, watermark);
   let renderData = chartSpec.data;
   if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color && "field" in chartSpec.encoding.color) {
     const colorField = chartSpec.encoding.color.field;
@@ -10630,7 +10713,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) {
@@ -10662,12 +10745,14 @@ function compileChart(spec, options) {
       obstacles.push(computeLabelBounds(mark.label));
     }
   }
-  const brandPadding = theme.spacing.padding;
-  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
-  const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
-  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
-  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
-  obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
+  if (watermark) {
+    const brandPadding = theme.spacing.padding;
+    const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
+    const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
+    const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+    const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+    obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
+  }
   const annotations = computeAnnotations(
     chartSpec,
     scales,
@@ -10748,7 +10833,8 @@ function compileChart(spec, options) {
       width: options.width,
       height: options.height
     },
-    animation: resolvedAnimation
+    animation: resolvedAnimation,
+    watermark
   };
 }
 function getMarkPrimaryValue(mark) {
@@ -10818,6 +10904,7 @@ function buildPrimarySpec(leaves, layerSpec) {
     responsive: layerSpec.responsive ?? leaves[0].responsive,
     theme: layerSpec.theme ?? leaves[0].theme,
     darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
+    watermark: layerSpec.watermark ?? leaves[0].watermark,
     hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries
   };
   return primary;
@@ -10834,7 +10921,9 @@ function compileTable(spec, options) {
   if (options.darkMode) {
     theme = adaptTheme3(theme);
   }
-  return compileTableLayout(tableSpec, options, theme);
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? tableSpec.watermark : options.watermark ?? true;
+  return compileTableLayout({ ...tableSpec, watermark }, options, theme);
 }
 function compileGraph2(spec, options) {
   return compileGraph(spec, options);