ggaction 0.0.12 → 0.0.15

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,6 +33,102 @@ 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, kind) {
+  if (requested !== undefined && requested !== "auto") return requested;
+  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) {
   return kind === "series"
@@ -39,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 = {
@@ -71,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,
@@ -84,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.');
@@ -104,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

@@ -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,
@@ -14,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) {
@@ -41,7 +47,8 @@ export function resolveTarget(program, requested) {
 
 export const sameValues = sameOrderedValues;
 
-export function resolveLegendKind(layer, requestedChannels) {
+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" &&
@@ -74,13 +81,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 ?? CHANNELS.filter(
+    channel => layer.encoding?.[channel]?.scale !== undefined
+  );
+  const kind = resolveLegendKind(layer, channels);
   if (
     !Array.isArray(channels) ||
     channels.length === 0 ||
@@ -91,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 => {
@@ -109,13 +114,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))
   };
 }
 
@@ -128,11 +142,12 @@ 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,
     channels,
-    config.inferredTitle === true ? undefined : guide.title
+    config.inferredTitle === true ? undefined : guide.title,
+    guide.order
   );
 }

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

@@ -9,9 +9,20 @@ import {
   symbolGraphic,
   symbolWidth
 } from "./layout.js";
-import { resolveLegendGraphicPlacement } from
-  "../../../../materialization/graphicHierarchy.js";
+import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
+import {
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
+import { replaceGraphicItems } from "../../../primitives/editGraphics.js";
+
+function applyLayerOpacity(program, id, opacity) {
+  return opacity === undefined
+    ? program
+    : program.editGraphics({ target: id, property: "opacity", value: opacity });
+}
 
 function makeEditSymbol(type) {
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
@@ -20,20 +31,23 @@ function makeEditSymbol(type) {
     { op, description: `Rematerialize categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
+      const { config } = activeConfig(this, args.kind);
       const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       const dynamicPoint = type === "point" && config.channels.includes("shape");
-      const expected = dynamicPoint
+      const styledSwatch = type === "swatch" && Object.hasOwn(layer, "cornerRadius");
+      const expected = dynamicPoint || styledSwatch
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
-      if (this.graphicSpec.objects[id]?.type !== expected) {
+      const actual = this.graphicSpec.objects[id]?.type;
+      const compatibleStyledSwatch = styledSwatch && ["rect", "collection"].includes(actual);
+      if (actual !== expected && !compatibleStyledSwatch) {
         throw new Error(`${op} requires existing ${type} symbols.`);
       }
       const layout = resolveLayout(this, config);
       const appearance = resolveAppearance(this, config);
       let next = this;
-      if (!dynamicPoint) {
+      if (!dynamicPoint && !styledSwatch) {
         next = next.editGraphics({
           target: id,
           property: "length",
@@ -44,7 +58,7 @@ function makeEditSymbol(type) {
         const x1 = layout.symbolX.map(
           value => value + (symbolWidth(config) - layer.length) / 2
         );
-        return next
+        next = next
           .editGraphics({ target: id, property: "x1", value: x1 })
           .editGraphics({ target: id, property: "y1", value: layout.itemY })
           .editGraphics({
@@ -53,9 +67,21 @@ function makeEditSymbol(type) {
             value: x1.map(value => value + layer.length)
           })
           .editGraphics({ target: id, property: "y2", value: layout.itemY })
-          .editGraphics({ target: id, property: "stroke", value: appearance.colors })
+          .editGraphics({
+            target: id,
+            property: "stroke",
+            value: layer.stroke ?? (config.channels.includes("stroke")
+              ? appearance.strokes
+              : appearance.colors)
+          })
           .editGraphics({ target: id, property: "strokeWidth", value: layer.lineWidth })
           .editGraphics({ target: id, property: "strokeDash", value: appearance.dashes });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend line symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       if (type === "point") {
         const x = layout.symbolX.map(value => value + symbolWidth(config) / 2);
@@ -68,8 +94,12 @@ function makeEditSymbol(type) {
               y: layout.itemY[index],
               area: Math.PI * layer.size ** 2,
               fill,
-              stroke: layer.stroke,
-              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 next.editGraphics({
@@ -78,7 +108,7 @@ function makeEditSymbol(type) {
             value: items
           });
         }
-        return next
+        next = next
           .editGraphics({ target: id, property: "x", value: x })
           .editGraphics({ target: id, property: "y", value: layout.itemY })
           .editGraphics({ target: id, property: "radius", value: layer.size })
@@ -87,24 +117,47 @@ function makeEditSymbol(type) {
             property: "fill",
             value: layer.fill ?? appearance.colors
           })
-          .editGraphics({ target: id, property: "stroke", value: layer.stroke })
+          .editGraphics({
+            target: id,
+            property: "stroke",
+            value: config.channels.includes("stroke")
+              ? appearance.strokes
+              : layer.stroke
+          })
           .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend point symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       const x = layout.symbolX.map(
         value => value + (symbolWidth(config) - layer.width) / 2
       );
-      return next
-        .editGraphics({ target: id, property: "x", value: x })
-        .editGraphics({
-          target: id,
-          property: "y",
-          value: layout.itemY.map(value => value - layer.height / 2)
-        })
-        .editGraphics({ target: id, property: "width", value: layer.width })
-        .editGraphics({ target: id, property: "height", value: layer.height })
-        .editGraphics({ target: id, property: "fill", value: appearance.colors })
-        .editGraphics({ target: id, property: "stroke", value: layer.stroke })
-        .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+      const details = requestedRectStyleDetails(layer, "Legend swatch symbol");
+      const fills = layer.fill === undefined
+        ? appearance.colors
+        : config.domain.map(() => layer.fill);
+      const strokes = config.channels.includes("stroke")
+        ? appearance.strokes
+        : config.domain.map(() => layer.stroke);
+      return replaceGraphicItems(
+        next,
+        id,
+        "rect",
+        config.domain.map((_, index) => materializeRectItem({
+          x: x[index],
+          y: layout.itemY[index] - layer.height / 2,
+          width: layer.width,
+          height: layer.height,
+          fill: fills[index],
+          stroke: strokes[index],
+          strokeWidth: layer.strokeWidth,
+          ...(layer.opacity === undefined ? {} : { opacity: layer.opacity }),
+          ...requestedStrokeDetails(details, "Legend swatch symbol")
+        }, details.cornerRadius ?? 0))
+      );
     }
   );
 }
@@ -116,20 +169,21 @@ function makeCreateSymbol(type, edit) {
     { op, description: `Create categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
-      layerFor(config, type);
+      const { config } = activeConfig(this, args.kind);
+      const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       if (this.graphicSpec.objects[id] !== undefined) {
         throw new Error(`${op} requires missing ${type} symbols.`);
       }
-      const graphicType = type === "point" && config.channels.includes("shape")
+      const graphicType = type === "point" && config.channels.includes("shape") ||
+        type === "swatch" && (layer.cornerRadius ?? 0) > 0
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
       return this
         .createGraphics({
           id,
           type: graphicType,
-          ...resolveLegendGraphicPlacement(this),
+          ...resolveCategoricalLegendPlacement(this),
           ...(this.graphicSpec.objects[graphic(config, "Labels")] === undefined
             ? {}
             : { before: graphic(config, "Labels") }),
@@ -137,7 +191,7 @@ function makeCreateSymbol(type, edit) {
             ? {}
             : { length: config.domain.length })
         })
-        [edit]();
+        [edit]({ kind: config.kind });
     }
   );
 }
@@ -162,7 +216,7 @@ export const createLegendSymbols = action(
   { op: "createLegendSymbols", description: "Create layered legend symbols." },
   function (args = {}) {
     noOptions(args, "createLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -170,7 +224,7 @@ export const createLegendSymbols = action(
         point: "createLegendSymbolPoints",
         swatch: "createLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }
@@ -180,7 +234,7 @@ export const rematerializeLegendSymbols = action(
   { op: "rematerializeLegendSymbols", description: "Rematerialize layered legend symbols." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -188,7 +242,7 @@ export const rematerializeLegendSymbols = action(
         point: "rematerializeLegendSymbolPoints",
         swatch: "rematerializeLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }