ggaction 0.0.10 → 0.0.12

package/src/actions/guides/grids/resolve.js

@@ -1,5 +1,6 @@
 import { validateUserId } from "../../../core/identifiers.js";
 import {
+  validateGeneratedItemLimit,
   validateOptionObject,
   validateNonEmptyString,
   validateNonNegativeFinite
@@ -58,12 +59,18 @@ function validateStrokeDash(value) {
 
 export function validateGridCreateArgs(args, operation) {
   validateOptionObject(args, GRID_OPTIONS, operation);
+  if (Array.isArray(args.values)) {
+    validateGeneratedItemLimit(args.values.length, "Grid value count");
+  }
   if (Object.hasOwn(args, "count") && Object.hasOwn(args, "values")) {
     throw new Error(`${operation} cannot use count and values together.`);
   }
   if (Object.hasOwn(args, "count") && (!Number.isInteger(args.count) || args.count <= 0)) {
     throw new RangeError("Grid count must be a positive integer.");
   }
+  if (Number.isInteger(args.count)) {
+    validateGeneratedItemLimit(args.count, "Grid count");
+  }
   if (Object.hasOwn(args, "values") && (
     !Array.isArray(args.values) ||
     args.values.length === 0 ||
@@ -84,6 +91,9 @@ export function validateGridEditArgs(args, operation) {
   validateOptionObject(args, GRID_EDIT_OPTIONS, operation, {
     allowEmpty: false
   });
+  if (Array.isArray(args.values)) {
+    validateGeneratedItemLimit(args.values.length, "Grid value count");
+  }
   if (Object.hasOwn(args, "count") && Object.hasOwn(args, "values")) {
     throw new Error(`${operation} cannot use count and values together.`);
   }
@@ -92,6 +102,9 @@ export function validateGridEditArgs(args, operation) {
   )) {
     throw new RangeError("Grid count must be a positive integer.");
   }
+  if (Number.isInteger(args.count)) {
+    validateGeneratedItemLimit(args.count, "Grid count");
+  }
   if (Object.hasOwn(args, "values") && args.values !== "auto" && (
     !Array.isArray(args.values) ||
     args.values.length === 0 ||
@@ -235,6 +248,7 @@ export function resolveGridGeometry(program, config) {
     throw new Error("Grid materialization requires a continuous scale and Canvas bounds.");
   }
   const values = valuesFromTickConfig(program, config);
+  validateGeneratedItemLimit(values.length, "Grid value count");
   const low = Math.min(...scale.domain);
   const high = Math.max(...scale.domain);
   if (!values.every(value => value >= low && value <= high)) {

package/src/actions/guides/guides.js

@@ -8,6 +8,7 @@ import {
 import { findDataset } from "../../selectors/datasets.js";
 import { findUpstreamTransform } from
   "../../materialization/dataProvenance.js";
+import { sampleNumericRange } from "../../grammar/numeric.js";
 
 const OPTIONS = Object.freeze(["axes", "grid", "legend"]);
 
@@ -60,10 +61,7 @@ function inferAxesOptions(program, applicability) {
       inferred.x = {
         ...(inferred.x ?? {}),
         ticksAndLabels: {
-          values: Array.from(
-            { length: 6 },
-            (_, index) => low + (high - low) * index / 5
-          )
+          values: sampleNumericRange(low, high, 6, "Horizon axis domain")
         }
       };
     }

package/src/actions/guides/index.js

@@ -1,11 +1,11 @@
-import { registerGuideAxisActions } from "./axes/index.js";
+import { registerLegendActions } from "./legends/index.js";
 import { registerGuideCollectionActions } from "./guides.js";
 import { registerGridActions } from "./grids/index.js";
-import { registerLegendActions } from "./legends/index.js";
 import {
   registerPolarAxisActions,
   registerPolarGridActions
 } from "./polar/index.js";
+import { registerGuideAxisActions } from "./axes/index.js";
 
 export function registerGuideActions(ProgramClass) {
   registerGuideAxisActions(ProgramClass);

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

@@ -21,6 +21,40 @@ import {
   sameValues
 } from "./resolve.js";
 
+function finishLegend(program) {
+  return hasMultiLegendLane(program) ? program.rematerializeLegend() : program;
+}
+
+function requestedCandidate(program, target, candidates) {
+  if (target === undefined) {
+    return candidates.length === 1 ? candidates[0] : undefined;
+  }
+  const layer = findLayer(program, target);
+  return candidates.includes(layer) ? layer : undefined;
+}
+
+function createStandaloneLegend(program, args, kind) {
+  const { target, count, position, channels: _channels, ...unsupported } = args;
+  const label = kind === "size" ? "size" : "stroke-width";
+  const unsupportedKeys = Object.keys(unsupported);
+  if (unsupportedKeys.length > 0) {
+    throw new Error(
+      `Standalone ${label} legend does not support option "${unsupportedKeys[0]}".`
+    );
+  }
+  if (position !== undefined && position !== "right") {
+    throw new Error(
+      `Standalone ${label} legends currently require position "right".`
+    );
+  }
+  return finishLegend(program[kind === "size"
+    ? "createSizeLegend"
+    : "createStrokeWidthLegend"]({
+    ...(target === undefined ? {} : { target }),
+    ...(count === undefined ? {} : { count })
+  }));
+}
+
 export const rematerializeLegend = action(
   { op: "rematerializeLegend", description: "Rematerialize every existing legend component." },
   function (args = {}) {
@@ -207,27 +241,7 @@ export const createLegend = action(
         !hasNonSizeLegendCandidate)
     );
     if (explicitSize || inferredSize) {
-      const {
-        target,
-        count,
-        position,
-        channels: _channels,
-        ...unsupported
-      } = args;
-      const unsupportedKeys = Object.keys(unsupported);
-      if (unsupportedKeys.length > 0) {
-        throw new Error(
-          `Standalone size legend does not support option "${unsupportedKeys[0]}".`
-        );
-      }
-      if (position !== undefined && position !== "right") {
-        throw new Error('Standalone size legends currently require position "right".');
-      }
-      const next = this.createSizeLegend({
-        ...(target === undefined ? {} : { target }),
-        ...(count === undefined ? {} : { count })
-      });
-      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+      return createStandaloneLegend(this, args, "size");
     }
     const strokeWidthCandidates = this.semanticSpec.layers.filter(
       isStrokeWidthLegendLayer
@@ -248,23 +262,7 @@ export const createLegend = action(
         !hasOtherStrokeWidthLegendCandidate)
     );
     if (explicitStrokeWidth || inferredStrokeWidth) {
-      const { target, count, position, channels: _channels, ...unsupported } = args;
-      const unsupportedKeys = Object.keys(unsupported);
-      if (unsupportedKeys.length > 0) {
-        throw new Error(
-          `Standalone stroke-width legend does not support option "${unsupportedKeys[0]}".`
-        );
-      }
-      if (position !== undefined && position !== "right") {
-        throw new Error(
-          'Standalone stroke-width legends currently require position "right".'
-        );
-      }
-      const next = this.createStrokeWidthLegend({
-        ...(target === undefined ? {} : { target }),
-        ...(count === undefined ? {} : { count })
-      });
-      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+      return createStandaloneLegend(this, args, "strokeWidth");
     }
     const opacityCandidates = this.semanticSpec.layers.filter(layer =>
       layer.mark?.type === "point" && layer.encoding?.opacity?.scale !== undefined
@@ -279,8 +277,7 @@ export const createLegend = action(
       (channels === undefined && opacityCandidates.length === 1 &&
         !hasOtherLegendCandidate)
     ) {
-      const next = this.createOpacityLegend(args);
-      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+      return finishLegend(this.createOpacityLegend(args));
     }
     const continuousColorCandidates = this.semanticSpec.layers.filter(layer => {
       const encoding = ["point", "bar", "rect"].includes(layer.mark?.type)
@@ -289,41 +286,26 @@ export const createLegend = action(
       const scale = findSemanticScale(this, encoding?.scale);
       return scale?.type === "sequential";
     });
-    const continuousColor = args.target === undefined
-      ? continuousColorCandidates.length === 1
-        ? continuousColorCandidates[0]
-        : undefined
-      : (() => {
-          const layer = findLayer(this, args.target);
-          return continuousColorCandidates.includes(layer) ? layer : undefined;
-        })();
+    const continuousColor = requestedCandidate(
+      this, args.target, continuousColorCandidates
+    );
     if (
       (channels?.length === 1 && channels[0] === "color" && continuousColor) ||
       (channels === undefined && continuousColor)
     ) {
-      const next = this.createGradientLegend(args);
-      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+      return finishLegend(this.createGradientLegend(args));
     }
     const intervalColorCandidates = this.semanticSpec.layers.filter(layer => {
       const encoding = layer.mark?.type === "point" ? layer.encoding?.color : undefined;
       const scale = findSemanticScale(this, encoding?.scale);
       return ["quantize", "quantile", "threshold"].includes(scale?.type);
     });
-    const intervalColor = args.target === undefined
-      ? intervalColorCandidates.length === 1
-        ? intervalColorCandidates[0]
-        : undefined
-      : (() => {
-          const layer = findLayer(this, args.target);
-          return intervalColorCandidates.includes(layer) ? layer : undefined;
-        })();
     if (
       (channels?.length === 1 && channels[0] === "color" &&
         intervalColorCandidates.length > 0) ||
       (channels === undefined && intervalColorCandidates.length > 0)
     ) {
-      const next = this.createIntervalLegend(args);
-      return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+      return finishLegend(this.createIntervalLegend(args));
     }
     const wantsShape = channels?.includes("shape") === true;
     const pointCandidates = this.semanticSpec.layers.filter(layer =>
@@ -331,12 +313,7 @@ export const createLegend = action(
       layer.encoding?.shape?.scale !== undefined &&
       (wantsShape || layer.encoding?.color?.scale !== undefined)
     );
-    const requestedPoint = args.target === undefined
-      ? pointCandidates.length === 1 ? pointCandidates[0] : undefined
-      : (() => {
-          const layer = findLayer(this, args.target);
-          return pointCandidates.includes(layer) ? layer : undefined;
-        })();
+    const requestedPoint = requestedCandidate(this, args.target, pointCandidates);
     if (requestedPoint !== undefined) {
       const { count, ...categoricalArgs } = args;
       if (
@@ -399,8 +376,7 @@ export const createLegend = action(
       }
       return next;
     }
-    const next = this.createCategoricalLegend(args);
-    return hasMultiLegendLane(next) ? next.rematerializeLegend() : next;
+    return finishLegend(this.createCategoricalLegend(args));
   }
 );
 

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

@@ -1,4 +1,5 @@
 import { action } from "../../../../core/action.js";
+import { formatVisibleText } from "../../../../core/textMetrics.js";
 import { activeConfig, graphic, noOptions, resolveLayout } from "./layout.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
@@ -17,7 +18,11 @@ export const rematerializeLegendLabels = action(
       .editGraphics({ target: id, property: "length", value: config.domain.length })
       .editGraphics({ target: id, property: "x", value: layout.labelX })
       .editGraphics({ target: id, property: "y", value: layout.itemY })
-      .editGraphics({ target: id, property: "text", value: config.domain.map(String) })
+      .editGraphics({
+        target: id,
+        property: "text",
+        value: config.domain.map(formatVisibleText)
+      })
       .editGraphics({ target: id, property: "fill", value: config.labels.color })
       .editGraphics({ target: id, property: "fontSize", value: config.labels.fontSize })
       .editGraphics({ target: id, property: "fontFamily", value: config.labels.fontFamily })

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

@@ -1,4 +1,5 @@
 import { action } from "../../../../core/action.js";
+import { editLegend } from "../edit.js";
 import { resolveStoredSelection } from
   "../../../../materialization/selection/state.js";
 import {
@@ -15,7 +16,6 @@ import {
   rematerializeLegendLabels,
   rematerializeLegendTitle
 } from "./components.js";
-import { activeConfig, noOptions, symbolGraphic } from "./layout.js";
 import {
   createLegendSymbolLines,
   createLegendSymbolPoints,
@@ -27,7 +27,7 @@ import {
   rematerializeLegendSymbols,
   rematerializeBasicLegendHighlights
 } from "./symbols.js";
-import { editLegend } from "../edit.js";
+import { activeConfig, noOptions, symbolGraphic } from "./layout.js";
 import {
   rematerializeHorizontalLegendLane,
   rematerializeSideLegendLane