@gearbox-protocol/ui-kit 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/components/graph/graph.cjs +1 -1
  2. package/dist/esm/components/graph/graph.js +171 -163
  3. package/dist/types/components/graph/graph.d.ts +6 -0
  4. package/package.json +1 -1
package/dist/cjs/components/graph/graph.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),lt=require("lightweight-charts"),d=require("react"),Lt=require("../../hooks/use-media-query.cjs"),it=require("../../utils/cn.cjs"),I=require("../../utils/colors.cjs"),W=require("./default-config.cjs"),$=require("./formatters.cjs"),Tt=require("./graph-current-value.cjs"),Ft=require("./graph-tooltip.cjs"),Mt=require("./plugins/vertical-line.cjs");function Et(t){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const R=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(m,c,R.get?R:{enumerable:!0,get:()=>t[c]})}}return m.default=t,Object.freeze(m)}const st=Et(d);function St(t,m,c){const R=t.labelText??"",b=t.value,w=b===void 0?"":typeof b=="number"?m==="$"?`$${$.formatExactValue(b,void 0,c)}`:m==="%"?`${$.formatExactValue(b,void 0,c)}%`:$.formatExactValue(b,m!=="none"&&m!=="%"&&m!=="$"?m:void 0,c):String(b);return{labelText:R,valueStr:w}}const X=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"},{line:"#ea580c",top:"rgba(234, 88, 12, 0.56)",bottom:"rgba(234, 88, 12, 0.04)"},{line:"#84cc16",top:"rgba(132, 204, 22, 0.56)",bottom:"rgba(132, 204, 22, 0.04)"},{line:"#d946ef",top:"rgba(217, 70, 239, 0.56)",bottom:"rgba(217, 70, 239, 0.04)"},{line:"#0ea5e9",top:"rgba(14, 165, 233, 0.56)",bottom:"rgba(14, 165, 233, 0.04)"},{line:"#14b8a6",top:"rgba(20, 184, 166, 0.56)",bottom:"rgba(20, 184, 166, 0.04)"},{line:"#eab308",top:"rgba(234, 179, 8, 0.56)",bottom:"rgba(234, 179, 8, 0.04)"},{line:"#f43f5e",top:"rgba(244, 63, 94, 0.56)",bottom:"rgba(244, 63, 94, 0.04)"},{line:"#6366f1",top:"rgba(99, 102, 241, 0.56)",bottom:"rgba(99, 102, 241, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#78716c",top:"rgba(120, 113, 108, 0.56)",bottom:"rgba(120, 113, 108, 0.04)"},{line:"#64748b",top:"rgba(100, 116, 139, 0.56)",bottom:"rgba(100, 116, 139, 0.04)"},{line:"#475569",top:"rgba(71, 85, 105, 0.56)",bottom:"rgba(71, 85, 105, 0.04)"}],_t=137.5;function ct(t){if(t<X.length)return X[t];const c=(t-X.length)*_t%360,R=I.hslToHex(c,70,50),{topColor:b,bottomColor:w}=I.generateColorsFromBase(R);return{line:R,top:b,bottom:w}}function At({series:t,className:m,showLegend:c=!1,onUnselectSeries:R,xMeasureUnit:b="time",yMeasureUnit:w="token",optionsOverrides:B,verticalLineOptions:x,currentValueDecimals:Z,useSharedPriceScale:j=!1,showCurrentValue:Rt=!0,graphTitle:K,yScaleMin:ut,yScaleMinMultiple:ft}){const N=d.useRef(null),y=d.useRef(new Map),Q=d.useRef(!1),gt=d.useRef(!0),J=d.useRef(null),wt=d.useRef(null),A=d.useRef(null),U=d.useRef(null),k=Lt.useIsMobile(),E=st.useMemo(()=>t.flatMap(e=>e.data),[t]),yt=st.useMemo(()=>{if(t.length>0){const e=t[t.length-1];if(e.data.length>0)return e.data[e.data.length-1]}},[t]),[dt,tt]=d.useState(()=>{if(!yt)return;const e=new Map;for(const a of t)a.data.length>0&&e.set(a.label,a.data[a.data.length-1]);return e}),[bt,_]=d.useState(null),[mt,ht]=d.useState([]);d.useEffect(()=>{const e=()=>{if(N.current&&A.current){const l=A.current.clientWidth,i=A.current.clientHeight;N.current.resize(l,i)}},a=A.current,r=a?new ResizeObserver(e):null;return a&&r?.observe(a),()=>{a&&r?.unobserve(a)}},[]),d.useEffect(()=>{if(!U.current||Q.current)return;const e=W.getDefaultOptions(),a=I.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=lt.createChart(U.current,{...e,rightPriceScale:{...e.rightPriceScale||{},visible:!k,textColor:a},...k&&{crosshair:{...e.crosshair,mode:lt.CrosshairMode.Magnet}},...B});return N.current=r,Q.current=!0,()=>{r.remove(),N.current=null,Q.current=!1,y.current.clear()}},[k,B]),d.useEffect(()=>{const e=N.current;if(!e||t.length===0)return;const r=t.filter(o=>o.data.length>0).length<=1?ut:ft,l=b==="time"?$.getXFormatters(b,E):$.getXFormatters(b),i=E.map(o=>o.value),{formatter:u,tickmarksFormatter:g,updateVisibleRange:P,updateLastValues:h}=$.createAdaptiveYAxisFormatter(i,w,{yScaleMin:r});J.current=P,wt.current=h;const L=t.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);h(L);const T=W.getDefaultOptions();e.applyOptions({localization:{...T.localization||{},timeFormatter:o=>l.timeFormatter(parseFloat(o),void 0)},timeScale:{...T.timeScale||{},tickMarkFormatter:l.tickMarkFormatter,minBarSpacing:0}});const p=(E.length>0?Math.min(...E.map(o=>o.value)):0)<0,S=E.some(o=>o.value===0),C=!p&&S,v=t.length>1&&!j,F=t.length>1&&!j||k,M=I.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");e.applyOptions({rightPriceScale:{...T.rightPriceScale||{},visible:!F,textColor:M,...C&&{scaleMargins:{top:.3,bottom:0}}}});const et=new Set(y.current.keys()),ot=new Set(t.map(o=>o.label));for(const o of et)if(!ot.has(o)){const n=y.current.get(o);n&&(e.removeSeries(n),y.current.delete(o))}const Vt=W.getDefaultSeries(),rt=[];let H=0;for(let o=0;o<t.length;o++){const n=t[o],G=ct(o),O=n.lineColor??n.color??G.line;let D,q;if(n.lineColor??n.color)if(n.topColor&&n.bottomColor)D=n.topColor,q=n.bottomColor;else if(n.topColor){const s=I.generateColorsFromBase(O);D=n.topColor,q=s.bottomColor}else if(n.bottomColor)D=I.generateColorsFromBase(O).topColor,q=n.bottomColor;else{const s=I.generateColorsFromBase(O);D=s.topColor,q=s.bottomColor}else D=n.topColor||G.top,q=n.bottomColor||G.bottom;if(n.data.length===0){const s=y.current.get(n.label);s&&(e.removeSeries(s),y.current.delete(n.label));continue}const kt=(n.data.length>0?Math.min(...n.data.map(s=>s.value)):0)<0,jt=n.data.some(s=>s.value===0),Nt=!kt&&jt,Ct=j||!v||H===0?"right":`scale-${H}`;v&&rt.push({priceScaleId:Ct||"right",shouldPreventNegativeAxis:Nt,seriesIndex:H});const vt=(j||!v)&&r!==void 0&&typeof r=="number",xt={lineColor:O,topColor:D,bottomColor:q,priceScaleId:Ct,priceFormat:{type:"custom",minMove:.01,formatter:vt&&typeof r=="number"?s=>u(s<r?r:s):u,tickmarksFormatter:g},autoscaleInfoProvider:s=>{if(!vt)return s();const at=s();if(at?.priceRange){const Pt=r;at.priceRange.minValue=Pt}return at}};let z=y.current.get(n.label);z?(z.applyOptions(xt),z.setData(n.data.map(s=>({...s,time:s.time})))):(z=e.addSeries(lt.AreaSeries,{...Vt,...xt}),z.setData(n.data.map(s=>({...s,time:s.time}))),y.current.set(n.label,z)),H++}if(v&&rt.length>0)for(const o of rt)try{const n=e.priceScale(o.priceScaleId);n&&n.applyOptions({visible:!1,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:M})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}else if(!v)try{const o=e.priceScale("right");o&&o.applyOptions({visible:!k,autoScale:!0,scaleMargins:{top:.1,bottom:r!==void 0||C?0:.1,...C&&{top:.3}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:M})}catch{}if(r!==void 0&&!k&&(j||!v)&&e.applyOptions({handleScroll:{vertTouchDrag:!1}}),E.length>0){const o=E.map(O=>Number(O.time)),n=Math.min(...o),G=Math.max(...o);e.timeScale().setVisibleRange({from:n,to:G})}gt.current&&(gt.current=!1);const nt=new Map;for(const o of t)o.data.length>0&&nt.set(o.label,o.data[o.data.length-1]);tt(nt.size>0?nt:void 0)},[t,E,b,w,k,j,ut,ft]),d.useEffect(()=>{const e=N.current;if(!e||t.length===0)return;const a=t.length===1;let r;for(const i of t)if(i.data.length>0){r=i.data[i.data.length-1].time;break}if(!r)return;const l=i=>{const{time:u=r,seriesData:g,point:P}=i||{},h=Array.from(y.current.values());if(!P||!u){const V=new Map;for(const p of t)p.data.length>0&&V.set(p.label,p.data[p.data.length-1]);if(tt(V.size>0?V:void 0),a||j)_(null);else if(h[0]&&r){const S=e.timeScale().timeToCoordinate(r),C=t[0];if(C.data.length>0){const v=C.data[C.data.length-1].value,F=h[0].priceToCoordinate(v);S!==null&&F!==null&&_({x:S,y:F})}}return}const L=new Map;let T;for(let V=0;V<t.length;V++){const p=t[V],S=h[V];if(!S)continue;const C=g?.get(S),v=C&&"value"in C?C.value:void 0,F=p.data[p.data.length-1],M=v!==void 0?v:F?.value??0;V===0&&(T=M),L.set(p.label,{value:M,time:u})}if(tt(L),T!==void 0&&h[0]){const p=e.timeScale().timeToCoordinate(u),S=h[0].priceToCoordinate(T);if(p!==null&&S!==null){const C=A.current;if(C){const v=C.querySelector(".LightweightChart");if(v){const F=v.getBoundingClientRect(),M=C.getBoundingClientRect(),et=p+(F.left-M.left),ot=S+(F.top-M.top);_({x:et,y:ot})}else _({x:p,y:S})}else _({x:p,y:S})}else _(null)}else _(null)};return e.subscribeCrosshairMove(l),k&&e.subscribeClick(l),!a&&!j&&requestAnimationFrame(()=>{const i=Array.from(y.current.values());if(i[0]&&r&&t[0]?.data.length>0){const g=e.timeScale().timeToCoordinate(r),P=t[0].data[t[0].data.length-1].value,h=i[0].priceToCoordinate(P);g!==null&&h!==null&&_({x:g,y:h})}}),()=>{e.unsubscribeCrosshairMove(l),k&&e.unsubscribeClick(l)}},[t,j,k]),d.useEffect(()=>{const e=N.current;if(!e||t.length===0)return;const a=e.timeScale(),r=()=>{if(!J.current)return;const l=a.getVisibleRange();if(!l)return;const i=Number(l.from),u=Number(l.to),g=[];for(const P of t)for(const h of P.data){const L=Number(h.time);L>=i&&L<=u&&g.push(h.value)}g.length>0&&J.current(g)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[t]),d.useEffect(()=>{const e=N.current,a=Array.from(y.current.values()),r=[];if(e&&a.length>0&&x){const l=W.getDefaultVerticalLine(),i=a[0];for(const u of x){const g=new Mt.VertLine(e,i,u.xCoordinate,{...l,...u.options||{}});i.attachPrimitive(g),r.push(g)}}return()=>{if(a.length>0){const l=a[0];for(const i of r)l.detachPrimitive(i)}}},[x]),d.useEffect(()=>{const e=N.current;if(!e||!x?.length){ht([]);return}const a=()=>{const i=e.timeScale(),u=x.map(g=>i.timeToCoordinate(g.xCoordinate)??null);ht(u)};a();const r=e.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[x]);const Y=t.length===1,pt=st.useMemo(()=>{if(Y&&t.length>0){const e=t[0];if(e.data.length>0)return e.data[e.data.length-1]}},[Y,t]);return f.jsxs("div",{ref:A,className:it.cn("relative z-[1] w-full h-full overflow-hidden p-0",m),children:[K!=null&&K!==!1&&Y?f.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:f.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:K})}):Rt&&Y&&pt&&f.jsx(Tt.GraphCurrentValue,{point:pt,xMeasureUnit:b,yMeasureUnit:w,decimals:Z}),dt&&bt&&f.jsx(Ft.GraphTooltip,{points:dt,xMeasureUnit:b,yMeasureUnit:w,series:t,position:bt,containerRef:A,decimals:Z}),c&&f.jsx(It,{series:t,onUnselect:R}),x&&x.length>0&&mt.length===x.length&&f.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:x.map((e,a)=>{const r=mt[a],l=e.options??{},i=l.showLabel!==!1;if(r===null||!i)return null;const{labelText:u,valueStr:g}=St(l,w,Z);if(!(u||g))return null;const h=l.labelBackgroundColor??l.color??"hsl(var(--background))",L=l.labelTextColor??"hsl(var(--foreground))",T=`${String(e.xCoordinate)}-${u}`;return f.jsxs("div",{className:"absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",style:{left:r,transform:"translateX(-50%)",backgroundColor:h,color:L},children:[u&&f.jsx("span",{className:"block",children:u}),g&&f.jsx("span",{className:it.cn("block",u&&"mt-0.5"),children:g})]},T)})}),f.jsx("div",{ref:U,className:"LightweightChart w-full h-full overflow-hidden"})]})}function It({series:t,onUnselect:m}){return f.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:t.map((c,R)=>{const b=ct(R),w=(c.lineColor??c.color)||b.line,B=c.data.length===0;return f.jsxs("div",{className:it.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",B&&"opacity-50"),children:[f.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:w}}),f.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[c.label,B&&" (no data)"]}),m&&f.jsx("button",{type:"button",onClick:x=>{x.stopPropagation(),m(c.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${c.label}`,children:f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[f.jsx("title",{children:"Close"}),f.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),f.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},c.label)})})}exports.DEFAULT_SERIES_COLORS=X;exports.Graph=At;exports.getSeriesColorPalette=ct;exports.getVerticalLineTooltipContent=St;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),le=require("lightweight-charts"),d=require("react"),Pe=require("../../hooks/use-media-query.cjs"),ie=require("../../utils/cn.cjs"),A=require("../../utils/colors.cjs"),W=require("./default-config.cjs"),$=require("./formatters.cjs"),Te=require("./graph-current-value.cjs"),Me=require("./graph-tooltip.cjs"),Ee=require("./plugins/vertical-line.cjs");function _e(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const w=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(b,s,w.get?w:{enumerable:!0,get:()=>e[s]})}}return b.default=e,Object.freeze(b)}const se=_e(d);function Se(e,b,s){const w=e.labelText??"",m=e.value,V=m===void 0?"":typeof m=="number"?b==="$"?`$${$.formatExactValue(m,void 0,s)}`:b==="%"?`${$.formatExactValue(m,void 0,s)}%`:$.formatExactValue(m,b!=="none"&&b!=="%"&&b!=="$"?b:void 0,s):String(m);return{labelText:w,valueStr:V}}function Re(e,b){for(let s=e.length-1;s>=0;s--)if(Number(e[s].time)<=b)return e[s].value;return 0}const X=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"},{line:"#ea580c",top:"rgba(234, 88, 12, 0.56)",bottom:"rgba(234, 88, 12, 0.04)"},{line:"#84cc16",top:"rgba(132, 204, 22, 0.56)",bottom:"rgba(132, 204, 22, 0.04)"},{line:"#d946ef",top:"rgba(217, 70, 239, 0.56)",bottom:"rgba(217, 70, 239, 0.04)"},{line:"#0ea5e9",top:"rgba(14, 165, 233, 0.56)",bottom:"rgba(14, 165, 233, 0.04)"},{line:"#14b8a6",top:"rgba(20, 184, 166, 0.56)",bottom:"rgba(20, 184, 166, 0.04)"},{line:"#eab308",top:"rgba(234, 179, 8, 0.56)",bottom:"rgba(234, 179, 8, 0.04)"},{line:"#f43f5e",top:"rgba(244, 63, 94, 0.56)",bottom:"rgba(244, 63, 94, 0.04)"},{line:"#6366f1",top:"rgba(99, 102, 241, 0.56)",bottom:"rgba(99, 102, 241, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#78716c",top:"rgba(120, 113, 108, 0.56)",bottom:"rgba(120, 113, 108, 0.04)"},{line:"#64748b",top:"rgba(100, 116, 139, 0.56)",bottom:"rgba(100, 116, 139, 0.04)"},{line:"#475569",top:"rgba(71, 85, 105, 0.56)",bottom:"rgba(71, 85, 105, 0.04)"}],Ae=137.5;function ce(e){if(e<X.length)return X[e];const s=(e-X.length)*Ae%360,w=A.hslToHex(s,70,50),{topColor:m,bottomColor:V}=A.generateColorsFromBase(w);return{line:w,top:m,bottom:V}}function Ie({series:e,className:b,showLegend:s=!1,onUnselectSeries:w,xMeasureUnit:m="time",yMeasureUnit:V="token",optionsOverrides:B,verticalLineOptions:S,currentValueDecimals:Z,useSharedPriceScale:j=!1,showCurrentValue:we=!0,graphTitle:K,yScaleMin:ue,yScaleMinMultiple:fe}){const F=d.useRef(null),y=d.useRef(new Map),Q=d.useRef(!1),ge=d.useRef(!0),J=d.useRef(null),Ve=d.useRef(null),_=d.useRef(null),U=d.useRef(null),N=Pe.useIsMobile(),M=se.useMemo(()=>e.flatMap(t=>t.data),[e]),ye=se.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[de,ee]=d.useState(()=>{if(!ye)return;const t=new Map;for(const a of e)a.data.length>0&&t.set(a.label,a.data[a.data.length-1]);return t}),[be,E]=d.useState(null),[me,he]=d.useState([]);d.useEffect(()=>{const t=()=>{if(F.current&&_.current){const l=_.current.clientWidth,c=_.current.clientHeight;F.current.resize(l,c)}},a=_.current,r=a?new ResizeObserver(t):null;return a&&r?.observe(a),()=>{a&&r?.unobserve(a)}},[]),d.useEffect(()=>{if(!U.current||Q.current)return;const t=W.getDefaultOptions(),a=A.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=le.createChart(U.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!N,textColor:a},...N&&{crosshair:{...t.crosshair,mode:le.CrosshairMode.Magnet}},...B});return F.current=r,Q.current=!0,()=>{r.remove(),F.current=null,Q.current=!1,y.current.clear()}},[N,B]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const r=e.filter(o=>o.data.length>0).length<=1?ue:fe,l=m==="time"?$.getXFormatters(m,M):$.getXFormatters(m),c=M.map(o=>o.value),{formatter:u,tickmarksFormatter:g,updateVisibleRange:L,updateLastValues:p}=$.createAdaptiveYAxisFormatter(c,V,{yScaleMin:r});J.current=L,Ve.current=p;const P=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);p(P);const T=W.getDefaultOptions();t.applyOptions({localization:{...T.localization||{},timeFormatter:o=>l.timeFormatter(parseFloat(o),void 0)},timeScale:{...T.timeScale||{},tickMarkFormatter:l.tickMarkFormatter,minBarSpacing:0}});const h=(M.length>0?Math.min(...M.map(o=>o.value)):0)<0,R=M.some(o=>o.value===0),C=!h&&R,v=e.length>1&&!j,x=e.length>1&&!j||N,I=A.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...T.rightPriceScale||{},visible:!x,textColor:I,...C&&{scaleMargins:{top:.3,bottom:0}}}});const te=new Set(y.current.keys()),oe=new Set(e.map(o=>o.label));for(const o of te)if(!oe.has(o)){const n=y.current.get(o);n&&(t.removeSeries(n),y.current.delete(o))}const ke=W.getDefaultSeries(),re=[];let H=0;for(let o=0;o<e.length;o++){const n=e[o],G=ce(o),O=n.lineColor??n.color??G.line;let D,q;if(n.lineColor??n.color)if(n.topColor&&n.bottomColor)D=n.topColor,q=n.bottomColor;else if(n.topColor){const i=A.generateColorsFromBase(O);D=n.topColor,q=i.bottomColor}else if(n.bottomColor)D=A.generateColorsFromBase(O).topColor,q=n.bottomColor;else{const i=A.generateColorsFromBase(O);D=i.topColor,q=i.bottomColor}else D=n.topColor||G.top,q=n.bottomColor||G.bottom;if(n.data.length===0){const i=y.current.get(n.label);i&&(t.removeSeries(i),y.current.delete(n.label));continue}const Ne=(n.data.length>0?Math.min(...n.data.map(i=>i.value)):0)<0,je=n.data.some(i=>i.value===0),Fe=!Ne&&je,Ce=j||!v||H===0?"right":`scale-${H}`;v&&re.push({priceScaleId:Ce||"right",shouldPreventNegativeAxis:Fe,seriesIndex:H});const ve=(j||!v)&&r!==void 0&&typeof r=="number",xe={lineColor:O,topColor:D,bottomColor:q,priceScaleId:Ce,priceFormat:{type:"custom",minMove:.01,formatter:ve&&typeof r=="number"?i=>u(i<r?r:i):u,tickmarksFormatter:g},autoscaleInfoProvider:i=>{if(!ve)return i();const ae=i();if(ae?.priceRange){const Le=r;ae.priceRange.minValue=Le}return ae}};let z=y.current.get(n.label);z?(z.applyOptions(xe),z.setData(n.data.map(i=>({...i,time:i.time})))):(z=t.addSeries(le.AreaSeries,{...ke,...xe}),z.setData(n.data.map(i=>({...i,time:i.time}))),y.current.set(n.label,z)),H++}if(v&&re.length>0)for(const o of re)try{const n=t.priceScale(o.priceScaleId);n&&n.applyOptions({visible:!1,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:I})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}else if(!v)try{const o=t.priceScale("right");o&&o.applyOptions({visible:!N,autoScale:!0,scaleMargins:{top:.1,bottom:r!==void 0||C?0:.1,...C&&{top:.3}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:I})}catch{}if(r!==void 0&&!N&&(j||!v)&&t.applyOptions({handleScroll:{vertTouchDrag:!1}}),M.length>0){const o=M.map(O=>Number(O.time)),n=Math.min(...o),G=Math.max(...o);t.timeScale().setVisibleRange({from:n,to:G})}ge.current&&(ge.current=!1);const ne=new Map;for(const o of e)o.data.length>0&&ne.set(o.label,o.data[o.data.length-1]);ee(ne.size>0?ne:void 0)},[e,M,m,V,N,j,ue,fe]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const a=e.length===1;let r;for(const c of e)if(c.data.length>0){r=c.data[c.data.length-1].time;break}if(!r)return;const l=c=>{const{time:u=r,seriesData:g,point:L}=c||{},p=Array.from(y.current.values());if(!L||!u){const k=new Map;for(const h of e)h.data.length>0&&k.set(h.label,h.data[h.data.length-1]);if(ee(k.size>0?k:void 0),a||j)E(null);else if(p[0]&&r){const R=t.timeScale().timeToCoordinate(r),C=e[0];if(C.data.length>0){const v=C.data[C.data.length-1].value,x=p[0].priceToCoordinate(v);R!==null&&x!==null&&E({x:R,y:x})}}return}const P=new Map;let T;for(let k=0;k<e.length;k++){const h=e[k],R=p[k];if(!R)continue;const C=g?.get(R),v=C&&"value"in C?C.value:void 0;let x;v!==void 0?x=v:a?x=h.data[h.data.length-1]?.value??0:x=Re(h.data,Number(u)),k===0&&(T=x),P.set(h.label,{value:x,time:u})}if(ee(P),T!==void 0&&p[0]){const h=t.timeScale().timeToCoordinate(u),R=p[0].priceToCoordinate(T);if(h!==null&&R!==null){const C=_.current;if(C){const v=C.querySelector(".LightweightChart");if(v){const x=v.getBoundingClientRect(),I=C.getBoundingClientRect(),te=h+(x.left-I.left),oe=R+(x.top-I.top);E({x:te,y:oe})}else E({x:h,y:R})}else E({x:h,y:R})}else E(null)}else E(null)};return t.subscribeCrosshairMove(l),N&&t.subscribeClick(l),!a&&!j&&requestAnimationFrame(()=>{const c=Array.from(y.current.values());if(c[0]&&r&&e[0]?.data.length>0){const g=t.timeScale().timeToCoordinate(r),L=e[0].data[e[0].data.length-1].value,p=c[0].priceToCoordinate(L);g!==null&&p!==null&&E({x:g,y:p})}}),()=>{t.unsubscribeCrosshairMove(l),N&&t.unsubscribeClick(l)}},[e,j,N]),d.useEffect(()=>{const t=F.current;if(!t||e.length===0)return;const a=t.timeScale(),r=()=>{if(!J.current)return;const l=a.getVisibleRange();if(!l)return;const c=Number(l.from),u=Number(l.to),g=[];for(const L of e)for(const p of L.data){const P=Number(p.time);P>=c&&P<=u&&g.push(p.value)}g.length>0&&J.current(g)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[e]),d.useEffect(()=>{const t=F.current,a=Array.from(y.current.values()),r=[];if(t&&a.length>0&&S){const l=W.getDefaultVerticalLine(),c=a[0];for(const u of S){const g=new Ee.VertLine(t,c,u.xCoordinate,{...l,...u.options||{}});c.attachPrimitive(g),r.push(g)}}return()=>{if(a.length>0){const l=a[0];for(const c of r)l.detachPrimitive(c)}}},[S]),d.useEffect(()=>{const t=F.current;if(!t||!S?.length){he([]);return}const a=()=>{const c=t.timeScale(),u=S.map(g=>c.timeToCoordinate(g.xCoordinate)??null);he(u)};a();const r=t.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[S]);const Y=e.length===1,pe=se.useMemo(()=>{if(Y&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[Y,e]);return f.jsxs("div",{ref:_,className:ie.cn("relative z-[1] w-full h-full overflow-hidden p-0",b),children:[K!=null&&K!==!1&&Y?f.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:f.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:K})}):we&&Y&&pe&&f.jsx(Te.GraphCurrentValue,{point:pe,xMeasureUnit:m,yMeasureUnit:V,decimals:Z}),de&&be&&f.jsx(Me.GraphTooltip,{points:de,xMeasureUnit:m,yMeasureUnit:V,series:e,position:be,containerRef:_,decimals:Z}),s&&f.jsx(Oe,{series:e,onUnselect:w}),S&&S.length>0&&me.length===S.length&&f.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:S.map((t,a)=>{const r=me[a],l=t.options??{},c=l.showLabel!==!1;if(r===null||!c)return null;const{labelText:u,valueStr:g}=Se(l,V,Z);if(!(u||g))return null;const p=l.labelBackgroundColor??l.color??"hsl(var(--background))",P=l.labelTextColor??"hsl(var(--foreground))",T=`${String(t.xCoordinate)}-${u}`;return f.jsxs("div",{className:"absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",style:{left:r,transform:"translateX(-50%)",backgroundColor:p,color:P},children:[u&&f.jsx("span",{className:"block",children:u}),g&&f.jsx("span",{className:ie.cn("block",u&&"mt-0.5"),children:g})]},T)})}),f.jsx("div",{ref:U,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Oe({series:e,onUnselect:b}){return f.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((s,w)=>{const m=ce(w),V=(s.lineColor??s.color)||m.line,B=s.data.length===0;return f.jsxs("div",{className:ie.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",B&&"opacity-50"),children:[f.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:V}}),f.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[s.label,B&&" (no data)"]}),b&&f.jsx("button",{type:"button",onClick:S=>{S.stopPropagation(),b(s.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${s.label}`,children:f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[f.jsx("title",{children:"Close"}),f.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),f.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},s.label)})})}exports.DEFAULT_SERIES_COLORS=X;exports.Graph=Ie;exports.getSeriesColorPalette=ce;exports.getStepForwardValue=Re;exports.getVerticalLineTooltipContent=Se;
package/dist/esm/components/graph/graph.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsxs as j, jsx as h } from "react/jsx-runtime";
1
+ import { jsxs as H, jsx as h } from "react/jsx-runtime";
2
2
  import { createChart as At, CrosshairMode as It, AreaSeries as zt } from "lightweight-charts";
