ggaction 0.0.4 → 0.0.6

package/src/actions/marks/area/actions.js

@@ -5,12 +5,6 @@ import {
   validateNonNegativeFinite,
   validateUnitInterval
 } from "../../../core/validation.js";
-import {
-  deriveAreaSeries,
-  deriveDensityAreaSeries,
-  layoutDensityAreaSeries
-} from "../../../grammar/areaSeries.js";
-import { mapContinuousScaleValues, mapOrdinalValues } from "../../../grammar/scales/index.js";
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
@@ -23,17 +17,14 @@ import {
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import { findDataset } from "../../../selectors/datasets.js";
 import { findLayer } from "../../../selectors/layers.js";
-import {
-  buildAreaCurvePathCommands,
-  validateCurveInterpolation
-} from "../../../grammar/curveCommands.js";
-import { buildLinearPathCommands } from "../../../grammar/pathCommands.js";
+import { validateCurveInterpolation } from "../../../grammar/curveCommands.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { canMaterializeArea } from "../../../materialization/marks/index.js";
 import { findUpstreamTransform } from "../../../materialization/dataProvenance.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import { resolveAreaMaterialization } from "./materialize.js";
 
 const CREATE_OPTIONS = Object.freeze([
   "id", "data", "fill", "opacity", "stroke", "strokeWidth", "curve"
@@ -42,6 +33,7 @@ const EDIT_OPTIONS = Object.freeze([
   "target", "fill", "opacity", "stroke", "strokeWidth", "curve"
 ]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
+const STROKE_FROM_FILL_OPTIONS = Object.freeze(["id", "strokeWidth"]);
 
 export function validateAreaCreateOutline(args, operation = "createAreaMark") {
   if (Object.hasOwn(args, "strokeWidth") && !Object.hasOwn(args, "stroke")) {
@@ -103,6 +95,35 @@ const createAreaMark = action(
   }
 );
 
+const configureAreaStrokeFromFill = action(
+  {
+    op: "configureAreaStrokeFromFill",
+    description: "Use each area path fill as its outline color."
+  },
+  function (args = {}) {
+    validateMarkOptions(
+      args,
+      STROKE_FROM_FILL_OPTIONS,
+      "configureAreaStrokeFromFill"
+    );
+    const id = validateUserId(args.id, "Area mark id");
+    const layer = findLayer(this, id);
+    if (layer?.mark?.type !== "area") {
+      throw new Error(`Unknown area mark "${id}".`);
+    }
+    const { stroke: _stroke, ...config } = this.markConfigs[id] ?? {};
+    void _stroke;
+    return this._withMarkConfig(id, {
+      ...config,
+      strokeFromFill: true,
+      strokeWidth: validateNonNegativeFinite(
+        args.strokeWidth ?? 1,
+        "Area strokeWidth"
+      )
+    });
+  }
+);
+
 const rematerializeAreaMark = action(
   {
     op: "rematerializeAreaMark",
@@ -149,14 +170,7 @@ const rematerializeAreaMark = action(
           : `Density area mark "${id}" requires x and y scales.`
       );
     }
-    const rawDerived = densityTransform === undefined
-      ? deriveAreaSeries(dataset.values, layer)
-      : deriveDensityAreaSeries(dataset.values, layer, densityTransform);
     const colorEncoding = layer.encoding?.color;
-    const layout = colorEncoding?.layout ?? "overlay";
-    const derived = densityTransform === undefined
-      ? rawDerived
-      : layoutDensityAreaSeries(rawDerived, layout);
     let resolved = args.scales === false
       ? this
       : this
@@ -165,122 +179,17 @@ const rematerializeAreaMark = action(
     if (args.scales !== false && colorEncoding?.scale !== undefined) {
       resolved = resolved.rematerializeScale({ id: colorEncoding.scale });
     }
-    const xScale = resolved.resolvedScales[xScaleId];
-    const yScale = resolved.resolvedScales[yScaleId];
-    const densityScale = densityTransform === undefined
-      ? undefined
-      : derived.mode === "y-density" ? yScale : xScale;
-    if (
-      densityScale !== undefined &&
-      (densityScale.domain[0] > 0 || densityScale.domain[1] < 0)
-    ) {
-      throw new Error(`Density area mark "${id}" requires a scale domain containing zero.`);
-    }
-    const paths = derived.series.map(series => {
-      const curve = this.markConfigs[id]?.curve ?? "linear";
-      if (densityTransform === undefined && derived.orientation === "horizontal") {
-        const y = mapContinuousScaleValues(
-          series.values.map(value => value.y),
-          yScale
-        );
-        const lower = mapContinuousScaleValues(
-          series.values.map(value => value.x),
-          xScale
-        );
-        const upper = mapContinuousScaleValues(
-          series.values.map(value => value.x2),
-          xScale
-        );
-        return buildAreaCurvePathCommands(
-          y.map((value, index) => ({ x: lower[index], y: value })),
-          y.map((value, index) => ({ x: upper[index], y: value })),
-          curve,
-          { independentAxis: "y" }
-        );
-      }
-      if (densityTransform !== undefined && derived.mode === "x-density") {
-        const y = mapContinuousScaleValues(
-          series.values.map(value => value.y),
-          yScale
-        );
-        const upper = mapContinuousScaleValues(
-          series.values.map(value => value.x),
-          xScale
-        );
-        const baseline = mapContinuousScaleValues(
-          [0],
-          densityScale
-        )[0];
-        if (curve === "linear") {
-          return buildLinearPathCommands([
-            { x: baseline, y: y[0] },
-            ...y.map((value, index) => ({ x: upper[index], y: value })),
-            { x: baseline, y: y.at(-1) }
-          ], { close: true });
-        }
-        return buildAreaCurvePathCommands(
-          y.map(value => ({ x: baseline, y: value })),
-          y.map((value, index) => ({ x: upper[index], y: value })),
-          curve,
-          { independentAxis: "y" }
-        );
-      }
-      const x = mapContinuousScaleValues(
-        series.values.map(value => value.x),
-        xScale
-      );
-      const lowerValues = densityTransform === undefined
-        ? series.values.map(value => value.y)
-        : derived.mode === "y-density"
-          ? series.values.map(value => value.lower)
-          : series.values.map(value => value.y);
-      const lower = mapContinuousScaleValues(
-        lowerValues,
-        yScale
-      );
-      const upperValues = densityTransform === undefined
-        ? series.values.map(value => value.y2)
-        : series.values.map(value => value.upper);
-      const upper = mapContinuousScaleValues(
-        upperValues,
-        yScale
-      );
-      if (densityTransform !== undefined && layout === "overlay") {
-        const baseline = mapContinuousScaleValues(
-          [0],
-          yScale
-        )[0];
-        if (curve === "linear") {
-          return buildLinearPathCommands([
-            { x: x[0], y: baseline },
-            ...x.map((value, index) => ({ x: value, y: upper[index] })),
-            { x: x.at(-1), y: baseline }
-          ], { close: true });
-        }
-        return buildAreaCurvePathCommands(
-          x.map(value => ({ x: value, y: baseline })),
-          x.map((value, index) => ({ x: value, y: upper[index] })),
-          curve
-        );
-      }
-      return buildAreaCurvePathCommands(
-        x.map((value, index) => ({ x: value, y: lower[index] })),
-        x.map((value, index) => ({ x: value, y: upper[index] })),
-        curve
-      );
-    });
     const config = this.markConfigs[id];
-    const fills = config.errorBand?.fill !== undefined
-      ? paths.map(() => config.errorBand.fill)
-      : colorEncoding?.scale === undefined
-      ? paths.map(() => config.fill)
-      : mapOrdinalValues(
-          derived.series.map(series => series.key[colorEncoding.field]),
-          resolved.resolvedScales[colorEncoding.scale].domain,
-          resolved.resolvedScales[colorEncoding.scale].range
-        );
+    const { paths, fills } = resolveAreaMaterialization({
+      rows: dataset.values,
+      layer,
+      densityTransform,
+      resolvedScales: resolved.resolvedScales,
+      config
+    });
     const existingChildren = resolved.graphicSpec.objects[id].items ?? [];
-    const removesOutline = config.stroke === undefined && existingChildren.some(
+    const hasOutline = config.stroke !== undefined || config.strokeFromFill === true;
+    const removesOutline = !hasOutline && existingChildren.some(
       child => child.properties.stroke !== undefined
     );
     let next = removesOutline
@@ -292,9 +201,13 @@ const rematerializeAreaMark = action(
       .editGraphics({ target: id, property: "commands", value: paths })
       .editGraphics({ target: id, property: "fill", value: fills })
       .editGraphics({ target: id, property: "opacity", value: config.opacity });
-    if (config.stroke !== undefined) {
+    if (hasOutline) {
       next = next
-        .editGraphics({ target: id, property: "stroke", value: config.stroke })
+        .editGraphics({
+          target: id,
+          property: "stroke",
+          value: config.strokeFromFill === true ? fills : config.stroke
+        })
         .editGraphics({
           target: id,
           property: "strokeWidth",
@@ -347,12 +260,21 @@ const editAreaMark = action(
     }
     if (Object.hasOwn(args, "stroke")) {
       if (args.stroke === false) {
-        const { stroke: removedStroke, strokeWidth: removedWidth, ...rest } = config;
+        const {
+          stroke: removedStroke,
+          strokeFromFill: removedStrokeFromFill,
+          strokeWidth: removedWidth,
+          ...rest
+        } = config;
         void removedStroke;
+        void removedStrokeFromFill;
         void removedWidth;
         config = rest;
       } else {
-        const hadStroke = config.stroke !== undefined;
+        const hadStroke = config.stroke !== undefined || config.strokeFromFill === true;
+        const { strokeFromFill: _strokeFromFill, ...withoutFillStroke } = config;
+        void _strokeFromFill;
+        config = withoutFillStroke;
         config.stroke = validateNonEmptyString(args.stroke, "Area stroke");
         config.strokeWidth = Object.hasOwn(args, "strokeWidth")
           ? validateNonNegativeFinite(args.strokeWidth, "Area strokeWidth")
@@ -377,6 +299,8 @@ const editAreaMark = action(
 
 export function registerAreaMarkActions(ProgramClass) {
   ProgramClass.prototype.createAreaMark = createAreaMark;
+  ProgramClass.prototype.configureAreaStrokeFromFill =
+    configureAreaStrokeFromFill;
   ProgramClass.prototype.editAreaMark = editAreaMark;
   ProgramClass.prototype.rematerializeAreaMark = rematerializeAreaMark;
 }

package/src/actions/marks/area/materialize.js

@@ -0,0 +1,163 @@
+import {
+  deriveAreaSeries,
+  deriveDensityAreaSeries,
+  layoutDensityAreaSeries
+} from "../../../grammar/areaSeries.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalValues
+} from "../../../grammar/scales/index.js";
+import { buildAreaCurvePathCommands } from
+  "../../../grammar/curveCommands.js";
+import { buildLinearPathCommands } from
+  "../../../grammar/pathCommands.js";
+import { buildCategoricalDensityPaths } from
+  "../../../grammar/categoricalDensity.js";
+
+function resolveAreaPaths({
+  derived,
+  densityTransform,
+  categoricalDensity,
+  xScale,
+  yScale,
+  densityScale,
+  layout,
+  curve
+}) {
+  if (categoricalDensity) {
+    return buildCategoricalDensityPaths(derived, {
+      categoryScale: densityTransform.placement.channel === "x" ? xScale : yScale,
+      valueScale: densityTransform.placement.channel === "x" ? yScale : xScale,
+      curve
+    });
+  }
+  return derived.series.map(series => {
+    if (densityTransform === undefined && derived.orientation === "horizontal") {
+      const y = mapContinuousScaleValues(
+        series.values.map(value => value.y),
+        yScale
+      );
+      const lower = mapContinuousScaleValues(
+        series.values.map(value => value.x),
+        xScale
+      );
+      const upper = mapContinuousScaleValues(
+        series.values.map(value => value.x2),
+        xScale
+      );
+      return buildAreaCurvePathCommands(
+        y.map((value, index) => ({ x: lower[index], y: value })),
+        y.map((value, index) => ({ x: upper[index], y: value })),
+        curve,
+        { independentAxis: "y" }
+      );
+    }
+    if (densityTransform !== undefined && derived.mode === "x-density") {
+      const y = mapContinuousScaleValues(
+        series.values.map(value => value.y),
+        yScale
+      );
+      const upper = mapContinuousScaleValues(
+        series.values.map(value => value.x),
+        xScale
+      );
+      const baseline = mapContinuousScaleValues([0], densityScale)[0];
+      if (curve === "linear") {
+        return buildLinearPathCommands([
+          { x: baseline, y: y[0] },
+          ...y.map((value, index) => ({ x: upper[index], y: value })),
+          { x: baseline, y: y.at(-1) }
+        ], { close: true });
+      }
+      return buildAreaCurvePathCommands(
+        y.map(value => ({ x: baseline, y: value })),
+        y.map((value, index) => ({ x: upper[index], y: value })),
+        curve,
+        { independentAxis: "y" }
+      );
+    }
+    const x = mapContinuousScaleValues(
+      series.values.map(value => value.x),
+      xScale
+    );
+    const lowerValues = densityTransform === undefined
+      ? series.values.map(value => value.y)
+      : derived.mode === "y-density"
+        ? series.values.map(value => value.lower)
+        : series.values.map(value => value.y);
+    const lower = mapContinuousScaleValues(lowerValues, yScale);
+    const upperValues = densityTransform === undefined
+      ? series.values.map(value => value.y2)
+      : series.values.map(value => value.upper);
+    const upper = mapContinuousScaleValues(upperValues, yScale);
+    if (densityTransform !== undefined && layout === "overlay") {
+      const baseline = mapContinuousScaleValues([0], yScale)[0];
+      if (curve === "linear") {
+        return buildLinearPathCommands([
+          { x: x[0], y: baseline },
+          ...x.map((value, index) => ({ x: value, y: upper[index] })),
+          { x: x.at(-1), y: baseline }
+        ], { close: true });
+      }
+      return buildAreaCurvePathCommands(
+        x.map(value => ({ x: value, y: baseline })),
+        x.map((value, index) => ({ x: value, y: upper[index] })),
+        curve
+      );
+    }
+    return buildAreaCurvePathCommands(
+      x.map((value, index) => ({ x: value, y: lower[index] })),
+      x.map((value, index) => ({ x: value, y: upper[index] })),
+      curve
+    );
+  });
+}
+
+export function resolveAreaMaterialization({
+  rows,
+  layer,
+  densityTransform,
+  resolvedScales,
+  config
+}) {
+  const xScale = resolvedScales[layer.encoding.x.scale];
+  const yScale = resolvedScales[layer.encoding.y.scale];
+  const rawDerived = densityTransform === undefined
+    ? deriveAreaSeries(rows, layer)
+    : deriveDensityAreaSeries(rows, layer, densityTransform);
+  const colorEncoding = layer.encoding?.color;
+  const layout = colorEncoding?.layout ?? "overlay";
+  const categoricalDensity = densityTransform?.placement?.type === "category";
+  const derived = densityTransform === undefined || categoricalDensity
+    ? rawDerived
+    : layoutDensityAreaSeries(rawDerived, layout);
+  const densityScale = densityTransform === undefined || categoricalDensity
+    ? undefined
+    : derived.mode === "y-density" ? yScale : xScale;
+  if (
+    densityScale !== undefined &&
+    (densityScale.domain[0] > 0 || densityScale.domain[1] < 0)
+  ) {
+    throw new Error(`Density area mark "${layer.id}" requires a scale domain containing zero.`);
+  }
+  const paths = resolveAreaPaths({
+    derived,
+    densityTransform,
+    categoricalDensity,
+    xScale,
+    yScale,
+    densityScale,
+    layout,
+    curve: config.curve ?? "linear"
+  });
+  const fills = config.errorBand?.fill !== undefined
+    ? paths.map(() => config.errorBand.fill)
+    : colorEncoding?.scale === undefined
+      ? paths.map(() => config.fill)
+      : mapOrdinalValues(
+          derived.series.map(series => series.key[colorEncoding.field]),
+          resolvedScales[colorEncoding.scale].domain,
+          resolvedScales[colorEncoding.scale].range
+        );
+  return { paths, fills };
+}

package/src/actions/marks/index.js

@@ -2,7 +2,10 @@ import { registerBarMarkActions } from "./bar/index.js";
 import { registerAreaMarkActions } from "./area/index.js";
 import { registerArcMarkActions } from "./arc/index.js";
 import { registerLineMarkActions } from "./line/index.js";
-import { registerPointMarkActions } from "./point/index.js";
+import {
+  registerPointJitterActions,
+  registerPointMarkActions
+} from "./point/index.js";
 import { registerRectMarkActions } from "./rect/index.js";
 import { registerRuleMarkActions } from "./rule/index.js";
 import { registerTextMarkActions } from "./text/index.js";
@@ -10,6 +13,7 @@ import { removeMark } from "./remove.js";
 
 export function registerMarkActions(ProgramClass) {
   registerPointMarkActions(ProgramClass);
+  registerPointJitterActions(ProgramClass);
   registerRectMarkActions(ProgramClass);
   registerAreaMarkActions(ProgramClass);
   registerArcMarkActions(ProgramClass);