@graphysdk/geom-mekko 0.1.0 → 0.1.1-beta.1792411689978

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let n=require("@graphysdk/react"),x=require("react"),f=require("react/jsx-runtime");var V=(e,t)=>{const a=t==="x"?(0,n.getXMin)(e):(0,n.getYMin)(e),o=t==="x"?(0,n.getXMax)(e):(0,n.getYMax)(e),r=t==="x"?(0,n.getYMin)(e):(0,n.getXMin)(e),s=t==="x"?(0,n.getYMax)(e):(0,n.getXMax)(e);return a===null||o===null||r===null||s===null?null:{observation:e,columnStart:a,columnEnd:o,low:r,high:s}},S=(e,t)=>{const a=[];for(const o of e){const r=V(o,t);r!==null&&a.push(r)}return a},w=e=>e===null||!Number.isFinite(e)||e<=0?null:e,B=(e,t,a,o="data")=>{const r=a.map(w),s=I(t),l=e.map((d,c)=>c).sort((d,c)=>(s.get(t[d])??0)-(s.get(t[c])??0)),u=new Map;for(const d of l){const c=e[d],m=r[d];c===null||m===null||m===void 0||u.set(c,(u.get(c)??0)+m)}const v=new Map;let h=0;for(const[d,c]of j([...u],o)){const m=h;h+=c,v.set(d,{start:m,end:h})}const i=h;if(i===0)return r.map(()=>null);const g=r.map(()=>null),p=new Map;for(const d of l){const c=e[d],m=r[d],k=u.get(c),b=v.get(c);if(m==null||k===void 0||k===0||b===void 0)continue;const M=p.get(c)??0;p.set(c,M+m),g[d]={columnStart:b.start/i,columnEnd:b.end/i,cellStart:M/k,cellEnd:(M+m)/k,shareOfColumn:m/k,columnShare:k/i}}return g},I=e=>{const t=new Map;for(const a of e)t.has(a)||t.set(a,t.size);return t},j=(e,t)=>{if(t==="data")return e;if(t==="ascending")return[...e].sort(([,r],[,s])=>r-s);if(t==="descending")return[...e].sort(([,r],[,s])=>s-r);const a=I(t),o=r=>a.get(r)??a.size;return[...e].sort(([r],[s])=>o(r)-o(s))},y={shareOfColumn:"mekkoShareOfColumn",columnShare:"mekkoColumnShare"},G=["data","ascending","descending"],P=e=>G.includes(e)||Array.isArray(e)&&e.every(t=>typeof t=="string"||typeof t=="number"),D=e=>{const t=e?.sort;return P(t)?t:"data"},E=new Set(["value","columnShare"]),O="mekkoAmount",K=class extends n.Stat{constructor(...e){super(...e),this.type="mekko",this.computedVariables=E}computeStat({data:e,mapping:t,params:a}){const o=(0,n.readVariableName)(t.x),r=(0,n.readVariableName)(t.y);if(o===null||r===null||!e.hasVariable(o)||!e.hasVariable(r))return{data:e,mapping:{}};if(e.size()>0&&e.getType(r)!=="numeric"){const u=e.getType(r);throw new n.UserInputError({code:"INCOMPATIBLE_TYPE",message:`'mekko' stat requires a numeric 'y' (got '${u}' for variable '${r}')`,context:{aesthetic:"y",variableName:r,variableType:u},suggestion:"Map each cell's amount to 'y'."})}const s=(0,n.getGroupVariables)(e,t).filter(u=>u!==o),l=H(e,o,r,s);return{data:R(l,o,r,s,D(a)),mapping:{y:y.shareOfColumn,value:r,columnShare:y.columnShare}}}},H=(e,t,a,o)=>{const r=e.getValues(a,{type:"numeric"}).map(w);return e.addVariable(O,"numeric",r,e.getValueFormat(a)).groupBy(t,...o).rollup({[a]:{variableName:O,aggregation:"sum"}})},R=(e,t,a,o,r)=>{const s=o.map(i=>e.getValues(i)),l=Array.from({length:e.size()},(i,g)=>JSON.stringify(s.map(p=>p[g]))),u=B(e.getValues(t).map(X),l,e.getValues(a,{type:"numeric"}),r),v={type:"percentage"},h=i=>u.map(g=>g===null?null:i(g));return e.addVariable(y.shareOfColumn,"numeric",h(i=>i.shareOfColumn),v).addVariable(y.columnShare,"numeric",h(i=>i.columnShare),v).addVariable(n.POSITION_VARIABLES.xMin,"numeric",h(i=>i.columnStart)).addVariable(n.POSITION_VARIABLES.xMax,"numeric",h(i=>i.columnEnd)).addVariable(n.POSITION_VARIABLES.yMin,"numeric",h(i=>i.cellStart)).addVariable(n.POSITION_VARIABLES.yMax,"numeric",h(i=>i.cellEnd))},X=e=>e instanceof Date?e.getTime():e,_=(e,t)=>{const a=(0,n.composePoint)(t,{main:e.columnStart,cross:e.low}),o=(0,n.composePoint)(t,{main:e.columnEnd,cross:e.high}),[r,s]=T((0,n.toViewBoxX)(a.x),(0,n.toViewBoxX)(o.x)),[l,u]=T((0,n.toViewBoxY)(a.y),(0,n.toViewBoxY)(o.y));return{x:r,y:l,width:s-r,height:u-l}},L=(e,t,a)=>{const o=_(e,t);return{x:o.x*a.width,y:o.y*a.height,width:o.width*a.width,height:o.height*a.height}},T=(e,t)=>e<=t?[e,t]:[t,e],$=e=>{const t=[];if(!e.layer.dataLabels.showDataLabels)return{labels:t,droppedCount:0};const{position:a,justify:o,align:r,offset:s}=e.layer.dataLabels,l=a==="auto",u=l?"inside":a,v=(0,n.readMainAxis)(e.coordSystem),h=(0,n.buildPanelAnchorBox)(e.panelRect);let i=0;for(const g of S(e.layer.data,v)){const p=e.formatLabel(g.observation);if(p==="")continue;const{width:d,height:c}=e.measureDataLabel("observation",u,p),m=(0,n.resolveAnchoredLabelCenter)({box:L(g,v,e.panelRect),panel:h,orientation:v==="x"?{valueAxis:"y",valueDirectionSign:-1}:{valueAxis:"x",valueDirectionSign:1},placement:u,justify:l?"center":o,align:l?"center":r,offset:s,labelWidth:d,labelHeight:c});if(l&&m.position!=="inside"){i+=1;continue}t.push({layerId:e.layer.id,x:m.x,y:m.y,text:p,width:d,height:c,isRotated:!1,role:"observation",position:m.position,backdropColor:m.position==="inside"?(0,n.readBackdropColor)(e.styleReaders,g.observation):void 0})}return{labels:t,droppedCount:i}},W=1,Y={strokeWidth:"pixels"},N=class extends n.Geom{constructor(...e){super(...e),this.type="mekko",this.defaultParams={},this.defaultStat=new K,this.positionRoles=[{axis:"x",role:"min",valueKind:"value"},{axis:"x",role:"max",valueKind:"value"},{axis:"y",role:"min",valueKind:"value"},{axis:"y",role:"max",valueKind:"value",aes:"y"}],this.aesthetics=[{kind:"visual",name:"color"},{kind:"visual",name:"alpha"},{kind:"data",name:"value"},{kind:"data",name:"columnShare"}],this.derivedVariables=[y.shareOfColumn,y.columnShare],this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian","flip"],this.categorySpanAxes=["x"],this.grid={cartesian:{hideGridX:!0},flip:{hideGridX:!0}},this.legend={suppressWhenSingleItem:!0},this.dataLabelCoordTypes=["cartesian","flip"],this.getDataLabelPlacements=$,this.spatialKind="rects",this.highlightStrategy="observation-rerender",this.styleTarget=(0,n.defineGeomStyleTarget)({observation:{vocabulary:Y,aesthetics:{fill:"color",alpha:"alpha"},rest:{fill:(0,n.token)("geom"),fillAlpha:1,stroke:(0,n.token)("graphBackground"),strokeWidth:W}}}),this.validateMapping=({mapping:t,computedVariables:a})=>a.has("columnShare")?[...E].filter(o=>t[o]!==void 0).map(o=>({code:"CONFLICTING_STAT_MAPPING",message:`mekko stat computes '${o}' from 'x' and 'y'; remove its mapping`})):[{code:"MISSING_STAT_OUTPUT",message:"mekko geom lays its cells out in the 'mekko' stat; remove the layer's stat"}],this.resolveAnchorPosition=(t,{coordSystem:a})=>{const o=(0,n.readMainAxis)(a),r=V(t,o);if(r===null)return null;const s=(r.columnStart+r.columnEnd)/2,l=(r.low+r.high)/2;return o==="x"?{x:s,y:l}:{x:l,y:s}}}resolveParams(e){const{sort:t,...a}=super.resolveParams(e);return t===void 0||P(t)?t===void 0?a:{...a,sort:t}:(e.diagnostics?.addWarning({code:"INVALID_GEOM_PARAM",message:`Mekko sort must be 'data', 'ascending', 'descending' or a list of columns, got ${JSON.stringify(t)}; falling back to 'data'.`,context:{geom:"mekko",param:"sort",expected:"'data' | 'ascending' | 'descending' | columns[]"},suggestion:"Set params.sort to 'descending' to run the columns largest first, or list them in order."}),a)}compile({data:e}){return{data:e,mapping:{}}}},F=({layer:e,coordSystem:t,panelRect:a})=>{const o=(0,n.readMainAxis)(t);return S(e.data,o).map(r=>{const s=L(r,o,a),l=s.x+s.width,u=s.y+s.height;return{kind:"region",pathData:`M${s.x},${s.y}H${l}V${u}H${s.x}Z`}})},C=e=>{const t=(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id);return a=>t(a.observation)},A=({cells:e,mainAxis:t,styleReaders:a,getKey:o,isHovered:r=!1,shouldAnimateTransitions:s=!1})=>{const l=r?"hovered":void 0,u=(0,x.useMemo)(()=>e.map(i=>a.get("fill",i.observation,l)??"transparent"),[e,a,l]),{fillFor:v,defs:h}=(0,n.usePaintDefs)({paints:u});return(0,f.jsxs)(f.Fragment,{children:[h,e.map((i,g)=>{const p=_(i,t),d=u[g],c=a.get("stroke",i.observation,l);return(0,f.jsx)(n.GeomRect,{"data-testid":"mekko-cell",x:(0,n.toPercent)(p.x),y:(0,n.toPercent)(p.y),width:(0,n.toPercent)(p.width),height:(0,n.toPercent)(p.height),fill:d===void 0?void 0:v(d),opacity:a.get("alpha",i.observation,l),fillOpacity:a.get("fillAlpha",i.observation,l),stroke:c===void 0?void 0:(0,n.toPaintColor)(c),strokeWidth:a.get("strokeWidth",i.observation,l),shouldAnimateTransitions:s},o(i))})]})},U=({layer:e,sourceLayer:t,mainAxis:a,styleReaders:o})=>(0,f.jsx)(A,{cells:(0,x.useMemo)(()=>S(e.data,a),[e.data,a]),mainAxis:a,styleReaders:o,getKey:(0,x.useMemo)(()=>C(t),[t])}),q=({layer:e,primary:t,mainAxis:a,styleReaders:o})=>(0,f.jsx)("g",{"data-testid":"hovered-cells",children:(0,f.jsx)(A,{cells:S([t.observation],a),mainAxis:a,styleReaders:o,getKey:(0,x.useMemo)(()=>C(e),[e]),isHovered:!0})}),z=({layer:e,mainAxis:t,styleReaders:a,shouldAnimateTransitions:o,intro:r})=>{const s=(0,f.jsx)(A,{cells:(0,x.useMemo)(()=>S(e.data,t),[e.data,t]),mainAxis:t,styleReaders:a,getKey:(0,x.useMemo)(()=>C(e),[e]),shouldAnimateTransitions:o});return r==null?s:(0,f.jsx)(n.IntroFade,{intro:{type:"fade",layerId:r.layerId,durationSeconds:r.durationSeconds},children:s})},J=(0,n.defineGeomRenderer)(new N,{coord:"cartesian",swatchShape:"square",render:({layer:e,coordSystem:t,styleReaders:a,shouldAnimateTransitions:o,intro:r})=>(0,f.jsx)(z,{layer:e,mainAxis:(0,n.readMainAxis)(t),styleReaders:a,shouldAnimateTransitions:o,intro:r}),renderHighlight:({layer:e,sourceLayer:t,coordSystem:a,styleReaders:o})=>(0,f.jsx)(U,{layer:e,sourceLayer:t,mainAxis:(0,n.readMainAxis)(a),styleReaders:o}),renderHover:({layer:e,primary:t,coordSystem:a,styleReaders:o})=>(0,f.jsx)(q,{layer:e,primary:t,mainAxis:(0,n.readMainAxis)(a),styleReaders:o}),renderHoverCompanions:()=>null,getEditOutlineShapes:F});exports.MekkoGeom=N;exports.mekko=J;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let n=require("@graphysdk/react"),x=require("react"),f=require("react/jsx-runtime");var V=(e,t)=>{const a=t==="x"?(0,n.getXMin)(e):(0,n.getYMin)(e),o=t==="x"?(0,n.getXMax)(e):(0,n.getYMax)(e),r=t==="x"?(0,n.getYMin)(e):(0,n.getXMin)(e),s=t==="x"?(0,n.getYMax)(e):(0,n.getXMax)(e);return a===null||o===null||r===null||s===null?null:{observation:e,columnStart:a,columnEnd:o,low:r,high:s}},S=(e,t)=>{const a=[];for(const o of e){const r=V(o,t);r!==null&&a.push(r)}return a},w=e=>e===null||!Number.isFinite(e)||e<=0?null:e,B=(e,t,a,o="data")=>{const r=a.map(w),s=I(t),l=e.map((d,c)=>c).sort((d,c)=>(s.get(t[d])??0)-(s.get(t[c])??0)),u=new Map;for(const d of l){const c=e[d],m=r[d];c===null||m===null||m===void 0||u.set(c,(u.get(c)??0)+m)}const v=new Map;let h=0;for(const[d,c]of G([...u],o)){const m=h;h+=c,v.set(d,{start:m,end:h})}const i=h;if(i===0)return r.map(()=>null);const g=r.map(()=>null),p=new Map;for(const d of l){const c=e[d],m=r[d],k=u.get(c),b=v.get(c);if(m==null||k===void 0||k===0||b===void 0)continue;const M=p.get(c)??0;p.set(c,M+m),g[d]={columnStart:b.start/i,columnEnd:b.end/i,cellStart:M/k,cellEnd:(M+m)/k,shareOfColumn:m/k,columnShare:k/i}}return g},I=e=>{const t=new Map;for(const a of e)t.has(a)||t.set(a,t.size);return t},G=(e,t)=>{if(t==="data")return e;if(t==="ascending")return[...e].sort(([,r],[,s])=>r-s);if(t==="descending")return[...e].sort(([,r],[,s])=>s-r);const a=I(t),o=r=>a.get(r)??a.size;return[...e].sort(([r],[s])=>o(r)-o(s))},y={shareOfColumn:"mekkoShareOfColumn",columnShare:"mekkoColumnShare"},j=["data","ascending","descending"],P=e=>j.includes(e)||Array.isArray(e)&&e.every(t=>typeof t=="string"||typeof t=="number"),D=e=>{const t=e?.sort;return P(t)?t:"data"},E=new Set(["value","columnShare"]),O="mekkoAmount",K=class extends n.Stat{constructor(...e){super(...e),this.type="mekko",this.computedVariables=E}computeStat({data:e,mapping:t,params:a}){const o=(0,n.readVariableName)(t.x),r=(0,n.readVariableName)(t.y);if(o===null||r===null||!e.hasVariable(o)||!e.hasVariable(r))return{data:e,mapping:{}};if(e.size()>0&&e.getType(r)!=="numeric"){const u=e.getType(r);throw new n.UserInputError({code:"INCOMPATIBLE_TYPE",message:`'mekko' stat requires a numeric 'y' (got '${u}' for variable '${r}')`,context:{aesthetic:"y",variableName:r,variableType:u},suggestion:"Map each cell's amount to 'y'."})}const s=(0,n.getGroupVariables)(e,t).filter(u=>u!==o),l=H(e,o,r,s);return{data:R(l,o,r,s,D(a)),mapping:{y:y.shareOfColumn,value:r,columnShare:y.columnShare}}}},H=(e,t,a,o)=>{const r=e.getValues(a,{type:"numeric"}).map(w);return e.addVariable(O,"numeric",r,e.getValueFormat(a)).groupBy(t,...o).rollup({[a]:{variableName:O,aggregation:"sum"}})},R=(e,t,a,o,r)=>{const s=o.map(i=>e.getValues(i)),l=Array.from({length:e.size()},(i,g)=>JSON.stringify(s.map(p=>p[g]))),u=B(e.getValues(t).map(X),l,e.getValues(a,{type:"numeric"}),r),v={type:"percentage"},h=i=>u.map(g=>g===null?null:i(g));return e.addVariable(y.shareOfColumn,"numeric",h(i=>i.shareOfColumn),v).addVariable(y.columnShare,"numeric",h(i=>i.columnShare),v).addVariable(n.POSITION_VARIABLES.xMin,"numeric",h(i=>i.columnStart)).addVariable(n.POSITION_VARIABLES.xMax,"numeric",h(i=>i.columnEnd)).addVariable(n.POSITION_VARIABLES.yMin,"numeric",h(i=>i.cellStart)).addVariable(n.POSITION_VARIABLES.yMax,"numeric",h(i=>i.cellEnd))},X=e=>e instanceof Date?e.getTime():e,_=(e,t)=>{const a=(0,n.composePoint)(t,{main:e.columnStart,cross:e.low}),o=(0,n.composePoint)(t,{main:e.columnEnd,cross:e.high}),[r,s]=T((0,n.toViewBoxX)(a.x),(0,n.toViewBoxX)(o.x)),[l,u]=T((0,n.toViewBoxY)(a.y),(0,n.toViewBoxY)(o.y));return{x:r,y:l,width:s-r,height:u-l}},L=(e,t,a)=>{const o=_(e,t);return{x:o.x*a.width,y:o.y*a.height,width:o.width*a.width,height:o.height*a.height}},T=(e,t)=>e<=t?[e,t]:[t,e],$=e=>{const t=[];if(!e.layer.dataLabels.showDataLabels)return{labels:t,droppedCount:0};const{position:a,justify:o,align:r,offset:s}=e.layer.dataLabels,l=a==="auto",u=l?"inside":a,v=(0,n.readMainAxis)(e.coordSystem),h=(0,n.buildPanelAnchorBox)(e.panelRect);let i=0;for(const g of S(e.layer.data,v)){const p=e.formatLabel(g.observation);if(p==="")continue;const{width:d,height:c}=e.measureDataLabel("observation",u,p),m=(0,n.resolveAnchoredLabelCenter)({box:L(g,v,e.panelRect),panel:h,orientation:v==="x"?{valueAxis:"y",valueDirectionSign:-1}:{valueAxis:"x",valueDirectionSign:1},placement:u,justify:l?"center":o,align:l?"center":r,offset:s,labelWidth:d,labelHeight:c});if(l&&m.position!=="inside"){i+=1;continue}t.push({layerId:e.layer.id,x:m.x,y:m.y,text:p,width:d,height:c,isRotated:!1,role:"observation",position:m.position,backdropColor:m.position==="inside"?(0,n.readBackdropColor)(e.styleReaders,g.observation):void 0})}return{labels:t,droppedCount:i}},W=1,Y={strokeWidth:"pixels"},N=class extends n.Geom{constructor(...e){super(...e),this.type="mekko",this.defaultParams={},this.defaultStat=new K,this.positionRoles=[{axis:"x",role:"min",valueKind:"value"},{axis:"x",role:"max",valueKind:"value"},{axis:"y",role:"min",valueKind:"value"},{axis:"y",role:"max",valueKind:"value",aes:"y"}],this.aesthetics=[{kind:"visual",name:"color"},{kind:"visual",name:"alpha"},{kind:"data",name:"value"},{kind:"data",name:"columnShare"}],this.derivedVariables=[y.shareOfColumn,y.columnShare],this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian","flip"],this.categorySpanAxes=["x"],this.grid={cartesian:{hideGridX:!0},flip:{hideGridX:!0}},this.legend={suppressWhenSingleItem:!0},this.dataLabelCoordTypes=["cartesian","flip"],this.getDataLabelPlacements=$,this.spatialKind="rects",this.highlightStrategy="observation-rerender",this.styleTarget=(0,n.defineGeomStyleTarget)({observation:{vocabulary:Y,aesthetics:{fill:"color",alpha:"alpha"},rest:{fill:(0,n.token)("geom"),fillAlpha:1,stroke:(0,n.token)("graphBackground"),strokeWidth:W}}}),this.validateMapping=({mapping:t,computedVariables:a})=>a.has("columnShare")?[...E].filter(o=>t[o]!==void 0).map(o=>({code:"CONFLICTING_STAT_MAPPING",message:`mekko stat computes '${o}' from 'x' and 'y'; remove its mapping`})):[{code:"MISSING_STAT_OUTPUT",message:"mekko geom lays its cells out in the 'mekko' stat; remove the layer's stat"}],this.resolveAnchorPosition=(t,{coordSystem:a})=>{const o=(0,n.readMainAxis)(a),r=V(t,o);if(r===null)return null;const s=(r.columnStart+r.columnEnd)/2,l=(r.low+r.high)/2;return o==="x"?{x:s,y:l}:{x:l,y:s}}}resolveParams(e){const{sort:t,...a}=super.resolveParams(e);return t===void 0||P(t)?t===void 0?a:{...a,sort:t}:(e.diagnostics?.addWarning({code:"INVALID_GEOM_PARAM",message:`Mekko sort must be 'data', 'ascending', 'descending' or a list of columns, got ${JSON.stringify(t)}; falling back to 'data'.`,context:{geom:"mekko",param:"sort",expected:"'data' | 'ascending' | 'descending' | columns[]"},suggestion:"Set params.sort to 'descending' to run the columns largest first, or list them in order."}),a)}compile({data:e}){return{data:e,mapping:{}}}},F=({layer:e,coordSystem:t,panelRect:a})=>{const o=(0,n.readMainAxis)(t);return S(e.data,o).map(r=>{const s=L(r,o,a),l=s.x+s.width,u=s.y+s.height;return{kind:"region",pathData:`M${s.x},${s.y}H${l}V${u}H${s.x}Z`}})},C=e=>{const t=(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id);return a=>t(a.observation)},A=({cells:e,mainAxis:t,styleReaders:a,getKey:o,isHovered:r=!1,shouldAnimateTransitions:s=!1})=>{const l=r?"hovered":void 0,u=(0,x.useMemo)(()=>e.map(i=>a.get("fill",i.observation,l)??"transparent"),[e,a,l]),{fillFor:v,defs:h}=(0,n.usePaintDefs)({paints:u});return(0,f.jsxs)(f.Fragment,{children:[h,e.map((i,g)=>{const p=_(i,t),d=u[g],c=a.get("stroke",i.observation,l);return(0,f.jsx)(n.GeomRect,{"data-testid":"mekko-cell",x:(0,n.toPercent)(p.x),y:(0,n.toPercent)(p.y),width:(0,n.toPercent)(p.width),height:(0,n.toPercent)(p.height),fill:d===void 0?void 0:v(d),opacity:a.get("alpha",i.observation,l),fillOpacity:a.get("fillAlpha",i.observation,l),stroke:c===void 0?void 0:(0,n.toPaintColor)(c),strokeWidth:a.get("strokeWidth",i.observation,l),cornerRadius:a.get("cornerRadius",i.observation,l),effects:(0,n.readGeomEffects)(a,i.observation,l),shouldAnimateTransitions:s},o(i))})]})},U=({layer:e,sourceLayer:t,mainAxis:a,styleReaders:o})=>(0,f.jsx)(A,{cells:(0,x.useMemo)(()=>S(e.data,a),[e.data,a]),mainAxis:a,styleReaders:o,getKey:(0,x.useMemo)(()=>C(t),[t])}),q=({layer:e,primary:t,mainAxis:a,styleReaders:o})=>(0,f.jsx)("g",{"data-testid":"hovered-cells",children:(0,f.jsx)(A,{cells:S([t.observation],a),mainAxis:a,styleReaders:o,getKey:(0,x.useMemo)(()=>C(e),[e]),isHovered:!0})}),z=({layer:e,mainAxis:t,styleReaders:a,shouldAnimateTransitions:o,intro:r})=>{const s=(0,f.jsx)(A,{cells:(0,x.useMemo)(()=>S(e.data,t),[e.data,t]),mainAxis:t,styleReaders:a,getKey:(0,x.useMemo)(()=>C(e),[e]),shouldAnimateTransitions:o});return r==null?s:(0,f.jsx)(n.IntroFade,{intro:{type:"fade",layerId:r.layerId,durationSeconds:r.durationSeconds},children:s})},J=(0,n.defineGeomRenderer)(new N,{coord:"cartesian",swatchShape:"square",render:({layer:e,coordSystem:t,styleReaders:a,shouldAnimateTransitions:o,intro:r})=>(0,f.jsx)(z,{layer:e,mainAxis:(0,n.readMainAxis)(t),styleReaders:a,shouldAnimateTransitions:o,intro:r}),renderHighlight:({layer:e,sourceLayer:t,coordSystem:a,styleReaders:o})=>(0,f.jsx)(U,{layer:e,sourceLayer:t,mainAxis:(0,n.readMainAxis)(a),styleReaders:o}),renderHover:({layer:e,primary:t,coordSystem:a,styleReaders:o})=>(0,f.jsx)(q,{layer:e,primary:t,mainAxis:(0,n.readMainAxis)(a),styleReaders:o}),renderHoverCompanions:()=>null,getEditOutlineShapes:F});exports.MekkoGeom=N;exports.mekko=J;

