@kodiak-finance/orderly-chart 2.8.18 → 2.8.19-rc.0

package/dist/index.js

@@ -1,2 +1,2299 @@
-'use strict';var react=require('react'),recharts=require('recharts'),orderlyI18n=require('@kodiak-finance/orderly-i18n'),orderlyUi=require('@kodiak-finance/orderly-ui'),orderlyUtils=require('@kodiak-finance/orderly-utils'),jsxRuntime=require('react/jsx-runtime');var Kt=Object.create;var mt=Object.defineProperty;var zt=Object.getOwnPropertyDescriptor;var _t=Object.getOwnPropertyNames;var Gt=Object.getPrototypeOf,$t=Object.prototype.hasOwnProperty;var J=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Et=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of _t(e))!$t.call(t,r)&&r!==o&&mt(t,r,{get:()=>e[r],enumerable:!(a=zt(e,r))||a.enumerable});return t};var Wt=(t,e,o)=>(o=t!=null?Kt(Gt(t)):{},Et(!t||!t.__esModule?mt(o,"default",{value:t,enumerable:true}):o,t));var Ot=J(it=>{Object.defineProperty(it,"__esModule",{value:true});Object.defineProperty(it,"default",{enumerable:true,get:function(){return Fr}});function Dt(t,e){return {handler:t,config:e}}Dt.withOptions=function(t,e=()=>({})){let o=function(a){return {__options:a,handler:t(a),config:e(a)}};return o.__isOptionsFunction=true,o.__pluginFunction=t,o.__configFunction=e,o};var Fr=Dt;});var St=J(nt=>{Object.defineProperty(nt,"__esModule",{value:true});Object.defineProperty(nt,"default",{enumerable:true,get:function(){return Ar}});var kr=Pr(Ot());function Pr(t){return t&&t.__esModule?t:{default:t}}var Ar=kr.default;});var Vt=J((Hn,It)=>{var st=St();It.exports=(st.__esModule?st:{default:st}).default;});var O=t=>{let e=Math.abs(t),o=e===0?0:e<=10?2:e<=100?1:0,a=orderlyUtils.numberToHumanStyle(e,o);return t<0?`-${a}`:a};var w=t=>{let{label:e,value:o,prefix:a,unit:r="USDC",coloring:i=false,dp:n,rm:s}=t;return jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",children:[jsxRuntime.jsxs(orderlyUi.Flex,{direction:"row",className:t.titleClassName,children:[a,jsxRuntime.jsx(orderlyUi.Text.numeral,{unit:r,as:"div",size:"sm",coloring:i,showIdentifier:i,unitClassName:"oui-text-base-contrast-54 oui-ml-1",weight:"semibold",rm:s,dp:n,children:o})]}),jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",intensity:54,weight:"semibold",children:e})]})};var ft=()=>{let t=document.documentElement,e=getComputedStyle(t);return {primary:K(e.getPropertyValue("--oui-color-primary")),primaryLight:K(e.getPropertyValue("--oui-color-primary-light")),secondary:K(e.getPropertyValue("--oui-color-secondary")),success:K(e.getPropertyValue("--oui-color-success")),warning:K(e.getPropertyValue("--oui-color-warning")),danger:K(e.getPropertyValue("--oui-color-danger")),info:K(e.getPropertyValue("--oui-color-info")),loss:K(e.getPropertyValue("--oui-color-trading-loss")),profit:K(e.getPropertyValue("--oui-color-trading-profit"))}},K=t=>`rgb(${t.split(" ").join(",")})`;var p=t=>react.useMemo(()=>{let o=ft();return {profit:t?.profit||o.profit,loss:t?.loss||o.loss,primary:o.primary,primaryLight:o.primaryLight}},[t]);var ne=t=>{let{fill:e,x:o,y:a,width:r,height:i}=t,n=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:o,y:i>0?a:a+i,width:r,height:n,stroke:"none",fill:e})},se=t=>{let{x:e,y:o,stroke:a,payload:r,index:i,width:n,containerWidth:s}=t,{t:c}=orderlyI18n.useTranslation(),l=i===0?48:s>0?s-10:n+r.offset;return jsxRuntime.jsx("g",{transform:`translate(${l},${o-6})`,children:jsxRuntime.jsx("text",{x:0,y:0,dy:16,textAnchor:i===0?"start":"end",fontSize:10,fill:"rgba(255,255,255,0.54)",children:i===0?r.value:c("chart.now")})})},le=t=>{let{width:e,height:o,stroke:a,fill:r}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},ce=t=>{let{active:e,payload:o,label:a}=t,r=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=orderlyI18n.useTranslation();return e&&o&&o.length?jsxRuntime.jsx(w,{label:a===r.current?i("chart.now"):a,value:o[0].value,coloring:true}):null},me=t=>{let{invisible:e,data:o,responsiveContainerProps:a}=t,r=p(t.colors),i=react.useRef(0);return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:orderlyUi.cn(e&&"chart-invisible"),onResize:n=>{i.current=n;},...a,children:jsxRuntime.jsxs(recharts.BarChart,{data:o,margin:{left:-10,top:10,right:10,bottom:30},children:[!e&&jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(le,{}),content:jsxRuntime.jsx(ce,{})}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),!e&&jsxRuntime.jsx(recharts.Bar,{dataKey:"pnl",shape:jsxRuntime.jsx(ne,{}),children:o.map((n,s)=>jsxRuntime.jsx(recharts.Cell,{fill:n.pnl>0?r.profit:r.loss},`cell-${s}`))}),jsxRuntime.jsx(recharts.YAxis,{tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickFormatter:n=>O(n),tickLine:false,axisLine:false,dataKey:"pnl"}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:o.length-2,height:1,tick:jsxRuntime.jsx(se,{containerWidth:i.current}),stroke:"#FFFFFF",strokeOpacity:.04})]})})};var z=t=>{let{x:e,y:o,stroke:a,payload:r,index:i}=t,{t:n}=orderlyI18n.useTranslation();return jsxRuntime.jsx("g",{transform:`translate(${e},${o-6})`,children:jsxRuntime.jsx("text",{x:0,y:0,dy:16,textAnchor:"end",fontSize:10,fill:"rgba(255,255,255,0.54)",children:i===0?r.value:n("chart.now")})})};var Pe=t=>{let{active:e,payload:o,label:a}=t,r=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=orderlyI18n.useTranslation();return e&&o&&o.length?jsxRuntime.jsx(w,{label:a===r.current?i("chart.now"):a,value:o[0].value,coloring:true}):null},Ae=t=>{let e=[];return t?.reduce((o,a)=>(o+=a.pnl,e.push({...a,pnl:o,_pnl:a.pnl}),o),0),e},Re=t=>{let{responsiveContainerProps:e}=t,o=p(t.colors),{isMobile:a}=orderlyUi.useScreen(),r=react.useMemo(()=>Ae(t.data),[t.data]),i=jsxRuntime.jsxs(recharts.LineChart,{data:r,margin:{top:20,right:10,left:-10,bottom:0},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsxRuntime.jsx(z,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{dataKey:"pnl",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:O}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(Pe,{})}),!t.invisible&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"pnl",stroke:o.primary,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...e,children:i})};var _e=t=>{let{active:e,payload:o,label:a}=t,r=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=orderlyI18n.useTranslation();return e&&o&&o.length?jsxRuntime.jsx(w,{label:a===r.current?i("chart.now"):a,value:o[0].value,coloring:true}):null},Ge=t=>{let e=[];return t?.reduce((o,a)=>(o+=a.pnl,e.push({...a,pnl:o,_pnl:a.pnl}),o),0),e},$e=t=>{let{responsiveContainerProps:e}=t,o=p(t.colors),{isMobile:a}=orderlyUi.useScreen(),r=react.useId(),i=react.useMemo(()=>Ge(t.data),[t.data]),n=jsxRuntime.jsxs(recharts.AreaChart,{data:i,margin:{top:20,right:10,left:-10,bottom:0},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsxRuntime.jsx(z,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{dataKey:"pnl",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:O}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(_e,{})}),!t.invisible&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:r,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{stopColor:"#608CFF",offset:"0%",stopOpacity:.5}),jsxRuntime.jsx("stop",{stopColor:"#608CFF",offset:"100%",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"pnl",stroke:o.primary,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${r})`})]})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...e,children:n})};var G=({title:t="No Data Available",description:e="No data to display for the selected period",height:o="300px",className:a})=>jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-flex oui-items-center oui-justify-center oui-bg-base-8",a),style:{height:o},children:jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"center",gap:3,className:"oui-text-center",children:[jsxRuntime.jsx(orderlyUi.BarChartIcon,{}),jsxRuntime.jsx(orderlyUi.Text,{as:"div",size:"sm",weight:"semibold",className:"oui-text-base-contrast-100",children:t}),jsxRuntime.jsx(orderlyUi.Text,{as:"div",size:"xs",className:"oui-text-base-contrast-54",children:e})]})});var lo=t=>{let{fill:e,x:o,y:a,width:r,height:i}=t,n=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:o,y:i>0?a:a+i,width:r,height:n,stroke:"none",fill:e})},co=t=>{let{width:e,height:o}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},xt=t=>`${t>0?"+":""}${t.toFixed(2)}`,mo=(t,e)=>t===0?"inherit":t>0?e.profit:e.loss,uo=t=>e=>{let{active:o,payload:a,label:r}=e,i=p();if(o&&a&&a.length>=1){let s=a.find(x=>x.dataKey==="pnl")?.value??0,c=r,l=mo(s,i);return jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsxs("span",{className:"oui-text-base-contrast-54",children:[c,":"]}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",style:{color:l},children:[xt(s)," USDC"]})]}),t&&jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Cumulative:"}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",children:[(()=>{let P=a.find(m=>m.dataKey==="cumulativePnL")?.value??0;return xt(P)})()," ","USDC"]})]})]})}return null},po=(t,e,o=false)=>{if(t<=12&&!o)return 0;let a;t>500||t>200?a=6:t>100?a=7:t>50?a=8:a=12,o&&(a=Math.ceil(a/2));let r=Math.ceil(t/a);if(e==="15m")return r>=96?Math.ceil(r/56)*56:r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/16)*16:Math.max(8,Math.ceil(r/4)*4);if(e==="1h")return r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/12)*12:Math.max(4,Math.ceil(r/4)*4);if(e==="1d"){if(r>=14)return Math.ceil(r/14)*14;if(r>=3)return Math.ceil(r/7)*7}return r},fo=t=>{let e=0;return t.map(o=>(e+=o.pnl,{...o,cumulativePnL:e}))},ho=t=>{let{data:e,aggregationWindow:o="1d",isMobile:a=false,invisible:r,responsiveContainerProps:i,className:n,showCumulative:s=true}=t,c=p(t.colors),l=react.useMemo(()=>fo(e),[e]),x=react.useMemo(()=>po(l.length,o,a),[l.length,o,a]),P=react.useMemo(()=>{if(l.length===0)return [0,1];let m=l.map(I=>I.pnl),g=s?l.map(I=>I.cumulativePnL):[],D=s?[...m,...g,0]:[...m,0],R=Math.min(...D),E=Math.max(...D),A=E-R;if(A===0)return [0,1];let F=A*.1,S=R-F,V=E+F,M=Math.pow(10,Math.floor(Math.log10(A))),T=Math.ceil((V-S)/5/M)*M,k=Math.floor(S/T)*T,Y=Math.ceil(V/T)*T;return [k,Y]},[l,s]);return r||l.length===0?jsxRuntime.jsx(G,{title:"No P&L Data",description:"No profit and loss data available for the selected period",height:"100%",className:n}):jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",n),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",...i,children:jsxRuntime.jsxs(recharts.ComposedChart,{data:l,margin:{left:45,top:10,right:50,bottom:20},syncId:"symbol-performance",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:"cumulativeGradient",x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{offset:"5%",stopColor:"#608CFF",stopOpacity:.4}),jsxRuntime.jsx("stop",{offset:"95%",stopColor:"#608CFF",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(co,{}),content:uo(s)}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(255,255,255,0.3)",strokeWidth:2,strokeDasharray:"4 4"}),jsxRuntime.jsx(recharts.YAxis,{domain:P,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:m=>yo(m),width:45}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:x,minTickGap:30,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.Bar,{dataKey:"pnl",shape:jsxRuntime.jsx(lo,{}),minPointSize:1,isAnimationActive:false,children:l.map((m,g)=>jsxRuntime.jsx(recharts.Cell,{fill:m.pnl===0?"rgba(255,255,255,0.2)":m.pnl>0?c.profit:c.loss},`cell-${g}`))}),s&&jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"cumulativePnL",fill:"url(#cumulativeGradient)",stroke:"none",isAnimationActive:false}),s&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"cumulativePnL",stroke:c.primary,strokeWidth:2,dot:false,isAnimationActive:false,strokeLinecap:"round",strokeLinejoin:"round"})]})})})};function yo(t){let e=["","K","M","B","T"],o=0,a=Math.abs(t);for(;a>=1e3&&o<e.length-1;)a/=1e3,o++;let r=t<0?"-":"",i=a<=10?1:0,n=a.toFixed(i);return `${r}${n}${e[o]}`}var No=t=>{let{fill:e,x:o,y:a,width:r,height:i}=t,n=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:o,y:i>0?a:a+i,width:r,height:n,stroke:"none",fill:e})},Lo=t=>{let{width:e,height:o}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},vt=t=>`${t>0?"+":""}${t}`,Do=t=>e=>{let{active:o,payload:a,label:r}=e;if(o&&a&&a.length>=1){let n=a.find(c=>c.dataKey==="volume")?.value??0;return jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsxs("span",{className:"oui-text-base-contrast-54",children:[r,":"]}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",children:[vt(n)," USDC"]})]}),t&&jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Cumulative:"}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",children:[(()=>{let l=a.find(x=>x.dataKey==="cumulativeVolume")?.value??0;return vt(l)})()," ","USDC"]})]})]})}return null},Oo=(t,e,o=false)=>{if(t<=12&&!o)return 0;let a;t>500||t>200?a=6:t>100?a=7:t>50?a=8:a=12,o&&(a=Math.ceil(a/2));let r=Math.ceil(t/a);if(e==="15m")return r>=96?Math.ceil(r/56)*56:r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/16)*16:Math.max(8,Math.ceil(r/4)*4);if(e==="1h")return r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/12)*12:Math.max(4,Math.ceil(r/4)*4);if(e==="1d"){if(r>=14)return Math.ceil(r/14)*14;if(r>=3)return Math.ceil(r/7)*7}return r},So=t=>{let e=0;return t.map(o=>(e+=o.volume,{...o,cumulativeVolume:e}))},Io=t=>{let{data:e,aggregationWindow:o="1d",isMobile:a=false,invisible:r,responsiveContainerProps:i,className:n,showCumulative:s=false}=t,c=p(t.colors?{profit:t.colors.fill,loss:t.colors.fill}:void 0),l=react.useMemo(()=>So(e),[e]),x=react.useMemo(()=>Oo(l.length,o,a),[l.length,o,a]),P=react.useMemo(()=>{if(l.length===0)return [0,1];let m=l.map(M=>M.volume),g=s?l.map(M=>M.cumulativeVolume):[],D=Math.max(...s?[...m,...g]:m,0),R=D;if(R===0)return [0,1];let E=R*.1,A=D+E,F=Math.pow(10,Math.floor(Math.log10(R))),S=Math.ceil(A/5/F)*F;return [0,Math.ceil(A/S)*S]},[l,s]);return r||l.length===0?jsxRuntime.jsx(G,{title:"No Volume Data",description:"No trading volume data available for the selected period",height:"100%",className:n}):jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",n),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",...i,children:jsxRuntime.jsxs(recharts.ComposedChart,{data:l,margin:{left:45,top:10,right:50,bottom:20},syncId:"symbol-performance",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:"volumeGradient",x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{offset:"5%",stopColor:"#00B49E",stopOpacity:.4}),jsxRuntime.jsx("stop",{offset:"95%",stopColor:"#00B49E",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(Lo,{}),content:Do(s)}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),jsxRuntime.jsx(recharts.YAxis,{domain:P,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:m=>Vo(m),width:45}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:x,minTickGap:30,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.Bar,{dataKey:"volume",shape:jsxRuntime.jsx(No,{}),minPointSize:1,isAnimationActive:false,children:l.map((m,g)=>jsxRuntime.jsx(recharts.Cell,{fill:m.volume===0?"rgba(255,255,255,0.2)":c.profit,opacity:.8},`cell-${g}`))}),s&&jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"cumulativeVolume",fill:"url(#volumeGradient)",stroke:"none",isAnimationActive:false}),s&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"cumulativeVolume",stroke:c.profit,strokeWidth:2,dot:false,isAnimationActive:false,strokeLinecap:"round",strokeLinejoin:"round"})]})})})};function Vo(t){let e=["","K","M","B","T"],o=0,a=Math.abs(t);for(;a>=1e3&&o<e.length-1;)a/=1e3,o++;let r=t<0?"-":"",i=a<=10?1:0,n=a.toFixed(i);return `${r}${n}${e[o]}`}var Qo=t=>{let{fill:e,x:o,y:a,width:r,height:i}=t,n=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:o,y:i>0?a:a+i,width:r,height:n,stroke:"none",fill:e})},Jo=t=>{let{width:e,height:o}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},kt=t=>`${t>0?"+":""}${t.toFixed(2)}`,Zo=t=>e=>{let{active:o,payload:a,label:r}=e;if(o&&a&&a.length>=1){let n=a.find(c=>c.dataKey==="fees")?.value??0;return jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsxs("span",{className:"oui-text-base-contrast-54",children:[r,":"]}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",children:[kt(n)," USDC"]})]}),t&&jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Cumulative:"}),jsxRuntime.jsxs("span",{className:"oui-font-semibold",children:[(()=>{let l=a.find(x=>x.dataKey==="cumulativeFees")?.value??0;return kt(l)})()," ","USDC"]})]})]})}return null},jo=(t,e,o=false)=>{if(t<=12&&!o)return 0;let a;t>500||t>200?a=6:t>100?a=7:t>50?a=8:a=12,o&&(a=Math.ceil(a/2));let r=Math.ceil(t/a);if(e==="15m")return r>=96?Math.ceil(r/56)*56:r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/16)*16:Math.max(8,Math.ceil(r/4)*4);if(e==="1h")return r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/12)*12:Math.max(4,Math.ceil(r/4)*4);if(e==="1d"){if(r>=14)return Math.ceil(r/14)*14;if(r>=3)return Math.ceil(r/7)*7}return r},ta=t=>{let e=0;return t.map(o=>(e+=o.fees,{...o,cumulativeFees:e}))},ea=t=>{let{data:e,aggregationWindow:o="1d",isMobile:a=false,invisible:r,responsiveContainerProps:i,className:n,showCumulative:s=false}=t,c=p(t.colors?{profit:t.colors.fill,loss:t.colors.fill}:void 0),l=react.useMemo(()=>ta(e),[e]),x=react.useMemo(()=>jo(l.length,o,a),[l.length,o,a]),P=react.useMemo(()=>{if(l.length===0)return {domain:[0,1],ticks:[0,1]};let m=l.map(B=>B.fees),g=s?l.map(B=>B.cumulativeFees):[],D=s?[...m,...g,0]:[...m,0],R=Math.min(...D),A=Math.max(...D)-R;if(A===0)return {domain:[0,1],ticks:[0,1]};let F=A*.1,S=R-F,V=0,M=Math.pow(10,Math.floor(Math.log10(A))),T=M,k=Math.abs(V-S);for(let B of [1,2,2.5,5]){let lt=M*B,ct=Math.ceil(k/lt);if(ct>=4&&ct<=6){T=lt;break}}let Y=Math.floor(S/T)*T,I=[];for(let B=Y;B<V;B+=T)I.push(Number(B.toFixed(10)));return I.push(0),{domain:[Y,0],ticks:I}},[l,s]);return r||l.length===0?jsxRuntime.jsx(G,{title:"No Fees Data",description:"No fees data available for the selected period",height:"100%",className:n}):jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",n),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",...i,children:jsxRuntime.jsxs(recharts.ComposedChart,{data:l,margin:{left:45,top:10,right:50,bottom:20},syncId:"symbol-performance",children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:"feesGradient",x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{offset:"5%",stopColor:"#FF6B6B",stopOpacity:.4}),jsxRuntime.jsx("stop",{offset:"95%",stopColor:"#FF6B6B",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(Jo,{}),content:Zo(s)}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),jsxRuntime.jsx(recharts.YAxis,{domain:P.domain,ticks:P.ticks,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:m=>oa(m),width:45}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:x,minTickGap:30,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.Bar,{dataKey:"fees",shape:jsxRuntime.jsx(Qo,{}),minPointSize:1,isAnimationActive:false,children:l.map((m,g)=>jsxRuntime.jsx(recharts.Cell,{fill:m.fees===0?"rgba(255,255,255,0.2)":c.loss,opacity:.8},`cell-${g}`))}),s&&jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"cumulativeFees",fill:"url(#feesGradient)",stroke:"none",isAnimationActive:false}),s&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"cumulativeFees",stroke:c.loss,strokeWidth:2,dot:false,isAnimationActive:false,strokeLinecap:"round",strokeLinejoin:"round"})]})})})};function oa(t){let e=["","K","M","B","T"],o=0,a=Math.abs(t);for(;a>=1e3&&o<e.length-1;)a/=1e3,o++;let r=t<0?"-":"",i=a<=10?1:0,n=a.toFixed(i);return `${r}${n}${e[o]}`}var da=t=>{let{width:e,height:o}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},fa=t=>{let{active:e,payload:o,label:a}=t;if(e&&o&&o.length>=1){let r=o[0].payload;return r.close!==null&&r.close!==void 0?jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Open:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:r.open?.toFixed(2)??"--"})]}),jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"High:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:r.high?.toFixed(2)??"--"})]}),jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Low:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:r.low?.toFixed(2)??"--"})]}),jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Close:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:r.close.toFixed(2)})]}),jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2 oui-mt-1 oui-pt-2 oui-border-t oui-border-base-contrast-16",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Time:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:a})]})]}):jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsx("div",{className:"oui-text-xs oui-text-base-contrast-54",children:"Price data unavailable"}),jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2 oui-mt-1 oui-pt-2 oui-border-t oui-border-base-contrast-16",children:[jsxRuntime.jsx("span",{className:"oui-text-base-contrast-54",children:"Time:"}),jsxRuntime.jsx("span",{className:"oui-font-semibold",children:a})]})]})}return null},ha=(t,e,o=false)=>{if(t<=12&&!o)return 0;let a;t>500||t>200?a=6:t>100?a=7:t>50?a=8:a=12,o&&(a=Math.ceil(a/2));let r=Math.ceil(t/a);if(e==="15m")return r>=96?Math.ceil(r/56)*56:r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/16)*16:Math.max(8,Math.ceil(r/4)*4);if(e==="1h")return r>=48?Math.ceil(r/28)*28:r>=24?Math.ceil(r/12)*12:Math.max(4,Math.ceil(r/4)*4);if(e==="1d"){if(r>=14)return Math.ceil(r/14)*14;if(r>=3)return Math.ceil(r/7)*7}return r};function ya(t){return t.toFixed(2)}var Ca=t=>{let {data:e,aggregationWindow:o="1d",isMobile:a=false,invisible:r,responsiveContainerProps:i,className:n}=t;p();let c=react.useMemo(()=>ha(e.length,o,a),[e.length,o,a]),l=react.useMemo(()=>{if(e.length===0)return {domain:[0,1],ticks:[0,1]};let x=e.map(k=>k.close).filter(k=>k!=null);if(x.length===0)return {domain:[0,1],ticks:[0,1]};let P=Math.min(...x),m=Math.max(...x),g=m-P;if(g===0)return {domain:[P-1,m+1],ticks:[P-1,m+1]};let D=g*.1,R=P-D,E=m+D,A=Math.pow(10,Math.floor(Math.log10(g))),F=A,S=E-R;for(let k of [1,2,2.5,5]){let Y=A*k,I=Math.ceil(S/Y);if(I>=4&&I<=6){F=Y;break}}let V=Math.floor(R/F)*F,M=Math.ceil(E/F)*F,T=[];for(let k=V;k<=M;k+=F)T.push(Number(k.toFixed(10)));return {domain:[V,M],ticks:T}},[e]);return r||e.length===0?jsxRuntime.jsx(G,{title:"No Price Data",description:"No price data available for the selected period",height:"100%",className:n}):jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",n),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",...i,children:jsxRuntime.jsxs(recharts.ComposedChart,{data:e,margin:{left:45,top:10,right:50,bottom:20},syncId:"symbol-performance",children:[jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(da,{}),content:jsxRuntime.jsx(fa,{})}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),jsxRuntime.jsx(recharts.YAxis,{domain:l.domain,ticks:l.ticks,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:ya,width:50}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:c,minTickGap:50,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"close",stroke:"#00B49E",strokeWidth:2,dot:false,isAnimationActive:false,strokeLinecap:"round",strokeLinejoin:"round"})]})})})};var Ta=t=>{let{active:e,payload:o,label:a}=t,r=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=orderlyI18n.useTranslation();return e&&o&&o.length?jsxRuntime.jsx(w,{label:a===r.current?i("chart.now"):a,value:o[0].value}):null},wa=t=>{let{responsiveContainerProps:e}=t,o=p(t.colors),a=react.useId(),{isMobile:r}=orderlyUi.useScreen(),i=r?jsxRuntime.jsxs(recharts.AreaChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsxRuntime.jsx(z,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:n=>O(n)}),!t.invisible&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:a,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{stopColor:"#00B49E",offset:"0%",stopOpacity:.5}),jsxRuntime.jsx("stop",{stopColor:"#00B49E",offset:"100%",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"account_value",stroke:o.profit,strokeWidth:r?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${a})`})]})]}):jsxRuntime.jsxs(recharts.LineChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsxRuntime.jsx(z,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:O}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(Ta,{})}),!t.invisible&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"account_value",stroke:o.profit,strokeWidth:r?1.5:2,dot:false,isAnimationActive:false})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...e,children:i})};var $a=t=>{let{active:e,payload:o,label:a}=t,r=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=orderlyI18n.useTranslation();return e&&o&&o.length?jsxRuntime.jsx(w,{label:a===r.current?i("chart.now"):a,value:o[0].value}):null},Ea=t=>{let{responsiveContainerProps:e}=t,o=p(t.colors),a=react.useId(),{isMobile:r}=orderlyUi.useScreen(),i=jsxRuntime.jsxs(recharts.AreaChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsxRuntime.jsx(z,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:O}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx($a,{})}),!t.invisible&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:a,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsxRuntime.jsx("stop",{stopColor:"#00B49E",offset:"0%",stopOpacity:.5}),jsxRuntime.jsx("stop",{stopColor:"#00B49E",offset:"100%",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"account_value",stroke:o.profit,strokeWidth:r?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${a})`})]})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...e,children:i})};var ar=t=>{let{fill:e,x:o,y:a,width:r,height:i,opacity:n}=t,s=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:o,y:i>0?a:a+i,width:r,height:s,stroke:"none",fill:e,opacity:n})},rr=t=>{let{width:e,height:o,payload:a,stroke:r,fill:i}=t;return a?.[0]?.value===0?null:jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},ir=t=>{let{active:e,payload:o,label:a,tooltip:r}=t;return o?.[0]?.value===0?null:e&&o&&o.length?jsxRuntime.jsx(w,{label:a,value:o[0].value,titleClassName:"oui-gap-4",rm:r?.rm,dp:r?.dp}):null},nr=t=>{let e=p(t.colors?.fill?{profit:t.colors?.fill,loss:t.colors?.fill}:void 0),o=t.data?.reduce((i,n)=>i+n.volume,0)===0,a=t.data?.reduce((i,n)=>i>n.volume?i:n.volume,0),r=a<=10?2:a<=100?1:0;return jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn(t.className),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{children:jsxRuntime.jsxs(recharts.BarChart,{data:t.data,margin:{left:-0,top:6,right:0,bottom:20},children:[jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(rr,{}),content:jsxRuntime.jsx(ir,{tooltip:t.tooltip})}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.08,repeatCount:6}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"#000"}),jsxRuntime.jsx(recharts.Bar,{dataKey:"volume",shape:jsxRuntime.jsx(ar,{}),minPointSize:1,children:t.data.map((i,n)=>jsxRuntime.jsx(recharts.Cell,{fill:i.volume>0?e.profit:e.loss,opacity:i.opacity},`cell-${n}`))}),jsxRuntime.jsx(recharts.YAxis,{tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,dataKey:"volume",tickFormatter:(i,n)=>o?`${n*100}`:sr(i,r),width:45}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:t.data.length-2,height:1,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"rgb(229, 231, 235)",strokeOpacity:.2})]})})})};function sr(t,e=0){let o=["","K","M","B","T"],a=0;for(;t>=1e3&&a<o.length-1;)t/=1e3,a++;return `${lr(t,e)}${o[a]}`}function lr(t,e){let o=t.toString(),a=o.indexOf(".");if(a===-1||e===0)return o.split(".")[0];let r=a+e+1;return o.slice(0,r)}var xr=t=>{let{width:e,height:o}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:o,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},gr=t=>{let{active:e,payload:o,label:a}=t;return e&&o&&o.length>0?jsxRuntime.jsxs(orderlyUi.Box,{intensity:600,p:3,r:"md",className:"oui-flex oui-flex-col oui-gap-2",children:[jsxRuntime.jsx("div",{className:"oui-text-xs oui-font-semibold",children:a}),o.map((r,i)=>jsxRuntime.jsxs("div",{className:"oui-text-xs oui-flex oui-gap-2",children:[jsxRuntime.jsxs("span",{style:{color:r.color},className:"oui-font-semibold",children:[r.name,":"]}),jsxRuntime.jsx("span",{children:r.value?.toFixed(2)||0})]},i))]}):null},vr=({volumeData:t,feesData:e,priceData:o,aggregationWindow:a,includeFees:r,className:i})=>{let n=react.useMemo(()=>{let s=new Map;return t.forEach(c=>{s.set(c.date,{...s.get(c.date),date:c.date,volume:c.volume});}),e.forEach(c=>{s.set(c.date,{...s.get(c.date),date:c.date,fees:c.fees});}),o.forEach(c=>{s.set(c.date,{...s.get(c.date),date:c.date,open:c.open,high:c.high,low:c.low,close:c.close});}),Array.from(s.values())},[t,e,o]);return n.length===0?jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",i),children:jsxRuntime.jsx("div",{className:"oui-text-center oui-text-base-contrast-54 oui-py-10",children:"No data available"})}):jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-w-full oui-h-full",i),children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",children:jsxRuntime.jsxs(recharts.ComposedChart,{data:n,margin:{left:0,top:10,right:10,bottom:20},children:[jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.YAxis,{yAxisId:"left",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,width:45,label:{value:"Volume / Fees",angle:-90,position:"insideLeft"}}),jsxRuntime.jsx(recharts.YAxis,{yAxisId:"right",orientation:"right",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,width:50,label:{value:"Price",angle:90,position:"insideRight"}}),jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(xr,{}),content:jsxRuntime.jsx(gr,{})}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),jsxRuntime.jsx(recharts.Bar,{yAxisId:"left",dataKey:"volume",fill:"rgba(0, 180, 158, 0.6)",name:"Volume"}),jsxRuntime.jsx(recharts.Bar,{yAxisId:"left",dataKey:"fees",fill:"rgba(255, 107, 107, 0.6)",name:"Fees"}),jsxRuntime.jsx(recharts.Line,{yAxisId:"right",type:"natural",dataKey:"close",stroke:"#00B49E",strokeWidth:2,dot:false,isAnimationActive:false,name:"Price",strokeLinecap:"round",strokeLinejoin:"round"})]})})})};var Bt=Wt(Vt()),Rr=()=>(0, Bt.default)(function({addComponents:t,addBase:e}){t({".xAxis":{".recharts-cartesian-axis-tick:first-child text":{"text-anchor":"start"},".recharts-cartesian-axis-tick:last-child text":{"text-anchor":"end"}}},{respectPrefix:false});});Object.defineProperty(exports,"Area",{enumerable:true,get:function(){return recharts.Area}});Object.defineProperty(exports,"AreaChart",{enumerable:true,get:function(){return recharts.AreaChart}});Object.defineProperty(exports,"Bar",{enumerable:true,get:function(){return recharts.Bar}});Object.defineProperty(exports,"BarChart",{enumerable:true,get:function(){return recharts.BarChart}});Object.defineProperty(exports,"Cell",{enumerable:true,get:function(){return recharts.Cell}});Object.defineProperty(exports,"Line",{enumerable:true,get:function(){return recharts.Line}});Object.defineProperty(exports,"LineChart",{enumerable:true,get:function(){return recharts.LineChart}});exports.AssetAreaChart=Ea;exports.AssetLineChart=wa;exports.ChartEmptyState=G;exports.CombinedFeesChart=ea;exports.CombinedPnLChart=ho;exports.CombinedPriceChart=Ca;exports.CombinedVolumeChart=Io;exports.PnLBarChart=me;exports.PnlAreaChart=$e;exports.PnlLineChart=Re;exports.UnifiedSymbolPerformanceChart=vr;exports.VolBarChart=nr;exports.chartPlugin=Rr;//# sourceMappingURL=index.js.map
+'use strict';
+
+var react = require('react');
+var recharts = require('recharts');
+var orderlyI18n = require('@kodiak-finance/orderly-i18n');
+var orderlyUi = require('@kodiak-finance/orderly-ui');
+var orderlyUtils = require('@kodiak-finance/orderly-utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/lib/util/createPlugin.js"(exports) {
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/lib/public/create-plugin.js"(exports) {
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@24.3.1_typescript@5.8.3_/node_modules/tailwindcss/plugin.js"(exports, module) {
+    var createPlugin = require_create_plugin();
+    module.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+var tickFormatter = (value) => {
+  const absValue = Math.abs(value);
+  const dp = absValue === 0 ? 0 : absValue <= 10 ? 2 : absValue <= 100 ? 1 : 0;
+  const formatted = orderlyUtils.numberToHumanStyle(absValue, dp);
+  return value < 0 ? `-${formatted}` : formatted;
+};
+var OrderlyChartTooltip = (props) => {
+  const {
+    label,
+    value,
+    prefix,
+    unit = "USDC",
+    coloring = false,
+    dp,
+    rm
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { intensity: 600, p: 3, r: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "row", className: props.titleClassName, children: [
+      prefix,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Text.numeral,
+        {
+          unit,
+          as: "div",
+          size: "sm",
+          coloring,
+          showIdentifier: coloring,
+          unitClassName: "oui-text-base-contrast-54 oui-ml-1",
+          weight: "semibold",
+          rm,
+          dp,
+          children: value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 54, weight: "semibold", children: label })
+  ] });
+};
+
+// src/utils/theme.ts
+var getThemeColors = () => {
+  const root = document.documentElement;
+  const computedStyle = getComputedStyle(root);
+  const colors = {
+    primary: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-primary")
+    ),
+    primaryLight: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-primary-light")
+    ),
+    secondary: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-secondary")
+    ),
+    success: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-success")
+    ),
+    warning: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-warning")
+    ),
+    danger: convertToRGB(computedStyle.getPropertyValue("--oui-color-danger")),
+    info: convertToRGB(computedStyle.getPropertyValue("--oui-color-info")),
+    loss: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-trading-loss")
+    ),
+    profit: convertToRGB(
+      computedStyle.getPropertyValue("--oui-color-trading-profit")
+    )
+  };
+  return colors;
+};
+var convertToRGB = (color) => {
+  return `rgb(${color.split(" ").join(",")})`;
+};
+
+// src/orderly/useColors.ts
+var useColors = (colors) => {
+  const _colors = react.useMemo(() => {
+    const themeColors = getThemeColors();
+    return {
+      profit: colors?.profit || themeColors.profit,
+      loss: colors?.loss || themeColors.loss,
+      primary: themeColors.primary,
+      primaryLight: themeColors.primaryLight
+    };
+  }, [colors]);
+  return _colors;
+};
+var RoundedRectangle = (props) => {
+  const { fill, x, y, width, height } = props;
+  const absHeight = Math.abs(height);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      rx: 2,
+      x,
+      y: height > 0 ? y : y + height,
+      width,
+      height: absHeight,
+      stroke: "none",
+      fill
+    }
+  );
+};
+var XAxisLabel = (props) => {
+  const { x, y, stroke, payload, index, width, containerWidth } = props;
+  const { t } = orderlyI18n.useTranslation();
+  const _x = index === 0 ? 48 : containerWidth > 0 ? containerWidth - 10 : width + payload.offset;
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${_x},${y - 6})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x: 0,
+      y: 0,
+      dy: 16,
+      textAnchor: index === 0 ? "start" : "end",
+      fontSize: 10,
+      fill: "rgba(255,255,255,0.54)",
+      children: index === 0 ? payload.value : t("chart.now")
+    }
+  ) });
+};
+var CustomizedCross = (props) => {
+  const { width, height, stroke, fill } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var CustomTooltip = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = orderlyI18n.useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label: label === todayStr.current ? t("chart.now") : label,
+        value: payload[0].value,
+        coloring: true
+      }
+    );
+  }
+  return null;
+};
+var PnLBarChart = (props) => {
+  const { invisible, data, responsiveContainerProps } = props;
+  const colors = useColors(props.colors);
+  const widthRef = react.useRef(0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      className: orderlyUi.cn(invisible && "chart-invisible"),
+      onResize: (width) => {
+        widthRef.current = width;
+      },
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.BarChart,
+        {
+          data,
+          margin: { left: -10, top: 10, right: 10, bottom: 30 },
+          children: [
+            !invisible && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross, {}),
+                content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+            !invisible && /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "pnl", shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle, {}), children: data.map((entry, index) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Cell,
+                {
+                  fill: entry.pnl > 0 ? colors.profit : colors.loss
+                },
+                `cell-${index}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickFormatter: (value) => tickFormatter(value),
+                tickLine: false,
+                axisLine: false,
+                dataKey: "pnl"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: data.length - 2,
+                height: 1,
+                tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel, { containerWidth: widthRef.current }),
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var XAxisLabel2 = (props) => {
+  const { x, y, stroke, payload, index } = props;
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y - 6})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x: 0,
+      y: 0,
+      dy: 16,
+      textAnchor: "end",
+      fontSize: 10,
+      fill: "rgba(255,255,255,0.54)",
+      children: index === 0 ? payload.value : t("chart.now")
+    }
+  ) });
+};
+var CustomTooltip2 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = orderlyI18n.useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label: label === todayStr.current ? t("chart.now") : label,
+        value: payload[0].value,
+        coloring: true
+      }
+    );
+  }
+  return null;
+};
+var dataTransfer = (data) => {
+  const series = [];
+  data?.reduce((acc, item) => {
+    acc += item.pnl;
+    series.push({ ...item, pnl: acc, _pnl: item.pnl });
+    return acc;
+  }, 0);
+  return series;
+};
+var PnlLineChart = (props) => {
+  const { responsiveContainerProps } = props;
+  const colors = useColors(props.colors);
+  const { isMobile } = orderlyUi.useScreen();
+  const data = react.useMemo(() => dataTransfer(props.data), [props.data]);
+  const chartComponent = /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.LineChart,
+    {
+      data,
+      margin: { top: 20, right: 10, left: -10, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            dataKey: "pnl",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip2, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            type: "natural",
+            dataKey: "pnl",
+            stroke: colors.primary,
+            strokeWidth: isMobile ? 1.5 : 2,
+            dot: false,
+            isAnimationActive: false
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var CustomTooltip3 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = orderlyI18n.useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label: label === todayStr.current ? t("chart.now") : label,
+        value: payload[0].value,
+        coloring: true
+      }
+    );
+  }
+  return null;
+};
+var dataTransfer2 = (data) => {
+  const series = [];
+  data?.reduce((acc, item) => {
+    acc += item.pnl;
+    series.push({ ...item, pnl: acc, _pnl: item.pnl });
+    return acc;
+  }, 0);
+  return series;
+};
+var PnlAreaChart = (props) => {
+  const { responsiveContainerProps } = props;
+  const colors = useColors(props.colors);
+  const { isMobile } = orderlyUi.useScreen();
+  const colorId = react.useId();
+  const data = react.useMemo(() => dataTransfer2(props.data), [props.data]);
+  const baseValue = react.useMemo(
+    () => data.map((item) => item.pnl).sort((a, b) => a - b)[0] || 0,
+    [data]
+  );
+  const chartComponent = /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.AreaChart,
+    {
+      data,
+      margin: { top: 20, right: 10, left: -10, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            dataKey: "pnl",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: colors.primary, offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: colors.primary, offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              type: "natural",
+              dataKey: "pnl",
+              stroke: colors.primary,
+              strokeWidth: isMobile ? 1.5 : 2,
+              dot: false,
+              isAnimationActive: false,
+              fill: `url(#${colorId})`,
+              baseValue: baseValue || 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var ChartEmptyState = ({
+  title = "No Data Available",
+  description = "No data to display for the selected period",
+  height = "300px",
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Box,
+    {
+      className: orderlyUi.cn(
+        "oui-w-full oui-flex oui-items-center oui-justify-center oui-bg-base-8",
+        className
+      ),
+      style: { height },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          direction: "column",
+          itemAlign: "center",
+          gap: 3,
+          className: "oui-text-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.BarChartIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.Text,
+              {
+                as: "div",
+                size: "sm",
+                weight: "semibold",
+                className: "oui-text-base-contrast-100",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { as: "div", size: "xs", className: "oui-text-base-contrast-54", children: description })
+          ]
+        }
+      )
+    }
+  );
+};
+var RoundedRectangle2 = (props) => {
+  const { fill, x, y, width, height } = props;
+  const absHeight = Math.abs(height);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      rx: 2,
+      x,
+      y: height > 0 ? y : y + height,
+      width,
+      height: absHeight,
+      stroke: "none",
+      fill
+    }
+  );
+};
+var CustomizedCross2 = (props) => {
+  const { width, height } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var formatValueWithSign = (value) => {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${value.toFixed(2)}`;
+};
+var getValueColor = (value, colors) => {
+  if (value === 0) return "inherit";
+  return value > 0 ? colors.profit : colors.loss;
+};
+var createCustomTooltip = (showCumulative) => {
+  return (props) => {
+    const { active, payload, label } = props;
+    const colors = useColors();
+    if (active && payload && payload.length >= 1) {
+      const barData = payload.find((p) => p.dataKey === "pnl");
+      const barValue = barData?.value ?? 0;
+      const formattedDate = label;
+      const barColor = getValueColor(barValue, colors);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Box,
+        {
+          intensity: 600,
+          p: 3,
+          r: "md",
+          className: "oui-flex oui-flex-col oui-gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-text-base-contrast-54", children: [
+                formattedDate,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", style: { color: barColor }, children: [
+                formatValueWithSign(barValue),
+                " USDC"
+              ] })
+            ] }),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Cumulative:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", children: [
+                (() => {
+                  const lineData = payload.find(
+                    (p) => p.dataKey === "cumulativePnL"
+                  );
+                  const cumulativeValue = lineData?.value ?? 0;
+                  return formatValueWithSign(cumulativeValue);
+                })(),
+                " ",
+                "USDC"
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+};
+var calculateOptimalInterval = (dataLength, aggregationWindow, isMobile = false) => {
+  if (dataLength <= 12 && !isMobile) return 0;
+  let targetLabels;
+  if (dataLength > 500) {
+    targetLabels = 6;
+  } else if (dataLength > 200) {
+    targetLabels = 6;
+  } else if (dataLength > 100) {
+    targetLabels = 7;
+  } else if (dataLength > 50) {
+    targetLabels = 8;
+  } else {
+    targetLabels = 12;
+  }
+  if (isMobile) {
+    targetLabels = Math.ceil(targetLabels / 2);
+  }
+  const baseInterval = Math.ceil(dataLength / targetLabels);
+  if (aggregationWindow === "15m") {
+    if (baseInterval >= 96) return Math.ceil(baseInterval / 56) * 56;
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 16) * 16;
+    return Math.max(8, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1h") {
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 12) * 12;
+    return Math.max(4, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1d") {
+    if (baseInterval >= 14) return Math.ceil(baseInterval / 14) * 14;
+    if (baseInterval >= 3) return Math.ceil(baseInterval / 7) * 7;
+  }
+  return baseInterval;
+};
+var transformToCumulative = (data) => {
+  let cumulative = 0;
+  return data.map((item) => {
+    cumulative += item.pnl;
+    return {
+      ...item,
+      cumulativePnL: cumulative
+    };
+  });
+};
+var CombinedPnLChart = (props) => {
+  const {
+    data,
+    aggregationWindow = "1d",
+    isMobile = false,
+    invisible,
+    responsiveContainerProps,
+    className,
+    showCumulative = true
+  } = props;
+  const colors = useColors(props.colors);
+  const transformedData = react.useMemo(() => transformToCumulative(data), [data]);
+  const xAxisInterval = react.useMemo(() => {
+    return calculateOptimalInterval(
+      transformedData.length,
+      aggregationWindow,
+      isMobile
+    );
+  }, [transformedData.length, aggregationWindow, isMobile]);
+  const yAxisDomain = react.useMemo(() => {
+    if (transformedData.length === 0) return [0, 1];
+    const pnlValues = transformedData.map((item) => item.pnl);
+    const cumulativeValues = showCumulative ? transformedData.map((item) => item.cumulativePnL) : [];
+    const valuesToConsider = showCumulative ? [...pnlValues, ...cumulativeValues, 0] : [...pnlValues, 0];
+    const minValue = Math.min(...valuesToConsider);
+    const maxValue = Math.max(...valuesToConsider);
+    const range = maxValue - minValue;
+    if (range === 0) return [0, 1];
+    const padding = range * 0.1;
+    const lower = minValue - padding;
+    const upper = maxValue + padding;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(range)));
+    const step = Math.ceil((upper - lower) / 5 / magnitude) * magnitude;
+    const roundedLower = Math.floor(lower / step) * step;
+    const roundedUpper = Math.ceil(upper / step) * step;
+    return [roundedLower, roundedUpper];
+  }, [transformedData, showCumulative]);
+  if (invisible || transformedData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ChartEmptyState,
+      {
+        title: "No P&L Data",
+        description: "No profit and loss data available for the selected period",
+        height: "100%",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      width: "100%",
+      height: "100%",
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data: transformedData,
+          margin: { left: 45, top: 10, right: 50, bottom: 20 },
+          syncId: "symbol-performance",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "cumulativeGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: "#608CFF", stopOpacity: 0.4 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: "#608CFF", stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross2, {}),
+                content: createCustomTooltip(showCumulative)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                vertical: false,
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.ReferenceLine,
+              {
+                y: 0,
+                stroke: "rgba(255,255,255,0.3)",
+                strokeWidth: 2,
+                strokeDasharray: "4 4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                domain: yAxisDomain,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => tickFormatter2(value),
+                width: 45
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: xAxisInterval,
+                minTickGap: 30,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: "pnl",
+                shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle2, {}),
+                minPointSize: 1,
+                isAnimationActive: false,
+                children: transformedData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Cell,
+                  {
+                    fill: entry.pnl === 0 ? "rgba(255,255,255,0.2)" : entry.pnl > 0 ? colors.profit : colors.loss
+                  },
+                  `cell-${index}`
+                ))
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Area,
+              {
+                type: "natural",
+                dataKey: "cumulativePnL",
+                fill: "url(#cumulativeGradient)",
+                stroke: "none",
+                isAnimationActive: false
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "natural",
+                dataKey: "cumulativePnL",
+                stroke: colors.primary,
+                strokeWidth: 2,
+                dot: false,
+                isAnimationActive: false,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+function tickFormatter2(value) {
+  const abbreviations = ["", "K", "M", "B", "T"];
+  let index = 0;
+  let num = Math.abs(value);
+  while (num >= 1e3 && index < abbreviations.length - 1) {
+    num /= 1e3;
+    index++;
+  }
+  const sign = value < 0 ? "-" : "";
+  const decimalPlaces = num <= 10 ? 1 : 0;
+  const rounded = num.toFixed(decimalPlaces);
+  return `${sign}${rounded}${abbreviations[index]}`;
+}
+var RoundedRectangle3 = (props) => {
+  const { fill, x, y, width, height } = props;
+  const absHeight = Math.abs(height);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      rx: 2,
+      x,
+      y: height > 0 ? y : y + height,
+      width,
+      height: absHeight,
+      stroke: "none",
+      fill
+    }
+  );
+};
+var CustomizedCross3 = (props) => {
+  const { width, height } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var formatValueWithSign2 = (value) => {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${value}`;
+};
+var createCustomTooltip2 = (showCumulative) => {
+  return (props) => {
+    const { active, payload, label } = props;
+    if (active && payload && payload.length >= 1) {
+      const volumeData = payload.find((p) => p.dataKey === "volume");
+      const volumeValue = volumeData?.value ?? 0;
+      const formattedDate = label;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Box,
+        {
+          intensity: 600,
+          p: 3,
+          r: "md",
+          className: "oui-flex oui-flex-col oui-gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-text-base-contrast-54", children: [
+                formattedDate,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", children: [
+                formatValueWithSign2(volumeValue),
+                " USDC"
+              ] })
+            ] }),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Cumulative:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", children: [
+                (() => {
+                  const cumulativeData = payload.find(
+                    (p) => p.dataKey === "cumulativeVolume"
+                  );
+                  const cumulativeValue = cumulativeData?.value ?? 0;
+                  return formatValueWithSign2(cumulativeValue);
+                })(),
+                " ",
+                "USDC"
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+};
+var calculateOptimalInterval2 = (dataLength, aggregationWindow, isMobile = false) => {
+  if (dataLength <= 12 && !isMobile) return 0;
+  let targetLabels;
+  if (dataLength > 500) {
+    targetLabels = 6;
+  } else if (dataLength > 200) {
+    targetLabels = 6;
+  } else if (dataLength > 100) {
+    targetLabels = 7;
+  } else if (dataLength > 50) {
+    targetLabels = 8;
+  } else {
+    targetLabels = 12;
+  }
+  if (isMobile) {
+    targetLabels = Math.ceil(targetLabels / 2);
+  }
+  const baseInterval = Math.ceil(dataLength / targetLabels);
+  if (aggregationWindow === "15m") {
+    if (baseInterval >= 96) return Math.ceil(baseInterval / 56) * 56;
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 16) * 16;
+    return Math.max(8, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1h") {
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 12) * 12;
+    return Math.max(4, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1d") {
+    if (baseInterval >= 14) return Math.ceil(baseInterval / 14) * 14;
+    if (baseInterval >= 3) return Math.ceil(baseInterval / 7) * 7;
+  }
+  return baseInterval;
+};
+var transformToCumulative2 = (data) => {
+  let cumulative = 0;
+  return data.map((item) => {
+    cumulative += item.volume;
+    return {
+      ...item,
+      cumulativeVolume: cumulative
+    };
+  });
+};
+var CombinedVolumeChart = (props) => {
+  const {
+    data,
+    aggregationWindow = "1d",
+    isMobile = false,
+    invisible,
+    responsiveContainerProps,
+    className,
+    showCumulative = false
+  } = props;
+  const colors = useColors(
+    props.colors ? { profit: props.colors.fill, loss: props.colors.fill } : void 0
+  );
+  const transformedData = react.useMemo(() => transformToCumulative2(data), [data]);
+  const xAxisInterval = react.useMemo(
+    () => calculateOptimalInterval2(
+      transformedData.length,
+      aggregationWindow,
+      isMobile
+    ),
+    [transformedData.length, aggregationWindow, isMobile]
+  );
+  const yAxisDomain = react.useMemo(() => {
+    if (transformedData.length === 0) return [0, 1];
+    const volumeValues = transformedData.map((item) => item.volume);
+    const cumulativeValues = showCumulative ? transformedData.map((item) => item.cumulativeVolume) : [];
+    const maxValue = Math.max(
+      ...showCumulative ? [...volumeValues, ...cumulativeValues] : volumeValues,
+      0
+    );
+    const range = maxValue;
+    if (range === 0) return [0, 1];
+    const padding = range * 0.1;
+    const upper = maxValue + padding;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(range)));
+    const step = Math.ceil(upper / 5 / magnitude) * magnitude;
+    const roundedUpper = Math.ceil(upper / step) * step;
+    return [0, roundedUpper];
+  }, [transformedData, showCumulative]);
+  if (invisible || transformedData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ChartEmptyState,
+      {
+        title: "No Volume Data",
+        description: "No trading volume data available for the selected period",
+        height: "100%",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      width: "100%",
+      height: "100%",
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data: transformedData,
+          margin: { left: 45, top: 10, right: 50, bottom: 20 },
+          syncId: "symbol-performance",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "volumeGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: "#00B49E", stopOpacity: 0.4 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: "#00B49E", stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross3, {}),
+                content: createCustomTooltip2(showCumulative)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                vertical: false,
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                domain: yAxisDomain,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => tickFormatter3(value),
+                width: 45
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: xAxisInterval,
+                minTickGap: 30,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: "volume",
+                shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle3, {}),
+                minPointSize: 1,
+                isAnimationActive: false,
+                children: transformedData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Cell,
+                  {
+                    fill: entry.volume === 0 ? "rgba(255,255,255,0.2)" : colors.profit,
+                    opacity: 0.8
+                  },
+                  `cell-${index}`
+                ))
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Area,
+              {
+                type: "natural",
+                dataKey: "cumulativeVolume",
+                fill: "url(#volumeGradient)",
+                stroke: "none",
+                isAnimationActive: false
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "natural",
+                dataKey: "cumulativeVolume",
+                stroke: colors.profit,
+                strokeWidth: 2,
+                dot: false,
+                isAnimationActive: false,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+function tickFormatter3(value) {
+  const abbreviations = ["", "K", "M", "B", "T"];
+  let index = 0;
+  let num = Math.abs(value);
+  while (num >= 1e3 && index < abbreviations.length - 1) {
+    num /= 1e3;
+    index++;
+  }
+  const sign = value < 0 ? "-" : "";
+  const decimalPlaces = num <= 10 ? 1 : 0;
+  const rounded = num.toFixed(decimalPlaces);
+  return `${sign}${rounded}${abbreviations[index]}`;
+}
+var RoundedRectangle4 = (props) => {
+  const { fill, x, y, width, height } = props;
+  const absHeight = Math.abs(height);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      rx: 2,
+      x,
+      y: height > 0 ? y : y + height,
+      width,
+      height: absHeight,
+      stroke: "none",
+      fill
+    }
+  );
+};
+var CustomizedCross4 = (props) => {
+  const { width, height } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var formatValueWithSign3 = (value) => {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${value.toFixed(2)}`;
+};
+var createCustomTooltip3 = (showCumulative) => {
+  return (props) => {
+    const { active, payload, label } = props;
+    if (active && payload && payload.length >= 1) {
+      const feesData = payload.find((p) => p.dataKey === "fees");
+      const feesValue = feesData?.value ?? 0;
+      const formattedDate = label;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Box,
+        {
+          intensity: 600,
+          p: 3,
+          r: "md",
+          className: "oui-flex oui-flex-col oui-gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-text-base-contrast-54", children: [
+                formattedDate,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", children: [
+                formatValueWithSign3(feesValue),
+                " USDC"
+              ] })
+            ] }),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Cumulative:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-font-semibold", children: [
+                (() => {
+                  const cumulativeData = payload.find(
+                    (p) => p.dataKey === "cumulativeFees"
+                  );
+                  const cumulativeValue = cumulativeData?.value ?? 0;
+                  return formatValueWithSign3(cumulativeValue);
+                })(),
+                " ",
+                "USDC"
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+};
+var calculateOptimalInterval3 = (dataLength, aggregationWindow, isMobile = false) => {
+  if (dataLength <= 12 && !isMobile) return 0;
+  let targetLabels;
+  if (dataLength > 500) {
+    targetLabels = 6;
+  } else if (dataLength > 200) {
+    targetLabels = 6;
+  } else if (dataLength > 100) {
+    targetLabels = 7;
+  } else if (dataLength > 50) {
+    targetLabels = 8;
+  } else {
+    targetLabels = 12;
+  }
+  if (isMobile) {
+    targetLabels = Math.ceil(targetLabels / 2);
+  }
+  const baseInterval = Math.ceil(dataLength / targetLabels);
+  if (aggregationWindow === "15m") {
+    if (baseInterval >= 96) return Math.ceil(baseInterval / 56) * 56;
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 16) * 16;
+    return Math.max(8, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1h") {
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 12) * 12;
+    return Math.max(4, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1d") {
+    if (baseInterval >= 14) return Math.ceil(baseInterval / 14) * 14;
+    if (baseInterval >= 3) return Math.ceil(baseInterval / 7) * 7;
+  }
+  return baseInterval;
+};
+var transformToCumulative3 = (data) => {
+  let cumulative = 0;
+  return data.map((item) => {
+    cumulative += item.fees;
+    return {
+      ...item,
+      cumulativeFees: cumulative
+    };
+  });
+};
+var CombinedFeesChart = (props) => {
+  const {
+    data,
+    aggregationWindow = "1d",
+    isMobile = false,
+    invisible,
+    responsiveContainerProps,
+    className,
+    showCumulative = false
+  } = props;
+  const colors = useColors(
+    props.colors ? { profit: props.colors.fill, loss: props.colors.fill } : void 0
+  );
+  const transformedData = react.useMemo(() => transformToCumulative3(data), [data]);
+  const xAxisInterval = react.useMemo(
+    () => calculateOptimalInterval3(
+      transformedData.length,
+      aggregationWindow,
+      isMobile
+    ),
+    [transformedData.length, aggregationWindow, isMobile]
+  );
+  const yAxisDomainAndTicks = react.useMemo(() => {
+    if (transformedData.length === 0) return { domain: [0, 1], ticks: [0, 1] };
+    const feesValues = transformedData.map((item) => item.fees);
+    const cumulativeValues = showCumulative ? transformedData.map((item) => item.cumulativeFees) : [];
+    const valuesToConsider = showCumulative ? [...feesValues, ...cumulativeValues, 0] : [...feesValues, 0];
+    const minValue = Math.min(...valuesToConsider);
+    const maxValue = Math.max(...valuesToConsider);
+    const range = maxValue - minValue;
+    if (range === 0) return { domain: [0, 1], ticks: [0, 1] };
+    const padding = range * 0.1;
+    const lower = minValue - padding;
+    const upper = 0;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(range)));
+    let step = magnitude;
+    const rangeWidth = Math.abs(upper - lower);
+    for (const divisor of [1, 2, 2.5, 5]) {
+      const candidate = magnitude * divisor;
+      const tickCount = Math.ceil(rangeWidth / candidate);
+      if (tickCount >= 4 && tickCount <= 6) {
+        step = candidate;
+        break;
+      }
+    }
+    const roundedLower = Math.floor(lower / step) * step;
+    const ticks = [];
+    for (let tick = roundedLower; tick < upper; tick += step) {
+      ticks.push(Number(tick.toFixed(10)));
+    }
+    ticks.push(0);
+    return { domain: [roundedLower, 0], ticks };
+  }, [transformedData, showCumulative]);
+  if (invisible || transformedData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ChartEmptyState,
+      {
+        title: "No Fees Data",
+        description: "No fees data available for the selected period",
+        height: "100%",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      width: "100%",
+      height: "100%",
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data: transformedData,
+          margin: { left: 45, top: 10, right: 50, bottom: 20 },
+          syncId: "symbol-performance",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "feesGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: "#FF6B6B", stopOpacity: 0.4 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: "#FF6B6B", stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross4, {}),
+                content: createCustomTooltip3(showCumulative)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                vertical: false,
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                domain: yAxisDomainAndTicks.domain,
+                ticks: yAxisDomainAndTicks.ticks,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => tickFormatter4(value),
+                width: 45
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: xAxisInterval,
+                minTickGap: 30,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: "fees",
+                shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle4, {}),
+                minPointSize: 1,
+                isAnimationActive: false,
+                children: transformedData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Cell,
+                  {
+                    fill: entry.fees === 0 ? "rgba(255,255,255,0.2)" : colors.loss,
+                    opacity: 0.8
+                  },
+                  `cell-${index}`
+                ))
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Area,
+              {
+                type: "natural",
+                dataKey: "cumulativeFees",
+                fill: "url(#feesGradient)",
+                stroke: "none",
+                isAnimationActive: false
+              }
+            ),
+            showCumulative && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "natural",
+                dataKey: "cumulativeFees",
+                stroke: colors.loss,
+                strokeWidth: 2,
+                dot: false,
+                isAnimationActive: false,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+function tickFormatter4(value) {
+  const abbreviations = ["", "K", "M", "B", "T"];
+  let index = 0;
+  let num = Math.abs(value);
+  while (num >= 1e3 && index < abbreviations.length - 1) {
+    num /= 1e3;
+    index++;
+  }
+  const sign = value < 0 ? "-" : "";
+  const decimalPlaces = num <= 10 ? 1 : 0;
+  const rounded = num.toFixed(decimalPlaces);
+  return `${sign}${rounded}${abbreviations[index]}`;
+}
+var CustomizedCross5 = (props) => {
+  const { width, height } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var CustomTooltip4 = (props) => {
+  const { active, payload, label } = props;
+  if (active && payload && payload.length >= 1) {
+    const data = payload[0].payload;
+    const hasPrice = data.close !== null && data.close !== void 0;
+    if (!hasPrice) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Box,
+        {
+          intensity: 600,
+          p: 3,
+          r: "md",
+          className: "oui-flex oui-flex-col oui-gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-xs oui-text-base-contrast-54", children: "Price data unavailable" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2 oui-mt-1 oui-pt-2 oui-border-t oui-border-base-contrast-16", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Time:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: label })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Box,
+      {
+        intensity: 600,
+        p: 3,
+        r: "md",
+        className: "oui-flex oui-flex-col oui-gap-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Open:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: data.open?.toFixed(2) ?? "--" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "High:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: data.high?.toFixed(2) ?? "--" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Low:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: data.low?.toFixed(2) ?? "--" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Close:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: data.close.toFixed(2) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2 oui-mt-1 oui-pt-2 oui-border-t oui-border-base-contrast-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54", children: "Time:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-font-semibold", children: label })
+          ] })
+        ]
+      }
+    );
+  }
+  return null;
+};
+var calculateOptimalInterval4 = (dataLength, aggregationWindow, isMobile = false) => {
+  if (dataLength <= 12 && !isMobile) return 0;
+  let targetLabels;
+  if (dataLength > 500) {
+    targetLabels = 6;
+  } else if (dataLength > 200) {
+    targetLabels = 6;
+  } else if (dataLength > 100) {
+    targetLabels = 7;
+  } else if (dataLength > 50) {
+    targetLabels = 8;
+  } else {
+    targetLabels = 12;
+  }
+  if (isMobile) {
+    targetLabels = Math.ceil(targetLabels / 2);
+  }
+  const baseInterval = Math.ceil(dataLength / targetLabels);
+  if (aggregationWindow === "15m") {
+    if (baseInterval >= 96) return Math.ceil(baseInterval / 56) * 56;
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 16) * 16;
+    return Math.max(8, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1h") {
+    if (baseInterval >= 48) return Math.ceil(baseInterval / 28) * 28;
+    if (baseInterval >= 24) return Math.ceil(baseInterval / 12) * 12;
+    return Math.max(4, Math.ceil(baseInterval / 4) * 4);
+  }
+  if (aggregationWindow === "1d") {
+    if (baseInterval >= 14) return Math.ceil(baseInterval / 14) * 14;
+    if (baseInterval >= 3) return Math.ceil(baseInterval / 7) * 7;
+  }
+  return baseInterval;
+};
+function tickFormatter5(value) {
+  return value.toFixed(2);
+}
+var CombinedPriceChart = (props) => {
+  const {
+    data,
+    aggregationWindow = "1d",
+    isMobile = false,
+    invisible,
+    responsiveContainerProps,
+    className
+  } = props;
+  useColors();
+  const xAxisInterval = react.useMemo(
+    () => calculateOptimalInterval4(data.length, aggregationWindow, isMobile),
+    [data.length, aggregationWindow, isMobile]
+  );
+  const yAxisDomainAndTicks = react.useMemo(() => {
+    if (data.length === 0) return { domain: [0, 1], ticks: [0, 1] };
+    const closePrices = data.map((item) => item.close).filter((price) => price !== null && price !== void 0);
+    if (closePrices.length === 0) return { domain: [0, 1], ticks: [0, 1] };
+    const minPrice = Math.min(...closePrices);
+    const maxPrice = Math.max(...closePrices);
+    const range = maxPrice - minPrice;
+    if (range === 0)
+      return {
+        domain: [minPrice - 1, maxPrice + 1],
+        ticks: [minPrice - 1, maxPrice + 1]
+      };
+    const padding = range * 0.1;
+    const lower = minPrice - padding;
+    const upper = maxPrice + padding;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(range)));
+    let step = magnitude;
+    const rangeWidth = upper - lower;
+    for (const divisor of [1, 2, 2.5, 5]) {
+      const candidate = magnitude * divisor;
+      const tickCount = Math.ceil(rangeWidth / candidate);
+      if (tickCount >= 4 && tickCount <= 6) {
+        step = candidate;
+        break;
+      }
+    }
+    const roundedLower = Math.floor(lower / step) * step;
+    const roundedUpper = Math.ceil(upper / step) * step;
+    const ticks = [];
+    for (let tick = roundedLower; tick <= roundedUpper; tick += step) {
+      ticks.push(Number(tick.toFixed(10)));
+    }
+    return { domain: [roundedLower, roundedUpper], ticks };
+  }, [data]);
+  if (invisible || data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ChartEmptyState,
+      {
+        title: "No Price Data",
+        description: "No price data available for the selected period",
+        height: "100%",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      width: "100%",
+      height: "100%",
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data,
+          margin: { left: 45, top: 10, right: 50, bottom: 20 },
+          syncId: "symbol-performance",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross5, {}), content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                vertical: false,
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                domain: yAxisDomainAndTicks.domain,
+                ticks: yAxisDomainAndTicks.ticks,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: tickFormatter5,
+                width: 50
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: xAxisInterval,
+                minTickGap: 50,
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "natural",
+                dataKey: "close",
+                stroke: "#00B49E",
+                strokeWidth: 2,
+                dot: false,
+                isAnimationActive: false,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+var CustomTooltip5 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = orderlyI18n.useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label: label === todayStr.current ? t("chart.now") : label,
+        value: payload[0].value
+      }
+    );
+  }
+  return null;
+};
+var AssetLineChart = (props) => {
+  const { responsiveContainerProps } = props;
+  const colors = useColors(props.colors);
+  const colorId = react.useId();
+  const { isMobile } = orderlyUi.useScreen();
+  const chartComponent = isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.AreaChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            dataKey: "account_value",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: (value) => tickFormatter(value)
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#00B49E", offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#00B49E", offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              type: "natural",
+              dataKey: "account_value",
+              stroke: colors.profit,
+              strokeWidth: isMobile ? 1.5 : 2,
+              dot: false,
+              isAnimationActive: false,
+              fill: `url(#${colorId})`
+            }
+          )
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.LineChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            dataKey: "account_value",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip5, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            type: "natural",
+            dataKey: "account_value",
+            stroke: colors.profit,
+            strokeWidth: isMobile ? 1.5 : 2,
+            dot: false,
+            isAnimationActive: false
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var CustomTooltip6 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = orderlyI18n.useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label: label === todayStr.current ? t("chart.now") : label,
+        value: payload[0].value
+      }
+    );
+  }
+  return null;
+};
+var AssetAreaChart = (props) => {
+  const { responsiveContainerProps } = props;
+  const colors = useColors(props.colors);
+  const colorId = react.useId();
+  const { isMobile } = orderlyUi.useScreen();
+  const chartComponent = /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.AreaChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            dataKey: "account_value",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip6, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#00B49E", offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#00B49E", offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              type: "natural",
+              dataKey: "account_value",
+              stroke: colors.profit,
+              strokeWidth: isMobile ? 1.5 : 2,
+              dot: false,
+              isAnimationActive: false,
+              fill: `url(#${colorId})`
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var RoundedRectangle5 = (props) => {
+  const { fill, x, y, width, height, opacity } = props;
+  const absHeight = Math.abs(height);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      rx: 2,
+      x,
+      y: height > 0 ? y : y + height,
+      width,
+      height: absHeight,
+      stroke: "none",
+      fill,
+      opacity
+    }
+  );
+};
+var CustomizedCross6 = (props) => {
+  const { width, height, payload, stroke, fill } = props;
+  if (payload?.[0]?.value === 0) {
+    return null;
+  }
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Cross,
+      {
+        x: props.x + props.width / 2,
+        top: props.top,
+        height,
+        width: 1,
+        stroke: "rgba(255,255,255,0.16)",
+        strokeDasharray: "3 2",
+        fill: "none"
+      }
+    )
+  );
+};
+var CustomTooltip7 = (props) => {
+  const { active, payload, label, tooltip } = props;
+  if (payload?.[0]?.value === 0) {
+    return null;
+  }
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OrderlyChartTooltip,
+      {
+        label,
+        value: payload[0].value,
+        titleClassName: "oui-gap-4",
+        rm: tooltip?.rm,
+        dp: tooltip?.dp
+      }
+    );
+  }
+  return null;
+};
+var VolBarChart = (props) => {
+  const colors = useColors(
+    props.colors?.fill ? { profit: props.colors?.fill, loss: props.colors?.fill } : void 0
+  );
+  const isEmpty = props.data?.reduce((pre, cur) => pre + cur.volume, 0) === 0;
+  const maxVolume = props.data?.reduce(
+    (pre, cur) => pre > cur.volume ? pre : cur.volume,
+    0
+  );
+  const decimal = maxVolume <= 10 ? 2 : maxVolume <= 100 ? 1 : 0;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn(props.className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.BarChart,
+      {
+        data: props.data,
+        margin: { left: -0, top: 6, right: 0, bottom: 20 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross6, {}),
+              content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip7, { tooltip: props.tooltip })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.CartesianGrid,
+            {
+              vertical: false,
+              stroke: "#FFFFFF",
+              strokeOpacity: 0.08,
+              repeatCount: 6
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "#000" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "volume", shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle5, {}), minPointSize: 1, children: props.data.map((entry, index) => {
+            return (
+              // @ts-ignore
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Cell,
+                {
+                  fill: entry.volume > 0 ? colors.profit : colors.loss,
+                  opacity: entry.opacity
+                },
+                `cell-${index}`
+              )
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+              tickLine: false,
+              axisLine: false,
+              dataKey: "volume",
+              tickFormatter: (value, index) => {
+                if (isEmpty) return `${index * 100}`;
+                return numberToHumanStyle2(value, decimal);
+              },
+              width: 45
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: "date",
+              tickLine: false,
+              interval: props.data.length - 2,
+              height: 1,
+              tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+              stroke: "rgb(229, 231, 235)",
+              strokeOpacity: 0.2
+            }
+          )
+        ]
+      }
+    ) }) })
+  );
+};
+function numberToHumanStyle2(number, decimalPlaces = 0) {
+  const abbreviations = ["", "K", "M", "B", "T"];
+  let index = 0;
+  while (number >= 1e3 && index < abbreviations.length - 1) {
+    number /= 1e3;
+    index++;
+  }
+  const roundedNumber = toFixedWithoutRounding(number, decimalPlaces);
+  return `${roundedNumber}${abbreviations[index]}`;
+}
+function toFixedWithoutRounding(num, fix) {
+  const numStr = num.toString();
+  const decimalIndex = numStr.indexOf(".");
+  if (decimalIndex === -1 || fix === 0) {
+    return numStr.split(".")[0];
+  }
+  const cutoffIndex = decimalIndex + fix + 1;
+  return numStr.slice(0, cutoffIndex);
+}
+var CustomizedCross7 = (props) => {
+  const { width, height } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Cross,
+    {
+      x: props.x + props.width / 2,
+      top: props.top,
+      height,
+      width: 1,
+      stroke: "rgba(255,255,255,0.16)",
+      strokeDasharray: "3 2",
+      fill: "none"
+    }
+  );
+};
+var UnifiedChartTooltip = (props) => {
+  const { active, payload, label } = props;
+  if (active && payload && payload.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Box,
+      {
+        intensity: 600,
+        p: 3,
+        r: "md",
+        className: "oui-flex oui-flex-col oui-gap-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-xs oui-font-semibold", children: label }),
+          payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-xs oui-flex oui-gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: entry.color }, className: "oui-font-semibold", children: [
+              entry.name,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: entry.value?.toFixed(2) || 0 })
+          ] }, index))
+        ]
+      }
+    );
+  }
+  return null;
+};
+var UnifiedSymbolPerformanceChart = ({
+  volumeData,
+  feesData,
+  priceData,
+  aggregationWindow,
+  includeFees,
+  className
+}) => {
+  const mergedData = react.useMemo(() => {
+    const dataMap = /* @__PURE__ */ new Map();
+    volumeData.forEach((item) => {
+      dataMap.set(item.date, {
+        ...dataMap.get(item.date),
+        date: item.date,
+        volume: item.volume
+      });
+    });
+    feesData.forEach((item) => {
+      dataMap.set(item.date, {
+        ...dataMap.get(item.date),
+        date: item.date,
+        fees: item.fees
+      });
+    });
+    priceData.forEach((item) => {
+      dataMap.set(item.date, {
+        ...dataMap.get(item.date),
+        date: item.date,
+        open: item.open,
+        high: item.high,
+        low: item.low,
+        close: item.close
+      });
+    });
+    return Array.from(dataMap.values());
+  }, [volumeData, feesData, priceData]);
+  if (mergedData.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-center oui-text-base-contrast-54 oui-py-10", children: "No data available" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: orderlyUi.cn("oui-w-full oui-h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.ComposedChart,
+    {
+      data: mergedData,
+      margin: { left: 0, top: 10, right: 10, bottom: 20 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.CartesianGrid,
+          {
+            vertical: false,
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "date",
+            tickLine: false,
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            yAxisId: "left",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            width: 45,
+            label: {
+              value: "Volume / Fees",
+              angle: -90,
+              position: "insideLeft"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            yAxisId: "right",
+            orientation: "right",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            width: 50,
+            label: { value: "Price", angle: 90, position: "insideRight" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross7, {}),
+            content: /* @__PURE__ */ jsxRuntime.jsx(UnifiedChartTooltip, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            yAxisId: "left",
+            dataKey: "volume",
+            fill: "rgba(0, 180, 158, 0.6)",
+            name: "Volume"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            yAxisId: "left",
+            dataKey: "fees",
+            fill: "rgba(255, 107, 107, 0.6)",
+            name: "Fees"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            yAxisId: "right",
+            type: "natural",
+            dataKey: "close",
+            stroke: "#00B49E",
+            strokeWidth: 2,
+            dot: false,
+            isAnimationActive: false,
+            name: "Price",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+
+// src/tailwindcss/theme.ts
+var import_plugin = __toESM(require_plugin());
+var chartPlugin = () => (0, import_plugin.default)(function({ addComponents, addBase }) {
+  addComponents(
+    {
+      ".xAxis": {
+        ".recharts-cartesian-axis-tick:first-child text": {
+          "text-anchor": "start"
+        },
+        ".recharts-cartesian-axis-tick:last-child text": {
+          "text-anchor": "end"
+        }
+      }
+    },
+    {
+      respectPrefix: false
+    }
+  );
+});
+
+Object.defineProperty(exports, "Area", {
+  enumerable: true,
+  get: function () { return recharts.Area; }
+});
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () { return recharts.AreaChart; }
+});
+Object.defineProperty(exports, "Bar", {
+  enumerable: true,
+  get: function () { return recharts.Bar; }
+});
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function () { return recharts.BarChart; }
+});
+Object.defineProperty(exports, "Cell", {
+  enumerable: true,
+  get: function () { return recharts.Cell; }
+});
+Object.defineProperty(exports, "Line", {
+  enumerable: true,
+  get: function () { return recharts.Line; }
+});
+Object.defineProperty(exports, "LineChart", {
+  enumerable: true,
+  get: function () { return recharts.LineChart; }
+});
+exports.AssetAreaChart = AssetAreaChart;
+exports.AssetLineChart = AssetLineChart;
+exports.ChartEmptyState = ChartEmptyState;
+exports.CombinedFeesChart = CombinedFeesChart;
+exports.CombinedPnLChart = CombinedPnLChart;
+exports.CombinedPriceChart = CombinedPriceChart;
+exports.CombinedVolumeChart = CombinedVolumeChart;
+exports.PnLBarChart = PnLBarChart;
+exports.PnlAreaChart = PnlAreaChart;
+exports.PnlLineChart = PnlLineChart;
+exports.UnifiedSymbolPerformanceChart = UnifiedSymbolPerformanceChart;
+exports.VolBarChart = VolBarChart;
+exports.chartPlugin = chartPlugin;
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map