ggaction 0.0.4 → 0.0.6

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

@@ -1,46 +1,140 @@
 import { action } from "../../../core/action.js";
 import { validateKeys } from "../../../core/validation.js";
-import { legendGraphicIds } from
+import { legendGraphicIds, legendResourcePolicy } from
   "../../../materialization/guides/resources.js";
+import { LEGEND_CHANNELS } from "../../../core/vocabulary.js";
 import { resolveLegendTarget } from "./target.js";
 
-const OPTIONS = Object.freeze(["target"]);
+const OPTIONS = Object.freeze(["target", "channels"]);
 
-const SEMANTIC_KIND = Object.freeze({
-  series: "series",
-  color: "color",
-  size: "size",
-  gradient: "color",
-  interval: "color",
-  opacity: "opacity"
-});
+function legendKindChannels(kind, config) {
+  if (["series", "color"].includes(kind)) return config.channels;
+  return {
+    size: ["size"],
+    gradient: ["color"],
+    interval: ["color"],
+    opacity: ["opacity"],
+    strokeWidth: ["strokeWidth"]
+  }[kind];
+}
+
+function validateRequestedChannels(channels) {
+  if (!Array.isArray(channels)) {
+    throw new TypeError("removeLegend channels must be an array.");
+  }
+  if (channels.length === 0) {
+    throw new Error("removeLegend channels must select at least one channel.");
+  }
+  const seen = new Set();
+  for (const channel of channels) {
+    if (!LEGEND_CHANNELS.includes(channel)) {
+      throw new Error(`Unsupported legend channel "${channel}".`);
+    }
+    if (seen.has(channel)) {
+      throw new Error(`removeLegend channels contains duplicate "${channel}".`);
+    }
+    seen.add(channel);
+  }
+}
+
+function resolveRequestedKinds(program, target, channels) {
+  validateRequestedChannels(channels);
+  const requested = new Set(channels);
+  const matched = new Set();
+  const kinds = [];
+  for (const [kind, config] of Object.entries(program.guideConfigs.legend ?? {})) {
+    if (config?.target !== target) continue;
+    const owned = legendKindChannels(kind, config);
+    const overlap = owned.filter(channel => requested.has(channel));
+    if (overlap.length > 0 && overlap.length !== owned.length) {
+      throw new Error(
+        `Legend channels ${owned.map(channel => `"${channel}"`).join(", ")} ` +
+        "belong to one combined block and must be removed together."
+      );
+    }
+    if (overlap.length === owned.length) {
+      kinds.push(kind);
+      for (const channel of owned) matched.add(channel);
+    }
+  }
+  const missing = channels.filter(channel => !matched.has(channel));
+  if (missing.length > 0) {
+    throw new Error(
+      `Legend target "${target}" has no complete block for channel "${missing[0]}".`
+    );
+  }
+  return kinds;
+}
+
+export function removeLegendKinds(program, kinds) {
+  const removed = new Set(kinds);
+  const retainedSemanticKinds = new Set(
+    Object.entries(program.guideConfigs.legend ?? {})
+      .filter(([kind]) => !removed.has(kind))
+      .map(([kind]) => legendResourcePolicy(kind).semanticKind)
+  );
+  const semanticKinds = new Set(
+    kinds.map(kind => legendResourcePolicy(kind).semanticKind)
+  );
+  let next = program;
+  for (const kind of semanticKinds) {
+    if (
+      !retainedSemanticKinds.has(kind) &&
+      next.semanticSpec.guides.legend?.[kind] !== undefined
+    ) {
+      next = next.editSemantic({
+        property: `guide.legend.${kind}`,
+        remove: true
+      });
+    }
+  }
+  for (const id of new Set(kinds.flatMap(legendGraphicIds))) {
+    if (next.graphicSpec.objects[id] !== undefined) {
+      next = next.editGraphics({ target: id, remove: true });
+    }
+  }
+  for (const kind of kinds) {
+    next = next._withoutMaterializationConfig(["guides", "legend", kind]);
+  }
+  return next;
+}
 
 export const removeLegend = action(
   { op: "removeLegend", description: "Remove every legend block owned by one mark." },
   function (args = {}) {
     validateKeys(args, OPTIONS, "removeLegend");
     const target = resolveLegendTarget(this, args.target, "removeLegend");
-    const kinds = Object.entries(this.guideConfigs.legend ?? {})
+    const targetKinds = Object.entries(this.guideConfigs.legend ?? {})
       .filter(([, config]) => config?.target === target)
       .map(([kind]) => kind);
-    const semanticKinds = new Set(kinds.map(kind => SEMANTIC_KIND[kind]));
-    let next = this;
-    for (const kind of semanticKinds) {
-      if (next.semanticSpec.guides.legend?.[kind] !== undefined) {
-        next = next.editSemantic({
-          property: `guide.legend.${kind}`,
-          remove: true
-        });
-      }
-    }
-    for (const id of new Set(kinds.flatMap(legendGraphicIds))) {
-      if (next.graphicSpec.objects[id] !== undefined) {
-        next = next.editGraphics({ target: id, remove: true });
-      }
-    }
-    for (const kind of kinds) {
-      next = next._withoutMaterializationConfig(["guides", "legend", kind]);
-    }
-    return next;
+    const kinds = args.channels === undefined
+      ? targetKinds
+      : resolveRequestedKinds(this, target, args.channels);
+    let next = removeLegendKinds(this, kinds);
+    const retainedKinds = Object.keys(next.guideConfigs.legend ?? {});
+    if (args.channels === undefined) {
+      const removedSemanticKinds = new Set(
+        kinds.map(kind => legendResourcePolicy(kind).semanticKind)
+      );
+      const hasSharedSemanticKind = retainedKinds.some(kind =>
+        removedSemanticKinds.has(legendResourcePolicy(kind).semanticKind)
+      );
+      return hasSharedSemanticKind ? next.rematerializeLegend() : next;
+    }
+    const remainingTargetKinds = targetKinds.filter(kind => !kinds.includes(kind));
+    const removedCategorical = kinds.some(kind => ["series", "color"].includes(kind));
+    if (
+      removedCategorical &&
+      remainingTargetKinds.includes("size") &&
+      next.guideConfigs.legend.size.inheritAppearance === true
+    ) {
+      next = next._withLegendConfig("size", {
+        ...next.guideConfigs.legend.size,
+        inheritAppearance: false
+      });
+    }
+    return retainedKinds.length === 0
+      ? next
+      : next.rematerializeLegend();
   }
 );

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

