ggaction 0.0.3 → 0.0.5

package/src/materialization/scaleGuideDependencies.js

@@ -0,0 +1,102 @@
+import { POSITION_ENCODING_CHANNELS } from "../core/vocabulary.js";
+import { materializedLegendUsesScale } from "./legends.js";
+import { buildMaterializationPlan } from "./planner.js";
+
+const CARTESIAN_AXES = Object.freeze([
+  Object.freeze({ channel: "x", prefix: "X", lineObject: "xAxisLine" }),
+  Object.freeze({ channel: "y", prefix: "Y", lineObject: "yAxisLine" })
+]);
+const POLAR_AXES = Object.freeze([
+  Object.freeze({ channel: "theta", prefix: "Theta" }),
+  Object.freeze({ channel: "radius", prefix: "Radial" })
+]);
+const GRIDS = Object.freeze([
+  Object.freeze({ role: "horizontal", op: "rematerializeHorizontalGrid" }),
+  Object.freeze({ role: "vertical", op: "rematerializeVerticalGrid" }),
+  Object.freeze({ role: "theta", op: "rematerializeThetaGrid" }),
+  Object.freeze({ role: "radial", op: "rematerializeRadialGrid" })
+]);
+
+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
+    )
+  );
+}
+
+function usesRadialScale(program, id) {
+  return program.semanticSpec.layers.some(layer =>
+    layer.encoding?.radius?.scale === id
+  );
+}
+
+function semanticGuideUsesScale(program, id) {
+  return [
+    ...CARTESIAN_AXES.map(({ channel }) =>
+      program.semanticSpec.guides.axis?.[channel]
+    ),
+    ...POLAR_AXES.map(({ channel }) =>
+      program.semanticSpec.guides.axis?.[channel]
+    ),
+    ...GRIDS.map(({ role }) => program.semanticSpec.guides.grid?.[role])
+  ].some(guide => guide?.scale === id);
+}
+
+export function needsCanvasScaleRematerialization(program, scale) {
+  return (
+    (scale.range === "auto" ||
+      usesRadialScale(program, scale.id) ||
+      semanticGuideUsesScale(program, scale.id)) &&
+    program.resolvedScales[scale.id] !== undefined &&
+    usesPositionalScale(program, scale.id)
+  );
+}
+
+function componentEditOperation(prefix, component) {
+  const suffix = component[0].toUpperCase() + component.slice(1);
+  return `edit${prefix}Axis${suffix}`;
+}
+
+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] &&
+      program.semanticSpec.guides.axis?.[axis.channel]?.scale === id
+    ) {
+      guides.push({ op: componentEditOperation(axis.prefix, "line") });
+    }
+    for (const component of ["ticks", "labels", "title"]) {
+      if (guideConfigs.axis?.[axis.channel]?.[component]?.scale === id) {
+        guides.push({ op: componentEditOperation(axis.prefix, component) });
+      }
+    }
+  }
+  for (const axis of POLAR_AXES) {
+    for (const component of ["line", "ticks", "labels", "title"]) {
+      if (guideConfigs.axis?.[axis.channel]?.[component]?.scale === id) {
+        guides.push({ op: componentEditOperation(axis.prefix, component) });
+      }
+    }
+  }
+  for (const grid of GRIDS) {
+    if (guideConfigs.grid?.[grid.role]?.scale === id) {
+      guides.push({ op: grid.op });
+    }
+  }
+  if (materializedLegendUsesScale(program, id)) {
+    guides.push({ op: "rematerializeLegend" });
+  }
+  return buildMaterializationPlan({ guides });
+}

package/src/materialization/scales/map.js

@@ -6,7 +6,7 @@ import {
   mapDiscretizedColors,
   mapOrdinalValues,
   mapSequentialColors
-} from "../../grammar/scales.js";
+} from "../../grammar/scales/index.js";
 
 export function mapScaleConsumerValues(values, resolvedScale, channel) {
   if (channel === "color" && isDiscretizedColorScaleType(resolvedScale.type)) {

package/src/materialization/scales/policies/series.js

@@ -2,7 +2,7 @@ import {
   isTransformedScaleType,
   resolveContinuousDomain,
   resolveTransformedDomain
-} from "../../../grammar/scales.js";
+} from "../../../grammar/scales/index.js";
 
 export function resolveSeriesLayoutDomain({
   id,

package/src/materialization/scales/resolve.js

@@ -18,13 +18,14 @@ import {
   resolveShapeRange,
   resolveSizeRange,
   resolveStrokeDashRange,
+  resolveStrokeWidthRange,
   resolveTransformedDomain,
   SCALE_ROLES,
   validateLinearScaleType,
   validateOrdinalScaleType,
   validateScaleTypeForRole,
   validateTimeScaleType
-} from "../../grammar/scales.js";
+} from "../../grammar/scales/index.js";
 import { resolveArcAutoPositionRange } from "./policies/arc.js";
 import {
   resolveBinnedBarDomain,
@@ -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/bar.js

@@ -10,7 +10,7 @@ import { layoutSeriesPartition } from "../../../grammar/seriesLayout.js";
 import {
   readNominalField,
   readTemporalField
-} from "../../../grammar/scales.js";
+} from "../../../grammar/scales/index.js";
 import { findSemanticScale } from "../../../selectors/scales.js";
 import { deriveHistogramSegments } from "../../bars/histogram.js";
 import {

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

@@ -7,7 +7,7 @@ import {
   validateUnitInterval
 } from "../../core/validation.js";
 import { validatePointShape } from "../../grammar/pointShapes.js";
-import { normalizeStrokeDashPattern } from "../../grammar/scales.js";
+import { normalizeStrokeDashPattern } from "../../grammar/scales/index.js";
 import { DEFAULT_COLORS } from "../../theme/defaults.js";
 
 const DEFAULT_POINT_SIZE = 2;
@@ -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/renderers/canvas/text.js

@@ -2,6 +2,18 @@ import { requireFiniteProperty, requireStringProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
 
+const MIN_CANVAS_NUMERIC_FONT_WEIGHT = 100;
+const MAX_CANVAS_NUMERIC_FONT_WEIGHT = 900;
+
+export function normalizeCanvasFontWeight(fontWeight) {
+  if (typeof fontWeight !== "number") return fontWeight;
+  const rounded = Math.round(fontWeight / 100) * 100;
+  return Math.min(
+    MAX_CANVAS_NUMERIC_FONT_WEIGHT,
+    Math.max(MIN_CANVAS_NUMERIC_FONT_WEIGHT, rounded)
+  );
+}
+
 function drawText(context, child, collectionId) {
   const properties = child.properties ?? {};
   const graphicId = child.id ?? collectionId;
@@ -73,7 +85,8 @@ function drawText(context, child, collectionId) {
   try {
     context.fillStyle = fill;
     context.globalAlpha = opacity;
-    context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const canvasFontWeight = normalizeCanvasFontWeight(fontWeight);
+    context.font = `${canvasFontWeight} ${fontSize}px ${fontFamily}`;
     context.textAlign = textAlign;
     context.textBaseline = textBaseline;
     context.translate(x, y);

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;
@@ -12,4 +18,7 @@ export interface ActionMetadata {
 export function action<TOptions extends ActionOptions = ActionOptions>(
   metadata: ActionMetadata,
   implementation: (this: ChartProgram, options: TOptions) => ChartProgram
-): (this: ChartProgram, options?: TOptions) => ChartProgram;
+): <TProgram extends ChartProgram>(
+  this: TProgram,
+  options?: TOptions
+) => TProgram;