@orderly.network/chart 2.8.1 → 2.8.2

package/dist/index.mjs

@@ -1,2 +1,909 @@
-import {useMemo,useRef,useId}from'react';import {ResponsiveContainer,BarChart,Tooltip,CartesianGrid,ReferenceLine,Bar,Cell,YAxis,XAxis,LineChart,Line,AreaChart,Area,Cross}from'recharts';export{Area,AreaChart,Bar,BarChart,Cell,Line,LineChart}from'recharts';import {useTranslation}from'@orderly.network/i18n';import {cn,useScreen,Box,Flex,Text}from'@orderly.network/ui';import {numberToHumanStyle}from'@orderly.network/utils';import {jsx,jsxs,Fragment}from'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=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 jsxs(Box,{intensity:600,p:3,r:"md",children:[jsxs(Flex,{direction:"row",className:t.titleClassName,children:[o,jsx(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})]}),jsx(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=>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 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}=useTranslation(),x=i===0?48:y>0?y-10:n+a.offset;return jsx("g",{transform:`translate(${x},${e-6})`,children: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 jsx(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=useRef(new Date().toISOString().split("T")[0]),{t:i}=useTranslation();return r&&e&&e.length?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=useRef(0);return jsx(ResponsiveContainer,{className:cn(r&&"chart-invisible"),onResize:n=>{i.current=n;},...o,children:jsxs(BarChart,{data:e,margin:{left:-10,top:10,right:10,bottom:30},children:[!r&&jsx(Tooltip,{cursor:jsx(ht,{}),content:jsx(Ct,{})}),jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(ReferenceLine,{y:0,stroke:"rgba(0,0,0,0.04)"}),!r&&jsx(Bar,{dataKey:"pnl",shape:jsx(dt,{}),children:e.map((n,y)=>jsx(Cell,{fill:n.pnl>0?a.profit:a.loss},`cell-${y}`))}),jsx(YAxis,{tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickFormatter:n=>d(n),tickLine:false,axisLine:false,dataKey:"pnl"}),jsx(XAxis,{dataKey:"date",tickLine:false,interval:e.length-2,height:1,tick: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}=useTranslation();return jsx("g",{transform:`translate(${r},${e-6})`,children: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=useRef(new Date().toISOString().split("T")[0]),{t:i}=useTranslation();return r&&e&&e.length?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}=useScreen(),a=useMemo(()=>Bt(t.data),[t.data]),i=jsxs(LineChart,{data:a,margin:{top:20,right:10,left:-10,bottom:0},children:[jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsx(C,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsx(YAxis,{dataKey:"pnl",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:d}),!t.invisible&&jsx(Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsx(_t,{})}),!t.invisible&&jsx(Line,{type:"natural",dataKey:"pnl",stroke:e.primary,strokeWidth:o?1.5:2,dot:false,isAnimationActive:false})]});return jsx(ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:i})};var Ht=t=>{let{active:r,payload:e,label:o}=t,a=useRef(new Date().toISOString().split("T")[0]),{t:i}=useTranslation();return r&&e&&e.length?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}=useScreen(),a=useId(),i=useMemo(()=>qt(t.data),[t.data]),n=useMemo(()=>i.map(v=>v.pnl).sort((v,x)=>v-x)[0]||0,[i]),y=jsxs(AreaChart,{data:i,margin:{top:20,right:10,left:-10,bottom:0},children:[jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsx(C,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsx(YAxis,{dataKey:"pnl",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:d}),!t.invisible&&jsx(Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsx(Ht,{})}),!t.invisible&&jsxs(Fragment,{children:[jsx("defs",{children:jsxs("linearGradient",{id:a,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsx("stop",{stopColor:e.primary,offset:"0%",stopOpacity:.5}),jsx("stop",{stopColor:e.primary,offset:"100%",stopOpacity:0})]})}),jsx(Area,{type:"natural",dataKey:"pnl",stroke:e.primary,strokeWidth:o?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${a})`,baseValue:n||0})]})]});return jsx(ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:y})};var se=t=>{let{active:r,payload:e,label:o}=t,a=useRef(new Date().toISOString().split("T")[0]),{t:i}=useTranslation();return r&&e&&e.length?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=useId(),{isMobile:a}=useScreen(),i=a?jsxs(AreaChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsx(C,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsx(YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:n=>d(n)}),!t.invisible&&jsxs(Fragment,{children:[jsx("defs",{children:jsxs("linearGradient",{id:o,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsx("stop",{stopColor:"#00B49E",offset:"0%",stopOpacity:.5}),jsx("stop",{stopColor:"#00B49E",offset:"100%",stopOpacity:0})]})}),jsx(Area,{type:"natural",dataKey:"account_value",stroke:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${o})`})]})]}):jsxs(LineChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsx(C,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsx(YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:d}),!t.invisible&&jsx(Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsx(se,{})}),!t.invisible&&jsx(Line,{type:"natural",dataKey:"account_value",stroke:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false})]});return jsx(ResponsiveContainer,{className:t.invisible?"chart-invisible":void 0,...r,children:i})};var xe=t=>{let{active:r,payload:e,label:o}=t,a=useRef(new Date().toISOString().split("T")[0]),{t:i}=useTranslation();return r&&e&&e.length?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=useId(),{isMobile:a}=useScreen(),i=jsxs(AreaChart,{width:530,height:180,data:t.data,margin:{top:20,right:10,left:-20,bottom:-10},children:[jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.04}),jsx(XAxis,{dataKey:"date",interval:t.data.length-2,tick:jsx(C,{}),stroke:"#FFFFFF",strokeOpacity:.04}),jsx(YAxis,{dataKey:"account_value",tick:{fontSize:10,fill:"rgba(255,255,255,0.54)"},tickLine:false,axisLine:false,tickFormatter:d}),!t.invisible&&jsx(Tooltip,{cursor:{strokeDasharray:"3 2",strokeOpacity:.16},content:jsx(xe,{})}),!t.invisible&&jsxs(Fragment,{children:[jsx("defs",{children:jsxs("linearGradient",{id:o,x1:"0",y1:"0",x2:"0",y2:"1",children:[jsx("stop",{stopColor:"#00B49E",offset:"0%",stopOpacity:.5}),jsx("stop",{stopColor:"#00B49E",offset:"100%",stopOpacity:0})]})}),jsx(Area,{type:"natural",dataKey:"account_value",stroke:e.profit,strokeWidth:a?1.5:2,dot:false,isAnimationActive:false,fill:`url(#${o})`})]})]});return jsx(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 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:jsx(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?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 jsx(Box,{className:cn(t.className),children:jsx(ResponsiveContainer,{children:jsxs(BarChart,{data:t.data,margin:{left:-0,top:6,right:0,bottom:20},children:[jsx(Tooltip,{cursor:jsx(Ke,{}),content:jsx(ze,{tooltip:t.tooltip})}),jsx(CartesianGrid,{vertical:false,stroke:"#FFFFFF",strokeOpacity:.08,repeatCount:6}),jsx(ReferenceLine,{y:0,stroke:"#000"}),jsx(Bar,{dataKey:"volume",shape:jsx(Ve,{}),minPointSize:1,children:t.data.map((i,n)=>jsx(Cell,{fill:i.volume>0?r.profit:r.loss,opacity:i.opacity},`cell-${n}`))}),jsx(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}),jsx(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});});export{Fe as AssetAreaChart,le as AssetLineChart,gt as PnLBarChart,Qt as PnlAreaChart,It as PnlLineChart,Ne as VolBarChart,He as chartPlugin};//# sourceMappingURL=index.mjs.map
+import { useRef, useMemo, useId } from 'react';
+import { ResponsiveContainer, BarChart, Tooltip, CartesianGrid, ReferenceLine, Bar, Cell, YAxis, XAxis, LineChart, Line, AreaChart, Area, Cross } from 'recharts';
+export { Area, AreaChart, Bar, BarChart, Cell, Line, LineChart } from 'recharts';
+import { useTranslation } from '@orderly.network/i18n';
+import { cn, useScreen, Box, Flex, Text } from '@orderly.network/ui';
+import { numberToHumanStyle } from '@orderly.network/utils';
+import { jsx, jsxs, Fragment } from '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 = numberToHumanStyle(absValue, dp);
+  return value < 0 ? `-${formatted}` : formatted;
+};
+var OrderlyChartTooltip = (props) => {
+  const {
+    label,
+    value,
+    prefix,
+    unit = "USDC",
+    coloring = false,
+    dp,
+    rm
+  } = props;
+  return /* @__PURE__ */ jsxs(Box, { intensity: 600, p: 3, r: "md", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "row", className: props.titleClassName, children: [
+      prefix,
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(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 = 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__ */ 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 } = useTranslation();
+  const _x = index === 0 ? 48 : containerWidth > 0 ? containerWidth - 10 : width + payload.offset;
+  return /* @__PURE__ */ jsx("g", { transform: `translate(${_x},${y - 6})`, children: /* @__PURE__ */ 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__ */ jsx(
+    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 = useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ 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 = useRef(0);
+  return /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      className: cn(invisible && "chart-invisible"),
+      onResize: (width) => {
+        widthRef.current = width;
+      },
+      ...responsiveContainerProps,
+      children: /* @__PURE__ */ jsxs(
+        BarChart,
+        {
+          data,
+          margin: { left: -10, top: 10, right: 10, bottom: 30 },
+          children: [
+            !invisible && /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                cursor: /* @__PURE__ */ jsx(CustomizedCross, {}),
+                content: /* @__PURE__ */ jsx(CustomTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+            /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: "rgba(0,0,0,0.04)" }),
+            !invisible && /* @__PURE__ */ jsx(Bar, { dataKey: "pnl", shape: /* @__PURE__ */ jsx(RoundedRectangle, {}), children: data.map((entry, index) => {
+              return /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: entry.pnl > 0 ? colors.profit : colors.loss
+                },
+                `cell-${index}`
+              );
+            }) }),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+                tickFormatter: (value) => tickFormatter(value),
+                tickLine: false,
+                axisLine: false,
+                dataKey: "pnl"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: "date",
+                tickLine: false,
+                interval: data.length - 2,
+                height: 1,
+                tick: /* @__PURE__ */ jsx(XAxisLabel, { containerWidth: widthRef.current }),
+                stroke: "#FFFFFF",
+                strokeOpacity: 0.04
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var XAxisLabel2 = (props) => {
+  const { x, y, stroke, payload, index } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y - 6})`, children: /* @__PURE__ */ 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 = useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ 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 } = useScreen();
+  const data = useMemo(() => dataTransfer(props.data), [props.data]);
+  const chartComponent = /* @__PURE__ */ jsxs(
+    LineChart,
+    {
+      data,
+      margin: { top: 20, right: 10, left: -10, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            dataKey: "pnl",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsx(CustomTooltip2, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "natural",
+            dataKey: "pnl",
+            stroke: colors.primary,
+            strokeWidth: isMobile ? 1.5 : 2,
+            dot: false,
+            isAnimationActive: false
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var CustomTooltip3 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ 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 } = useScreen();
+  const colorId = useId();
+  const data = useMemo(() => dataTransfer2(props.data), [props.data]);
+  const baseValue = useMemo(
+    () => data.map((item) => item.pnl).sort((a, b) => a - b)[0] || 0,
+    [data]
+  );
+  const chartComponent = /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data,
+      margin: { top: 20, right: 10, left: -10, bottom: 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            dataKey: "pnl",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsx(CustomTooltip3, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: colors.primary, offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { stopColor: colors.primary, offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+    ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var CustomTooltip4 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ 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 = useId();
+  const { isMobile } = useScreen();
+  const chartComponent = isMobile ? /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#00B49E", offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { stopColor: "#00B49E", offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "natural",
+              dataKey: "account_value",
+              stroke: colors.profit,
+              strokeWidth: isMobile ? 1.5 : 2,
+              dot: false,
+              isAnimationActive: false,
+              fill: `url(#${colorId})`
+            }
+          )
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    LineChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            dataKey: "account_value",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsx(CustomTooltip4, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "natural",
+            dataKey: "account_value",
+            stroke: colors.profit,
+            strokeWidth: isMobile ? 1.5 : 2,
+            dot: false,
+            isAnimationActive: false
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      className: props.invisible ? "chart-invisible" : void 0,
+      ...responsiveContainerProps,
+      children: chartComponent
+    }
+  );
+};
+var CustomTooltip5 = (props) => {
+  const { active, payload, label } = props;
+  const todayStr = useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
+  const { t } = useTranslation();
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ 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 = useId();
+  const { isMobile } = useScreen();
+  const chartComponent = /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      width: 530,
+      height: 180,
+      data: props.data,
+      margin: { top: 20, right: 10, left: -20, bottom: -10 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "#FFFFFF", strokeOpacity: 0.04 }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "date",
+            interval: props.data.length - 2,
+            tick: /* @__PURE__ */ jsx(XAxisLabel2, {}),
+            stroke: "#FFFFFF",
+            strokeOpacity: 0.04
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            dataKey: "account_value",
+            tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
+            tickLine: false,
+            axisLine: false,
+            tickFormatter
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
+            content: /* @__PURE__ */ jsx(CustomTooltip5, {})
+          }
+        ),
+        !props.invisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#00B49E", offset: "0%", stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { stopColor: "#00B49E", offset: "100%", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "natural",
+              dataKey: "account_value",
+              stroke: colors.profit,
+              strokeWidth: isMobile ? 1.5 : 2,
+              dot: false,
+              isAnimationActive: false,
+              fill: `url(#${colorId})`
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    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__ */ 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__ */ jsx(
+      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__ */ 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__ */ jsx(Box, { className: cn(props.className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxs(
+      BarChart,
+      {
+        data: props.data,
+        margin: { left: -0, top: 6, right: 0, bottom: 20 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              cursor: /* @__PURE__ */ jsx(CustomizedCross2, {}),
+              content: /* @__PURE__ */ jsx(CustomTooltip6, { tooltip: props.tooltip })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: false,
+              stroke: "#FFFFFF",
+              strokeOpacity: 0.08,
+              repeatCount: 6
+            }
+          ),
+          /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: "#000" }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "volume", shape: /* @__PURE__ */ jsx(RoundedRectangle2, {}), minPointSize: 1, children: props.data.map((entry, index) => {
+            return (
+              // @ts-ignore
+              /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: entry.volume > 0 ? colors.profit : colors.loss,
+                  opacity: entry.opacity
+                },
+                `cell-${index}`
+              )
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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
+    }
+  );
+});
+
+export { AssetAreaChart, AssetLineChart, PnLBarChart, PnlAreaChart, PnlLineChart, VolBarChart, chartPlugin };
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map