@@ -0,0 +1,198 @@
+import { action } from "../../../core/action.js";
+import { validateKeys } from "../../../core/validation.js";
+import { mapContinuousScaleValues } from "../../../grammar/scales/index.js";
+import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { resolveLegendGraphicPlacement } from
+  "../../../materialization/graphicHierarchy.js";
+import { findLayer } from "../../../selectors/layers.js";
+import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+  "../../../theme/defaults.js";
+
+const OPTIONS = Object.freeze(["target", "count"]);
+
+export const STROKE_WIDTH_LEGEND_LABELS = Object.freeze({
+  offset: 12,
+  color: DEFAULT_COLORS.text,
+  fontSize: 12,
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontWeight: "normal"
+});
+
+export const STROKE_WIDTH_LEGEND_TITLE_STYLE = Object.freeze({
+  color: DEFAULT_COLORS.strongText,
+  fontSize: 13,
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontWeight: 600
+});
+
+export function isStrokeWidthLegendLayer(layer) {
+  return ["line", "rule"].includes(layer?.mark?.type) &&
+    layer.encoding?.strokeWidth?.scale !== undefined;
+}
+
+function resolveLayer(program, requested) {
+  const candidates = program.semanticSpec.layers.filter(isStrokeWidthLegendLayer);
+  const layer = requested === undefined
+    ? candidates.length === 1 ? candidates[0] : undefined
+    : (() => {
+        const candidate = findLayer(program, requested);
+        return candidates.includes(candidate) ? candidate : undefined;
+      })();
+  if (layer === undefined) {
+    throw new Error(
+      requested === undefined
+        ? "Stroke-width legend requires one eligible line or rule mark or an explicit target."
+        : `Unknown stroke-width legend target "${requested}".`
+    );
+  }
+  return layer;
+}
+
+function requireScale(program, id) {
+  const scale = program.resolvedScales[id];
+  if (scale === undefined || !["linear", "log", "pow", "sqrt", "symlog"].includes(scale.type)) {
+    throw new Error(`Stroke-width legend requires resolved quantitative scale "${id}".`);
+  }
+  return scale;
+}
+
+function styleText(program, id, style) {
+  return program
+    .editGraphics({ target: id, property: "fill", value: style.color })
+    .editGraphics({ target: id, property: "fontSize", value: style.fontSize })
+    .editGraphics({ target: id, property: "fontFamily", value: style.fontFamily })
+    .editGraphics({ target: id, property: "fontWeight", value: style.fontWeight })
+    .editGraphics({ target: id, property: "textAlign", value: "left" })
+    .editGraphics({ target: id, property: "textBaseline", value: "middle" });
+}
+
+export const rematerializeStrokeWidthLegend = action(
+  {
+    op: "rematerializeStrokeWidthLegend",
+    description: "Rematerialize a quantitative stroke-width legend."
+  },
+  function (args = {}) {
+    validateKeys(args, [], "rematerializeStrokeWidthLegend");
+    const stored = this.guideConfigs.legend?.strokeWidth;
+    if (stored === undefined) {
+      throw new Error("Stroke-width legend requires stored configuration.");
+    }
+    const config = {
+      ...stored,
+      labels: stored.labels ?? { ...STROKE_WIDTH_LEGEND_LABELS },
+      titleStyle: stored.titleStyle ?? { ...STROKE_WIDTH_LEGEND_TITLE_STYLE },
+      titleVisible: stored.titleVisible !== false
+    };
+    const layer = findLayer(this, config.target);
+    const encoding = layer?.encoding?.strokeWidth;
+    if (encoding?.scale === undefined) {
+      throw new Error("Stroke-width legend target requires a strokeWidth encoding.");
+    }
+    const scale = requireScale(this, encoding.scale);
+    const plot = resolveGraphicBounds(this);
+    if (plot === undefined) {
+      throw new Error("Stroke-width legend requires resolved plot bounds.");
+    }
+    const values = Array.from(
+      { length: config.count },
+      (_, index) => scale.domain[0] +
+        index / (config.count - 1) * (scale.domain[1] - scale.domain[0])
+    );
+    const widths = mapContinuousScaleValues(values, scale);
+    const originX = plot.x + plot.width + 30;
+    const titleY = plot.y + 28;
+    const y = values.map((_, index) => titleY + 34 + index * 32);
+    const title = config.inferredTitle === true ? encoding.field : config.title;
+    let next = this
+      .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
+      .editSemantic({ property: "guide.legend.strokeWidth.title", value: title })
+      ._withLegendConfig("strokeWidth", {
+        ...config,
+        scale: encoding.scale,
+        title,
+        domain: scale.domain
+      })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "length", value: values.length })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "x1", value: values.map(() => originX) })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "x2", value: values.map(() => originX + 32) })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "y1", value: y })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "y2", value: y })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "stroke", value: DEFAULT_COLORS.mark })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "strokeWidth", value: widths })
+      .editGraphics({ target: "strokeWidthLegendLabels", property: "length", value: values.length })
+      .editGraphics({
+        target: "strokeWidthLegendLabels",
+        property: "x",
+        value: values.map(() => originX + 32 + config.labels.offset)
+      })
+      .editGraphics({ target: "strokeWidthLegendLabels", property: "y", value: y })
+      .editGraphics({
+        target: "strokeWidthLegendLabels",
+        property: "text",
+        value: values.map(value => String(+value.toPrecision(3)))
+      });
+    next = styleText(next, "strokeWidthLegendLabels", config.labels);
+    if (config.titleVisible === false) return next;
+    next = next
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "x", value: originX })
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "y", value: titleY })
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "text", value: title });
+    return styleText(next, "strokeWidthLegendTitle", config.titleStyle);
+  }
+);
+
+export const createStrokeWidthLegend = action(
+  {
+    op: "createStrokeWidthLegend",
+    description: "Create a quantitative stroke-width legend."
+  },
+  function (args = {}) {
+    validateKeys(args, OPTIONS, "createStrokeWidthLegend");
+    const layer = resolveLayer(this, args.target);
+    const encoding = layer.encoding.strokeWidth;
+    requireScale(this, encoding.scale);
+    const count = args.count ?? 5;
+    if (!Number.isInteger(count) || count < 2) {
+      throw new RangeError(
+        "Stroke-width legend count must be an integer of at least 2."
+      );
+    }
+    return this
+      .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
+      .editSemantic({ property: "guide.legend.strokeWidth.title", value: encoding.field })
+      ._withLegendConfig("strokeWidth", {
+        target: layer.id,
+        scale: encoding.scale,
+        title: encoding.field,
+        inferredTitle: true,
+        count,
+        labels: { ...STROKE_WIDTH_LEGEND_LABELS },
+        titleStyle: { ...STROKE_WIDTH_LEGEND_TITLE_STYLE },
+        titleVisible: true
+      })
+      .createGraphics({
+        id: "strokeWidthLegendSymbols",
+        type: "line",
+        length: count,
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .createGraphics({
+        id: "strokeWidthLegendLabels",
+        type: "text",
+        length: count,
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .createGraphics({
+        id: "strokeWidthLegendTitle",
+        type: "text",
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .rematerializeStrokeWidthLegend();
+  }
+);
+
+export function registerStrokeWidthLegendActions(ProgramClass) {
+  ProgramClass.prototype.createStrokeWidthLegend = createStrokeWidthLegend;
+  ProgramClass.prototype.rematerializeStrokeWidthLegend =
+    rematerializeStrokeWidthLegend;
+}

package/src/actions/index.js

@@ -1,4 +1,5 @@
 import { registerCanvasActions } from "./canvas/index.js";
+import { registerChartActions } from "./charts/index.js";
 import { registerCoordinateActions } from "./coordinates/index.js";
 import { registerCompositionActions } from "./composition/index.js";
 import { registerDataActions } from "./data/index.js";
@@ -8,12 +9,14 @@ import { registerErrorBarActions } from "./errorBars/index.js";
 import { registerFacetActions } from "./facets/index.js";
 import { registerBoxPlotActions } from "./boxPlots/index.js";
 import { registerGuideActions } from "./guides/index.js";
+import { registerGradientPlotActions } from "./gradientPlots/index.js";
 import { registerMarkActions } from "./marks/index.js";
 import { registerPrimitiveActions } from "./primitives/index.js";
 import { registerRegressionActions } from "./regression/index.js";
 import { registerScaleActions } from "./scales/index.js";
 import { registerTitleActions } from "./titles/index.js";
 import { registerSelectionActions } from "./selection/index.js";
+import { registerViolinPlotActions } from "./violinPlots/index.js";
 
 export function registerActions(ProgramClass) {
   registerPrimitiveActions(ProgramClass);
@@ -31,5 +34,8 @@ export function registerActions(ProgramClass) {
   registerErrorBarActions(ProgramClass);
   registerErrorBandActions(ProgramClass);
   registerBoxPlotActions(ProgramClass);
+  registerGradientPlotActions(ProgramClass);
+  registerViolinPlotActions(ProgramClass);
+  registerChartActions(ProgramClass);
   registerSelectionActions(ProgramClass);
 }

package/src/actions/marks/arc/actions.js

@@ -46,8 +46,8 @@ function validateInnerRadius(value) {
   return value;
 }
 
-function normalizeConfig(args, previous = {}) {
-  return {
+function normalizeConfig(args, previous = {}, { allowStrokeRemoval = false } = {}) {
+  let config = {
     ...previous,
     ...(Object.hasOwn(args, "innerRadius")
       ? { innerRadius: validateInnerRadius(args.innerRadius) }
@@ -61,18 +61,28 @@ function normalizeConfig(args, previous = {}) {
     ...(Object.hasOwn(args, "opacity")
       ? { opacity: validateUnitInterval(args.opacity, "Arc opacity") }
       : {}),
-    ...(Object.hasOwn(args, "stroke")
+    ...(Object.hasOwn(args, "stroke") && args.stroke !== false
       ? { stroke: validateNonEmptyString(args.stroke, "Arc stroke") }
-      : {}),
-    ...(Object.hasOwn(args, "strokeWidth")
-      ? {
-          strokeWidth: validateNonNegativeFinite(
-            args.strokeWidth,
-            "Arc strokeWidth"
-          )
-        }
       : {})
   };
+  if (args.stroke === false) {
+    if (!allowStrokeRemoval) {
+      throw new TypeError("Arc stroke must be a non-empty string.");
+    }
+    config.stroke = false;
+    delete config.strokeWidth;
+  } else if (Object.hasOwn(args, "stroke")) {
+    if (previous.stroke === false && !Object.hasOwn(args, "strokeWidth")) {
+      config.strokeWidth = 1;
+    }
+  }
+  if (Object.hasOwn(args, "strokeWidth")) {
+    config.strokeWidth = validateNonNegativeFinite(
+      args.strokeWidth,
+      "Arc strokeWidth"
+    );
+  }
+  return config;
 }
 
 const createArcMark = action(
@@ -189,8 +199,16 @@ const rematerializeArcMark = action(
       .editGraphics({ target: id, property: "commands", value: commands })
       .editGraphics({ target: id, property: "fill", value: fills })
       .editGraphics({ target: id, property: "opacity", value: config.opacity ?? 1 })
-      .editGraphics({ target: id, property: "stroke", value: config.stroke ?? "#ffffff" })
-      .editGraphics({ target: id, property: "strokeWidth", value: config.strokeWidth ?? 1 })
+      .editGraphics({
+        target: id,
+        property: "stroke",
+        value: config.stroke === false ? "transparent" : config.stroke ?? "#ffffff"
+      })
+      .editGraphics({
+        target: id,
+        property: "strokeWidth",
+        value: config.stroke === false ? 0 : config.strokeWidth ?? 1
+      })
       .editGraphics({
         target: id,
         property: "strokeDash",
@@ -222,9 +240,23 @@ const editArcMark = action(
     if (Object.hasOwn(args, "fill") && layer.encoding?.color !== undefined) {
       throw new Error("editArcMark fill cannot be combined with a color encoding.");
     }
+    if (args.stroke === false && Object.hasOwn(args, "strokeWidth")) {
+      throw new Error(
+        "editArcMark cannot set strokeWidth while removing stroke."
+      );
+    }
+    if (
+      Object.hasOwn(args, "strokeWidth") &&
+      !Object.hasOwn(args, "stroke") &&
+      this.markConfigs[layer.id]?.stroke === false
+    ) {
+      throw new Error("editArcMark strokeWidth requires an active stroke.");
+    }
     const next = this._withMarkConfig(
       layer.id,
-      normalizeConfig(args, this.markConfigs[layer.id])
+      normalizeConfig(args, this.markConfigs[layer.id], {
+        allowStrokeRemoval: true
+      })
     );
     return canMaterializeArc(next, layer)
       ? next.rematerializeArcMark({ id: layer.id })