ggaction 0.0.13 → 0.0.15

package/src/layout/labels.js

@@ -19,6 +19,349 @@ const MAX_EXHAUSTIVE_OFFSET_STEPS = 28;
 const MAX_SEARCH_DISPLACEMENT = 1_000_000;
 const DISTANT_RING_COUNT = 16;
 const DISTANT_ANGLE_COUNT = 32;
+const PLACEMENT_OPTIONS = Object.freeze([
+  "anchor", "gap", "overflow", "leader"
+]);
+const PLACEMENT_LEADER_OPTIONS = Object.freeze(["stroke", "strokeWidth"]);
+const SEMANTIC_ANCHORS = new Set([
+  "center", "insideStart", "insideEnd", "outsideStart", "outsideEnd"
+]);
+const OVERFLOW_POLICIES = new Set(["hide", "outside", "allow"]);
+
+export const DEFAULT_MARK_LABEL_PLACEMENT = cloneAndFreeze({
+  gap: 4,
+  overflow: "hide",
+  leader: false
+});
+
+export function markLabelPlacementLeaderId(target) {
+  return `${target}-placement-leaders`;
+}
+
+function normalizePlacementLeader(value) {
+  if (value === undefined || value === false) return false;
+  validateOptionObject(value, PLACEMENT_LEADER_OPTIONS, "mark label placement leader");
+  const leader = { stroke: "#94a3b8", strokeWidth: 1, ...value };
+  if (typeof leader.stroke !== "string" || leader.stroke.length === 0) {
+    throw new TypeError("Mark label placement leader stroke must be a non-empty string.");
+  }
+  validateNonNegativeFinite(
+    leader.strokeWidth,
+    "Mark label placement leader strokeWidth"
+  );
+  return leader;
+}
+
+export function normalizeMarkLabelPlacement(value) {
+  validateOptionObject(value, PLACEMENT_OPTIONS, "mark label placement", {
+    allowEmpty: false,
+    emptyError: TypeError
+  });
+  if (!SEMANTIC_ANCHORS.has(value.anchor)) {
+    throw new Error(`Unsupported mark label anchor "${value.anchor}".`);
+  }
+  const gap = value.gap ?? DEFAULT_MARK_LABEL_PLACEMENT.gap;
+  const overflowPolicy = value.overflow ?? DEFAULT_MARK_LABEL_PLACEMENT.overflow;
+  validateNonNegativeFinite(gap, "Mark label placement gap");
+  if (!OVERFLOW_POLICIES.has(overflowPolicy)) {
+    throw new Error(`Unsupported mark label overflow "${overflowPolicy}".`);
+  }
+  return cloneAndFreeze({
+    anchor: value.anchor,
+    gap,
+    overflow: overflowPolicy,
+    leader: normalizePlacementLeader(value.leader)
+  });
+}
+
+function finitePoint(value, label) {
+  if (
+    !isPlainObject(value) ||
+    !Number.isFinite(value.x) ||
+    !Number.isFinite(value.y)
+  ) {
+    throw new TypeError(`${label} requires finite x and y.`);
+  }
+  return value;
+}
+
+function unitVector(value, label) {
+  finitePoint(value, label);
+  const length = Math.hypot(value.x, value.y);
+  if (!Number.isFinite(length) || length <= 0) {
+    throw new RangeError(`${label} requires a non-zero direction.`);
+  }
+  return { x: value.x / length, y: value.y / length };
+}
+
+function validateIntervalBounds(bounds) {
+  if (
+    !isPlainObject(bounds) ||
+    ![bounds.left, bounds.right, bounds.top, bounds.bottom].every(Number.isFinite) ||
+    bounds.right < bounds.left ||
+    bounds.bottom < bounds.top
+  ) {
+    throw new RangeError("Interval label placement requires ordered finite bounds.");
+  }
+}
+
+function validatePlacementGeometry(geometry, anchor) {
+  if (!isPlainObject(geometry)) {
+    throw new TypeError("Mark label placement requires source geometry.");
+  }
+  if (geometry.kind === "interval") {
+    finitePoint(geometry.center, "Interval label center");
+    for (const role of ["start", "end"]) {
+      finitePoint(geometry[role]?.point, `Interval label ${role}`);
+      unitVector(geometry[role]?.outward, `Interval label ${role}`);
+    }
+    validateIntervalBounds(geometry.bounds);
+    return;
+  }
+  if (geometry.kind === "arc") {
+    if (![geometry.centerX, geometry.centerY, geometry.startTheta,
+      geometry.endTheta, geometry.innerRadius, geometry.outerRadius]
+      .every(Number.isFinite)) {
+      throw new TypeError("Arc label placement requires finite sector geometry.");
+    }
+    if (
+      geometry.innerRadius < 0 ||
+      geometry.outerRadius <= geometry.innerRadius ||
+      geometry.startTheta === geometry.endTheta ||
+      Math.abs(geometry.endTheta - geometry.startTheta) > 360
+    ) {
+      throw new RangeError("Arc label placement requires an ordered annular sector.");
+    }
+    return;
+  }
+  if (geometry.kind === "point") {
+    finitePoint(geometry.center, "Point label center");
+    if (anchor === "outsideEnd") {
+      finitePoint(geometry.end?.point, "Polar Point label boundary");
+      unitVector(geometry.end?.outward, "Polar Point label direction");
+    }
+    return;
+  }
+  throw new Error(`Unsupported mark label placement geometry "${geometry.kind}".`);
+}
+
+export function assertMarkLabelPlacementSupport({ markType, coordinateType, intervalAxis }, placement) {
+  const anchor = placement.anchor;
+  if (markType === "bar" || markType === "arc") return placement;
+  if (markType === "rect") {
+    if (anchor === "center" || intervalAxis !== undefined) return placement;
+    throw new Error("Rect semantic label placement requires one explicit interval axis.");
+  }
+  if (markType === "point") {
+    if (anchor === "center" || (coordinateType === "polar" && anchor === "outsideEnd")) {
+      return placement;
+    }
+    throw new Error(
+      coordinateType === "polar"
+        ? `Polar Point does not support mark label anchor "${anchor}".`
+        : `Point does not support mark label anchor "${anchor}".`
+    );
+  }
+  if (markType === "line") {
+    throw new Error("Line labels retain the endpoint API and do not accept semantic placement objects.");
+  }
+  if (markType === "rule") {
+    throw new Error("Rule labels do not support semantic placement objects.");
+  }
+  throw new Error(`Mark type "${markType}" does not support semantic label placement.`);
+}
+
+function localTextBounds(text) {
+  return resolveTextBounds({ ...text, x: 0, y: 0 });
+}
+
+function projectionRange(bounds, direction) {
+  const values = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom }
+  ].map(point => point.x * direction.x + point.y * direction.y);
+  return { minimum: Math.min(...values), maximum: Math.max(...values) };
+}
+
+function boundaryCandidate(boundary, direction, gap, text) {
+  const resolvedDirection = unitVector(direction, "Mark label placement direction");
+  const support = projectionRange(localTextBounds(text), resolvedDirection);
+  const distance = gap - support.minimum;
+  return {
+    x: boundary.x + resolvedDirection.x * distance + (text.dx ?? 0),
+    y: boundary.y + resolvedDirection.y * distance + (text.dy ?? 0),
+    sourceX: boundary.x,
+    sourceY: boundary.y
+  };
+}
+
+function centerCandidate(center, text) {
+  return {
+    x: center.x + (text.dx ?? 0),
+    y: center.y + (text.dy ?? 0),
+    sourceX: center.x,
+    sourceY: center.y
+  };
+}
+
+function candidateBounds(candidate, text) {
+  return resolveTextBounds({ ...text, x: candidate.x, y: candidate.y });
+}
+
+function intervalContains(bounds, container) {
+  const epsilon = 1e-9;
+  return bounds.left >= container.left - epsilon &&
+    bounds.right <= container.right + epsilon &&
+    bounds.top >= container.top - epsilon &&
+    bounds.bottom <= container.bottom + epsilon;
+}
+
+function distanceToRectangle(centerX, centerY, bounds) {
+  const x = Math.max(bounds.left, Math.min(centerX, bounds.right));
+  const y = Math.max(bounds.top, Math.min(centerY, bounds.bottom));
+  return Math.hypot(x - centerX, y - centerY);
+}
+
+function thetaForPoint(point, geometry) {
+  return Math.atan2(point.x - geometry.centerX, geometry.centerY - point.y) *
+    180 / Math.PI;
+}
+
+function angleWithin(theta, start, end) {
+  const sweep = end - start;
+  if (Math.abs(sweep) >= 360 - 1e-9) return true;
+  const direction = Math.sign(sweep);
+  const progress = ((direction * (theta - start)) % 360 + 360) % 360;
+  return progress <= Math.abs(sweep) + 1e-9;
+}
+
+function arcContains(bounds, geometry) {
+  const points = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom },
+    { x: (bounds.left + bounds.right) / 2, y: bounds.top },
+    { x: bounds.right, y: (bounds.top + bounds.bottom) / 2 },
+    { x: (bounds.left + bounds.right) / 2, y: bounds.bottom },
+    { x: bounds.left, y: (bounds.top + bounds.bottom) / 2 }
+  ];
+  const minimumRadius = distanceToRectangle(
+    geometry.centerX,
+    geometry.centerY,
+    bounds
+  );
+  const maximumRadius = Math.max(...points.slice(0, 4).map(point =>
+    Math.hypot(point.x - geometry.centerX, point.y - geometry.centerY)
+  ));
+  const epsilon = 1e-9;
+  return minimumRadius >= geometry.innerRadius - epsilon &&
+    maximumRadius <= geometry.outerRadius + epsilon &&
+    points.every(point => angleWithin(
+      thetaForPoint(point, geometry),
+      geometry.startTheta,
+      geometry.endTheta
+    ));
+}
+
+function arcRole(geometry, role) {
+  const theta = geometry.startTheta +
+    (geometry.endTheta - geometry.startTheta) / 2;
+  const radians = theta * Math.PI / 180;
+  const radial = { x: Math.sin(radians), y: -Math.cos(radians) };
+  const radius = role === "start" ? geometry.innerRadius : geometry.outerRadius;
+  return {
+    point: {
+      x: geometry.centerX + radial.x * radius,
+      y: geometry.centerY + radial.y * radius
+    },
+    outward: role === "start"
+      ? { x: -radial.x, y: -radial.y }
+      : radial
+  };
+}
+
+function geometryRole(geometry, role) {
+  return geometry.kind === "arc" ? arcRole(geometry, role) : geometry[role];
+}
+
+function geometryCenter(geometry) {
+  if (geometry.kind !== "arc") return geometry.center;
+  const role = arcRole(geometry, "end");
+  const radius = (geometry.innerRadius + geometry.outerRadius) / 2;
+  return {
+    x: geometry.centerX + role.outward.x * radius,
+    y: geometry.centerY + role.outward.y * radius
+  };
+}
+
+function candidateForAnchor(anchor, geometry, placement, text) {
+  if (anchor === "center") return centerCandidate(geometryCenter(geometry), text);
+  const roleName = anchor.endsWith("Start") ? "start" : "end";
+  const role = geometryRole(geometry, roleName);
+  const outside = anchor.startsWith("outside");
+  const direction = outside
+    ? role.outward
+    : { x: -role.outward.x, y: -role.outward.y };
+  return boundaryCandidate(role.point, direction, placement.gap, text);
+}
+
+function arcOutsideStartCrossesCenter(candidate, geometry, text) {
+  if (geometry.kind !== "arc") return false;
+  const radial = arcRole(geometry, "end").outward;
+  const projections = projectionRange(candidateBounds(candidate, text), radial);
+  const centerProjection = geometry.centerX * radial.x + geometry.centerY * radial.y;
+  return projections.minimum < centerProjection - 1e-9;
+}
+
+function fitsSource(candidate, geometry, text) {
+  if (geometry.kind === "point") return true;
+  const bounds = candidateBounds(candidate, text);
+  return geometry.kind === "arc"
+    ? arcContains(bounds, geometry)
+    : intervalContains(bounds, geometry.bounds);
+}
+
+function outsideFallback(anchor) {
+  return anchor === "insideStart" ? "outsideStart" : "outsideEnd";
+}
+
+export function resolveMarkLabelPlacement({ placement, geometry, text } = {}) {
+  const normalized = normalizeMarkLabelPlacement(placement);
+  validatePlacementGeometry(geometry, normalized.anchor);
+  let anchor = normalized.anchor;
+  let candidate = candidateForAnchor(anchor, geometry, normalized, text);
+  const requiresFit = anchor === "center" || anchor.startsWith("inside");
+  if (requiresFit && !fitsSource(candidate, geometry, text)) {
+    if (normalized.overflow === "hide") {
+      return cloneAndFreeze({ visible: false, anchor, fallback: false });
+    }
+    if (normalized.overflow === "outside") {
+      anchor = outsideFallback(anchor);
+      candidate = candidateForAnchor(anchor, geometry, normalized, text);
+    }
+  }
+  if (
+    anchor === "outsideStart" &&
+    normalized.overflow !== "allow" &&
+    arcOutsideStartCrossesCenter(candidate, geometry, text)
+  ) {
+    return cloneAndFreeze({
+      visible: false,
+      anchor,
+      fallback: anchor !== normalized.anchor
+    });
+  }
+  return cloneAndFreeze({
+    visible: true,
+    anchor,
+    fallback: anchor !== normalized.anchor,
+    ...candidate,
+    bounds: candidateBounds(candidate, text)
+  });
+}
 
 export const DEFAULT_LABEL_LAYOUT_GEOMETRY = cloneAndFreeze({
   axis: "both",

package/src/materialization/bars/aggregate.js

@@ -1,6 +1,10 @@
 import { deriveSeriesBarCells } from "../../grammar/bars/aggregate.js";
 import { resolveBarChannels, resolveBarColorLayout, resolveBarOffsetChannel } from "../../grammar/bars/policy.js";
-import { mapContinuousScaleValues, mapOrdinalPositionValues } from "../../grammar/scales/index.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues,
+  readScaleField
+} from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
 import { DEFAULT_BAR_FILL, resolveBarAppearance } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
@@ -19,6 +23,24 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
   const segments = deriveSeriesBarCells(dataset.values, layer, temporal ? undefined : categoryScale.domain,
     grouped ? offsetScale.domain : layer.encoding.group === undefined && color?.fieldType !== "quantitative" ? colorScale?.domain : undefined);
   const fills = color === undefined ? undefined : mapScaleConsumerValues(segments.map(segment => segment.cell.color), colorScale, "color");
+  const stroke = layer.encoding?.stroke;
+  const strokeValues = stroke === undefined ? undefined : segments.map(segment => {
+    const values = readScaleField(
+      segment.cell.sourceIndices.map(index => dataset.values[index]),
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (new Set(values).size !== 1) {
+      throw new Error("Bar stroke requires one value within each aggregate cell.");
+    }
+    return values[0];
+  });
+  const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+    strokeValues,
+    resolved.resolvedScales[stroke.scale],
+    "stroke"
+  );
   const config = resolved.markConfigs[layer.id] ?? {};
   const existing = resolved.graphicSpec.objects[layer.id].items;
   const width = resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step));
