ggaction 0.0.9 → 0.0.11

package/src/materialization/bars/ranged.js

@@ -1,6 +1,10 @@
 import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales/index.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
-import { DEFAULT_BAR_FILL, DEFAULT_BAR_STROKE, DEFAULT_BAR_STROKE_WIDTH } from "./resolve.js";
+import {
+  DEFAULT_BAR_FILL,
+  DEFAULT_BAR_STROKE,
+  resolveBarAppearance
+} from "./resolve.js";
 
 export function deriveRangedRectangles(required, program, width) {
   const { layer, dataset } = required;
@@ -29,25 +33,26 @@ export function deriveRangedRectangles(required, program, width) {
   const fills = color === undefined
     ? dataset.values.map(() => appearance.fill ?? config.fill ?? DEFAULT_BAR_FILL)
     : mapOrdinalValues(dataset.values.map(row => row[color.field]), program.resolvedScales[color.scale].domain, program.resolvedScales[color.scale].range);
+  const appearanceConfig = color === undefined
+    ? config
+    : { ...config, stroke: undefined };
   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],
-    stroke: appearance.stroke === false
-      ? "transparent"
-      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
-    strokeWidth: appearance.stroke === false
-      ? 0
-      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    opacity: appearance.opacity ?? config.opacity ?? 1
+    ...resolveBarAppearance(
+      appearanceConfig,
+      undefined,
+      color === undefined ? DEFAULT_BAR_STROKE : fills[index],
+      1
+    )
   } : {
     x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
     width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
-    stroke: appearance.stroke === false
-      ? "transparent"
-      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
-    strokeWidth: appearance.stroke === false
-      ? 0
-      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    opacity: appearance.opacity ?? config.opacity ?? 1
+    ...resolveBarAppearance(
+      appearanceConfig,
+      undefined,
+      color === undefined ? DEFAULT_BAR_STROKE : fills[index],
+      1
+    )
   });
 }

package/src/materialization/bars/resolve.js

@@ -8,6 +8,27 @@ export const DEFAULT_BAR_FILL = DEFAULT_COLORS.mark;
 export const DEFAULT_BAR_STROKE = "white";
 export const DEFAULT_BAR_STROKE_WIDTH = 0.5;
 
