ggaction 0.0.9 → 0.0.11

package/src/layout/facets.js

@@ -59,24 +59,20 @@ export function resolveFacetLayout({
     "Facet shared legend width"
   );
   const rowCount = Math.ceil(resolvedChildren.length / resolvedColumns);
-  const columnWidths = Array.from({ length: resolvedColumns }, (_, column) =>
-    Math.max(...resolvedChildren
-      .filter((_, index) => index % resolvedColumns === column)
-      .map(child => child.width))
-  );
-  const rowHeights = Array.from({ length: rowCount }, (_, row) =>
-    Math.max(...resolvedChildren
-      .slice(row * resolvedColumns, (row + 1) * resolvedColumns)
-      .map(child => child.height))
-  );
+  const columnWidths = Array(resolvedColumns).fill(-Infinity);
+  const rowHeights = Array(rowCount).fill(-Infinity);
+  resolvedChildren.forEach((child, index) => {
+    const column = index % resolvedColumns;
+    const row = Math.floor(index / resolvedColumns);
+    columnWidths[column] = Math.max(columnWidths[column], child.width);
+    rowHeights[row] = Math.max(rowHeights[row], child.height);
+  });
   const columnStarts = columnWidths.map((_, column) =>
-    resolvedPadding.left + columnWidths
-      .slice(0, column)
+    resolvedPadding.left + columnWidths.slice(0, column)
       .reduce((sum, width) => sum + width, 0) + resolvedGap * column
   );
   const rowStarts = rowHeights.map((_, row) =>
-    resolvedTitleHeight + resolvedPadding.top + rowHeights
-      .slice(0, row)
+    resolvedTitleHeight + resolvedPadding.top + rowHeights.slice(0, row)
       .reduce((sum, height) => sum + height, 0) + resolvedGap * row
   );
   const placements = resolvedChildren.map((child, index) => {

package/src/layout/labels.js

@@ -1,8 +1,13 @@
 import { cloneAndFreeze, isPlainObject } from "../core/immutable.js";
-import { resolveTextBounds } from "../core/textMetrics.js";
+import {
+  resolveTextBounds,
+  textBoundsFitCanvas,
+  textBoundsIntersect
+} from "../core/textMetrics.js";
 import {
   validateNonNegativeFinite,
-  validateOptionObject
+  validateOptionObject,
+  validateWorkLimit
 } from "../core/validation.js";
 
 const AXES = new Set(["x", "y", "both"]);
@@ -10,6 +15,10 @@ const BOUNDS = new Set(["plot", "canvas"]);
 const POLICY_OPTIONS = Object.freeze([
   "axis", "padding", "maxDisplacement", "bounds"
 ]);
+const MAX_EXHAUSTIVE_OFFSET_STEPS = 28;
+const MAX_SEARCH_DISPLACEMENT = 1_000_000;
+const DISTANT_RING_COUNT = 16;
+const DISTANT_ANGLE_COUNT = 32;
 
 export const DEFAULT_LABEL_LAYOUT_GEOMETRY = cloneAndFreeze({
   axis: "both",
@@ -98,16 +107,46 @@ function overflow(bounds, boundary) {
 export function enumerateLabelOffsets({ axis, padding, maxDisplacement }) {
   const policy = normalizeLabelLayoutGeometry({ axis, padding, maxDisplacement });
   const step = Math.max(2, policy.padding);
-  const limit = Math.ceil(policy.maxDisplacement / step);
+  const displacement = Math.min(
+    policy.maxDisplacement,
+    MAX_SEARCH_DISPLACEMENT
+  );
+  const limit = Math.ceil(displacement / step);
+  const localLimit = Math.min(limit, MAX_EXHAUSTIVE_OFFSET_STEPS);
   const candidates = [];
-  for (let x = -limit; x <= limit; x += 1) {
-    for (let y = -limit; y <= limit; y += 1) {
+  const addCandidate = (x, y) => {
+    if (![x, y].every(Number.isFinite)) return;
+    const distanceSquared = x ** 2 + y ** 2;
+    if (Math.sqrt(distanceSquared) > displacement + 1e-9) return;
+    candidates.push({ x, y, distanceSquared });
+  };
+  for (let x = -localLimit; x <= localLimit; x += 1) {
+    for (let y = -localLimit; y <= localLimit; y += 1) {
       if (policy.axis === "x" && y !== 0) continue;
       if (policy.axis === "y" && x !== 0) continue;
-      const offset = { x: x * step, y: y * step };
-      const distanceSquared = offset.x ** 2 + offset.y ** 2;
-      if (Math.sqrt(distanceSquared) > policy.maxDisplacement + 1e-9) continue;
-      candidates.push({ ...offset, distanceSquared });
+      addCandidate(x * step, y * step);
+    }
+  }
+  if (limit > localLimit) {
+    const localRadius = localLimit * step;
+    for (let ring = 1; ring <= DISTANT_RING_COUNT; ring += 1) {
+      const radius = localRadius + (displacement - localRadius) *
+        ring / DISTANT_RING_COUNT;
+      if (policy.axis === "x" || policy.axis === "y") {
+        addCandidate(
+          policy.axis === "x" ? radius : 0,
+          policy.axis === "y" ? radius : 0
+        );
+        addCandidate(
+          policy.axis === "x" ? -radius : 0,
+          policy.axis === "y" ? -radius : 0
+        );
+        continue;
+      }
+      for (let angle = 0; angle < DISTANT_ANGLE_COUNT; angle += 1) {
+        const radians = angle / DISTANT_ANGLE_COUNT * Math.PI * 2;
+        addCandidate(radius * Math.cos(radians), radius * Math.sin(radians));
+      }
     }
   }
   candidates.sort((first, second) =>
@@ -125,6 +164,8 @@ function textBounds(item, offset = { x: 0, y: 0 }) {
     y: item.y + offset.y,
     text: item.text,
     fontSize: item.fontSize,
+    fontFamily: item.fontFamily,
+    fontWeight: item.fontWeight,
     textAlign: item.textAlign,
     textBaseline: item.textBaseline,
     rotation: item.rotation
@@ -177,6 +218,10 @@ export function resolveLabelLayout({ items, bounds, ...options } = {}) {
   const ids = new Set();
   for (const item of items) validateItem(item, ids);
   const candidates = enumerateLabelOffsets(policy);
+  validateWorkLimit(
+    items.length ** 2 * candidates.length,
+    "Label layout work"
+  );
   const base = items.map(item => ({
     id: item.id,
     collisionBounds: expanded(textBounds(item), policy.padding)
@@ -231,9 +276,33 @@ export function resolveLabelLayout({ items, bounds, ...options } = {}) {
   });
 }
 
-function contains(bounds, point) {
-  return point.x >= bounds.left && point.x <= bounds.right &&
-    point.y >= bounds.top && point.y <= bounds.bottom;
+export function assertPolarTextLayout({ canvas, items, label }) {
+  const dimensions = canvas?.properties;
+  if (
+    ![dimensions?.width, dimensions?.height].every(Number.isFinite) ||
+    dimensions.width <= 0 || dimensions.height <= 0
+  ) {
+    throw new Error("Polar text layout requires finite Canvas dimensions.");
+  }
+  const bounds = items.map(resolveTextBounds);
+  const outside = bounds.some(item => !textBoundsFitCanvas(item, dimensions));
+  let overlap = false;
+  for (let first = 0; first < bounds.length && !overlap; first += 1) {
+    for (let second = first + 1; second < bounds.length; second += 1) {
+      if (
+        (Math.abs(items[first].x - items[second].x) > 1e-9 ||
+          Math.abs(items[first].y - items[second].y) > 1e-9) &&
+        textBoundsIntersect(bounds[first], bounds[second])
+      ) {
+        overlap = true;
+        break;
+      }
+    }
+  }
+  if (outside || overlap) {
+    const verb = label.endsWith("labels") ? "require" : "requires";
+    throw new Error(`${label} ${verb} sufficient non-overlapping Canvas space.`);
+  }
 }
 
 export function resolveLabelLeader(item) {
@@ -242,10 +311,17 @@ export function resolveLabelLeader(item) {
   }
   if (item.dx === 0 && item.dy === 0) return undefined;
   const source = { x: item.sourceX, y: item.sourceY };
-  if (contains(item.bounds, source)) return undefined;
+  if (
+    source.x >= item.bounds.left && source.x <= item.bounds.right &&
+    source.y >= item.bounds.top && source.y <= item.bounds.bottom
+  ) return undefined;
+  const midpoint = (start, end) => {
+    const sum = start + end;
+    return Number.isFinite(sum) ? sum / 2 : start / 2 + end / 2;
+  };
   const center = {
-    x: (item.bounds.left + item.bounds.right) / 2,
-    y: (item.bounds.top + item.bounds.bottom) / 2
+    x: midpoint(item.bounds.left, item.bounds.right),
+    y: midpoint(item.bounds.top, item.bounds.bottom)
   };
   const dx = center.x - source.x;
   const dy = center.y - source.y;

package/src/layout/legend.js

@@ -1,3 +1,8 @@
+import {
+  formatVisibleText,
+  measureTextWidth
+} from "../core/textMetrics.js";
+
 export function measureLegendSymbolHeight(config) {
   return Math.max(...config.symbol.layers.map(layer => {
     if (layer.type === "swatch") return layer.height;
@@ -6,41 +11,38 @@ export function measureLegendSymbolHeight(config) {
   }));
 }
 
-export function measureLegendTextWidth(value) {
-  return String(value).length * 7;
+export function measureLegendTextWidth(value, style = { fontSize: 12 }) {
+  return measureTextWidth(formatVisibleText(value), style);
 }
 
 export function resolveLegendGrid(config, width, count) {
-  const labels = config.domain.map(String);
+  const labels = config.domain.map(formatVisibleText);
   const itemWidths = labels.map(
-    label => width + config.labels.offset + label.length * 7
+    label => width + config.labels.offset +
+      measureLegendTextWidth(label, config.labels)
   );
   const columnCount = Math.min(config.columns ?? count, count);
   const rowCount = Math.ceil(count / columnCount);
+  const columnWidths = [];
   const cells = Array.from({ length: count }, (_, index) => {
-    if (config.direction === "horizontal") {
-      return { column: index % columnCount, row: Math.floor(index / columnCount) };
-    }
-    return {
-      column: Math.floor(index / rowCount),
-      row: index % rowCount
-    };
+    const cell = config.direction === "horizontal"
+      ? { column: index % columnCount, row: Math.floor(index / columnCount) }
+      : { column: Math.floor(index / rowCount), row: index % rowCount };
+    columnWidths[cell.column] = Math.max(
+      columnWidths[cell.column] ?? 0,
+      itemWidths[index]
+    );
+    return cell;
   });
-  const actualColumns = Math.max(...cells.map(cell => cell.column)) + 1;
-  const actualRows = Math.max(...cells.map(cell => cell.row)) + 1;
-  const columnWidths = Array.from({ length: actualColumns }, (_, column) =>
-    Math.max(...cells.map((cell, index) =>
-      cell.column === column ? itemWidths[index] : 0
-    ))
-  );
+  const actualColumns = columnWidths.length;
   const gridWidth = columnWidths.reduce((sum, value) => sum + value, 0) +
     config.itemGap * Math.max(0, actualColumns - 1);
   const rowHeight = Math.max(
     config.labels.fontSize,
     measureLegendSymbolHeight(config)
   );
-  const gridHeight = rowHeight * actualRows +
-    config.itemGap * Math.max(0, actualRows - 1);
+  const gridHeight = rowHeight * rowCount +
+    config.itemGap * Math.max(0, rowCount - 1);
   return { cells, columnWidths, gridWidth, gridHeight, rowHeight };
 }
 

package/src/layout/legendLane.js

@@ -4,13 +4,19 @@ export const SIDE_LEGEND_SYMBOL_CENTER = 16;
 export const SIDE_LEGEND_LABEL_START = 44;
 export const HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP = 12;
 
+function midpoint(start, end) {
+  const sum = start + end;
+  const result = Number.isFinite(sum) ? sum / 2 : start / 2 + end / 2;
+  return result === 0 ? 0 : result;
+}
+
 function unionBounds(bounds) {
-  return {
-    left: Math.min(...bounds.map(item => item.left)),
-    right: Math.max(...bounds.map(item => item.right)),
-    top: Math.min(...bounds.map(item => item.top)),
-    bottom: Math.max(...bounds.map(item => item.bottom))
-  };
+  return bounds.reduce((union, item) => ({
+    left: Math.min(union.left, item.left),
+    right: Math.max(union.right, item.right),
+    top: Math.min(union.top, item.top),
+    bottom: Math.max(union.bottom, item.bottom)
+  }), { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity });
 }
 
 function decoration(border) {
@@ -20,19 +26,20 @@ function decoration(border) {
 }
 
 function horizontalExtent(blocks) {
-  const left = [0];
-  const right = [0];
+  let left = 0;
+  let right = 0;
   for (const block of blocks) {
-    if (block.title !== undefined) right.push(block.title.width);
-    left.push(
+    if (block.title !== undefined) right = Math.max(right, block.title.width);
+    left = Math.min(left,
       SIDE_LEGEND_SYMBOL_CENTER + block.symbol.left - block.symbol.centerX
     );
-    right.push(
-      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX
+    right = Math.max(
+      right,
+      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX,
+      SIDE_LEGEND_LABEL_START + block.labels.width
     );
-    right.push(SIDE_LEGEND_LABEL_START + block.labels.width);
   }
-  return { left: Math.min(...left), right: Math.max(...right) };
+  return { left, right };
 }
 
 function placeBlock(block, cursor) {
@@ -81,7 +88,10 @@ export function resolveSideLegendLane({
   const blocks = groups.flatMap(group => group.blocks);
   if (blocks.length < 2) return undefined;
   const laneExtent = horizontalExtent(blocks);
-  const offset = Math.max(...blocks.map(block => block.offset));
+  const offset = blocks.reduce(
+    (maximum, block) => Math.max(maximum, block.offset),
+    -Infinity
+  );
   const titleStartX = side === "right"
     ? plot.x + plot.width + offset
     : plot.x - offset - laneExtent.right;
@@ -160,21 +170,12 @@ export function resolveSideLegendLane({
   };
 }
 
-function translateBounds(bounds, dy) {
-  return {
-    left: bounds.left,
-    right: bounds.right,
-    top: bounds.top + dy,
-    bottom: bounds.bottom + dy
-  };
-}
-
-function translateBoundsX(bounds, dx) {
+function translateBounds(bounds, dx, dy) {
   return {
     left: bounds.left + dx,
     right: bounds.right + dx,
-    top: bounds.top,
-    bottom: bounds.bottom
+    top: bounds.top + dy,
+    bottom: bounds.bottom + dy
   };
 }
 
@@ -198,13 +199,13 @@ function packHorizontalRows(groups, plot) {
       throw new Error("Horizontal legend block requires more plot width.");
     }
     let dx = cursor - interval.left;
-    let placed = translateBoundsX(interval, dx);
+    let placed = translateBounds(interval, dx, 0);
     if (row.length > 0 && placed.right > plot.x + plot.width) {
       rows.push(row);
       row = [];
       cursor = plot.x;
       dx = cursor - interval.left;
-      placed = translateBoundsX(interval, dx);
+      placed = translateBounds(interval, dx, 0);
     }
     row.push({ group, interval: placed, dx });
     cursor = placed.right + HORIZONTAL_LEGEND_BLOCK_GAP;
@@ -220,15 +221,22 @@ function normalizeHorizontalRow(entries) {
   const commonTitleY = stacked[0]?.group.title.y;
   const titleDescent = stacked.length === 0
     ? 0
-    : Math.max(...stacked.map(
-        entry => entry.group.title.bounds.bottom - entry.group.title.y
-      ));
+    : stacked.reduce((maximum, entry) => Math.max(
+        maximum,
+        entry.group.title.bounds.bottom - entry.group.title.y
+      ), -Infinity);
   const elementAnchor = commonTitleY === undefined
-    ? (entries[0].group.element.top + entries[0].group.element.bottom) / 2
+    ? midpoint(
+        entries[0].group.element.top,
+        entries[0].group.element.bottom
+      )
     : commonTitleY + titleDescent + HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP;
   return entries.map(({ group, dx }) => {
     const contentDy = commonTitleY === undefined
-      ? elementAnchor - (group.element.top + group.element.bottom) / 2
+      ? elementAnchor - midpoint(
+          group.element.top,
+          group.element.bottom
+        )
       : elementAnchor - group.element.top;
     const titleDy = group.title === undefined
       ? 0
@@ -238,8 +246,8 @@ function normalizeHorizontalRow(entries) {
     const foreground = unionBounds([
       ...(group.title === undefined
         ? []
-        : [translateBoundsX(translateBounds(group.title.bounds, titleDy), dx)]),
-      translateBoundsX(translateBounds(group.content, contentDy), dx)
+        : [translateBounds(group.title.bounds, dx, titleDy)]),
+      translateBounds(group.content, dx, contentDy)
     ]);
     return {
       id: group.id,
@@ -259,8 +267,8 @@ function translateHorizontalPlacement(placement, dy) {
     ...placement,
     titleDy: placement.titleDy + dy,
     contentDy: placement.contentDy + dy,
-    foreground: translateBounds(placement.foreground, dy),
-    occupied: translateBounds(placement.occupied, dy)
+    foreground: translateBounds(placement.foreground, 0, dy),
+    occupied: translateBounds(placement.occupied, 0, dy)
   };
 }
 
@@ -285,8 +293,14 @@ export function resolveHorizontalLegendLane({
     let dy;
     if (index === 0) {
       const anchor = edge === "top"
-        ? Math.max(...packed[index].map(item => item.group.horizontal.bottom))
-        : Math.min(...packed[index].map(item => item.group.horizontal.top));
+        ? packed[index].reduce((maximum, item) => Math.max(
+            maximum,
+            item.group.horizontal.bottom
+          ), -Infinity)
+        : packed[index].reduce((minimum, item) => Math.min(
+            minimum,
+            item.group.horizontal.top
+          ), Infinity);
       dy = edge === "top"
         ? anchor - rowBounds.bottom
         : anchor - rowBounds.top;

package/src/layout/title.js

@@ -44,7 +44,7 @@ export function buildTitleReadingBlock({ text, subtitle }, config) {
     subtitleLines,
     titleCenters,
     subtitleCenters,
-    width: Math.max(...widths),
+    width: widths.reduce((maximum, width) => Math.max(maximum, width), -Infinity),
     height
   };
 }
@@ -74,12 +74,12 @@ function axisAlignedTextBounds({ x, y, text, style, align, rotation }) {
 }
 
 function unionBounds(bounds) {
-  return {
-    left: Math.min(...bounds.map(item => item.left)),
-    right: Math.max(...bounds.map(item => item.right)),
-    top: Math.min(...bounds.map(item => item.top)),
-    bottom: Math.max(...bounds.map(item => item.bottom))
-  };
+  return bounds.reduce((union, item) => ({
+    left: Math.min(union.left, item.left),
+    right: Math.max(union.right, item.right),
+    top: Math.min(union.top, item.top),
+    bottom: Math.max(union.bottom, item.bottom)
+  }), { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity });
 }
 
 export function resolveTitleComponentBounds(component, style) {

package/src/materialization/bars/aggregate.js

@@ -11,13 +11,12 @@ import {
 import {
   isDiscretePositionScaleType,
   mapContinuousScaleValues,
-  mapOrdinalPositionValues,
-  mapSequentialColors
+  mapOrdinalPositionValues
 } from "../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from "../scales/map.js";
 import {
   DEFAULT_BAR_FILL,
-  DEFAULT_BAR_STROKE,
-  DEFAULT_BAR_STROKE_WIDTH
+  resolveBarAppearance
 } from "./resolve.js";
 import { deriveGroupedRectangles } from "./grouped.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
@@ -72,14 +71,8 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
   const baseline = DEFAULT_SERIES_BASELINE;
   const continuousColor = colorEncoding?.fieldType === "quantitative";
   if (continuousColor) {
-    const mappedColors = mapSequentialColors(
-      cells.map(cell => cell.color),
-      colorScale.domain,
-      colorScale.range,
-      {
-        interpolation: colorScale.interpolate,
-        clamp: colorScale.clamp ?? false
-      }
+    const mappedColors = mapScaleConsumerValues(
+      cells.map(cell => cell.color), colorScale, "color"
     );
     const cellByCategory = new Map(
       cells.map((cell, index) => [cell[channels.category], { cell, index }])
@@ -97,8 +90,14 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
             [categoryValue],
             categoryScale
           )[0];
+      const [segment] = layoutSeriesPartition(
+        [cell[channels.measure]],
+        layout,
+        { baseline }
+      );
+      if (segment === undefined) return [];
       const [start, end] = mapContinuousScaleValues(
-        [baseline, cell[channels.measure]],
+        [segment.start, segment.end],
         measureScale
       );
       return [{
@@ -107,19 +106,7 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
         width: vertical ? thickness : Math.abs(start - end),
         height: vertical ? Math.abs(start - end) : thickness,
         fill: mappedColors[index],
-        stroke: appearance.stroke === false
-          ? "transparent"
-          : appearance.stroke ?? config.stroke ??
-            existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
-        strokeWidth: appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-        ...((appearance.opacity ?? config.opacity) === undefined
-          ? (existing[index]?.properties.opacity === undefined
-              ? {}
-              : { opacity: existing[index].properties.opacity })
-          : { opacity: appearance.opacity ?? config.opacity })
+        ...resolveBarAppearance(config, existing[index]?.properties)
       }];
     });
   }
@@ -168,20 +155,7 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
       fill: segment.color === undefined
         ? appearance.fill ?? config.fill ?? colors.get(segment.color)
         : colors.get(segment.color),
-      stroke: appearance.stroke === false
-        ? "transparent"
-        : appearance.stroke ?? config.stroke ?? existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
-      strokeWidth:
-        appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ??
-            DEFAULT_BAR_STROKE_WIDTH,
-      ...((appearance.opacity ?? config.opacity) === undefined
-        ? (existing[index]?.properties.opacity === undefined
-            ? {}
-            : { opacity: existing[index].properties.opacity })
-        : { opacity: appearance.opacity ?? config.opacity })
+      ...resolveBarAppearance(config, existing[index]?.properties)
     };
   });
 }

package/src/materialization/bars/grouped.js

@@ -5,11 +5,11 @@ import {
 } from "../../grammar/scales/index.js";
 import { sameOrderedValues } from "../../core/validation.js";
 import {
-  DEFAULT_BAR_STROKE,
-  DEFAULT_BAR_STROKE_WIDTH
+  resolveBarAppearance
 } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
 import { DEFAULT_SERIES_BASELINE } from "../../grammar/seriesLayout.js";
+import { finiteMidpoint } from "../../grammar/numeric.js";
 import {
   BAR_ORIENTATIONS,
   resolveBarChannels,
@@ -58,7 +58,10 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
       colorScale.range[index % colorScale.range.length]
     ])
   );
-  const offsetMidpoint = (offsetScale.range[0] + offsetScale.range[1]) / 2;
+  const offsetMidpoint = finiteMidpoint(
+    offsetScale.range[0],
+    offsetScale.range[1]
+  );
   const categoryDirection = Math.sign(
     categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]
   ) || 1;
@@ -78,7 +81,6 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
   );
   const existing = resolved.graphicSpec.objects[layer.id].items;
   const config = resolved.markConfigs[layer.id] ?? {};
-  const appearance = config.barAppearance ?? {};
 
   return cells.map((cell, index) => {
     const categoryValue = cell[channels.category];
@@ -136,20 +138,7 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
     return {
       ...geometry,
       fill: colors.get(cell.color),
-      stroke: appearance.stroke === false
-        ? "transparent"
-        : appearance.stroke ?? config.stroke ?? existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
-      strokeWidth:
-        appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ??
-            DEFAULT_BAR_STROKE_WIDTH,
-      ...((appearance.opacity ?? config.opacity) === undefined
-        ? (existing[index]?.properties.opacity === undefined
-            ? {}
-            : { opacity: existing[index].properties.opacity })
-        : { opacity: appearance.opacity ?? config.opacity })
+      ...resolveBarAppearance(config, existing[index]?.properties)
     };
   });
 }

package/src/materialization/bars/histogram.js

@@ -13,8 +13,7 @@ import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
 import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
 import {
   DEFAULT_BAR_FILL,
-  DEFAULT_BAR_STROKE,
-  DEFAULT_BAR_STROKE_WIDTH
+  resolveBarAppearance
 } from "./resolve.js";
 
 export function deriveHistogramSegments({
@@ -141,23 +140,7 @@ export function deriveHistogramRectangles(required, resolved) {
         config.fill ??
         existing[index]?.properties.fill ??
         DEFAULT_BAR_FILL,
-      stroke:
-        appearance.stroke === false
-          ? "transparent"
-          : appearance.stroke ?? config.stroke ??
-            existing[index]?.properties.stroke ??
-            DEFAULT_BAR_STROKE,
-      strokeWidth:
-        appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ??
-            DEFAULT_BAR_STROKE_WIDTH,
-      ...((appearance.opacity ?? config.opacity) === undefined
-        ? (existing[index]?.properties.opacity === undefined
-            ? {}
-            : { opacity: existing[index].properties.opacity })
-        : { opacity: appearance.opacity ?? config.opacity })
+      ...resolveBarAppearance(config, existing[index]?.properties)
     };
   });
 }