package/dist/index.mjs

@@ -1,31 +1,31 @@
-import { Geom as X, GeomRect as Y, IntroFade as j, POSITION_VARIABLES as b, Stat as z, UserInputError as q, buildPanelAnchorBox as J, composePoint as O, createStableKeyGenerator as Z, defineGeomRenderer as Q, defineGeomStyleTarget as ee, getGroupVariables as te, getXMax as V, getXMin as E, getYMax as P, getYMin as I, readBackdropColor as re, readMainAxis as k, readVariableName as L, resolveAnchoredLabelCenter as ae, toPaintColor as oe, toPercent as C, toViewBoxX as _, toViewBoxY as N, token as B, usePaintDefs as ne } from "@graphysdk/react";
+import { Geom as X, GeomRect as Y, IntroFade as j, POSITION_VARIABLES as x, Stat as z, UserInputError as q, buildPanelAnchorBox as J, composePoint as O, createStableKeyGenerator as Z, defineGeomRenderer as Q, defineGeomStyleTarget as ee, getGroupVariables as te, getXMax as V, getXMin as E, getYMax as P, getYMin as I, readBackdropColor as re, readGeomEffects as oe, readMainAxis as k, readVariableName as L, resolveAnchoredLabelCenter as ae, toPaintColor as ne, toPercent as C, toViewBoxX as _, toViewBoxY as N, token as G, usePaintDefs as se } from "@graphysdk/react";
 import { useMemo as y } from "react";
