ggaction 0.0.6 → 0.0.8

package/src/layout/legendLane.js

@@ -0,0 +1,338 @@
+export const SIDE_LEGEND_BLOCK_GAP = 24;
+export const HORIZONTAL_LEGEND_BLOCK_GAP = 40;
+export const SIDE_LEGEND_SYMBOL_CENTER = 16;
+export const SIDE_LEGEND_LABEL_START = 44;
+export const HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP = 12;
+
+function unionBounds(bounds) {
+  return {
+    left: Math.min(...bounds.map(item => item.left)),
+    right: Math.max(...bounds.map(item => item.right)),
+    top: Math.min(...bounds.map(item => item.top)),
+    bottom: Math.max(...bounds.map(item => item.bottom))
+  };
+}
+
+function decoration(border) {
+  return border === false
+    ? 0
+    : border.padding + border.lineWidth / 2;
+}
+
+function horizontalExtent(blocks) {
+  const left = [0];
+  const right = [0];
+  for (const block of blocks) {
+    if (block.title !== undefined) right.push(block.title.width);
+    left.push(
+      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.left - block.symbol.centerX
+    );
+    right.push(
+      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX
+    );
+    right.push(SIDE_LEGEND_LABEL_START + block.labels.width);
+  }
+  return { left: Math.min(...left), right: Math.max(...right) };
+}
+
+function placeBlock(block, cursor) {
+  let dy;
+  if (block.title === undefined) {
+    dy = cursor - block.bounds.top;
+  } else {
+    const desiredTitleY = Math.ceil(cursor + block.title.fontSize / 2);
+    dy = desiredTitleY - block.title.y;
+    const futureTop = block.bounds.top + dy;
+    if (futureTop < cursor) dy += cursor - futureTop;
+  }
+  const bounds = {
+    left: block.bounds.left,
+    right: block.bounds.right,
+    top: block.bounds.top + dy,
+    bottom: block.bounds.bottom + dy
+  };
+  return {
+    id: block.id,
+    dy,
+    titleDx: block.title === undefined
+      ? undefined
+      : -block.title.x,
+    symbolDx: SIDE_LEGEND_SYMBOL_CENTER - block.symbol.centerX,
+    labelDx: SIDE_LEGEND_LABEL_START - block.labels.x,
+    bounds
+  };
+}
+
+function overlap(a, b) {
+  return a.left < b.right && a.right > b.left &&
+    a.top < b.bottom && a.bottom > b.top;
+}
+
+export function resolveSideLegendLane({
+  side,
+  plot,
+  canvas,
+  groups,
+  axisBounds
+}) {
+  if (!["right", "left"].includes(side)) {
+    throw new Error(`Unsupported side legend lane "${side}".`);
+  }
+  const blocks = groups.flatMap(group => group.blocks);
+  if (blocks.length < 2) return undefined;
+  const laneExtent = horizontalExtent(blocks);
+  const offset = Math.max(...blocks.map(block => block.offset));
+  const titleStartX = side === "right"
+    ? plot.x + plot.width + offset
+    : plot.x - offset - laneExtent.right;
+  const symbolCenterX = titleStartX + SIDE_LEGEND_SYMBOL_CENTER;
+  const labelStartX = titleStartX + SIDE_LEGEND_LABEL_START;
+  const first = blocks[0];
+  let cursor = first.title === undefined
+    ? plot.y + 12
+    : plot.y + 20 - first.title.fontSize / 2;
+  const placements = [];
+  const backgrounds = [];
+  const occupiedGroups = [];
+
+  for (const group of groups) {
+    const inset = decoration(group.border);
+    if (occupiedGroups.length > 0) cursor += inset;
+    const groupPlacements = [];
+    for (const block of group.blocks) {
+      const placement = placeBlock(block, cursor);
+      groupPlacements.push(placement);
+      placements.push({
+        ...placement,
+        titleDx: placement.titleDx === undefined
+          ? undefined
+          : placement.titleDx + titleStartX,
+        symbolDx: placement.symbolDx + titleStartX,
+        labelDx: placement.labelDx + titleStartX
+      });
+      cursor = placement.bounds.bottom + SIDE_LEGEND_BLOCK_GAP;
+    }
+    const vertical = unionBounds(groupPlacements.map(item => item.bounds));
+    const groupExtent = horizontalExtent(group.blocks);
+    const foreground = {
+      left: titleStartX + groupExtent.left,
+      right: titleStartX + groupExtent.right,
+      top: vertical.top,
+      bottom: vertical.bottom
+    };
+    const occupied = {
+      left: foreground.left - inset,
+      right: foreground.right + inset,
+      top: foreground.top - inset,
+      bottom: foreground.bottom + inset
+    };
+    occupiedGroups.push(occupied);
+    if (group.backgroundId !== undefined) {
+      backgrounds.push({
+        id: group.backgroundId,
+        x: foreground.left - group.border.padding,
+        y: foreground.top - group.border.padding,
+        width: foreground.right - foreground.left + group.border.padding * 2,
+        height: foreground.bottom - foreground.top + group.border.padding * 2
+      });
+    }
+    cursor = occupied.bottom + SIDE_LEGEND_BLOCK_GAP;
+  }
+
+  const occupied = unionBounds(occupiedGroups);
+  if (
+    occupied.left < 0 || occupied.right > canvas.width ||
+    occupied.top < 0 || occupied.bottom > canvas.height
+  ) {
+    throw new Error(`Legend lane requires more ${side}-margin or vertical Canvas space.`);
+  }
+  if (axisBounds !== undefined && overlap(occupied, axisBounds)) {
+    throw new Error(`${side[0].toUpperCase()}${side.slice(1)} legend lane and y-axis guides require more margin space.`);
+  }
+  return {
+    side,
+    titleStartX,
+    symbolCenterX,
+    labelStartX,
+    placements,
+    backgrounds,
+    occupied
+  };
+}
+
+function translateBounds(bounds, dy) {
+  return {
+    left: bounds.left,
+    right: bounds.right,
+    top: bounds.top + dy,
+    bottom: bounds.bottom + dy
+  };
+}
+
+function translateBoundsX(bounds, dx) {
+  return {
+    left: bounds.left + dx,
+    right: bounds.right + dx,
+    top: bounds.top,
+    bottom: bounds.bottom
+  };
+}
+
+function expandBounds(bounds, inset) {
+  return {
+    left: bounds.left - inset,
+    right: bounds.right + inset,
+    top: bounds.top - inset,
+    bottom: bounds.bottom + inset
+  };
+}
+
+function packHorizontalRows(groups, plot) {
+  const rows = [];
+  let row = [];
+  let cursor = plot.x;
+  for (const group of groups) {
+    const interval = expandBounds(group.horizontal, group.inset);
+    const width = interval.right - interval.left;
+    if (width > plot.width) {
+      throw new Error("Horizontal legend block requires more plot width.");
+    }
+    let dx = cursor - interval.left;
+    let placed = translateBoundsX(interval, dx);
+    if (row.length > 0 && placed.right > plot.x + plot.width) {
+      rows.push(row);
+      row = [];
+      cursor = plot.x;
+      dx = cursor - interval.left;
+      placed = translateBoundsX(interval, dx);
+    }
+    row.push({ group, interval: placed, dx });
+    cursor = placed.right + HORIZONTAL_LEGEND_BLOCK_GAP;
+  }
+  if (row.length > 0) rows.push(row);
+  return rows;
+}
+
+function normalizeHorizontalRow(entries) {
+  const stacked = entries.filter(entry =>
+    entry.group.title !== undefined && entry.group.inline !== true
+  );
+  const commonTitleY = stacked[0]?.group.title.y;
+  const titleDescent = stacked.length === 0
+    ? 0
+    : Math.max(...stacked.map(
+        entry => entry.group.title.bounds.bottom - entry.group.title.y
+      ));
+  const elementAnchor = commonTitleY === undefined
+    ? (entries[0].group.element.top + entries[0].group.element.bottom) / 2
+    : commonTitleY + titleDescent + HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP;
+  return entries.map(({ group, dx }) => {
+    const contentDy = commonTitleY === undefined
+      ? elementAnchor - (group.element.top + group.element.bottom) / 2
+      : elementAnchor - group.element.top;
+    const titleDy = group.title === undefined
+      ? 0
+      : group.inline === true
+        ? contentDy
+        : commonTitleY - group.title.y;
+    const foreground = unionBounds([
+      ...(group.title === undefined
+        ? []
+        : [translateBoundsX(translateBounds(group.title.bounds, titleDy), dx)]),
+      translateBoundsX(translateBounds(group.content, contentDy), dx)
+    ]);
+    return {
+      id: group.id,
+      dx,
+      titleDy,
+      contentDy,
+      foreground,
+      occupied: expandBounds(foreground, group.inset),
+      padding: group.padding,
+      backgroundId: group.backgroundId
+    };
+  });
+}
+
+function translateHorizontalPlacement(placement, dy) {
+  return {
+    ...placement,
+    titleDy: placement.titleDy + dy,
+    contentDy: placement.contentDy + dy,
+    foreground: translateBounds(placement.foreground, dy),
+    occupied: translateBounds(placement.occupied, dy)
+  };
+}
+
+export function resolveHorizontalLegendLane({
+  edge,
+  plot,
+  canvas,
+  groups,
+  collisionBounds = []
+}) {
+  if (!["top", "bottom"].includes(edge)) {
+    throw new Error(`Unsupported horizontal legend lane "${edge}".`);
+  }
+  if (groups.length < 2) return undefined;
+  const packed = packHorizontalRows(groups, plot);
+  const normalized = packed.map(normalizeHorizontalRow);
+  const placements = [];
+  let previousRowBounds;
+  for (let index = 0; index < normalized.length; index += 1) {
+    const row = normalized[index];
+    const rowBounds = unionBounds(row.map(item => item.occupied));
+    let dy;
+    if (index === 0) {
+      const anchor = edge === "top"
+        ? Math.max(...packed[index].map(item => item.group.horizontal.bottom))
+        : Math.min(...packed[index].map(item => item.group.horizontal.top));
+      dy = edge === "top"
+        ? anchor - rowBounds.bottom
+        : anchor - rowBounds.top;
+    } else {
+      dy = edge === "bottom"
+        ? previousRowBounds.bottom + HORIZONTAL_LEGEND_BLOCK_GAP - rowBounds.top
+        : previousRowBounds.top - HORIZONTAL_LEGEND_BLOCK_GAP - rowBounds.bottom;
+    }
+    const translated = row.map(item => translateHorizontalPlacement(item, dy));
+    placements.push(...translated);
+    previousRowBounds = unionBounds(translated.map(item => item.occupied));
+  }
+  const occupied = unionBounds(placements.map(item => item.occupied));
+  if (placements.some(placement =>
+    placement.occupied.left < 0 || placement.occupied.right > canvas.width ||
+    placement.occupied.top < 0 || placement.occupied.bottom > canvas.height
+  )) {
+    throw new Error(`Legend lane requires more ${edge}-margin or Canvas space.`);
+  }
+  if (placements.some(placement =>
+    collisionBounds.some(bounds => overlap(placement.occupied, bounds))
+  )) {
+    const owner = edge === "top" ? "chart titles" : "x-axis guides";
+    throw new Error(
+      `${edge[0].toUpperCase()}${edge.slice(1)} legend lane and ${owner} require more margin space.`
+    );
+  }
+  return {
+    edge,
+    placements: placements.map(placement => ({
+      ...placement,
+      ...(placement.backgroundId === undefined
+        ? {}
+        : {
+            background: {
+              id: placement.backgroundId,
+              x: placement.foreground.left - placement.padding,
+              y: placement.foreground.top - placement.padding,
+              width: placement.foreground.right - placement.foreground.left +
+                placement.padding * 2,
+              height: placement.foreground.bottom - placement.foreground.top +
+                placement.padding * 2
+            }
+          })
+    })),
+    occupied,
+    rowCount: packed.length
+  };
+}

