ggaction 0.0.12 → 0.0.15

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

@@ -1,42 +1,66 @@
-import { isPlainObject } from "../../../../core/immutable.js";
-import { noOptions } from "../../../../core/validation.js";
+import { validateOptionObject } 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 { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
+import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
+import { resolveConcreteGraphicBounds } from "../../../../grammar/schemas/graphicBounds.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
+import { resolveDisplayLabel } from "../../../../grammar/displayLabels.js";
 import {
-  alignLegendStart,
-  measureLegendSymbolHeight,
-  measureLegendTextWidth,
-  resolveLegendGrid
-} from "../../../../layout/legend.js";
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
 
-export function activeConfig(program) {
-  const kinds = ["series", "color"]
+const CATEGORICAL_KINDS = Object.freeze(["series", "color", "stroke"]);
+
+export function activeConfig(program, requested) {
+  if (requested !== undefined && !CATEGORICAL_KINDS.includes(requested)) {
+    throw new Error(`Unknown categorical legend kind "${requested}".`);
+  }
+  const kinds = CATEGORICAL_KINDS
     .filter(kind => program.guideConfigs.legend?.[kind] !== undefined);
+  if (requested !== undefined) {
+    if (!kinds.includes(requested)) {
+      throw new Error(`Missing categorical legend config "${requested}".`);
+    }
+    return {
+      kind: requested,
+      config: resolveEffectiveLegendBlockConfig(
+        program,
+        requested,
+        program.guideConfigs.legend[requested]
+      )
+    };
+  }
   if (kinds.length !== 1) {
     throw new Error("Legend component requires one categorical legend config.");
   }
   const kind = kinds[0];
-  return { kind, config: program.guideConfigs.legend[kind] };
+  return {
+    kind,
+    config: resolveEffectiveLegendBlockConfig(
+      program,
+      kind,
+      program.guideConfigs.legend[kind]
+    )
+  };
 }
 
 function prefix(config) {
-  return config.kind === "series" ? "seriesLegend" : "colorLegend";
+  return `${config.kind}Legend`;
 }
 
 export function symbolGraphic(config, type) {
   const onlyDefault = config.symbol.layers.length === 1 &&
     ((config.kind === "series" && type === "line") ||
-      (config.kind === "color" && type === "swatch"));
+      (["color", "stroke"].includes(config.kind) && type === "swatch"));
   if (onlyDefault) return `${prefix(config)}Symbols`;
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
   return `${prefix(config)}Symbol${suffix}`;
@@ -54,364 +78,109 @@ 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);
+export function categoricalLegendLabels(config) {
+  return config.domain.map(value => resolveDisplayLabel(
+    value,
+    config.labelMap,
+    formatVisibleText
+  ));
 }
 
-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,
+          stroke: layer.stroke ?? (config.channels.includes("stroke")
+            ? appearance.strokes[index]
+            : appearance.colors[index]),
+          strokeWidth: layer.lineWidth, opacity: layer.opacity,
+          ...requestedStrokeDetails(layer, "Legend line symbol") } };
+      }
+      if (layer.type === "swatch") {
+        const details = requestedRectStyleDetails(layer, "Legend swatch symbol");
+        return materializeRectItem({ x: (width - layer.width) / 2, y: -layer.height / 2,
+          width: layer.width, height: layer.height, strokeWidth: layer.strokeWidth,
+          stroke: config.channels.includes("stroke")
+            ? appearance.strokes[index]
+            : layer.stroke,
+          opacity: layer.opacity,
+          ...requestedStrokeDetails(details, "Legend swatch symbol")
+        }, details.cornerRadius ?? 0);
+      }
+      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, opacity: layer.opacity,
+          ...requestedStrokeDetails(layer, "Legend point symbol") });
+      }
+      return { type: "circle", properties: { x: width / 2, y: 0, radius: layer.size,
+        stroke: config.channels.includes("stroke")
+          ? appearance.strokes[index]
+          : layer.stroke,
+        strokeWidth: layer.strokeWidth, opacity: layer.opacity,
+        ...requestedStrokeDetails(layer, "Legend point symbol") } };
+    });
+    return items.map((item, itemIndex) => {
+      const bounds = resolveConcreteGraphicBounds({
+        objects: { sample: item },
+        order: ["sample"]
+      }, "sample");
+      if (config.symbol.layers[itemIndex].type !== "line") return bounds;
+      const extent = config.symbol.layers[itemIndex].lineWidth / 2;
+      return {
+        ...bounds,
+        left: bounds.left - extent,
+        right: bounds.right + extent
+      };
+    }).reduce((result, bounds) => result === undefined
+      ? bounds
+      : {
+          left: Math.min(result.left, bounds.left),
+          right: Math.max(result.right, bounds.right),
+          top: Math.min(result.top, bounds.top),
+          bottom: Math.max(result.bottom, bounds.bottom)
+        }, undefined);
+  });
 }
 
 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, categoricalLegendLabels(config), {
+    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) {
   let colors = config.domain.map(() => DEFAULT_COLORS.mark);
+  let strokes = config.domain.map(() => "white");
   let dashes = config.domain.map(() => []);
   let shapes = config.domain.map(() => "circle");
   for (let index = 0; index < config.channels.length; index += 1) {
     const scale = program.resolvedScales[config.scales[index]];
     const values = mapOrdinalValues(config.domain, scale.domain, scale.range);
     if (config.channels[index] === "color") colors = values;
+    if (config.channels[index] === "stroke") strokes = values;
     if (config.channels[index] === "strokeDash") dashes = values;
     if (config.channels[index] === "shape") shapes = values;
   }
-  return { colors, dashes, shapes };
+  return { colors, strokes, dashes, shapes };
 }
 
-export { noOptions };
+export function noOptions(args, operation) {
+  validateOptionObject(args, ["kind"], operation);
+  if (args.kind !== undefined && !CATEGORICAL_KINDS.includes(args.kind)) {
+    throw new Error(`Unknown categorical legend kind "${args.kind}".`);
+  }
+}
 
 export function layerFor(config, type) {
   const layer = config.symbol.layers.find(item => item.type === type);

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",
@@ -85,10 +88,13 @@ function normalizeBorder(border) {
   return normalized;
 }
 
-export function normalizeOptions(args, kind) {
+export function normalizeOptions(args, kind, { internalSymbol = false } = {}) {
   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.");
@@ -175,11 +191,11 @@ export function normalizeOptions(args, kind) {
     offset,
     titlePosition,
     title: args.title,
-    symbol: normalizeRecipe(args.symbol, kind),
+    symbol: normalizeRecipe(args.symbol, kind, { internal: internalSymbol }),
     labels,
     titleStyle,
     itemGap,
-    bottomGrid,
+    layout,
     border: normalizeBorder(args.border)
   };
 }