@graphysdk/geom-candlestick 0.1.0 → 0.1.1-beta.1790850980247

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

@@ -81,10 +81,10 @@ export declare class CandlestickGeom extends Geom<CandlestickGeomParams> {
         discreteMainAxis: boolean;
     };
     /**
-     * A hovered session is one unit. The wick runs from its low to its high inside the band, so the whole of it
-     * takes a press for the session, and no stroke runs on to the next one.
+     * A hovered session is one unit: the rectangle as wide as its body and as tall as its wick, so a press anywhere
+     * across the candle is on the session.
      */
-    readonly spatialKind = "spanned-buckets";
+    readonly spatialKind = "rects";
     readonly highlightStrategy: "observation-rerender";
     /**
      * The tooltip shows the session's four prices, as written in the data and formatted like the price axis, each

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let i=require("@graphysdk/react"),v=require("react"),d=require("react/jsx-runtime");var x={direction:"candlestickDirection"},M=(t,e)=>{const o=e==="x"?(0,i.getX)(t):(0,i.getY)(t),r=e==="x"?(0,i.getXMin)(t):(0,i.getYMin)(t),s=e==="x"?(0,i.getXMax)(t):(0,i.getYMax)(t),n=e==="x"?(0,i.getYMin)(t):(0,i.getXMin)(t),l=e==="x"?(0,i.getYMax)(t):(0,i.getXMax)(t),c=(0,i.getScaledAesthetic)(t,"open"),a=(0,i.getScaledAesthetic)(t,"close");return o===null||r===null||s===null||n===null||l===null||c===null||a===null?null:{observation:t,band:o,bodyStart:r,bodyEnd:s,low:n,high:l,open:c,close:a,direction:t[x.direction]==="falling"?"falling":"rising"}},p=(t,e)=>{const o=[];for(const r of t){const s=M(r,e);s!==null&&o.push(s)}return o},A=1,B=1,_=.6,O=["open","high","low","close"],V={alpha:"unitInterval",fillAlpha:"unitInterval",strokeWidth:"pixels"},y={fill:"color",stroke:"color"},E={stroke:"color",alpha:"unitInterval",strokeWidth:"pixels",dashArray:"dashArray"},C=class extends i.Geom{constructor(...t){super(...t),this.type="candlestick",this.defaultParams={},this.derivedVariables=[x.direction],this.aesthetics=[{kind:"visual",name:"color"}],this.positionRoles=[{axis:"x",role:"point",valueKind:"value"},{axis:"y",role:"min",valueKind:"value",aes:"low"},{axis:"y",role:"max",valueKind:"value",aes:"high"},{axis:"y",role:"scalar",valueKind:"value",aes:"open"},{axis:"y",role:"scalar",valueKind:"value",aes:"close"}],this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian","flip"],this.scaleConstraints={discreteMainAxis:!0},this.spatialKind="spanned-buckets",this.highlightStrategy="observation-rerender",this.tooltip=O.map(e=>({aes:e})),this.styleTarget=(0,i.defineGeomStyleTarget)({observation:{vocabulary:V,sharedPaint:!1,aesthetics:{},rest:{alpha:1,fillAlpha:1,strokeWidth:A}},parts:{rising:{vocabulary:y,aesthetics:{fill:"color",stroke:"color"},rest:{fill:(0,i.token)("trendPositive"),stroke:(0,i.token)("trendPositive")}},falling:{vocabulary:y,aesthetics:{fill:"color",stroke:"color"},rest:{fill:(0,i.token)("trendNegative"),stroke:(0,i.token)("trendNegative")}},wick:{vocabulary:E,rest:{alpha:1,strokeWidth:B,dashArray:[]}}}}),this.resolveBandFraction=e=>f(e),this.validateMapping=({mapping:e})=>["open","close"].filter(o=>e[o]===void 0).map(o=>({code:"MISSING_AESTHETIC",message:`candlestick geom requires '${o}' to be mapped`})),this.resolveAnchorPosition=(e,{coordSystem:o})=>{const r=(0,i.readMainAxis)(o),s=M(e,r);return s===null?null:r==="x"?{x:s.band,y:s.close}:{x:s.close,y:s.band}}}resolveParams(t){const{width:e,...o}=super.resolveParams(t);if(e===void 0)return o;const r=typeof e=="number"&&Number.isFinite(e)?e:null;if(r!==null&&r>0&&r<=1)return{...o,width:r};const s=r!==null&&r>1?1:void 0;return t.diagnostics?.addWarning({code:"INVALID_GEOM_PARAM",message:`Candlestick width must be a fraction in (0, 1], got ${String(e)}; falling back to ${s??"the default band"}.`,context:{geom:this.type,param:"width",expected:"0 < width <= 1",actual:r??String(e)},suggestion:"Set params.width to a fraction of the session band in (0, 1]."}),{...o,...s!==void 0&&{width:s}}}compile({data:t,mapping:e,params:o}){const r=f(o)/2;return{data:T(t,b(e.open),b(e.close)).addConstantVariable(i.POSITION_VARIABLES.xMin,"numeric",-r).addConstantVariable(i.POSITION_VARIABLES.xMax,"numeric",r),mapping:{y:e.close}}}},f=({width:t})=>t??_,b=t=>t===void 0?null:typeof t=="string"?t:"variable"in t?t.variable:null,T=(t,e,o)=>{if(e===null||o===null||!t.hasVariable(e)||!t.hasVariable(o))return t;const r=t.getValues(e,{type:"numeric"}),s=t.getValues(o,{type:"numeric"}),n=r.map((l,c)=>{const a=s[c];return l===null||a===null||a===void 0?null:a>=l?"rising":"falling"});return t.addVariable(x.direction,"categorical",n)},D=5e-4,S=(t,e)=>{const o=(t.open+t.close)/2,r=Math.max(Math.abs(t.close-t.open),D)/2,s=(0,i.composePoint)(e,{main:t.bodyStart,cross:o-r}),n=(0,i.composePoint)(e,{main:t.bodyEnd,cross:o+r}),[l,c]=w((0,i.toViewBoxX)(s.x),(0,i.toViewBoxX)(n.x)),[a,h]=w((0,i.toViewBoxY)(s.y),(0,i.toViewBoxY)(n.y));return{x:l,y:a,width:c-l,height:h-a}},w=(t,e)=>t<=e?[t,e]:[e,t],W=({layer:t,coordSystem:e,panelRect:o,styleReaders:r})=>{const s=(0,i.readMainAxis)(e),n=p(t.data,s),l=r.part("wick"),c=l===void 0?[]:n.map(h=>{const u=P(h.band,h.low,s,o),g=P(h.band,h.high,s,o),I=l.get("strokeWidth",h.observation)??0;return{kind:"stroke",pathData:`M${u.x},${u.y}L${g.x},${g.y}`,width:I}}),a=n.map(h=>{const u=S(h,s),g=u.x*o.width;return{kind:"region",pathData:`M${g},${u.y*o.height}H${(u.x+u.width)*o.width}V${(u.y+u.height)*o.height}H${g}Z`}});return[...c,...a]},P=(t,e,o,r)=>{const s=(0,i.composePoint)(o,{main:t,cross:e});return(0,i.scalePointToPanel)((0,i.projectPointCartesian)(s.x,s.y),r)},k=t=>{const e=(0,i.createStableKeyGenerator)(t.data,t.mapping,t.id);return o=>e(o.observation)},m=({candles:t,mainAxis:e,styleReaders:o,getKey:r,isHovered:s=!1,shouldAnimateTransitions:n=!1})=>{const l=s?"hovered":void 0,c=o.part("wick");return(0,d.jsxs)(d.Fragment,{children:[c&&t.map(a=>(0,d.jsx)(j,{candle:a,mainAxis:e,readers:c,directionReaders:o.part(a.direction),state:l,shouldAnimateTransitions:n},r(a))),t.map(a=>(0,d.jsx)(Y,{candle:a,mainAxis:e,styleReaders:o,state:l,shouldAnimateTransitions:n},r(a)))]})},j=({candle:t,mainAxis:e,readers:o,directionReaders:r,state:s,shouldAnimateTransitions:n})=>{const l=(0,i.composePoint)(e,{main:t.band,cross:t.low}),c=(0,i.composePoint)(e,{main:t.band,cross:t.high}),a=o.get("strokeWidth",t.observation,s)??0,h=o.get("stroke",t.observation,s)??r?.get("stroke",t.observation,s);return(0,d.jsx)(i.GeomLine,{"data-testid":"candlestick-wick",x1:(0,i.toPercent)((0,i.toViewBoxX)(l.x)),y1:(0,i.toPercent)((0,i.toViewBoxY)(l.y)),x2:(0,i.toPercent)((0,i.toViewBoxX)(c.x)),y2:(0,i.toPercent)((0,i.toViewBoxY)(c.y)),stroke:h===void 0?void 0:(0,i.toPaintColor)(h),strokeOpacity:o.get("alpha",t.observation,s),strokeWidth:a,strokeDasharray:(0,i.toStrokeDasharray)(o.get("dashArray",t.observation,s),a),shouldAnimateTransitions:n})},Y=({candle:t,mainAxis:e,styleReaders:o,state:r,shouldAnimateTransitions:s})=>{const n=S(t,e),l=o.part(t.direction),c=l?.get("fill",t.observation,r),a=l?.get("stroke",t.observation,r);return(0,d.jsx)(i.GeomRect,{"data-testid":"candlestick-body",x:(0,i.toPercent)(n.x),y:(0,i.toPercent)(n.y),width:(0,i.toPercent)(n.width),height:(0,i.toPercent)(n.height),fill:c===void 0?void 0:(0,i.toPaintColor)(c),opacity:o.get("alpha",t.observation,r),fillOpacity:o.get("fillAlpha",t.observation,r),stroke:a===void 0?void 0:(0,i.toPaintColor)(a),strokeWidth:o.get("strokeWidth",t.observation,r),shouldAnimateTransitions:s})},K=({layer:t,sourceLayer:e,mainAxis:o,styleReaders:r})=>(0,d.jsx)(m,{candles:(0,v.useMemo)(()=>p(t.data,o),[t.data,o]),mainAxis:o,styleReaders:r,getKey:(0,v.useMemo)(()=>k(e),[e])}),H=({layer:t,primary:e,siblings:o,mainAxis:r,styleReaders:s})=>(0,d.jsx)("g",{"data-testid":"hovered-candles",children:(0,d.jsx)(m,{candles:p([e,...o].map(n=>n.observation),r),mainAxis:r,styleReaders:s,getKey:(0,v.useMemo)(()=>k(t),[t]),isHovered:!0})}),N=({layer:t,mainAxis:e,styleReaders:o,shouldAnimateTransitions:r,intro:s})=>{const n=(0,d.jsx)(m,{candles:(0,v.useMemo)(()=>p(t.data,e),[t.data,e]),mainAxis:e,styleReaders:o,getKey:(0,v.useMemo)(()=>k(t),[t]),shouldAnimateTransitions:r});return s?.type==="fade"?(0,d.jsx)(i.IntroFade,{intro:s,children:n}):n},X=(0,i.defineGeomRenderer)(new C,{coord:"cartesian",swatchShape:"square",guideMode:"band",render:({layer:t,coordSystem:e,styleReaders:o,shouldAnimateTransitions:r,intro:s})=>(0,d.jsx)(N,{layer:t,mainAxis:(0,i.readMainAxis)(e),styleReaders:o,shouldAnimateTransitions:r,intro:s}),renderHighlight:({layer:t,sourceLayer:e,coordSystem:o,styleReaders:r})=>(0,d.jsx)(K,{layer:t,sourceLayer:e,mainAxis:(0,i.readMainAxis)(o),styleReaders:r}),renderHover:({layer:t,primary:e,group:o,related:r,coordSystem:s,styleReaders:n})=>(0,d.jsx)(H,{layer:t,primary:e,siblings:[...o,...r],mainAxis:(0,i.readMainAxis)(s),styleReaders:n}),renderHoverCompanions:()=>null,getEditOutlineShapes:W});exports.CandlestickGeom=C;exports.candlestick=X;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let r=require("@graphysdk/react"),v=require("react"),c=require("react/jsx-runtime");var x={direction:"candlestickDirection"},M=(t,e)=>{const o=e==="x"?(0,r.getX)(t):(0,r.getY)(t),i=e==="x"?(0,r.getXMin)(t):(0,r.getYMin)(t),n=e==="x"?(0,r.getXMax)(t):(0,r.getYMax)(t),s=e==="x"?(0,r.getYMin)(t):(0,r.getXMin)(t),l=e==="x"?(0,r.getYMax)(t):(0,r.getXMax)(t),d=(0,r.getScaledAesthetic)(t,"open"),a=(0,r.getScaledAesthetic)(t,"close");return o===null||i===null||n===null||s===null||l===null||d===null||a===null?null:{observation:t,band:o,bodyStart:i,bodyEnd:n,low:s,high:l,open:d,close:a,direction:t[x.direction]==="falling"?"falling":"rising"}},p=(t,e)=>{const o=[];for(const i of t){const n=M(i,e);n!==null&&o.push(n)}return o},A=1,B=1,_=.6,O=["open","high","low","close"],V={alpha:"unitInterval",fillAlpha:"unitInterval",strokeWidth:"pixels"},f={fill:"color",stroke:"color"},E={stroke:"color",alpha:"unitInterval",strokeWidth:"pixels",dashArray:"dashArray"},C=class extends r.Geom{constructor(...t){super(...t),this.type="candlestick",this.defaultParams={},this.derivedVariables=[x.direction],this.aesthetics=[{kind:"visual",name:"color"}],this.positionRoles=[{axis:"x",role:"point",valueKind:"value"},{axis:"y",role:"min",valueKind:"value",aes:"low"},{axis:"y",role:"max",valueKind:"value",aes:"high"},{axis:"y",role:"scalar",valueKind:"value",aes:"open"},{axis:"y",role:"scalar",valueKind:"value",aes:"close"}],this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian","flip"],this.scaleConstraints={discreteMainAxis:!0},this.spatialKind="rects",this.highlightStrategy="observation-rerender",this.tooltip=O.map(e=>({aes:e})),this.styleTarget=(0,r.defineGeomStyleTarget)({observation:{vocabulary:V,sharedPaint:!1,aesthetics:{},rest:{alpha:1,fillAlpha:1,strokeWidth:A}},parts:{rising:{vocabulary:f,aesthetics:{fill:"color",stroke:"color"},rest:{fill:(0,r.token)("trendPositive"),stroke:(0,r.token)("trendPositive")}},falling:{vocabulary:f,aesthetics:{fill:"color",stroke:"color"},rest:{fill:(0,r.token)("trendNegative"),stroke:(0,r.token)("trendNegative")}},wick:{vocabulary:E,rest:{alpha:1,strokeWidth:B,dashArray:[]}}}}),this.resolveBandFraction=e=>m(e),this.validateMapping=({mapping:e})=>["open","close"].filter(o=>e[o]===void 0).map(o=>({code:"MISSING_AESTHETIC",message:`candlestick geom requires '${o}' to be mapped`})),this.resolveAnchorPosition=(e,{coordSystem:o})=>{const i=(0,r.readMainAxis)(o),n=M(e,i);return n===null?null:i==="x"?{x:n.band,y:n.close}:{x:n.close,y:n.band}}}resolveParams(t){const{width:e,...o}=super.resolveParams(t);if(e===void 0)return o;const i=typeof e=="number"&&Number.isFinite(e)?e:null;if(i!==null&&i>0&&i<=1)return{...o,width:i};const n=i!==null&&i>1?1:void 0;return t.diagnostics?.addWarning({code:"INVALID_GEOM_PARAM",message:`Candlestick width must be a fraction in (0, 1], got ${String(e)}; falling back to ${n??"the default band"}.`,context:{geom:this.type,param:"width",expected:"0 < width <= 1",actual:i??String(e)},suggestion:"Set params.width to a fraction of the session band in (0, 1]."}),{...o,...n!==void 0&&{width:n}}}compile({data:t,mapping:e,params:o}){const i=m(o)/2;return{data:T(t,b(e.open),b(e.close)).addConstantVariable(r.POSITION_VARIABLES.xMin,"numeric",-i).addConstantVariable(r.POSITION_VARIABLES.xMax,"numeric",i),mapping:{y:e.close}}}},m=({width:t})=>t??_,b=t=>t===void 0?null:typeof t=="string"?t:"variable"in t?t.variable:null,T=(t,e,o)=>{if(e===null||o===null||!t.hasVariable(e)||!t.hasVariable(o))return t;const i=t.getValues(e,{type:"numeric"}),n=t.getValues(o,{type:"numeric"}),s=i.map((l,d)=>{const a=n[d];return l===null||a===null||a===void 0?null:a>=l?"rising":"falling"});return t.addVariable(x.direction,"categorical",s)},D=5e-4,S=(t,e)=>{const o=(t.open+t.close)/2,i=Math.max(Math.abs(t.close-t.open),D)/2,n=(0,r.composePoint)(e,{main:t.bodyStart,cross:o-i}),s=(0,r.composePoint)(e,{main:t.bodyEnd,cross:o+i}),[l,d]=w((0,r.toViewBoxX)(n.x),(0,r.toViewBoxX)(s.x)),[a,h]=w((0,r.toViewBoxY)(n.y),(0,r.toViewBoxY)(s.y));return{x:l,y:a,width:d-l,height:h-a}},w=(t,e)=>t<=e?[t,e]:[e,t],W=({layer:t,coordSystem:e,panelRect:o,styleReaders:i})=>{const n=(0,r.readMainAxis)(e),s=p(t.data,n),l=i.part("wick"),d=l===void 0?[]:s.map(h=>{const u=P(h.band,h.low,n,o),g=P(h.band,h.high,n,o),I=l.get("strokeWidth",h.observation)??0;return{kind:"stroke",pathData:`M${u.x},${u.y}L${g.x},${g.y}`,width:I}}),a=s.map(h=>{const u=S(h,n),g=u.x*o.width;return{kind:"region",pathData:`M${g},${u.y*o.height}H${(u.x+u.width)*o.width}V${(u.y+u.height)*o.height}H${g}Z`}});return[...d,...a]},P=(t,e,o,i)=>{const n=(0,r.composePoint)(o,{main:t,cross:e});return(0,r.scalePointToPanel)((0,r.projectPointCartesian)(n.x,n.y),i)},k=t=>{const e=(0,r.createStableKeyGenerator)(t.data,t.mapping,t.id);return o=>e(o.observation)},y=({candles:t,mainAxis:e,styleReaders:o,getKey:i,isHovered:n=!1,shouldAnimateTransitions:s=!1})=>{const l=n?"hovered":void 0,d=o.part("wick");return(0,c.jsxs)(c.Fragment,{children:[d&&t.map(a=>(0,c.jsx)(j,{candle:a,mainAxis:e,readers:d,directionReaders:o.part(a.direction),state:l,shouldAnimateTransitions:s},i(a))),t.map(a=>(0,c.jsx)(Y,{candle:a,mainAxis:e,styleReaders:o,state:l,shouldAnimateTransitions:s},i(a)))]})},j=({candle:t,mainAxis:e,readers:o,directionReaders:i,state:n,shouldAnimateTransitions:s})=>{const l=(0,r.composePoint)(e,{main:t.band,cross:t.low}),d=(0,r.composePoint)(e,{main:t.band,cross:t.high}),a=o.get("strokeWidth",t.observation,n)??0,h=o.get("stroke",t.observation,n)??i?.get("stroke",t.observation,n);return(0,c.jsx)(r.GeomLine,{"data-testid":"candlestick-wick",x1:(0,r.toPercent)((0,r.toViewBoxX)(l.x)),y1:(0,r.toPercent)((0,r.toViewBoxY)(l.y)),x2:(0,r.toPercent)((0,r.toViewBoxX)(d.x)),y2:(0,r.toPercent)((0,r.toViewBoxY)(d.y)),stroke:h===void 0?void 0:(0,r.toPaintColor)(h),strokeOpacity:o.get("alpha",t.observation,n),strokeWidth:a,strokeDasharray:(0,r.toStrokeDasharray)(o.get("dashArray",t.observation,n),a),shouldAnimateTransitions:s})},Y=({candle:t,mainAxis:e,styleReaders:o,state:i,shouldAnimateTransitions:n})=>{const s=S(t,e),l=o.part(t.direction),d=l?.get("fill",t.observation,i),a=l?.get("stroke",t.observation,i);return(0,c.jsx)(r.GeomRect,{"data-testid":"candlestick-body",x:(0,r.toPercent)(s.x),y:(0,r.toPercent)(s.y),width:(0,r.toPercent)(s.width),height:(0,r.toPercent)(s.height),fill:d===void 0?void 0:(0,r.toPaintColor)(d),opacity:o.get("alpha",t.observation,i),fillOpacity:o.get("fillAlpha",t.observation,i),stroke:a===void 0?void 0:(0,r.toPaintColor)(a),strokeWidth:o.get("strokeWidth",t.observation,i),shouldAnimateTransitions:n})},K=({layer:t,sourceLayer:e,mainAxis:o,styleReaders:i})=>(0,c.jsx)(y,{candles:(0,v.useMemo)(()=>p(t.data,o),[t.data,o]),mainAxis:o,styleReaders:i,getKey:(0,v.useMemo)(()=>k(e),[e])}),H=({layer:t,primary:e,siblings:o,mainAxis:i,styleReaders:n})=>(0,c.jsx)("g",{"data-testid":"hovered-candles",children:(0,c.jsx)(y,{candles:p([e,...o].map(s=>s.observation),i),mainAxis:i,styleReaders:n,getKey:(0,v.useMemo)(()=>k(t),[t]),isHovered:!0})}),N=({layer:t,mainAxis:e,styleReaders:o,shouldAnimateTransitions:i,intro:n})=>{const s=(0,c.jsx)(y,{candles:(0,v.useMemo)(()=>p(t.data,e),[t.data,e]),mainAxis:e,styleReaders:o,getKey:(0,v.useMemo)(()=>k(t),[t]),shouldAnimateTransitions:i}),l=X(n);return l===null?s:(0,c.jsx)(r.IntroFade,{intro:l,children:s})},X=t=>t==null?null:{type:"fade",layerId:t.layerId,durationSeconds:t.durationSeconds},$=(0,r.defineGeomRenderer)(new C,{coord:"cartesian",swatchShape:"square",guideMode:"band",render:({layer:t,coordSystem:e,styleReaders:o,shouldAnimateTransitions:i,intro:n})=>(0,c.jsx)(N,{layer:t,mainAxis:(0,r.readMainAxis)(e),styleReaders:o,shouldAnimateTransitions:i,intro:n}),renderHighlight:({layer:t,sourceLayer:e,coordSystem:o,styleReaders:i})=>(0,c.jsx)(K,{layer:t,sourceLayer:e,mainAxis:(0,r.readMainAxis)(o),styleReaders:i}),renderHover:({layer:t,primary:e,group:o,related:i,coordSystem:n,styleReaders:s})=>(0,c.jsx)(H,{layer:t,primary:e,siblings:[...o,...i],mainAxis:(0,r.readMainAxis)(n),styleReaders:s}),renderHoverCompanions:()=>null,getEditOutlineShapes:W});exports.CandlestickGeom=C;exports.candlestick=$;

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import { Geom as $, GeomLine as N, GeomRect as Y, IntroFade as L, POSITION_VARIABLES as P, composePoint as p, createStableKeyGenerator as G, defineGeomRenderer as X, defineGeomStyleTarget as R, getScaledAesthetic as S, getX as F, getXMax as M, getXMin as A, getY as U, getYMax as D, getYMin as E, projectPointCartesian as j, readMainAxis as v, scalePointToPanel as q, toPaintColor as b, toPercent as u, toStrokeDasharray as Z, toViewBoxX as y, toViewBoxY as m, token as f } from "@graphysdk/react";
-import { useMemo as k } from "react";
+import { Geom as $, GeomLine as N, GeomRect as Y, IntroFade as L, POSITION_VARIABLES as S, composePoint as p, createStableKeyGenerator as G, defineGeomRenderer as X, defineGeomStyleTarget as F, getScaledAesthetic as P, getX as R, getXMax as M, getXMin as A, getY as U, getYMax as D, getYMin as E, projectPointCartesian as j, readMainAxis as g, scalePointToPanel as q, toPaintColor as b, toPercent as u, toStrokeDasharray as Z, toViewBoxX as y, toViewBoxY as m, token as k } from "@graphysdk/react";
+import { useMemo as f } from "react";
 import { Fragment as z, jsx as c, jsxs as J } from "react/jsx-runtime";
 var w = { direction: "candlestickDirection" }, K = (t, e) => {
-  const r = e === "x" ? F(t) : U(t), i = e === "x" ? A(t) : E(t), o = e === "x" ? M(t) : D(t), a = e === "x" ? E(t) : A(t), s = e === "x" ? D(t) : M(t), l = S(t, "open"), n = S(t, "close");
-  return r === null || i === null || o === null || a === null || s === null || l === null || n === null ? null : {
+  const r = e === "x" ? R(t) : U(t), o = e === "x" ? A(t) : E(t), i = e === "x" ? M(t) : D(t), a = e === "x" ? E(t) : A(t), s = e === "x" ? D(t) : M(t), l = P(t, "open"), n = P(t, "close");
+  return r === null || o === null || i === null || a === null || s === null || l === null || n === null ? null : {
     observation: t,
     band: r,
-    bodyStart: i,
-    bodyEnd: o,
+    bodyStart: o,
+    bodyEnd: i,
     low: a,
     high: s,
     open: l,
@@ -16,9 +16,9 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
   };
 }, x = (t, e) => {
   const r = [];
-  for (const i of t) {
-    const o = K(i, e);
-    o !== null && r.push(o);
+  for (const o of t) {
+    const i = K(o, e);
+    i !== null && r.push(i);
   }
   return r;
 }, Q = 1, tt = 1, et = 0.6, rt = [
@@ -26,14 +26,14 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
   "high",
   "low",
   "close"
-], it = {
+], ot = {
   alpha: "unitInterval",
   fillAlpha: "unitInterval",
   strokeWidth: "pixels"
 }, _ = {
   fill: "color",
   stroke: "color"
-}, ot = {
+}, it = {
   stroke: "color",
   alpha: "unitInterval",
   strokeWidth: "pixels",
@@ -73,9 +73,9 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
         valueKind: "value",
         aes: "close"
       }
-    ], this.supportedPositions = ["identity"], this.supportedCoordTypes = ["cartesian", "flip"], this.scaleConstraints = { discreteMainAxis: !0 }, this.spatialKind = "spanned-buckets", this.highlightStrategy = "observation-rerender", this.tooltip = rt.map((e) => ({ aes: e })), this.styleTarget = R({
+    ], this.supportedPositions = ["identity"], this.supportedCoordTypes = ["cartesian", "flip"], this.scaleConstraints = { discreteMainAxis: !0 }, this.spatialKind = "rects", this.highlightStrategy = "observation-rerender", this.tooltip = rt.map((e) => ({ aes: e })), this.styleTarget = F({
       observation: {
-        vocabulary: it,
+        vocabulary: ot,
         sharedPaint: !1,
         aesthetics: {},
         rest: {
@@ -92,8 +92,8 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
             stroke: "color"
           },
           rest: {
-            fill: f("trendPositive"),
-            stroke: f("trendPositive")
+            fill: k("trendPositive"),
+            stroke: k("trendPositive")
           }
         },
         falling: {
@@ -103,12 +103,12 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
             stroke: "color"
           },
           rest: {
-            fill: f("trendNegative"),
-            stroke: f("trendNegative")
+            fill: k("trendNegative"),
+            stroke: k("trendNegative")
           }
         },
         wick: {
-          vocabulary: ot,
+          vocabulary: it,
           rest: {
             alpha: 1,
             strokeWidth: tt,
@@ -120,95 +120,95 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
       code: "MISSING_AESTHETIC",
       message: `candlestick geom requires '${r}' to be mapped`
     })), this.resolveAnchorPosition = (e, { coordSystem: r }) => {
-      const i = v(r), o = K(e, i);
-      return o === null ? null : i === "x" ? {
-        x: o.band,
-        y: o.close
+      const o = g(r), i = K(e, o);
+      return i === null ? null : o === "x" ? {
+        x: i.band,
+        y: i.close
       } : {
-        x: o.close,
-        y: o.band
+        x: i.close,
+        y: i.band
       };
     };
   }
   resolveParams(t) {
     const { width: e, ...r } = super.resolveParams(t);
     if (e === void 0) return r;
-    const i = typeof e == "number" && Number.isFinite(e) ? e : null;
-    if (i !== null && i > 0 && i <= 1) return {
+    const o = typeof e == "number" && Number.isFinite(e) ? e : null;
+    if (o !== null && o > 0 && o <= 1) return {
       ...r,
-      width: i
+      width: o
     };
-    const o = i !== null && i > 1 ? 1 : void 0;
+    const i = o !== null && o > 1 ? 1 : void 0;
     return t.diagnostics?.addWarning({
       code: "INVALID_GEOM_PARAM",
-      message: `Candlestick width must be a fraction in (0, 1], got ${String(e)}; falling back to ${o ?? "the default band"}.`,
+      message: `Candlestick width must be a fraction in (0, 1], got ${String(e)}; falling back to ${i ?? "the default band"}.`,
       context: {
         geom: this.type,
         param: "width",
         expected: "0 < width <= 1",
-        actual: i ?? String(e)
+        actual: o ?? String(e)
       },
       suggestion: "Set params.width to a fraction of the session band in (0, 1]."
     }), {
       ...r,
-      ...o !== void 0 && { width: o }
+      ...i !== void 0 && { width: i }
     };
   }
   compile({ data: t, mapping: e, params: r }) {
-    const i = B(r) / 2;
+    const o = B(r) / 2;
     return {
-      data: nt(t, O(e.open), O(e.close)).addConstantVariable(P.xMin, "numeric", -i).addConstantVariable(P.xMax, "numeric", i),
+      data: nt(t, O(e.open), O(e.close)).addConstantVariable(S.xMin, "numeric", -o).addConstantVariable(S.xMax, "numeric", o),
       mapping: { y: e.close }
     };
   }
 }, B = ({ width: t }) => t ?? et, O = (t) => t === void 0 ? null : typeof t == "string" ? t : "variable" in t ? t.variable : null, nt = (t, e, r) => {
   if (e === null || r === null || !t.hasVariable(e) || !t.hasVariable(r)) return t;
-  const i = t.getValues(e, { type: "numeric" }), o = t.getValues(r, { type: "numeric" }), a = i.map((s, l) => {
-    const n = o[l];
+  const o = t.getValues(e, { type: "numeric" }), i = t.getValues(r, { type: "numeric" }), a = o.map((s, l) => {
+    const n = i[l];
     return s === null || n === null || n === void 0 ? null : n >= s ? "rising" : "falling";
   });
   return t.addVariable(w.direction, "categorical", a);
 }, st = 5e-4, H = (t, e) => {
-  const r = (t.open + t.close) / 2, i = Math.max(Math.abs(t.close - t.open), st) / 2, o = p(e, {
+  const r = (t.open + t.close) / 2, o = Math.max(Math.abs(t.close - t.open), st) / 2, i = p(e, {
     main: t.bodyStart,
-    cross: r - i
+    cross: r - o
   }), a = p(e, {
     main: t.bodyEnd,
-    cross: r + i
-  }), [s, l] = T(y(o.x), y(a.x)), [n, d] = T(m(o.y), m(a.y));
+    cross: r + o
+  }), [s, l] = T(y(i.x), y(a.x)), [n, d] = T(m(i.y), m(a.y));
   return {
     x: s,
     y: n,
     width: l - s,
     height: d - n
   };
-}, T = (t, e) => t <= e ? [t, e] : [e, t], lt = ({ layer: t, coordSystem: e, panelRect: r, styleReaders: i }) => {
-  const o = v(e), a = x(t.data, o), s = i.part("wick"), l = s === void 0 ? [] : a.map((d) => {
-    const h = W(d.band, d.low, o, r), g = W(d.band, d.high, o, r), V = s.get("strokeWidth", d.observation) ?? 0;
+}, T = (t, e) => t <= e ? [t, e] : [e, t], lt = ({ layer: t, coordSystem: e, panelRect: r, styleReaders: o }) => {
+  const i = g(e), a = x(t.data, i), s = o.part("wick"), l = s === void 0 ? [] : a.map((d) => {
+    const h = W(d.band, d.low, i, r), v = W(d.band, d.high, i, r), V = s.get("strokeWidth", d.observation) ?? 0;
     return {
       kind: "stroke",
-      pathData: `M${h.x},${h.y}L${g.x},${g.y}`,
+      pathData: `M${h.x},${h.y}L${v.x},${v.y}`,
       width: V
     };
   }), n = a.map((d) => {
-    const h = H(d, o), g = h.x * r.width;
+    const h = H(d, i), v = h.x * r.width;
     return {
       kind: "region",
-      pathData: `M${g},${h.y * r.height}H${(h.x + h.width) * r.width}V${(h.y + h.height) * r.height}H${g}Z`
+      pathData: `M${v},${h.y * r.height}H${(h.x + h.width) * r.width}V${(h.y + h.height) * r.height}H${v}Z`
     };
   });
   return [...l, ...n];
-}, W = (t, e, r, i) => {
-  const o = p(r, {
+}, W = (t, e, r, o) => {
+  const i = p(r, {
     main: t,
     cross: e
   });
-  return q(j(o.x, o.y), i);
+  return q(j(i.x, i.y), o);
 }, C = (t) => {
   const e = G(t.data, t.mapping, t.id);
   return (r) => e(r.observation);
-}, I = ({ candles: t, mainAxis: e, styleReaders: r, getKey: i, isHovered: o = !1, shouldAnimateTransitions: a = !1 }) => {
-  const s = o ? "hovered" : void 0, l = r.part("wick");
+}, I = ({ candles: t, mainAxis: e, styleReaders: r, getKey: o, isHovered: i = !1, shouldAnimateTransitions: a = !1 }) => {
+  const s = i ? "hovered" : void 0, l = r.part("wick");
   return /* @__PURE__ */ J(z, { children: [l && t.map((n) => /* @__PURE__ */ c(dt, {
     candle: n,
     mainAxis: e,
@@ -216,21 +216,21 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
     directionReaders: r.part(n.direction),
     state: s,
     shouldAnimateTransitions: a
-  }, i(n))), t.map((n) => /* @__PURE__ */ c(ct, {
+  }, o(n))), t.map((n) => /* @__PURE__ */ c(ct, {
     candle: n,
     mainAxis: e,
     styleReaders: r,
     state: s,
     shouldAnimateTransitions: a
-  }, i(n)))] });
-}, dt = ({ candle: t, mainAxis: e, readers: r, directionReaders: i, state: o, shouldAnimateTransitions: a }) => {
+  }, o(n)))] });
+}, dt = ({ candle: t, mainAxis: e, readers: r, directionReaders: o, state: i, shouldAnimateTransitions: a }) => {
   const s = p(e, {
     main: t.band,
     cross: t.low
   }), l = p(e, {
     main: t.band,
     cross: t.high
-  }), n = r.get("strokeWidth", t.observation, o) ?? 0, d = r.get("stroke", t.observation, o) ?? i?.get("stroke", t.observation, o);
+  }), n = r.get("strokeWidth", t.observation, i) ?? 0, d = r.get("stroke", t.observation, i) ?? o?.get("stroke", t.observation, i);
   return /* @__PURE__ */ c(N, {
     "data-testid": "candlestick-wick",
     x1: u(y(s.x)),
@@ -238,13 +238,13 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
     x2: u(y(l.x)),
     y2: u(m(l.y)),
     stroke: d === void 0 ? void 0 : b(d),
-    strokeOpacity: r.get("alpha", t.observation, o),
+    strokeOpacity: r.get("alpha", t.observation, i),
     strokeWidth: n,
-    strokeDasharray: Z(r.get("dashArray", t.observation, o), n),
+    strokeDasharray: Z(r.get("dashArray", t.observation, i), n),
     shouldAnimateTransitions: a
   });
