@graphysdk/geom-funnel 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,478 @@
+import { Geom as z, GeomPath as J, GeomRect as Q, IntroFade as ee, POSITION_VARIABLES as S, Stat as te, UserInputError as D, buildPanelAnchorBox as re, composePoint as E, createStableKeyGenerator as ne, defineGeomRenderer as ae, defineGeomStyleTarget as ie, getX as oe, getXMax as I, getXMin as L, getY as se, getYMax as B, getYMin as _, readMainAxis as h, readVariableName as v, resolveAnchoredLabelCenter as le, toPaintColor as x, toPercent as w, toViewBoxX as M, toViewBoxY as V, token as F } from "@graphysdk/react";
+import { useMemo as p } from "react";
+import { Fragment as ue, jsx as d, jsxs as ce } from "react/jsx-runtime";
+var g = {
+  percentOfFirst: "funnelPercentOfFirst",
+  percentOfPrevious: "funnelPercentOfPrevious"
+}, de = 0.7, G = ({ width: e }) => e ?? de, K = (e, r) => {
+  const t = r === "x" ? oe(e) : se(e), n = r === "x" ? L(e) : _(e), a = r === "x" ? I(e) : B(e), i = r === "x" ? _(e) : L(e), o = r === "x" ? B(e) : I(e);
+  return t === null || n === null || a === null || i === null || o === null ? null : {
+    observation: e,
+    band: t,
+    bandStart: n,
+    bandEnd: a,
+    low: i,
+    high: o
+  };
+}, m = (e, r) => {
+  const t = [];
+  for (const n of e) {
+    const a = K(n, r);
+    a !== null && t.push(a);
+  }
+  return t;
+}, R = (e) => e === null || !Number.isFinite(e) || e < 0 ? null : e, he = (e) => {
+  let r = null, t = null;
+  return e.map((n) => {
+    const a = R(n);
+    if (a === null) return {
+      percentOfFirst: null,
+      percentOfPrevious: null
+    };
+    r ??= a;
+    const i = {
+      percentOfFirst: $(a, r),
+      percentOfPrevious: t === null ? 1 : $(a, t)
+    };
+    return t = a, i;
+  });
+}, $ = (e, r) => r === 0 ? null : e / r, Y = {
+  percentOfFirst: g.percentOfFirst,
+  percentOfPrevious: g.percentOfPrevious
+}, U = new Set(Object.keys(Y)), H = {
+  percentOfFirst: null,
+  percentOfPrevious: null
+}, pe = class extends te {
+  constructor(...e) {
+    super(...e), this.type = "funnel", this.computedVariables = U;
+  }
+  computeStat({ data: e, mapping: r }) {
+    const t = v(r.y);
+    if (t === null || !e.hasVariable(t)) return {
+      data: e,
+      mapping: {}
+    };
+    if (e.size() > 0 && e.getType(t) !== "numeric") {
+      const o = e.getType(t);
+      throw new D({
+        code: "INCOMPATIBLE_TYPE",
+        message: `'funnel' stat requires a numeric 'y' (got '${o}' for variable '${t}')`,
+        context: {
+          aesthetic: "y",
+          variableName: t,
+          variableType: o
+        },
+        suggestion: "Map each stage's count to 'y', or its shares to 'percentOfFirst' and 'percentOfPrevious' under stat 'identity'."
+      });
+    }
+    const n = v(r.group), a = me(e, n !== null && e.hasVariable(n) ? [n] : []), i = v(r.x);
+    return i !== null && e.hasVariable(i) && ve(e, i, a), {
+      data: ge(e, t, a),
+      mapping: Y
+    };
+  }
+}, ge = (e, r, t) => {
+  const n = e.getValues(r, { type: "numeric" }), a = fe(n, t), i = { type: "percentage" };
+  return e.addVariable(g.percentOfFirst, "numeric", a.map((o) => o.percentOfFirst), i).addVariable(g.percentOfPrevious, "numeric", a.map((o) => o.percentOfPrevious), i);
+}, fe = (e, r) => {
+  const t = e.map(() => H);
+  for (const n of X(r).values()) {
+    const a = he(n.map((i) => e[i] ?? null));
+    n.forEach((i, o) => {
+      t[i] = a[o] ?? H;
+    });
+  }
+  return t;
+}, ve = (e, r, t) => {
+  const n = e.getValues(r);
+  for (const a of X(t).values()) {
+    const i = /* @__PURE__ */ new Set();
+    for (const o of a) {
+      const s = String(n[o]);
+      if (i.has(s)) throw new D({
+        code: "INVALID_DATA_SHAPE",
+        message: `funnel stage '${s}' appears more than once in one funnel (variable '${r}')`,
+        context: {
+          aesthetic: "x",
+          variableName: r
+        },
+        suggestion: "Aggregate to one row per stage, or map 'group' to the variable that tells the funnels apart."
+      });
+      i.add(s);
+    }
+  }
+}, X = (e) => {
+  const r = /* @__PURE__ */ new Map();
+  return e.forEach((t, n) => {
+    const a = r.get(t);
+    a === void 0 ? r.set(t, [n]) : a.push(n);
+  }), r;
+}, me = (e, r) => {
+  const t = r.map((n) => e.getValues(n));
+  return Array.from({ length: e.size() }, (n, a) => JSON.stringify(t.map((i) => i[a])));
+}, be = 5e-4, k = (e, r) => {
+  const t = (e.low + e.high) / 2, n = Math.max(e.high - e.low, be) / 2, a = E(r, {
+    main: e.bandStart,
+    cross: t - n
+  }), i = E(r, {
+    main: e.bandEnd,
+    cross: t + n
+  }), [o, s] = W(M(a.x), M(i.x)), [l, c] = W(V(a.y), V(i.y));
+  return {
+    x: o,
+    y: l,
+    width: s - o,
+    height: c - l
+  };
+}, W = (e, r) => e <= r ? [e, r] : [r, e], ye = (e) => {
+  const r = [];
+  if (!e.layer.dataLabels.showDataLabels) return {
+    labels: r,
+    droppedCount: 0
+  };
+  const { position: t, justify: n, align: a, offset: i } = e.layer.dataLabels, o = h(e.coordSystem), s = re(e.panelRect), { width: l, height: c } = e.panelRect;
+  for (const u of m(e.layer.data, o)) {
+    const O = e.formatLabel(u.observation);
+    if (O === "") continue;
+    const b = k(u, o), j = {
+      x: b.x * l,
+      y: b.y * c,
+      width: b.width * l,
+      height: b.height * c
+    }, P = (T, q, Z) => {
+      const y = e.measureDataLabel("observation", T, O);
+      return {
+        ...le({
+          box: j,
+          panel: s,
+          orientation: we(o),
+          placement: T,
+          justify: q,
+          align: Z,
+          offset: i,
+          labelWidth: y.width,
+          labelHeight: y.height
+        }),
+        width: y.width,
+        height: y.height
+      };
+    }, A = t === "auto" ? P("inside", "center", "center") : null, f = A === null ? P(t === "auto" ? "outside" : t, n, a) : A.position === "inside" ? A : P("outside", "end", "center");
+    r.push({
+      layerId: e.layer.id,
+      x: f.x,
+      y: f.y,
+      text: O,
+      width: f.width,
+      height: f.height,
+      isRotated: !1,
+      role: "observation",
+      position: f.position
+    });
+  }
+  return {
+    labels: r,
+    droppedCount: 0
+  };
+}, we = (e) => e === "x" ? {
+  valueAxis: "y",
+  valueDirectionSign: -1
+} : {
+  valueAxis: "x",
+  valueDirectionSign: 1
+}, Se = 0.25, xe = { strokeWidth: "pixels" }, Oe = {
+  fill: "color",
+  fillAlpha: "unitInterval",
+  stroke: "color",
+  strokeWidth: "pixels"
+}, Pe = class extends z {
+  constructor(...e) {
+    super(...e), this.type = "funnel", this.defaultParams = {}, this.defaultStat = new pe(), this.positionRoles = [
+      {
+        axis: "x",
+        role: "point",
+        valueKind: "value"
+      },
+      {
+        axis: "y",
+        role: "min",
+        valueKind: "value",
+        aes: "y"
+      },
+      {
+        axis: "y",
+        role: "max",
+        valueKind: "value",
+        aes: "y"
+      }
+    ], this.aesthetics = [
+      {
+        kind: "visual",
+        name: "color"
+      },
+      {
+        kind: "data",
+        name: "percentOfFirst"
+      },
+      {
+        kind: "data",
+        name: "percentOfPrevious"
+      }
+    ], this.derivedVariables = [g.percentOfFirst, g.percentOfPrevious], this.supportedPositions = ["identity"], this.supportedCoordTypes = ["cartesian", "flip"], this.scaleConstraints = { discreteMainAxis: !0 }, this.grid = {
+      cartesian: {
+        hideGridX: !0,
+        hideGridY: !0
+      },
+      flip: {
+        hideGridX: !0,
+        hideGridY: !0
+      }
+    }, this.legend = { suppressWhenSingleItem: !0 }, this.dataLabelCoordTypes = ["cartesian", "flip"], this.getDataLabelPlacements = ye, this.spatialKind = "rects", this.highlightStrategy = "observation-rerender", this.tooltip = [
+      { aes: "y" },
+      {
+        key: "% of first",
+        aes: "percentOfFirst"
+      },
+      {
+        key: "% of previous",
+        aes: "percentOfPrevious"
+      }
+    ], this.styleTarget = ie({
+      observation: {
+        vocabulary: xe,
+        aesthetics: {
+          fill: "color",
+          alpha: "alpha"
+        },
+        rest: {
+          fill: F("geom"),
+          fillAlpha: 1,
+          strokeWidth: 0
+        }
+      },
+      parts: { connector: {
+        vocabulary: Oe,
+        aesthetics: { fill: "color" },
+        rest: {
+          fill: F("geom"),
+          fillAlpha: Se,
+          stroke: F("geom"),
+          strokeWidth: 0
+        }
+      } }
+    }), this.resolveBandFraction = (r) => G(r), this.validateMapping = ({ mapping: r, computedVariables: t }) => t.has("percentOfFirst") ? [...U].filter((n) => r[n] !== void 0).map((n) => ({
+      code: "CONFLICTING_STAT_MAPPING",
+      message: `funnel stat computes '${n}' from 'y'; remove its mapping, or set the layer's stat to 'identity'`
+    })) : [], this.resolveAnchorPosition = (r, { coordSystem: t }) => {
+      const n = h(t), a = K(r, n);
+      return a === null ? null : n === "x" ? {
+        x: a.band,
+        y: a.high
+      } : {
+        x: a.high,
+        y: a.band
+      };
+    };
+  }
+  resolveParams(e) {
+    const { width: r, ...t } = super.resolveParams(e);
+    return {
+      ...t,
+      ...Ae(r, e.diagnostics)
+    };
+  }
+  compile({ data: e, mapping: r, params: t }) {
+    const n = v(r.y);
+    if (n === null || !e.hasVariable(n)) return {
+      data: e,
+      mapping: {}
+    };
+    const a = G(t) / 2;
+    return {
+      data: Fe(e, n).addConstantVariable(S.xMin, "numeric", -a).addConstantVariable(S.xMax, "numeric", a),
+      mapping: {}
+    };
+  }
+}, Ae = (e, r) => {
+  if (e === void 0) return {};
+  const t = typeof e == "number" && Number.isFinite(e) ? e : null;
+  if (t !== null && t > 0 && t <= 1) return { width: t };
+  const n = t !== null && t > 1 ? 1 : void 0;
+  return r?.addWarning({
+    code: "INVALID_GEOM_PARAM",
+    message: `Funnel width must be a fraction in (0, 1], got ${String(e)}; falling back to ${n ?? "the default band"}.`,
+    context: {
+      geom: "funnel",
+      param: "width",
+      expected: "0 < width <= 1",
+      actual: t ?? String(e)
+    },
+    suggestion: "Set params.width to a fraction of the stage band in (0, 1]."
+  }), n === void 0 ? {} : { width: n };
+}, Fe = (e, r) => {
+  const t = e.getValues(r, { type: "numeric" }).map(R);
+  return e.addVariable(S.yMin, "numeric", t.map((n) => n === null ? null : -n / 2)).addVariable(S.yMax, "numeric", t.map((n) => n === null ? null : n / 2));
+}, Ee = ({ layer: e, coordSystem: r, panelRect: t }) => {
+  const n = h(r);
+  return m(e.data, n).map((a) => {
+    const i = k(a, n), o = i.x * t.width;
+    return {
+      kind: "region",
+      pathData: `M${o},${i.y * t.height}H${(i.x + i.width) * t.width}V${(i.y + i.height) * t.height}H${o}Z`
+    };
+  });
+}, C = (e) => {
+  const r = ne(e.data, e.mapping, e.id);
+  return (t) => r(t.observation);
+}, Me = (e, r, t, n = null) => Ve(e, n).flatMap((a) => {
+  const i = ke(a);
+  return i.slice(1).flatMap((o, s) => {
+    const l = i[s];
+    return l === void 0 ? [] : [Ce(l, o, r, t)];
+  });
+}), Ve = (e, r) => {
+  if (r === null) return [[...e]];
+  const t = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    const a = n.observation[r], i = t.get(a);
+    i === void 0 ? t.set(a, [n]) : i.push(n);
+  }
+  return [...t.values()];
+}, ke = (e) => {
+  const r = e[0], t = e[e.length - 1], n = r !== void 0 && t !== void 0 && r.band > t.band ? -1 : 1;
+  return [...e].sort((a, i) => (a.band - i.band) * n);
+}, Ce = (e, r, t, n) => {
+  const a = r.band >= e.band, i = a ? e.bandEnd : e.bandStart, o = a ? r.bandStart : r.bandEnd, s = (l, c) => {
+    const u = E(t, {
+      main: l,
+      cross: c
+    });
+    return {
+      x: M(u.x) * n.width,
+      y: V(u.y) * n.height
+    };
+  };
+  return {
+    from: e,
+    to: r,
+    corners: [
+      s(i, e.low),
+      s(i, e.high),
+      s(o, r.high),
+      s(o, r.low)
+    ]
+  };
+}, Ne = ({ corners: e }) => `${e.map((r, t) => `${t === 0 ? "M" : "L"}${r.x},${r.y}`).join("")}Z`, N = ({ stages: e, connectors: r = [], connectorSource: t, mainAxis: n, styleReaders: a, getKey: i, isHovered: o = !1, shouldAnimateTransitions: s = !1 }) => {
+  const l = o ? "hovered" : void 0, c = a.part("connector");
+  return /* @__PURE__ */ ce(ue, { children: [c && t !== void 0 && r.map((u) => /* @__PURE__ */ d(Te, {
+    connector: u,
+    source: t,
+    readers: c,
+    shouldAnimateTransitions: s
+  }, `${i(u.from)}-connector`)), e.map((u) => /* @__PURE__ */ d(Ie, {
+    stage: u,
+    mainAxis: n,
+    styleReaders: a,
+    state: l,
+    shouldAnimateTransitions: s
+  }, i(u)))] });
+}, Te = ({ connector: e, source: r, readers: t, shouldAnimateTransitions: n }) => {
+  const { observation: a } = e.from, i = t.get("fill", a), o = t.get("stroke", a);
+  return /* @__PURE__ */ d(J, {
+    "data-testid": "funnel-connector",
+    d: Ne(e),
+    source: r,
+    fill: i === void 0 ? void 0 : x(i),
+    fillOpacity: t.get("fillAlpha", a),
+    stroke: o === void 0 ? void 0 : x(o),
+    strokeWidth: t.get("strokeWidth", a),
+    shouldAnimateTransitions: n
+  });
+}, Ie = ({ stage: e, mainAxis: r, styleReaders: t, state: n, shouldAnimateTransitions: a }) => {
+  const i = k(e, r), o = t.get("fill", e.observation, n), s = t.get("stroke", e.observation, n);
+  return /* @__PURE__ */ d(Q, {
+    "data-testid": "funnel-bar",
+    x: w(i.x),
+    y: w(i.y),
+    width: w(i.width),
+    height: w(i.height),
+    fill: o === void 0 ? void 0 : x(o),
+    opacity: t.get("alpha", e.observation, n),
+    fillOpacity: t.get("fillAlpha", e.observation, n),
+    stroke: s === void 0 ? void 0 : x(s),
+    strokeWidth: t.get("strokeWidth", e.observation, n),
+    shouldAnimateTransitions: a
+  });
+}, Le = ({ layer: e, sourceLayer: r, mainAxis: t, styleReaders: n }) => /* @__PURE__ */ d(N, {
+  stages: p(() => m(e.data, t), [e.data, t]),
+  mainAxis: t,
+  styleReaders: n,
+  getKey: p(() => C(r), [r])
+}), Be = ({ layer: e, primary: r, siblings: t, mainAxis: n, styleReaders: a }) => /* @__PURE__ */ d("g", {
+  "data-testid": "hovered-stages",
+  children: /* @__PURE__ */ d(N, {
+    stages: m([r, ...t].map((i) => i.observation), n),
+    mainAxis: n,
+    styleReaders: a,
+    getKey: p(() => C(e), [e]),
+    isHovered: !0
+  })
+}), _e = ({ layer: e, mainAxis: r, panelWidth: t, panelHeight: n, styleReaders: a, shouldAnimateTransitions: i, intro: o }) => {
+  const s = p(() => m(e.data, r), [e.data, r]), l = v(e.mapping.group), c = /* @__PURE__ */ d(N, {
+    stages: s,
+    connectors: p(() => Me(s, r, {
+      width: t,
+      height: n
+    }, l), [
+      s,
+      r,
+      t,
+      n,
+      l
+    ]),
+    connectorSource: e,
+    mainAxis: r,
+    styleReaders: a,
+    getKey: p(() => C(e), [e]),
+    shouldAnimateTransitions: i
+  }), u = Ge(o);
+  return u === null ? c : /* @__PURE__ */ d(ee, {
+    intro: u,
+    children: c
+  });
+}, Ge = (e) => e == null ? null : {
+  type: "fade",
+  layerId: e.layerId,
+  durationSeconds: e.durationSeconds
+}, De = ae(new Pe(), {
+  coord: "cartesian",
+  swatchShape: "square",
+  guideMode: "band",
+  render: ({ layer: e, coordSystem: r, panelRect: t, styleReaders: n, shouldAnimateTransitions: a, intro: i }) => /* @__PURE__ */ d(_e, {
+    layer: e,
+    mainAxis: h(r),
+    panelWidth: t.width,
+    panelHeight: t.height,
+    styleReaders: n,
+    shouldAnimateTransitions: a,
+    intro: i
+  }),
+  renderHighlight: ({ layer: e, sourceLayer: r, coordSystem: t, styleReaders: n }) => /* @__PURE__ */ d(Le, {
+    layer: e,
+    sourceLayer: r,
+    mainAxis: h(t),
+    styleReaders: n
+  }),
+  renderHover: ({ layer: e, primary: r, group: t, related: n, coordSystem: a, styleReaders: i }) => /* @__PURE__ */ d(Be, {
+    layer: e,
+    primary: r,
+    siblings: [...t, ...n],
+    mainAxis: h(a),
+    styleReaders: i
+  }),
+  renderHoverCompanions: () => null,
+  getEditOutlineShapes: Ee
+});
+export {
+  Pe as FunnelGeom,
+  De as funnel
+};

