ggaction 0.0.13 → 0.0.16

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 });
   }

package/src/materialization/coordinateBounds.js

@@ -0,0 +1,204 @@
+import { isSourceOwnedText } from "../grammar/text.js";
+import { resolvePolarFrame } from "../grammar/polar.js";
+import { resolveEffectiveBounds } from "../layout/aspect.js";
+import { resolveGraphicBounds } from "../layout/canvas.js";
+import { findCoordinate, requireCoordinate } from "../selectors/coordinates.js";
+import { findSemanticScale } from "../selectors/scales.js";
+
+const DATA_CHANNELS = Object.freeze(["x", "y"]);
+const SECONDARY_CHANNELS = Object.freeze({ x2: "x", y2: "y" });
+
+function samePair(left, right) {
+  return left.x === right.x && left.y === right.y;
+}
+
+export function resolveDataAspectScalePair(program, target) {
+  const coordinate = typeof target === "string"
+    ? requireCoordinate(program, target)
+    : target;
+  if (coordinate.type !== "cartesian") {
+    throw new Error("Coordinate data aspect requires a Cartesian coordinate.");
+  }
+  const layers = program.semanticSpec.layers.filter(layer =>
+    layer.coordinate === coordinate.id &&
+    !isSourceOwnedText(layer) &&
+    DATA_CHANNELS.some(channel => layer.encoding?.[channel] !== undefined)
+  );
+  if (layers.length === 0) {
+    throw new Error(
+      `Coordinate "${coordinate.id}" data aspect requires active x and y consumers.`
+    );
+  }
+  const pairs = layers.map(layer => {
+    for (const channel of DATA_CHANNELS) {
+      const encoding = layer.encoding?.[channel];
+      if (
+        encoding?.scale === undefined ||
+        encoding.fieldType !== "quantitative"
+      ) {
+        throw new Error(
+          `Coordinate "${coordinate.id}" data aspect requires quantitative x and y scale consumers.`
+        );
+      }
+    }
+    for (const [secondary, primary] of Object.entries(SECONDARY_CHANNELS)) {
+      const encoding = layer.encoding?.[secondary];
+      if (encoding !== undefined && (
+        encoding.fieldType !== "quantitative" ||
+        encoding.scale !== layer.encoding[primary].scale
+      )) {
+        throw new Error(
+          `Coordinate "${coordinate.id}" data aspect requires ${secondary} to share its quantitative ${primary} scale.`
+        );
+      }
+    }
+    return { x: layer.encoding.x.scale, y: layer.encoding.y.scale };
+  });
+  if (pairs.some(pair => !samePair(pair, pairs[0]))) {
+    throw new Error(
+      `Coordinate "${coordinate.id}" data aspect requires one consistent x/y scale pair.`
+    );
+  }
+  const scales = {
+    x: findSemanticScale(program, pairs[0].x),
+    y: findSemanticScale(program, pairs[0].y)
+  };
+  for (const channel of DATA_CHANNELS) {
+    if (scales[channel]?.type !== "linear") {
+      throw new Error(
+        `Coordinate data aspect requires a linear ${channel} scale.`
+      );
+    }
+  }
+  return Object.freeze({
+    x: pairs[0].x,
+    y: pairs[0].y
+  });
+}
+
+export function findDataAspectCoordinatesForScale(program, scaleId) {
+  return program.semanticSpec.coordinates.filter(coordinate => {
+    if (coordinate.aspect?.mode !== "data") return false;
+    const pair = resolveDataAspectScalePair(program, coordinate);
+    return pair.x === scaleId || pair.y === scaleId;
+  });
+}
+
+function sameNumericPair(left, right) {
+  return Array.isArray(left) && left.length === 2 &&
+    left.every((value, index) => Number.isFinite(value) &&
+      Math.abs(value - right[index]) <= 1e-9);
+}
+
+function validateExplicitDataRanges(program, pair, bounds) {
+  const expected = {
+    x: [bounds.x, bounds.x + bounds.width],
+    y: [bounds.y + bounds.height, bounds.y]
+  };
+  for (const channel of DATA_CHANNELS) {
+    const scale = findSemanticScale(program, pair[channel]);
+    if (scale.range === "auto") continue;
+    const directed = scale.reverse === true
+      ? [...expected[channel]].reverse()
+      : expected[channel];
+    if (!sameNumericPair(scale.range, directed)) {
+      throw new Error(
+        `Coordinate data aspect conflicts with explicit ${channel} scale range "${scale.id}".`
+      );
+    }
+  }
+}
+
+export function resolveCoordinateBounds(program, target, {
+  resolvedScales = program.resolvedScales
+} = {}) {
+  const allocated = resolveGraphicBounds(program);
+  if (target === undefined) return allocated;
+  const coordinate = requireCoordinate(program, target);
+  const aspect = coordinate.aspect;
+  if (aspect === undefined || aspect === "auto") return allocated;
+  if (aspect.mode !== "data") {
+    return resolveEffectiveBounds(allocated, aspect);
+  }
+  const pair = resolveDataAspectScalePair(program, coordinate);
+  const x = resolvedScales[pair.x];
+  const y = resolvedScales[pair.y];
+  if (x?.type !== "linear" || y?.type !== "linear") {
+    throw new Error(
+      `Coordinate "${coordinate.id}" data aspect requires resolved linear x and y scales.`
+    );
+  }
+  const bounds = resolveEffectiveBounds(allocated, aspect, {
+    x: x.domain,
+    y: y.domain
+  });
+  validateExplicitDataRanges(program, pair, bounds);
+  return bounds;
+}
+
+export function resolveCoordinatePolarFrame(program, target, options) {
+  const coordinate = requireCoordinate(program, target);
+  if (coordinate.type !== "polar") {
+    throw new Error(`Coordinate "${coordinate.id}" is not Polar.`);
+  }
+  return resolvePolarFrame(
+    resolveCoordinateBounds(program, coordinate.id, options),
+    coordinate.polarFrame
+  );
+}
+
+function consumerCoordinateIds(consumers) {
+  return [...new Set(consumers.map(consumer => consumer.layer.coordinate))];
+}
+
+function sameBounds(left, right) {
+  return ["x", "y", "width", "height"].every(
+    property => Math.abs(left[property] - right[property]) <= 1e-9
+  );
+}
+
+export function resolveScaleConsumerBounds(program, consumers, options) {
+  const coordinateIds = consumerCoordinateIds(consumers);
+  if (coordinateIds.length === 0) return resolveGraphicBounds(program);
+  const allocated = resolveGraphicBounds(program);
+  const bounds = coordinateIds.map(id =>
+    id === undefined || findCoordinate(program, id) === undefined
+      ? allocated
+      : resolveCoordinateBounds(program, id, options)
+  );
+  if (bounds.slice(1).some(candidate => !sameBounds(candidate, bounds[0]))) {
+    throw new Error(
+      "A position scale cannot be shared across coordinates with different effective bounds."
+    );
+  }
+  return bounds[0];
+}
+
+export function resolveGuideCoordinateBounds(program, {
+  coordinate,
+  scale,
+  channel,
+  resolvedScales = program.resolvedScales
+}) {
+  let target = coordinate;
+  if (target === undefined && scale !== undefined) {
+    const candidates = new Set();
+    for (const layer of program.semanticSpec.layers) {
+      if (isSourceOwnedText(layer)) continue;
+      if (layer.encoding?.[channel]?.scale === scale) {
+        candidates.add(layer.coordinate);
+      }
+    }
+    if (candidates.has(undefined)) {
+      throw new Error("Guide scale consumers require stored coordinates.");
+    }
+    if (candidates.size > 1) {
+      throw new Error("Guide bounds found no unique compatible coordinate.");
+    }
+    target = candidates.values().next().value;
+  }
+  if (target !== undefined && findCoordinate(program, target) === undefined) {
+    throw new Error(`Unknown coordinate "${target}".`);
+  }
+  return resolveCoordinateBounds(program, target, { resolvedScales });
+}

