ggaction 0.0.11 → 0.0.13

package/src/actions/guides/legends/categorical/layout.js

@@ -1,23 +1,15 @@
-import { isPlainObject } from "../../../../core/immutable.js";
 import { noOptions } from "../../../../core/validation.js";
 import { mapOrdinalValues } from "../../../../grammar/scales/index.js";
-import { unionConcreteGraphicBounds } from "../../../../grammar/schemas/graphicBounds.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import { formatVisibleText } from "../../../../core/textMetrics.js";
 import {
   assertLegendBoundsInsideCanvas,
-  formatContinuousValues,
   resolveContinuousBounds,
-  resolveLegendBackgroundFromBounds,
-  resolveLegendTextBounds,
-  sampleContinuousValues
+  resolveLegendBackgroundFromBounds
 } from "../continuous/common.js";
-import {
-  alignLegendStart,
-  measureLegendSymbolHeight,
-  measureLegendTextWidth,
-  resolveLegendGrid
-} from "../../../../layout/legend.js";
+import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
+import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
+import { resolveConcreteGraphicBounds } from "../../../../grammar/schemas/graphicBounds.js";
 
 export function activeConfig(program) {
   const kinds = ["series", "color"]
@@ -54,347 +46,42 @@ export function symbolWidth(config) {
   }));
 }
 
