ggaction 0.0.4 → 0.0.6

package/src/materialization/marks/pathOrder.js

@@ -0,0 +1,71 @@
+import { isAggregate } from "../../grammar/aggregate.js";
+import { findTransformPolicy } from "../../grammar/transforms.js";
+import { findDataset } from "../../selectors/datasets.js";
+
+function hasRowPreservingProvenance(program, dataset) {
+  const visited = new Set();
+  let current = dataset;
+  while (current?.source !== undefined) {
+    if (visited.has(current.id) || current.transform?.length !== 1) return false;
+    visited.add(current.id);
+    const policy = findTransformPolicy(current.transform[0].type);
+    if (
+      policy?.facetTopology !== "rowPreserving" &&
+      policy?.provenanceTransparent !== true
+    ) {
+      return false;
+    }
+    current = findDataset(program, current.source);
+    if (current === undefined) return false;
+  }
+  return current !== undefined;
+}
+
+function isPolar(layer) {
+  return layer.encoding?.theta !== undefined ||
+    layer.encoding?.radius !== undefined;
+}
+
+function isCompositePath(program, layer) {
+  const config = program.markConfigs[layer.id];
+  return config?.errorBand !== undefined ||
+    config?.errorBandBoundary !== undefined ||
+    config?.regression !== undefined;
+}
+
+export function pathOrderCompatibility(program, layer) {
+  if (!["line", "area"].includes(layer?.mark?.type)) {
+    return { compatible: false, reason: "requires a line or area mark" };
+  }
+  if (isPolar(layer)) {
+    return { compatible: false, reason: "does not support Polar paths" };
+  }
+  const dataset = findDataset(program, layer.data);
+  if (dataset === undefined) {
+    return { compatible: false, reason: "requires an existing dataset" };
+  }
+  if (!hasRowPreservingProvenance(program, dataset)) {
+    return {
+      compatible: false,
+      reason: "requires raw or row-preserving source data"
+    };
+  }
+  if (isCompositePath(program, layer)) {
+    return {
+      compatible: false,
+      reason: "does not support generated error or regression paths"
+    };
+  }
+  if (layer.mark.type === "line" && isAggregate(layer.encoding?.y?.aggregate)) {
+    return { compatible: false, reason: "does not support aggregate lines" };
+  }
+  return { compatible: true, dataset };
+}
+
+export function assertPathOrderCompatible(program, layer, operation) {
+  const result = pathOrderCompatibility(program, layer);
+  if (!result.compatible) {
+    throw new Error(`${operation} ${result.reason} on mark "${layer?.id}".`);
+  }
+  return result.dataset;
+}

package/src/materialization/marks/policies.js

