ggaction 0.0.1

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

@@ -0,0 +1,231 @@
+import { action } from "../../../core/action.js";
+import { validateUserId } from "../../../core/identifiers.js";
+import {
+  sameOrderedValues,
+  validateNonEmptyString,
+  validateNonNegativeFinite,
+  validatePositiveFinite
+} from "../../../core/validation.js";
+import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import {
+  isTransformedScaleType,
+  mapContinuousScaleValues,
+  formatTransformedTick,
+  mapOrdinalPositionValues
+} from "../../../grammar/scales.js";
+import { formatTimeTick } from "../../../grammar/ticks.js";
+import { valuesFromTickConfig } from "../tickValues.js";
+import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+  "../../../theme/defaults.js";
+import {
+  defaultAxisPosition,
+  formatAxisValue,
+  resolveAxisLabelGeometry,
+  validateAxisFormat,
+  validateAxisPosition
+} from "./policy.js";
+import { resolvePlotGraphicPlacement } from
+  "../../../materialization/graphicHierarchy.js";
+
+const OPTIONS = Object.freeze([
+  "scale", "position", "count", "values", "offset", "format", "color",
+  "fontSize", "fontFamily", "fontWeight"
+]);
+
+const DEFAULTS = Object.freeze({
+  count: 5,
+  color: DEFAULT_COLORS.text,
+  fontSize: 12,
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontWeight: "normal"
+});
+
+function validateOptions(args, operation, create) {
+  for (const key of Object.keys(args)) {
+    if (!OPTIONS.includes(key) || (!create && key === "scale")) {
+      throw new Error(`Unknown ${operation} option "${key}".`);
+    }
+  }
+  if (Object.hasOwn(args, "count") && Object.hasOwn(args, "values")) {
+    throw new Error(`${operation} cannot use count and values together.`);
+  }
+}
+
+function validateConfig(channel, config) {
+  validateAxisPosition(channel, config.position);
+  if (config.mode === "count" && (!Number.isInteger(config.count) || config.count <= 0)) throw new RangeError("Label count must be a positive integer.");
+  if (
+    config.mode === "values" &&
+    (!Array.isArray(config.values) || !config.values.every(value =>
+      typeof value === "string" ||
+      typeof value === "boolean" ||
+      (typeof value === "number" && Number.isFinite(value))
+    ))
+  ) throw new TypeError("Label values must be nominal values or finite numbers.");
+  validateNonNegativeFinite(config.offset, "Label offset");
+  validatePositiveFinite(config.fontSize, "Label fontSize");
+  validateNonEmptyString(config.color, "Label color");
+  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.");
+  validateAxisFormat(config.format);
+}
+
+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.`);
+  if (config.mode === "count" && ticks.count !== config.count) throw new Error(`${operation} conflicts with axis ticks.`);
+  if (config.mode === "values" && !sameOrderedValues(ticks.values, config.values)) throw new Error(`${operation} conflicts with axis ticks.`);
+}
+
+function resolve(program, channel, config) {
+  const scale = program.resolvedScales[config.scale];
+  const bounds = resolveGraphicBounds(program);
+  const discrete = ["ordinal", "band", "point"].includes(scale?.type);
+  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);
+  if (discrete) {
+    const domainValues = new Set(scale.domain);
+    if (!values.every(value => domainValues.has(value))) throw new RangeError("Label values must be inside the scale domain.");
+  } else {
+    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
+    ? mapOrdinalPositionValues(values, scale)
+    : mapContinuousScaleValues(values, scale);
+  const text = values.map(value => formatAxisValue(
+    value,
+    scale.type,
+    config.format,
+    item => scale.type === "time"
+      ? formatTimeTick(item, scale.domain)
+      : isTransformedScaleType(scale.type)
+        ? formatTransformedTick(scale.type, item)
+        : String(item)
+  ));
+  const resolved = {
+    values,
+    text,
+    ...resolveAxisLabelGeometry({
+      bounds,
+      channel,
+      position: config.position,
+      positions,
+      offset: config.offset
+    })
+  };
+  const canvas = program.graphicSpec.objects.canvas?.properties;
+  const maximumTextWidth = Math.max(
+    0,
+    ...text.map(value => [...value].length * config.fontSize * 0.6)
+  );
+  const fits = config.position === "top"
+    ? resolved.y - config.fontSize >= 0
+    : config.position === "right"
+      ? resolved.x + maximumTextWidth <= canvas?.width
+      : true;
+  if (!canvas || !fits) {
+    throw new Error(`The ${channel}-axis labels do not fit the Canvas margin.`);
+  }
+  return resolved;
+}
+
+function makeEdit(channel) {
+  const op = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
+  return action({ op, description: `Edit concrete ${channel}-axis labels.` }, function (args = {}) {
+    validateOptions(args, op, false);
+    const id = `${channel}AxisLabels`;
+    if (this.graphicSpec.objects[id]?.type !== "text") throw new Error(`${op} requires existing axis labels.`);
+    const previous = this.guideConfigs.axis?.[channel]?.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 inferredValues = !explicitMode && previous.inferredValues === true &&
+      ticks?.mode === "values"
+      ? ticks.values
+      : undefined;
+    const mode = Object.hasOwn(args, "values") || inferredValues !== undefined
+      ? "values"
+      : Object.hasOwn(args, "count") ? "count" : previous.mode;
+    const config = {
+      ...previous,
+      ...args,
+      ...(inferredValues === undefined ? {} : { values: inferredValues }),
+      ...(explicitMode ? { inferredValues: false } : {}),
+      mode
+    };
+    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)
+      .editGraphics({ target: id, property: "length", value: resolved.values.length });
+    for (const property of ["x", "y", "text"]) next = next.editGraphics({ target: id, property, value: resolved[property] });
+    return next
+      .editGraphics({ target: id, property: "fill", value: config.color })
+      .editGraphics({ target: id, property: "fontSize", value: config.fontSize })
+      .editGraphics({ target: id, property: "fontFamily", value: config.fontFamily })
+      .editGraphics({ target: id, property: "fontWeight", value: config.fontWeight })
+      .editGraphics({ target: id, property: "textAlign", value: resolved.textAlign })
+      .editGraphics({ target: id, property: "textBaseline", value: resolved.textBaseline });
+  });
+}
+
+const editXAxisLabels = makeEdit("x");
+const editYAxisLabels = makeEdit("y");
+
+function makeCreate(channel) {
+  const op = channel === "x" ? "createXAxisLabels" : "createYAxisLabels";
+  const edit = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
+  return action({ op, description: `Create concrete ${channel}-axis labels.` }, function (args = {}) {
+    validateOptions(args, op, true);
+    const scale = validateUserId(args.scale ?? channel, "Scale id");
+    const guideScale = this.semanticSpec.guides.axis?.[channel]?.scale;
+    if (guideScale && guideScale !== scale) throw new Error(`${op} conflicts with the existing axis scale.`);
+    const id = `${channel}AxisLabels`;
+    if (this.graphicSpec.objects[id]) throw new Error(`${op} requires missing axis labels.`);
+    const ticks = this.guideConfigs.axis?.[channel]?.ticks;
+    const hasValues = Object.hasOwn(args, "values");
+    const hasCount = Object.hasOwn(args, "count");
+    const mode = hasValues ? "values" : hasCount ? "count" : ticks?.mode ?? "count";
+    const config = {
+      scale,
+      position: defaultAxisPosition(channel),
+      offset: channel === "x" ? 18 : 12,
+      format: "auto",
+      color: DEFAULTS.color,
+      fontSize: DEFAULTS.fontSize,
+      fontFamily: DEFAULTS.fontFamily,
+      fontWeight: DEFAULTS.fontWeight,
+      ...args,
+      inferredValues: !hasValues && !hasCount && ticks?.inferredValues === true,
+      mode
+    };
+    if (mode === "values") config.values ??= ticks?.values; else config.count ??= ticks?.count ?? DEFAULTS.count;
+    validateConfig(channel, config);
+    assertTickCompatibility(ticks, config, op);
+    resolve(this, channel, config);
+    return this.editSemantic({ property: `guide.axis.${channel}.scale`, value: scale })
+      .createGraphics({
+        id,
+        type: "text",
+        length: 0,
+        ...resolvePlotGraphicPlacement(this)
+      })
+      ._withGuideConfig(channel, "labels", config)[edit]();
+  });
+}
+
+const createXAxisLabels = makeCreate("x");
+const createYAxisLabels = makeCreate("y");
+
+export function registerAxisLabelActions(Class) {
+  Class.prototype.editXAxisLabels = editXAxisLabels;
+  Class.prototype.editYAxisLabels = editYAxisLabels;
+  Class.prototype.createXAxisLabels = createXAxisLabels;
+  Class.prototype.createYAxisLabels = createYAxisLabels;
+}

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

@@ -0,0 +1,149 @@
+import { action } from "../../../core/action.js";
+import { validateUserId } from "../../../core/identifiers.js";
+import {
+  validateKeys,
+  validateNonEmptyString,
+  validateNonNegativeFinite
+} from "../../../core/validation.js";
+import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { DEFAULT_COLORS } from "../../../theme/defaults.js";
+import {
+  defaultAxisPosition,
+  resolveAxisLineGeometry,
+  validateAxisPosition
+} from "./policy.js";
+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"]);
+
+function validateStyle({ color, lineWidth }) {
+  validateNonEmptyString(color, "Axis line color");
+  validateNonNegativeFinite(lineWidth, "Axis lineWidth");
+}
+
+function resolveGeometry(program, channel, scaleId, position) {
+  const hasConsumer = program.semanticSpec.layers.some(
+    layer => layer.encoding?.[channel]?.scale === scaleId
+  );
+
+  if (!hasConsumer) {
+    throw new Error(
+      `Axis line requires scale "${scaleId}" on the ${channel} channel.`
+    );
+  }
+
+  const range = program.resolvedScales[scaleId]?.range;
+  const bounds = resolveGraphicBounds(program);
+
+  if (!Array.isArray(range) || range.length !== 2 || !range.every(Number.isFinite)) {
+    throw new Error(`Axis line requires a resolved numeric scale "${scaleId}".`);
+  }
+
+  if (
+    bounds === undefined ||
+    ![bounds.x, bounds.y, bounds.width, bounds.height].every(Number.isFinite)
+  ) {
+    throw new Error("Axis line requires graphical Canvas bounds.");
+  }
+
+  return resolveAxisLineGeometry(bounds, channel, position, range);
+}
+
+function axisIds(channel) {
+  return {
+    graphic: `${channel}AxisLine`,
+    guidePath: `guide.axis.${channel}.scale`
+  };
+}
+
+function createEditAxisLine(channel) {
+  const operation = channel === "x" ? "editXAxisLine" : "editYAxisLine";
+
+  return action(
+    { op: operation, description: `Edit the concrete ${channel}-axis line.` },
+    function (args = {}) {
+      validateKeys(args, EDIT_OPTIONS, operation);
+      const { graphic } = axisIds(channel);
+      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 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 color = args.color ?? line.properties.stroke;
+      const lineWidth = args.lineWidth ?? line.properties.strokeWidth;
+      validateStyle({ color, lineWidth });
+      let next = this._withGuideConfig(channel, "line", {
+        position,
+        color,
+        lineWidth
+      });
+
+      for (const property of ["x1", "y1", "x2", "y2"]) {
+        next = next.editGraphics({ target: graphic, property, value: geometry[property] });
+      }
+
+      return next
+        .editGraphics({ target: graphic, property: "stroke", value: color })
+        .editGraphics({ target: graphic, property: "strokeWidth", value: lineWidth });
+    }
+  );
+}
+
+const editXAxisLine = createEditAxisLine("x");
+const editYAxisLine = createEditAxisLine("y");
+
+function createAxisLine(channel) {
+  const operation = channel === "x" ? "createXAxisLine" : "createYAxisLine";
+  const editOperation = channel === "x" ? "editXAxisLine" : "editYAxisLine";
+
+  return action(
+    { op: operation, description: `Create the concrete ${channel}-axis line.` },
+    function (args = {}) {
+      validateKeys(args, CREATE_OPTIONS, operation);
+      const scale = validateUserId(args.scale ?? channel, "Scale id");
+      const position = validateAxisPosition(
+        channel,
+        args.position ?? defaultAxisPosition(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);
+
+      if (this.graphicSpec.objects[graphic] !== undefined) {
+        throw new Error(`${operation} requires a missing ${channel}-axis line.`);
+      }
+
+      return this
+        .editSemantic({ property: guidePath, value: scale })
+        .createGraphics({
+          id: graphic,
+          type: "line",
+          ...resolvePlotGraphicPlacement(this)
+        })
+        [editOperation]({ position, color, lineWidth });
+    }
+  );
+}
+
+const createXAxisLine = createAxisLine("x");
+const createYAxisLine = createAxisLine("y");
+
+export function registerAxisLineActions(ProgramClass) {
+  ProgramClass.prototype.editXAxisLine = editXAxisLine;
+  ProgramClass.prototype.editYAxisLine = editYAxisLine;
+  ProgramClass.prototype.createXAxisLine = createXAxisLine;
+  ProgramClass.prototype.createYAxisLine = createYAxisLine;
+}

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

@@ -0,0 +1,155 @@
+const AXIS_POSITIONS = Object.freeze({
+  x: Object.freeze(["bottom", "top"]),
+  y: Object.freeze(["left", "right"])
+});
+
+const NUMERIC_FORMATS = new Set([
+  ".0f", ".1f", ".2f", ".0%", ".1%", ".2e"
+]);
+const TIME_FORMATS = new Set(["%Y", "%Y-%m", "%Y-%m-%d"]);
+
+export function defaultAxisPosition(channel) {
+  return channel === "x" ? "bottom" : "left";
+}
+
+export function validateAxisPosition(channel, position) {
+  if (!AXIS_POSITIONS[channel]?.includes(position)) {
+    throw new Error(`Unsupported ${channel}-axis position "${position}".`);
+  }
+  return position;
+}
+
+export function defaultAxisTitleRotation(channel, position) {
+  if (channel === "x") return 0;
+  return position === "right" ? Math.PI / 2 : -Math.PI / 2;
+}
+
+export function axisBaseline(bounds, channel, position) {
+  if (channel === "x") {
+    return position === "top" ? bounds.y : bounds.y + bounds.height;
+  }
+  return position === "right" ? bounds.x + bounds.width : bounds.x;
+}
+
+export function resolveAxisLineGeometry(bounds, channel, position, range) {
+  const baseline = axisBaseline(bounds, channel, position);
+  return channel === "x"
+    ? { x1: range[0], y1: baseline, x2: range[1], y2: baseline }
+    : { x1: baseline, y1: range[0], x2: baseline, y2: range[1] };
+}
+
+export function resolveAxisTickGeometry({
+  bounds,
+  channel,
+  position,
+  positions,
+  length
+}) {
+  const baseline = axisBaseline(bounds, channel, position);
+  if (channel === "x") {
+    const end = position === "top" ? baseline - length : baseline + length;
+    return { x1: positions, y1: baseline, x2: positions, y2: end };
+  }
+  const end = position === "right" ? baseline + length : baseline - length;
+  return position === "right"
+    ? { x1: baseline, y1: positions, x2: end, y2: positions }
+    : { x1: end, y1: positions, x2: baseline, y2: positions };
+}
+
+export function resolveAxisLabelGeometry({
+  bounds,
+  channel,
+  position,
+  positions,
+  offset
+}) {
+  const baseline = axisBaseline(bounds, channel, position);
+  if (channel === "x") {
+    return {
+      x: positions,
+      y: position === "top" ? baseline - offset : baseline + offset,
+      textAlign: "center",
+      textBaseline: position === "top" ? "bottom" : "top"
+    };
+  }
+  return {
+    x: position === "right" ? baseline + offset : baseline - offset,
+    y: positions,
+    textAlign: position === "right" ? "left" : "right",
+    textBaseline: "middle"
+  };
+}
+
+export function resolveAxisTitleGeometry({
+  bounds,
+  channel,
+  position,
+  along,
+  offset
+}) {
+  const baseline = axisBaseline(bounds, channel, position);
+  return channel === "x"
+    ? { x: along, y: position === "top" ? baseline - offset : baseline + offset }
+    : { x: position === "right" ? baseline + offset : baseline - offset, y: along };
+}
+
+export function validateAxisFormat(format) {
+  if (format === "auto") return format;
+  if (
+    format !== null &&
+    typeof format === "object" &&
+    Number.isInteger(format.decimals) &&
+    format.decimals >= 0 &&
+    Object.keys(format).length === 1
+  ) {
+    return format;
+  }
+  if (typeof format === "string" && (
+    NUMERIC_FORMATS.has(format) || TIME_FORMATS.has(format)
+  )) {
+    return format;
+  }
+  throw new TypeError(
+    "Label format must be auto, { decimals }, or a supported format string."
+  );
+}
+
+function pad(value, length = 2) {
+  return String(value).padStart(length, "0");
+}
+
+function formatTime(value, format) {
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) {
+    throw new TypeError("Time axis format requires valid timestamps.");
+  }
+  const year = pad(date.getUTCFullYear(), 4);
+  const month = pad(date.getUTCMonth() + 1);
+  const day = pad(date.getUTCDate());
+  if (format === "%Y") return year;
+  if (format === "%Y-%m") return `${year}-${month}`;
+  return `${year}-${month}-${day}`;
+}
+
+export function formatAxisValue(value, scaleType, format, autoFormatter) {
+  validateAxisFormat(format);
+  if (format === "auto") return autoFormatter(value);
+  if (["ordinal", "band", "point"].includes(scaleType)) {
+    throw new Error('Discrete axis labels require format "auto".');
+  }
+  if (scaleType === "time") {
+    if (!TIME_FORMATS.has(format)) {
+      throw new Error("Time axis labels require a supported time format string.");
+    }
+    return formatTime(value, format);
+  }
+  if (TIME_FORMATS.has(format)) {
+    throw new Error("Quantitative axis labels cannot use a time format string.");
+  }
+  if (typeof format === "object") return value.toFixed(format.decimals);
+  if (format.endsWith("f")) return value.toFixed(Number(format[1]));
+  if (format.endsWith("%")) {
+    return `${(value * 100).toFixed(Number(format[1]))}%`;
+  }
+  return value.toExponential(2);
+}

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

@@ -0,0 +1,149 @@
+import { action } from "../../../core/action.js";
+import { isPlainObject } from "../../../core/immutable.js";
+import { validateKeys } from "../../../core/validation.js";
+
+const CREATE_OPTIONS = Object.freeze([
+  "scale",
+  "position",
+  "count",
+  "values",
+  "ticks",
+  "labels"
+]);
+const EDIT_OPTIONS = Object.freeze([
+  "position",
+  "count",
+  "values",
+  "ticks",
+  "labels"
+]);
+const TICK_OPTIONS = Object.freeze(["length", "color", "lineWidth"]);
+const LABEL_OPTIONS = Object.freeze([
+  "offset",
+  "format",
+  "color",
+  "fontSize",
+  "fontFamily",
+  "fontWeight"
+]);
+const SHARED_CREATE = Object.freeze(["scale", "position", "count", "values"]);
+const SHARED_EDIT = Object.freeze(["position", "count", "values"]);
+
+function validateNested(value, supported, label) {
+  if (!isPlainObject(value)) {
+    throw new TypeError(`${label} must be a plain object.`);
+  }
+
+  validateKeys(value, supported, label);
+}
+
+function validateArgs(args, operation, create) {
+  validateKeys(args, create ? CREATE_OPTIONS : EDIT_OPTIONS, operation);
+
+  if (Object.hasOwn(args, "count") && Object.hasOwn(args, "values")) {
+    throw new Error(`${operation} cannot use count and values together.`);
+  }
+
+  if (Object.hasOwn(args, "ticks")) {
+    validateNested(args.ticks, TICK_OPTIONS, `${operation}.ticks`);
+  }
+
+  if (Object.hasOwn(args, "labels")) {
+    validateNested(args.labels, LABEL_OPTIONS, `${operation}.labels`);
+  }
+
+  if (!create && Object.keys(args).length === 0) {
+    throw new TypeError(`${operation} requires at least one option.`);
+  }
+}
+
+function select(source, keys) {
+  const result = {};
+
+  for (const key of keys) {
+    if (Object.hasOwn(source, key)) result[key] = source[key];
+  }
+
+  return result;
+}
+
+function names(channel) {
+  const prefix = channel === "x" ? "X" : "Y";
+  return {
+    create: `create${prefix}AxisTicksAndLabels`,
+    edit: `edit${prefix}AxisTicksAndLabels`,
+    createTicks: `create${prefix}AxisTicks`,
+    createLabels: `create${prefix}AxisLabels`,
+    editTicks: `edit${prefix}AxisTicks`,
+    editLabels: `edit${prefix}AxisLabels`
+  };
+}
+
+function makeCreate(channel) {
+  const operation = names(channel);
+
+  return action(
+    {
+      op: operation.create,
+      description: `Create ${channel}-axis ticks and labels.`
+    },
+    function (args = {}) {
+      validateArgs(args, operation.create, true);
+      const shared = select(args, SHARED_CREATE);
+      const tickArgs = { ...shared, ...(args.ticks ?? {}) };
+      const labelArgs = {
+        ...select(shared, ["scale", "position"]),
+        ...(args.labels ?? {})
+      };
+
+      return this[operation.createTicks](tickArgs)[operation.createLabels](
+        labelArgs
+      );
+    }
+  );
+}
+
+function makeEdit(channel) {
+  const operation = names(channel);
+
+  return action(
+    {
+      op: operation.edit,
+      description: `Edit ${channel}-axis ticks and labels.`
+    },
+    function (args = {}) {
+      validateArgs(args, operation.edit, false);
+      const shared = select(args, SHARED_EDIT);
+      const hasShared = Object.keys(shared).length > 0;
+      let next = this;
+
+      if (hasShared || Object.hasOwn(args, "ticks")) {
+        next = next[operation.editTicks]({
+          ...shared,
+          ...(args.ticks ?? {})
+        });
+      }
+
+      if (hasShared || Object.hasOwn(args, "labels")) {
+        next = next[operation.editLabels]({
+          ...shared,
+          ...(args.labels ?? {})
+        });
+      }
+
+      return next;
+    }
+  );
+}
+
+const createXAxisTicksAndLabels = makeCreate("x");
+const createYAxisTicksAndLabels = makeCreate("y");
+const editXAxisTicksAndLabels = makeEdit("x");
+const editYAxisTicksAndLabels = makeEdit("y");
+
+export function registerAxisTickGroupActions(Class) {
+  Class.prototype.createXAxisTicksAndLabels = createXAxisTicksAndLabels;
+  Class.prototype.createYAxisTicksAndLabels = createYAxisTicksAndLabels;
+  Class.prototype.editXAxisTicksAndLabels = editXAxisTicksAndLabels;
+  Class.prototype.editYAxisTicksAndLabels = editYAxisTicksAndLabels;
+}