ggaction 0.0.13 → 0.0.16

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

@@ -1,4 +1,4 @@
-import { noOptions } from "../../../../core/validation.js";
+import { validateOptionObject } from "../../../../core/validation.js";
 import { mapOrdinalValues } from "../../../../grammar/scales/index.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import { formatVisibleText } from "../../../../core/textMetrics.js";
@@ -10,25 +10,57 @@ import {
 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 {
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
+
+const CATEGORICAL_KINDS = Object.freeze(["series", "color", "stroke"]);
 
-export function activeConfig(program) {
-  const kinds = ["series", "color"]
+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}`;
@@ -46,6 +78,14 @@ export function symbolWidth(config) {
   }));
 }
 
+export function categoricalLegendLabels(config) {
+  return config.domain.map(value => resolveDisplayLabel(
+    value,
+    config.labelMap,
+    formatVisibleText
+  ));
+}
+
 function resolveSampleBounds(program, config, width) {
   const appearance = resolveAppearance(program, config);
   return config.domain.map((_, index) => {
@@ -53,21 +93,56 @@ function resolveSampleBounds(program, config, width) {
       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 } };
+          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") {
-        return { type: "rect", properties: { x: (width - layer.width) / 2, y: -layer.height / 2,
-          width: layer.width, height: layer.height, strokeWidth: layer.strokeWidth } };
+        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 });
+          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,
-        strokeWidth: layer.strokeWidth } };
+        stroke: config.channels.includes("stroke")
+          ? appearance.strokes[index]
+          : layer.stroke,
+        strokeWidth: layer.strokeWidth, opacity: layer.opacity,
+        ...requestedStrokeDetails(layer, "Legend point symbol") } };
     });
-    return resolveConcreteGraphicBounds({ objects: { sample: { type: "collection", items } }, order: ["sample"] }, "sample");
+    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);
   });
 }
 
@@ -75,9 +150,9 @@ export function resolveLayout(program, config) {
   const { plot, canvas } = resolveContinuousBounds(program,
     "Legend layout requires Canvas bounds, width, and height.");
   const width = symbolWidth(config);
-  const layout = resolveLegendItemLayout(plot, config, config.domain.map(formatVisibleText), {
+  const layout = resolveLegendItemLayout(plot, config, categoricalLegendLabels(config), {
     width, height: 0, itemBounds: resolveSampleBounds(program, config, width)
-  }, canvas);
+  }, canvas, program.materializationConfigs.textMetrics);
   assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Categorical legend layout", config);
   const background = resolveLegendBackgroundFromBounds(layout.bounds, config.border, canvas,
     "Categorical legend", config);
@@ -86,19 +161,26 @@ export function resolveLayout(program, config) {
 
 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

@@ -88,7 +88,7 @@ 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");
@@ -191,7 +191,7 @@ 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,

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

@@ -5,6 +5,15 @@ import {
   positive,
   validateKeys
 } from "./validation.js";
+import {
+  requestedRectStyleDetails,
+  RECT_STYLE_PROPERTIES
+} from "../../../../grammar/roundedRect.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../../grammar/strokeStyle.js";
+import { findLayerMatching } from "../../../../selectors/layers.js";
 
 const LAYER_OPTIONS = Object.freeze({
   line: Object.freeze(["type", "length", "lineWidth"]),
@@ -24,19 +33,101 @@ const LAYER_OPTIONS = Object.freeze({
     "strokeWidth"
   ])
 });
+const INTERNAL_LAYER_OPTIONS = Object.freeze({
+  line: Object.freeze([...LAYER_OPTIONS.line, ...STROKE_STYLE_PROPERTIES]),
+  point: Object.freeze([...LAYER_OPTIONS.point, ...STROKE_STYLE_PROPERTIES]),
+  swatch: Object.freeze([...LAYER_OPTIONS.swatch, ...RECT_STYLE_PROPERTIES])
+});
 
-export function resolveLegendSymbol(program, layer, channels, requested) {
+export function resolveLegendSymbol(program, layer, channels, requested, kind) {
   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 }
-  ] };
+  const config = program.markConfigs[layer.id] ?? {};
+  const bar = config.barAppearance ?? {};
+  const styleOwner = layer.mark.type === "bar" ? bar : config;
+  const strokeDetails = requestedStrokeDetails(styleOwner, "Legend source");
+  const rectDetails = ["bar", "rect"].includes(layer.mark.type)
+    ? requestedRectStyleDetails(styleOwner, "Legend source")
+    : strokeDetails;
+  if (channels?.length === 1 && channels[0] === "stroke") {
+    const strokeWidth = bar.strokeWidth ?? config.strokeWidth ?? ({
+      point: 1,
+      line: 2,
+      area: 1,
+      bar: 0.5,
+      rect: 1,
+      arc: 1,
+      rule: 2,
+      tick: 2
+    }[layer.mark.type] ?? 1);
+    if (["line", "rule", "tick"].includes(layer.mark.type)) {
+      return { layers: [{
+        type: "line",
+        length: 32,
+        lineWidth: strokeWidth,
+        ...strokeDetails
+      }] };
+    }
+    if (layer.mark.type === "point") {
+      return { layers: [{
+        type: "point",
+        size: 5,
+        fill: config.fill ?? "#4c78a8",
+        stroke: "white",
+        strokeWidth,
+        ...strokeDetails
+      }] };
+    }
+    return { layers: [{
+      type: "swatch",
+      width: 14,
+      height: 12,
+      stroke: "white",
+      strokeWidth,
+      ...rectDetails
+    }] };
+  }
+  if (layer.mark?.type === "point" && channels?.includes("shape")) {
+    const color = channels.includes("color") ? layer.encoding?.color : undefined;
+    const matchingLine = color?.scale === undefined
+      ? undefined
+      : findLayerMatching(program, candidate =>
+        candidate.mark?.type === "line" &&
+        candidate.encoding?.color?.field === color.field &&
+        candidate.encoding?.color?.scale === color.scale
+      );
+    const lineDetails = matchingLine === undefined
+      ? {}
+      : requestedStrokeDetails(
+          program.markConfigs[matchingLine.id] ?? {},
+          "Legend line source"
+        );
+    return { layers: [
+      ...(matchingLine !== undefined ? [{
+        type: "line",
+        length: 32,
+        lineWidth: 3,
+        ...lineDetails
+      }] : []),
+      {
+        type: "point",
+        size: Math.sqrt(64 / Math.PI),
+        stroke: "white",
+        strokeWidth: 0,
+        ...strokeDetails
+      }
+    ] };
+  }
+  if (Object.keys(rectDetails).length === 0) return undefined;
+  return kind === "series"
+    ? { layers: [{ type: "line", length: 32, lineWidth: 2, ...strokeDetails }] }
+    : { layers: [{
+        type: "swatch",
+        width: 14,
+        height: 12,
+        stroke: "white",
+        strokeWidth: 0.5,
+        ...rectDetails
+      }] };
 }
 
 function defaultRecipe(kind) {
@@ -53,20 +144,20 @@ function defaultRecipe(kind) {
       };
 }
 
-function normalizeLayer(layer) {
+function normalizeLayer(layer, internal) {
   if (!isPlainObject(layer) || !Object.hasOwn(LAYER_OPTIONS, layer.type)) {
     throw new Error("Legend symbol layer type must be line, point, or swatch.");
   }
   validateKeys(
     layer,
-    LAYER_OPTIONS[layer.type],
+    internal ? INTERNAL_LAYER_OPTIONS[layer.type] : LAYER_OPTIONS[layer.type],
     `createLegend.symbol.${layer.type}`
   );
   if (layer.type === "line") {
     const normalized = { length: 32, lineWidth: 2, ...layer };
     positive(normalized.length, "Legend line symbol length");
     nonNegative(normalized.lineWidth, "Legend line symbol lineWidth");
-    return normalized;
+    return { ...normalized, ...requestedStrokeDetails(normalized, "Legend line symbol") };
   }
   if (layer.type === "point") {
     const normalized = {
@@ -85,7 +176,7 @@ function normalizeLayer(layer) {
     if (normalized.fill !== undefined) {
       nonEmptyString(normalized.fill, "Legend point symbol fill");
     }
-    return normalized;
+    return { ...normalized, ...requestedStrokeDetails(normalized, "Legend point symbol") };
   }
   const normalized = {
     width: 14,
@@ -98,10 +189,10 @@ function normalizeLayer(layer) {
   positive(normalized.height, "Legend swatch height");
   nonEmptyString(normalized.stroke, "Legend swatch stroke");
   nonNegative(normalized.strokeWidth, "Legend swatch strokeWidth");
-  return normalized;
+  return { ...normalized, ...requestedRectStyleDetails(normalized, "Legend swatch symbol") };
 }
 
-export function normalizeRecipe(symbol, kind) {
+export function normalizeRecipe(symbol, kind, { internal = false } = {}) {
   if (symbol === undefined || symbol === "auto") return defaultRecipe(kind);
   if (!isPlainObject(symbol)) {
     throw new TypeError('createLegend.symbol must be "auto" or a plain object.');
@@ -118,17 +209,17 @@ export function normalizeRecipe(symbol, kind) {
         "Legend symbol recipe supports at most one layer per type."
       );
     }
-    layers = symbol.layers.map(normalizeLayer);
+    layers = symbol.layers.map(layer => normalizeLayer(layer, internal));
   } else if (kind === "series") {
     validateKeys(symbol, ["length", "lineWidth"], "createLegend.symbol");
-    layers = [normalizeLayer({ type: "line", ...symbol })];
+    layers = [normalizeLayer({ type: "line", ...symbol }, internal)];
   } else {
     validateKeys(
       symbol,
       ["width", "height", "stroke", "strokeWidth"],
       "createLegend.symbol"
     );
-    layers = [normalizeLayer({ type: "swatch", ...symbol })];
+    layers = [normalizeLayer({ type: "swatch", ...symbol }, internal)];
   }
 
   const types = layers.map(layer => layer.type);

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

@@ -17,8 +17,11 @@ function isCategoricalTarget(layer) {
       channel => layer.encoding?.[channel]?.scale !== undefined
     );
   }
-  return ["bar", "area", "arc", "rect"].includes(layer?.mark?.type) &&
-    layer.encoding?.color?.scale !== undefined;
+  return ["bar", "area", "arc", "rect", "rule", "tick"].includes(
+    layer?.mark?.type
+  ) && ["color", "stroke"].some(
+    channel => layer.encoding?.[channel]?.scale !== undefined
+  );
 }
 
 export function resolveTarget(program, requested) {
@@ -45,6 +48,7 @@ export function resolveTarget(program, requested) {
 export const sameValues = sameOrderedValues;
 
 function resolveLegendKind(layer, requestedChannels) {
+  if (sameValues(requestedChannels, ["stroke"])) return "stroke";
   if (["bar", "area", "arc", "rect"].includes(layer.mark.type)) return "color";
   if (
     layer.mark.type === "point" &&
@@ -78,9 +82,9 @@ function resolveOrdinalScales(program, scaleIds) {
 }
 
 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 channels = requestedChannels ?? CHANNELS.filter(
+    channel => layer.encoding?.[channel]?.scale !== undefined
+  );
   const kind = resolveLegendKind(layer, channels);
   if (
     !Array.isArray(channels) ||
@@ -92,8 +96,8 @@ export function resolveDefinition(program, layer, requestedChannels, requestedTi
       "Legend channels must be a non-empty unique color/strokeDash/shape array."
     );
   }
-  if (kind === "color" && !sameValues(channels, ["color"])) {
-    throw new Error("Color legends currently support only the color channel.");
+  if (["color", "stroke"].includes(kind) && !sameValues(channels, [kind])) {
+    throw new Error(`${kind} legends currently support only the ${kind} channel.`);
   }
 
   const encodings = channels.map(channel => {
@@ -138,7 +142,7 @@ export function resolveCurrentDefinition(program, config) {
   if (guide === undefined) {
     throw new Error("Legend rematerialization requires semantic guide state.");
   }
-  const channels = config.kind === "series" ? guide.channels : ["color"];
+  const channels = config.kind === "series" ? guide.channels : [config.kind];
   return resolveDefinition(
     program,
     layer,