package/src/materialization/dependencies.js

@@ -19,6 +19,7 @@ import {
   planScaleGuideRematerialization
 } from "./scaleGuideDependencies.js";
 import { planLayoutRematerialization } from "./layout.js";
+import { requireCoordinate } from "../selectors/coordinates.js";
 
 export function planCanvasRematerialization(program) {
   const marks = [];
@@ -61,6 +62,41 @@ export function planCanvasRematerialization(program) {
   return buildMaterializationPlan({ scales, marks, guides, layout });
 }
 
+export function planCoordinateRematerialization(program, target) {
+  requireCoordinate(program, target);
+  const layers = program.semanticSpec.layers.filter(
+    layer => layer.coordinate === target
+  );
+  const scaleIds = [...new Set(layers.flatMap(layer => [
+    ...["x", "y", "x2", "y2", "theta", "radius"].map(
+      channel => layer.encoding?.[channel]?.scale
+    ),
+    ...(layer.encoding?.parallel?.dimensions ?? []).map(
+      dimension => dimension.scale
+    )
+  ]).filter(id => id !== undefined))];
+  const directMarks = layers
+    .map(layer => getMarkMaterializationStep(program, layer))
+    .filter(step => step !== undefined);
+  const marks = [
+    ...directMarks,
+    ...directMarks.flatMap(step =>
+      getSourceDependentMarkSteps(program, step.args.id)
+    )
+  ];
+  return buildMaterializationPlan({
+    scales: scaleIds.map(id => ({
+      op: "rematerializeScale",
+      args: { id, guides: false, marks: false }
+    })),
+    marks: reusePlannedMarkScales(program, marks, scaleIds),
+    guides: scaleIds.flatMap(id =>
+      planScaleGuideRematerialization(program, id)
+    ),
+    layout: planLayoutRematerialization(program)
+  });
+}
+
 export function planLayerDataRematerialization(program, id) {
   const layer = requireLayer(program, id);
   const scaleIds = [...new Set(getLayerScaleIds(layer))];

package/src/materialization/facetGuides/legacyCategorical.js

@@ -29,6 +29,9 @@ function collection(program, id, items) {
 }
 
 export function resolveLegacyCategoricalLegend(program) {
+  if (program.semanticSpec.layers.some(layer =>
+    layer.encoding?.stroke?.scale !== undefined
+  )) return undefined;
   const encodings = program.semanticSpec.layers.flatMap(layer =>
     layer.encoding?.color === undefined
       ? []

package/src/materialization/facetGuides/placement.js

@@ -46,10 +46,16 @@ function legendTranslation(prepared, plot, layout) {
       y: layout.legend.y - prepared.bounds.top
     };
   }
-  const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
+  const gradientKind = prepared.kinds?.find(kind =>
+    ["gradient", "strokeGradient"].includes(kind)
+  );
+  const prefix = gradientKind === "strokeGradient"
+    ? "strokeGradient"
+    : "colorGradient";
+  const strips = prepared.source.graphicSpec.objects[`${prefix}Strips`];
   if (strips?.items?.[0] !== undefined) {
     const properties = strips.items[0].properties;
-    const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
+    const length = prepared.source.guideConfigs.legend[gradientKind].gradient.length;
     return {
       x: layout.legend.x - (position === "left"
         ? prepared.bounds.left
@@ -86,7 +92,7 @@ function attachParentLegend(program, prepared, plot, layout) {
 }
 
 function assertSharedLegendFits(program, id, layout, plot) {
-  const bounds = resolveConcreteGraphicBounds(program.graphicSpec, id);
+  const bounds = resolveConcreteGraphicBounds(program.graphicSpec, id, program.materializationConfigs.textMetrics);
   if (bounds === undefined) {
     throw new Error("Facet shared legend requires measurable concrete bounds.");
   }

package/src/materialization/facetGuides/preparation.js

@@ -35,7 +35,7 @@ function legendCandidates(program) {
     const layer = color[0];
     return {
       target: layer.id,
-      channels: ["color", "shape", "strokeDash"].filter(
+      channels: ["color", "stroke", "shape", "strokeDash"].filter(
         channel => layer.encoding?.[channel]?.scale !== undefined
       )
     };
@@ -45,7 +45,7 @@ function legendCandidates(program) {
       "Shared facet legend requires one unambiguous color legend target."
     );
   }
-  for (const channel of ["shape", "strokeDash", "size", "opacity"]) {
+  for (const channel of ["stroke", "shape", "strokeDash", "size", "opacity"]) {
     const candidates = layers.filter(
       layer => layer.encoding?.[channel]?.scale !== undefined
     );
@@ -105,9 +105,14 @@ function prepareAutoLegendSource(child) {
   }
   const scale = findSemanticScale(
     source,
-    findLayer(source, request.target)?.encoding?.color?.scale
+    findLayer(source, request.target)?.encoding?.[
+      request.channels.includes("color") ? "color" : "stroke"
+    ]?.scale
   );
   const gradient = scale?.type === "sequential";
+  const gradientPrefix = request.channels.includes("color")
+    ? "colorGradient"
+    : "strokeGradient";
   source = source.createLegend({
     target: request.target,
     channels: request.channels,
@@ -122,7 +127,7 @@ function prepareAutoLegendSource(child) {
     const resolved = source.resolvedScales[scale.id];
     source = source
       .editGraphics({
-        target: "colorGradientLabels",
+        target: `${gradientPrefix}Labels`,
         property: "text",
         value: formatDistinctNumericSamples(
           continuousValues(resolved.domain, 5),
@@ -130,9 +135,9 @@ function prepareAutoLegendSource(child) {
         )
       })
       .editGraphics({
-        target: "colorGradientTitle",
+        target: `${gradientPrefix}Title`,
         property: "y",
-        value: source.graphicSpec.objects.colorGradientTitle.properties.y + 8
+        value: source.graphicSpec.objects[`${gradientPrefix}Title`].properties.y + 8
       });
   }
   return source;
@@ -192,11 +197,11 @@ export function prepareSharedFacetLegend(program) {
   if (roots.length === 0) {
     throw new Error("Shared facet legend has no concrete guide graphics.");
   }
-  const bounds = unionConcreteGraphicBounds(source.graphicSpec, roots);
+  const bounds = unionConcreteGraphicBounds(source.graphicSpec, roots, source.materializationConfigs.textMetrics);
   if (bounds === undefined) {
     throw new Error("Shared facet legend has no measurable concrete bounds.");
   }
-  const gradient = kinds.includes("gradient");
+  const gradient = kinds.some(kind => ["gradient", "strokeGradient"].includes(kind));
   const placement = promotedLegendPlacement(source, kinds);
   const width = Math.ceil(bounds.right - bounds.left);
   return {