@@ -42,6 +64,7 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
     return { x: vertical ? position : Math.min(a, b), y: vertical ? Math.min(a, b) : position,
       width: vertical ? width : Math.abs(a - b), height: vertical ? Math.abs(a - b) : width,
       fill: fills?.[index] ?? config.barAppearance?.fill ?? config.fill ?? DEFAULT_BAR_FILL,
-      ...resolveBarAppearance(config, existing[index]?.properties) };
+      ...resolveBarAppearance(config, existing[index]?.properties),
+      ...(strokes === undefined ? {} : { stroke: strokes[index] }) };
   });
 }

package/src/materialization/bars/histogram.js

@@ -1,6 +1,5 @@
 import { readSeriesIdentity } from "../../grammar/pathSeries.js";
 import {
-  countHistogramBins,
   findHistogramBinIndex,
   resolveHistogramBins
 } from "../../grammar/histogram.js";
@@ -8,14 +7,55 @@ import {
   mapContinuousScaleValues,
   mapOrdinalValues,
   readNominalField,
-  readQuantitativeField
+  readQuantitativeField,
+  readScaleField
 } from "../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from "../scales/map.js";
 import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
 import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
 import {
   DEFAULT_BAR_FILL,
   resolveBarAppearance
 } from "./resolve.js";
