@graphysdk/geom-sankey 0.0.0-stage → 0.1.0

package/LICENSE.md

@@ -0,0 +1,17 @@
+# License
+
+This software is available under any of the following licenses, at your option,
+depending on which one's conditions you meet:
+
+- **PolyForm Noncommercial 1.0.0** — for noncommercial use (personal,
+  charitable, educational, research, government).
+  See [licenses/PolyForm-NonCommercial-1.0.0.md](licenses/PolyForm-NonCommercial-1.0.0.md)
+
+- **PolyForm Small Business 1.0.0** — free commercial use for organizations
+  under the size thresholds defined in the license.
+  See [licenses/PolyForm-Small-Business-1.0.0.md](licenses/PolyForm-Small-Business-1.0.0.md)
+
+- **PolyForm Free Trial 1.0.0** — a 32-day evaluation for anyone else.
+  See [licenses/PolyForm-Free-Trial-1.0.0.md](licenses/PolyForm-Free-Trial-1.0.0.md)
+
+For commercial use beyond these terms, contact [hello@graphy.dev](mailto:hello@graphy.dev) or visit [https://graphy.dev](https://graphy.dev).

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# @graphysdk/geom-sankey
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> **Beta.** This geom is on a `0.x` version line: a minor release may change its aesthetics, params, style or look. Use a caret range (`^0.1.0`) to take only patches.
+
+A sankey geom for the Graphy charting SDK. It draws flows between nodes, each flow as wide as its amount, so what runs through a system and where it ends up read at a glance.
+
+Learn more at [graphy.dev](https://graphy.dev).
+
+## Install
+
+```bash
+npm install @graphysdk/geom-sankey @graphysdk/react
+```
+
+Requires React 19. Its only peer is `@graphysdk/react`.
+
+## Usage
+
+Data is one row per flow. Map the node it leaves to `source`, the node it reaches to `target` and its amount to `value`. Each node takes its own color, and each flow the color of the node it leaves. Map `color` to the target column (`color: 'to'`) to color a flow as the node it reaches instead:
+
+```tsx
+import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
+import { sankey } from '@graphysdk/geom-sankey';
+
+const kit = createGraphyKit({ plugins: [sankey] });
+
+const spec = kit.pipe(kit.createSpec({ source: 'from', target: 'to', value: 'twh' }), kit.geom.sankey());
+
+export function Energy({ data }) {
+  return (
+    <kit.GraphProvider spec={spec} data={data}>
+      <GraphRenderer />
+    </kit.GraphProvider>
+  );
+}
+```
+
+The geom lays itself out, so it takes no scales and draws no axes. Style the flows with `kit.style.geom.sankey()`, the nodes with `kit.style.geom.sankey.node()` and their names with `kit.style.geom.sankey.label()`.
+
+## Docs
+
+- [Sankey](https://docs.graphy.dev/sdk-next/graph-types/sankey)
+
+## Feedback
+
+This geom is released early to hear what works. Tell us on [Discord](https://discord.gg/yGmYCjkSr).
+
+## Licence
+
+This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See [what you can do under the trial](https://docs.graphy.dev/licence/evaluation).

package/dist/engine/sankey-layout.d.ts

@@ -0,0 +1,39 @@
+/** Which column a node sits in: d3-sankey's alignments. */
+export type SankeyAlign = 'justify' | 'left' | 'right' | 'center';
+/** One flow to lay out, its ends named by their node's key. */
+export interface SankeyLink {
+    source: string;
+    target: string;
+    value: number;
+}
+/** A node's box in unit space, top-left origin, and the total that runs through it. */
+export interface SankeyNodeBox {
+    key: string;
+    value: number;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+/** A flow's band at each end, in unit space: it leaves its source at `x0` and reaches its target at `x1`. */
+export interface SankeyFlowBand<Link extends SankeyLink = SankeyLink> {
+    /** The link the flow draws, as the layout was given it. */
+    link: Link;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    targetY0: number;
+    targetY1: number;
+}
+export interface SankeyLayout<Link extends SankeyLink = SankeyLink> {
+    /** In the order each node's first link names it. */
+    nodes: SankeyNodeBox[];
+    /** One per link the layout could draw, in the links' order. */
+    flows: Array<SankeyFlowBand<Link>>;
+}
+/**
+ * Lays a sankey out in unit space, so the geometry holds at any panel size. A link that would close a loop, a
+ * self-link included, is dropped: d3-sankey throws on a cycle.
+ */
+export declare const computeSankeyLayout: <Link extends SankeyLink>(links: readonly Link[], align: SankeyAlign) => SankeyLayout<Link>;

package/dist/engine/sankey.geom.d.ts

@@ -0,0 +1,100 @@
+import { AnchorPosition, GeomCompileResult, GeomCompilerInput, GeomMappingValidationInput, GeomObservationPart, GeomStylePart, GeomStyleTarget, Observation, UserInputIssue, Geom } from '@graphysdk/react';
+import { SankeyStat } from './sankey.stat';
+import { SankeyAlign } from './sankey-layout';
+/** A flow is one filled ribbon, so it paints the shared geom vocabulary alone. */
+declare const FLOW_VOCABULARY: {};
+declare const NODE_VOCABULARY: {
+    readonly fill: "paint";
+    readonly fillAlpha: "unitInterval";
+    readonly alpha: "unitInterval";
+    readonly stroke: "color";
+    readonly strokeWidth: "pixels";
+};
+declare const LABEL_VOCABULARY: {
+    readonly fontFamily: "fontFamily";
+    readonly fontSize: "pixels";
+    readonly fontWeight: "fontWeight";
+    readonly textColor: "color";
+    readonly textOutlineColor: "color";
+    readonly textOutlineWidth: "pixels";
+};
+/** Named so the published types reach the vocabularies through `@graphysdk/react`, the package's one peer. */
+interface SankeyStyleTarget extends GeomStyleTarget {
+    observation: GeomObservationPart<typeof FLOW_VOCABULARY>;
+    parts: {
+        node: GeomStylePart<typeof NODE_VOCABULARY>;
+        label: GeomStylePart<typeof LABEL_VOCABULARY>;
+    };
+}
+export interface SankeyParams {
+    /** Which column a node sits in. `justify`, the default, sends a node no flow leaves to the last column. */
+    align: SankeyAlign;
+}
+/**
+ * A sankey diagram: flows between nodes, each as wide as its amount.
+ *
+ * Data is one row per flow: `source` names the node it leaves, `target` the node it reaches, and `value` its
+ * amount. The nodes are the names the flows share, each as tall as the larger of what flows into and out of it.
+ * The geom lays itself out across the panel, so it draws no axes and takes no position scales.
+ */
+export declare class SankeyGeom extends Geom<SankeyParams> {
+    readonly type: "sankey";
+    readonly defaultParams: SankeyParams;
+    readonly defaultStat: SankeyStat;
+    readonly aesthetics: readonly [{
+        readonly kind: "data";
+        readonly name: "source";
+        readonly required: true;
+    }, {
+        readonly kind: "data";
+        readonly name: "target";
+        readonly required: true;
+    }, {
+        readonly kind: "data";
+        readonly name: "value";
+        readonly required: true;
+    }, {
+        readonly kind: "data";
+        readonly name: "node";
+    }, {
+        readonly kind: "visual";
+        readonly name: "color";
+    }, {
+        readonly kind: "visual";
+        readonly name: "alpha";
+    }];
+    readonly identityKey: {
+        variable: "sankeyObservationKey";
+    };
+    /** The layout places every observation, so nothing stacks or dodges on top. */
+    readonly supportedPositions: readonly ["identity"];
+    /** The layout runs left to right across the panel; there is no axis to flip. */
+    readonly supportedCoordTypes: readonly ["cartesian"];
+    /** Every node carries its name beside it, and color can only group by node, so a legend would only repeat them. */
+    readonly legend: {
+        readonly defaultPosition: "none";
+    };
+    readonly spatialKind = "render-hit-test";
+    readonly highlightStrategy: "observation-rerender";
+    /** A flow is headed by the node it leaves. A node has no target, so it gets no row for one. */
+    readonly tooltip: readonly [{
+        readonly aes: "node";
+        readonly heading: true;
+    }, {
+        readonly aes: "target";
+    }, {
+        readonly aes: "value";
+    }];
+    readonly styleTarget: SankeyStyleTarget;
+    /** An annotation measures a flow's amount, or a node's total, which the stat writes in the same column. */
+    readonly resolveValueSource: Geom['resolveValueSource'];
+    /**
+     * Only the `sankey` stat places the flows, and it maps `node` itself. Color and alpha group by node, so they may
+     * only read the source or target column: a node has no value in any other, so it would go unscaled.
+     */
+    readonly validateMapping: ({ mapping, computedVariables, }: GeomMappingValidationInput) => readonly UserInputIssue[];
+    /** A node's center, or the middle of a flow's ribbon. Unit space runs down from the top, an anchor up. */
+    readonly resolveAnchorPosition: (observation: Observation) => AnchorPosition | null;
+    compile({ data }: GeomCompilerInput): GeomCompileResult;
+}
+export {};

package/dist/engine/sankey.stat.d.ts

@@ -0,0 +1,11 @@
+import { StatCompileResult, StatCompilerInput, Stat } from '@graphysdk/react';
+/** The aesthetics this stat maps itself, so a layer under it must not. */
+export declare const SANKEY_STAT_AESTHETICS: ReadonlySet<string>;
+/** The scaled aesthetics nodes paint too. Each groups by node, so it may only read the source or target column. */
+export declare const SANKEY_SCALED_AESTHETICS: readonly ["color", "alpha"];
+/** Lays the flows out and writes one observation per flow drawn, then one per node. */
+export declare class SankeyStat extends Stat {
+    readonly type: "sankey";
+    readonly computedVariables: ReadonlySet<string>;
+    protected computeStat({ data, mapping, params }: StatCompilerInput): StatCompileResult;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let y=require("@graphysdk/react"),S=require("d3-sankey"),O=require("react"),v=require("react/jsx-runtime");var i={kind:"sankeyKind",nodeName:"sankeyNodeName",observationKey:"sankeyObservationKey",nodeKey:"sankeyNodeKey",targetKey:"sankeyTargetKey",x0:"sankeyX0",x1:"sankeyX1",y0:"sankeyY0",y1:"sankeyY1",targetY0:"sankeyTargetY0",targetY1:"sankeyTargetY1"},k=(e,t)=>{const a=e[t];return typeof a=="number"&&Number.isFinite(a)?a:null},K=e=>{const t=e[i.observationKey],a=e[i.nodeKey],n=k(e,i.x0),o=k(e,i.x1),r=k(e,i.y0),s=k(e,i.y1);if(typeof t!="string"||typeof a!="string"||n===null||o===null||r===null||s===null)return null;switch(e[i.kind]){case"node":return{kind:"node",observation:e,key:t,nodeKey:a,x0:n,x1:o,y0:r,y1:s};case"flow":{const l=k(e,i.targetY0),u=k(e,i.targetY1),c=e[i.targetKey];return l===null||u===null||typeof c!="string"?null:{kind:"flow",observation:e,key:t,nodeKey:a,targetKey:c,x0:n,x1:o,y0:r,y1:s,targetY0:l,targetY1:u}}default:return null}},C=new WeakMap,N=e=>{const t=C.get(e);if(t!==void 0)return t;const a=[],n=[];for(const r of e){const s=K(r);s?.kind==="node"&&a.push(s),s?.kind==="flow"&&n.push(s)}const o={nodes:a,flows:n};return C.set(e,o),o},V=(e,t)=>e.nodeKey===t.nodeKey||e.targetKey===t.nodeKey,I=e=>e*e*(3-2*e),F=(e,t)=>{const a=I(t);return{top:e.y0+(e.targetY0-e.y0)*a,bottom:e.y1+(e.targetY1-e.y1)*a}},W=(e,t)=>{const a=e.x1-e.x0;if(a<=0||t.x<e.x0||t.x>e.x1)return!1;const{top:n,bottom:o}=F(e,(t.x-e.x0)/a);return t.y>=n&&t.y<=o},_=(e,t)=>{const a=u=>u*t.width,n=u=>u*t.height,o=a(e.x0),r=a(e.x1),s=a(e.x0+(e.x1-e.x0)/3),l=a(e.x0+(e.x1-e.x0)*2/3);return[`M${o},${n(e.y0)}`,`C${s},${n(e.y0)} ${l},${n(e.targetY0)} ${r},${n(e.targetY0)}`,`L${r},${n(e.targetY1)}`,`C${l},${n(e.targetY1)} ${s},${n(e.y1)} ${o},${n(e.y1)}`,"Z"].join("")},D=.018,G=.03,w={justify:S.sankeyJustify,left:S.sankeyLeft,right:S.sankeyRight,center:S.sankeyCenter},H=(e,t)=>{const a=B(e);if(a.length===0)return{nodes:[],flows:[]};const n=[...new Set(a.flatMap(r=>[r.source,r.target]))],o=(0,S.sankey)().nodeId(r=>r.key).nodeAlign(w[t]).nodeWidth(D).nodePadding(G).extent([[0,0],[1,1]])({nodes:n.map(r=>({key:r})),links:a.map(r=>({source:r.source,target:r.target,value:r.value,link:r}))});return{nodes:o.nodes.map(r=>({key:r.key,value:r.value??0,x0:p(r.x0),x1:p(r.x1),y0:p(r.y0),y1:p(r.y1)})),flows:o.links.map(r=>{const s=r.source,l=r.target,u=(r.width??0)/2;return{link:r.link,x0:p(s.x1),x1:p(l.x0),y0:p((r.y0??0)-u),y1:p((r.y0??0)+u),targetY0:p((r.y1??0)-u),targetY1:p((r.y1??0)+u)}})}},p=e=>Math.min(1,Math.max(0,e??0)),B=e=>{const t=new Map,a=(n,o)=>{const r=new Set,s=[n];for(;s.length>0;){const l=s.pop();if(l===o)return!0;r.has(l)||(r.add(l),s.push(...t.get(l)??[]))}return!1};return e.filter(n=>t.get(n.source)?.has(n.target)===!0?!0:a(n.target,n.source)?!1:(t.set(n.source,(t.get(n.source)??new Set).add(n.target)),!0))},E=new Set(["node"]),j=["color","alpha"],U=["justify","left","right","center"],X=class extends y.Stat{constructor(...e){super(...e),this.type="sankey",this.computedVariables=E}computeStat({data:e,mapping:t,params:a}){const n=Q(e,t);return n===null?{data:e,mapping:{}}:(Z(e,n),{data:ae(e,n,J(a)),mapping:{node:i.nodeName,...R(t,n)}})}},R=(e,t)=>{const a={};for(const n of j){const o=q(n,e[n],t);o!==null&&(a[n]=o)}return a},q=(e,t,{sourceVariable:a,targetVariable:n})=>{if(t===void 0)return e==="color"?i.nodeKey:null;const o=(0,y.readVariableName)(t);return o===a?i.nodeKey:o===n?i.targetKey:null},z=e=>U.includes(e),J=e=>{const t=e?.align;return z(t)?t:"justify"},L=(e,t)=>e===null?null:e instanceof Date?t.type==="year"?String(e.getUTCFullYear()):e.toISOString():String(e),Z=(e,{valueVariable:t})=>{const a=e.getType(t);if(!(e.size()===0||a==="numeric"))throw new y.UserInputError({code:"INCOMPATIBLE_TYPE",message:`'sankey' stat requires a numeric 'value' (got '${a}' for variable '${t}')`,context:{aesthetic:"value",variableName:t,variableType:a},suggestion:"Map each flow's amount to 'value', declaring the column numeric if it holds whole years."})},Q=(e,t)=>{const a=(0,y.readVariableName)(t.source),n=(0,y.readVariableName)(t.target),o=(0,y.readVariableName)(t.value);return a===null||n===null||o===null||![a,n,o].every(r=>e.hasVariable(r))?null:{sourceVariable:a,targetVariable:n,valueVariable:o}},ee=(e,{sourceVariable:t,targetVariable:a,valueVariable:n})=>{const o=e.getValues(t),r=e.getValues(a),s=e.getValues(n,{type:"numeric"}),l=e.getValueFormat(t),u=e.getValueFormat(a),c=new Map,g=new Map,d=[];return o.forEach((h,m)=>{const b=r[m]??null,f=L(h,l),x=L(b,u);if(f===null||x===null)return;g.set(f,h),g.set(x,b);const P=JSON.stringify([f,x]),Y=c.get(P)??0;c.set(P,Y+1);const A=s[m];typeof A!="number"||!Number.isFinite(A)||A<=0||d.push({source:f,target:x,value:A,row:m,occurrence:Y})}),{links:d,names:g}},$=(e,{sourceVariable:t,targetVariable:a})=>e.getType(t)===e.getType(a),te=(e,t,a,n)=>{const o=e.getType(t.sourceVariable);return $(e,t)?{type:o,values:a.map(r=>n.get(r)??null),valueFormat:e.getValueFormat(t.sourceVariable)}:{type:"categorical",values:[...a]}},re=(e,t,a,n,o)=>e===a.valueVariable?n.nodes.map(r=>r.value):e===a.sourceVariable&&$(t,a)?n.nodes.map(r=>o.get(r.key)??null):null,ae=(e,t,a)=>{const{links:n,names:o}=ee(e,t),r=H(n,a),s=r.nodes.length,l=d=>[...d,...Array.from({length:s},()=>null)],u=e.getVariableNames(),c=Object.fromEntries(u.map(d=>{const h=e.getValues(d),m=r.flows.map(({link:x})=>h[x.row]??null),b=re(d,e,t,r,o),f=b===null?l(m):[...m,...b];return[d,{type:e.getType(d),values:f,valueFormat:e.getValueFormat(d)}]})),g=[...r.flows.map(({link:d})=>d.source),...r.nodes.map(({key:d})=>d)];return new y.Dataset({...c,...ne(r),[i.nodeName]:te(e,t,g,o)})},ne=e=>{const t=e.flows.map(({link:l,...u})=>({[i.kind]:"flow",[i.observationKey]:JSON.stringify(["flow",l.source,l.target,l.occurrence]),[i.nodeKey]:l.source,[i.targetKey]:l.target,[i.x0]:u.x0,[i.x1]:u.x1,[i.y0]:u.y0,[i.y1]:u.y1,[i.targetY0]:u.targetY0,[i.targetY1]:u.targetY1})),a=e.nodes.map(l=>({[i.kind]:"node",[i.observationKey]:JSON.stringify(["node",l.key]),[i.nodeKey]:l.key,[i.targetKey]:l.key,[i.x0]:l.x0,[i.x1]:l.x1,[i.y0]:l.y0,[i.y1]:l.y1,[i.targetY0]:null,[i.targetY1]:null})),n=[...t,...a],o=l=>n.map(u=>u[l]),r=l=>({type:"categorical",values:o(l)}),s=l=>({type:"numeric",values:o(l)});return{[i.kind]:r(i.kind),[i.observationKey]:r(i.observationKey),[i.nodeKey]:r(i.nodeKey),[i.targetKey]:r(i.targetKey),[i.x0]:s(i.x0),[i.x1]:s(i.x1),[i.y0]:s(i.y0),[i.y1]:s(i.y1),[i.targetY0]:s(i.targetY0),[i.targetY1]:s(i.targetY1)}},oe=.4,se=.65,ie=12,le=3,ue={},ce={fill:"paint",fillAlpha:"unitInterval",alpha:"unitInterval",stroke:"color",strokeWidth:"pixels"},ye={fontFamily:"fontFamily",fontSize:"pixels",fontWeight:"fontWeight",textColor:"color",textOutlineColor:"color",textOutlineWidth:"pixels"},M=class extends y.Geom{constructor(...e){super(...e),this.type="sankey",this.defaultParams={align:"justify"},this.defaultStat=new X,this.aesthetics=[{kind:"data",name:"source",required:!0},{kind:"data",name:"target",required:!0},{kind:"data",name:"value",required:!0},{kind:"data",name:"node"},{kind:"visual",name:"color"},{kind:"visual",name:"alpha"}],this.identityKey={variable:i.observationKey},this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian"],this.legend={defaultPosition:"none"},this.spatialKind="render-hit-test",this.highlightStrategy="observation-rerender",this.tooltip=[{aes:"node",heading:!0},{aes:"target"},{aes:"value"}],this.styleTarget=(0,y.defineGeomStyleTarget)({observation:{vocabulary:ue,aesthetics:{fill:"color",alpha:"alpha"},rest:{fill:(0,y.token)("geom"),fillAlpha:oe},hovered:{fillAlpha:se}},parts:{node:{vocabulary:ce,aesthetics:{fill:"color",alpha:"alpha"},rest:{fill:(0,y.token)("geom"),fillAlpha:1,alpha:1,stroke:(0,y.token)("graphBackground"),strokeWidth:0}},label:{vocabulary:ye,rest:{fontSize:ie,fontWeight:500,textColor:(0,y.token)("textPrimary"),textOutlineColor:(0,y.token)("graphBackground"),textOutlineWidth:le}}}}),this.resolveValueSource=t=>t.value??null,this.validateMapping=({mapping:t,computedVariables:a})=>{if(!a.has("node"))return[{code:"MISSING_STAT_OUTPUT",message:"sankey geom lays its flows out in the 'sankey' stat; remove the layer's stat"}];const n=[...E].filter(s=>t[s]!==void 0).map(s=>({code:"CONFLICTING_STAT_MAPPING",message:`sankey stat computes '${s}' from 'source' and 'target'; remove its mapping`})),o=[(0,y.readVariableName)(t.source),(0,y.readVariableName)(t.target)],r=j.flatMap(s=>{const l=(0,y.readVariableName)(t[s]);return l===null||o.includes(l)?[]:[{code:"UNSUPPORTED_MAPPING",message:`sankey geom scales '${s}' by node; map it to the source or target column rather than '${l}'`}]});return[...n,...r]},this.resolveAnchorPosition=t=>{const a=K(t);if(a===null)return null;if(a.kind==="node")return{x:(a.x0+a.x1)/2,y:1-(a.y0+a.y1)/2};const{top:n,bottom:o}=F(a,.5);return{x:(a.x0+a.x1)/2,y:1-(n+o)/2}}}compile({data:e}){return{data:e,mapping:{}}}},de=({layer:e,panelRect:t})=>{const{nodes:a,flows:n}=N(e.data),o=s=>s*t.width,r=s=>s*t.height;return[...n.map(s=>({kind:"region",pathData:_(s,t)})),...a.map(s=>({kind:"region",pathData:`M${o(s.x0)},${r(s.y0)}H${o(s.x1)}V${r(s.y1)}H${o(s.x0)}Z`}))]},ge=({flows:e,size:t,source:a,styleReaders:n,isHovered:o=!1,shouldAnimateTransitions:r=!1})=>{const s=o?"hovered":void 0,l=(0,O.useMemo)(()=>e.map(g=>n.get("fill",g.observation,s)??"transparent"),[e,n,s]),{fillFor:u,defs:c}=(0,y.usePaintDefs)({paints:l});return(0,v.jsxs)(v.Fragment,{children:[c,e.map((g,d)=>{const h=l[d],m=n.get("stroke",g.observation,s);return(0,v.jsx)(y.GeomPath,{"data-testid":"sankey-flow",d:_(g,t),source:a,fill:h===void 0?void 0:u(h),opacity:n.get("alpha",g.observation,s),fillOpacity:n.get("fillAlpha",g.observation,s),stroke:m===void 0?void 0:(0,y.toPaintColor)(m),strokeOpacity:n.get("strokeAlpha",g.observation,s),shouldAnimateTransitions:r},g.key)})]})},ve=6,he=e=>{const t=(e.y0+e.y1)/2;return(e.x0+e.x1)/2<.5?{x:e.x1,y:t,offsetX:ve,textAnchor:"start"}:{x:e.x0,y:t,offsetX:-6,textAnchor:"end"}},me=({nodes:e,valueFormat:t,styleReaders:a,isHovered:n=!1})=>{const o=n?"hovered":void 0,r=a.part("label"),s=(0,y.useGraphLocale)(),l=(0,y.useSceneSelector)(c=>c.config.numberFormat),u=(0,O.useMemo)(()=>(0,y.createValueFormatter)({valueFormat:t,locale:s,numberFormat:l}),[t,s,l]);return(0,v.jsx)("g",{pointerEvents:"none",children:e.map(c=>{const g=c.observation[i.nodeName];if(g==null)return null;const d=he(c),h=r?.get("textColor",c.observation,o),m=r?.get("textOutlineColor",c.observation,o);return(0,v.jsx)("text",{"data-testid":"sankey-label",x:(0,y.toPercent)(d.x),y:(0,y.toPercent)(d.y),dx:d.offsetX,textAnchor:d.textAnchor,dominantBaseline:"central",fontFamily:r?.get("fontFamily",c.observation,o),fontSize:r?.get("fontSize",c.observation,o),fontWeight:r?.get("fontWeight",c.observation,o),fill:h===void 0?void 0:(0,y.toPaintColor)(h),stroke:m===void 0?void 0:(0,y.toPaintColor)(m),strokeWidth:r?.get("textOutlineWidth",c.observation,o),strokeLinejoin:"round",paintOrder:"stroke",children:u(g,c.observation)},c.key)})})},pe=({nodes:e,styleReaders:t,isHovered:a=!1,shouldAnimateTransitions:n=!1})=>{const o=a?"hovered":void 0,r=t.part("node"),s=(0,O.useMemo)(()=>e.map(c=>r?.get("fill",c.observation,o)??"transparent"),[e,r,o]),{fillFor:l,defs:u}=(0,y.usePaintDefs)({paints:s});return(0,v.jsxs)(v.Fragment,{children:[u,e.map((c,g)=>{const d=s[g],h=r?.get("stroke",c.observation,o);return(0,v.jsx)(y.GeomRect,{"data-testid":"sankey-node",x:(0,y.toPercent)(c.x0),y:(0,y.toPercent)(c.y0),width:(0,y.toPercent)(c.x1-c.x0),height:(0,y.toPercent)(c.y1-c.y0),fill:d===void 0?void 0:l(d),opacity:r?.get("alpha",c.observation,o),fillOpacity:r?.get("fillAlpha",c.observation,o),stroke:h===void 0?void 0:(0,y.toPaintColor)(h),strokeWidth:r?.get("strokeWidth",c.observation,o),shouldAnimateTransitions:n},c.key)})]})},fe={type:"text"},T=({observations:e,layer:t,size:a,styleReaders:n,isHovered:o=!1,shouldAnimateTransitions:r=!1})=>(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(ge,{flows:e.flows,size:a,source:t,styleReaders:n,isHovered:o,shouldAnimateTransitions:r}),(0,v.jsx)(pe,{nodes:e.nodes,styleReaders:n,isHovered:o,shouldAnimateTransitions:r}),(0,v.jsx)(me,{nodes:e.nodes,valueFormat:t.data.hasVariable(i.nodeName)?t.data.getValueFormat(i.nodeName):fe,styleReaders:n,isHovered:o})]}),xe=({layer:e,size:t,styleReaders:a})=>(0,v.jsx)(T,{observations:N(e.data),layer:e,size:t,styleReaders:a}),ke=({layer:e})=>{const{nodes:t,flows:a}=N(e.data),n=[...t].reverse(),o=[...a].reverse();return r=>{const s=n.find(u=>r.x>=u.x0&&r.x<=u.x1&&r.y>=u.y0&&r.y<=u.y1);if(s!==void 0)return{key:s.key};const l=o.find(u=>W(u,r));return l===void 0?null:{key:l.key}}},be=({layer:e,primary:t,size:a,styleReaders:n})=>{const o=N(e.data),r=t.observation;return(0,v.jsx)("g",{"data-testid":"hovered-observations",children:(0,v.jsx)(T,{observations:(0,O.useMemo)(()=>Se(o,r),[o,r]),layer:e,size:a,styleReaders:n,isHovered:!0})})},Se=(e,t)=>{const a=K(t);if(a===null)return{nodes:[],flows:[]};if(a.kind==="node"){const n=e.flows.filter(r=>V(r,a)),o=new Set(n.flatMap(r=>[r.nodeKey,r.targetKey]));return{nodes:e.nodes.filter(r=>o.has(r.nodeKey)),flows:n}}return{nodes:e.nodes.filter(n=>V(a,n)),flows:[a]}},Ne=({layer:e,size:t,styleReaders:a,shouldAnimateTransitions:n})=>(0,v.jsx)(T,{observations:N(e.data),layer:e,size:t,styleReaders:a,shouldAnimateTransitions:n}),Ae=(0,y.defineGeomRenderer)(new M,{coord:"cartesian",swatchShape:"square",render:({layer:e,panelRect:t,styleReaders:a,shouldAnimateTransitions:n})=>(0,v.jsx)(Ne,{layer:e,size:t,styleReaders:a,shouldAnimateTransitions:n}),renderHighlight:({layer:e,panelRect:t,styleReaders:a})=>(0,v.jsx)(xe,{layer:e,size:t,styleReaders:a}),renderHover:({layer:e,primary:t,panelRect:a,styleReaders:n})=>(0,v.jsx)(be,{layer:e,primary:t,size:a,styleReaders:n}),renderHoverCompanions:()=>null,hitTest:ke,getEditOutlineShapes:de});exports.SankeyGeom=M;exports.sankey=Ae;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { SankeyGeom } from './engine/sankey.geom';
+export { sankey } from './renderer/sankey';