@@ -6,7 +6,8 @@ import {
   canMaterializePoint,
   canMaterializeRect,
   canMaterializeRule,
-  canMaterializeText
+  canMaterializeText,
+  isIntentionallyEmptyArea
 } from "./capabilities.js";
 
 const MARK_MATERIALIZATION_POLICIES = Object.freeze({
@@ -33,7 +34,10 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
     canMaterialize: canMaterializeArea,
     op: "rematerializeAreaMark",
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: true }),
-    encoding: Object.freeze({ sharedChannels: Object.freeze(["color"]) }),
+    encoding: Object.freeze({
+      sharedChannels: Object.freeze(["color"]),
+      skipRematerialization: isIntentionallyEmptyArea
+    }),
     scaleApplication: Object.freeze({ default: "defer" })
   }),
   arc: Object.freeze({

package/src/materialization/scaleGuideDependencies.js

@@ -21,6 +21,8 @@ function usesPositionalScale(program, id) {
   return program.semanticSpec.layers.some(layer =>
     POSITION_ENCODING_CHANNELS.some(
       channel => layer.encoding?.[channel]?.scale === id
+    ) || (layer.encoding?.parallel?.dimensions ?? []).some(
+      dimension => dimension.scale === id
     )
   );
 }
@@ -62,6 +64,12 @@ export function planScaleGuideRematerialization(program, id) {
   const guides = [];
   const objects = program.graphicSpec?.objects ?? {};
   const guideConfigs = program.guideConfigs ?? {};
+  if (guideConfigs.axis?.parallel?.axes?.scales?.includes(id)) {
+    guides.push({
+      op: "rematerializeParallelAxes",
+      args: { target: guideConfigs.axis.parallel.axes.target }
+    });
+  }
   for (const axis of CARTESIAN_AXES) {
     if (
       objects[axis.lineObject] &&

package/src/materialization/scales/resolve.js

@@ -18,6 +18,7 @@ import {
   resolveShapeRange,
   resolveSizeRange,
   resolveStrokeDashRange,
+  resolveStrokeWidthRange,
   resolveTransformedDomain,
   SCALE_ROLES,
   validateLinearScaleType,
@@ -92,6 +93,7 @@ function resolveRange({
   if (channel === "shape") return resolveShapeRange(scale.range);
   if (channel === "size") return resolveSizeRange(scale.range);
   if (channel === "opacity") return resolveOpacityRange(scale.range);
+  if (channel === "strokeWidth") return resolveStrokeWidthRange(scale.range);
   if (isOrdinalOffset) return undefined;
   return resolveArcAutoPositionRange({
     consumers,

package/src/materialization/selection/items/path.js

@@ -4,7 +4,12 @@ import {
 } from "../../../grammar/areaSeries.js";
 import { deriveLineSeries } from "../../../grammar/lineSeries.js";
 import { findUpstreamTransform } from "../../dataProvenance.js";
-import { finalizeItems, uniqueFields } from "./common.js";
+import {
+  channelMapFromRow,
+  finalizeItems,
+  ownFields,
+  uniqueFields
+} from "./common.js";
 
 function rowsForSeries(rows, key) {
   const entries = Object.entries(key);
@@ -34,6 +39,27 @@ function seriesDefinitions(layer, rows, series) {
 }
 
 export function resolveLineItems(program, layer, dataset) {
+  if (layer.encoding?.parallel !== undefined) {
+    const parallel = layer.encoding.parallel;
+    const definitions = dataset.values.flatMap((row, index) => {
+      const incomplete = parallel.dimensions.some(dimension => {
+        const value = row[dimension.field];
+        return dimension.fieldType === "quantitative"
+          ? !Number.isFinite(value)
+          : typeof value !== "string" && !Number.isFinite(value);
+      });
+      if (incomplete && parallel.missing === "drop-row") return [];
+      return [{
+        key: parallel.key === undefined
+          ? `${layer.id}/row/source:${index}`
+          : `${layer.id}/row/${String(row[parallel.key])}`,
+        fields: ownFields(row),
+        channels: channelMapFromRow(row, layer),
+        members: [row]
+      }];
+    });
+    return finalizeItems(program, layer, "row", definitions, "path");
+  }
   const derived = deriveLineSeries(dataset.values, layer);
   return finalizeItems(
     program,

package/src/materialization/selection/items/point.js

@@ -18,11 +18,7 @@ export function resolvePointItems(program, layer, dataset) {
   );
   if (
     !Array.isArray(graphic?.items) ||
-    !completePosition ||
-    (
-      layer.encoding?.size?.scale === undefined &&
-      !Number.isFinite(program.markConfigs[layer.id]?.radius)
-    )
+    !completePosition
   ) {
     throw new Error(`Point mark "${layer.id}" is incomplete for selection.`);
   }

package/src/materialization/selection/items/rect.js

@@ -1,16 +1,37 @@
 import { resolveRectRows } from "../../rect.js";
 import {
+  channelMapFromRow,
   concreteProperties,
   finalizeItems,
   itemKey,
   ownFields
 } from "./common.js";
 
+function resolveGradientPlotItems(program, layer, dataset) {
+  const graphic = program.graphicSpec.objects[layer.id];
+  return finalizeItems(
+    program,
+    layer,
+    "rect",
+    dataset.values.map((row, index) => ({
+      key: itemKey(layer, "rect", index),
+      fields: ownFields(row),
+      channels: channelMapFromRow(row, layer),
+      properties: concreteProperties(graphic.items[index]?.properties),
+      members: [row]
+    })),
+    "rect"
+  );
+}
+
 export function resolveRectItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
   if (graphic?.type !== "rect" || !Array.isArray(graphic.items)) {
     throw new Error(`Rect mark "${layer.id}" is incomplete for selection.`);
   }
+  if (program.markConfigs[layer.id]?.gradientPlot?.materialized === true) {
+    return resolveGradientPlotItems(program, layer, dataset);
+  }
   const rows = resolveRectRows(program, layer, dataset);
   const definitions = rows.map((item, graphicIndex) => ({
     key: itemKey(layer, "rect", item.sourceIndex),

package/src/materialization/selection/styles.js

@@ -80,19 +80,19 @@ export function normalizePointHighlightStyle(args) {
   };
 }
 
-function normalizeRectangularHighlightStyle(args, mark) {
-  for (const option of ["shape", "size", "offset", "strokeDash"]) {
+function normalizeRectangularHighlightStyle(args, mark, { offset = false } = {}) {
+  for (const option of ["shape", "size", "strokeDash"]) {
     if (args[option] !== undefined) {
       throw new Error(`${mark} highlight does not support ${option}.`);
     }
   }
+  if (!offset && args.offset !== undefined) {
+    throw new Error(`${mark} highlight does not support offset.`);
+  }
   if (args.color !== undefined && args.fill !== undefined) {
     throw new Error(`${mark} highlight accepts color or fill, not both.`);
   }
-  const fill = validateNonEmptyString(
-    args.fill ?? args.color ?? DEFAULT_COLORS.highlight,
-    `${mark} highlight fill`
-  );
+  const explicitFill = args.fill ?? args.color;
   const opacity = args.opacity === undefined
     ? undefined
     : validateUnitInterval(args.opacity, `${mark} highlight opacity`);
@@ -105,11 +105,22 @@ function normalizeRectangularHighlightStyle(args, mark) {
   if (strokeWidth !== undefined && stroke === undefined) {
     throw new Error(`${mark} highlight strokeWidth requires stroke.`);
   }
+  const hasAppearanceOverride = opacity !== undefined || stroke !== undefined ||
+    strokeWidth !== undefined || args.offset !== undefined;
+  const fill = explicitFill === undefined && hasAppearanceOverride
+    ? undefined
+    : validateNonEmptyString(
+        explicitFill ?? DEFAULT_COLORS.highlight,
+        `${mark} highlight fill`
+      );
   return {
-    fill,
+    ...(fill === undefined ? {} : { fill }),
     ...(opacity === undefined ? {} : { opacity }),
     ...(stroke === undefined ? {} : { stroke }),
-    ...(strokeWidth === undefined ? {} : { strokeWidth })
+    ...(strokeWidth === undefined ? {} : { strokeWidth }),
+    ...(offset && args.offset !== undefined
+      ? { offset: normalizeOffset(args.offset) }
+      : {})
   };
 }
 
@@ -118,7 +129,7 @@ export function normalizeBarHighlightStyle(args) {
 }
 
 export function normalizeRectHighlightStyle(args) {
-  return normalizeRectangularHighlightStyle(args, "Rect");
+  return normalizeRectangularHighlightStyle(args, "Rect", { offset: true });
 }
 
 function rejectHighlightOptions(args, mark, options) {

package/src/materialization/text.js

@@ -120,13 +120,14 @@ function resolveSourceTextItems(program, layer, config) {
   }
   const items = resolveMarkItems(program, source.id);
   return items.flatMap(item => {
+    const anchor = sourceAnchor(program, source, item);
     const concrete = concreteItem(
       sourceTextConfig(config, source, item),
-      sourceAnchor(program, source, item),
+      anchor,
       contentValue(layer.encoding.text, item, source),
       layer.encoding.text.format
     );
-    return concrete === undefined ? [] : [concrete];
+    return concrete === undefined ? [] : [{ graphic: concrete, anchor }];
   });
 }
 
@@ -145,12 +146,19 @@ function resolveRowTextItems(program, layer, config) {
       contentValue(layer.encoding.text, row),
       layer.encoding.text.format
     );
-    return concrete === undefined ? [] : [concrete];
+    return concrete === undefined
+      ? []
+      : [{ graphic: concrete, anchor: { x: x[index], y: y[index] } }];
   });
 }
 
-export function resolveTextGraphicItems(program, layer, config) {
+export function resolveTextGraphicEntries(program, layer, config) {
   return layer.source === undefined
     ? resolveRowTextItems(program, layer, config)
     : resolveSourceTextItems(program, layer, config);
 }
+
+export function resolveTextGraphicItems(program, layer, config) {
+  return resolveTextGraphicEntries(program, layer, config)
+    .map(entry => entry.graphic);
+}

package/src/renderers/canvas/fill.js

@@ -0,0 +1,33 @@
+import {
+  isLinearGradientPaint,
+  resolveLinearGradientCoordinates,
+  validateFillPaint
+} from "../../grammar/paint.js";
+
+export function applyCanvasFill(context, fill, bounds, graphicId) {
+  validateFillPaint(fill, `${graphicId}.fill`);
+  if (!isLinearGradientPaint(fill)) {
+    context.fillStyle = fill;
+    return fill;
+  }
+  if (typeof context.createLinearGradient !== "function") {
+    throw new TypeError(
+      `Graphic "${graphicId}" requires Canvas context createLinearGradient().`
+    );
+  }
+  const coordinates = resolveLinearGradientCoordinates(fill, bounds);
+  const gradient = context.createLinearGradient(
+    coordinates.from.x,
+    coordinates.from.y,
+    coordinates.to.x,
+    coordinates.to.y
+  );
+  if (gradient === null || typeof gradient !== "object" || typeof gradient.addColorStop !== "function") {
+    throw new TypeError(
+      `Graphic "${graphicId}" requires a Canvas linear gradient with addColorStop().`
+    );
+  }
+  for (const stop of fill.stops) gradient.addColorStop(stop.offset, stop.color);
+  context.fillStyle = gradient;
+  return gradient;
+}

package/src/renderers/canvas/index.js

@@ -120,6 +120,13 @@ export function render(program, context, { pixelRatio = 1 } = {}) {
 
   context.canvas.width = Math.round(width * pixelRatio);
   context.canvas.height = Math.round(height * pixelRatio);
+  if (
+    context.canvas.style !== null &&
+    typeof context.canvas.style === "object"
+  ) {
+    context.canvas.style.width = `${width}px`;
+    context.canvas.style.height = `${height}px`;
+  }
   context.save();
 
   try {

package/src/renderers/canvas/path.js

@@ -1,6 +1,8 @@
 import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
+import { resolvePathCommandBounds } from "../../grammar/schemas/graphicBounds.js";
+import { applyCanvasFill } from "./fill.js";
 
 function drawPath(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -19,9 +21,6 @@ function drawPath(context, child, collectionId) {
   if (!hasFill && !hasStroke) {
     throw new Error(`Graphic "${graphicId}" requires a fill or stroke property.`);
   }
-  if (hasFill && typeof properties.fill !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string fill property.`);
-  }
   if (hasFill && commands.at(-1).op !== "Z") {
     throw new Error(`Graphic "${graphicId}" requires a final Z command when filled.`);
   }
@@ -75,7 +74,11 @@ function drawPath(context, child, collectionId) {
   }
 
   if (hasFill) {
-    context.fillStyle = properties.fill;
+    const bounds = resolvePathCommandBounds(commands);
+    if (bounds === undefined) {
+      throw new Error(`Graphic "${graphicId}" requires finite path fill bounds.`);
+    }
+    applyCanvasFill(context, properties.fill, bounds, graphicId);
     context.fill();
   }
   if (hasStroke) {

package/src/renderers/canvas/rect.js

@@ -1,6 +1,7 @@
 import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
+import { applyCanvasFill } from "./fill.js";
 
 function drawRect(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -21,8 +22,8 @@ function drawRect(context, child, collectionId) {
       `Graphic "${graphicId}" requires non-negative rect dimensions and strokeWidth.`
     );
   }
-  if (typeof properties.fill !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string fill property.`);
+  if (properties.fill === undefined) {
+    throw new Error(`Graphic "${graphicId}" requires a fill property.`);
   }
   if (typeof properties.stroke !== "string") {
     throw new Error(`Graphic "${graphicId}" requires a string stroke property.`);
@@ -34,7 +35,12 @@ function drawRect(context, child, collectionId) {
   }
 
   context.globalAlpha = opacity;
-  context.fillStyle = properties.fill;
+  applyCanvasFill(context, properties.fill, {
+    left: x,
+    right: x + width,
+    top: y,
+    bottom: y + height
+  }, graphicId);
   context.fillRect(x, y, width, height);
   context.strokeStyle = properties.stroke;
   context.lineWidth = strokeWidth;

package/src/selectors/datasets.js

@@ -6,6 +6,10 @@ export function hasDataset(program, id) {
   return findDataset(program, id) !== undefined;
 }
 
+export function findDatasetConsumer(program, source) {
+  return program.semanticSpec.datasets.find(dataset => dataset.source === source);
+}
+
 export function requireDataset(program, id, label = `Dataset "${id}"`) {
   const dataset = findDataset(program, id);
   if (dataset === undefined) throw new Error(`${label} does not exist.`);

package/src/theme/defaults.js

@@ -1,10 +1,14 @@
 export const DEFAULT_FONT_FAMILY = "sans-serif";
 
+export const DEFAULT_POINT_RADIUS = 3;
+
 export const DEFAULT_COLORS = Object.freeze({
   mark: "#4c78a8",
   text: "#334155",
   strongText: "#0f172a",
   mutedText: "#64748b",
+  axis: "#475569",
+  axisTitle: "#1e293b",
   grid: "#e2e8f0",
   border: "#cbd5e1",
   sizeSymbol: "#94a3b8",

package/types/extension.d.ts

@@ -2,6 +2,12 @@ import type { ActionOptions } from "./program.js";
 import { ChartProgram } from "./program.js";
 
 export { ChartProgram };
+export type {
+  FillPaint,
+  LinearGradientPaint,
+  LinearGradientPoint,
+  LinearGradientStop
+} from "./program.js";
 
 export interface ActionMetadata {
   op: string;

package/types/index.d.ts

@@ -13,6 +13,14 @@ export type {
   AxisTitleOptions,
   AxisValue,
   BarWidthOptions,
+  BoxPlotOptions,
+  BinnedHeatmapColorOptions,
+  BinnedHeatmapOptions,
+  BinnedHeatmapPositionChannel,
+  Bin2DCounts,
+  Bin2DDataOptions,
+  Bin2DExtent,
+  Bin2DOutputFields,
   CanvasOptions,
   CategoricalEncodingOptions,
   ColorLayout,
@@ -32,23 +40,45 @@ export type {
   CreateCoordinateOptions,
   CreateGuidesOptions,
   CreateGridOptions,
+  CreateBarPlotOptions,
+  CreateHeatmapOptions,
+  CreateHistogramOptions,
   CreateRegressionBandOptions,
   CreateRegressionLineOptions,
+  CreateLinePlotOptions,
+  CreateParallelCoordinatesOptions,
+  CreateScatterPlotOptions,
   CreateScaleOptions,
   DashPattern,
   DashScaleOptions,
   DashStyle,
   DatasetDensityTransform,
+  DatasetHorizonTransform,
+  DensityPlacement,
+  BaselineDensityPlacement,
+  CategoryDensityPlacement,
+  DensityPlacementSide,
+  DensityPlacementSplit,
+  DensityPlacementWidth,
+  DensityWidthResolution,
+  DatasetBin2DOutputFields,
+  DatasetBin2DTransform,
   DatasetFilterTransform,
   DatasetIntervalOutputFields,
   DatasetIntervalTransform,
+  DatasetWindowOperation,
+  DatasetWindowSort,
+  DatasetWindowTransform,
   DatasetRegressionTransform,
   DatasetScalar,
   DatasetTransform,
   EditGraphicsOptions,
+  EditBin2DDataOptions,
+  EditHorizonOptions,
   EditCompositionLayoutOptions,
   EditFacetHeadersOptions,
   EditAxisOptions,
+  EditGradientPlotOptions,
   EditGridDirectionsOptions,
   EditGridOptions,
   EditErrorBandBoundaryOptions,
@@ -63,6 +93,7 @@ export type {
   EditScaleOptions,
   EditSemanticOptions,
   FieldType,
+  FillPaint,
   FacetCompositionSpec,
   FacetGuideOptions,
   FacetOptions,
@@ -71,9 +102,39 @@ export type {
   GraphicObject,
   GraphicSpec,
   GraphicType,
+  GradientPlotAppearanceOptions,
+  GradientPlotCenterOptions,
+  GradientPlotDensityOptions,
+  GradientPlotOptions,
+  GradientPlotPositionChannel,
+  ViolinPlotAreaOptions,
+  ViolinPlotColorOptions,
+  ViolinPlotDensityOptions,
+  ViolinPlotOptions,
+  ViolinPlotPositionChannel,
+  ViolinPlotSplitOptions,
+  LinearGradientPaint,
+  LinearGradientPoint,
+  LinearGradientStop,
   GridDirectionOptions,
+  HeatmapBaseOptions,
+  HeatmapBinOptions,
   HistogramEncodingOptions,
+  HorizonEncodingOptions,
+  HorizonMissingPolicy,
+  HorizonOutputFields,
+  HorizonOverflowPolicy,
+  HorizonPaletteOptions,
+  HorizonResolution,
+  HorizonXEncoding,
+  HorizonYEncoding,
   HighlightMarksOptions,
+  JitterMaxOffset,
+  JitterPointsOptions,
+  LabelLayoutAxis,
+  LabelLayoutBounds,
+  LabelLayoutOptions,
+  LabelLeaderOptions,
   LegendOptions,
   EditLegendOptions,
   ContinuousColorInterpolation,
@@ -81,7 +142,12 @@ export type {
   OpacityEncodingOptions,
   OpacityScaleOptions,
   OffsetScaleOptions,
+  PathOrderEncodingOptions,
+  ParallelCoordinatesEncodingOptions,
+  ParallelDimension,
+  ParallelMissingPolicy,
   PointShape,
+  PreGriddedHeatmapOptions,
   MarkSelector,
   MarkGraphicProperty,
   Palette,
@@ -100,8 +166,11 @@ export type {
   EditRectMarkOptions,
   RemoveAxisOptions,
   RemoveGridOptions,
+  RemoveJitterOptions,
+  RemoveLabelLayoutOptions,
   RemoveLegendOptions,
   RemoveMarkOptions,
+  RemovePathOrderOptions,
   ScaleRange,
   ScaleOptions,
   ScaleType,
@@ -113,6 +182,10 @@ export type {
   SemanticSpec,
   SelectMarksOptions,
   StrokeDashEncodingOptions,
+  StrokeWidthEncodingOptions,
+  StrokeWidthScaleOptions,
+  ThetaEncodingOptions,
+  ThetaScaleOptions,
   TraceNode,
   TitleOptions,
   EditTitleOptions,
@@ -123,6 +196,10 @@ export type {
   TextMarkOptions,
   XAxisPosition,
   YAxisPosition,
+  WindowDataOptions,
+  WindowOperation,
+  WindowSort,
+  WindowSortOrder,
   XOffsetEncodingOptions
 } from "./program.js";