package/dist/renderer/funnel-edit-outline.d.ts

@@ -0,0 +1,3 @@
+import { EditOutlineShape, GeomEditOutlineShapesRendererInput } from '@graphysdk/react';
+/** What point and edit outlines round the stages they take, each as its bar. A connector belongs to no one stage. */
+export declare const getFunnelEditOutlineShapes: ({ layer, coordSystem, panelRect, }: GeomEditOutlineShapesRendererInput) => EditOutlineShape[];

package/dist/renderer/funnel-highlight.d.ts

@@ -0,0 +1,11 @@
+import { GeomStyleReaders, MainAxis, SceneLayer } from '@graphysdk/react';
+interface HighlightedStagesProps {
+    layer: SceneLayer;
+    /** The whole layer the matched observations were taken from. */
+    sourceLayer: SceneLayer;
+    mainAxis: MainAxis;
+    styleReaders: GeomStyleReaders;
+}
+/** Repaints the matched bars above the dimmed layer. */
+export declare const HighlightedStages: ({ layer, sourceLayer, mainAxis, styleReaders }: HighlightedStagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/renderer/funnel-hover.d.ts

@@ -0,0 +1,12 @@
+import { GeomStyleReaders, HoverHit, MainAxis, SceneLayer } from '@graphysdk/react';
+interface HoveredStagesProps {
+    layer: SceneLayer;
+    primary: HoverHit;
+    /** Any other bar of the hovered stage, from duplicate rows. */
+    siblings: readonly HoverHit[];
+    mainAxis: MainAxis;
+    styleReaders: GeomStyleReaders;
+}
+/** The hovered stage's bar, repainted above the dimmed layer. */
+export declare const HoveredStages: ({ layer, primary, siblings, mainAxis, styleReaders }: HoveredStagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/renderer/funnel-layer.d.ts

@@ -0,0 +1,19 @@
+import { GeomStyleReaders, LayerIntroPlan, MainAxis, SceneLayer } from '@graphysdk/react';
+interface FunnelLayerProps {
+    layer: SceneLayer;
+    mainAxis: MainAxis;
+    /** The panel's pixel size, which the connectors are drawn in. */
+    panelWidth: number;
+    panelHeight: number;
+    styleReaders: GeomStyleReaders;
+    shouldAnimateTransitions: boolean;
+    intro: LayerIntroPlan | null | undefined;
+}
+/**
+ * The layer's own paint, connectors included. The whole layer fades up on one clock, whatever entrance the engine
+ * plans: a bar is a rect to the engine, which plans a bar's grow, but a funnel's bars are centred, with no baseline
+ * to grow from. The fade is independent of `shouldAnimateTransitions`: it rides the group rather than moving the
+ * marks, so it plays even when data changes snap.
+ */
+export declare const FunnelLayer: ({ layer, mainAxis, panelWidth, panelHeight, styleReaders, shouldAnimateTransitions, intro, }: FunnelLayerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/renderer/funnel-paint.d.ts

@@ -0,0 +1,26 @@
+import { GeomStyleReaders, MainAxis, SceneLayer } from '@graphysdk/react';
+import { Stage } from '../utils/read-funnel';
+import { Connector } from './utils/connector-geometry';
+/** What one pass paints: its connectors below, its bars above them. */
+export interface FunnelPaintProps {
+    stages: readonly Stage[];
+    /**
+     * The bands between bars. Only the layer's own paint draws them: a hover or highlight repaint raises bars, and
+     * a connector belongs to no one stage.
+     */
+    connectors?: readonly Connector[];
+    /** The layer the connectors are drawn from, so a resize redraws them where the bars already are. */
+    connectorSource?: SceneLayer;
+    mainAxis: MainAxis;
+    styleReaders: GeomStyleReaders;
+    /** What identifies each bar across a data change, so a spring moves a mark rather than swapping it. */
+    getKey: (stage: Stage) => string;
+    /** Paints in the `hovered` state. */
+    isHovered?: boolean;
+    /**
+     * Whether bars and connectors spring to their new shapes when the data changes. The hover and highlight
+     * repaints mount and unmount with the interaction, so only the layer's own paint animates.
+     */
+    shouldAnimateTransitions?: boolean;
+}
+export declare const FunnelPaint: ({ stages, connectors, connectorSource, mainAxis, styleReaders, getKey, isHovered, shouldAnimateTransitions, }: FunnelPaintProps) => import("react/jsx-runtime").JSX.Element;

package/dist/renderer/funnel.d.ts

@@ -0,0 +1,17 @@
+import { BoundGeomRendererDefinition } from '@graphysdk/react';
+import { FunnelGeom } from '../engine/funnel.geom';
+/**
+ * The funnel plugin: pass it to `createGraphyKit({ plugins: [funnel] })` for `kit.geom.funnel()`.
+ *
+ * @example
+ *   const kit = createGraphyKit({ plugins: [funnel] });
+ *   const spec = kit.pipe(
+ *     kit.createSpec({ x: 'stage', y: 'visitors' }),
+ *     kit.geom.funnel({ dataLabels: { showDataLabels: true } }),
+ *     kit.scale.x.discrete(),
+ *     kit.scale.y.continuous(),
+ *     kit.coord.flip(),
+ *     kit.config({ axes: { y: { isVisible: false } } })
+ *   );
+ */
+export declare const funnel: BoundGeomRendererDefinition<FunnelGeom>;

package/dist/renderer/utils/connector-geometry.d.ts

@@ -0,0 +1,27 @@
+import { MainAxis } from '@graphysdk/react';
+import { Stage } from '../../utils/read-funnel';
+/** A point in the panel's local pixels, y growing downward. */
+export interface PanelPoint {
+    x: number;
+    y: number;
+}
+/** The band joining one stage's bar to the next, and the two stages it joins. */
+export interface Connector {
+    from: Stage;
+    to: Stage;
+    /** Its four corners, round the shape: the first bar's two ends, then the second's, far end first. */
+    corners: readonly [PanelPoint, PanelPoint, PanelPoint, PanelPoint];
+}
+/**
+ * One connector per pair of stages next to each other on the stage axis, within each `group`: from the first
+ * bar's edge facing the second to the second's edge facing the first, narrowing from the one's extent to the
+ * other's, so it runs across the gap whichever way the stage axis runs. The funnel runs from its first stage in
+ * the data towards its last, so a connector leaves the stage on that side. In pixels, since a path has no
+ * percentage units.
+ */
+export declare const readConnectors: (stages: readonly Stage[], mainAxis: MainAxis, panelSize: {
+    width: number;
+    height: number;
+}, groupVariable?: string | null) => Connector[];
+/** The connector's outline as SVG path data. Always four corners, so a change of shape morphs point for point. */
+export declare const toConnectorPath: ({ corners }: Connector) => string;

package/dist/renderer/utils/funnel-keys.d.ts

@@ -0,0 +1,7 @@
+import { SceneLayer } from '@graphysdk/react';
+import { Stage } from '../../utils/read-funnel';
+/**
+ * A bar keys on its stage, read from the raw value rather than the band: the band moves with the domain, the
+ * very change a mark should spring through, not remount on.
+ */
+export declare const createFunnelKeys: (layer: SceneLayer) => ((stage: Stage) => string);

package/dist/utils/funnel-columns.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The columns `compile()` writes beside the position columns. Authors name them in a `highlight`, an entry's
+ * `where` or a label mapping, so they are part of the geom's API.
+ */
+export declare const FUNNEL_COLUMNS: {
+    /** A stage's value as a share of the first stage's, which is what a funnel's conversion reads from. */
+    readonly percentOfFirst: "funnelPercentOfFirst";
+    /** A stage's value as a share of the stage before it: the step's own conversion. */
+    readonly percentOfPrevious: "funnelPercentOfPrevious";
+};

package/dist/utils/funnel-params.d.ts

@@ -0,0 +1,6 @@
+/** Funnel parameters: geometry the compiler places. */
+export interface FunnelGeomParams {
+    /** Bar width as a fraction of the band the discrete scale allocates to the stage, in `(0, 1]`. */
+    width?: number;
+}
+export declare const readBarWidth: ({ width }: FunnelGeomParams) => number;

package/dist/utils/read-funnel.d.ts

@@ -0,0 +1,21 @@
+import { MainAxis, Observation } from '@graphysdk/react';
+/** A stage's bar, placed by its band on the main axis and its centred extent on the other, as `[0, 1]` fractions. */
+export interface Stage {
+    observation: Observation;
+    /** The centre of the bar's band. */
+    band: number;
+    /** The bar's two edges on the main axis. */
+    bandStart: number;
+    bandEnd: number;
+    /** The bar's two ends on the value axis, lower first, either side of the funnel's centre line. */
+    low: number;
+    high: number;
+}
+/**
+ * Reads where a stage's bar sits. The flip is already baked into the position columns, so under `coord.flip()`
+ * the band is `y`/`yMin`/`yMax` and the bar runs `xMin` to `xMax`. `null` for a stage with no value, which
+ * draws nothing.
+ */
+export declare const readStage: (observation: Observation, mainAxis: MainAxis) => Stage | null;
+/** Reads every stage of a layer in its data order, which is the order the funnel runs in. */
+export declare const readStages: (observations: Iterable<Observation>, mainAxis: MainAxis) => Stage[];

package/dist/utils/stage-geometry.d.ts

@@ -0,0 +1,11 @@
+import { MainAxis } from '@graphysdk/react';
+import { Stage } from './read-funnel';
+/** A box in the `[0, 1]` view box, from its top left, y growing downward. */
+export interface ViewBoxRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** A stage's bar across its share of the band, centred on the funnel's centre line. */
+export declare const readStageBox: (stage: Stage, mainAxis: MainAxis) => ViewBoxRect;