@gearbox-protocol/ui-kit 3.1.0-next.2 → 3.2.0-next.1

package/dist/cjs/components/graph/graph.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),se=require("lightweight-charts"),f=require("react"),Te=require("../../hooks/use-media-query.cjs"),ce=require("../../utils/cn.cjs"),O=require("../../utils/colors.cjs"),X=require("./default-config.cjs"),$=require("./formatters.cjs"),Fe=require("./graph-current-value.cjs"),Me=require("./graph-tooltip.cjs"),Ee=require("./plugins/vertical-line.cjs");function _e(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const R=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(m,c,R.get?R:{enumerable:!0,get:()=>e[c]})}}return m.default=e,Object.freeze(m)}const ie=_e(f);function Re(e,m,c){const R=e.labelText??"",b=e.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 Z=[{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 ue(e){if(e<Z.length)return Z[e];const c=(e-Z.length)*Ae%360,R=O.hslToHex(c,70,50),{topColor:b,bottomColor:w}=O.generateColorsFromBase(R);return{line:R,top:b,bottom:w}}function Oe({series:e,className:m,showLegend:c=!1,onUnselectSeries:R,xMeasureUnit:b="time",yMeasureUnit:w="token",optionsOverrides:B,verticalLineOptions:x,currentValueDecimals:K,useSharedPriceScale:j=!1,showCurrentValue:we=!0,graphTitle:Q,yScaleMin:fe,yScaleMinMultiple:ge}){const N=f.useRef(null),y=f.useRef(new Map),J=f.useRef(!1),de=f.useRef(!0),U=f.useRef(null),ye=f.useRef(null),A=f.useRef(null),ee=f.useRef(null),Y=f.useRef(null),k=Te.useIsMobile(),E=ie.useMemo(()=>e.flatMap(t=>t.data),[e]),Ve=ie.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[be,te]=f.useState(()=>{if(!Ve)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}),[me,_]=f.useState(null),[he,pe]=f.useState([]);f.useEffect(()=>{const t=()=>{try{if(N.current&&A.current){const l=A.current.clientWidth,i=A.current.clientHeight;N.current.resize(l,i)}}catch{}},a=A.current,r=a?new ResizeObserver(t):null;return Y.current=r,a&&r?.observe(a),()=>{a&&r?.unobserve(a),r?.disconnect(),Y.current=null}},[]),f.useEffect(()=>{if(!ee.current||J.current)return;const t=X.getDefaultOptions(),a=O.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=se.createChart(ee.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!k,textColor:a},...k&&{crosshair:{...t.crosshair,mode:se.CrosshairMode.Magnet}},...B});return N.current=r,J.current=!0,()=>{Y.current?.disconnect(),Y.current=null,r.remove(),N.current=null,J.current=!1,y.current.clear()}},[k,B]),f.useEffect(()=>{const t=N.current;if(!t||e.length===0)return;const r=e.filter(o=>o.data.length>0).length<=1?fe:ge,l=b==="time"?$.getXFormatters(b,E):$.getXFormatters(b),i=E.map(o=>o.value),{formatter:u,tickmarksFormatter:d,updateVisibleRange:P,updateLastValues:h}=$.createAdaptiveYAxisFormatter(i,w,{yScaleMin:r});U.current=P,ye.current=h;const L=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);h(L);const T=X.getDefaultOptions();t.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=e.length>1&&!j,F=e.length>1&&!j||k,M=O.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...T.rightPriceScale||{},visible:!F,textColor:M,...C&&{scaleMargins:{top:.3,bottom:0}}}});const oe=new Set(y.current.keys()),re=new Set(e.map(o=>o.label));for(const o of oe)if(!re.has(o)){const n=y.current.get(o);n&&(t.removeSeries(n),y.current.delete(o))}const ke=X.getDefaultSeries(),ne=[];let W=0;for(let o=0;o<e.length;o++){const n=e[o],G=ue(o),I=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=O.generateColorsFromBase(I);D=n.topColor,q=s.bottomColor}else if(n.bottomColor)D=O.generateColorsFromBase(I).topColor,q=n.bottomColor;else{const s=O.generateColorsFromBase(I);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&&(t.removeSeries(s),y.current.delete(n.label));continue}const je=(n.data.length>0?Math.min(...n.data.map(s=>s.value)):0)<0,Ne=n.data.some(s=>s.value===0),Pe=!je&&Ne,ve=j||!v||W===0?"right":`scale-${W}`;v&&ne.push({priceScaleId:ve||"right",shouldPreventNegativeAxis:Pe,seriesIndex:W});const xe=(j||!v)&&r!==void 0&&typeof r=="number",Se={lineColor:I,topColor:D,bottomColor:q,priceScaleId:ve,priceFormat:{type:"custom",minMove:.01,formatter:xe&&typeof r=="number"?s=>u(s<r?r:s):u,tickmarksFormatter:d},autoscaleInfoProvider:s=>{if(!xe)return s();const le=s();if(le?.priceRange){const Le=r;le.priceRange.minValue=Le}return le}};let z=y.current.get(n.label);z?(z.applyOptions(Se),z.setData(n.data.map(s=>({...s,time:s.time})))):(z=t.addSeries(se.AreaSeries,{...ke,...Se}),z.setData(n.data.map(s=>({...s,time:s.time}))),y.current.set(n.label,z)),W++}if(v&&ne.length>0)for(const o of ne)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:M})}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:!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)&&t.applyOptions({handleScroll:{vertTouchDrag:!1}}),E.length>0){const o=E.map(I=>Number(I.time)),n=Math.min(...o),G=Math.max(...o);t.timeScale().setVisibleRange({from:n,to:G})}de.current&&(de.current=!1);const ae=new Map;for(const o of e)o.data.length>0&&ae.set(o.label,o.data[o.data.length-1]);te(ae.size>0?ae:void 0)},[e,E,b,w,k,j,fe,ge]),f.useEffect(()=>{const t=N.current;if(!t||e.length===0)return;const a=e.length===1;let r;for(const i of e)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:d,point:P}=i||{},h=Array.from(y.current.values());if(!P||!u){const V=new Map;for(const p of e)p.data.length>0&&V.set(p.label,p.data[p.data.length-1]);if(te(V.size>0?V:void 0),a||j)_(null);else if(h[0]&&r){const S=t.timeScale().timeToCoordinate(r),C=e[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<e.length;V++){const p=e[V],S=h[V];if(!S)continue;const C=d?.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(te(L),T!==void 0&&h[0]){const p=t.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(),oe=p+(F.left-M.left),re=S+(F.top-M.top);_({x:oe,y:re})}else _({x:p,y:S})}else _({x:p,y:S})}else _(null)}else _(null)};return t.subscribeCrosshairMove(l),k&&t.subscribeClick(l),!a&&!j&&requestAnimationFrame(()=>{const i=Array.from(y.current.values());if(i[0]&&r&&e[0]?.data.length>0){const d=t.timeScale().timeToCoordinate(r),P=e[0].data[e[0].data.length-1].value,h=i[0].priceToCoordinate(P);d!==null&&h!==null&&_({x:d,y:h})}}),()=>{t.unsubscribeCrosshairMove(l),k&&t.unsubscribeClick(l)}},[e,j,k]),f.useEffect(()=>{const t=N.current;if(!t||e.length===0)return;const a=t.timeScale(),r=()=>{if(!U.current)return;const l=a.getVisibleRange();if(!l)return;const i=Number(l.from),u=Number(l.to),d=[];for(const P of e)for(const h of P.data){const L=Number(h.time);L>=i&&L<=u&&d.push(h.value)}d.length>0&&U.current(d)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[e]),f.useEffect(()=>{const t=N.current,a=Array.from(y.current.values()),r=[];if(t&&a.length>0&&x){const l=X.getDefaultVerticalLine(),i=a[0];for(const u of x){const d=new Ee.VertLine(t,i,u.xCoordinate,{...l,...u.options||{}});i.attachPrimitive(d),r.push(d)}}return()=>{if(a.length>0){const l=a[0];for(const i of r)l.detachPrimitive(i)}}},[x]),f.useEffect(()=>{const t=N.current;if(!t||!x?.length){pe([]);return}const a=()=>{const i=t.timeScale(),u=x.map(d=>i.timeToCoordinate(d.xCoordinate)??null);pe(u)};a();const r=t.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[x]);const H=e.length===1,Ce=ie.useMemo(()=>{if(H&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[H,e]);return g.jsxs("div",{ref:A,className:ce.cn("relative z-[1] w-full h-full overflow-hidden p-0",m),children:[Q!=null&&Q!==!1&&H?g.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:g.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:Q})}):we&&H&&Ce&&g.jsx(Fe.GraphCurrentValue,{point:Ce,xMeasureUnit:b,yMeasureUnit:w,decimals:K}),be&&me&&g.jsx(Me.GraphTooltip,{points:be,xMeasureUnit:b,yMeasureUnit:w,series:e,position:me,containerRef:A,decimals:K}),c&&g.jsx(Ie,{series:e,onUnselect:R}),x&&x.length>0&&he.length===x.length&&g.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:x.map((t,a)=>{const r=he[a],l=t.options??{},i=l.showLabel!==!1;if(r===null||!i)return null;const{labelText:u,valueStr:d}=Re(l,w,K);if(!(u||d))return null;const h=l.labelBackgroundColor??l.color??"hsl(var(--background))",L=l.labelTextColor??"hsl(var(--foreground))",T=`${String(t.xCoordinate)}-${u}`;return g.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&&g.jsx("span",{className:"block",children:u}),d&&g.jsx("span",{className:ce.cn("block",u&&"mt-0.5"),children:d})]},T)})}),g.jsx("div",{ref:ee,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Ie({series:e,onUnselect:m}){return g.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((c,R)=>{const b=ue(R),w=(c.lineColor??c.color)||b.line,B=c.data.length===0;return g.jsxs("div",{className:ce.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:[g.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:w}}),g.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[c.label,B&&" (no data)"]}),m&&g.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:g.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:[g.jsx("title",{children:"Close"}),g.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),g.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},c.label)})})}exports.DEFAULT_SERIES_COLORS=Z;exports.Graph=Oe;exports.getSeriesColorPalette=ue;exports.getVerticalLineTooltipContent=Re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),fe=require("lightweight-charts"),f=require("react"),Ae=require("../../hooks/use-media-query.cjs"),de=require("../../utils/cn.cjs"),D=require("../../utils/colors.cjs"),U=require("./default-config.cjs"),H=require("./formatters.cjs"),Oe=require("./graph-current-value.cjs"),De=require("./graph-tooltip.cjs"),qe=require("./plugins/vertical-line.cjs");function ze(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const N=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(m,s,N.get?N:{enumerable:!0,get:()=>e[s]})}}return m.default=e,Object.freeze(m)}const ge=ze(f);function ke(e,m,s){const N=e.labelText??"",h=e.value,w=h===void 0?"":typeof h=="number"?m==="$"?`$${H.formatExactValue(h,void 0,s)}`:m==="%"?`${H.formatExactValue(h,void 0,s)}%`:H.formatExactValue(h,m!=="none"&&m!=="%"&&m!=="$"?m:void 0,s):String(h);return{labelText:N,valueStr:w}}function je(e,m){for(let s=e.length-1;s>=0;s--)if(Number(e[s].time)<=m)return e[s].value;return 0}const ee=[{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)"}],$e=137.5;function be(e){if(e<ee.length)return ee[e];const s=(e-ee.length)*$e%360,N=D.hslToHex(s,70,50),{topColor:h,bottomColor:w}=D.generateColorsFromBase(N);return{line:N,top:h,bottom:w}}function Be({series:e,className:m,showLegend:s=!1,onUnselectSeries:N,xMeasureUnit:h="time",yMeasureUnit:w="token",optionsOverrides:W,verticalLineOptions:S,currentValueDecimals:te,useSharedPriceScale:P=!1,showCurrentValue:Pe=!0,graphTitle:oe,yScaleMin:me,yScaleMinMultiple:he,visibleTimeFrom:A}){const L=f.useRef(null),V=f.useRef(new Map),re=f.useRef(!1),pe=f.useRef(!0),ne=f.useRef(null),Le=f.useRef(null),O=f.useRef(null),ae=f.useRef(null),K=f.useRef(null),y=Ae.useIsMobile(),M=ge.useMemo(()=>e.flatMap(t=>t.data),[e]),Te=ge.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[Ce,le]=f.useState(()=>{if(!Te)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}),[ve,E]=f.useState(null),[xe,Se]=f.useState([]);f.useEffect(()=>{const t=()=>{try{if(L.current&&O.current){const l=O.current.clientWidth,c=O.current.clientHeight;L.current.resize(l,c)}}catch{}},a=O.current,r=a?new ResizeObserver(t):null;return K.current=r,a&&r?.observe(a),()=>{a&&r?.unobserve(a),r?.disconnect(),K.current=null}},[]),f.useEffect(()=>{if(!ae.current||re.current)return;const t=U.getDefaultOptions(),a=D.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),r=fe.createChart(ae.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!y,textColor:a},...y&&{crosshair:{...t.crosshair,mode:fe.CrosshairMode.Magnet}},...W});return L.current=r,re.current=!0,()=>{K.current?.disconnect(),K.current=null,r.remove(),L.current=null,re.current=!1,V.current.clear()}},[y,W]),f.useEffect(()=>{const t=L.current;if(!t||e.length===0)return;const r=e.filter(o=>o.data.length>0).length<=1?me:he,l=h==="time"?H.getXFormatters(h,M):H.getXFormatters(h),c=M.map(o=>o.value),{formatter:u,tickmarksFormatter:d,updateVisibleRange:T,updateLastValues:p}=H.createAdaptiveYAxisFormatter(c,w,{yScaleMin:r});ne.current=T,Le.current=p;const F=e.filter(o=>o.data.length>0).map(o=>o.data[o.data.length-1].value);p(F);const k=U.getDefaultOptions();t.applyOptions({localization:{...k.localization||{},timeFormatter:o=>l.timeFormatter(parseFloat(o),void 0)},timeScale:{...k.timeScale||{},tickMarkFormatter:l.tickMarkFormatter,minBarSpacing:0}});const b=(M.length>0?Math.min(...M.map(o=>o.value)):0)<0,R=M.some(o=>o.value===0),C=!b&&R,x=e.length>1&&!P,v=e.length>1&&!P||y,_=D.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...k.rightPriceScale||{},visible:!v,textColor:_,...C&&{scaleMargins:{top:.3,bottom:0}}}});const X=new Set(V.current.keys()),se=new Set(e.map(o=>o.label));for(const o of X)if(!se.has(o)){const n=V.current.get(o);n&&(t.removeSeries(n),V.current.delete(o))}const Fe=U.getDefaultSeries(),ie=[];let J=0;for(let o=0;o<e.length;o++){const n=e[o],Z=be(o),q=n.lineColor??n.color??Z.line;let I,z;if(n.lineColor??n.color)if(n.topColor&&n.bottomColor)I=n.topColor,z=n.bottomColor;else if(n.topColor){const i=D.generateColorsFromBase(q);I=n.topColor,z=i.bottomColor}else if(n.bottomColor)I=D.generateColorsFromBase(q).topColor,z=n.bottomColor;else{const i=D.generateColorsFromBase(q);I=i.topColor,z=i.bottomColor}else I=n.topColor||Z.top,z=n.bottomColor||Z.bottom;if(n.data.length===0){const i=V.current.get(n.label);i&&(t.removeSeries(i),V.current.delete(n.label));continue}const Me=(n.data.length>0?Math.min(...n.data.map(i=>i.value)):0)<0,Ee=n.data.some(i=>i.value===0),_e=!Me&&Ee,Ne=P||!x||J===0?"right":`scale-${J}`;x&&ie.push({priceScaleId:Ne||"right",shouldPreventNegativeAxis:_e,seriesIndex:J});const we=(P||!x)&&r!==void 0&&typeof r=="number",Ve={lineColor:q,topColor:I,bottomColor:z,priceScaleId:Ne,priceFormat:{type:"custom",minMove:.01,formatter:we&&typeof r=="number"?i=>u(i<r?r:i):u,tickmarksFormatter:d},autoscaleInfoProvider:i=>{if(!we)return i();const G=i();if(G?.priceRange){const Y=r;G.priceRange.minValue=Y}return G}};let $=V.current.get(n.label);const B=n.data.map(i=>({...i,time:i.time}));if(A!==void 0&&B.length>0&&Number(B[0].time)>A){const i=Number(B[0].time),G=i-A,Y=86400,Ie=G>180*Y?7*Y:G>30*Y?Y:6*3600,ye=[];for(let ue=A;ue<i;ue+=Ie)ye.push({time:ue});B.unshift(...ye)}$?($.applyOptions(Ve),$.setData(B)):($=t.addSeries(fe.AreaSeries,{...Fe,...Ve}),$.setData(B),V.current.set(n.label,$)),J++}if(x&&ie.length>0)for(const o of ie)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:_})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}else if(!x)try{const o=t.priceScale("right");o&&o.applyOptions({visible:!y,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:_})}catch{}if(r!==void 0&&!y&&(P||!x)&&t.applyOptions({handleScroll:{vertTouchDrag:!1}}),M.length>0){const o=M.map(I=>Number(I.time)),n=Math.min(...o),Z=A!==void 0?Math.min(A,n):n,q=Math.max(...o);t.timeScale().setVisibleRange({from:Z,to:q})}pe.current&&(pe.current=!1);const ce=new Map;for(const o of e)o.data.length>0&&ce.set(o.label,o.data[o.data.length-1]);le(ce.size>0?ce:void 0)},[e,M,h,w,y,P,me,he,A]),f.useEffect(()=>{const t=L.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:d,point:T}=c||{},p=Array.from(V.current.values());if(!T||!u){const j=new Map;for(const b of e)b.data.length>0&&j.set(b.label,b.data[b.data.length-1]);if(le(j.size>0?j:void 0),a||P)E(null);else if(p[0]&&r){const R=t.timeScale().timeToCoordinate(r),C=e[0];if(C.data.length>0){const x=C.data[C.data.length-1].value,v=p[0].priceToCoordinate(x);R!==null&&v!==null&&E({x:R,y:v})}}return}const F=new Map;let k;for(let j=0;j<e.length;j++){const b=e[j],R=p[j];if(!R)continue;const C=d?.get(R),x=C&&"value"in C?C.value:void 0;let v;if(x!==void 0)v=x;else if(a){const _=Number(u),X=b.data.length>0?Number(b.data[0].time):Number.POSITIVE_INFINITY;_<X?v=Number.NaN:v=b.data[b.data.length-1]?.value??0}else v=je(b.data,Number(u));Number.isNaN(v)||(k===void 0&&(k=v),F.set(b.label,{value:v,time:u}))}if(le(F),k!==void 0&&p[0]){const b=t.timeScale().timeToCoordinate(u),R=p[0].priceToCoordinate(k);if(b!==null&&R!==null){const C=O.current;if(C){const x=C.querySelector(".LightweightChart");if(x){const v=x.getBoundingClientRect(),_=C.getBoundingClientRect(),X=b+(v.left-_.left),se=R+(v.top-_.top);E({x:X,y:se})}else E({x:b,y:R})}else E({x:b,y:R})}else E(null)}else E(null)};return t.subscribeCrosshairMove(l),y&&t.subscribeClick(l),!a&&!P&&requestAnimationFrame(()=>{const c=Array.from(V.current.values());if(c[0]&&r&&e[0]?.data.length>0){const d=t.timeScale().timeToCoordinate(r),T=e[0].data[e[0].data.length-1].value,p=c[0].priceToCoordinate(T);d!==null&&p!==null&&E({x:d,y:p})}}),()=>{t.unsubscribeCrosshairMove(l),y&&t.unsubscribeClick(l)}},[e,P,y]),f.useEffect(()=>{const t=L.current;if(!t||e.length===0)return;const a=t.timeScale(),r=()=>{if(!ne.current)return;const l=a.getVisibleRange();if(!l)return;const c=Number(l.from),u=Number(l.to),d=[];for(const T of e)for(const p of T.data){const F=Number(p.time);F>=c&&F<=u&&d.push(p.value)}d.length>0&&ne.current(d)};return a.subscribeVisibleLogicalRangeChange(r),()=>{a.unsubscribeVisibleLogicalRangeChange(r)}},[e]),f.useEffect(()=>{const t=L.current,a=Array.from(V.current.values()),r=[];if(t&&a.length>0&&S){const l=U.getDefaultVerticalLine(),c=a[0];for(const u of S){const d=new qe.VertLine(t,c,u.xCoordinate,{...l,...u.options||{}});c.attachPrimitive(d),r.push(d)}}return()=>{if(a.length>0){const l=a[0];for(const c of r)l.detachPrimitive(c)}}},[S]),f.useEffect(()=>{const t=L.current;if(!t||!S?.length){Se([]);return}const a=()=>{const c=t.timeScale(),u=S.map(d=>c.timeToCoordinate(d.xCoordinate)??null);Se(u)};a();const r=t.timeScale(),l=()=>{a()};return r.subscribeVisibleLogicalRangeChange(l),()=>{r.unsubscribeVisibleLogicalRangeChange(l)}},[S]);const Q=e.length===1,Re=ge.useMemo(()=>{if(Q&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[Q,e]);return g.jsxs("div",{ref:O,className:de.cn("relative z-[1] w-full h-full overflow-hidden p-0",m),children:[oe!=null&&oe!==!1&&Q?g.jsx("div",{className:"absolute top-2 left-2 right-2 z-[100] pointer-events-none",children:g.jsx("div",{className:"text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis",children:oe})}):Pe&&Q&&Re&&g.jsx(Oe.GraphCurrentValue,{point:Re,xMeasureUnit:h,yMeasureUnit:w,decimals:te}),Ce&&ve&&g.jsx(De.GraphTooltip,{points:Ce,xMeasureUnit:h,yMeasureUnit:w,series:e,position:ve,containerRef:O,decimals:te}),s&&g.jsx(Ge,{series:e,onUnselect:N}),S&&S.length>0&&xe.length===S.length&&g.jsx("div",{className:"absolute inset-0 z-[5] pointer-events-none","aria-hidden":!0,children:S.map((t,a)=>{const r=xe[a],l=t.options??{},c=l.showLabel!==!1;if(r===null||!c)return null;const{labelText:u,valueStr:d}=ke(l,w,te);if(!(u||d))return null;const p=l.labelBackgroundColor??l.color??"hsl(var(--background))",F=l.labelTextColor??"hsl(var(--foreground))",k=`${String(t.xCoordinate)}-${u}`;return g.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:F},children:[u&&g.jsx("span",{className:"block",children:u}),d&&g.jsx("span",{className:de.cn("block",u&&"mt-0.5"),children:d})]},k)})}),g.jsx("div",{ref:ae,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Ge({series:e,onUnselect:m}){return g.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((s,N)=>{const h=be(N),w=(s.lineColor??s.color)||h.line,W=s.data.length===0;return g.jsxs("div",{className:de.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",W&&"opacity-50"),children:[g.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:w}}),g.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[s.label,W&&" (no data)"]}),m&&g.jsx("button",{type:"button",onClick:S=>{S.stopPropagation(),m(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:g.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:[g.jsx("title",{children:"Close"}),g.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),g.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},s.label)})})}exports.DEFAULT_SERIES_COLORS=ee;exports.Graph=Be;exports.getSeriesColorPalette=be;exports.getStepForwardValue=je;exports.getVerticalLineTooltipContent=ke;

