ggaction 0.0.13 → 0.0.15

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

@@ -25,9 +25,11 @@ import { findLayer } from "../../../../selectors/layers.js";
 import { isOpacityLegendLayer } from "../../../../materialization/legends.js";
 import { findCanvasGraphic } from
   "../../../../materialization/graphicHierarchy.js";
+import { normalizeLegendSampling } from "../sampling.js";
 
 const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title", "count",
+  "values",
   "gradient", "symbol", "labels", "titleStyle", "itemGap", "border",
   "direction", "columns", "titlePosition"
 ];
@@ -129,13 +131,24 @@ export function normalizeContinuousLegend(args, kind) {
   if (["left", "right"].includes(position) && align !== "center") {
     throw new Error("Side continuous legends require center alignment.");
   }
-  const count = args.count ?? 5;
-  if (!Number.isInteger(count) || count < 2) {
-    throw new RangeError(
-      "Continuous legend count must be an integer of at least 2."
-    );
+  if (kind === "gradient" && Object.hasOwn(args, "values")) {
+    throw new Error("Gradient legends do not support exact sample values.");
+  }
+  const sampling = kind === "opacity"
+    ? normalizeLegendSampling(args, {
+        operation: "create",
+        label: "Opacity legend"
+      })
+    : undefined;
+  const count = kind === "gradient" ? args.count ?? 5 : undefined;
+  if (kind === "gradient") {
+    if (!Number.isInteger(count) || count < 2) {
+      throw new RangeError(
+        "Continuous legend count must be an integer of at least 2."
+      );
+    }
+    validateGeneratedItemLimit(count, "Continuous legend count");
   }
-  validateGeneratedItemLimit(count, "Continuous legend count");
   const offset = args.offset ?? 30;
   validateNonNegative(offset, "Legend offset");
   const titlePosition = args.titlePosition ?? "top";
@@ -171,7 +184,7 @@ export function normalizeContinuousLegend(args, kind) {
     position,
     align,
     offset,
-    count,
+    ...(kind === "gradient" ? { count } : { sampling }),
     title: args.title,
     inferredTitle: args.title === undefined,
     labels: normalizeLegendTextOptions(
@@ -218,18 +231,23 @@ export function resolveContinuousLegendLayer(program, requested, channel) {
   return layer;
 }
 
-export function resolveContinuousColorLayer(program, requested) {
+export function resolveContinuousColorLayer(program, requested, channel = "color") {
   const layer = selectLegendLayer(
     program,
     requested,
-    candidate => ["point", "bar", "rect"].includes(candidate.mark?.type) &&
-      candidate.encoding?.color?.scale !== undefined
+    candidate => (channel === "stroke"
+      ? ["point", "line", "area", "bar", "rect", "arc", "rule", "tick"]
+      : ["point", "bar", "rect"]
+    ).includes(candidate.mark?.type) &&
+      candidate.encoding?.[channel]?.scale !== undefined
   );
   if (layer === undefined) {
     throw new Error(
       requested === undefined
-        ? "color legend requires one eligible point, bar, or rect mark."
-        : `Unknown color legend target "${requested}".`
+        ? channel === "color"
+          ? "color legend requires one eligible point, bar, or rect mark."
+          : "stroke legend requires one eligible mark."
+        : `Unknown ${channel} legend target "${requested}".`
     );
   }
   return layer;

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

@@ -20,24 +20,26 @@ import {
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 export const DEFAULT_GRADIENT_SIZE = Object.freeze({ length: 120, thickness: 12 });
 
 const GRADIENT_OPTIONS = Object.freeze(["length", "thickness"]);
 
-function resolveGradientLayout(program, config, scale) {
+export function resolveGradientLayout(program, config, scale) {
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const length = config.gradient.length;
   const thickness = config.gradient.thickness;
+  const titleGap = config.blockGap ?? 12;
   let x;
   let y;
   if (config.position === "right") {
     x = plot.x + plot.width + config.offset;
-    y = plot.y + 46;
+    y = plot.y + 46 + titleGap - 12;
   } else if (config.position === "left") {
     x = plot.x - config.offset - thickness;
-    y = plot.y + 46;
+    y = plot.y + 46 + titleGap - 12;
   } else {
     x = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - length
@@ -46,13 +48,13 @@ function resolveGradientLayout(program, config, scale) {
       ? plot.y - config.offset - thickness - config.labels.offset -
         config.labels.fontSize
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12);
+        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + titleGap);
   }
   const title = vertical
     ? { x, y: plot.y + 20, align: "left" }
     : {
         x: x + length / 2,
-        y: y - 12 - config.titleStyle.fontSize / 2,
+        y: y - titleGap - config.titleStyle.fontSize / 2,
         align: "center"
       };
   const values = [...sampleContinuousValues(scale.domain, config.count)];
@@ -172,7 +174,8 @@ export const rematerializeGradientLegend = action(
     if (stored === undefined) {
       throw new Error("Gradient legend requires stored configuration.");
     }
-    const { scale, encoding, config } = resolveGradientConfig(this, stored);
+    const { scale, encoding, config: currentConfig } = resolveGradientConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "gradient", currentConfig);
     const layout = resolveGradientLayout(this, config, scale);
     const stripCount = 60;
     const stripSize = layout.length / stripCount;
@@ -202,7 +205,7 @@ export const rematerializeGradientLegend = action(
         property: "guide.legend.color.title",
         value: config.title
       })
-      ._withLegendConfig("gradient", config)
+      ._withLegendConfig("gradient", currentConfig)
       .editGraphics({
         target: "colorGradientStrips",
         property: "length",

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

@@ -5,6 +5,7 @@ import {
   removeOpacityLegend
 } from "./opacity.js";
 import { createIntervalLegend, rematerializeIntervalLegend } from "./interval.js";
+import { registerStrokeColorLegendActions } from "./stroke.js";
 
 export { createGradientLegend, rematerializeGradientLegend } from "./gradient.js";
 export {
@@ -20,6 +21,7 @@ export function registerContinuousLegendActions(ProgramClass) {
   ProgramClass.prototype.rematerializeOpacityLegend = rematerializeOpacityLegend;
   ProgramClass.prototype.removeOpacityLegend = removeOpacityLegend;
   registerIntervalLegendActions(ProgramClass);
+  registerStrokeColorLegendActions(ProgramClass);
 }
 
 export function registerGradientLegendActions(ProgramClass) {

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

@@ -26,6 +26,7 @@ import {
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title",
@@ -133,12 +134,13 @@ export const rematerializeIntervalLegend = /* @__PURE__ */ action(
     if (stored === undefined) {
       throw new Error("Interval legend requires stored configuration.");
     }
-    const { encoding, scale, config } = resolveIntervalConfig(this, stored);
+    const { encoding, scale, config: currentConfig } = resolveIntervalConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "interval", currentConfig);
     const layout = resolveIntervalLayout(this, config, scale);
     let next = editGraphicProperties(this
       .editSemantic({ property: "guide.legend.color.scale", value: encoding.scale })
       .editSemantic({ property: "guide.legend.color.title", value: config.title })
-      ._withLegendConfig("interval", config), "colorLegendSymbols", {
+      ._withLegendConfig("interval", currentConfig), "colorLegendSymbols", {
       length: scale.range.length,
       x: layout.symbolX,
       y: layout.itemY.map(value => value - config.symbol.height / 2),
@@ -146,7 +148,10 @@ export const rematerializeIntervalLegend = /* @__PURE__ */ action(
       height: config.symbol.height,
       fill: scale.range,
       stroke: config.symbol.stroke,
-      strokeWidth: config.symbol.strokeWidth
+      strokeWidth: config.symbol.strokeWidth,
+      ...(config.blockSymbol?.opacity === undefined
+        ? {}
+        : { opacity: config.blockSymbol.opacity })
     });
     next = editGraphicProperties(next, "colorLegendLabels", {
       length: layout.labels.length,

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

@@ -14,13 +14,14 @@ import {
   resolveContinuousLegendLayer,
   resolveLegendBackgroundFromBounds,
   resolveLegendTextBounds,
-  sampleContinuousValues,
   styleContinuousText,
   validateNonNegative,
   validatePositive
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveLegendSampleValues } from "../sampling.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 const SYMBOL_OPTIONS = Object.freeze([
   "type", "radius", "fill", "stroke", "strokeWidth"
@@ -85,7 +86,7 @@ function resolveOpacityConfig(program, config) {
 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 values = resolveLegendSampleValues(config, scale, "Opacity legend");
   const texts = formatContinuousValues(
     values,
     scale.domain,
@@ -166,8 +167,9 @@ function resolveOpacityLayout(program, config, scale) {
         config.labels.offset - symbolExtent
       : plot.y + plot.height + config.offset +
         (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12) + symbolExtent;
+    const samplePitch = values.length === 1 ? 0 : width / (values.length - 1);
     symbols = values.map((_, index) => ({
-      x: startX + index * width / (values.length - 1),
+      x: startX + index * samplePitch,
       y
     }));
     labels = symbols.map(symbol => ({
@@ -221,7 +223,8 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
     if (stored === undefined) {
       throw new Error("Opacity legend requires stored configuration.");
     }
-    const { encoding, scale, config } = resolveOpacityConfig(this, stored);
+    const { encoding, scale, config: currentConfig } = resolveOpacityConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "opacity", currentConfig);
     const layout = resolveOpacityLayout(this, config, scale);
     const opacities = mapLinearValues(layout.values, scale.domain, scale.range, {
       clamp: scale.clamp ?? false
@@ -235,7 +238,7 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
         property: "guide.legend.opacity.title",
         value: config.title
       })
-      ._withLegendConfig("opacity", config)
+      ._withLegendConfig("opacity", currentConfig)
       .editGraphics({
         target: "opacityLegendSymbols",
         property: "length",