-import { Fragment as se, jsx as f, jsxs as ie } from "react/jsx-runtime";
+import { Fragment as ie, jsx as f, jsxs as le } from "react/jsx-runtime";
 var K = (e, t) => {
-  const r = t === "x" ? E(e) : I(e), o = t === "x" ? V(e) : P(e), a = t === "x" ? I(e) : E(e), n = t === "x" ? P(e) : V(e);
-  return r === null || o === null || a === null || n === null ? null : {
+  const r = t === "x" ? E(e) : I(e), a = t === "x" ? V(e) : P(e), o = t === "x" ? I(e) : E(e), n = t === "x" ? P(e) : V(e);
+  return r === null || a === null || o === null || n === null ? null : {
     observation: e,
     columnStart: r,
-    columnEnd: o,
-    low: a,
+    columnEnd: a,
+    low: o,
     high: n
   };
-}, x = (e, t) => {
+}, b = (e, t) => {
   const r = [];
-  for (const o of e) {
-    const a = K(o, t);
-    a !== null && r.push(a);
+  for (const a of e) {
+    const o = K(a, t);
+    o !== null && r.push(o);
   }
   return r;
-}, H = (e) => e === null || !Number.isFinite(e) || e <= 0 ? null : e, le = (e, t, r, o = "data") => {
-  const a = r.map(H), n = $(t), i = e.map((c, u) => u).sort((c, u) => (n.get(t[c]) ?? 0) - (n.get(t[u]) ?? 0)), l = /* @__PURE__ */ new Map();
+}, H = (e) => e === null || !Number.isFinite(e) || e <= 0 ? null : e, ue = (e, t, r, a = "data") => {
+  const o = r.map(H), n = $(t), i = e.map((c, u) => u).sort((c, u) => (n.get(t[c]) ?? 0) - (n.get(t[u]) ?? 0)), l = /* @__PURE__ */ new Map();
   for (const c of i) {
-    const u = e[c], d = a[c];
+    const u = e[c], d = o[c];
     u === null || d === null || d === void 0 || l.set(u, (l.get(u) ?? 0) + d);
   }
   const p = /* @__PURE__ */ new Map();
   let m = 0;
-  for (const [c, u] of ue([...l], o)) {
+  for (const [c, u] of ce([...l], a)) {
     const d = m;
     m += u, p.set(c, {
       start: d,
@@ -33,10 +33,10 @@ var K = (e, t) => {
     });
   }
   const s = m;
-  if (s === 0) return a.map(() => null);
-  const h = a.map(() => null), g = /* @__PURE__ */ new Map();
+  if (s === 0) return o.map(() => null);
+  const h = o.map(() => null), g = /* @__PURE__ */ new Map();
   for (const c of i) {
-    const u = e[c], d = a[c], v = l.get(u), M = p.get(u);
+    const u = e[c], d = o[c], v = l.get(u), M = p.get(u);
     if (d == null || v === void 0 || v === 0 || M === void 0) continue;
     const T = g.get(u) ?? 0;
     g.set(u, T + d), h[c] = {
@@ -53,95 +53,95 @@ var K = (e, t) => {
   const t = /* @__PURE__ */ new Map();
   for (const r of e) t.has(r) || t.set(r, t.size);
   return t;
-}, ue = (e, t) => {
+}, ce = (e, t) => {
   if (t === "data") return e;
-  if (t === "ascending") return [...e].sort(([, a], [, n]) => a - n);
-  if (t === "descending") return [...e].sort(([, a], [, n]) => n - a);
-  const r = $(t), o = (a) => r.get(a) ?? r.size;
-  return [...e].sort(([a], [n]) => o(a) - o(n));
+  if (t === "ascending") return [...e].sort(([, o], [, n]) => o - n);
+  if (t === "descending") return [...e].sort(([, o], [, n]) => n - o);
+  const r = $(t), a = (o) => r.get(o) ?? r.size;
+  return [...e].sort(([o], [n]) => a(o) - a(n));
 }, S = {
   shareOfColumn: "mekkoShareOfColumn",
   columnShare: "mekkoColumnShare"
-}, ce = [
+}, de = [
   "data",
   "ascending",
   "descending"
-], W = (e) => ce.includes(e) || Array.isArray(e) && e.every((t) => typeof t == "string" || typeof t == "number"), de = (e) => {
+], W = (e) => de.includes(e) || Array.isArray(e) && e.every((t) => typeof t == "string" || typeof t == "number"), me = (e) => {
   const t = e?.sort;
   return W(t) ? t : "data";
-}, F = /* @__PURE__ */ new Set(["value", "columnShare"]), D = "mekkoAmount", me = class extends z {
+}, F = /* @__PURE__ */ new Set(["value", "columnShare"]), B = "mekkoAmount", he = class extends z {
   constructor(...e) {
     super(...e), this.type = "mekko", this.computedVariables = F;
   }
   computeStat({ data: e, mapping: t, params: r }) {
-    const o = L(t.x), a = L(t.y);
-    if (o === null || a === null || !e.hasVariable(o) || !e.hasVariable(a)) return {
+    const a = L(t.x), o = L(t.y);
+    if (a === null || o === null || !e.hasVariable(a) || !e.hasVariable(o)) return {
       data: e,
       mapping: {}
     };
-    if (e.size() > 0 && e.getType(a) !== "numeric") {
-      const l = e.getType(a);
+    if (e.size() > 0 && e.getType(o) !== "numeric") {
+      const l = e.getType(o);
       throw new q({
         code: "INCOMPATIBLE_TYPE",
-        message: `'mekko' stat requires a numeric 'y' (got '${l}' for variable '${a}')`,
+        message: `'mekko' stat requires a numeric 'y' (got '${l}' for variable '${o}')`,
         context: {
           aesthetic: "y",
-          variableName: a,
+          variableName: o,
           variableType: l
         },
         suggestion: "Map each cell's amount to 'y'."
       });
     }
-    const n = te(e, t).filter((l) => l !== o), i = he(e, o, a, n);
+    const n = te(e, t).filter((l) => l !== a), i = ge(e, a, o, n);
     return {
-      data: ge(i, o, a, n, de(r)),
+      data: pe(i, a, o, n, me(r)),
       mapping: {
         y: S.shareOfColumn,
-        value: a,
+        value: o,
         columnShare: S.columnShare
       }
     };
   }
-}, he = (e, t, r, o) => {
-  const a = e.getValues(r, { type: "numeric" }).map(H);
-  return e.addVariable(D, "numeric", a, e.getValueFormat(r)).groupBy(t, ...o).rollup({ [r]: {
-    variableName: D,
+}, ge = (e, t, r, a) => {
+  const o = e.getValues(r, { type: "numeric" }).map(H);
+  return e.addVariable(B, "numeric", o, e.getValueFormat(r)).groupBy(t, ...a).rollup({ [r]: {
+    variableName: B,
     aggregation: "sum"
   } });
-}, ge = (e, t, r, o, a) => {
-  const n = o.map((s) => e.getValues(s)), i = Array.from({ length: e.size() }, (s, h) => JSON.stringify(n.map((g) => g[h]))), l = le(e.getValues(t).map(pe), i, e.getValues(r, { type: "numeric" }), a), p = { type: "percentage" }, m = (s) => l.map((h) => h === null ? null : s(h));
-  return e.addVariable(S.shareOfColumn, "numeric", m((s) => s.shareOfColumn), p).addVariable(S.columnShare, "numeric", m((s) => s.columnShare), p).addVariable(b.xMin, "numeric", m((s) => s.columnStart)).addVariable(b.xMax, "numeric", m((s) => s.columnEnd)).addVariable(b.yMin, "numeric", m((s) => s.cellStart)).addVariable(b.yMax, "numeric", m((s) => s.cellEnd));
-}, pe = (e) => e instanceof Date ? e.getTime() : e, R = (e, t) => {
+}, pe = (e, t, r, a, o) => {
+  const n = a.map((s) => e.getValues(s)), i = Array.from({ length: e.size() }, (s, h) => JSON.stringify(n.map((g) => g[h]))), l = ue(e.getValues(t).map(fe), i, e.getValues(r, { type: "numeric" }), o), p = { type: "percentage" }, m = (s) => l.map((h) => h === null ? null : s(h));
+  return e.addVariable(S.shareOfColumn, "numeric", m((s) => s.shareOfColumn), p).addVariable(S.columnShare, "numeric", m((s) => s.columnShare), p).addVariable(x.xMin, "numeric", m((s) => s.columnStart)).addVariable(x.xMax, "numeric", m((s) => s.columnEnd)).addVariable(x.yMin, "numeric", m((s) => s.cellStart)).addVariable(x.yMax, "numeric", m((s) => s.cellEnd));
+}, fe = (e) => e instanceof Date ? e.getTime() : e, R = (e, t) => {
   const r = O(t, {
     main: e.columnStart,
     cross: e.low
-  }), o = O(t, {
+  }), a = O(t, {
     main: e.columnEnd,
     cross: e.high
-  }), [a, n] = G(_(r.x), _(o.x)), [i, l] = G(N(r.y), N(o.y));
+  }), [o, n] = D(_(r.x), _(a.x)), [i, l] = D(N(r.y), N(a.y));
   return {
-    x: a,
+    x: o,
     y: i,
-    width: n - a,
+    width: n - o,
     height: l - i
   };
 }, U = (e, t, r) => {
-  const o = R(e, t);
+  const a = R(e, t);
   return {
-    x: o.x * r.width,
-    y: o.y * r.height,
-    width: o.width * r.width,
-    height: o.height * r.height
+    x: a.x * r.width,
+    y: a.y * r.height,
+    width: a.width * r.width,
+    height: a.height * r.height
   };
-}, G = (e, t) => e <= t ? [e, t] : [t, e], fe = (e) => {
+}, D = (e, t) => e <= t ? [e, t] : [t, e], ve = (e) => {
   const t = [];
   if (!e.layer.dataLabels.showDataLabels) return {
     labels: t,
     droppedCount: 0
   };
-  const { position: r, justify: o, align: a, offset: n } = e.layer.dataLabels, i = r === "auto", l = i ? "inside" : r, p = k(e.coordSystem), m = J(e.panelRect);
+  const { position: r, justify: a, align: o, offset: n } = e.layer.dataLabels, i = r === "auto", l = i ? "inside" : r, p = k(e.coordSystem), m = J(e.panelRect);
   let s = 0;
-  for (const h of x(e.layer.data, p)) {
+  for (const h of b(e.layer.data, p)) {
     const g = e.formatLabel(h.observation);
     if (g === "") continue;
     const { width: c, height: u } = e.measureDataLabel("observation", l, g), d = ae({
@@ -155,8 +155,8 @@ var K = (e, t) => {
         valueDirectionSign: 1
       },
       placement: l,
-      justify: i ? "center" : o,
-      align: i ? "center" : a,
+      justify: i ? "center" : a,
+      align: i ? "center" : o,
       offset: n,
       labelWidth: c,
       labelHeight: u
@@ -182,9 +182,9 @@ var K = (e, t) => {
     labels: t,
     droppedCount: s
   };
-}, ve = 1, ke = { strokeWidth: "pixels" }, ye = class extends X {
+}, ke = 1, ye = { strokeWidth: "pixels" }, Se = class extends X {
   constructor(...e) {
-    super(...e), this.type = "mekko", this.defaultParams = {}, this.defaultStat = new me(), this.positionRoles = [
+    super(...e), this.type = "mekko", this.defaultParams = {}, this.defaultStat = new he(), this.positionRoles = [
       {
         axis: "x",
         role: "min",
@@ -226,29 +226,29 @@ var K = (e, t) => {
     ], this.derivedVariables = [S.shareOfColumn, S.columnShare], this.supportedPositions = ["identity"], this.supportedCoordTypes = ["cartesian", "flip"], this.categorySpanAxes = ["x"], this.grid = {
       cartesian: { hideGridX: !0 },
       flip: { hideGridX: !0 }
-    }, this.legend = { suppressWhenSingleItem: !0 }, this.dataLabelCoordTypes = ["cartesian", "flip"], this.getDataLabelPlacements = fe, this.spatialKind = "rects", this.highlightStrategy = "observation-rerender", this.styleTarget = ee({ observation: {
-      vocabulary: ke,
+    }, this.legend = { suppressWhenSingleItem: !0 }, this.dataLabelCoordTypes = ["cartesian", "flip"], this.getDataLabelPlacements = ve, this.spatialKind = "rects", this.highlightStrategy = "observation-rerender", this.styleTarget = ee({ observation: {
+      vocabulary: ye,
       aesthetics: {
         fill: "color",
         alpha: "alpha"
       },
       rest: {
-        fill: B("geom"),
+        fill: G("geom"),
         fillAlpha: 1,
-        stroke: B("graphBackground"),
-        strokeWidth: ve
+        stroke: G("graphBackground"),
+        strokeWidth: ke
       }
-    } }), this.validateMapping = ({ mapping: t, computedVariables: r }) => r.has("columnShare") ? [...F].filter((o) => t[o] !== void 0).map((o) => ({
+    } }), this.validateMapping = ({ mapping: t, computedVariables: r }) => r.has("columnShare") ? [...F].filter((a) => t[a] !== void 0).map((a) => ({
       code: "CONFLICTING_STAT_MAPPING",
-      message: `mekko stat computes '${o}' from 'x' and 'y'; remove its mapping`
+      message: `mekko stat computes '${a}' from 'x' and 'y'; remove its mapping`
     })) : [{
       code: "MISSING_STAT_OUTPUT",
       message: "mekko geom lays its cells out in the 'mekko' stat; remove the layer's stat"
     }], this.resolveAnchorPosition = (t, { coordSystem: r }) => {
-      const o = k(r), a = K(t, o);
-      if (a === null) return null;
-      const n = (a.columnStart + a.columnEnd) / 2, i = (a.low + a.high) / 2;
-      return o === "x" ? {
+      const a = k(r), o = K(t, a);
+      if (o === null) return null;
+      const n = (o.columnStart + o.columnEnd) / 2, i = (o.low + o.high) / 2;
+      return a === "x" ? {
         x: n,
         y: i
       } : {
@@ -279,10 +279,10 @@ var K = (e, t) => {
       mapping: {}
     };
   }
-}, Se = ({ layer: e, coordSystem: t, panelRect: r }) => {
-  const o = k(t);
-  return x(e.data, o).map((a) => {
-    const n = U(a, o, r), i = n.x + n.width, l = n.y + n.height;
+}, be = ({ layer: e, coordSystem: t, panelRect: r }) => {
+  const a = k(t);
+  return b(e.data, a).map((o) => {
+    const n = U(o, a, r), i = n.x + n.width, l = n.y + n.height;
     return {
       kind: "region",
       pathData: `M${n.x},${n.y}H${i}V${l}H${n.x}Z`
@@ -291,13 +291,13 @@ var K = (e, t) => {
 }, w = (e) => {
   const t = Z(e.data, e.mapping, e.id);
   return (r) => t(r.observation);
-}, A = ({ cells: e, mainAxis: t, styleReaders: r, getKey: o, isHovered: a = !1, shouldAnimateTransitions: n = !1 }) => {
-  const i = a ? "hovered" : void 0, l = y(() => e.map((s) => r.get("fill", s.observation, i) ?? "transparent"), [
+}, A = ({ cells: e, mainAxis: t, styleReaders: r, getKey: a, isHovered: o = !1, shouldAnimateTransitions: n = !1 }) => {
+  const i = o ? "hovered" : void 0, l = y(() => e.map((s) => r.get("fill", s.observation, i) ?? "transparent"), [
     e,
     r,
     i
-  ]), { fillFor: p, defs: m } = ne({ paints: l });
-  return /* @__PURE__ */ ie(se, { children: [m, e.map((s, h) => {
+  ]), { fillFor: p, defs: m } = se({ paints: l });
+  return /* @__PURE__ */ le(ie, { children: [m, e.map((s, h) => {
     const g = R(s, t), c = l[h], u = r.get("stroke", s.observation, i);
     return /* @__PURE__ */ f(Y, {
       "data-testid": "mekko-cell",
@@ -308,67 +308,69 @@ var K = (e, t) => {
       fill: c === void 0 ? void 0 : p(c),
       opacity: r.get("alpha", s.observation, i),
       fillOpacity: r.get("fillAlpha", s.observation, i),
-      stroke: u === void 0 ? void 0 : oe(u),
+      stroke: u === void 0 ? void 0 : ne(u),
       strokeWidth: r.get("strokeWidth", s.observation, i),
+      cornerRadius: r.get("cornerRadius", s.observation, i),
+      effects: oe(r, s.observation, i),
       shouldAnimateTransitions: n
-    }, o(s));
+    }, a(s));
   })] });
-}, xe = ({ layer: e, sourceLayer: t, mainAxis: r, styleReaders: o }) => /* @__PURE__ */ f(A, {
-  cells: y(() => x(e.data, r), [e.data, r]),
+}, xe = ({ layer: e, sourceLayer: t, mainAxis: r, styleReaders: a }) => /* @__PURE__ */ f(A, {
+  cells: y(() => b(e.data, r), [e.data, r]),
   mainAxis: r,
-  styleReaders: o,
+  styleReaders: a,
   getKey: y(() => w(t), [t])
-}), be = ({ layer: e, primary: t, mainAxis: r, styleReaders: o }) => /* @__PURE__ */ f("g", {
+}), Ce = ({ layer: e, primary: t, mainAxis: r, styleReaders: a }) => /* @__PURE__ */ f("g", {
   "data-testid": "hovered-cells",
   children: /* @__PURE__ */ f(A, {
-    cells: x([t.observation], r),
+    cells: b([t.observation], r),
     mainAxis: r,
-    styleReaders: o,
+    styleReaders: a,
     getKey: y(() => w(e), [e]),
     isHovered: !0
   })
-}), Ce = ({ layer: e, mainAxis: t, styleReaders: r, shouldAnimateTransitions: o, intro: a }) => {
+}), Me = ({ layer: e, mainAxis: t, styleReaders: r, shouldAnimateTransitions: a, intro: o }) => {
   const n = /* @__PURE__ */ f(A, {
-    cells: y(() => x(e.data, t), [e.data, t]),
+    cells: y(() => b(e.data, t), [e.data, t]),
     mainAxis: t,
     styleReaders: r,
     getKey: y(() => w(e), [e]),
-    shouldAnimateTransitions: o
+    shouldAnimateTransitions: a
   });
-  return a == null ? n : /* @__PURE__ */ f(j, {
+  return o == null ? n : /* @__PURE__ */ f(j, {
     intro: {
       type: "fade",
-      layerId: a.layerId,
-      durationSeconds: a.durationSeconds
+      layerId: o.layerId,
+      durationSeconds: o.durationSeconds
     },
     children: n
   });
-}, Ae = Q(new ye(), {
+}, Oe = Q(new Se(), {
   coord: "cartesian",
   swatchShape: "square",
-  render: ({ layer: e, coordSystem: t, styleReaders: r, shouldAnimateTransitions: o, intro: a }) => /* @__PURE__ */ f(Ce, {
+  render: ({ layer: e, coordSystem: t, styleReaders: r, shouldAnimateTransitions: a, intro: o }) => /* @__PURE__ */ f(Me, {
     layer: e,
     mainAxis: k(t),
     styleReaders: r,
-    shouldAnimateTransitions: o,
-    intro: a
+    shouldAnimateTransitions: a,
+    intro: o
   }),
-  renderHighlight: ({ layer: e, sourceLayer: t, coordSystem: r, styleReaders: o }) => /* @__PURE__ */ f(xe, {
+  renderHighlight: ({ layer: e, sourceLayer: t, coordSystem: r, styleReaders: a }) => /* @__PURE__ */ f(xe, {
     layer: e,
     sourceLayer: t,
     mainAxis: k(r),
-    styleReaders: o
+    styleReaders: a
   }),
-  renderHover: ({ layer: e, primary: t, coordSystem: r, styleReaders: o }) => /* @__PURE__ */ f(be, {
+  renderHover: ({ layer: e, primary: t, coordSystem: r, styleReaders: a }) => /* @__PURE__ */ f(Ce, {
     layer: e,
     primary: t,
     mainAxis: k(r),
-    styleReaders: o
+    styleReaders: a
   }),
   renderHoverCompanions: () => null,
-  getEditOutlineShapes: Se
+  getEditOutlineShapes: be
 });
 export {
-  ye as MekkoGeom,
-  Ae as mekko
+  Se as MekkoGeom,
+  Oe as mekko
 };

package/package.json

@@ -14,7 +14,7 @@
     "marimekko",
     "mosaic"
   ],
-  "version": "0.1.0",
+  "version": "0.1.1-beta.1792411689978",
   "type": "module",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -33,7 +33,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@graphysdk/react": "^1.9.0-beta.1791968387850"
+    "@graphysdk/react": "^1.9.0-beta.1792411689978"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
@@ -45,11 +45,11 @@
     "vite": "^8.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.11",
-    "@graphysdk/react": "1.9.0-beta.1791968387850",
-    "@graphysdk/viz-engine": "1.8.0",
     "@graphytools/typescript-config": "0.0.1",
     "@graphytools/eslint-config": "0.0.1",
-    "@graphytools/vitest-config": "1.0.0"
+    "@graphytools/vitest-config": "1.0.0",
+    "@graphysdk/viz-engine": "1.9.0-beta.1792411689978",
+    "@graphysdk/react": "1.9.0-beta.1792411689978"
   },
   "publishConfig": {
     "access": "public"