-function leftGuideBoundary(program, bounds) {
-  const ids = ["yAxisLine", "yAxisTicks", "yAxisLabels", "yAxisTitle"]
-    .filter(id => program.graphicSpec.objects[id] !== undefined);
-  const occupied = unionConcreteGraphicBounds(program.graphicSpec, ids);
-  return occupied === undefined ? bounds.x : Math.min(bounds.x, occupied.left);
-}
-
-function textBounds(x, y, value, style, textAlign = "left") {
-  return resolveLegendTextBounds(
-    { x, y, align: textAlign },
-    formatVisibleText(value),
-    style
-  );
-}
-
-function resolveLeftSizeMetrics(program, sizeConfig) {
-  if (sizeConfig === undefined) return undefined;
-  const scale = program.resolvedScales[sizeConfig.scale];
-  if (scale?.type !== "linear") {
-    throw new Error(`Legend requires resolved linear scale "${sizeConfig.scale}".`);
-  }
-  const values = sampleContinuousValues(scale.domain, sizeConfig.count);
-  const labels = formatContinuousValues(values, scale.domain, "quantitative");
-  const maximumRadius = Math.sqrt(Math.max(...scale.range) / Math.PI);
-  return { values, labels, maximumRadius };
-}
-
-function resolveLeftLayout(program, bounds, canvas, config, width, count) {
-  const sizeConfig = program.guideConfigs.legend?.size;
-  const size = resolveLeftSizeMetrics(program, sizeConfig);
-  const padding = config.border === false ? 0 : config.border.padding;
-  const categoricalWidth = config.domain.reduce((maximum, value) => Math.max(
-    maximum,
-      width + config.labels.offset +
-        measureLegendTextWidth(value, config.labels)
-  ), config.titleVisible === false
-    ? 0
-    : measureLegendTextWidth(config.title, config.titleStyle));
-  const sizeWidth = size === undefined
-    ? 0
-    : size.labels.reduce((maximum, label) => Math.max(
-        maximum,
-          44 + measureLegendTextWidth(label, config.labels)
-      ), measureLegendTextWidth(sizeConfig.title, config.titleStyle));
-  const contentWidth = Math.max(categoricalWidth, sizeWidth);
-  const occupiedRight = bounds.x - config.offset;
-  const contentRight = occupiedRight - padding;
-  const start = contentRight - contentWidth;
-  if (start < padding) {
-    throw new Error("Legend layout requires more left-margin space.");
-  }
-  if (occupiedRight >= leftGuideBoundary(program, bounds)) {
-    throw new Error("Left legend and y-axis guides require more left-margin space.");
-  }
-  const symbolX = Array(count).fill(start);
-  const itemY = Array.from(
-    { length: count },
-    (_, index) => bounds.y + 52 + index * config.itemGap
-  );
-  const labelX = symbolX.map(value => value + width + config.labels.offset);
-  const titleX = start;
-  const titleY = bounds.y + 20;
-  const sizeTitleY = bounds.y + 56 + count * 34 + 22;
-  const sizeItemY = size?.values.map((_, index) => sizeTitleY + 34 + index * 40);
-  const sizeSymbolX = size?.values.map(() => start + 16);
-  const sizeLabelX = size?.values.map(() => start + 44);
-  const categoricalTop = config.titleVisible === false
-    ? itemY[0] - Math.max(
-        config.labels.fontSize,
-        measureLegendSymbolHeight(config)
-      ) / 2
-    : titleY - config.titleStyle.fontSize / 2;
-  const sizeBottom = size === undefined
-    ? -Infinity
-    : sizeItemY.at(-1) + Math.max(size.maximumRadius, config.labels.fontSize / 2);
-  const categoricalBottom = itemY.at(-1) +
-    Math.max(config.labels.fontSize, measureLegendSymbolHeight(config)) / 2;
-  const blockTop = Math.min(categoricalTop, sizeTitleY - config.titleStyle.fontSize / 2);
-  const blockBottom = Math.max(categoricalBottom, sizeBottom);
-  if (blockTop < 0 || blockBottom > canvas.height) {
-    throw new Error("Legend layout requires more vertical Canvas space.");
-  }
-  let background;
-  if (config.border !== false) {
-    const backgroundTop = Math.floor(
-      blockTop - config.border.padding - config.border.lineWidth
-    );
-    const backgroundBottom = Math.ceil(blockBottom + config.border.padding);
-    background = {
-      x: start - config.border.padding,
-      y: backgroundTop,
-      width: occupiedRight - (start - config.border.padding),
-      height: backgroundBottom - backgroundTop
-    };
-    if (
-      background.x < 0 || background.y < 0 ||
-      background.x + background.width > canvas.width ||
-      background.y + background.height > canvas.height
-    ) {
-      throw new Error("Legend background requires more left-margin space.");
-    }
-  }
-  return {
-    symbolX,
-    itemY,
-    labelX,
-    titleX,
-    titleY,
-    background,
-    blockTop,
-    blockBottom,
-    size: size === undefined ? undefined : {
-      titleX: start,
-      titleY: sizeTitleY,
-      itemY: sizeItemY,
-      symbolX: sizeSymbolX,
-      labelX: sizeLabelX
-    }
-  };
-}
-
-function resolveGridLayout(program, bounds, canvas, config, width, count, top) {
-  const { cells, columnWidths, gridWidth, gridHeight, rowHeight } =
-    resolveLegendGrid(config, width, count);
-  const inlineTitle = config.titlePosition === "left";
-  const titleWidth = config.titleVisible === false
-    ? 0
-    : measureLegendTextWidth(config.title, config.titleStyle);
-  const titleGap = inlineTitle ? 20 : 12;
-  const totalWidth = inlineTitle
-    ? titleWidth + titleGap + gridWidth
-    : Math.max(titleWidth, gridWidth);
-  const start = alignLegendStart(bounds, totalWidth, config.align);
-  if (start < 0 || start + totalWidth > canvas.width) {
-    throw new Error("Legend layout requires more horizontal Canvas space.");
-  }
-  const edge = top
-    ? bounds.y - config.offset
-    : bounds.y + bounds.height + config.offset;
-  const gridStart = inlineTitle
-    ? start + titleWidth + titleGap
-    : start + (totalWidth - gridWidth) / 2;
-  const gridTop = top
-    ? edge - gridHeight
-    : inlineTitle ? edge : edge + config.titleStyle.fontSize + titleGap;
-  const blockTop = top
-    ? inlineTitle
-      ? Math.min(
-          gridTop,
-          edge / 2 + gridTop / 2 - config.titleStyle.fontSize / 2
-        )
-      : gridTop - titleGap - config.titleStyle.fontSize
-    : edge;
-  const blockBottom = top ? edge : gridTop + gridHeight;
-  if (top) {
-    if (blockTop < 0) {
-      throw new Error("Legend layout requires more top-margin space.");
-    }
-    const titleGraphic = program.graphicSpec.objects.chartSubtitle ??
-      program.graphicSpec.objects.chartTitle;
-    if (titleGraphic?.type === "text" &&
-      titleGraphic.properties.y + titleGraphic.properties.fontSize / 2 >= blockTop) {
-      throw new Error("Top legend and chart title require more top-margin space.");
-    }
-  } else {
-    const occupiedTop = config.border === false
-      ? blockTop
-      : blockTop - config.border.padding;
-    const axisTitle = program.graphicSpec.objects.xAxisTitle;
-    if (axisTitle?.type === "text" &&
-      axisTitle.properties.y + axisTitle.properties.fontSize / 2 >= occupiedTop) {
-      throw new Error("Bottom legend and x-axis title require more bottom-margin space.");
-    }
-    const occupiedBottom = config.border === false
-      ? blockBottom
-      : blockBottom + config.border.padding;
-    if (occupiedTop < 0 || occupiedBottom > canvas.height) {
-      throw new Error("Legend layout requires more bottom-margin space.");
-    }
-  }
-  const columnX = [];
-  let cursor = gridStart;
-  for (const columnWidth of columnWidths) {
-    columnX.push(cursor);
-    cursor += columnWidth + config.itemGap;
-  }
-  const symbolX = cells.map(cell => columnX[cell.column]);
-  const labelX = symbolX.map(value => value + width + config.labels.offset);
-  const itemY = cells.map(cell =>
-    gridTop + rowHeight / 2 + cell.row * (rowHeight + config.itemGap)
-  );
-  const titleX = inlineTitle ? start : start + totalWidth / 2;
-  const titleY = inlineTitle
-    ? gridTop + gridHeight / 2
-    : top
-      ? gridTop - titleGap - config.titleStyle.fontSize / 2
-      : blockTop + config.titleStyle.fontSize / 2;
-  let background;
-  if (config.border !== false) {
-    background = {
-      x: start - config.border.padding,
-      y: blockTop - config.border.padding,
-      width: totalWidth + config.border.padding * 2,
-      height: blockBottom - blockTop + config.border.padding * 2
-    };
-    if (background.x < 0 || background.y < 0 ||
-      background.x + background.width > canvas.width ||
-      (!top && background.y + background.height > canvas.height)) {
-      throw new Error(`Legend background requires more ${top ? "top" : "bottom"} or horizontal space.`);
-    }
-  }
-  return {
-    symbolX,
-    itemY,
-    labelX,
-    titleX,
-    titleY,
-    background,
-    blockTop,
-    blockBottom
-  };
-}
-
-function resolveCompactBottomLayout(bounds, canvas, config, width, count) {
-  const labels = config.domain.map(formatVisibleText);
-  const itemWidths = labels.map(
-    label => width + config.labels.offset +
-      measureLegendTextWidth(label, config.labels)
-  );
-  const totalWidth = itemWidths.reduce((sum, value) => sum + value, 0) +
-    config.itemGap * Math.max(0, count - 1);
-  const start = config.align === "center"
-    ? (canvas.width - totalWidth) / 2
-    : alignLegendStart(bounds, totalWidth, config.align);
-  if (start < 0 || start + totalWidth > canvas.width) {
-    throw new Error("Legend layout requires more horizontal Canvas space.");
-  }
-  const symbolX = [];
-  const labelX = [];
-  let cursor = start;
-  for (let index = 0; index < count; index += 1) {
-    symbolX.push(cursor);
-    labelX.push(cursor + width + config.labels.offset);
-    cursor += itemWidths[index] + config.itemGap;
-  }
-  const itemY = Array(count).fill(canvas.height - 28);
-  const titleX = start + totalWidth / 2;
-  const titleY = canvas.height - 52;
-  if (titleY <= bounds.y + bounds.height) {
-    throw new Error("Legend layout requires more bottom-margin space.");
-  }
-  let background;
-  if (config.border !== false) {
-    const maxHeight = Math.max(
-      config.labels.fontSize,
-      measureLegendSymbolHeight(config)
-    );
-    const x = start - config.border.padding;
-    const y = titleY - config.titleStyle.fontSize / 2 - config.border.padding;
-    background = {
-      x,
-      y,
-      width: totalWidth + config.border.padding * 2,
-      height: itemY[0] + maxHeight / 2 + config.border.padding - y
-    };
-    if (
-      background.x < 0 || background.y < 0 ||
-      background.x + background.width > canvas.width ||
-      background.y + background.height > canvas.height
-    ) {
-      throw new Error("Legend background requires more bottom or horizontal space.");
-    }
-  }
-  return { symbolX, itemY, labelX, titleX, titleY, background };
+function resolveSampleBounds(program, config, width) {
+  const appearance = resolveAppearance(program, config);
+  return config.domain.map((_, index) => {
+    const items = config.symbol.layers.map(layer => {
+      if (layer.type === "line") {
+        const x = (width - layer.length) / 2;
+        return { type: "line", properties: { x1: x, x2: x + layer.length, y1: 0, y2: 0,
+          strokeWidth: layer.lineWidth } };
+      }
+      if (layer.type === "swatch") {
+        return { type: "rect", properties: { x: (width - layer.width) / 2, y: -layer.height / 2,
+          width: layer.width, height: layer.height, strokeWidth: layer.strokeWidth } };
+      }
+      if (config.channels.includes("shape")) {
+        return createPointShapeGraphic({ shape: appearance.shapes[index], x: width / 2, y: 0,
+          area: Math.PI * layer.size ** 2, fill: layer.fill ?? appearance.colors[index],
+          stroke: layer.stroke, strokeWidth: layer.strokeWidth });
+      }
+      return { type: "circle", properties: { x: width / 2, y: 0, radius: layer.size,
+        strokeWidth: layer.strokeWidth } };
+    });
+    return resolveConcreteGraphicBounds({ objects: { sample: { type: "collection", items } }, order: ["sample"] }, "sample");
+  });
 }
 
 export function resolveLayout(program, config) {
-  const resolved = resolveContinuousBounds(
-    program,
-    "Legend layout requires Canvas bounds, width, and height."
-  );
-  const bounds = resolved.plot;
-  const canvas = resolved.canvas;
-
-  const count = config.domain.length;
+  const { plot, canvas } = resolveContinuousBounds(program,
+    "Legend layout requires Canvas bounds, width, and height.");
   const width = symbolWidth(config);
-  if (config.position === "right") {
-    const symbolX = Array(count).fill(
-      bounds.x + bounds.width + config.offset
-    );
-    const itemY = Array.from(
-      { length: count },
-      (_, index) => bounds.y + 52 + index * config.itemGap
-    );
-    const labelX = symbolX.map(value => value + width + config.labels.offset);
-    const titleX = symbolX[0];
-    const titleY = bounds.y + 20;
-    const labelBounds = config.domain.map((value, index) => textBounds(
-      labelX[index], itemY[index], value, config.labels
-    ));
-    const titleBounds = config.titleVisible === false
-      ? undefined
-      : textBounds(titleX, titleY, config.title, config.titleStyle);
-    const symbolHeight = measureLegendSymbolHeight(config);
-    const symbolBounds = itemY.map(y => ({
-      left: symbolX[0],
-      right: symbolX[0] + width,
-      top: y - symbolHeight / 2,
-      bottom: y + symbolHeight / 2
-    }));
-    const contentBounds = [
-      ...labelBounds,
-      ...symbolBounds,
-      ...(titleBounds === undefined ? [] : [titleBounds])
-    ];
-    assertLegendBoundsInsideCanvas(
-      contentBounds,
-      canvas,
-      "Right legend layout"
-    );
-    const background = resolveLegendBackgroundFromBounds(
-      contentBounds,
-      config.border,
-      canvas,
-      "Right legend"
-    );
-    return { symbolX, itemY, labelX, titleX, titleY, background };
-  }
-
-  if (config.position === "left") {
-    return resolveLeftLayout(program, bounds, canvas, config, width, count);
-  }
-
-  if (config.position === "top") {
-    return resolveGridLayout(program, bounds, canvas, config, width, count, true);
-  }
-
-  if (config.bottomGrid !== true) {
-    return resolveCompactBottomLayout(bounds, canvas, config, width, count);
-  }
-  return resolveGridLayout(program, bounds, canvas, config, width, count, false);
+  const layout = resolveLegendItemLayout(plot, config, config.domain.map(formatVisibleText), {
+    width, height: 0, itemBounds: resolveSampleBounds(program, config, width)
+  }, canvas);
+  assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Categorical legend layout", config);
+  const background = resolveLegendBackgroundFromBounds(layout.bounds, config.border, canvas,
+    "Categorical legend", config);
+  return { ...layout, titleX: layout.title.x, titleY: layout.title.y, background };
 }
 
 export function resolveAppearance(program, config) {

package/src/actions/guides/legends/categorical/options.js

@@ -16,7 +16,9 @@ export const CHANNELS = CATEGORICAL_LEGEND_CHANNELS;
 const OPTIONS = Object.freeze([
   "target",
   "channels",
+  "order",
   "position",
+  "layout",
   "align",
   "direction",
   "columns",
@@ -34,7 +36,8 @@ const TEXT_OPTIONS = Object.freeze([
   "color",
   "fontSize",
   "fontFamily",
-  "fontWeight"
+  "fontWeight",
+  "format"
 ]);
 const TITLE_OPTIONS = Object.freeze([
   "color",
@@ -89,6 +92,9 @@ export function normalizeOptions(args, kind) {
   validateOptionObject(args, OPTIONS, "createLegend");
   if (Object.hasOwn(args, "labels")) {
     validateObject(args.labels, TEXT_OPTIONS, "createLegend.labels");
+    if (args.labels.format !== undefined && args.labels.format !== "auto") {
+      throw new Error("Categorical legend labels do not accept format.");
+    }
   }
   if (Object.hasOwn(args, "titleStyle")) {
     validateObject(
@@ -108,26 +114,33 @@ export function normalizeOptions(args, kind) {
     offset: defaults.offset,
     ...(args.labels ?? {})
   };
+  delete labels.format;
   const titleStyle = {
     ...COMMON_DEFAULTS.titleStyle,
     ...(args.titleStyle ?? {})
   };
   const position = args.position ?? defaults.position;
   const align = args.align ?? defaults.align;
-  const direction = args.direction ?? (position === "left" ? "vertical" : "horizontal");
+  const side = ["left", "right"].includes(position);
+  const direction = args.direction ?? (side ? "vertical" : "horizontal");
   const columns = args.columns;
   const offset = args.offset ?? 8;
   const titlePosition = args.titlePosition ?? "top";
   const itemGap = args.itemGap ?? (["right", "left"].includes(position)
     ? 28
     : position === "top" ? 24 : 20);
-  const bottomGrid = position !== "bottom" || [
-    "columns",
-    "direction",
-    "offset",
-    "titlePosition",
-    "itemGap"
-  ].some(key => Object.hasOwn(args, key));
+  const layout = args.layout === undefined ? "edge" : args.layout;
+  if (!["edge", "legacy-bottom"].includes(layout)) {
+    throw new Error(`Unsupported legend layout "${layout}".`);
+  }
+  if (layout === "legacy-bottom" && position !== "bottom") {
+    throw new Error('Legend layout "legacy-bottom" requires position "bottom".');
+  }
+  if (layout === "legacy-bottom" && (
+    columns !== undefined || direction !== "horizontal" || titlePosition !== "top" || offset !== 8
+  )) {
+    throw new Error('Legend columns, vertical direction, left title and custom offset require layout "edge".');
+  }
 
   if (!["right", "left", "bottom", "top"].includes(position)) {
     throw new Error(`Unsupported legend position "${position}".`);
@@ -141,11 +154,14 @@ export function normalizeOptions(args, kind) {
   if (!["horizontal", "vertical"].includes(direction)) {
     throw new Error(`Unsupported legend direction "${direction}".`);
   }
-  if (position === "left" && direction !== "vertical") {
-    throw new Error("Left legends currently require vertical direction.");
+  if (side && direction !== "vertical") {
+    throw new Error("Side legends require vertical direction.");
+  }
+  if (side && columns !== undefined && columns !== 1) {
+    throw new Error("Side legends require one column.");
   }
-  if (position === "left" && columns !== undefined) {
-    throw new Error("Left legends do not accept columns.");
+  if (side && titlePosition !== "top") {
+    throw new Error("Side legends require a top title.");
   }
   if (columns !== undefined && (!Number.isInteger(columns) || columns <= 0)) {
     throw new RangeError("Legend columns must be a positive integer.");
@@ -179,7 +195,7 @@ export function normalizeOptions(args, kind) {
     labels,
     titleStyle,
     itemGap,
-    bottomGrid,
+    layout,
     border: normalizeBorder(args.border)
   };
 }

package/src/actions/guides/legends/categorical/recipes.js

@@ -25,6 +25,20 @@ const LAYER_OPTIONS = Object.freeze({
   ])
 });
 
+export function resolveLegendSymbol(program, layer, channels, requested) {
+  if (requested !== undefined && requested !== "auto") return requested;
+  if (layer.mark?.type !== "point" || !channels?.includes("shape")) return undefined;
+  const color = channels.includes("color") ? layer.encoding?.color : undefined;
+  const hasMatchingLine = color?.scale !== undefined && program.semanticSpec.layers.some(candidate =>
+    candidate.mark?.type === "line" && candidate.encoding?.color?.field === color.field &&
+    candidate.encoding?.color?.scale === color.scale
+  );
+  return { layers: [
+    ...(hasMatchingLine ? [{ type: "line", length: 32, lineWidth: 3 }] : []),
+    { type: "point", size: Math.sqrt(64 / Math.PI), stroke: "white", strokeWidth: 0 }
+  ] };
+}
+
 function defaultRecipe(kind) {
   return kind === "series"
     ? { layers: [{ type: "line", length: 32, lineWidth: 2 }] }

package/src/actions/guides/legends/categorical/resolve.js

@@ -1,3 +1,6 @@
+import { requireDataset } from "../../../../selectors/datasets.js";
+import { readNominalField } from "../../../../grammar/scales/fields.js";
+import { resolveLegendOrderDomain } from "../../../../grammar/categoryOrder.js";
 import { validateUserId } from "../../../../core/identifiers.js";
 import {
   sameOrderedValues,
@@ -41,7 +44,7 @@ export function resolveTarget(program, requested) {
 
 export const sameValues = sameOrderedValues;
 
-export function resolveLegendKind(layer, requestedChannels) {
+function resolveLegendKind(layer, requestedChannels) {
   if (["bar", "area", "arc", "rect"].includes(layer.mark.type)) return "color";
   if (
     layer.mark.type === "point" &&
@@ -74,13 +77,11 @@ function resolveOrdinalScales(program, scaleIds) {
   return { scales, domain: scales[0].domain };
 }
 
-export function resolveDefinition(program, layer, requestedChannels, requestedTitle) {
-  const kind = resolveLegendKind(layer, requestedChannels);
-  const channels = requestedChannels ?? (kind === "color"
-    ? ["color"]
-    : CHANNELS.filter(
-        channel => layer.encoding?.[channel]?.scale !== undefined
-      ));
+export function resolveDefinition(program, layer, requestedChannels, requestedTitle, order) {
+  const channels = requestedChannels ?? (["line", "point"].includes(layer.mark.type)
+    ? CHANNELS.filter(channel => layer.encoding?.[channel]?.scale !== undefined)
+    : ["color"]);
+  const kind = resolveLegendKind(layer, channels);
   if (
     !Array.isArray(channels) ||
     channels.length === 0 ||
@@ -109,13 +110,22 @@ export function resolveDefinition(program, layer, requestedChannels, requestedTi
   const scales = encodings.map(item => item.encoding.scale);
   const resolved = resolveOrdinalScales(program, scales);
   const field = [...fields][0];
+  let linked;
+  if (order?.channel !== undefined) {
+    const position = layer.encoding?.[order.channel];
+    if (!["nominal", "ordinal"].includes(position?.fieldType) || position.field !== field) {
+      throw new Error("Linked legend order requires the same categorical field on its target.");
+    }
+    linked = program.resolvedScales[position.scale]?.domain;
+  }
   return {
     kind,
     channels,
     scales,
     field,
     title: nonEmptyString(requestedTitle ?? field, "Legend title"),
-    domain: resolved.domain
+    domain: resolveLegendOrderDomain(resolved.domain, order, linked,
+      order?.values === undefined ? undefined : readNominalField(requireDataset(program, layer.data).values, field))
   };
 }
 
@@ -133,6 +143,7 @@ export function resolveCurrentDefinition(program, config) {
     program,
     layer,
     channels,
-    config.inferredTitle === true ? undefined : guide.title
+    config.inferredTitle === true ? undefined : guide.title,
+    guide.order
   );
 }

package/src/actions/guides/legends/categorical/symbols.js

@@ -9,8 +9,7 @@ import {
   symbolGraphic,
   symbolWidth
 } from "./layout.js";
-import { resolveLegendGraphicPlacement } from
-  "../../../../materialization/graphicHierarchy.js";
+import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
 
 function makeEditSymbol(type) {
@@ -129,7 +128,7 @@ function makeCreateSymbol(type, edit) {
         .createGraphics({
           id,
           type: graphicType,
-          ...resolveLegendGraphicPlacement(this),
+          ...resolveCategoricalLegendPlacement(this),
           ...(this.graphicSpec.objects[graphic(config, "Labels")] === undefined
             ? {}
             : { before: graphic(config, "Labels") }),