+export function resolveBarAppearance(
+  config,
+  existing,
+  defaultStroke = DEFAULT_BAR_STROKE,
+  defaultOpacity
+) {
+  const appearance = config.barAppearance ?? {};
+  const opacity = appearance.opacity ?? config.opacity ??
+    existing?.opacity ?? defaultOpacity;
+  return {
+    stroke: appearance.stroke === false
+      ? "transparent"
+      : appearance.stroke ?? config.stroke ?? existing?.stroke ?? defaultStroke,
+    strokeWidth: appearance.stroke === false
+      ? 0
+      : appearance.strokeWidth ?? config.strokeWidth ??
+        existing?.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
+    ...(opacity === undefined ? {} : { opacity })
+  };
+}
+
 export function requireCompleteBar(program, id) {
   const layer = findLayer(program, id);
 

package/src/materialization/facetGuides/legacyCategorical.js

@@ -1,6 +1,7 @@
 import {
   resolveSharedFacetLegends
 } from "../../grammar/facets/guides.js";
+import { formatVisibleText } from "../../core/textMetrics.js";
 import { mapOrdinalValues } from "../../grammar/scales/index.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../../theme/defaults.js";
 
@@ -10,7 +11,7 @@ function textItem(text, x, y, options = {}) {
     properties: {
       x,
       y,
-      text: String(text),
+      text: formatVisibleText(text),
       fill: options.color ?? DEFAULT_COLORS.strongText,
       fontSize: options.fontSize ?? 12,
       fontFamily: options.fontFamily ?? DEFAULT_FONT_FAMILY,

package/src/materialization/facetGuides/placement.js

@@ -1,4 +1,6 @@
 import { isPlainObject } from "../../core/immutable.js";
+import { resolveConcreteGraphicBounds } from
+  "../../grammar/schemas/graphicBounds.js";
 import { planFacetGuideOwnership } from "../../grammar/facets/guides.js";
 import {
   axisGraphicIds,
@@ -30,25 +32,14 @@ function removeNamespacedGraphics(program, namespace, ids) {
   return next;
 }
 
-function gradientAnchor(prepared, plot, layout) {
-  const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
-  if (strips?.items?.[0] === undefined) return undefined;
-  const properties = strips.items[0].properties;
-  const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
-  return {
-    sourceX: properties.x,
-    sourceY: properties.y,
-    targetX: layout.legend.x,
-    targetY: plot.y + (plot.height - length) / 2
-  };
-}
-
 function legendTranslation(prepared, plot, layout) {
-  const gradient = gradientAnchor(prepared, plot, layout);
-  if (gradient !== undefined) {
+  const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
+  if (strips?.items?.[0] !== undefined) {
+    const properties = strips.items[0].properties;
+    const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
     return {
-      x: gradient.targetX - gradient.sourceX,
-      y: gradient.targetY - gradient.sourceY
+      x: layout.legend.x - properties.x,
+      y: plot.y + (plot.height - length) / 2 - properties.y
     };
   }
   const height = prepared.bounds.bottom - prepared.bounds.top;
@@ -79,6 +70,25 @@ function attachParentLegend(program, prepared, plot, layout) {
   return next;
 }
 
+function assertSharedLegendFits(program, id, layout, plot) {
+  const bounds = resolveConcreteGraphicBounds(program.graphicSpec, id);
+  if (bounds === undefined) {
+    throw new Error("Facet shared legend requires measurable concrete bounds.");
+  }
+  const outside = bounds.left < 0 || bounds.right > layout.width ||
+    bounds.top < 0 || bounds.bottom > layout.height;
+  const overlapsPlot = Math.min(bounds.right, plot.x + plot.width) >
+      Math.max(bounds.left, plot.x) &&
+    Math.min(bounds.bottom, plot.y + plot.height) >
+      Math.max(bounds.top, plot.y);
+  if (outside || overlapsPlot) {
+    throw new Error(
+      "Facet shared legend requires more space than the composed Canvas provides."
+    );
+  }
+  return program;
+}
+
 export function applyFacetGuideComposition(program, { layout, plot } = {}) {
   if (!isPlainObject(layout) || !Array.isArray(layout.children)) {
     throw new TypeError("Facet guide composition requires a resolved layout.");
@@ -119,8 +129,13 @@ export function applyFacetGuideComposition(program, { layout, plot } = {}) {
     }
   }
   if (prepared === undefined) return next;
+  let id;
   if (prepared.mode === "legacyCategorical") {
-    return materializeLegacyCategoricalLegend(next, prepared, layout);
+    id = `${program.compositionSpec.id}-legend`;
+    next = materializeLegacyCategoricalLegend(next, prepared, layout);
+  } else {
+    id = `${program.compositionSpec.id}-shared-legend`;
+    next = attachParentLegend(next, prepared, plot, layout);
   }
-  return attachParentLegend(next, prepared, plot, layout);
+  return assertSharedLegendFits(next, id, layout, plot);
 }

package/src/materialization/facetGuides/preparation.js

@@ -9,6 +9,10 @@ import { findSemanticScale } from "../../selectors/scales.js";
 import { allLegendGraphicIds } from "../guides/resources.js";
 import { DEFAULT_COLORS } from "../../theme/defaults.js";
 import { resolveLegacyCategoricalLegend } from "./legacyCategorical.js";
+import {
+  formatDistinctNumericSamples,
+  sampleNumericRange
+} from "../../grammar/numeric.js";
 
 const LEGEND_SOURCE_CANVAS = Object.freeze({
   width: 640,
@@ -71,10 +75,7 @@ function compactNumber(value) {
 }
 
 function continuousValues(domain, count) {
-  return Array.from(
-    { length: count },
-    (_, index) => domain[0] + index / (count - 1) * (domain[1] - domain[0])
-  );
+  return sampleNumericRange(domain[0], domain[1], count, "Facet legend domain");
 }
 
 function prepareAutoLegendSource(child) {
@@ -123,7 +124,10 @@ function prepareAutoLegendSource(child) {
       .editGraphics({
         target: "colorGradientLabels",
         property: "text",
-        value: continuousValues(resolved.domain, 5).map(compactNumber)
+        value: formatDistinctNumericSamples(
+          continuousValues(resolved.domain, 5),
+          compactNumber
+        )
       })
       .editGraphics({
         target: "colorGradientTitle",

package/src/materialization/facets.js

@@ -1,4 +1,9 @@
 import { resolveGraphicBounds } from "../layout/canvas.js";
+import {
+  formatVisibleText,
+  resolveTextBounds,
+  textBoundsIntersect
+} from "../core/textMetrics.js";
 import { resolvePlacedPlotBounds } from "../layout/composition.js";
 import {
   alignedTextAnchor,
@@ -12,9 +17,8 @@ import {
   clearCompositionChildren,
   compositionChildDescriptor
 } from "./composition.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../theme/defaults.js";
 
-const ZERO_MARGIN = Object.freeze({ top: 0, right: 0, bottom: 0, left: 0 });
+const ZERO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
 
 function facetConfig(program) {
   const config = program.materializationConfigs.facets?.[program.compositionSpec.id];
@@ -46,29 +50,35 @@ function titleLayout(program) {
   return { config, block, top, height: Math.ceil(top + block.height) };
 }
 
-function textItem(text, x, y, options = {}) {
-  return {
-    type: "text",
-    properties: {
-      x,
-      y,
-      text: String(text),
-      fill: options.color ?? DEFAULT_COLORS.strongText,
-      fontSize: options.fontSize ?? 12,
-      fontFamily: options.fontFamily ?? DEFAULT_FONT_FAMILY,
-      fontWeight: options.fontWeight ?? "normal",
-      textAlign: options.textAlign ?? "left",
-      textBaseline: options.textBaseline ?? "middle"
-    }
-  };
-}
-
 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 => {
@@ -76,20 +86,22 @@ function materializeHeaders(program, layout, plots, config) {
     if (plot === undefined) {
       throw new Error(`Facet header requires plot bounds for "${cell.id}".`);
     }
-    return textItem(
-      cell.value,
-      cell.x + plot.x + plot.width / 2,
-      cell.y + config.offset,
-      {
-        color: config.color,
+    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: "top"
+        textBaseline: "middle"
       }
-    );
+    };
   });
+  assertFacetHeadersFit(items, layout, plotById);
   return collection(program, `${program.compositionSpec.id}-headers`, items);
 }
 

package/src/materialization/guides/resources.js

@@ -44,7 +44,8 @@ const LEGEND_RESOURCE_POLICIES = Object.freeze({
     family: "interval",
     rematerializeOp: "rematerializeIntervalLegend",
     graphicIds: Object.freeze([
-      "colorLegendSymbols", "colorLegendLabels", "colorLegendTitle"
+      "colorLegendBackground", "colorLegendSymbols", "colorLegendLabels",
+      "colorLegendTitle"
     ])
   }),
   opacity: Object.freeze({

package/src/materialization/marks/capabilities.js

@@ -59,7 +59,10 @@ export function canMaterializeLine(program, layer) {
   return (
     layer.mark?.type === "line" &&
     hasCartesianPositionScales(layer) &&
-    (isAggregate(layer.encoding.y.aggregate) ||
+    ((isAggregate(layer.encoding.y.aggregate) &&
+      (layer.encoding.x.fieldType === "temporal" ||
+        (layer.encoding.x.fieldType === "quantitative" &&
+          layer.encoding.x.bin !== undefined))) ||
       (layer.encoding.x.fieldType === "quantitative" &&
         layer.encoding.y.fieldType === "quantitative") ||
       ((interval || layer.encoding.y.aggregate === undefined) &&
@@ -159,7 +162,7 @@ export function canMaterializeText(program, layer) {
   if (layer.source !== undefined) {
     const source = findLayer(program, layer.source);
     return source !== undefined &&
-      ["point", "bar", "rule", "rect"].includes(source.mark?.type) &&
+      ["point", "bar", "rule", "rect", "arc"].includes(source.mark?.type) &&
       Array.isArray(program.graphicSpec.objects[source.id]?.items);
   }
   return hasCartesianPositionScales(layer);

package/src/materialization/marks/index.js

@@ -42,14 +42,34 @@ export function getSourceDependentMarkSteps(program, sourceId) {
 export function getPositionEncodingMaterializationSteps(program, layer, scaleId) {
   const policy = getMarkMaterializationPolicy(layer);
   if (policy === undefined) return [];
-  const scale = { op: "rematerializeScale", args: { id: scaleId } };
   const complete = policy.canMaterialize(program, layer);
   const mark = getMarkRematerializationStep(layer);
+  const sharedConsumerMarks = (program.semanticSpec.layers ?? [])
+    .filter(candidate =>
+      candidate.id !== layer.id &&
+      POSITION_CHANNELS.some(channel =>
+        candidate.encoding?.[channel]?.scale === scaleId
+      )
+    )
+    .map(candidate => getMarkMaterializationStep(program, candidate))
+    .filter(step => step !== undefined);
+  const scale = {
+    op: "rematerializeScale",
+    args: sharedConsumerMarks.length === 0
+      ? { id: scaleId }
+      : { id: scaleId, marks: false }
+  };
   if (!complete) {
-    if (policy.positionEncoding.incomplete === "scale") return [scale];
-    return policy.positionEncoding.scaleFirst ? [scale, mark] : [mark];
+    if (policy.positionEncoding.incomplete === "scale") {
+      return [scale, ...sharedConsumerMarks];
+    }
+    return policy.positionEncoding.scaleFirst
+      ? [scale, mark, ...sharedConsumerMarks]
+      : [mark, ...sharedConsumerMarks];
   }
-  return policy.positionEncoding.scaleFirst ? [scale, mark] : [mark];
+  return policy.positionEncoding.scaleFirst
+    ? [scale, mark, ...sharedConsumerMarks]
+    : [mark, ...sharedConsumerMarks];
 }
 
 export function getScaleConsumerMaterializationMode(layer, channel) {

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

@@ -4,41 +4,10 @@ import {
   resolveBarChannels,
   resolveBarGrain
 } from "../../../grammar/bars/policy.js";
-import { resolveHistogramBins } from "../../../grammar/histogram.js";
-
-export function resolveBinnedBarDomain({
-  valuesByConsumer,
-  channel,
-  scale,
-  id,
-  allValues
-}) {
-  const binnedBars = valuesByConsumer.filter(
-    ({ consumer }) =>
-      consumer.layer.mark?.type === "bar" &&
-      consumer.encoding.bin !== undefined
-  );
-  if (binnedBars.length === 0) return undefined;
-  if (channel !== "x" || binnedBars.length !== valuesByConsumer.length) {
-    throw new Error(
-      `Binned scale "${id}" cannot be shared with an unbinned consumer.`
-    );
-  }
-  const binDefinitions = new Set(
-    binnedBars.map(({ consumer }) => JSON.stringify(consumer.encoding.bin))
-  );
-  if (binDefinitions.size !== 1) {
-    throw new Error(`Binned scale "${id}" requires one shared bin definition.`);
-  }
-  return resolveHistogramBins({
-    values: allValues,
-    bin: binnedBars[0].consumer.encoding.bin,
-    domain: scale.domain,
-    nice: scale.nice ?? true,
-    zero: scale.zero ?? false
-  }).domain;
-}
-
+import {
+  interpolateNumber,
+  inverseLerp
+} from "../../../grammar/numeric.js";
 export function resolveOffsetScalePolicy({
   consumers,
   resolvedScales,
@@ -81,8 +50,8 @@ export function resolveOffsetScalePolicy({
   };
 }
 
-export function resolveTemporalBarBand(consumers, domain, range, values) {
-  const temporalBars = consumers.filter(consumer => {
+export function resolveTemporalBarBand(valuesByConsumer, domain, range) {
+  const temporalBars = valuesByConsumer.filter(({ consumer }) => {
     const channels = resolveBarChannels(consumer.layer);
     return resolveBarGrain(consumer.layer) === BAR_GRAINS.aggregate &&
       channels?.category === consumer.channel &&
@@ -90,43 +59,76 @@ export function resolveTemporalBarBand(consumers, domain, range, values) {
   });
   if (temporalBars.length === 0) return undefined;
   const temporalFields = new Set(
-    temporalBars.map(consumer => consumer.encoding.field)
+    temporalBars.map(({ consumer }) => consumer.encoding.field)
   );
-  const compatibleLines = consumers.filter(consumer =>
-    consumer.layer.mark?.type === "line" &&
-    consumer.encoding.fieldType === "temporal" &&
-    temporalFields.has(consumer.encoding.field)
+  const compatibleConsumers = valuesByConsumer.filter(({ consumer }) =>
+    ["line", "rule", "text"].includes(consumer.layer.mark?.type) &&
+      consumer.encoding.fieldType === "temporal" &&
+      temporalFields.has(consumer.encoding.field)
   );
-  if (temporalBars.length + compatibleLines.length !== consumers.length) {
+  if (
+    temporalBars.length + compatibleConsumers.length !==
+    valuesByConsumer.length
+  ) {
     throw new Error(
-      "A temporal bar position scale requires compatible bar or line consumers of one field."
+      "A temporal bar position scale requires compatible bar, line, rule, or text consumers of one field."
     );
   }
+  const values = temporalBars.flatMap(item => item.values);
   const ordered = [...new Set(values)].sort((left, right) => left - right);
   if (ordered.length < 2) {
     throw new Error("Temporal bar position requires at least two distinct values.");
   }
-  const minimumGap = Math.min(
-    ...ordered.slice(1).map((value, index) => value - ordered[index])
-  );
+  let minimumGap = Infinity;
+  for (let index = 1; index < ordered.length; index += 1) {
+    minimumGap = Math.min(minimumGap, ordered[index] - ordered[index - 1]);
+  }
   const domainSpan = Math.abs(domain[1] - domain[0]);
   if (!(minimumGap > 0) || !(domainSpan > 0)) {
     throw new Error("Temporal bar position requires an increasing time domain.");
   }
   const direction = Math.sign(range[1] - range[0]) || 1;
-  const estimatedBandwidth = Math.abs(range[1] - range[0]) * minimumGap /
+  const bandwidthFraction = minimumGap / (domainSpan + minimumGap);
+  const directBandwidth = Math.abs(range[1] - range[0]) * minimumGap /
     (domainSpan + minimumGap);
-  const resolvedRange = [
-    range[0] + direction * estimatedBandwidth / 2,
-    range[1] - direction * estimatedBandwidth / 2
+  const directRange = [
+    range[0] + direction * directBandwidth / 2,
+    range[1] - direction * directBandwidth / 2
   ];
-  const positions = ordered.map(value =>
-    resolvedRange[0] +
-      (value - domain[0]) / (domain[1] - domain[0]) *
-      (resolvedRange[1] - resolvedRange[0])
-  );
-  const bandwidth = Math.min(
-    ...positions.slice(1).map((value, index) => Math.abs(value - positions[index]))
-  );
+  const stable = !Number.isFinite(directBandwidth) ||
+    !directRange.every(Number.isFinite);
+  const estimatedBandwidth = stable
+    ? Math.abs(
+      interpolateNumber(range[0], range[1], bandwidthFraction) - range[0]
+    )
+    : directBandwidth;
+  const resolvedRange = stable
+    ? [
+        interpolateNumber(range[0], range[1], bandwidthFraction / 2),
+        interpolateNumber(range[0], range[1], 1 - bandwidthFraction / 2)
+      ]
+    : directRange;
+  const resolvedSpan = resolvedRange[1] - resolvedRange[0];
+  const positions = ordered.map(value => {
+    const direct = resolvedRange[0] +
+      (value - domain[0]) / (domain[1] - domain[0]) * resolvedSpan;
+    return Number.isFinite(direct)
+      ? direct
+      : interpolateNumber(
+        resolvedRange[0],
+        resolvedRange[1],
+        inverseLerp(value, domain[0], domain[1])
+      );
+  });
+  let bandwidth = Infinity;
+  for (let index = 1; index < positions.length; index += 1) {
+    bandwidth = Math.min(
+      bandwidth,
+      Math.abs(positions[index] - positions[index - 1])
+    );
+  }
+  if (![estimatedBandwidth, bandwidth, ...resolvedRange].every(Number.isFinite)) {
+    throw new RangeError("Temporal bar position exceeds the finite numeric range.");
+  }
   return { bandwidth, range: resolvedRange };
 }

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

@@ -0,0 +1,34 @@
+import { resolveHistogramBins } from "../../../grammar/histogram.js";
+
+export function resolveBinnedPositionDomain({
+  valuesByConsumer,
+  channel,
+  scale,
+  id,
+  allValues
+}) {
+  const binnedPositions = valuesByConsumer.filter(
+    ({ consumer }) =>
+      ["bar", "line"].includes(consumer.layer.mark?.type) &&
+      consumer.encoding.bin !== undefined
+  );
+  if (binnedPositions.length === 0) return undefined;
+  if (channel !== "x" || binnedPositions.length !== valuesByConsumer.length) {
+    throw new Error(
+      `Binned scale "${id}" cannot be shared with an unbinned consumer.`
+    );
+  }
+  const binDefinitions = new Set(
+    binnedPositions.map(({ consumer }) => JSON.stringify(consumer.encoding.bin))
+  );
+  if (binDefinitions.size !== 1) {
+    throw new Error(`Binned scale "${id}" requires one shared bin definition.`);
+  }
+  return resolveHistogramBins({
+    values: allValues,
+    bin: binnedPositions[0].consumer.encoding.bin,
+    domain: scale.domain,
+    nice: scale.nice ?? true,
+    zero: scale.zero ?? false
+  }).domain;
+}

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

@@ -3,6 +3,7 @@ import {
   resolveContinuousDomain,
   resolveTransformedDomain
 } from "../../../grammar/scales/index.js";
+import { numericExtent } from "../../../grammar/numeric.js";
 
 export function resolveSeriesLayoutDomain({
   id,
@@ -25,9 +26,14 @@ export function resolveSeriesLayoutDomain({
   const compatibleDirect = directConsumers.every(({ consumer }) =>
     layoutConsumers.every(({ consumer: layoutConsumer }) => {
       const aggregate = layoutConsumer.encoding.aggregate;
-      return aggregate !== "count" &&
-        consumer.encoding.fieldType === "quantitative" &&
-        consumer.encoding.field === layoutConsumer.encoding.field;
+      const directEncoding = consumer.encoding;
+      return directEncoding.fieldType === "quantitative" && (
+        Object.hasOwn(directEncoding, "datum") ||
+        (
+          aggregate !== "count" &&
+          directEncoding.field === layoutConsumer.encoding.field
+        )
+      );
     })
   );
   if (!compatibleDirect) {
@@ -41,9 +47,9 @@ export function resolveSeriesLayoutDomain({
     ...directConsumers.flatMap(item => item.values)
   ];
   if (layout === "center" && scale.domain !== "auto") {
-    const minimum = Math.min(...values);
-    const maximum = Math.max(...values);
-    if (Math.min(...scale.domain) > minimum || Math.max(...scale.domain) < maximum) {
+    const [minimum, maximum] = numericExtent(values);
+    const [domainMinimum, domainMaximum] = numericExtent(scale.domain);
+    if (domainMinimum > minimum || domainMaximum < maximum) {
       throw new Error(
         `Center layout scale "${id}" explicit domain must contain every centered bound.`
       );
@@ -52,7 +58,7 @@ export function resolveSeriesLayoutDomain({
   if (
     ["group", "overlay"].includes(layout) &&
     scale.domain !== "auto" &&
-    (Math.min(...scale.domain) > 0 || Math.max(...scale.domain) < 0)
+    (numericExtent(scale.domain)[0] > 0 || numericExtent(scale.domain)[1] < 0)
   ) {
     throw new Error(
       `Series layout scale "${id}" requires an explicit domain containing zero.`

package/src/materialization/scales/resolve.js

@@ -28,10 +28,10 @@ import {
 } from "../../grammar/scales/index.js";
 import { resolveArcAutoPositionRange } from "./policies/arc.js";
 import {
-  resolveBinnedBarDomain,
   resolveOffsetScalePolicy,
   resolveTemporalBarBand
 } from "./policies/bar.js";
+import { resolveBinnedPositionDomain } from "./policies/binnedPosition.js";
 import { resolveSeriesLayoutDomain } from "./policies/series.js";
 import { OFFSET_POSITION_CHANNELS } from "../../core/vocabulary.js";
 
@@ -223,7 +223,7 @@ export function resolveScaleMaterialization({
   }
   const binnedDomain = isDiscretizedColor
     ? undefined
-    : resolveBinnedBarDomain({
+    : resolveBinnedPositionDomain({
         valuesByConsumer,
         channel,
         scale,
@@ -331,10 +331,9 @@ export function resolveScaleMaterialization({
   }
   if (scale.type === "time" && ["x", "y"].includes(channel)) {
     const temporalBarBand = resolveTemporalBarBand(
-      consumers,
+      valuesByConsumer,
       domain,
-      range,
-      allValues
+      range
     );
     if (temporalBarBand !== undefined) {
       resolvedScale = {