+import {
+  readStatisticalWeights,
+  sumEntryWeights,
+  summarizeStatisticalWeights,
+  validateWeightedNumericFields
+} from "../../grammar/weightedStatistics.js";
+
+export function resolveHistogramInput(dataset, xEncoding) {
+  const allValues = readQuantitativeField(dataset.values, xEncoding.field);
+  if (xEncoding.weight === undefined) {
+    return {
+      rows: dataset.values,
+      values: allValues,
+      entries: dataset.values.map((row, index) => ({ row, index })),
+      mass(entries) {
+        return entries.length;
+      }
+    };
+  }
+  const weights = readStatisticalWeights(
+    dataset.values,
+    xEncoding.weight,
+    "Histogram"
+  );
+  validateWeightedNumericFields(weights.entries, [xEncoding.field], "Histogram");
+  const summary = summarizeStatisticalWeights(
+    weights.entries,
+    weights.definition.kind,
+    "Histogram data"
+  );
+  return {
+    rows: summary.positive.map(entry => entry.row),
+    values: summary.positive.map(entry => entry.row[xEncoding.field]),
+    entries: summary.positive,
+    mass(entries) {
+      return sumEntryWeights(entries, summary, "Histogram bin mass");
+    }
+  };
+}
 
 export function deriveHistogramSegments({
   dataset,
@@ -24,7 +64,8 @@ export function deriveHistogramSegments({
   xScale,
   resolvedScales
 }) {
-  const xValues = readQuantitativeField(dataset.values, xEncoding.field);
+  const input = resolveHistogramInput(dataset, xEncoding);
+  const { rows, values: xValues, entries } = input;
   const bins = resolveHistogramBins({
     values: xValues,
     bin: xEncoding.bin,
@@ -36,13 +77,13 @@ export function deriveHistogramSegments({
   const layout = resolveBarColorLayout(layer);
 
   if (layer.encoding?.group !== undefined) {
-    const identity = readSeriesIdentity(dataset.values, layer);
+    const identity = readSeriesIdentity(rows, layer);
     const cellRows = bins.boundaries.slice(0, -1).map(() => identity.domain.map(() => []));
     const index = new Map(identity.domain.map((value, i) => [value, i]));
     xValues.forEach((value, i) => { const bin = findHistogramBinIndex(value, bins.boundaries);
-      if (bin !== -1) cellRows[bin][index.get(identity.values[i])].push(dataset.values[i]); });
-    return cellRows.flatMap((cells, bin) => layoutSeriesPartition(cells.map(rows => rows.length), layout).map(segment => {
-      const members = cells[segment.index];
+      if (bin !== -1) cellRows[bin][index.get(identity.values[i])].push(entries[i]); });
+    return cellRows.flatMap((cells, bin) => layoutSeriesPartition(cells.map(input.mass), layout).map(segment => {
+      const members = cells[segment.index].map(entry => entry.row);
       let color, colorValue;
       if (colorEncoding !== undefined) {
         const values = readNominalField(members, colorEncoding.field);
@@ -59,8 +100,13 @@ export function deriveHistogramSegments({
   }
 
   if (colorEncoding?.scale === undefined) {
-    return countHistogramBins(xValues, bins.boundaries).flatMap((count, bin) =>
-      layoutSeriesPartition([count], layout).map(segment => ({
+    const cellRows = bins.boundaries.slice(0, -1).map(() => []);
+    xValues.forEach((value, index) => {
+      const bin = findHistogramBinIndex(value, bins.boundaries);
+      if (bin !== -1) cellRows[bin].push(entries[index]);
+    });
+    return cellRows.flatMap((cell, bin) =>
+      layoutSeriesPartition([input.mass(cell)], layout).map(segment => ({
         bin,
         start: bins.boundaries[bin],
         end: bins.boundaries[bin + 1],
@@ -68,9 +114,7 @@ export function deriveHistogramSegments({
         categoryCount: 1,
         stackStart: segment.start,
         stackEnd: segment.end,
-        members: dataset.values.filter((_, index) =>
-          findHistogramBinIndex(xValues[index], bins.boundaries) === bin
-        )
+        members: cell.map(entry => entry.row)
       }))
     );
   }
@@ -81,24 +125,24 @@ export function deriveHistogramSegments({
       `Bar mark "${layer.id}" requires a resolved color scale.`
     );
   }
-  const colorValues = readNominalField(dataset.values, colorEncoding.field);
+  const colorValues = readNominalField(rows, colorEncoding.field);
   mapOrdinalValues(colorValues, colorScale.domain, colorScale.range);
   const categoryIndex = new Map(
     colorScale.domain.map((value, index) => [value, index])
   );
-  const counts = bins.boundaries.slice(0, -1).map(() =>
-    colorScale.domain.map(() => 0)
+  const cells = bins.boundaries.slice(0, -1).map(() =>
+    colorScale.domain.map(() => [])
   );
 
   for (let index = 0; index < xValues.length; index += 1) {
     const bin = findHistogramBinIndex(xValues[index], bins.boundaries);
     const category = categoryIndex.get(colorValues[index]);
-    if (bin !== -1 && category !== undefined) counts[bin][category] += 1;
+    if (bin !== -1 && category !== undefined) cells[bin][category].push(entries[index]);
   }
 
   const segments = [];
-  for (let bin = 0; bin < counts.length; bin += 1) {
-    const partition = layoutSeriesPartition(counts[bin], layout);
+  for (let bin = 0; bin < cells.length; bin += 1) {
+    const partition = layoutSeriesPartition(cells[bin].map(input.mass), layout);
     for (const segment of partition) {
       const category = segment.index;
       segments.push({
@@ -106,13 +150,10 @@ export function deriveHistogramSegments({
         start: bins.boundaries[bin],
         end: bins.boundaries[bin + 1],
         category,
-        categoryCount: counts[bin].length,
+        categoryCount: cells[bin].length,
         stackStart: segment.start,
         stackEnd: segment.end,
-        members: dataset.values.filter((_, index) =>
-          findHistogramBinIndex(xValues[index], bins.boundaries) === bin &&
-          categoryIndex.get(colorValues[index]) === category
-        ),
+        members: cells[bin][category].map(entry => entry.row),
         color: mapOrdinalValues(
           [colorScale.domain[category]],
           colorScale.domain,
@@ -135,6 +176,24 @@ export function deriveHistogramRectangles(required, resolved) {
   const layout = resolveBarColorLayout(required.layer);
   const config = resolved.markConfigs[required.layer.id] ?? {};
   const appearance = config.barAppearance ?? {};
+  const stroke = required.layer.encoding?.stroke;
+  const strokeValues = stroke === undefined ? undefined : segments.map(segment => {
+    const values = readScaleField(
+      segment.members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (new Set(values).size !== 1) {
+      throw new Error("Histogram stroke requires one value within each bin/series cell.");
+    }
+    return values[0];
+  });
+  const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+    strokeValues,
+    resolved.resolvedScales[stroke.scale],
+    "stroke"
+  );
 
   return segments.map((segment, index) => {
     const [x1, x2] = mapContinuousScaleValues(
@@ -164,7 +223,8 @@ export function deriveHistogramRectangles(required, resolved) {
         config.fill ??
         existing[index]?.properties.fill ??
         DEFAULT_BAR_FILL,
-      ...resolveBarAppearance(config, existing[index]?.properties)
+      ...resolveBarAppearance(config, existing[index]?.properties),
+      ...(strokes === undefined ? {} : { stroke: strokes[index] })
     };
   });
 }

package/src/materialization/bars/ranged.js

@@ -1,4 +1,10 @@
-import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales/index.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues,
+  mapOrdinalValues,
+  readScaleField
+} from "../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from "../scales/map.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
 import {
   DEFAULT_BAR_FILL,
@@ -36,6 +42,14 @@ export function deriveRangedRectangles(required, program, width) {
   const appearanceConfig = color === undefined
     ? config
     : { ...config, stroke: undefined };
+  const stroke = layer.encoding?.stroke;
+  const strokes = stroke === undefined ? undefined : mapScaleConsumerValues(
+    readScaleField(dataset.values, stroke.field, stroke.fieldType, {
+      temporalUnit: stroke.temporalUnit
+    }),
+    program.resolvedScales[stroke.scale],
+    "stroke"
+  );
   return dataset.values.map((_, index) => vertical ? {
     x: centers[index] - band / 2, y: Math.min(first[index], second[index]), width: band,
     height: Math.abs(second[index] - first[index]), fill: fills[index],
@@ -44,7 +58,8 @@ export function deriveRangedRectangles(required, program, width) {
       undefined,
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
-    )
+    ),
+    ...(strokes === undefined ? {} : { stroke: strokes[index] })
   } : {
     x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
     width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
@@ -53,6 +68,7 @@ export function deriveRangedRectangles(required, program, width) {
       undefined,
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
-    )
+    ),
+    ...(strokes === undefined ? {} : { stroke: strokes[index] })
   });
 }

package/src/materialization/bars/resolve.js

@@ -3,6 +3,7 @@ import { findDataset } from "../../selectors/datasets.js";
 import { findLayer } from "../../selectors/layers.js";
 import { findSemanticScale } from "../../selectors/scales.js";
 import { BAR_GRAINS, resolveBarGrain } from "../../grammar/bars/policy.js";
+import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
 
 export const DEFAULT_BAR_FILL = DEFAULT_COLORS.mark;
 export const DEFAULT_BAR_STROKE = "white";
@@ -25,7 +26,8 @@ export function resolveBarAppearance(
       ? 0
       : appearance.strokeWidth ?? config.strokeWidth ??
         existing?.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    ...(opacity === undefined ? {} : { opacity })
+    ...(opacity === undefined ? {} : { opacity }),
+    ...requestedStrokeDetails(appearance, "Bar mark")
   };
 }
 
@@ -40,9 +42,10 @@ export function requireCompleteBar(program, id) {
     throw new Error(`Bar mark "${id}" requires an existing dataset.`);
   }
   const graphic = program.graphicSpec.objects[id];
-  const rectCollection = graphic?.type === "collection" &&
-    graphic.items?.every(child => child.type === "rect");
-  if (graphic?.type !== "rect" && !rectCollection) {
+  const roundedCollection = graphic?.type === "collection" &&
+    Object.hasOwn(program.markConfigs[id]?.barAppearance ?? {}, "cornerRadius") &&
+    graphic.items?.every(child => ["rect", "path"].includes(child.type));
+  if (graphic?.type !== "rect" && !roundedCollection) {
     throw new Error(`Bar mark "${id}" requires rect graphics.`);
   }
 

package/src/materialization/composition.js

@@ -121,6 +121,8 @@ export function clearCompositionChildren(program) {
 export function materializeCompositionGraphics(program) {
   program._assertCompositionProgram("materializeCompositionGraphics");
   const layout = resolveCompositionProgramLayout(program);
+  const background = program.graphicSpec.objects.canvas?.properties
+    ?.background ?? "white";
   let next = clearCompositionChildren(program);
   if (next.graphicSpec.objects.canvas === undefined) {
     next = next.createGraphics({ id: "canvas", type: "canvas" });
@@ -128,7 +130,7 @@ export function materializeCompositionGraphics(program) {
   for (const [property, value] of Object.entries({
     width: layout.width,
     height: layout.height,
-    background: "white"
+    background
   })) {
     next = next.editGraphics({ target: "canvas", property, value });
   }