3
3
  import * as at from "react";
4
- import { useRef as z, useState as lt, useEffect as D } from "react";
4
+ import { useRef as I, useState as lt, useEffect as $ } from "react";
5
5
  import { useIsMobile as $t } from "../../hooks/use-media-query.js";
6
6
  import { cn as ct } from "../../utils/cn.js";
7
7
  import { resolveCSSColor as St, generateColorsFromBase as X, hslToHex as Dt } from "../../utils/colors.js";
@@ -9,14 +9,20 @@ import { getDefaultOptions as wt, getDefaultSeries as Et, getDefaultVerticalLine
9
9
  import { getXFormatters as Rt, createAdaptiveYAxisFormatter as Bt, formatExactValue as it } from "./formatters.js";
10
10
  import { GraphCurrentValue as Ot } from "./graph-current-value.js";
11
11
  import { GraphTooltip as Yt } from "./graph-tooltip.js";
12
- import { VertLine as Ht } from "./plugins/vertical-line.js";
13
- function jt(e, v, m) {
14
- const M = e.labelText ?? "", f = e.value, S = f === void 0 ? "" : typeof f == "number" ? v === "$" ? `$${it(f, void 0, m)}` : v === "%" ? `${it(f, void 0, m)}%` : it(
15
- f,
16
- v !== "none" && v !== "%" && v !== "$" ? v : void 0,
17
- m
18
- ) : String(f);
19
- return { labelText: M, valueStr: S };
12
+ import { VertLine as jt } from "./plugins/vertical-line.js";
13
+ function Ht(e, p, u) {
14
+ const T = e.labelText ?? "", g = e.value, w = g === void 0 ? "" : typeof g == "number" ? p === "$" ? `$${it(g, void 0, u)}` : p === "%" ? `${it(g, void 0, u)}%` : it(
15
+ g,
16
+ p !== "none" && p !== "%" && p !== "$" ? p : void 0,
17
+ u
18
+ ) : String(g);
19
+ return { labelText: T, valueStr: w };
20
+ }
21
+ function Wt(e, p) {
22
+ for (let u = e.length - 1; u >= 0; u--)
23
+ if (Number(e[u].time) <= p)
24
+ return e[u].value;
25
+ return 0;
20
26
  }
21
27
  const st = [
22
28
  // 0 green (emerald)
@@ -133,55 +139,55 @@ const st = [
133
139
  top: "rgba(71, 85, 105, 0.56)",
134
140
  bottom: "rgba(71, 85, 105, 0.04)"
135
141
  }
136
- ], Wt = 137.5;
142
+ ], _t = 137.5;
137
143
  function Vt(e) {
138
144
  if (e < st.length)
139
145
  return st[e];
140
- const m = (e - st.length) * Wt % 360, M = Dt(m, 70, 50), { topColor: f, bottomColor: S } = X(M);
141
- return { line: M, top: f, bottom: S };
146
+ const u = (e - st.length) * _t % 360, T = Dt(u, 70, 50), { topColor: g, bottomColor: w } = X(T);
147
+ return { line: T, top: g, bottom: w };
142
148
  }
143
- function ie({
149
+ function se({
144
150
  series: e,
145
- className: v,
146
- showLegend: m = !1,
147
- onUnselectSeries: M,
148
- xMeasureUnit: f = "time",
149
- yMeasureUnit: S = "token",
151
+ className: p,
152
+ showLegend: u = !1,
153
+ onUnselectSeries: T,
154
+ xMeasureUnit: g = "time",
155
+ yMeasureUnit: w = "token",
150
156
  optionsOverrides: Y,
151
- verticalLineOptions: C,
157
+ verticalLineOptions: x,
152
158
  currentValueDecimals: q,
153
- useSharedPriceScale: y = !1,
159
+ useSharedPriceScale: N = !1,
154
160
  showCurrentValue: yt = !0,
155
161
  graphTitle: Z,
156
162
  yScaleMin: ut,
157
163
  yScaleMinMultiple: ft
158
164
  }) {
159
- const k = z(null), w = z(/* @__PURE__ */ new Map()), K = z(!1), gt = z(!0), J = z(
165
+ const k = I(null), R = I(/* @__PURE__ */ new Map()), K = I(!1), gt = I(!0), J = I(
160
166
  null
161
- ), kt = z(null), $ = z(null), Q = z(null), V = $t(), A = at.useMemo(() => e.flatMap((t) => t.data), [e]), Nt = at.useMemo(() => {
167
+ ), Nt = I(null), z = I(null), Q = I(null), y = $t(), M = at.useMemo(() => e.flatMap((t) => t.data), [e]), kt = at.useMemo(() => {
162
168
  if (e.length > 0) {
163
169
  const t = e[e.length - 1];
164
170
  if (t.data.length > 0)
165
171
  return t.data[t.data.length - 1];
166
172
  }
167
173
  }, [e]), [dt, U] = lt(() => {
168
- if (!Nt) return;
174
+ if (!kt) return;
169
175
  const t = /* @__PURE__ */ new Map();
170
176
  for (const a of e)
171
177
  a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
172
178
  return t;
173
- }), [mt, I] = lt(null), [bt, ht] = lt([]);
174
- D(() => {
179
+ }), [mt, A] = lt(null), [bt, ht] = lt([]);
180
+ $(() => {
175
181
  const t = () => {
176
- if (k.current && $.current) {
177
- const l = $.current.clientWidth, s = $.current.clientHeight;
182
+ if (k.current && z.current) {
183
+ const l = z.current.clientWidth, s = z.current.clientHeight;
178
184
  k.current.resize(l, s);
179
185
  }
180
- }, a = $.current, r = a ? new ResizeObserver(t) : null;
186
+ }, a = z.current, r = a ? new ResizeObserver(t) : null;
181
187
  return a && r?.observe(a), () => {
182
188
  a && r?.unobserve(a);
183
189
  };
184
- }, []), D(() => {
190
+ }, []), $(() => {
185
191
  if (!Q.current || K.current) return;
186
192
  const t = wt(), a = St(
187
193
  "hsl(var(--foreground))",
@@ -190,10 +196,10 @@ function ie({
190
196
  ...t,
191
197
  rightPriceScale: {
192
198
  ...t.rightPriceScale || {},
193
- visible: !V,
199
+ visible: !y,
194
200
  textColor: a
195
201
  },
196
- ...V && {
202
+ ...y && {
197
203
  crosshair: {
198
204
  ...t.crosshair,
199
205
  mode: It.Magnet
@@ -202,26 +208,26 @@ function ie({
202
208
  ...Y
203
209
  });
204
210
  return k.current = r, K.current = !0, () => {
205
- r.remove(), k.current = null, K.current = !1, w.current.clear();
211
+ r.remove(), k.current = null, K.current = !1, R.current.clear();
206
212
  };
207
- }, [V, Y]), D(() => {
213
+ }, [y, Y]), $(() => {
208
214
  const t = k.current;
209
215
  if (!t || e.length === 0) return;
210
- const r = e.filter((o) => o.data.length > 0).length <= 1 ? ut : ft, l = f === "time" ? Rt(f, A) : Rt(f), s = A.map((o) => o.value), {
216
+ const r = e.filter((o) => o.data.length > 0).length <= 1 ? ut : ft, l = g === "time" ? Rt(g, M) : Rt(g), s = M.map((o) => o.value), {
211
217
  formatter: c,
212
- tickmarksFormatter: u,
213
- updateVisibleRange: N,
214
- updateLastValues: g
215
- } = Bt(s, S, {
218
+ tickmarksFormatter: f,
219
+ updateVisibleRange: L,
220
+ updateLastValues: m
221
+ } = Bt(s, w, {
216
222
  yScaleMin: r
217
223
  });
218
- J.current = N, kt.current = g;
224
+ J.current = L, Nt.current = m;
219
225
  const P = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
220
- g(P);
221
- const L = wt();
226
+ m(P);
227
+ const F = wt();
222
228
  t.applyOptions({
223
229
  localization: {
224
- ...L.localization || {},
230
+ ...F.localization || {},
225
231
  // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
226
232
  timeFormatter: (o) => (
227
233
  // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
@@ -229,21 +235,21 @@ function ie({
229
235
  )
230
236
  },
231
237
  timeScale: {
232
- ...L.timeScale || {},
238
+ ...F.timeScale || {},
233
239
  // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
234
240
  tickMarkFormatter: l.tickMarkFormatter,
235
241
  minBarSpacing: 0
236
242
  }
237
243
  });
238
- const d = (A.length > 0 ? Math.min(...A.map((o) => o.value)) : 0) < 0, x = A.some((o) => o.value === 0), b = !d && x, p = e.length > 1 && !y, T = e.length > 1 && !y || V, F = St(
244
+ const d = (M.length > 0 ? Math.min(...M.map((o) => o.value)) : 0) < 0, S = M.some((o) => o.value === 0), b = !d && S, v = e.length > 1 && !N, C = e.length > 1 && !N || y, D = St(
239
245
  "hsl(var(--foreground))",
240
246
  "rgb(0, 0, 0)"
241
247
  );
242
248
  t.applyOptions({
243
249
  rightPriceScale: {
244
- ...L.rightPriceScale || {},
245
- visible: !T,
246
- textColor: F,
250
+ ...F.rightPriceScale || {},
251
+ visible: !C,
252
+ textColor: D,
247
253
  ...b && {
248
254
  scaleMargins: {
249
255
  top: 0.3,
@@ -252,16 +258,16 @@ function ie({
252
258
  }
253
259
  }
254
260
  });
255
- const tt = new Set(w.current.keys()), et = new Set(e.map((o) => o.label));
261
+ const tt = new Set(R.current.keys()), et = new Set(e.map((o) => o.label));
256
262
  for (const o of tt)
257
263
  if (!et.has(o)) {
258
- const n = w.current.get(o);
259
- n && (t.removeSeries(n), w.current.delete(o));
264
+ const n = R.current.get(o);
265
+ n && (t.removeSeries(n), R.current.delete(o));
260
266
  }
261
- const Pt = Et(), ot = [];
267
+ const Lt = Et(), ot = [];
262
268
  let _ = 0;
263
269
  for (let o = 0; o < e.length; o++) {
264
- const n = e[o], H = Vt(o), E = n.lineColor ?? n.color ?? H.line;
270
+ const n = e[o], j = Vt(o), E = n.lineColor ?? n.color ?? j.line;
265
271
  let G, B;
266
272
  if (n.lineColor ?? n.color)
267
273
  if (n.topColor && n.bottomColor)
@@ -276,19 +282,19 @@ function ie({
276
282
  G = i.topColor, B = i.bottomColor;
277
283
  }
278
284
  else
279
- G = n.topColor || H.top, B = n.bottomColor || H.bottom;
285
+ G = n.topColor || j.top, B = n.bottomColor || j.bottom;
280
286
  if (n.data.length === 0) {
281
- const i = w.current.get(n.label);
282
- i && (t.removeSeries(i), w.current.delete(n.label));
287
+ const i = R.current.get(n.label);
288
+ i && (t.removeSeries(i), R.current.delete(n.label));
283
289
  continue;
284
290
  }
285
- const Lt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Tt = n.data.some((i) => i.value === 0), Ft = !Lt && Tt, vt = y || !p || _ === 0 ? "right" : `scale-${_}`;
286
- p && ot.push({
291
+ const Pt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Ft = n.data.some((i) => i.value === 0), Tt = !Pt && Ft, vt = N || !v || _ === 0 ? "right" : `scale-${_}`;
292
+ v && ot.push({
287
293
  priceScaleId: vt || "right",
288
- shouldPreventNegativeAxis: Ft,
294
+ shouldPreventNegativeAxis: Tt,
289
295
  seriesIndex: _
290
296
  });
291
- const Ct = (y || !p) && r !== void 0 && typeof r == "number", xt = {
297
+ const Ct = (N || !v) && r !== void 0 && typeof r == "number", xt = {
292
298
  lineColor: E,
293
299
  topColor: G,
294
300
  bottomColor: B,
@@ -299,7 +305,7 @@ function ie({
299
305
  formatter: Ct && typeof r == "number" ? (i) => c(
300
306
  i < r ? r : i
301
307
  ) : c,
302
- tickmarksFormatter: u
308
+ tickmarksFormatter: f
303
309
  },
304
310
  autoscaleInfoProvider: (i) => {
305
311
  if (!Ct) return i();
@@ -311,23 +317,23 @@ function ie({
311
317
  return nt;
312
318
  }
313
319
  };
314
- let O = w.current.get(n.label);
320
+ let O = R.current.get(n.label);
315
321
  O ? (O.applyOptions(xt), O.setData(
316
322
  n.data.map((i) => ({
317
323
  ...i,
318
324
  time: i.time
319
325
  }))
320
326
  )) : (O = t.addSeries(zt, {
321
- ...Pt,
327
+ ...Lt,
322
328
  ...xt
323
329
  }), O.setData(
324
330
  n.data.map((i) => ({
325
331
  ...i,
326
332
  time: i.time
327
333
  }))
328
- ), w.current.set(n.label, O)), _++;
334
+ ), R.current.set(n.label, O)), _++;
329
335
  }
330
- if (p && ot.length > 0)
336
+ if (v && ot.length > 0)
331
337
  for (const o of ot)
332
338
  try {
333
339
  const n = t.priceScale(o.priceScaleId);
@@ -346,7 +352,7 @@ function ie({
346
352
  borderVisible: !0,
347
353
  borderColor: "rgba(224, 227, 235, 0.1)",
348
354
  entireTextOnly: !1,
349
- textColor: F
355
+ textColor: D
350
356
  });
351
357
  } catch (n) {
352
358
  console.warn(
@@ -354,11 +360,11 @@ function ie({
354
360
  n
355
361
  );
356
362
  }
357
- else if (!p)
363
+ else if (!v)
358
364
  try {
359
365
  const o = t.priceScale("right");
360
366
  o && o.applyOptions({
361
- visible: !V,
367
+ visible: !y,
362
368
  autoScale: !0,
363
369
  scaleMargins: {
364
370
  top: 0.1,
@@ -372,17 +378,17 @@ function ie({
372
378
  borderVisible: !0,
373
379
  borderColor: "rgba(224, 227, 235, 0.1)",
374
380
  entireTextOnly: !1,
375
- textColor: F
381
+ textColor: D
376
382
  });
377
383
  } catch {
378
384
  }
379
- if (r !== void 0 && !V && (y || !p) && t.applyOptions({
385
+ if (r !== void 0 && !y && (N || !v) && t.applyOptions({
380
386
  handleScroll: {
381
387
  vertTouchDrag: !1
382
388
  }
383
- }), A.length > 0) {
384
- const o = A.map((E) => Number(E.time)), n = Math.min(...o), H = Math.max(...o);
385
- t.timeScale().setVisibleRange({ from: n, to: H });
389
+ }), M.length > 0) {
390
+ const o = M.map((E) => Number(E.time)), n = Math.min(...o), j = Math.max(...o);
391
+ t.timeScale().setVisibleRange({ from: n, to: j });
386
392
  }
387
393
  gt.current && (gt.current = !1);
388
394
  const rt = /* @__PURE__ */ new Map();
@@ -391,14 +397,14 @@ function ie({
391
397
  U(rt.size > 0 ? rt : void 0);
392
398
  }, [
393
399
  e,
394
- A,
395
- f,
396
- S,
397
- V,
400
+ M,
401
+ g,
402
+ w,
398
403
  y,
404
+ N,
399
405
  ut,
400
406
  ft
401
- ]), D(() => {
407
+ ]), $(() => {
402
408
  const t = k.current;
403
409
  if (!t || e.length === 0) return;
404
410
  const a = e.length === 1;
@@ -410,89 +416,90 @@ function ie({
410
416
  }
411
417
  if (!r) return;
412
418
  const l = (s) => {
413
- const { time: c = r, seriesData: u, point: N } = s || {}, g = Array.from(w.current.values());
414
- if (!N || !c) {
415
- const R = /* @__PURE__ */ new Map();
419
+ const { time: c = r, seriesData: f, point: L } = s || {}, m = Array.from(R.current.values());
420
+ if (!L || !c) {
421
+ const V = /* @__PURE__ */ new Map();
416
422
  for (const d of e)
417
- d.data.length > 0 && R.set(d.label, d.data[d.data.length - 1]);
418
- if (U(R.size > 0 ? R : void 0), a || y)
419
- I(null);
420
- else if (g[0] && r) {
421
- const x = t.timeScale().timeToCoordinate(r), b = e[0];
423
+ d.data.length > 0 && V.set(d.label, d.data[d.data.length - 1]);
424
+ if (U(V.size > 0 ? V : void 0), a || N)
425
+ A(null);
426
+ else if (m[0] && r) {
427
+ const S = t.timeScale().timeToCoordinate(r), b = e[0];
422
428
  if (b.data.length > 0) {
423
- const p = b.data[b.data.length - 1].value, T = g[0].priceToCoordinate(p);
424
- x !== null && T !== null && I({ x, y: T });
429
+ const v = b.data[b.data.length - 1].value, C = m[0].priceToCoordinate(v);
430
+ S !== null && C !== null && A({ x: S, y: C });
425
431
  }
426
432
  }
427
433
  return;
428
434
  }
429
435
  const P = /* @__PURE__ */ new Map();
430
- let L;
431
- for (let R = 0; R < e.length; R++) {
432
- const d = e[R], x = g[R];
433
- if (!x) continue;
434
- const b = u?.get(x), p = b && "value" in b ? b.value : void 0, T = d.data[d.data.length - 1], F = p !== void 0 ? p : T?.value ?? 0;
435
- R === 0 && (L = F), P.set(d.label, { value: F, time: c });
436
+ let F;
437
+ for (let V = 0; V < e.length; V++) {
438
+ const d = e[V], S = m[V];
439
+ if (!S) continue;
440
+ const b = f?.get(S), v = b && "value" in b ? b.value : void 0;
441
+ let C;
442
+ v !== void 0 ? C = v : a ? C = d.data[d.data.length - 1]?.value ?? 0 : C = Wt(d.data, Number(c)), V === 0 && (F = C), P.set(d.label, { value: C, time: c });
436
443
  }
437
- if (U(P), L !== void 0 && g[0]) {
438
- const d = t.timeScale().timeToCoordinate(c), x = g[0].priceToCoordinate(L);
439
- if (d !== null && x !== null) {
440
- const b = $.current;
444
+ if (U(P), F !== void 0 && m[0]) {
445
+ const d = t.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(F);
446
+ if (d !== null && S !== null) {
447
+ const b = z.current;
441
448
  if (b) {
442
- const p = b.querySelector(
449
+ const v = b.querySelector(
443
450
  ".LightweightChart"
444
451
  );
445
- if (p) {
446
- const T = p.getBoundingClientRect(), F = b.getBoundingClientRect(), tt = d + (T.left - F.left), et = x + (T.top - F.top);
447
- I({ x: tt, y: et });
452
+ if (v) {
453
+ const C = v.getBoundingClientRect(), D = b.getBoundingClientRect(), tt = d + (C.left - D.left), et = S + (C.top - D.top);
454
+ A({ x: tt, y: et });
448
455
  } else
449
- I({ x: d, y: x });
456
+ A({ x: d, y: S });
450
457
  } else
451
- I({ x: d, y: x });
458
+ A({ x: d, y: S });
452
459
  } else
453
- I(null);
460
+ A(null);
454
461
  } else
455
- I(null);
462
+ A(null);
456
463
  };
457
- return t.subscribeCrosshairMove(l), V && t.subscribeClick(l), !a && !y && requestAnimationFrame(() => {
458
- const s = Array.from(w.current.values());
464
+ return t.subscribeCrosshairMove(l), y && t.subscribeClick(l), !a && !N && requestAnimationFrame(() => {
465
+ const s = Array.from(R.current.values());
459
466
  if (s[0] && r && e[0]?.data.length > 0) {
460
- const u = t.timeScale().timeToCoordinate(r), N = e[0].data[e[0].data.length - 1].value, g = s[0].priceToCoordinate(N);
461
- u !== null && g !== null && I({ x: u, y: g });
467
+ const f = t.timeScale().timeToCoordinate(r), L = e[0].data[e[0].data.length - 1].value, m = s[0].priceToCoordinate(L);
468
+ f !== null && m !== null && A({ x: f, y: m });
462
469
  }
463
470
  }), () => {
464
- t.unsubscribeCrosshairMove(l), V && t.unsubscribeClick(l);
471
+ t.unsubscribeCrosshairMove(l), y && t.unsubscribeClick(l);
465
472
  };
466
- }, [e, y, V]), D(() => {
473
+ }, [e, N, y]), $(() => {
467
474
  const t = k.current;
468
475
  if (!t || e.length === 0) return;
469
476
  const a = t.timeScale(), r = () => {
470
477
  if (!J.current) return;
471
478
  const l = a.getVisibleRange();
472
479
  if (!l) return;
473
- const s = Number(l.from), c = Number(l.to), u = [];
474
- for (const N of e)
475
- for (const g of N.data) {
476
- const P = Number(g.time);
477
- P >= s && P <= c && u.push(g.value);
480
+ const s = Number(l.from), c = Number(l.to), f = [];
481
+ for (const L of e)
482
+ for (const m of L.data) {
483
+ const P = Number(m.time);
484
+ P >= s && P <= c && f.push(m.value);
478
485
  }
479
- u.length > 0 && J.current(u);
486
+ f.length > 0 && J.current(f);
480
487
  };
481
488
  return a.subscribeVisibleLogicalRangeChange(r), () => {
482
489
  a.unsubscribeVisibleLogicalRangeChange(
483
490
  r
484
491
  );
485
492
  };
486
- }, [e]), D(() => {
487
- const t = k.current, a = Array.from(w.current.values()), r = [];
488
- if (t && a.length > 0 && C) {
493
+ }, [e]), $(() => {
494
+ const t = k.current, a = Array.from(R.current.values()), r = [];
495
+ if (t && a.length > 0 && x) {
489
496
  const l = Gt(), s = a[0];
490
- for (const c of C) {
491
- const u = new Ht(t, s, c.xCoordinate, {
497
+ for (const c of x) {
498
+ const f = new jt(t, s, c.xCoordinate, {
492
499
  ...l,
493
500
  ...c.options || {}
494
501
  });
495
- s.attachPrimitive(u), r.push(u);
502
+ s.attachPrimitive(f), r.push(f);
496
503
  }
497
504
  }
498
505
  return () => {
@@ -502,14 +509,14 @@ function ie({
502
509
  l.detachPrimitive(s);
503
510
  }
504
511
  };
505
- }, [C]), D(() => {
512
+ }, [x]), $(() => {
506
513
  const t = k.current;
507
- if (!t || !C?.length) {
514
+ if (!t || !x?.length) {
508
515
  ht([]);
509
516
  return;
510
517
  }
511
518
  const a = () => {
512
- const s = t.timeScale(), c = C.map((u) => s.timeToCoordinate(u.xCoordinate) ?? null);
519
+ const s = t.timeScale(), c = x.map((f) => s.timeToCoordinate(f.xCoordinate) ?? null);
513
520
  ht(c);
514
521
  };
515
522
  a();
@@ -519,7 +526,7 @@ function ie({
519
526
  return r.subscribeVisibleLogicalRangeChange(l), () => {
520
527
  r.unsubscribeVisibleLogicalRangeChange(l);
521
528
  };
522
- }, [C]);
529
+ }, [x]);
523
530
  const W = e.length === 1, pt = at.useMemo(() => {
524
531
  if (W && e.length > 0) {
525
532
  const t = e[0];
@@ -527,21 +534,21 @@ function ie({
527
534
  return t.data[t.data.length - 1];
528
535
  }
529
536
  }, [W, e]);
530
- return /* @__PURE__ */ j(
537
+ return /* @__PURE__ */ H(
531
538
  "div",
532
539
  {
533
- ref: $,
540
+ ref: z,
534
541
  className: ct(
535
542
  "relative z-[1] w-full h-full overflow-hidden p-0",
536
- v
543
+ p
537
544
  ),
538
545
  children: [
539
546
  Z != null && Z !== !1 && W ? /* @__PURE__ */ h("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ h("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: Z }) }) : yt && W && pt && /* @__PURE__ */ h(
540
547
  Ot,
541
548
  {
542
549
  point: pt,
543
- xMeasureUnit: f,
544
- yMeasureUnit: S,
550
+ xMeasureUnit: g,
551
+ yMeasureUnit: w,
545
552
  decimals: q
546
553
  }
547
554
  ),
@@ -549,46 +556,46 @@ function ie({
549
556
  Yt,
550
557
  {
551
558
  points: dt,
552
- xMeasureUnit: f,
553
- yMeasureUnit: S,
559
+ xMeasureUnit: g,
560
+ yMeasureUnit: w,
554
561
  series: e,
555
562
  position: mt,
556
- containerRef: $,
563
+ containerRef: z,
557
564
  decimals: q
558
565
  }
559
566
  ),
560
- m && /* @__PURE__ */ h(_t, { series: e, onUnselect: M }),
561
- C && C.length > 0 && bt.length === C.length && /* @__PURE__ */ h(
567
+ u && /* @__PURE__ */ h(Xt, { series: e, onUnselect: T }),
568
+ x && x.length > 0 && bt.length === x.length && /* @__PURE__ */ h(
562
569
  "div",
563
570
  {
564
571
  className: "absolute inset-0 z-[5] pointer-events-none",
565
572
  "aria-hidden": !0,
566
- children: C.map((t, a) => {
573
+ children: x.map((t, a) => {
567
574
  const r = bt[a], l = t.options ?? {}, s = l.showLabel !== !1;
568
575
  if (r === null || !s) return null;
569
- const { labelText: c, valueStr: u } = jt(
576
+ const { labelText: c, valueStr: f } = Ht(
570
577
  l,
571
- S,
578
+ w,
572
579
  q
573
580
  );
574
- if (!(c || u)) return null;
575
- const g = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", L = `${String(t.xCoordinate)}-${c}`;
576
- return /* @__PURE__ */ j(
581
+ if (!(c || f)) return null;
582
+ const m = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", F = `${String(t.xCoordinate)}-${c}`;
583
+ return /* @__PURE__ */ H(
577
584
  "div",
578
585
  {
579
586
  className: "absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
580
587
  style: {
581
588
  left: r,
582
589
  transform: "translateX(-50%)",
583
- backgroundColor: g,
590
+ backgroundColor: m,
584
591
  color: P
585
592
  },
586
593
  children: [
587
594
  c && /* @__PURE__ */ h("span", { className: "block", children: c }),
588
- u && /* @__PURE__ */ h("span", { className: ct("block", c && "mt-0.5"), children: u })
595
+ f && /* @__PURE__ */ h("span", { className: ct("block", c && "mt-0.5"), children: f })
589
596
  ]
590
597
  },
591
- L
598
+ F
592
599
  );
593
600
  })
594
601
  }
@@ -604,13 +611,13 @@ function ie({
604
611
  }
605
612
  );
606
613
  }
607
- function _t({
614
+ function Xt({
608
615
  series: e,
609
- onUnselect: v
616
+ onUnselect: p
610
617
  }) {
611
- return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((m, M) => {
612
- const f = Vt(M), S = (m.lineColor ?? m.color) || f.line, Y = m.data.length === 0;
613
- return /* @__PURE__ */ j(
618
+ return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((u, T) => {
619
+ const g = Vt(T), w = (u.lineColor ?? u.color) || g.line, Y = u.data.length === 0;
620
+ return /* @__PURE__ */ H(
614
621
  "div",
615
622
  {
616
623
  className: ct(
@@ -622,23 +629,23 @@ function _t({
622
629
  "div",
623
630
  {
624
631
  className: "w-3 h-3 rounded-sm",
625
- style: { backgroundColor: S }
632
+ style: { backgroundColor: w }
626
633
  }
627
634
  ),
628
- /* @__PURE__ */ j("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
629
- m.label,
635
+ /* @__PURE__ */ H("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
636
+ u.label,
630
637
  Y && " (no data)"
631
638
  ] }),
632
- v && /* @__PURE__ */ h(
639
+ p && /* @__PURE__ */ h(
633
640
  "button",
634
641
  {
635
642
  type: "button",
636
- onClick: (C) => {
637
- C.stopPropagation(), v(m.label);
643
+ onClick: (x) => {
644
+ x.stopPropagation(), p(u.label);
638
645
  },
639
646
  className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
640
- "aria-label": `Remove ${m.label}`,
641
- children: /* @__PURE__ */ j(
647
+ "aria-label": `Remove ${u.label}`,
648
+ children: /* @__PURE__ */ H(
642
649
  "svg",
643
650
  {
644
651
  xmlns: "http://www.w3.org/2000/svg",
@@ -663,13 +670,14 @@ function _t({
663
670
  )
664
671
  ]
665
672
  },
666
- m.label
673
+ u.label
667
674
  );
668
675
  }) });
669
676
  }
670
677
  export {
671
678
  st as DEFAULT_SERIES_COLORS,
672
- ie as Graph,
679
+ se as Graph,
673
680
  Vt as getSeriesColorPalette,
674
- jt as getVerticalLineTooltipContent
681
+ Wt as getStepForwardValue,
682
+ Ht as getVerticalLineTooltipContent
675
683
  };
package/dist/types/components/graph/graph.d.ts CHANGED
@@ -32,6 +32,12 @@ export declare function getVerticalLineTooltipContent(opts: VerticalLineOptions,
32
32
  labelText: string;
33
33
  valueStr: string;
34
34
  };
35
+ /**
36
+ * Step-forward interpolation: find the last data point with
37
+ * `time <= crosshairTime` and return its value.
38
+ * Returns 0 when the crosshair is before the first data point (no history).
39
+ */
40
+ export declare function getStepForwardValue(data: ReadonlyArray<Point>, crosshairTime: number): number;
35
41
  /**
36
42
  * Palette ordered for maximum contrast; first color is the original teal.
37
43
  * Greens/teals are spread out so that when only a subset of series is visible,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gearbox-protocol/ui-kit",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "Internal UI components",
5
5
  "repository": "https://github.com/gearbox-protocol/ui-kit",
6
6
  "license": "MIT",