-}, ct = ({ candle: t, mainAxis: e, styleReaders: r, state: i, shouldAnimateTransitions: o }) => {
-  const a = H(t, e), s = r.part(t.direction), l = s?.get("fill", t.observation, i), n = s?.get("stroke", t.observation, i);
+}, ct = ({ candle: t, mainAxis: e, styleReaders: r, state: o, shouldAnimateTransitions: i }) => {
+  const a = H(t, e), s = r.part(t.direction), l = s?.get("fill", t.observation, o), n = s?.get("stroke", t.observation, o);
   return /* @__PURE__ */ c(Y, {
     "data-testid": "candlestick-body",
     x: u(a.x),
@@ -252,60 +252,64 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
     width: u(a.width),
     height: u(a.height),
     fill: l === void 0 ? void 0 : b(l),
-    opacity: r.get("alpha", t.observation, i),
-    fillOpacity: r.get("fillAlpha", t.observation, i),
+    opacity: r.get("alpha", t.observation, o),
+    fillOpacity: r.get("fillAlpha", t.observation, o),
     stroke: n === void 0 ? void 0 : b(n),
-    strokeWidth: r.get("strokeWidth", t.observation, i),
-    shouldAnimateTransitions: o
+    strokeWidth: r.get("strokeWidth", t.observation, o),
+    shouldAnimateTransitions: i
   });
-}, ht = ({ layer: t, sourceLayer: e, mainAxis: r, styleReaders: i }) => /* @__PURE__ */ c(I, {
-  candles: k(() => x(t.data, r), [t.data, r]),
+}, ht = ({ layer: t, sourceLayer: e, mainAxis: r, styleReaders: o }) => /* @__PURE__ */ c(I, {
+  candles: f(() => x(t.data, r), [t.data, r]),
   mainAxis: r,
-  styleReaders: i,
-  getKey: k(() => C(e), [e])
-}), ut = ({ layer: t, primary: e, siblings: r, mainAxis: i, styleReaders: o }) => /* @__PURE__ */ c("g", {
+  styleReaders: o,
+  getKey: f(() => C(e), [e])
+}), ut = ({ layer: t, primary: e, siblings: r, mainAxis: o, styleReaders: i }) => /* @__PURE__ */ c("g", {
   "data-testid": "hovered-candles",
   children: /* @__PURE__ */ c(I, {
-    candles: x([e, ...r].map((a) => a.observation), i),
-    mainAxis: i,
-    styleReaders: o,
-    getKey: k(() => C(t), [t]),
+    candles: x([e, ...r].map((a) => a.observation), o),
+    mainAxis: o,
+    styleReaders: i,
+    getKey: f(() => C(t), [t]),
     isHovered: !0
   })
-}), gt = ({ layer: t, mainAxis: e, styleReaders: r, shouldAnimateTransitions: i, intro: o }) => {
+}), vt = ({ layer: t, mainAxis: e, styleReaders: r, shouldAnimateTransitions: o, intro: i }) => {
   const a = /* @__PURE__ */ c(I, {
-    candles: k(() => x(t.data, e), [t.data, e]),
+    candles: f(() => x(t.data, e), [t.data, e]),
     mainAxis: e,
     styleReaders: r,
-    getKey: k(() => C(t), [t]),
-    shouldAnimateTransitions: i
-  });
-  return o?.type === "fade" ? /* @__PURE__ */ c(L, {
-    intro: o,
+    getKey: f(() => C(t), [t]),
+    shouldAnimateTransitions: o
+  }), s = gt(i);
+  return s === null ? a : /* @__PURE__ */ c(L, {
+    intro: s,
     children: a
-  }) : a;
-}, ft = X(new at(), {
+  });
+}, gt = (t) => t == null ? null : {
+  type: "fade",
+  layerId: t.layerId,
+  durationSeconds: t.durationSeconds
+}, yt = X(new at(), {
   coord: "cartesian",
   swatchShape: "square",
   guideMode: "band",
-  render: ({ layer: t, coordSystem: e, styleReaders: r, shouldAnimateTransitions: i, intro: o }) => /* @__PURE__ */ c(gt, {
+  render: ({ layer: t, coordSystem: e, styleReaders: r, shouldAnimateTransitions: o, intro: i }) => /* @__PURE__ */ c(vt, {
     layer: t,
-    mainAxis: v(e),
+    mainAxis: g(e),
     styleReaders: r,
-    shouldAnimateTransitions: i,
-    intro: o
+    shouldAnimateTransitions: o,
+    intro: i
   }),
-  renderHighlight: ({ layer: t, sourceLayer: e, coordSystem: r, styleReaders: i }) => /* @__PURE__ */ c(ht, {
+  renderHighlight: ({ layer: t, sourceLayer: e, coordSystem: r, styleReaders: o }) => /* @__PURE__ */ c(ht, {
     layer: t,
     sourceLayer: e,
-    mainAxis: v(r),
-    styleReaders: i
+    mainAxis: g(r),
+    styleReaders: o
   }),
-  renderHover: ({ layer: t, primary: e, group: r, related: i, coordSystem: o, styleReaders: a }) => /* @__PURE__ */ c(ut, {
+  renderHover: ({ layer: t, primary: e, group: r, related: o, coordSystem: i, styleReaders: a }) => /* @__PURE__ */ c(ut, {
     layer: t,
     primary: e,
-    siblings: [...r, ...i],
-    mainAxis: v(o),
+    siblings: [...r, ...o],
+    mainAxis: g(i),
     styleReaders: a
   }),
   renderHoverCompanions: () => null,
@@ -313,5 +317,5 @@ var w = { direction: "candlestickDirection" }, K = (t, e) => {
 });
 export {
   at as CandlestickGeom,
-  ft as candlestick
+  yt as candlestick
 };

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

@@ -7,9 +7,10 @@ interface CandlestickLayerProps {
     intro: LayerIntroPlan | null | undefined;
 }
 /**
- * The layer's own paint. The engine plans a plugin geom's entrance as a fade, so the whole layer comes up on
- * one clock. The fade is independent of `shouldAnimateTransitions`: it rides the group rather than moving the
- * candles, so it plays even when data changes snap.
+ * The layer's own paint. The whole layer fades up on one clock, whatever entrance the engine plans: a candle is a
+ * rect to the engine, which plans a bar's grow, but a price has no baseline to grow from. The fade is independent
+ * of `shouldAnimateTransitions`: it rides the group rather than moving the candles, so it plays even when data
+ * changes snap.
  */
 export declare const CandlestickLayer: ({ layer, mainAxis, styleReaders, shouldAnimateTransitions, intro, }: CandlestickLayerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -12,7 +12,7 @@
     "grammar-of-graphics",
     "candlestick"
   ],
-  "version": "0.1.0",
+  "version": "0.1.1-beta.1790850980247",
   "type": "module",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@graphysdk/react": "^1.9.0-beta.1790720825915"
+    "@graphysdk/react": "^1.9.0-beta.1790850980247"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
@@ -43,11 +43,11 @@
     "vite": "^8.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.11",
-    "@graphysdk/react": "1.9.0-beta.1790720825915",
+    "@graphysdk/react": "1.9.0-beta.1790850980247",
+    "@graphysdk/viz-engine": "1.9.0-beta.1790850980247",
+    "@graphytools/eslint-config": "0.0.1",
     "@graphytools/typescript-config": "0.0.1",
-    "@graphysdk/viz-engine": "1.8.0",
-    "@graphytools/vitest-config": "1.0.0",
-    "@graphytools/eslint-config": "0.0.1"
+    "@graphytools/vitest-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"