package/dist/esm/components/graph/graph.js

@@ -1,24 +1,30 @@
-import { jsxs as j, jsx as h } from "react/jsx-runtime";
-import { createChart as It, CrosshairMode as zt, AreaSeries as $t } from "lightweight-charts";
-import * as lt from "react";
-import { useRef as M, useState as it, useEffect as D } from "react";
-import { useIsMobile as Dt } from "../../hooks/use-media-query.js";
-import { cn as ut } from "../../utils/cn.js";
-import { resolveCSSColor as wt, generateColorsFromBase as q, hslToHex as Et } from "../../utils/colors.js";
-import { getDefaultOptions as Rt, getDefaultSeries as Gt, getDefaultVerticalLine as Ot } from "./default-config.js";
-import { getXFormatters as yt, createAdaptiveYAxisFormatter as Bt, formatExactValue as st } from "./formatters.js";
-import { GraphCurrentValue as Yt } from "./graph-current-value.js";
-import { GraphTooltip as Ht } from "./graph-tooltip.js";
-import { VertLine as jt } from "./plugins/vertical-line.js";
-function Wt(e, v, m) {
-  const A = e.labelText ?? "", f = e.value, S = f === void 0 ? "" : typeof f == "number" ? v === "$" ? `$${st(f, void 0, m)}` : v === "%" ? `${st(f, void 0, m)}%` : st(
-    f,
-    v !== "none" && v !== "%" && v !== "$" ? v : void 0,
-    m
-  ) : String(f);
-  return { labelText: A, valueStr: S };
+import { jsxs as Z, jsx as p } from "react/jsx-runtime";
+import { createChart as Ot, CrosshairMode as Yt, AreaSeries as Gt } from "lightweight-charts";
+import * as ut from "react";
+import { useRef as M, useState as ft, useEffect as O } from "react";
+import { useIsMobile as Bt } from "../../hooks/use-media-query.js";
+import { cn as mt } from "../../utils/cn.js";
+import { resolveCSSColor as kt, generateColorsFromBase as U, hslToHex as jt } from "../../utils/colors.js";
+import { getDefaultOptions as Pt, getDefaultSeries as Ht, getDefaultVerticalLine as _t } from "./default-config.js";
+import { getXFormatters as Lt, createAdaptiveYAxisFormatter as Wt, formatExactValue as dt } from "./formatters.js";
+import { GraphCurrentValue as Xt } from "./graph-current-value.js";
+import { GraphTooltip as qt } from "./graph-tooltip.js";
+import { VertLine as Zt } from "./plugins/vertical-line.js";
+function Kt(e, C, u) {
+  const T = e.labelText ?? "", g = e.value, N = g === void 0 ? "" : typeof g == "number" ? C === "$" ? `$${dt(g, void 0, u)}` : C === "%" ? `${dt(g, void 0, u)}%` : dt(
+    g,
+    C !== "none" && C !== "%" && C !== "$" ? C : void 0,
+    u
+  ) : String(g);
+  return { labelText: T, valueStr: N };
 }
-const ct = [
+function Jt(e, C) {
+  for (let u = e.length - 1; u >= 0; u--)
+    if (Number(e[u].time) <= C)
+      return e[u].value;
+  return 0;
+}
+const gt = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -133,98 +139,99 @@ const ct = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], _t = 137.5;
-function Vt(e) {
-  if (e < ct.length)
-    return ct[e];
-  const m = (e - ct.length) * _t % 360, A = Et(m, 70, 50), { topColor: f, bottomColor: S } = q(A);
-  return { line: A, top: f, bottom: S };
+], Qt = 137.5;
+function It(e) {
+  if (e < gt.length)
+    return gt[e];
+  const u = (e - gt.length) * Qt % 360, T = jt(u, 70, 50), { topColor: g, bottomColor: N } = U(T);
+  return { line: T, top: g, bottom: N };
 }
-function se({
+function me({
   series: e,
-  className: v,
-  showLegend: m = !1,
-  onUnselectSeries: A,
-  xMeasureUnit: f = "time",
-  yMeasureUnit: S = "token",
-  optionsOverrides: Y,
-  verticalLineOptions: C,
-  currentValueDecimals: Z,
-  useSharedPriceScale: V = !1,
-  showCurrentValue: kt = !0,
-  graphTitle: K,
-  yScaleMin: ft,
-  yScaleMinMultiple: dt
+  className: C,
+  showLegend: u = !1,
+  onUnselectSeries: T,
+  xMeasureUnit: g = "time",
+  yMeasureUnit: N = "token",
+  optionsOverrides: W,
+  verticalLineOptions: x,
+  currentValueDecimals: tt,
+  useSharedPriceScale: k = !1,
+  showCurrentValue: Mt = !0,
+  graphTitle: et,
+  yScaleMin: bt,
+  yScaleMinMultiple: ht,
+  visibleTimeFrom: $
 }) {
-  const k = M(null), w = M(/* @__PURE__ */ new Map()), J = M(!1), gt = M(!0), Q = M(
+  const P = M(null), w = M(/* @__PURE__ */ new Map()), ot = M(!1), pt = M(!0), rt = M(
     null
-  ), Nt = M(null), $ = M(null), U = M(null), W = M(null), y = Dt(), I = lt.useMemo(() => e.flatMap((t) => t.data), [e]), Pt = lt.useMemo(() => {
+  ), Tt = M(null), E = M(null), nt = M(null), K = M(null), R = Bt(), A = ut.useMemo(() => e.flatMap((t) => t.data), [e]), At = ut.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [mt, tt] = it(() => {
-    if (!Pt) return;
+  }, [e]), [Ct, at] = ft(() => {
+    if (!At) return;
     const t = /* @__PURE__ */ new Map();
     for (const a of e)
       a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
     return t;
-  }), [bt, z] = it(null), [ht, pt] = it([]);
-  D(() => {
+  }), [vt, F] = ft(null), [xt, St] = ft([]);
+  O(() => {
     const t = () => {
       try {
-        if (k.current && $.current) {
-          const l = $.current.clientWidth, s = $.current.clientHeight;
-          k.current.resize(l, s);
+        if (P.current && E.current) {
+          const l = E.current.clientWidth, s = E.current.clientHeight;
+          P.current.resize(l, s);
         }
       } catch {
       }
-    }, a = $.current, r = a ? new ResizeObserver(t) : null;
-    return W.current = r, a && r?.observe(a), () => {
-      a && r?.unobserve(a), r?.disconnect(), W.current = null;
+    }, a = E.current, r = a ? new ResizeObserver(t) : null;
+    return K.current = r, a && r?.observe(a), () => {
+      a && r?.unobserve(a), r?.disconnect(), K.current = null;
     };
-  }, []), D(() => {
-    if (!U.current || J.current) return;
-    const t = Rt(), a = wt(
+  }, []), O(() => {
+    if (!nt.current || ot.current) return;
+    const t = Pt(), a = kt(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), r = It(U.current, {
+    ), r = Ot(nt.current, {
       ...t,
       rightPriceScale: {
         ...t.rightPriceScale || {},
-        visible: !y,
+        visible: !R,
         textColor: a
       },
-      ...y && {
+      ...R && {
         crosshair: {
           ...t.crosshair,
-          mode: zt.Magnet
+          mode: Yt.Magnet
         }
       },
-      ...Y
+      ...W
     });
-    return k.current = r, J.current = !0, () => {
-      W.current?.disconnect(), W.current = null, r.remove(), k.current = null, J.current = !1, w.current.clear();
+    return P.current = r, ot.current = !0, () => {
+      K.current?.disconnect(), K.current = null, r.remove(), P.current = null, ot.current = !1, w.current.clear();
     };
-  }, [y, Y]), D(() => {
-    const t = k.current;
+  }, [R, W]), O(() => {
+    const t = P.current;
     if (!t || e.length === 0) return;
-    const r = e.filter((o) => o.data.length > 0).length <= 1 ? ft : dt, l = f === "time" ? yt(f, I) : yt(f), s = I.map((o) => o.value), {
+    const r = e.filter((o) => o.data.length > 0).length <= 1 ? bt : ht, l = g === "time" ? Lt(g, A) : Lt(g), s = A.map((o) => o.value), {
       formatter: c,
-      tickmarksFormatter: u,
-      updateVisibleRange: N,
-      updateLastValues: d
-    } = Bt(s, S, {
+      tickmarksFormatter: f,
+      updateVisibleRange: L,
+      updateLastValues: m
+    } = Wt(s, N, {
       yScaleMin: r
     });
-    Q.current = N, Nt.current = d;
-    const P = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    d(P);
-    const L = Rt();
+    rt.current = L, Tt.current = m;
+    const I = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
+    m(I);
+    const V = Pt();
     t.applyOptions({
       localization: {
-        ...L.localization || {},
+        ...V.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         timeFormatter: (o) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
@@ -232,21 +239,21 @@ function se({
         )
       },
       timeScale: {
-        ...L.timeScale || {},
+        ...V.timeScale || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         tickMarkFormatter: l.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const g = (I.length > 0 ? Math.min(...I.map((o) => o.value)) : 0) < 0, x = I.some((o) => o.value === 0), b = !g && x, p = e.length > 1 && !V, T = e.length > 1 && !V || y, F = wt(
+    const d = (A.length > 0 ? Math.min(...A.map((o) => o.value)) : 0) < 0, S = A.some((o) => o.value === 0), b = !d && S, v = e.length > 1 && !k, h = e.length > 1 && !k || R, z = kt(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
     t.applyOptions({
       rightPriceScale: {
-        ...L.rightPriceScale || {},
-        visible: !T,
-        textColor: F,
+        ...V.rightPriceScale || {},
+        visible: !h,
+        textColor: z,
         ...b && {
           scaleMargins: {
             top: 0.3,
@@ -255,83 +262,83 @@ function se({
         }
       }
     });
-    const et = new Set(w.current.keys()), ot = new Set(e.map((o) => o.label));
-    for (const o of et)
-      if (!ot.has(o)) {
+    const X = new Set(w.current.keys()), lt = new Set(e.map((o) => o.label));
+    for (const o of X)
+      if (!lt.has(o)) {
         const n = w.current.get(o);
         n && (t.removeSeries(n), w.current.delete(o));
       }
-    const Lt = Gt(), rt = [];
-    let X = 0;
+    const Ft = Ht(), it = [];
+    let Q = 0;
     for (let o = 0; o < e.length; o++) {
-      const n = e[o], H = Vt(o), E = n.lineColor ?? n.color ?? H.line;
-      let G, O;
+      const n = e[o], q = It(o), Y = n.lineColor ?? n.color ?? q.line;
+      let D, G;
       if (n.lineColor ?? n.color)
         if (n.topColor && n.bottomColor)
-          G = n.topColor, O = n.bottomColor;
+          D = n.topColor, G = n.bottomColor;
         else if (n.topColor) {
-          const i = q(E);
-          G = n.topColor, O = i.bottomColor;
+          const i = U(Y);
+          D = n.topColor, G = i.bottomColor;
         } else if (n.bottomColor)
-          G = q(E).topColor, O = n.bottomColor;
+          D = U(Y).topColor, G = n.bottomColor;
         else {
-          const i = q(E);
-          G = i.topColor, O = i.bottomColor;
+          const i = U(Y);
+          D = i.topColor, G = i.bottomColor;
         }
       else
-        G = n.topColor || H.top, O = n.bottomColor || H.bottom;
+        D = n.topColor || q.top, G = n.bottomColor || q.bottom;
       if (n.data.length === 0) {
         const i = w.current.get(n.label);
         i && (t.removeSeries(i), w.current.delete(n.label));
         continue;
       }
-      const Tt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Ft = n.data.some((i) => i.value === 0), Mt = !Tt && Ft, Ct = V || !p || X === 0 ? "right" : `scale-${X}`;
-      p && rt.push({
-        priceScaleId: Ct || "right",
-        shouldPreventNegativeAxis: Mt,
-        seriesIndex: X
+      const zt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Dt = n.data.some((i) => i.value === 0), $t = !zt && Dt, wt = k || !v || Q === 0 ? "right" : `scale-${Q}`;
+      v && it.push({
+        priceScaleId: wt || "right",
+        shouldPreventNegativeAxis: $t,
+        seriesIndex: Q
       });
-      const xt = (V || !p) && r !== void 0 && typeof r == "number", St = {
-        lineColor: E,
-        topColor: G,
-        bottomColor: O,
-        priceScaleId: Ct,
+      const Rt = (k || !v) && r !== void 0 && typeof r == "number", Vt = {
+        lineColor: Y,
+        topColor: D,
+        bottomColor: G,
+        priceScaleId: wt,
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: xt && typeof r == "number" ? (i) => c(
+          formatter: Rt && typeof r == "number" ? (i) => c(
             i < r ? r : i
           ) : c,
-          tickmarksFormatter: u
+          tickmarksFormatter: f
         },
         autoscaleInfoProvider: (i) => {
-          if (!xt) return i();
-          const at = i();
-          if (at?.priceRange) {
-            const At = r;
-            at.priceRange.minValue = At;
+          if (!Rt) return i();
+          const H = i();
+          if (H?.priceRange) {
+            const _ = r;
+            H.priceRange.minValue = _;
           }
-          return at;
+          return H;
         }
       };
       let B = w.current.get(n.label);
-      B ? (B.applyOptions(St), B.setData(
-        n.data.map((i) => ({
-          ...i,
-          time: i.time
-        }))
-      )) : (B = t.addSeries($t, {
-        ...Lt,
-        ...St
-      }), B.setData(
-        n.data.map((i) => ({
-          ...i,
-          time: i.time
-        }))
-      ), w.current.set(n.label, B)), X++;
+      const j = n.data.map((i) => ({
+        ...i,
+        time: i.time
+      }));
+      if ($ !== void 0 && j.length > 0 && Number(j[0].time) > $) {
+        const i = Number(j[0].time), H = i - $, _ = 86400, Et = H > 180 * _ ? 7 * _ : H > 30 * _ ? _ : 6 * 3600, yt = [];
+        for (let ct = $; ct < i; ct += Et)
+          yt.push({ time: ct });
+        j.unshift(...yt);
+      }
+      B ? (B.applyOptions(Vt), B.setData(j)) : (B = t.addSeries(Gt, {
+        ...Ft,
+        ...Vt
+      }), B.setData(j), w.current.set(n.label, B)), Q++;
     }
-    if (p && rt.length > 0)
-      for (const o of rt)
+    if (v && it.length > 0)
+      for (const o of it)
         try {
           const n = t.priceScale(o.priceScaleId);
           n && n.applyOptions({
@@ -349,7 +356,7 @@ function se({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: F
+            textColor: z
           });
         } catch (n) {
           console.warn(
@@ -357,11 +364,11 @@ function se({
             n
           );
         }
-    else if (!p)
+    else if (!v)
       try {
         const o = t.priceScale("right");
         o && o.applyOptions({
-          visible: !y,
+          visible: !R,
           autoScale: !0,
           scaleMargins: {
             top: 0.1,
@@ -375,34 +382,35 @@ function se({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: F
+          textColor: z
         });
       } catch {
       }
-    if (r !== void 0 && !y && (V || !p) && t.applyOptions({
+    if (r !== void 0 && !R && (k || !v) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), I.length > 0) {
-      const o = I.map((E) => Number(E.time)), n = Math.min(...o), H = Math.max(...o);
-      t.timeScale().setVisibleRange({ from: n, to: H });
+    }), A.length > 0) {
+      const o = A.map((D) => Number(D.time)), n = Math.min(...o), q = $ !== void 0 ? Math.min($, n) : n, Y = Math.max(...o);
+      t.timeScale().setVisibleRange({ from: q, to: Y });
     }
-    gt.current && (gt.current = !1);
-    const nt = /* @__PURE__ */ new Map();
+    pt.current && (pt.current = !1);
+    const st = /* @__PURE__ */ new Map();
     for (const o of e)
-      o.data.length > 0 && nt.set(o.label, o.data[o.data.length - 1]);
-    tt(nt.size > 0 ? nt : void 0);
+      o.data.length > 0 && st.set(o.label, o.data[o.data.length - 1]);
+    at(st.size > 0 ? st : void 0);
   }, [
     e,
-    I,
-    f,
-    S,
-    y,
-    V,
-    ft,
-    dt
-  ]), D(() => {
-    const t = k.current;
+    A,
+    g,
+    N,
+    R,
+    k,
+    bt,
+    ht,
+    $
+  ]), O(() => {
+    const t = P.current;
     if (!t || e.length === 0) return;
     const a = e.length === 1;
     let r;
@@ -413,89 +421,97 @@ function se({
       }
     if (!r) return;
     const l = (s) => {
-      const { time: c = r, seriesData: u, point: N } = s || {}, d = Array.from(w.current.values());
-      if (!N || !c) {
-        const R = /* @__PURE__ */ new Map();
-        for (const g of e)
-          g.data.length > 0 && R.set(g.label, g.data[g.data.length - 1]);
-        if (tt(R.size > 0 ? R : void 0), a || V)
-          z(null);
-        else if (d[0] && r) {
-          const x = t.timeScale().timeToCoordinate(r), b = e[0];
+      const { time: c = r, seriesData: f, point: L } = s || {}, m = Array.from(w.current.values());
+      if (!L || !c) {
+        const y = /* @__PURE__ */ new Map();
+        for (const d of e)
+          d.data.length > 0 && y.set(d.label, d.data[d.data.length - 1]);
+        if (at(y.size > 0 ? y : void 0), a || k)
+          F(null);
+        else if (m[0] && r) {
+          const S = t.timeScale().timeToCoordinate(r), b = e[0];
           if (b.data.length > 0) {
-            const p = b.data[b.data.length - 1].value, T = d[0].priceToCoordinate(p);
-            x !== null && T !== null && z({ x, y: T });
+            const v = b.data[b.data.length - 1].value, h = m[0].priceToCoordinate(v);
+            S !== null && h !== null && F({ x: S, y: h });
           }
         }
         return;
       }
-      const P = /* @__PURE__ */ new Map();
-      let L;
-      for (let R = 0; R < e.length; R++) {
-        const g = e[R], x = d[R];
-        if (!x) continue;
-        const b = u?.get(x), p = b && "value" in b ? b.value : void 0, T = g.data[g.data.length - 1], F = p !== void 0 ? p : T?.value ?? 0;
-        R === 0 && (L = F), P.set(g.label, { value: F, time: c });
+      const I = /* @__PURE__ */ new Map();
+      let V;
+      for (let y = 0; y < e.length; y++) {
+        const d = e[y], S = m[y];
+        if (!S) continue;
+        const b = f?.get(S), v = b && "value" in b ? b.value : void 0;
+        let h;
+        if (v !== void 0)
+          h = v;
+        else if (a) {
+          const z = Number(c), X = d.data.length > 0 ? Number(d.data[0].time) : Number.POSITIVE_INFINITY;
+          z < X ? h = Number.NaN : h = d.data[d.data.length - 1]?.value ?? 0;
+        } else
+          h = Jt(d.data, Number(c));
+        Number.isNaN(h) || (V === void 0 && (V = h), I.set(d.label, { value: h, time: c }));
       }
-      if (tt(P), L !== void 0 && d[0]) {
-        const g = t.timeScale().timeToCoordinate(c), x = d[0].priceToCoordinate(L);
-        if (g !== null && x !== null) {
-          const b = $.current;
+      if (at(I), V !== void 0 && m[0]) {
+        const d = t.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(V);
+        if (d !== null && S !== null) {
+          const b = E.current;
           if (b) {
-            const p = b.querySelector(
+            const v = b.querySelector(
               ".LightweightChart"
             );
-            if (p) {
-              const T = p.getBoundingClientRect(), F = b.getBoundingClientRect(), et = g + (T.left - F.left), ot = x + (T.top - F.top);
-              z({ x: et, y: ot });
+            if (v) {
+              const h = v.getBoundingClientRect(), z = b.getBoundingClientRect(), X = d + (h.left - z.left), lt = S + (h.top - z.top);
+              F({ x: X, y: lt });
             } else
-              z({ x: g, y: x });
+              F({ x: d, y: S });
           } else
-            z({ x: g, y: x });
+            F({ x: d, y: S });
         } else
-          z(null);
+          F(null);
       } else
-        z(null);
+        F(null);
     };
-    return t.subscribeCrosshairMove(l), y && t.subscribeClick(l), !a && !V && requestAnimationFrame(() => {
+    return t.subscribeCrosshairMove(l), R && t.subscribeClick(l), !a && !k && requestAnimationFrame(() => {
       const s = Array.from(w.current.values());
       if (s[0] && r && e[0]?.data.length > 0) {
-        const u = t.timeScale().timeToCoordinate(r), N = e[0].data[e[0].data.length - 1].value, d = s[0].priceToCoordinate(N);
-        u !== null && d !== null && z({ x: u, y: d });
+        const f = t.timeScale().timeToCoordinate(r), L = e[0].data[e[0].data.length - 1].value, m = s[0].priceToCoordinate(L);
+        f !== null && m !== null && F({ x: f, y: m });
       }
     }), () => {
-      t.unsubscribeCrosshairMove(l), y && t.unsubscribeClick(l);
+      t.unsubscribeCrosshairMove(l), R && t.unsubscribeClick(l);
     };
-  }, [e, V, y]), D(() => {
-    const t = k.current;
+  }, [e, k, R]), O(() => {
+    const t = P.current;
     if (!t || e.length === 0) return;
     const a = t.timeScale(), r = () => {
-      if (!Q.current) return;
+      if (!rt.current) return;
       const l = a.getVisibleRange();
       if (!l) return;
-      const s = Number(l.from), c = Number(l.to), u = [];
-      for (const N of e)
-        for (const d of N.data) {
-          const P = Number(d.time);
-          P >= s && P <= c && u.push(d.value);
+      const s = Number(l.from), c = Number(l.to), f = [];
+      for (const L of e)
+        for (const m of L.data) {
+          const I = Number(m.time);
+          I >= s && I <= c && f.push(m.value);
         }
-      u.length > 0 && Q.current(u);
+      f.length > 0 && rt.current(f);
     };
     return a.subscribeVisibleLogicalRangeChange(r), () => {
       a.unsubscribeVisibleLogicalRangeChange(
         r
       );
     };
-  }, [e]), D(() => {
-    const t = k.current, a = Array.from(w.current.values()), r = [];
-    if (t && a.length > 0 && C) {
-      const l = Ot(), s = a[0];
-      for (const c of C) {
-        const u = new jt(t, s, c.xCoordinate, {
+  }, [e]), O(() => {
+    const t = P.current, a = Array.from(w.current.values()), r = [];
+    if (t && a.length > 0 && x) {
+      const l = _t(), s = a[0];
+      for (const c of x) {
+        const f = new Zt(t, s, c.xCoordinate, {
           ...l,
           ...c.options || {}
         });
-        s.attachPrimitive(u), r.push(u);
+        s.attachPrimitive(f), r.push(f);
       }
     }
     return () => {
@@ -505,15 +521,15 @@ function se({
           l.detachPrimitive(s);
       }
     };
-  }, [C]), D(() => {
-    const t = k.current;
-    if (!t || !C?.length) {
-      pt([]);
+  }, [x]), O(() => {
+    const t = P.current;
+    if (!t || !x?.length) {
+      St([]);
       return;
     }
     const a = () => {
-      const s = t.timeScale(), c = C.map((u) => s.timeToCoordinate(u.xCoordinate) ?? null);
-      pt(c);
+      const s = t.timeScale(), c = x.map((f) => s.timeToCoordinate(f.xCoordinate) ?? null);
+      St(c);
     };
     a();
     const r = t.timeScale(), l = () => {
@@ -522,84 +538,84 @@ function se({
     return r.subscribeVisibleLogicalRangeChange(l), () => {
       r.unsubscribeVisibleLogicalRangeChange(l);
     };
-  }, [C]);
-  const _ = e.length === 1, vt = lt.useMemo(() => {
-    if (_ && e.length > 0) {
+  }, [x]);
+  const J = e.length === 1, Nt = ut.useMemo(() => {
+    if (J && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [_, e]);
-  return /* @__PURE__ */ j(
+  }, [J, e]);
+  return /* @__PURE__ */ Z(
     "div",
     {
-      ref: $,
-      className: ut(
+      ref: E,
+      className: mt(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        v
+        C
       ),
       children: [
-        K != null && K !== !1 && _ ? /* @__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: K }) }) : kt && _ && vt && /* @__PURE__ */ h(
-          Yt,
+        et != null && et !== !1 && J ? /* @__PURE__ */ p("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ p("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: et }) }) : Mt && J && Nt && /* @__PURE__ */ p(
+          Xt,
           {
-            point: vt,
-            xMeasureUnit: f,
-            yMeasureUnit: S,
-            decimals: Z
+            point: Nt,
+            xMeasureUnit: g,
+            yMeasureUnit: N,
+            decimals: tt
           }
         ),
-        mt && bt && /* @__PURE__ */ h(
-          Ht,
+        Ct && vt && /* @__PURE__ */ p(
+          qt,
           {
-            points: mt,
-            xMeasureUnit: f,
-            yMeasureUnit: S,
+            points: Ct,
+            xMeasureUnit: g,
+            yMeasureUnit: N,
             series: e,
-            position: bt,
-            containerRef: $,
-            decimals: Z
+            position: vt,
+            containerRef: E,
+            decimals: tt
           }
         ),
-        m && /* @__PURE__ */ h(Xt, { series: e, onUnselect: A }),
-        C && C.length > 0 && ht.length === C.length && /* @__PURE__ */ h(
+        u && /* @__PURE__ */ p(Ut, { series: e, onUnselect: T }),
+        x && x.length > 0 && xt.length === x.length && /* @__PURE__ */ p(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: C.map((t, a) => {
-              const r = ht[a], l = t.options ?? {}, s = l.showLabel !== !1;
+            children: x.map((t, a) => {
+              const r = xt[a], l = t.options ?? {}, s = l.showLabel !== !1;
               if (r === null || !s) return null;
-              const { labelText: c, valueStr: u } = Wt(
+              const { labelText: c, valueStr: f } = Kt(
                 l,
-                S,
-                Z
+                N,
+                tt
               );
-              if (!(c || u)) return null;
-              const d = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", L = `${String(t.xCoordinate)}-${c}`;
-              return /* @__PURE__ */ j(
+              if (!(c || f)) return null;
+              const m = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", I = l.labelTextColor ?? "hsl(var(--foreground))", V = `${String(t.xCoordinate)}-${c}`;
+              return /* @__PURE__ */ Z(
                 "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: d,
-                    color: P
+                    backgroundColor: m,
+                    color: I
                   },
                   children: [
-                    c && /* @__PURE__ */ h("span", { className: "block", children: c }),
-                    u && /* @__PURE__ */ h("span", { className: ut("block", c && "mt-0.5"), children: u })
+                    c && /* @__PURE__ */ p("span", { className: "block", children: c }),
+                    f && /* @__PURE__ */ p("span", { className: mt("block", c && "mt-0.5"), children: f })
                   ]
                 },
-                L
+                V
               );
             })
           }
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ p(
           "div",
           {
-            ref: U,
+            ref: nt,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -607,41 +623,41 @@ function se({
     }
   );
 }
-function Xt({
+function Ut({
   series: e,
-  onUnselect: v
+  onUnselect: C
 }) {
-  return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((m, A) => {
-    const f = Vt(A), S = (m.lineColor ?? m.color) || f.line, Y = m.data.length === 0;
-    return /* @__PURE__ */ j(
+  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((u, T) => {
+    const g = It(T), N = (u.lineColor ?? u.color) || g.line, W = u.data.length === 0;
+    return /* @__PURE__ */ Z(
       "div",
       {
-        className: ut(
+        className: mt(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-          Y && "opacity-50"
+          W && "opacity-50"
         ),
         children: [
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ p(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: S }
+              style: { backgroundColor: N }
             }
           ),
-          /* @__PURE__ */ j("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            m.label,
-            Y && " (no data)"
+          /* @__PURE__ */ Z("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+            u.label,
+            W && " (no data)"
           ] }),
-          v && /* @__PURE__ */ h(
+          C && /* @__PURE__ */ p(
             "button",
             {
               type: "button",
-              onClick: (C) => {
-                C.stopPropagation(), v(m.label);
+              onClick: (x) => {
+                x.stopPropagation(), C(u.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 ${m.label}`,
-              children: /* @__PURE__ */ j(
+              "aria-label": `Remove ${u.label}`,
+              children: /* @__PURE__ */ Z(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -656,9 +672,9 @@ function Xt({
                   className: "text-muted-foreground hover:text-foreground",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ h("title", { children: "Close" }),
-                    /* @__PURE__ */ h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    /* @__PURE__ */ p("title", { children: "Close" }),
+                    /* @__PURE__ */ p("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ p("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                   ]
                 }
               )
@@ -666,13 +682,14 @@ function Xt({
           )
         ]
       },
-      m.label
+      u.label
     );
   }) });
 }
 export {
-  ct as DEFAULT_SERIES_COLORS,
-  se as Graph,
-  Vt as getSeriesColorPalette,
-  Wt as getVerticalLineTooltipContent
+  gt as DEFAULT_SERIES_COLORS,
+  me as Graph,
+  It as getSeriesColorPalette,
+  Jt as getStepForwardValue,
+  Kt as getVerticalLineTooltipContent
 };

package/dist/types/components/graph/graph.d.ts

@@ -32,6 +32,12 @@ export declare function getVerticalLineTooltipContent(opts: VerticalLineOptions,
     labelText: string;
     valueStr: string;
 };
+/**
+ * Step-forward interpolation: find the last data point with
+ * `time <= crosshairTime` and return its value.
+ * Returns 0 when the crosshair is before the first data point (no history).
+ */
+export declare function getStepForwardValue(data: ReadonlyArray<Point>, crosshairTime: number): number;
 /**
  * Palette ordered for maximum contrast; first color is the original teal.
  * Greens/teals are spread out so that when only a subset of series is visible,
@@ -95,10 +101,17 @@ export interface GraphProps {
      * Which prop applies is chosen by how many series actually have points (empty series are ignored).
      */
     yScaleMinMultiple?: number;
+    /**
+     * Minimum visible time (unix seconds).  When set, the X axis never zooms
+     * in further than this value — even if the current series data starts later.
+     * Useful for keeping the full selected time range (e.g. 1Y) when switching
+     * between series with different data coverage.
+     */
+    visibleTimeFrom?: number;
 }
 /**
  * Graph component that renders a chart using lightweight-charts library
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, }: GraphProps): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.1.0-next.2",
+  "version": "3.2.0-next.1",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",