ggaction 0.0.17 → 0.0.19

package/src/actions/guides/axes/labels.js

@@ -1,15 +1,20 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
+import { axisThemeTypography } from "../../theme/state.js";
+import { validateAxisTextPlacement } from "../../../grammar/axisTextPlacement.js";
+import { canvasOverflowError } from "../../../layout/canvas.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
   sameOrderedValues,
   validateGeneratedItemLimit,
+  validateTextStyle,
   validateOptionObject,
-  validateNonEmptyString,
   validateNonNegativeFinite,
   validatePositiveFinite
 } from "../../../core/validation.js";
-import { resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import {
   isTransformedScaleType,
   mapContinuousScaleValues,
@@ -19,7 +24,7 @@ import {
 import { formatTimeTick, formatTimeTicks } from "../../../grammar/ticks.js";
 import { resolveRotation } from "../../../grammar/rotation.js";
 import { valuesFromTickConfig } from "../tickValues.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+import { AXIS_LABEL_FONT_SIZES, DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../theme/defaults.js";
 import {
   defaultAxisPosition,
@@ -40,19 +45,21 @@ import { resolveConcreteGraphicBounds } from
 import { wrapText } from "../../../layout/text.js";
 import {
   normalizeDisplayLabelMap,
+  normalizeDisplayColorMap,
+  resolveDisplayLabelColor,
   resolveDisplayLabel
 } from "../../../grammar/displayLabels.js";
 
 const OPTIONS = [
-  "scale", "position", "count", "values", "offset", "format", "color",
+  "target", "scale", "position", "count", "values", "offset", "format", "color",
   "fontSize", "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
-  "lineHeight", "overlap", "labelMap"
+  "lineHeight", "overlap", "labelMap", "alongOffset", "flush", "colorMap", "align"
 ];
 
 const DEFAULTS = {
   count: 5,
   color: DEFAULT_COLORS.text,
-  fontSize: 12,
+  fontSize: AXIS_LABEL_FONT_SIZES.cartesian,
   fontFamily: DEFAULT_FONT_FAMILY,
   fontWeight: "normal",
   rotation: 0,
@@ -78,28 +85,24 @@ function normalizeLabelLayout(config, args, operation) {
   return next;
 }
 
-export function validateAxisTextStyle(config, label) {
-  validateNonEmptyString(config.color, `${label} color`);
-  validatePositiveFinite(config.fontSize, `${label} fontSize`);
-  validateNonEmptyString(config.fontFamily, `${label} fontFamily`);
-  if (typeof config.fontWeight !== "string" &&
-    !Number.isFinite(config.fontWeight)) {
-    throw new TypeError(`${label} fontWeight must be a string or number.`);
-  }
-}
+export { validateTextStyle as validateAxisTextStyle };
 
 function validateOptions(args, operation, create) {
+  validateAxisTextPlacement(args);
   validateOptionObject(
     args,
     create ? OPTIONS : OPTIONS.filter(key => key !== "scale"),
     operation
   );
+  if (Object.hasOwn(args, "flush") && typeof args.flush !== "boolean") throw new TypeError("Label flush must be a boolean.");
+  if (Object.hasOwn(args, "alongOffset") && !Number.isFinite(args.alongOffset)) throw new TypeError("Label alongOffset must be a finite number.");
   if (Object.hasOwn(args, "count") && Object.hasOwn(args, "values")) {
     throw new Error(`${operation} cannot use count and values together.`);
   }
 }
 
 function validateConfig(channel, config) {
+  validateAxisTextPlacement(config);
   validateAxisPosition(channel, config.position);
   if (config.mode === "count") {
     if (!Number.isInteger(config.count) || config.count <= 0) throw new RangeError("Label count must be a positive integer.");
@@ -116,9 +119,11 @@ function validateConfig(channel, config) {
   if (config.mode === "values") {
     validateGeneratedItemLimit(config.values.length, "Label value count");
   }
+  if (config.alongOffset !== undefined && !Number.isFinite(config.alongOffset)) throw new TypeError("Label alongOffset must be a finite number.");
   validateNonNegativeFinite(config.offset, "Label offset");
-  validateAxisTextStyle(config, "Label");
+  validateTextStyle(config, "Label");
   validateAxisFormat(config.format);
+  if (config.flush === true && config.rotation !== 0) throw new Error("Label flush requires unrotated Cartesian labels.");
   if (!Number.isFinite(config.rotation)) {
     throw new TypeError("Label rotation must resolve to finite radians.");
   }
@@ -140,24 +145,30 @@ function validateConfig(channel, config) {
   }
 }
 
-function normalizeAxisLabelMap(program, config, args, operation) {
-  if (!Object.hasOwn(args, "labelMap")) return config;
-  const scale = program.resolvedScales[config.scale];
-  if (!["ordinal", "band", "point"].includes(scale?.type)) {
-    throw new Error(`${operation} labelMap requires a categorical scale.`);
-  }
+function normalizeAxisLabelMaps(program, config, args, operation) {
   const next = { ...config };
-  if (args.labelMap === "auto") {
-    delete next.labelMap;
-  } else {
-    next.labelMap = normalizeDisplayLabelMap(
-      args.labelMap,
-      `${operation} labelMap`
-    );
+  for (const [property, normalize] of [
+    ["labelMap", normalizeDisplayLabelMap],
+    ["colorMap", normalizeDisplayColorMap]
+  ]) {
+    if (!Object.hasOwn(args, property)) continue;
+    if (args[property] === "auto") delete next[property];
+    else next[property] = normalize(args[property], `${operation} ${property}`);
   }
+  validateAxisLabelMapScale(next, program.resolvedScales[config.scale], operation);
   return next;
 }
 
+function validateAxisLabelMapScale(config, scale, operation = "Axis") {
+  if (["ordinal", "band", "point"].includes(scale?.type)) return;
+  for (const property of ["labelMap", "colorMap"]) {
+    if (config[property] !== undefined &&
+        !config[property].every(entry => Number.isFinite(entry.value))) {
+      throw new TypeError(`${operation} continuous ${property} values must be finite numbers or timestamps.`);
+    }
+  }
+}
+
 function assertTickCompatibility(ticks, config, operation) {
   if (!ticks) return;
   if (ticks.scale !== config.scale || ticks.mode !== config.mode) throw new Error(`${operation} conflicts with axis ticks.`);
@@ -218,23 +229,17 @@ function unionLabelBounds(records) {
   return [...byGroup.values()];
 }
 
-function resolve(program, channel, config) {
+function resolve(program, channel, config, axisId = channel) {
   const scale = program.resolvedScales[config.scale];
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: config.scale,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, config.position, config.scale, axisId);
   const discrete = ["ordinal", "band", "point"].includes(scale?.type);
-  if (config.labelMap !== undefined && !discrete) {
-    throw new Error("Axis labelMap requires a categorical scale.");
-  }
+  validateAxisLabelMapScale(config, scale);
   if ((
     !["linear", "time", "ordinal", "band", "point"].includes(scale?.type) &&
     !isTransformedScaleType(scale?.type)
   ) || !bounds) throw new Error("Axis labels require a supported resolved scale and Canvas bounds.");
   if (discrete && config.mode !== "values") throw new Error("Discrete axis labels require explicit or inferred values, not count.");
-  const values = valuesFromTickConfig(program, config);
+  let values = valuesFromTickConfig(program, config);
   validateGeneratedItemLimit(values.length, "Label value count");
   if (discrete) {
     const domainValues = new Set(scale.domain);
@@ -243,7 +248,7 @@ function resolve(program, channel, config) {
     const low = Math.min(...scale.domain), high = Math.max(...scale.domain);
     if (!values.every(value => value >= low && value <= high)) throw new RangeError("Label values must be inside the scale domain.");
   }
-  const positions = discrete
+  let positions = discrete
     ? mapOrdinalPositionValues(values, scale)
     : mapContinuousScaleValues(values, scale);
   const fallback = value => formatAxisValue(
@@ -256,24 +261,39 @@ function resolve(program, channel, config) {
             ? formatTransformedTick(scale.type, item)
             : String(item)
       );
-  const text = discrete
-    ? values.map(value => resolveDisplayLabel(value, config.labelMap, fallback))
-    : scale.type === "time" && config.format === "auto"
-      ? formatTimeTicks(values, scale.domain)
-      : values.map(fallback);
+  const automaticTimeLabels = scale.type === "time" && config.format === "auto"
+    ? formatTimeTicks(values, scale.domain)
+    : undefined;
+  let text = values.map((value, index) =>
+    resolveDisplayLabel(value, config.labelMap, raw =>
+      automaticTimeLabels?.[index] ?? fallback(raw)));
+  // Empty mapped text suppresses the label, never its raw tick or scale value.
+  // Filter all aligned arrays before wrapping so group/color indices stay dense.
+  if (text.includes("")) {
+    const visible = text.map((value, index) => value === "" ? -1 : index)
+      .filter(index => index !== -1);
+    values = visible.map(index => values[index]);
+    positions = visible.map(index => positions[index]);
+    text = visible.map(index => text[index]);
+  }
   const geometry = {
     values,
     ...resolveAxisLabelGeometry({
       bounds,
       channel,
       position: config.position,
-      positions,
+      positions: positions.map(value => value + (config.alongOffset ?? 0)),
       offset: config.offset
     })
   };
   const resolved = expandWrappedLabels(geometry, text, config, channel, program.materializationConfigs.textMetrics);
+  if (channel === "x" && Math.abs(Math.sin(config.rotation)) > 1e-9) {
+    const outward = config.position === "bottom" ? 1 : -1;
+    resolved.textAlign = Math.sin(config.rotation) * outward < 0 ? "right" : "left";
+    resolved.textBaseline = "middle";
+  }
   const canvas = findCanvasGraphic(program)?.properties;
-  const labelBounds = resolved.text.map((value, index) => resolveTextBounds({
+  const measuredBounds = () => resolved.text.map((value, index) => resolveTextBounds({
     x: Array.isArray(resolved.x) ? resolved.x[index] : resolved.x,
     y: Array.isArray(resolved.y) ? resolved.y[index] : resolved.y,
     text: value,
@@ -284,7 +304,63 @@ function resolve(program, channel, config) {
     textBaseline: resolved.textBaseline,
     rotation: config.rotation
   }, program.materializationConfigs.textMetrics));
-  const groupedBounds = unionLabelBounds(labelBounds.map((bounds, index) => ({
+  let labelBounds = measuredBounds();
+  if (program.materializationConfigs.canvas?.plot !== undefined || config.rotation !== 0) {
+    const horizontal = channel === "x";
+    const near = ["bottom", "right"].includes(config.position);
+    const edge = horizontal ? bounds.y + (near ? bounds.height : 0)
+      : bounds.x + (near ? bounds.width : 0);
+    const boundKey = horizontal ? (near ? "top" : "bottom") : (near ? "left" : "right");
+    const grouped = unionLabelBounds(labelBounds.map((bounds, index) => ({ bounds, group: resolved.groups[index] })));
+    const shifts = grouped.map(item => edge + (near ? config.offset : -config.offset) - item[boundKey]);
+    const axis = horizontal ? "y" : "x";
+    const positions = resolved[axis];
+    resolved[axis] = resolved.text.map((_, index) =>
+      (Array.isArray(positions) ? positions[index] : positions) + shifts[resolved.groups[index]]);
+    labelBounds = labelBounds.map((item, index) => {
+      const delta = shifts[resolved.groups[index]];
+      return horizontal ? { ...item, top: item.top + delta, bottom: item.bottom + delta }
+        : { ...item, left: item.left + delta, right: item.right + delta };
+    });
+  }
+  if (config.flush === true) {
+    const along = channel === "x" ? "x" : "y";
+    const lowKey = channel === "x" ? "left" : "top";
+    const highKey = channel === "x" ? "right" : "bottom";
+    const low = Math.min(...scale.range) + (config.alongOffset ?? 0);
+    const high = Math.max(...scale.range) + (config.alongOffset ?? 0);
+    const grouped = unionLabelBounds(labelBounds.map((bounds, index) => ({ bounds, group: resolved.groups[index] })));
+    const shifts = grouped.map(item => {
+      if (item[highKey] - item[lowKey] > high - low + 1e-9) {
+        throw new Error(`The ${channel}-axis label cannot flush inside the scale span.`);
+      }
+      return item[lowKey] < low ? low - item[lowKey]
+        : item[highKey] > high ? high - item[highKey] : 0;
+    });
+    const positions = resolved[along];
+    resolved[along] = resolved.text.map((_, index) =>
+      (Array.isArray(positions) ? positions[index] : positions) + shifts[resolved.groups[index]]);
+    labelBounds = labelBounds.map((item, index) => {
+      const delta = shifts[resolved.groups[index]];
+      return { ...item, [lowKey]: item[lowKey] + delta, [highKey]: item[highKey] + delta };
+    });
+  }
+  if (config.align !== undefined) {
+    resolved.textAlign = config.align;
+    labelBounds = measuredBounds();
+  }
+  const rotatedOverlap = config.rotation !== 0;
+  const collisionBounds = rotatedOverlap ? resolved.text.map((text, index) => {
+    const x = Array.isArray(resolved.x) ? resolved.x[index] : resolved.x;
+    const y = Array.isArray(resolved.y) ? resolved.y[index] : resolved.y;
+    const cosine = Math.cos(config.rotation), sine = Math.sin(config.rotation);
+    return resolveTextBounds({
+      x: x * cosine + y * sine, y: -x * sine + y * cosine, text,
+      fontSize: config.fontSize, fontFamily: config.fontFamily, fontWeight: config.fontWeight,
+      textAlign: resolved.textAlign, textBaseline: resolved.textBaseline
+    }, program.materializationConfigs.textMetrics);
+  }) : labelBounds;
+  const groupedBounds = unionLabelBounds(collisionBounds.map((bounds, index) => ({
     bounds,
     group: resolved.groups[index]
   })));
@@ -292,17 +368,18 @@ function resolve(program, channel, config) {
     ? left.left - right.left
     : left.top - right.top);
   if (!canvas || !labelBounds.every(item => textBoundsFitCanvas(item, canvas))) {
-    throw new Error(`The ${channel}-axis labels do not fit the Canvas margin.`);
+    throw canvasOverflowError(`The ${channel}-axis labels do not fit the Canvas margin.`, labelBounds, canvas);
   }
-  if (config.overlap === "error" && orderedBounds.some((item, index) => index > 0 &&
-    textBoundsIntersect(orderedBounds[index - 1], item))) {
+  if (config.overlap === "error" && orderedBounds.some((item, index) => rotatedOverlap
+    ? orderedBounds.slice(0, index).some(previous => textBoundsIntersect(previous, item))
+    : index > 0 && textBoundsIntersect(orderedBounds[index - 1], item))) {
     throw new Error(`The ${channel}-axis labels overlap each other.`);
   }
-  const title = program.graphicSpec.objects[`${channel}AxisTitle`]
-    ? resolveConcreteGraphicBounds(program.graphicSpec, `${channel}AxisTitle`, program.materializationConfigs.textMetrics)
+  const title = program.graphicSpec.objects[axisGraphicIds(channel, axisId)[3]]
+    ? resolveConcreteGraphicBounds(program.graphicSpec, axisGraphicIds(channel, axisId)[3], program.materializationConfigs.textMetrics)
     : undefined;
   if (title &&
-    program.guideConfigs.axis?.[channel]?.title?.inferredOffset !== true &&
+    program.guideConfigs.axis?.[axisId]?.title?.inferredOffset !== true &&
     labelBounds.some(item => textBoundsIntersect(item, title))) {
     throw new Error(`The ${channel}-axis labels overlap the axis title.`);
   }
@@ -313,12 +390,14 @@ function makeEdit(channel) {
   const op = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
   return action({ op, description: `Edit concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, false);
-    const id = `${channel}AxisLabels`;
+    const selected = selectCartesianAxis(this, channel, args, { create: false });
+    const axisId = selected.id; args = selected.options;
+    const id = axisGraphicIds(channel, axisId)[2];
     if (this.graphicSpec.objects[id]?.type !== "text") throw new Error(`${op} requires existing axis labels.`);
-    const previous = this.guideConfigs.axis?.[channel]?.labels;
+    const previous = this.guideConfigs.axis?.[axisId]?.labels;
     if (!previous) throw new Error(`${op} requires label configuration.`);
     const explicitMode = Object.hasOwn(args, "values") || Object.hasOwn(args, "count");
-    const ticks = this.guideConfigs.axis?.[channel]?.ticks;
+    const ticks = this.guideConfigs.axis?.[axisId]?.ticks;
     const inferredValues = !explicitMode && previous.inferredValues === true &&
       ticks?.mode === "values"
       ? ticks.values
@@ -333,18 +412,20 @@ function makeEdit(channel) {
       ...(explicitMode ? { inferredValues: false } : {}),
       mode
     }, args, op);
-    config = normalizeAxisLabelMap(this, config, args, op);
+    config = normalizeAxisLabelMaps(this, config, args, op);
     if (mode === "values") delete config.count; else delete config.values;
     validateConfig(channel, config);
-    assertTickCompatibility(this.guideConfigs.axis?.[channel]?.ticks, config, op);
-    const resolved = resolve(this, channel, config);
-    let next = this._withGuideConfig(channel, "labels", config);
+    assertTickCompatibility(this.guideConfigs.axis?.[axisId]?.ticks, config, op);
+    const resolved = resolve(this, channel, config, axisId);
+    let next = this._withGuideConfig(axisId, "labels", config);
     const properties = {
       length: resolved.text.length,
       x: resolved.x,
       y: resolved.y,
       text: resolved.text,
-      fill: config.color,
+      fill: config.colorMap === undefined ? config.color
+        : resolved.text.map((_, index) => resolveDisplayLabelColor(
+          resolved.values[resolved.groups[index]], config.colorMap, config.color)),
       fontSize: config.fontSize,
       fontFamily: config.fontFamily,
       fontWeight: config.fontWeight,
@@ -357,10 +438,10 @@ function makeEdit(channel) {
     for (const [property, value] of Object.entries(properties)) {
       next = next.editGraphics({ target: id, property, value });
     }
-    const titleConfig = next.guideConfigs.axis?.[channel]?.title;
+    const titleConfig = next.guideConfigs.axis?.[axisId]?.title;
     if (titleConfig?.inferredOffset === true) {
       const editTitle = channel === "x" ? "editXAxisTitle" : "editYAxisTitle";
-      next = next[editTitle]();
+      next = next[editTitle](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
     }
     return next;
   }));
@@ -374,12 +455,14 @@ function makeCreate(channel) {
   const edit = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
   return action({ op, description: `Create concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, true);
+    const selected = selectCartesianAxis(this, channel, args, { create: true });
+    const axisId = selected.id; args = selected.options;
     const scale = validateUserId(args.scale ?? channel, "Scale id");
-    const guideScale = this.semanticSpec.guides.axis?.[channel]?.scale;
+    const guideScale = this.semanticSpec.guides.axis?.[axisId]?.scale;
     if (guideScale && guideScale !== scale) throw new Error(`${op} conflicts with the existing axis scale.`);
-    const id = `${channel}AxisLabels`;
+    const id = axisGraphicIds(channel, axisId)[2];
     if (this.graphicSpec.objects[id]) throw new Error(`${op} requires missing axis labels.`);
-    const ticks = this.guideConfigs.axis?.[channel]?.ticks;
+    const ticks = this.guideConfigs.axis?.[axisId]?.ticks;
     const hasValues = Object.hasOwn(args, "values");
     const hasCount = Object.hasOwn(args, "count");
     const resolvedScale = this.resolvedScales[scale];
@@ -399,6 +482,7 @@ function makeCreate(channel) {
       fontSize: DEFAULTS.fontSize,
       fontFamily: DEFAULTS.fontFamily,
       fontWeight: DEFAULTS.fontWeight,
+      ...axisThemeTypography(this.materializationConfigs.theme, "labels"),
       rotation: DEFAULTS.rotation,
       overlap: DEFAULTS.overlap,
       ...args,
@@ -406,7 +490,7 @@ function makeCreate(channel) {
         (ticks?.inferredValues === true || inferredDiscreteValues !== undefined),
       mode
     }, args, op);
-    config = normalizeAxisLabelMap(this, config, args, op);
+    config = normalizeAxisLabelMaps(this, config, args, op);
     if (mode === "values") {
       config.values ??= ticks?.values ?? inferredDiscreteValues;
     } else {
@@ -414,15 +498,15 @@ function makeCreate(channel) {
     }
     validateConfig(channel, config);
     assertTickCompatibility(ticks, config, op);
-    resolve(this, channel, config);
-    return this.editSemantic({ property: `guide.axis.${channel}.scale`, value: scale })
+    resolve(this, channel, config, axisId);
+    return this.editSemantic({ property: `guide.axis.${axisId}.scale`, value: scale })
       .createGraphics({
         id,
         type: "text",
         length: 0,
         ...resolvePlotGraphicPlacement(this)
       })
-      ._withGuideConfig(channel, "labels", config)[edit]();
+      ._withGuideConfig(axisId, "labels", config)[edit](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
   }));
 }
 

package/src/actions/guides/axes/lines.js

@@ -1,3 +1,6 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
+import { requireSemanticScale } from "../../../selectors/scales.js";
 import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { isSourceOwnedText } from "../../../grammar/text.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
@@ -8,7 +11,7 @@ import {
   validateNonEmptyString,
   validateNonNegativeFinite
 } from "../../../core/validation.js";
-import { resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { axisScaleBindings, resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import {
   defaultAxisPosition,
@@ -19,18 +22,18 @@ import { resolvePlotGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 
 const DEFAULT_STYLE = Object.freeze({ color: DEFAULT_COLORS.text, lineWidth: 1 });
-const CREATE_OPTIONS = Object.freeze(["scale", "position", "color", "lineWidth"]);
-const EDIT_OPTIONS = Object.freeze(["position", "color", "lineWidth"]);
+const CREATE_OPTIONS = Object.freeze(["target", "scale", "position", "color", "lineWidth"]);
+const EDIT_OPTIONS = Object.freeze(["target", "position", "color", "lineWidth"]);
 
 function validateStyle({ color, lineWidth }) {
   validateNonEmptyString(color, "Axis line color");
   validateNonNegativeFinite(lineWidth, "Axis lineWidth");
 }
 
-function resolveLineRange(resolvedScale, bounds, channel) {
+function resolveLineRange(resolvedScale, bounds, channel, explicitRange) {
   const range = resolvedScale?.range;
   if (
-    resolvedScale?.type !== "time" ||
+    explicitRange || resolvedScale?.type !== "time" ||
     !Number.isFinite(resolvedScale.bandwidth)
   ) return range;
   const plotRange = channel === "x"
@@ -41,12 +44,12 @@ function resolveLineRange(resolvedScale, bounds, channel) {
     : plotRange.reverse();
 }
 
-function resolveGeometry(program, channel, scaleId, position) {
+function resolveGeometry(program, channel, scaleId, position, axisId = channel) {
   const hasConsumer = program.semanticSpec.layers.some(
     layer => !isSourceOwnedText(layer) && layer.encoding?.[channel]?.scale === scaleId
   );
 
-  if (!hasConsumer) {
+  if (!hasConsumer && !axisScaleBindings(program, scaleId).some(binding => binding.channel === channel)) {
     throw new Error(
       `Axis line requires scale "${scaleId}" on the ${channel} channel.`
     );
@@ -54,11 +57,7 @@ function resolveGeometry(program, channel, scaleId, position) {
 
   const resolvedScale = program.resolvedScales[scaleId];
   const range = resolvedScale?.range;
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: scaleId,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, position, scaleId, axisId);
 
   if (!Array.isArray(range) || range.length !== 2 || !range.every(Number.isFinite)) {
     throw new Error(`Axis line requires a resolved numeric scale "${scaleId}".`);
@@ -75,14 +74,14 @@ function resolveGeometry(program, channel, scaleId, position) {
     bounds,
     channel,
     position,
-    resolveLineRange(resolvedScale, bounds, channel)
+    resolveLineRange(resolvedScale, bounds, channel, Array.isArray(requireSemanticScale(program, scaleId).range))
   );
 }
 
-function axisIds(channel) {
+function axisIds(channel, axisId = channel) {
   return {
-    graphic: `${channel}AxisLine`,
-    guidePath: `guide.axis.${channel}.scale`
+    graphic: axisGraphicIds(channel, axisId)[0],
+    guidePath: `guide.axis.${axisId}.scale`
   };
 }
 
@@ -93,24 +92,26 @@ function createEditAxisLine(channel) {
     { op: operation, description: `Edit the concrete ${channel}-axis line.` },
     withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, EDIT_OPTIONS, operation);
-      const { graphic } = axisIds(channel);
+      const selected = selectCartesianAxis(this, channel, args, { create: false });
+      const axisId = selected.id; args = selected.options;
+      const { graphic } = axisIds(channel, axisId);
       const line = this.graphicSpec.objects[graphic];
 
       if (line?.type !== "line") {
         throw new Error(`${operation} requires an existing ${channel}-axis line.`);
       }
 
-      const previous = this.guideConfigs.axis?.[channel]?.line;
+      const previous = this.guideConfigs.axis?.[axisId]?.line;
       const position = validateAxisPosition(
         channel,
         args.position ?? previous?.position ?? defaultAxisPosition(channel)
       );
-      const scaleId = this.semanticSpec.guides.axis?.[channel]?.scale;
-      const geometry = resolveGeometry(this, channel, scaleId, position);
+      const scaleId = this.semanticSpec.guides.axis?.[axisId]?.scale;
+      const geometry = resolveGeometry(this, channel, scaleId, position, axisId);
       const color = args.color ?? line.properties.stroke;
       const lineWidth = args.lineWidth ?? line.properties.strokeWidth;
       validateStyle({ color, lineWidth });
-      let next = this._withGuideConfig(channel, "line", {
+      let next = this._withGuideConfig(axisId, "line", {
         position,
         color,
         lineWidth
@@ -139,6 +140,8 @@ function createAxisLine(channel) {
     { op: operation, description: `Create the concrete ${channel}-axis line.` },
     withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, CREATE_OPTIONS, operation);
+      const selected = selectCartesianAxis(this, channel, args, { create: true });
+      const axisId = selected.id; args = selected.options;
       const scale = validateUserId(args.scale ?? channel, "Scale id");
       const position = validateAxisPosition(
         channel,
@@ -147,8 +150,8 @@ function createAxisLine(channel) {
       const color = args.color ?? DEFAULT_STYLE.color;
       const lineWidth = args.lineWidth ?? DEFAULT_STYLE.lineWidth;
       validateStyle({ color, lineWidth });
-      resolveGeometry(this, channel, scale, position);
-      const { graphic, guidePath } = axisIds(channel);
+      resolveGeometry(this, channel, scale, position, axisId);
+      const { graphic, guidePath } = axisIds(channel, axisId);
 
       if (this.graphicSpec.objects[graphic] !== undefined) {
         throw new Error(`${operation} requires a missing ${channel}-axis line.`);
@@ -161,7 +164,7 @@ function createAxisLine(channel) {
           type: "line",
           ...resolvePlotGraphicPlacement(this)
         })
-        [editOperation]({ position, color, lineWidth });
+        [editOperation]({ ...axisTargetArgs(axisId, channel), position, color, lineWidth });
     })
   );
 }

package/src/actions/guides/axes/parallel/lifecycle.js

@@ -68,7 +68,7 @@ function makeAxisAction(create) {
       ? { mode: "selected", dimensions: resolved.dimensions.map(dimension => ({ field: dimension.field })) }
       : resolveParallelAxisConfigs(this, resolved.dimensions);
     const previous = config.dimensions.find(dimension => dimension.field === args.field);
-    const updated = patchParallelAxis(previous, args, create, operation);
+    const updated = patchParallelAxis(previous, args, create, operation, this.materializationConfigs.theme);
     const next = withTitle(withOwner(this, resolved, {
       ...config, dimensions: config.dimensions.map(dimension => dimension.field === args.field ? updated : dimension)
     }), args, create);

package/src/actions/guides/axes/parallel/policy.js

@@ -1,10 +1,11 @@
+import { axisThemeTypography } from "../../../theme/state.js";
 import {
   validateGeneratedItemLimit,
   validateNonEmptyString,
   validateNonNegativeFinite,
   validateOptionObject
 } from "../../../../core/validation.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../../../../theme/defaults.js";
+import { AXIS_LABEL_FONT_SIZES, AXIS_TITLE_FONT_SIZE, DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../../../../theme/defaults.js";
 import { validateAxisTextStyle } from "../labels.js";
 import { validateAxisFormat } from "../policy.js";
 
@@ -20,15 +21,15 @@ const STYLE_OPTIONS = Object.freeze({
   title: ["text", "offset", "color", "fontSize", "fontFamily", "fontWeight"]
 });
 
-export function defaultParallelAxis(field) {
+export function defaultParallelAxis(field, theme) {
   return {
     field,
     line: { color: DEFAULT_COLORS.axis, lineWidth: 1.25 },
     ticks: { mode: "auto", length: 8, color: DEFAULT_COLORS.mutedText, lineWidth: 1 },
     labels: { mode: "auto", offset: 9, format: "auto", color: DEFAULT_COLORS.axis,
-      fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY, fontWeight: "normal" },
+      fontSize: AXIS_LABEL_FONT_SIZES.parallel, fontFamily: DEFAULT_FONT_FAMILY, fontWeight: "normal", ...axisThemeTypography(theme, "labels") },
     title: { offset: 20, color: DEFAULT_COLORS.axisTitle,
-      fontSize: 13, fontFamily: DEFAULT_FONT_FAMILY, fontWeight: 600 }
+      fontSize: AXIS_TITLE_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY, fontWeight: 600, ...axisThemeTypography(theme, "title") }
   };
 }
 
@@ -98,8 +99,8 @@ function patchComponent(previous, defaults, options, part, create, operation) {
   return next;
 }
 
-export function patchParallelAxis(previous, args, create, operation) {
-  const defaults = defaultParallelAxis(args.field);
+export function patchParallelAxis(previous, args, create, operation, theme) {
+  const defaults = defaultParallelAxis(args.field, theme);
   const next = { ...previous, field: args.field };
   const updates = {};
   for (const part of ["line", "title"]) {
@@ -132,6 +133,6 @@ export function resolveParallelAxisConfigs(program, dimensions) {
   const previous = program.guideConfigs.axis?.parallel?.axes;
   const mode = previous?.mode ?? "all";
   const configs = dimensions.map(dimension => previous?.dimensions?.find(config => config.field === dimension.field) ??
-    (mode === "all" ? defaultParallelAxis(dimension.field) : { field: dimension.field }));
+    (mode === "all" ? defaultParallelAxis(dimension.field, program.materializationConfigs.theme) : { field: dimension.field }));
   return { mode, dimensions: configs };
 }