@orderly.network/chart 2.8.1 → 2.8.2

package/dist/index.js

@@ -1,2 +1,944 @@
-'use strict';var react=require('react'),recharts=require('recharts'),i18n=require('@orderly.network/i18n'),ui=require('@orderly.network/ui'),utils=require('@orderly.network/utils'),jsxRuntime=require('react/jsx-runtime');var Y=Object.create;var L=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var F=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports);var J=(t,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of q(r))!U.call(t,a)&&a!==e&&L(t,a,{get:()=>r[a],enumerable:!(o=H(r,a))||o.enumerable});return t};var Z=(t,r,e)=>(e=t!=null?Y(Q(t)):{},J(!t||!t.__esModule?L(e,"default",{value:t,enumerable:true}):e,t));var $=F(R=>{Object.defineProperty(R,"__esModule",{value:true});Object.defineProperty(R,"default",{enumerable:true,get:function(){return Xe}});function M(t,r){return {handler:t,config:r}}M.withOptions=function(t,r=()=>({})){let e=function(o){return {__options:o,handler:t(o),config:r(o)}};return e.__isOptionsFunction=true,e.__pluginFunction=t,e.__configFunction=r,e};var Xe=M;});var G=F(A=>{Object.defineProperty(A,"__esModule",{value:true});Object.defineProperty(A,"default",{enumerable:true,get:function(){return Ye}});var We=Ee($());function Ee(t){return t&&t.__esModule?t:{default:t}}var Ye=We.default;});var W=F((ho,X)=>{var T=G();X.exports=(T.__esModule?T:{default:T}).default;});var d=t=>{let r=Math.abs(t),e=r===0?0:r<=10?2:r<=100?1:0,o=utils.numberToHumanStyle(r,e);return t<0?`-${o}`:o};var p=t=>{let{label:r,value:e,prefix:o,unit:a="USDC",coloring:i=false,dp:n,rm:y}=t;return jsxRuntime.jsxs(ui.Box,{intensity:600,p:3,r:"md",children:[jsxRuntime.jsxs(ui.Flex,{direction:"row",className:t.titleClassName,children:[o,jsxRuntime.jsx(ui.Text.numeral,{unit:a,as:"div",size:"sm",coloring:i,showIdentifier:i,unitClassName:"oui-text-base-contrast-54 oui-ml-1",weight:"semibold",rm:y,dp:n,children:e})]}),jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:54,weight:"semibold",children:r})]})};var _=()=>{let t=document.documentElement,r=getComputedStyle(t);return {primary:h(r.getPropertyValue("--oui-color-primary")),primaryLight:h(r.getPropertyValue("--oui-color-primary-light")),secondary:h(r.getPropertyValue("--oui-color-secondary")),success:h(r.getPropertyValue("--oui-color-success")),warning:h(r.getPropertyValue("--oui-color-warning")),danger:h(r.getPropertyValue("--oui-color-danger")),info:h(r.getPropertyValue("--oui-color-info")),loss:h(r.getPropertyValue("--oui-color-trading-loss")),profit:h(r.getPropertyValue("--oui-color-trading-profit"))}},h=t=>`rgb(${t.split(" ").join(",")})`;var m=t=>react.useMemo(()=>{let e=_();return {profit:t?.profit||e.profit,loss:t?.loss||e.loss,primary:e.primary,primaryLight:e.primaryLight}},[t]);var dt=t=>{let{fill:r,x:e,y:o,width:a,height:i}=t,n=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:e,y:i>0?o:o+i,width:a,height:n,stroke:"none",fill:r})},yt=t=>{let{x:r,y:e,stroke:o,payload:a,index:i,width:n,containerWidth:y}=t,{t:v}=i18n.useTranslation(),x=i===0?48:y>0?y-10:n+a.offset;return jsxRuntime.jsx("g",{transform:`translate(${x},${e-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?a.value:v("chart.now")})})},ht=t=>{let{width:r,height:e,stroke:o,fill:a}=t;return jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:e,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},Ct=t=>{let{active:r,payload:e,label:o}=t,a=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=i18n.useTranslation();return r&&e&&e.length?jsxRuntime.jsx(p,{label:o===a.current?i("chart.now"):o,value:e[0].value,coloring:true}):null},gt=t=>{let{invisible:r,data:e,responsiveContainerProps:o}=t,a=m(t.colors),i=react.useRef(0);return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:ui.cn(r&&"chart-invisible"),onResize:n=>{i.current=n;},...o,children:jsxRuntime.jsxs(recharts.BarChart,{data:e,margin:{left:-10,top:10,right:10,bottom:30},children:[!r&&jsxRuntime.jsx(recharts.Tooltip,{cursor:jsxRuntime.jsx(ht,{}),content:jsxRuntime.jsx(Ct,{})}),jsxRuntime.jsx(recharts.CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsxRuntime.jsx(recharts.ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),!r&&jsxRuntime.jsx(recharts.Bar,{dataKey:"pnl",shape:jsxRuntime.jsx(dt,{}),children:e.map((n,y)=>jsxRuntime.jsx(recharts.Cell,{fill:n.pnl>0?a.profit:a.loss},`cell-${y}`))}),jsxRuntime.jsx(recharts.YAxis,{tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickFormatter:n=>d(n),tickLine:false,axisLine:false,dataKey:"pnl"}),jsxRuntime.jsx(recharts.XAxis,{dataKey:"date",tickLine:false,interval:e.length-2,height:1,tick:jsxRuntime.jsx(yt,{containerWidth:i.current}),stroke:"#FFFFFF",strokeOpacity:.04})]})})};var C=t=>{let{x:r,y:e,stroke:o,payload:a,index:i}=t,{t:n}=i18n.useTranslation();return jsxRuntime.jsx("g",{transform:`translate(${r},${e-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?a.value:n("chart.now")})})};var _t=t=>{let{active:r,payload:e,label:o}=t,a=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=i18n.useTranslation();return r&&e&&e.length?jsxRuntime.jsx(p,{label:o===a.current?i("chart.now"):o,value:e[0].value,coloring:true}):null},Bt=t=>{let r=[];return t?.reduce((e,o)=>(e+=o.pnl,r.push({...o,pnl:e,_pnl:o.pnl}),e),0),r},It=t=>{let{responsiveContainerProps:r}=t,e=m(t.colors),{isMobile:o}=ui.useScreen(),a=react.useMemo(()=>Bt(t.data),[t.data]),i=jsxRuntime.jsxs(recharts.LineChart,{data:a,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(C,{}),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:d}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(_t,{})}),!t.invisible&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"pnl",stroke:e.primary,strokeWidth:o?1.5:2,dot:false,isAnimationActive:false})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:i})};var Ht=t=>{let{active:r,payload:e,label:o}=t,a=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=i18n.useTranslation();return r&&e&&e.length?jsxRuntime.jsx(p,{label:o===a.current?i("chart.now"):o,value:e[0].value,coloring:true}):null},qt=t=>{let r=[];return t?.reduce((e,o)=>(e+=o.pnl,r.push({...o,pnl:e,_pnl:o.pnl}),e),0),r},Qt=t=>{let{responsiveContainerProps:r}=t,e=m(t.colors),{isMobile:o}=ui.useScreen(),a=react.useId(),i=react.useMemo(()=>qt(t.data),[t.data]),n=react.useMemo(()=>i.map(v=>v.pnl).sort((v,x)=>v-x)[0]||0,[i]),y=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(C,{}),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:d}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(Ht,{})}),!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:e.primary,offset:"0%",stopOpacity:.5}),jsxRuntime.jsx("stop",{stopColor:e.primary,offset:"100%",stopOpacity:0})]})}),jsxRuntime.jsx(recharts.Area,{type:"natural",dataKey:"pnl",stroke:e.primary,strokeWidth:o?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${a})`,baseValue:n||0})]})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:y})};var se=t=>{let{active:r,payload:e,label:o}=t,a=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=i18n.useTranslation();return r&&e&&e.length?jsxRuntime.jsx(p,{label:o===a.current?i("chart.now"):o,value:e[0].value}):null},le=t=>{let{responsiveContainerProps:r}=t,e=m(t.colors),o=react.useId(),{isMobile:a}=ui.useScreen(),i=a?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(C,{}),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=>d(n)}),!t.invisible&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:o,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:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${o})`})]})]}):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(C,{}),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:d}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(se,{})}),!t.invisible&&jsxRuntime.jsx(recharts.Line,{type:"natural",dataKey:"account_value",stroke:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:i})};var xe=t=>{let{active:r,payload:e,label:o}=t,a=react.useRef(new Date().toISOString().split("T")[0]),{t:i}=i18n.useTranslation();return r&&e&&e.length?jsxRuntime.jsx(p,{label:o===a.current?i("chart.now"):o,value:e[0].value}):null},Fe=t=>{let{responsiveContainerProps:r}=t,e=m(t.colors),o=react.useId(),{isMobile:a}=ui.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(C,{}),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:d}),!t.invisible&&jsxRuntime.jsx(recharts.Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsxRuntime.jsx(xe,{})}),!t.invisible&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:o,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:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${o})`})]})]});return jsxRuntime.jsx(recharts.ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:i})};var Ve=t=>{let{fill:r,x:e,y:o,width:a,height:i,opacity:n}=t,y=Math.abs(i);return jsxRuntime.jsx("rect",{rx:2,x:e,y:i>0?o:o+i,width:a,height:y,stroke:"none",fill:r,opacity:n})},Ke=t=>{let{width:r,height:e,payload:o,stroke:a,fill:i}=t;return o?.[0]?.value===0?null:jsxRuntime.jsx(recharts.Cross,{x:t.x+t.width/2,top:t.top,height:e,width:1,stroke:"rgba(255,255,255,0.16)",strokeDasharray:"3 2",fill:"none"})},ze=t=>{let{active:r,payload:e,label:o,tooltip:a}=t;return e?.[0]?.value===0?null:r&&e&&e.length?jsxRuntime.jsx(p,{label:o,value:e[0].value,titleClassName:"oui-gap-4",rm:a?.rm,dp:a?.dp}):null},Ne=t=>{let r=m(t.colors?.fill?{profit:t.colors?.fill,loss:t.colors?.fill}:void 0),e=t.data?.reduce((i,n)=>i+n.volume,0)===0,o=t.data?.reduce((i,n)=>i>n.volume?i:n.volume,0),a=o<=10?2:o<=100?1:0;return jsxRuntime.jsx(ui.Box,{className:ui.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(Ke,{}),content:jsxRuntime.jsx(ze,{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(Ve,{}),minPointSize:1,children:t.data.map((i,n)=>jsxRuntime.jsx(recharts.Cell,{fill:i.volume>0?r.profit:r.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)=>e?`${n*100}`:Me(i,a),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 Me(t,r=0){let e=["","K","M","B","T"],o=0;for(;t>=1e3&&o<e.length-1;)t/=1e3,o++;return `${$e(t,r)}${e[o]}`}function $e(t,r){let e=t.toString(),o=e.indexOf(".");if(o===-1||r===0)return e.split(".")[0];let a=o+r+1;return e.slice(0,a)}var E=Z(W()),He=()=>(0, E.default)(function({addComponents:t,addBase:r}){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=Fe;exports.AssetLineChart=le;exports.PnLBarChart=gt;exports.PnlAreaChart=Qt;exports.PnlLineChart=It;exports.VolBarChart=Ne;exports.chartPlugin=He;//# sourceMappingURL=index.js.map
+'use strict';
+
+var react = require('react');
+var recharts = require('recharts');
+var i18n = require('@orderly.network/i18n');
+var ui = require('@orderly.network/ui');
+var utils = require('@orderly.network/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 = utils.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(ui.Box, { intensity: 600, p: 3, r: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", className: props.titleClassName, children: [
+      prefix,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.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(ui.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 } = i18n.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 } = i18n.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: ui.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 } = i18n.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 } = i18n.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 } = ui.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 } = i18n.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 } = ui.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 CustomTooltip4 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = i18n.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 } = ui.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(CustomTooltip4, {})
+          }
+        ),
+        !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 CustomTooltip5 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = i18n.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 } = ui.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(CustomTooltip5, {})
+          }
+        ),
+        !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 RoundedRectangle2 = (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 CustomizedCross2 = (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 CustomTooltip6 = (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(ui.Box, { className: ui.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(CustomizedCross2, {}),
+              content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip6, { 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(RoundedRectangle2, {}), 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);
+}
+
+// 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.PnLBarChart = PnLBarChart;
+exports.PnlAreaChart = PnlAreaChart;
+exports.PnlLineChart = PnlLineChart;
+exports.VolBarChart = VolBarChart;
+exports.chartPlugin = chartPlugin;
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map