ggaction 0.0.9 → 0.0.11

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

@@ -1,26 +1,32 @@
 import { isPlainObject } from "../../../../core/immutable.js";
 import { noOptions } from "../../../../core/validation.js";
 import { mapOrdinalValues } from "../../../../grammar/scales/index.js";
-import { resolveGraphicBounds } from "../../../../layout/canvas.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
+} from "../continuous/common.js";
 import {
   alignLegendStart,
   measureLegendSymbolHeight,
   measureLegendTextWidth,
   resolveLegendGrid
 } from "../../../../layout/legend.js";
-import { findCanvasGraphic } from
-  "../../../../materialization/graphicHierarchy.js";
 
 export function activeConfig(program) {
-  const entries = ["series", "color"]
-    .filter(kind => program.guideConfigs.legend?.[kind] !== undefined)
-    .map(kind => [kind, program.guideConfigs.legend[kind]]);
-  if (entries.length !== 1) {
+  const kinds = ["series", "color"]
+    .filter(kind => program.guideConfigs.legend?.[kind] !== undefined);
+  if (kinds.length !== 1) {
     throw new Error("Legend component requires one categorical legend config.");
   }
-  return { kind: entries[0][0], config: entries[0][1] };
+  const kind = kinds[0];
+  return { kind, config: program.guideConfigs.legend[kind] };
 }
 
 function prefix(config) {
@@ -55,38 +61,43 @@ function leftGuideBoundary(program, bounds) {
   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 = Array.from(
-    { length: sizeConfig.count },
-    (_, index) => scale.domain[0] +
-      index / (sizeConfig.count - 1) * (scale.domain[1] - scale.domain[0])
-  );
-  const labels = values.map(value => String(+value.toPrecision(3)));
+  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 { scale, values, labels, maximumRadius };
+  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 = Math.max(
-    config.titleVisible === false ? 0 : String(config.title).length * 6,
-    ...config.domain.map(value =>
-      width + config.labels.offset + measureLegendTextWidth(value)
-    )
-  );
+  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
-    : Math.max(
-        String(sizeConfig.title).length * 6,
-        ...size.labels.map(label => 44 + measureLegendTextWidth(label))
-      );
+    : 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;
@@ -122,7 +133,7 @@ function resolveLeftLayout(program, bounds, canvas, config, width, count) {
     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.properties.height) {
+  if (blockTop < 0 || blockBottom > canvas.height) {
     throw new Error("Legend layout requires more vertical Canvas space.");
   }
   let background;
@@ -139,8 +150,8 @@ function resolveLeftLayout(program, bounds, canvas, config, width, count) {
     };
     if (
       background.x < 0 || background.y < 0 ||
-      background.x + background.width > canvas.properties.width ||
-      background.y + background.height > canvas.properties.height
+      background.x + background.width > canvas.width ||
+      background.y + background.height > canvas.height
     ) {
       throw new Error("Legend background requires more left-margin space.");
     }
@@ -155,7 +166,6 @@ function resolveLeftLayout(program, bounds, canvas, config, width, count) {
     blockTop,
     blockBottom,
     size: size === undefined ? undefined : {
-      ...size,
       titleX: start,
       titleY: sizeTitleY,
       itemY: sizeItemY,
@@ -165,122 +175,65 @@ function resolveLeftLayout(program, bounds, canvas, config, width, count) {
   };
 }
 
-function resolveTopLayout(program, bounds, canvas, config, width, count) {
+function resolveGridLayout(program, bounds, canvas, config, width, count, top) {
   const { cells, columnWidths, gridWidth, gridHeight, rowHeight } =
     resolveLegendGrid(config, width, count);
-  const titleWidth = config.title.length * 7;
-  const titleGap = config.titlePosition === "left" ? 20 : 12;
-  const totalWidth = config.titlePosition === "left"
+  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.properties.width) {
+  if (start < 0 || start + totalWidth > canvas.width) {
     throw new Error("Legend layout requires more horizontal Canvas space.");
   }
-  const blockBottom = bounds.y - config.offset;
-  const gridStart = config.titlePosition === "left"
+  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 = blockBottom - gridHeight;
-  const blockTop = config.titlePosition === "left"
-    ? Math.min(gridTop, blockBottom / 2 + gridTop / 2 - config.titleStyle.fontSize / 2)
-    : gridTop - titleGap - config.titleStyle.fontSize;
-  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.");
-  }
-  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 = config.titlePosition === "left"
-    ? start
-    : start + totalWidth / 2;
-  const titleY = config.titlePosition === "left"
-    ? gridTop + gridHeight / 2
-    : gridTop - titleGap - config.titleStyle.fontSize / 2;
-  let background;
-  if (config.border !== false) {
-    const x = start - config.border.padding;
-    const y = blockTop - config.border.padding;
-    const backgroundWidth = totalWidth + config.border.padding * 2;
-    const height = blockBottom - blockTop + config.border.padding * 2;
-    if (x < 0 || y < 0 || x + backgroundWidth > canvas.properties.width) {
-      throw new Error("Legend background requires more top or horizontal space.");
+  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.");
     }
-    background = { x, y, width: backgroundWidth, height };
-  }
-  return {
-    symbolX,
-    itemY,
-    labelX,
-    titleX,
-    titleY,
-    background,
-    blockTop,
-    blockBottom
-  };
-}
-
-function resolveBottomLayout(program, bounds, canvas, config, width, count) {
-  const { cells, columnWidths, gridWidth, gridHeight, rowHeight } =
-    resolveLegendGrid(config, width, count);
-  const titleWidth = config.title.length * 7;
-  const titleGap = config.titlePosition === "left" ? 20 : 12;
-  const totalWidth = config.titlePosition === "left"
-    ? titleWidth + titleGap + gridWidth
-    : Math.max(titleWidth, gridWidth);
-  const start = alignLegendStart(bounds, totalWidth, config.align);
-  if (start < 0 || start + totalWidth > canvas.properties.width) {
-    throw new Error("Legend layout requires more horizontal Canvas space.");
-  }
-
-  const blockTop = bounds.y + bounds.height + config.offset;
-  const gridStart = config.titlePosition === "left"
-    ? start + titleWidth + titleGap
-    : start + (totalWidth - gridWidth) / 2;
-  const gridTop = config.titlePosition === "left"
-    ? blockTop
-    : blockTop + config.titleStyle.fontSize + titleGap;
-  const blockBottom = gridTop + gridHeight;
-  const titleX = config.titlePosition === "left"
-    ? start
-    : start + totalWidth / 2;
-  const titleY = config.titlePosition === "left"
-    ? gridTop + gridHeight / 2
-    : blockTop + config.titleStyle.fontSize / 2;
-
-  const axisTitle = program.graphicSpec.objects.xAxisTitle;
-  const occupiedTop = config.border === false
-    ? blockTop
-    : blockTop - config.border.padding;
-  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.properties.height) {
-    throw new Error("Legend layout requires more bottom-margin space.");
   }
-
   const columnX = [];
   let cursor = gridStart;
   for (const columnWidth of columnWidths) {
@@ -292,6 +245,12 @@ function resolveBottomLayout(program, bounds, canvas, config, width, count) {
   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 = {
@@ -300,13 +259,10 @@ function resolveBottomLayout(program, bounds, canvas, config, width, count) {
       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.properties.width ||
-      background.y + background.height > canvas.properties.height
-    ) {
-      throw new Error("Legend background requires more bottom or horizontal space.");
+    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 {
@@ -322,16 +278,17 @@ function resolveBottomLayout(program, bounds, canvas, config, width, count) {
 }
 
 function resolveCompactBottomLayout(bounds, canvas, config, width, count) {
-  const labels = config.domain.map(String);
+  const labels = config.domain.map(formatVisibleText);
   const itemWidths = labels.map(
-    label => width + config.labels.offset + label.length * 7
+    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.properties.width - totalWidth) / 2
+    ? (canvas.width - totalWidth) / 2
     : alignLegendStart(bounds, totalWidth, config.align);
-  if (start < 0 || start + totalWidth > canvas.properties.width) {
+  if (start < 0 || start + totalWidth > canvas.width) {
     throw new Error("Legend layout requires more horizontal Canvas space.");
   }
   const symbolX = [];
@@ -342,9 +299,9 @@ function resolveCompactBottomLayout(bounds, canvas, config, width, count) {
     labelX.push(cursor + width + config.labels.offset);
     cursor += itemWidths[index] + config.itemGap;
   }
-  const itemY = Array(count).fill(canvas.properties.height - 28);
+  const itemY = Array(count).fill(canvas.height - 28);
   const titleX = start + totalWidth / 2;
-  const titleY = canvas.properties.height - 52;
+  const titleY = canvas.height - 52;
   if (titleY <= bounds.y + bounds.height) {
     throw new Error("Legend layout requires more bottom-margin space.");
   }
@@ -362,22 +319,24 @@ function resolveCompactBottomLayout(bounds, canvas, config, width, count) {
       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 };
 }
 
 export function resolveLayout(program, config) {
-  const bounds = resolveGraphicBounds(program);
-  const canvas = findCanvasGraphic(program);
-  if (
-    bounds === undefined ||
-    ![bounds.x, bounds.y, bounds.width, bounds.height].every(Number.isFinite) ||
-    canvas?.type !== "canvas" ||
-    !Number.isFinite(canvas.properties.width) ||
-    !Number.isFinite(canvas.properties.height)
-  ) {
-    throw new Error("Legend layout requires Canvas bounds, width, and height.");
-  }
+  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 width = symbolWidth(config);
@@ -390,23 +349,37 @@ export function resolveLayout(program, config) {
       (_, index) => bounds.y + 52 + index * config.itemGap
     );
     const labelX = symbolX.map(value => value + width + config.labels.offset);
-    if (labelX.some(value => value >= canvas.properties.width)) {
-      throw new Error("Legend layout requires more right-margin space.");
-    }
     const titleX = symbolX[0];
     const titleY = bounds.y + 20;
-    let background;
-    if (config.border !== false) {
-      const x = symbolX[0] - config.border.padding;
-      const y = bounds.y + 8;
-      const backgroundWidth =
-        canvas.properties.width - x - config.border.padding;
-      const height = itemY.at(-1) - y + config.border.padding;
-      if (backgroundWidth <= 0 || height <= 0) {
-        throw new Error("Legend background requires positive width and height.");
-      }
-      background = { x, y, width: backgroundWidth, height };
-    }
+    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 };
   }
 
@@ -415,13 +388,13 @@ export function resolveLayout(program, config) {
   }
 
   if (config.position === "top") {
-    return resolveTopLayout(program, bounds, canvas, config, width, count);
+    return resolveGridLayout(program, bounds, canvas, config, width, count, true);
   }
 
   if (config.bottomGrid !== true) {
     return resolveCompactBottomLayout(bounds, canvas, config, width, count);
   }
-  return resolveBottomLayout(program, bounds, canvas, config, width, count);
+  return resolveGridLayout(program, bounds, canvas, config, width, count, false);
 }
 
 export function resolveAppearance(program, config) {

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

@@ -99,6 +99,11 @@ export function normalizeRecipe(symbol, kind) {
     if (!Array.isArray(symbol.layers) || symbol.layers.length === 0) {
       throw new TypeError("Legend symbol layers must be a non-empty array.");
     }
+    if (symbol.layers.length > 3) {
+      throw new Error(
+        "Legend symbol recipe supports at most one layer per type."
+      );
+    }
     layers = symbol.layers.map(normalizeLayer);
   } else if (kind === "series") {
     validateKeys(symbol, ["length", "lineWidth"], "createLegend.symbol");

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

@@ -1,5 +1,8 @@
 import { validateUserId } from "../../../../core/identifiers.js";
-import { sameOrderedValues } from "../../../../core/validation.js";
+import {
+  sameOrderedValues,
+  validateGeneratedItemLimit
+} from "../../../../core/validation.js";
 import { CHANNELS } from "./options.js";
 import { nonEmptyString } from "./validation.js";
 import { findLayer } from "../../../../selectors/layers.js";
@@ -59,6 +62,10 @@ function resolveOrdinalScales(program, scaleIds) {
     if (!Array.isArray(concrete.domain) || concrete.domain.length === 0) {
       throw new Error(`Legend scale "${id}" requires a non-empty domain.`);
     }
+    validateGeneratedItemLimit(
+      concrete.domain.length,
+      "Categorical legend item count"
+    );
     return concrete;
   });
   if (scales.slice(1).some(scale => !sameValues(scale.domain, scales[0].domain))) {