ggaction 0.0.7 → 0.0.9

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

@@ -1,3 +1,6 @@
+import { action } from "../../../../core/action.js";
+import { resolveStoredSelection } from
+  "../../../../materialization/selection/state.js";
 import {
   createCategoricalLegend,
   createLegend,
@@ -12,6 +15,7 @@ import {
   rematerializeLegendLabels,
   rematerializeLegendTitle
 } from "./components.js";
+import { activeConfig, noOptions, symbolGraphic } from "./layout.js";
 import {
   createLegendSymbolLines,
   createLegendSymbolPoints,
@@ -21,9 +25,89 @@ import {
   rematerializeLegendSymbolPoints,
   rematerializeLegendSymbolSwatches,
   rematerializeLegendSymbols,
-  rematerializeLegendHighlights
+  rematerializeBasicLegendHighlights
 } from "./symbols.js";
 import { editLegend } from "../edit.js";
+import {
+  rematerializeHorizontalLegendLane,
+  rematerializeSideLegendLane
+} from "../lane.js";
+
+function exactLegendSelection(program, config, highlight) {
+  if (highlight.target !== config.target) return undefined;
+  const resolved = resolveStoredSelection(program, highlight.selection);
+  const selected = new Set(resolved.keys);
+  const groups = config.domain.map(value =>
+    resolved.items.filter(item => item.fields?.[config.field] === value)
+  );
+  if (
+    groups.some(group => group.length === 0) ||
+    resolved.items.some(item => !config.domain.includes(item.fields?.[config.field]))
+  ) return undefined;
+  const states = groups.map(group => {
+    const count = group.filter(item => selected.has(item.key)).length;
+    return count === 0 ? false : count === group.length ? true : undefined;
+  });
+  return states.includes(undefined) ? undefined : states;
+}
+
+function legendLayerStyle(layer, style) {
+  const properties = layer.type === "line"
+    ? ["stroke", "strokeWidth", "strokeDash", "opacity"]
+    : ["fill", "stroke", "strokeWidth", "opacity"];
+  return Object.fromEntries(
+    properties.flatMap(key => Object.hasOwn(style, key) ? [[key, style[key]]] : [])
+  );
+}
+
+function createLegendHighlightAction() {
+  return action(
+    {
+      op: "rematerializeLegendHighlights",
+      description: "Reflect exact categorical mark highlights in legend symbols."
+    },
+    function (args = {}) {
+      noOptions(args, "rematerializeLegendHighlights");
+      const hasCategorical =
+        this.guideConfigs.legend?.series !== undefined ||
+        this.guideConfigs.legend?.color !== undefined;
+      if (!hasCategorical) return this;
+      const { config } = activeConfig(this);
+      const highlights = Object.values(
+        this.materializationConfigs.highlights ?? {}
+      ).map(highlight => ({
+        highlight,
+        states: exactLegendSelection(this, config, highlight)
+      })).filter(entry => entry.states !== undefined);
+      if (highlights.length === 0) return this;
+
+      let next = this.rematerializeLegendSymbols();
+      for (const { highlight, states } of highlights) {
+        for (const layer of config.symbol.layers) {
+          const id = symbolGraphic(config, layer.type);
+          const graphic = next.graphicSpec.objects[id];
+          const selectedStyle = legendLayerStyle(layer, highlight.style);
+          const dimOpacity = highlight.dimOthers === false
+            ? undefined
+            : highlight.dimOthers.opacity;
+          next = next.editGraphics({
+            target: id,
+            property: "items",
+            value: graphic.items.map((child, index) => ({
+              type: child.type ?? graphic.type,
+              properties: states[index]
+                ? { ...child.properties, ...selectedStyle }
+                : dimOpacity === undefined
+                  ? child.properties
+                  : { ...child.properties, opacity: dimOpacity }
+            }))
+          });
+        }
+      }
+      return next;
+    }
+  );
+}
 
 export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.createLegend = createLegend;
@@ -33,7 +117,8 @@ export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.rematerializeLegendBackground = rematerializeLegendBackground;
   ProgramClass.prototype.createLegendSymbols = createLegendSymbols;
   ProgramClass.prototype.rematerializeLegendSymbols = rematerializeLegendSymbols;
-  ProgramClass.prototype.rematerializeLegendHighlights = rematerializeLegendHighlights;
+  ProgramClass.prototype.rematerializeLegendHighlights =
+    rematerializeBasicLegendHighlights;
   ProgramClass.prototype.createLegendSymbolLines = createLegendSymbolLines;
   ProgramClass.prototype.rematerializeLegendSymbolLines = rematerializeLegendSymbolLines;
   ProgramClass.prototype.createLegendSymbolPoints = createLegendSymbolPoints;
@@ -45,9 +130,15 @@ export function registerBasicCategoricalLegendActions(ProgramClass) {
   ProgramClass.prototype.createLegendTitle = createLegendTitle;
   ProgramClass.prototype.rematerializeLegendTitle = rematerializeLegendTitle;
   ProgramClass.prototype.rematerializeLegend = rematerializeLegend;
+  ProgramClass.prototype.rematerializeSideLegendLane =
+    rematerializeSideLegendLane;
+  ProgramClass.prototype.rematerializeHorizontalLegendLane =
+    rematerializeHorizontalLegendLane;
 }
 
 export function registerCategoricalLegendActions(ProgramClass) {
   registerBasicCategoricalLegendActions(ProgramClass);
+  ProgramClass.prototype.rematerializeLegendHighlights =
+    createLegendHighlightAction();
   ProgramClass.prototype.editLegend = editLegend;
 }

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

@@ -12,44 +12,6 @@ import {
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
-import { resolveStoredSelection } from "../../../../materialization/selection/state.js";
-
-function exactLegendSelection(program, config, highlight) {
-  if (highlight.target !== config.target) return undefined;
-  const resolved = resolveStoredSelection(program, highlight.selection);
-  const selected = new Set(resolved.keys);
-  const groups = config.domain.map(value =>
-    resolved.items.filter(item => item.fields?.[config.field] === value)
-  );
-  if (
-    groups.some(group => group.length === 0) ||
-    resolved.items.some(item => !config.domain.includes(item.fields?.[config.field]))
-  ) return undefined;
-  const states = groups.map(group => {
-    const count = group.filter(item => selected.has(item.key)).length;
-    return count === 0 ? false : count === group.length ? true : undefined;
-  });
-  return states.includes(undefined) ? undefined : states;
-}
-
-function legendLayerStyle(layer, style) {
-  if (layer.type === "line") {
-    return Object.fromEntries(
-      ["stroke", "strokeWidth", "strokeDash", "opacity"]
-        .flatMap(key => Object.hasOwn(style, key) ? [[key, style[key]]] : [])
-    );
-  }
-  if (layer.type === "swatch") {
-    return Object.fromEntries(
-      ["fill", "stroke", "strokeWidth", "opacity"]
-        .flatMap(key => Object.hasOwn(style, key) ? [[key, style[key]]] : [])
-    );
-  }
-  return Object.fromEntries(
-    ["fill", "stroke", "strokeWidth", "opacity"]
-      .flatMap(key => Object.hasOwn(style, key) ? [[key, style[key]]] : [])
-  );
-}
 
 function makeEditSymbol(type) {
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
@@ -232,49 +194,13 @@ export const rematerializeLegendSymbols = action(
   }
 );
 
-export const rematerializeLegendHighlights = action(
+export const rematerializeBasicLegendHighlights = action(
   {
     op: "rematerializeLegendHighlights",
     description: "Reflect exact categorical mark highlights in legend symbols."
   },
   function (args = {}) {
     noOptions(args, "rematerializeLegendHighlights");
-    const hasCategorical =
-      this.guideConfigs.legend?.series !== undefined ||
-      this.guideConfigs.legend?.color !== undefined;
-    if (!hasCategorical) return this;
-    const { config } = activeConfig(this);
-    const highlights = Object.values(
-      this.materializationConfigs.highlights ?? {}
-    ).map(highlight => ({
-      highlight,
-      states: exactLegendSelection(this, config, highlight)
-    })).filter(entry => entry.states !== undefined);
-    if (highlights.length === 0) return this;
-
-    let next = this.rematerializeLegendSymbols();
-    for (const { highlight, states } of highlights) {
-      for (const layer of config.symbol.layers) {
-        const id = symbolGraphic(config, layer.type);
-        const graphic = next.graphicSpec.objects[id];
-        const selectedStyle = legendLayerStyle(layer, highlight.style);
-        const dimOpacity = highlight.dimOthers === false
-          ? undefined
-          : highlight.dimOthers.opacity;
-        next = next.editGraphics({
-          target: id,
-          property: "items",
-          value: graphic.items.map((child, index) => ({
-            type: child.type ?? graphic.type,
-            properties: states[index]
-              ? { ...child.properties, ...selectedStyle }
-              : dimOpacity === undefined
-                ? child.properties
-                : { ...child.properties, opacity: dimOpacity }
-          }))
-        });
-      }
-    }
-    return next;
+    return this;
   }
 );

package/src/actions/guides/legends/continuous/common.js

@@ -105,12 +105,21 @@ export function normalizeContinuousLegend(args, kind) {
   }
   const offset = args.offset ?? 30;
   validateNonNegative(offset, "Legend offset");
-  const itemGap = args.itemGap ?? 28;
+  const titlePosition = args.titlePosition ?? "top";
+  if (!["top", "left"].includes(titlePosition)) {
+    throw new Error(`Unsupported legend titlePosition "${titlePosition}".`);
+  }
+  if (
+    titlePosition === "left" &&
+    (!["top", "bottom"].includes(position) || kind !== "opacity")
+  ) {
+    throw new Error(
+      "Only horizontal opacity legends support left titlePosition."
+    );
+  }
+  const itemGap = args.itemGap ?? (titlePosition === "left" ? 20 : 28);
   validatePositive(itemGap, "Legend itemGap");
   if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
-  if (args.titlePosition !== undefined && args.titlePosition !== "top") {
-    throw new Error("Continuous legends currently require top titlePosition.");
-  }
   if (kind === "gradient") {
     for (const key of ["symbol", "columns", "direction", "itemGap"]) {
       if (Object.hasOwn(args, key)) {
@@ -135,7 +144,9 @@ export function normalizeContinuousLegend(args, kind) {
     labels: normalizeLegendTextOptions(
       args.labels,
       "createLegend.labels",
-      DEFAULT_LABELS
+      titlePosition === "left"
+        ? { ...DEFAULT_LABELS, offset: 8 }
+        : DEFAULT_LABELS
     ),
     titleStyle: normalizeLegendTextOptions(
       args.titleStyle,
@@ -143,6 +154,7 @@ export function normalizeContinuousLegend(args, kind) {
       DEFAULT_TITLE
     ),
     itemGap,
+    titlePosition,
     border: normalizeBorder(args.border)
   };
 }

package/src/actions/guides/legends/continuous/gradient.js

@@ -39,12 +39,18 @@ function resolveGradientLayout(program, config, scale) {
       : config.align === "right" ? plot.x + plot.width - length
         : plot.x + (plot.width - length) / 2;
     y = config.position === "top"
-      ? plot.y - config.offset - thickness
-      : plot.y + plot.height + config.offset;
+      ? plot.y - config.offset - thickness - config.labels.offset -
+        config.labels.fontSize
+      : plot.y + plot.height + config.offset +
+        config.titleStyle.fontSize + 12;
   }
   const title = vertical
     ? { x, y: plot.y + 20, align: "left" }
-    : { x: x + length / 2, y: y - 20, align: "center" };
+    : {
+        x: x + length / 2,
+        y: y - 12 - config.titleStyle.fontSize / 2,
+        align: "center"
+      };
   const values = sampleContinuousValues(scale.domain, config.count);
   const fractions = values.map((_, index) => index / (values.length - 1));
   const labelOffset = config.labels.offset;
@@ -58,9 +64,7 @@ function resolveGradientLayout(program, config, scale) {
       }))
     : fractions.map(fraction => ({
         x: x + length * fraction,
-        y: config.position === "top"
-          ? y - labelOffset
-          : y + thickness + labelOffset,
+        y: y + thickness + labelOffset + config.labels.fontSize / 2,
         align: "center"
       }));
   const ticks = vertical
@@ -72,9 +76,9 @@ function resolveGradientLayout(program, config, scale) {
       }))
     : labels.map(label => ({
         x1: label.x,
-        y1: config.position === "top" ? y : y + thickness,
+        y1: y + thickness,
         x2: label.x,
-        y2: config.position === "top" ? y - 6 : y + thickness + 6
+        y2: y + thickness + 6
       }));
   assertLegendInsideCanvas([
     title,

package/src/actions/guides/legends/continuous/opacity.js

@@ -2,6 +2,7 @@ import { action } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import { validateKeys } from "../../../../core/validation.js";
 import { mapLinearValues } from "../../../../grammar/scales/index.js";
+import { measureTextWidth } from "../../../../core/textMetrics.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import {
   assertLegendInsideCanvas,
@@ -84,6 +85,7 @@ function resolveOpacityLayout(program, config, scale) {
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const values = sampleContinuousValues(scale.domain, config.count);
+  const texts = formatContinuousValues(values, scale.domain, "quantitative");
   const radius = config.symbol.radius;
   let symbols;
   let labels;
@@ -109,29 +111,81 @@ function resolveOpacityLayout(program, config, scale) {
       y: plot.y + 20,
       align: config.position === "right" ? "left" : "right"
     };
+  } else if (config.titlePosition === "left") {
+    const titleWidth = measureTextWidth(config.title, config.titleStyle);
+    const labelWidths = texts.map(text =>
+      measureTextWidth(text, config.labels)
+    );
+    const samplesWidth = labelWidths.reduce(
+      (sum, width) => sum + radius * 2 + config.labels.offset + width,
+      0
+    ) + config.itemGap * (values.length - 1);
+    const width = titleWidth + 20 + samplesWidth;
+    const startX = config.align === "left" ? plot.x
+      : config.align === "right" ? plot.x + plot.width - width
+        : plot.x + (plot.width - width) / 2;
+    const height = Math.max(
+      radius * 2,
+      config.labels.fontSize,
+      config.titleStyle.fontSize
+    );
+    const centerY = config.position === "top"
+      ? plot.y - config.offset - height / 2
+      : plot.y + plot.height + config.offset + height / 2;
+    title = { x: startX, y: centerY, align: "left" };
+    let cursor = startX + titleWidth + 20;
+    symbols = [];
+    labels = [];
+    for (let index = 0; index < values.length; index += 1) {
+      const symbolX = cursor + radius;
+      symbols.push({ x: symbolX, y: centerY });
+      const labelX = symbolX + radius + config.labels.offset;
+      labels.push({ x: labelX, y: centerY, align: "left" });
+      cursor = labelX + labelWidths[index] + config.itemGap;
+    }
   } else {
     const width = (values.length - 1) * Math.max(56, config.itemGap * 2);
     const startX = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
+    const titleHalf = config.titleStyle.fontSize / 2;
+    const labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
-      ? plot.y - config.offset - radius
-      : plot.y + plot.height + config.offset + radius;
+      ? plot.y - config.offset - config.labels.fontSize -
+        config.labels.offset - radius
+      : plot.y + plot.height + config.offset +
+        config.titleStyle.fontSize + 12 + radius;
     symbols = values.map((_, index) => ({
       x: startX + index * width / (values.length - 1),
       y
     }));
     labels = symbols.map(symbol => ({
       x: symbol.x,
-      y: config.position === "top"
-        ? symbol.y - radius - config.labels.offset
-        : symbol.y + radius + config.labels.offset,
+      y: symbol.y + radius + config.labels.offset + labelHalf,
       align: "center"
     }));
-    title = { x: startX + width / 2, y: y - 26, align: "center" };
+    title = {
+      x: startX + width / 2,
+      y: y - radius - 12 - titleHalf,
+      align: "center"
+    };
   }
+  const titleWidth = measureTextWidth(config.title, config.titleStyle);
+  const titleEdge = {
+    x: title.x + (title.align === "left" ? titleWidth : -titleWidth),
+    y: title.y
+  };
+  const labelEdges = labels.map((label, index) => {
+    const width = measureTextWidth(texts[index], config.labels);
+    return {
+      x: label.x + (label.align === "left"
+        ? width
+        : label.align === "right" ? -width : width / 2),
+      y: label.y
+    };
+  });
   assertLegendInsideCanvas(
-    [title, ...symbols, ...labels],
+    [title, titleEdge, ...symbols, ...labels, ...labelEdges],
     canvas,
     "Opacity legend layout"
   );
@@ -145,14 +199,17 @@ function resolveOpacityLayout(program, config, scale) {
       x: symbol.x - radius,
       y: symbol.y - radius
     })),
-    ...labels.map(label => ({
-      x: label.x + (
-        label.align === "left" ? 42 : label.align === "right" ? -42 : 0
-      ),
+    ...labels.map((label, index) => ({
+      x: label.x + (label.align === "left"
+        ? measureTextWidth(
+            texts[index],
+            config.labels
+          )
+        : label.align === "right" ? -42 : 0),
       y: label.y
     }))
   ], config.border, canvas, "Opacity legend");
-  return { values, symbols, labels, title, background };
+  return { values, texts, symbols, labels, title, background };
 }
 
 export const rematerializeOpacityLegend = action(
@@ -229,11 +286,7 @@ export const rematerializeOpacityLegend = action(
       .editGraphics({
         target: "opacityLegendLabels",
         property: "text",
-        value: formatContinuousValues(
-          layout.values,
-          scale.domain,
-          "quantitative"
-        )
+        value: layout.texts
       });
     next = editLegendBackground(
       next,

package/src/actions/guides/legends/edit.js

@@ -54,7 +54,7 @@ function editContinuous(program, kind, previous, args) {
     ? ["target", "position", "align", "offset", "title", "labels",
       "titleStyle", "border", "count", "gradient"]
     : ["target", "position", "align", "offset", "title", "symbol", "labels",
-      "titleStyle", "itemGap", "border", "count"];
+      "titleStyle", "titlePosition", "itemGap", "border", "count"];
   for (const key of Object.keys(args)) {
     if (!allowed.includes(key)) throw new Error(`${kind} legend does not accept ${key}.`);
   }
@@ -69,18 +69,25 @@ function editContinuous(program, kind, previous, args) {
   const title = titleMode === "auto"
     ? inferred
     : typeof titleMode === "string" ? titleMode : previous.title;
+  const titlePosition = args.titlePosition ?? previous.titlePosition;
+  const enteringInline = kind === "opacity" &&
+    titlePosition === "left" && previous.titlePosition !== "left";
+  const labels = mergeObject(previous.labels, args.labels);
   const normalized = normalizeContinuousLegend({
     target: previous.target,
     position: args.position ?? previous.position,
     align: args.align ?? previous.align,
     offset: args.offset ?? previous.offset,
     count: args.count ?? previous.count,
+    titlePosition,
     title,
-    labels: mergeObject(previous.labels, args.labels),
+    labels: enteringInline && args.labels?.offset === undefined
+      ? { ...labels, offset: 8 }
+      : labels,
     titleStyle: mergeObject(previous.titleStyle, args.titleStyle),
     border: mergeBorder(previous.border, args.border),
     ...(kind === "opacity" ? {
-      itemGap: args.itemGap ?? previous.itemGap,
+      itemGap: args.itemGap ?? (enteringInline ? 20 : previous.itemGap),
       symbol: args.symbol ?? previous.symbol
     } : {})
   }, kind);
@@ -112,9 +119,7 @@ function editContinuous(program, kind, previous, args) {
     before: kind === "gradient" ? "colorGradientStrips" : "opacityLegendSymbols"
   });
   next = reconcileGraphic(next, `${prefix}Title`, titleVisible, { type: "text" });
-  return kind === "gradient"
-    ? next.rematerializeGradientLegend()
-    : next.rematerializeOpacityLegend();
+  return next.rematerializeLegend();
 }
 
 function editInterval(program, previous, args) {
@@ -165,7 +170,7 @@ function editInterval(program, previous, args) {
   next = reconcileGraphic(next, "colorLegendTitle", titleVisible, {
     type: "text"
   });
-  return next.rematerializeIntervalLegend();
+  return next.rematerializeLegend();
 }
 
 function editStrokeWidth(program, previous, args) {
@@ -220,7 +225,7 @@ function editStrokeWidth(program, previous, args) {
   next = reconcileGraphic(next, "strokeWidthLegendTitle", titleVisible, {
     type: "text"
   });
-  return next.rematerializeStrokeWidthLegend();
+  return next.rematerializeLegend();
 }
 
 function categoricalSymbolIds(config) {