package/src/materialization/marks/capabilities.js

@@ -32,6 +32,10 @@ export function canMaterializePoint(_program, layer) {
   );
 }
 
+export function canMaterializeTick(_program, layer) {
+  return layer.mark?.type === "tick" && hasCartesianPositionScales(layer);
+}
+
 export function canMaterializeLine(program, layer) {
   const parallel = layer.encoding?.parallel;
   if (parallel !== undefined) {
@@ -76,8 +80,13 @@ export function canMaterializeArea(program, layer) {
     densityTransform !== undefined &&
     (densityTransform.groupBy === undefined ||
       layer.encoding?.group?.field === densityTransform.groupBy);
+  const completeCenter =
+    densityTransform === undefined &&
+    layer.encoding?.y?.stack === "center" &&
+    layer.encoding?.group?.fieldType === "nominal";
   return (
     completeDensity ||
+    completeCenter ||
     layer.encoding?.y2?.scale === layer.encoding.y.scale ||
     layer.encoding?.x2?.scale === layer.encoding.x.scale
   );

package/src/materialization/marks/index.js

@@ -9,7 +9,8 @@ export {
   canMaterializePoint,
   canMaterializeRect,
   canMaterializeRule,
-  canMaterializeText
+  canMaterializeText,
+  canMaterializeTick
 } from "./capabilities.js";
 
 export function getMarkRematerializationStep(layer) {

package/src/materialization/marks/policies.js

@@ -7,6 +7,7 @@ import {
   canMaterializeRect,
   canMaterializeRule,
   canMaterializeText,
+  canMaterializeTick,
   isIntentionallyEmptyArea
 } from "./capabilities.js";
 
@@ -24,6 +25,18 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
     }),
     rematerializeIncompleteExisting: true
   }),
