ggaction 0.0.13 → 0.0.15

package/src/materialization/facets.js

@@ -1,9 +1,4 @@
 import { resolveGraphicBounds } from "../layout/canvas.js";
-import {
-  formatVisibleText,
-  resolveTextBounds,
-  textBoundsIntersect
-} from "../core/textMetrics.js";
 import { resolvePlacedPlotBounds } from "../layout/composition.js";
 import {
   alignedTextAnchor,
@@ -17,6 +12,10 @@ import {
   clearCompositionChildren,
   compositionChildDescriptor
 } from "./composition.js";
+import {
+  materializeFacetHeaders,
+  prepareFacetHeaders
+} from "./facetHeaders.js";
 
 const ZERO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
 
@@ -50,61 +49,6 @@ function titleLayout(program) {
   return { config, block, top, height: Math.ceil(top + block.height) };
 }
 
-function collection(program, id, items) {
-  return program
-    .createGraphics({ id, type: "collection", parent: "canvas" })
-    .editGraphics({ target: id, property: "items", value: items });
-}
-
-function assertFacetHeadersFit(items, layout, plotById) {
-  const previous = [];
-  for (let index = 0; index < items.length; index += 1) {
-    const bounds = resolveTextBounds(items[index].properties);
-    const cell = layout.children[index];
-    const plot = plotById.get(cell.id);
-    if (bounds.left < 0 || bounds.right > layout.width ||
-      bounds.top < 0 || bounds.bottom > layout.height ||
-      previous.some(item => textBoundsIntersect(item, bounds)) ||
-      textBoundsIntersect(bounds, {
-        left: cell.x + plot.x,
-        right: cell.x + plot.x + plot.width,
-        top: cell.y + plot.y,
-        bottom: cell.y + plot.y + plot.height
-      })) {
-      throw new Error(
-        "Facet headers require sufficient non-overlapping space above every child plot."
-      );
-    }
-    previous.push(bounds);
-  }
-}
-
-function materializeHeaders(program, layout, plots, config) {
-  const plotById = new Map(plots.map(plot => [plot.id, plot]));
-  const items = layout.children.map(cell => {
-    const plot = plotById.get(cell.id);
-    if (plot === undefined) {
-      throw new Error(`Facet header requires plot bounds for "${cell.id}".`);
-    }
-    return {
-      type: "text",
-      properties: {
-        x: cell.x + plot.x + plot.width / 2,
-        y: cell.y + config.offset,
-        text: formatVisibleText(cell.value),
-        fill: config.color,
-        fontSize: config.fontSize,
-        fontFamily: config.fontFamily,
-        fontWeight: config.fontWeight,
-        textAlign: "center",
-        textBaseline: "middle"
-      }
-    };
-  });
-  assertFacetHeadersFit(items, layout, plotById);
-  return collection(program, `${program.compositionSpec.id}-headers`, items);
-}
-
 function materializeTitleComponent(program, id, lines, centers, style, plot, top) {
   if (lines.length === 0) return program;
   const x = alignedTextAnchor(plot.x, plot.width, program.titleConfig.align);
@@ -162,6 +106,10 @@ export function resolveFacetProgramLayout(program, preparedLegend) {
   }
   const title = titleLayout(program);
   const spec = program.compositionSpec;
+  const preparedHeaders = prepareFacetHeaders(
+    program,
+    facetConfig(program).headers
+  );
   const gridCells = new Map(
     (spec.facet.grid?.cells ?? []).map(cell => [cell.id, cell])
   );
@@ -179,6 +127,7 @@ export function resolveFacetProgramLayout(program, preparedLegend) {
     align: spec.align,
     padding: spec.padding,
     titleHeight: title.height,
+    headerLayout: preparedHeaders.headerLayout,
     sharedLegend: spec.facet.guides.legend === "shared",
     ...(preparedLegend === undefined ? {} : {
       sharedLegendGap: preparedLegend.reservation.gap,
@@ -195,16 +144,17 @@ export function resolveFacetProgramLayout(program, preparedLegend) {
     placements: layout.children,
     plots
   });
-  return { layout, title, plot, plots };
+  return { layout, title, plot, plots, preparedHeaders };
 }
 
 export function materializeFacetGraphics(program) {
   const preparedLegend = prepareSharedFacetLegend(program);
-  const { layout, title, plot, plots } = resolveFacetProgramLayout(
+  const { layout, title, plot, plots, preparedHeaders } = resolveFacetProgramLayout(
     program,
     preparedLegend
   );
-  const config = facetConfig(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" });
@@ -212,7 +162,7 @@ export function materializeFacetGraphics(program) {
   for (const [property, value] of Object.entries({
     width: layout.width,
     height: layout.height,
-    background: "white"
+    background
   })) {
     next = next.editGraphics({ target: "canvas", property, value });
   }
@@ -225,7 +175,7 @@ export function materializeFacetGraphics(program) {
     });
     next = attachSnapshotObject(next, snapshot, snapshot.order[0], "canvas");
   }
-  next = materializeHeaders(next, layout, plots, config.headers);
+  next = materializeFacetHeaders(next, layout, plots, preparedHeaders);
   next = next.composeFacetGuides({ layout, plot });
   if (title.height > 0) next = materializeTitle(next, plot, title);
   return next._withCanvasConfig({

package/src/materialization/guides/resources.js

@@ -22,6 +22,14 @@ const LEGEND_RESOURCE_POLICIES = Object.freeze({
       component => `colorLegend${component}`
     ))
   }),
+  stroke: Object.freeze({
+    semanticKind: "stroke",
+    family: "categorical",
+    rematerializeOp: undefined,
+    graphicIds: Object.freeze(CATEGORICAL_COMPONENTS.map(
+      component => `strokeLegend${component}`
+    ))
+  }),
   size: Object.freeze({
     semanticKind: "size",
     family: "size",
@@ -48,6 +56,24 @@ const LEGEND_RESOURCE_POLICIES = Object.freeze({
       "colorLegendTitle"
     ])
   }),
+  strokeGradient: Object.freeze({
+    semanticKind: "stroke",
+    family: "continuous",
+    rematerializeOp: "rematerializeStrokeGradientLegend",
+    graphicIds: Object.freeze([
+      "strokeGradientBackground", "strokeGradientStrips", "strokeGradientTicks",
+      "strokeGradientLabels", "strokeGradientTitle"
+    ])
+  }),
+  strokeInterval: Object.freeze({
+    semanticKind: "stroke",
+    family: "interval",
+    rematerializeOp: "rematerializeStrokeIntervalLegend",
+    graphicIds: Object.freeze([
+      "strokeIntervalBackground", "strokeIntervalSymbols",
+      "strokeIntervalLabels", "strokeIntervalTitle"
+    ])
+  }),
   opacity: Object.freeze({
     semanticKind: "opacity",
     family: "continuous",

package/src/materialization/legends.js

@@ -10,7 +10,7 @@ export function hasMaterializedLegend(program) {
   return LEGEND_CONFIG_KINDS.some(kind => {
     const config = program.guideConfigs?.legend?.[kind];
     if (config === undefined) return false;
-    if (kind === "series" || kind === "color") {
+    if (["series", "color", "stroke"].includes(kind)) {
       return program.semanticSpec.guides.legend?.[kind] !== undefined;
     }
     return true;

package/src/materialization/marks/index.js

@@ -36,6 +36,9 @@ export function getScaleConsumerMarkSteps(program, scaleIds) {
 }
 
 export function getMarkRematerializationStep(program, layer) {
+  if (program.markConfigs?.[layer.id]?.statisticalReference !== undefined) {
+    return { op: "rematerializeStatisticalReference", args: { id: layer.id } };
+  }
   if (program.markConfigs?.[layer.id]?.markFilter?.empty === true) {
     return { op: "materializeEmptyMark", args: { id: layer.id } };
   }
@@ -54,15 +57,18 @@ export function getMarkMaterializationStep(program, layer) {
 }
 
 export function getSourceDependentMarkSteps(program, sourceId) {
-  return (program.semanticSpec.layers ?? []).flatMap(layer =>
-    layer.source === sourceId &&
-    getMarkMaterializationPolicy(layer)?.sourceDependent === true
+  return (program.semanticSpec.layers ?? []).flatMap(layer => {
+    const sourceOwned = layer.source === sourceId &&
+      getMarkMaterializationPolicy(layer)?.sourceDependent === true;
+    const statistical = program.markConfigs?.[layer.id]
+      ?.statisticalReference?.source === sourceId;
+    return sourceOwned || statistical
       ? [getMarkMaterializationStep(program, layer) ??
           getExistingMarkRematerializationStep(program, layer)].filter(
           step => step !== undefined
         )
-      : []
-  );
+      : [];
+  });
 }
 
 export function getPositionEncodingMaterializationSteps(program, layer, scaleId) {

package/src/materialization/marks/policies.js

@@ -50,7 +50,7 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
     op: "rematerializeAreaMark",
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: true }),
     encoding: Object.freeze({
-      sharedChannels: Object.freeze(["color"]),
+      sharedChannels: Object.freeze(["color", "stroke"]),
       skipRematerialization: isIntentionallyEmptyArea
     }),
     scaleApplication: Object.freeze({ default: "defer" })
@@ -58,6 +58,7 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
   arc: Object.freeze({
     canMaterialize: canMaterializeArc,
     op: "rematerializeArcMark",
+    acceptsResolvedScales: true,
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: false }),
     encoding: Object.freeze({ completeOnly: true }),
     scaleApplication: Object.freeze({ default: "defer" })

package/src/materialization/rect.js

@@ -3,10 +3,12 @@ import {
   readScaleField
 } from "../grammar/scales/index.js";
 import { normalizePositionDatum } from "../grammar/positionDatum.js";
-import { resolveGraphicBounds } from "../layout/canvas.js";
+import { resolveCoordinateBounds } from "./coordinateBounds.js";
 import { RECT_MODES, resolveRectMode, rectUsesFields } from "../grammar/rects.js";
 import { DEFAULT_RECT_MARK } from "./rectConfig.js";
 import { mapScaleConsumerValues } from "./scales/map.js";
+import { materializeRectItem } from "../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../grammar/strokeStyle.js";
 
 function optionalValues(rows, encoding, length, channel) {
   if (Object.hasOwn(encoding, "datum")) {
@@ -22,7 +24,11 @@ function requiredChannels(layer, mode) {
   const position = mode === RECT_MODES.xSpan ? ["x", "x2"]
     : mode === RECT_MODES.ySpan ? ["y", "y2"]
     : mode === RECT_MODES.ranged ? ["x", "x2", "y", "y2"] : ["x", "y"];
-  return [...position, ...(layer.encoding?.color ? ["color"] : [])];
+  return [
+    ...position,
+    ...(layer.encoding?.color ? ["color"] : []),
+    ...(layer.encoding?.stroke ? ["stroke"] : [])
+  ];
 }
 
 export function resolveRectConsumerValues(layer, dataset, channel) {
@@ -64,19 +70,22 @@ function mappedEncoding(program, layer, dataset, channel) {
   };
 }
 
-function appearance(config, fill) {
+function appearance(config, fill, stroke) {
   return {
     fill,
     opacity: config.opacity,
-    stroke: config.stroke === false ? "transparent" : config.stroke,
-    strokeWidth: config.stroke === false ? 0 : config.strokeWidth
+    stroke: stroke ?? (config.stroke === false ? "transparent" : config.stroke),
+    strokeWidth: stroke === undefined && config.stroke === false
+      ? 0
+      : config.strokeWidth ?? 1,
+    ...requestedStrokeDetails(config, "Rect mark")
   };
 }
 
 export function resolveRectRows(program, layer, dataset) {
   const mode = resolveRectMode(layer);
   if (mode === undefined) return [];
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const x = layer.encoding.x === undefined ? undefined : mappedEncoding(program, layer, dataset, "x");
   const y = layer.encoding.y === undefined ? undefined : mappedEncoding(program, layer, dataset, "y");
   const x2 = layer.encoding.x2 === undefined ? undefined : mappedEncoding(program, layer, dataset, "x2");
@@ -84,6 +93,9 @@ export function resolveRectRows(program, layer, dataset) {
   const color = layer.encoding?.color === undefined
     ? undefined
     : mappedEncoding(program, layer, dataset, "color").values;
+  const stroke = layer.encoding?.stroke === undefined
+    ? undefined
+    : mappedEncoding(program, layer, dataset, "stroke").values;
   const config = program.markConfigs[layer.id] ?? DEFAULT_RECT_MARK;
 
   const rows = rectUsesFields(layer) ? dataset.values : [{}];
@@ -92,7 +104,8 @@ export function resolveRectRows(program, layer, dataset) {
     if (
       (x !== undefined && !Number.isFinite(x.values[index])) ||
       (y !== undefined && !Number.isFinite(y.values[index])) ||
-      typeof fill !== "string"
+      typeof fill !== "string" ||
+      (stroke !== undefined && typeof stroke[index] !== "string")
     ) return [];
 
     let geometry;
@@ -125,14 +138,14 @@ export function resolveRectRows(program, layer, dataset) {
     return [{
       row,
       sourceIndex: index,
-      properties: { ...geometry, ...appearance(config, fill) }
+      properties: { ...geometry, ...appearance(config, fill, stroke?.[index]) }
     }];
   });
 }
 
 export function resolveRectGraphicItems(program, layer, dataset) {
-  return resolveRectRows(program, layer, dataset).map(item => ({
-    type: "rect",
-    properties: item.properties
-  }));
+  const radius = program.markConfigs[layer.id]?.cornerRadius ?? 0;
+  return resolveRectRows(program, layer, dataset).map(item =>
+    materializeRectItem(item.properties, radius)
+  );
 }

package/src/materialization/rectConfig.js

@@ -4,6 +4,7 @@ import {
   validateUnitInterval
 } from "../core/validation.js";
 import { DEFAULT_COLORS } from "../theme/defaults.js";
+import { requestedRectStyleDetails } from "../grammar/roundedRect.js";
 
 export const DEFAULT_RECT_MARK = Object.freeze({
   fill: DEFAULT_COLORS.mark,
@@ -13,7 +14,10 @@ export const DEFAULT_RECT_MARK = Object.freeze({
 });
 
 export function normalizeRectMarkConfig(patch, previous = DEFAULT_RECT_MARK) {
-  const result = { ...previous };
+  const result = {
+    ...previous,
+    ...requestedRectStyleDetails(patch, "Rect")
+  };
   if (Object.hasOwn(patch, "fill")) {
     result.fill = validateNonEmptyString(patch.fill, "Rect fill");
   }

package/src/materialization/scales/map.js

@@ -4,15 +4,17 @@ import {
   isOrdinalScaleType,
   mapContinuousScaleValues,
   mapDiscretizedColors,
+  mapSizeValues,
   mapOrdinalValues,
   mapSequentialColors
 } from "../../grammar/scales/index.js";
 
 export function mapScaleConsumerValues(values, resolvedScale, channel) {
-  if (channel === "color" && isDiscretizedColorScaleType(resolvedScale.type)) {
+  if (channel === "size") return mapSizeValues(values, resolvedScale);
+  if (["color", "stroke"].includes(channel) && isDiscretizedColorScaleType(resolvedScale.type)) {
     return mapDiscretizedColors(values, resolvedScale);
   }
-  if (channel === "color" && isContinuousColorScaleType(resolvedScale.type)) {
+  if (["color", "stroke"].includes(channel) && isContinuousColorScaleType(resolvedScale.type)) {
     return mapSequentialColors(
       values,
       resolvedScale.domain,
@@ -28,7 +30,7 @@ export function mapScaleConsumerValues(values, resolvedScale, channel) {
     );
   }
   if (
-    ["color", "strokeDash", "shape"].includes(channel) &&
+    ["color", "stroke", "strokeDash", "shape"].includes(channel) &&
     isOrdinalScaleType(resolvedScale.type)
   ) {
     return mapOrdinalValues(values, resolvedScale.domain, resolvedScale.range, {

package/src/materialization/scales/policies/binnedPosition.js

@@ -13,8 +13,8 @@ export function resolveBinnedPositionDomain({
       consumer.encoding.bin !== undefined
   );
   if (binnedPositions.length === 0) return undefined;
-  const independentConsumers = valuesByConsumer.filter(({ consumer }) =>
-    !isSourceOwnedText(consumer.layer)
+  const independentConsumers = valuesByConsumer.filter(({ consumer, scalePolicy }) =>
+    scalePolicy !== false && !isSourceOwnedText(consumer.layer)
   );
   if (channel !== "x" || binnedPositions.length !== independentConsumers.length) {
     throw new Error(

package/src/materialization/scales/policies/offset.js

@@ -1,4 +1,4 @@
-import { normalizeOffsetPadding } from "../../../grammar/bars/geometry.js";
+import { normalizeOffsetScalePolicy } from "../../../grammar/bars/geometry.js";
 
 function resolveParentSlot(consumer, resolvedScales, parentChannel) {
   if (parentChannel === "x" && consumer.layer.encoding?.x?.bin !== undefined) {
@@ -16,6 +16,7 @@ function resolveParentSlot(consumer, resolvedScales, parentChannel) {
 }
 
 export function resolveOffsetScalePolicy({
+  scale,
   consumers,
   resolvedScales,
   markConfigs,
@@ -34,21 +35,62 @@ export function resolveOffsetScalePolicy({
       `${channel} scale "${id}" requires one shared resolved ${parentChannel} categorical slot.`
     );
   }
-  const paddings = consumers.map(consumer => normalizeOffsetPadding(
+  return {
+    parentBandwidth: slots[0],
+    ...resolveRequestedOffsetPolicy({
+      scale,
+      consumers,
+      markConfigs,
+      id,
+      channel
+    })
+  };
+}
+
+/**
+ * Resolve the requested offset policy independently from its parent slot.
+ * Semantic scale fields are canonical. Consistent legacy mark-owned padding is
+ * retained as a fallback until the next successful scale/encoding edit migrates
+ * it into the semantic scale.
+ */
+export function resolveRequestedOffsetPolicy({
+  scale,
+  consumers = [],
+  markConfigs = {},
+  id = scale?.id ?? channel,
+  channel = "xOffset"
+}) {
+  const semanticPatch = scale === undefined
+    ? {}
+    : Object.fromEntries(
+        ["padding", "paddingInner", "paddingOuter", "align"]
+          .filter(property => Object.hasOwn(scale, property))
+          .map(property => [property, scale[property]])
+      );
+  if (
+    Object.hasOwn(semanticPatch, "padding") ||
+    ["paddingInner", "paddingOuter", "align"].every(
+      property => Object.hasOwn(semanticPatch, property)
+    )
+  ) {
+    return normalizeOffsetScalePolicy(semanticPatch, undefined, channel);
+  }
+  const legacyPolicies = consumers.map(consumer => normalizeOffsetScalePolicy(
     markConfigs[consumer.layer.id]?.[channel],
     undefined,
     channel
   ));
   const signatures = new Set(
-    paddings.map(padding => JSON.stringify(padding))
+    legacyPolicies.map(policy => JSON.stringify(policy))
   );
-  if (signatures.size !== 1) {
+  if (signatures.size > 1) {
     throw new Error(
       `${channel} scale "${id}" requires one shared padding policy.`
     );
   }
-  return {
-    parentBandwidth: slots[0],
-    ...paddings[0]
-  };
+  const legacy = legacyPolicies[0] ?? normalizeOffsetScalePolicy(
+    {}, undefined, channel
+  );
+  if (scale === undefined) return legacy;
+  return normalizeOffsetScalePolicy(semanticPatch, legacy, channel);
 }

package/src/materialization/scales/policies/series.js

@@ -22,7 +22,10 @@ export function resolveSeriesLayoutDomain({
     (_, index) => seriesLayouts[index] !== undefined
   );
   const directConsumers = valuesByConsumer.filter(
-    ({ consumer }, index) => seriesLayouts[index] === undefined && !isSourceOwnedText(consumer.layer)
+    ({ consumer, scalePolicy }, index) =>
+      scalePolicy !== false &&
+      seriesLayouts[index] === undefined &&
+      !isSourceOwnedText(consumer.layer)
   );
   const compatibleDirect = directConsumers.every(({ consumer }) =>
     layoutConsumers.every(({ consumer: layoutConsumer }) => {

package/src/materialization/scales/resolve.js

@@ -17,6 +17,7 @@ import {
   resolveScaleRange,
   resolveSequentialColorStops,
   resolveShapeRange,
+  resolveSizeScale,
   resolveSizeRange,
   resolveStrokeDashRange,
   resolveStrokeWidthRange,
@@ -96,7 +97,8 @@ function resolveRange({
   isSequentialColor,
   isDiscretizedColor,
   isOrdinalOffset,
-  discretizedScale
+  discretizedScale,
+  polarFrame
 }) {
   if (channel === "color") {
     if (isDiscretizedColor) return discretizedScale.range;
@@ -114,7 +116,7 @@ function resolveRange({
     scale,
     channel,
     domain,
-    range: resolveScaleRange(scale.range, channel, bounds),
+    range: resolveScaleRange(scale.range, channel, bounds, polarFrame),
     markConfigs
   });
 }
@@ -190,14 +192,16 @@ export function resolveScaleMaterialization(options) {
   const {
     id,
     scale,
-    channel,
+    channel: requestedChannel,
     consumers,
     valuesByConsumer,
     bounds,
     resolvedScales,
     markConfigs,
-    thetaScales
+    thetaScales,
+    polarFrame
   } = options;
+  const channel = requestedChannel === "stroke" ? "color" : requestedChannel;
   const allValues = valuesByConsumer
     .flatMap(item => item.values)
     .filter(value => value !== undefined);
@@ -218,6 +222,9 @@ export function resolveScaleMaterialization(options) {
       }))
     });
   }
+  if (channel === "size") {
+    return resolveSizeScale({ ...scale, values: allValues });
+  }
   const isSequentialColor = channel === "color" &&
     isContinuousColorScaleType(scale.type);
   const isDiscretizedColor = channel === "color" &&
@@ -234,7 +241,14 @@ export function resolveScaleMaterialization(options) {
     isDiscretePositionScaleType(scale.type);
 
   if (isSequentialColor || isDiscretizedColor) {
-    for (const consumer of consumers) validateContinuousColorConsumer(consumer.layer, consumer.encoding, scale);
+    for (const consumer of consumers) {
+      validateContinuousColorConsumer(
+        consumer.layer,
+        consumer.encoding,
+        scale,
+        { channel: consumer.channel }
+      );
+    }
   }
   let discretizedScale;
   if (isDiscretizedColor) {
@@ -290,7 +304,8 @@ export function resolveScaleMaterialization(options) {
     isSequentialColor,
     isDiscretizedColor,
     isOrdinalOffset,
-    discretizedScale
+    discretizedScale,
+    polarFrame
   });
   validateSequentialMidpoint(scale.midpoint, scale.type, domain);
   if (scale.midpoint !== undefined && (channel !== "color" || consumers.some(
@@ -313,6 +328,7 @@ export function resolveScaleMaterialization(options) {
           values: allValues,
           range: scale.range,
           ...resolveOffsetScalePolicy({
+            scale,
             consumers,
             resolvedScales,
             markConfigs,

package/src/materialization/selection/items/arc.js

@@ -1,7 +1,7 @@
 import { deriveArcSectors } from "../../../grammar/arcs.js";
 import { resolvePolarPoint } from "../../../grammar/polarPaths.js";
-import { resolvePolarFrame } from "../../../grammar/polar.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { readScaleField } from "../../../grammar/scales/index.js";
+import { resolveCoordinatePolarFrame } from "../../coordinateBounds.js";
 import {
   concreteProperties,
   finalizeItems,
@@ -11,7 +11,7 @@ import {
 export function resolveArcItems(program, layer, dataset) {
   const thetaScale = program.resolvedScales[layer.encoding?.theta?.scale];
   const radiusScale = program.resolvedScales[layer.encoding?.radius?.scale];
-  const frame = resolvePolarFrame(resolveGraphicBounds(program));
+  const frame = resolveCoordinatePolarFrame(program, layer.coordinate);
   const derived = deriveArcSectors(dataset.values, layer, {
     thetaScale,
     ...(radiusScale === undefined ? {} : { radiusScale }),
@@ -19,14 +19,25 @@ export function resolveArcItems(program, layer, dataset) {
     innerRadiusRatio: program.markConfigs[layer.id]?.innerRadius ?? 0
   });
   const graphic = program.graphicSpec.objects[layer.id];
+  const stroke = layer.encoding?.stroke;
   const definitions = derived.sectors.map((sector, index) => {
     const members = sector.sourceIndices.map(index => dataset.values[index]);
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Arc stroke requires one value within each sector.");
+    }
     return {
       fields: uniqueFields(members),
       channels: {
         theta: sector.theta,
         ...(sector.radius === undefined ? {} : { radius: sector.radius }),
-        ...(sector.color === undefined ? {} : { color: sector.color })
+        ...(sector.color === undefined ? {} : { color: sector.color }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] })
       },
       properties: {
         ...concreteProperties(graphic.items[index]?.properties),
@@ -36,6 +47,19 @@ export function resolveArcItems(program, layer, dataset) {
           (sector.innerRadius + sector.outerRadius) / 2
         )
       },
+      geometry: {
+        kind: "arc",
+        centerX: frame.centerX,
+        centerY: frame.centerY,
+        startTheta: sector.startTheta +
+          Math.sign(sector.endTheta - sector.startTheta) *
+          (program.markConfigs[layer.id]?.padAngle ?? 0) / 2,
+        endTheta: sector.endTheta -
+          Math.sign(sector.endTheta - sector.startTheta) *
+          (program.markConfigs[layer.id]?.padAngle ?? 0) / 2,
+        innerRadius: sector.innerRadius,
+        outerRadius: sector.outerRadius
+      },
       members
     };
   });