+  tick: Object.freeze({
+    canMaterialize: canMaterializeTick,
+    op: "rematerializeTickMark",
+    positionEncoding: Object.freeze({ incomplete: "mark", scaleFirst: true }),
+    encoding: Object.freeze({ scaleFirst: true }),
+    scaleApplication: Object.freeze({
+      deferWithMark: true,
+      position: "rematerialize",
+      default: "defer"
+    }),
+    rematerializeIncompleteExisting: true
+  }),
   line: Object.freeze({
     canMaterialize: canMaterializeLine,
     op: "rematerializeLineMark",

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

@@ -40,6 +40,15 @@ export function resolveSeriesLayoutDomain({
     ...activeLayouts.flatMap(item => item.values),
     ...directConsumers.flatMap(item => item.values)
   ];
+  if (layout === "center" && scale.domain !== "auto") {
+    const minimum = Math.min(...values);
+    const maximum = Math.max(...values);
+    if (Math.min(...scale.domain) > minimum || Math.max(...scale.domain) < maximum) {
+      throw new Error(
+        `Center layout scale "${id}" explicit domain must contain every centered bound.`
+      );
+    }
+  }
   if (
     ["group", "overlay"].includes(layout) &&
     scale.domain !== "auto" &&

package/src/materialization/scales/resolve.js

@@ -72,6 +72,20 @@ function resolveDefaultDomain({
   });
 }
 
+function resolveCategoryOrderDomain(valuesByConsumer) {
+  const orders = valuesByConsumer
+    .map(item => item.categoryOrder)
+    .filter(order => order !== undefined);
+  if (orders.length === 0) return undefined;
+  const [first, ...rest] = orders;
+  if (rest.some(order =>
+    order.length !== first.length ||
+    order.some((value, index) => !Object.is(value, first[index])))) {
+    throw new Error("Shared scale category order assignments must resolve identically.");
+  }
+  return first;
+}
+
 function resolveRange({
   scale,
   channel,
@@ -225,9 +239,17 @@ export function resolveScaleMaterialization({
         valuesByConsumer,
         seriesLayouts
       });
+  const categoryOrderDomain = isDiscretizedColor
+    ? undefined
+    : resolveCategoryOrderDomain(valuesByConsumer);
+  if (categoryOrderDomain !== undefined && scale.domain !== "auto") {
+    throw new Error(
+      `Scale "${id}" cannot combine an explicit domain with category order.`
+    );
+  }
   const domain = isDiscretizedColor
     ? discretizedScale.domain
-    : binnedDomain ?? seriesDomain ?? resolveDefaultDomain({
+    : categoryOrderDomain ?? binnedDomain ?? seriesDomain ?? resolveDefaultDomain({
         scale,
         allValues,
         isOrdinalAppearance,
@@ -272,7 +294,7 @@ export function resolveScaleMaterialization({
       : isDiscretePosition
         ? resolveDiscretePositionScale({
             type: scale.type,
-            domain: scale.domain,
+            domain: categoryOrderDomain ?? scale.domain,
             values: allValues,
             range: channel === "theta" && consumers.every(
               consumer => consumer.layer.mark?.type === "arc"
@@ -290,7 +312,7 @@ export function resolveScaleMaterialization({
           })
         : isOrdinalPosition
           ? resolveOrdinalPositionScale({
-              domain: scale.domain,
+              domain: categoryOrderDomain ?? scale.domain,
               values: allValues,
               range: scale.range,
               channel,

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

@@ -3,4 +3,5 @@ export { resolveArcItems } from "./arc.js";
 export { resolveBarItems } from "./bar.js";
 export { resolvePointItems } from "./point.js";
 export { resolveRuleItems } from "./rule.js";
+export { resolveTickItems } from "./tick.js";
 export { resolveRectItems } from "./rect.js";

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

@@ -1,4 +1,5 @@
 import {
+  deriveCenteredAreaSeries,
   deriveAreaSeries,
   deriveDensityAreaSeries
 } from "../../../grammar/areaSeries.js";
@@ -73,7 +74,9 @@ export function resolveLineItems(program, layer, dataset) {
 export function resolveAreaItems(program, layer, dataset) {
   const transform = findUpstreamTransform(program, dataset, "density");
   const derived = transform === undefined
-    ? deriveAreaSeries(dataset.values, layer)
+    ? layer.encoding?.y?.stack === "center"
+      ? deriveCenteredAreaSeries(dataset.values, layer)
+      : deriveAreaSeries(dataset.values, layer)
     : deriveDensityAreaSeries(dataset.values, layer, transform);
   return finalizeItems(
     program,

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

@@ -0,0 +1,42 @@
+import { selectMarkItemKeys } from "../../../grammar/markSelection.js";
+import {
+  channelMapFromRow,
+  concreteProperties,
+  finalizeItems,
+  itemKey,
+  ownFields
+} from "./common.js";
+
+export function resolveTickItems(program, layer, dataset) {
+  const graphic = program.graphicSpec.objects[layer.id];
+  const completePosition =
+    layer.encoding?.x?.scale !== undefined &&
+    layer.encoding?.y?.scale !== undefined;
+  if (!Array.isArray(graphic?.items) || !completePosition) {
+    throw new Error(`Tick mark "${layer.id}" is incomplete for selection.`);
+  }
+  let definitions = dataset.values.map((row, index) => ({
+    key: itemKey(layer, "tick", index),
+    fields: ownFields(row),
+    channels: channelMapFromRow(row, layer),
+    properties: concreteProperties(graphic.items[index]?.properties),
+    members: [row]
+  }));
+  for (const config of Object.values(
+    program.materializationConfigs.highlights ?? {}
+  )) {
+    if (config.target !== layer.id || config.bringToFront !== true) continue;
+    const selection = program.materializationConfigs.selections?.[config.selection];
+    if (selection?.target !== layer.id) continue;
+    const selected = new Set(selectMarkItemKeys(definitions, selection.selector));
+    definitions = [
+      ...definitions.filter(definition => !selected.has(definition.key)),
+      ...definitions.filter(definition => selected.has(definition.key))
+    ];
+  }
+  definitions = definitions.map((definition, index) => ({
+    ...definition,
+    properties: concreteProperties(graphic.items[index]?.properties)
+  }));
+  return finalizeItems(program, layer, "tick", definitions, "line");
+}

package/src/materialization/selection/policies/index.js

@@ -6,6 +6,7 @@ import { barSelectionPolicy } from "./bar.js";
 import { lineSelectionPolicy } from "./line.js";
 import { pointSelectionPolicy } from "./point.js";
 import { ruleSelectionPolicy } from "./rule.js";
+import { tickSelectionPolicy } from "./tick.js";
 import { rectSelectionPolicy } from "./rect.js";
 
 const POLICIES = Object.freeze({
@@ -15,6 +16,7 @@ const POLICIES = Object.freeze({
   line: lineSelectionPolicy,
   point: pointSelectionPolicy,
   rule: ruleSelectionPolicy,
+  tick: tickSelectionPolicy,
   rect: rectSelectionPolicy
 });
 

package/src/materialization/selection/policies/tick.js

@@ -0,0 +1,10 @@
+import { resolveTickItems } from "../items/index.js";
+import { normalizeStrokeHighlightStyle } from "../styles.js";
+
+export const tickSelectionPolicy = Object.freeze({
+  supportedGrains: Object.freeze(["item"]),
+  resolveItems: resolveTickItems,
+  normalizeHighlightStyle: args => normalizeStrokeHighlightStyle(args, "Tick"),
+  applyHighlightOp: "applyRuleHighlight",
+  rematerializeOp: "rematerializeTickMark"
+});