@orderly.network/chart 2.10.1 → 2.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +327 -97
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +327 -98
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -212,7 +212,7 @@ var XAxisLabel = (props) => {
|
|
|
212
212
|
dy: 16,
|
|
213
213
|
textAnchor: index === 0 ? "start" : "end",
|
|
214
214
|
fontSize: 10,
|
|
215
|
-
fill: "rgba(
|
|
215
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)",
|
|
216
216
|
children: index === 0 ? payload.value : t("chart.now")
|
|
217
217
|
}
|
|
218
218
|
) });
|
|
@@ -226,7 +226,7 @@ var CustomizedCross = (props) => {
|
|
|
226
226
|
top: props.top,
|
|
227
227
|
height,
|
|
228
228
|
width: 1,
|
|
229
|
-
stroke: "rgba(
|
|
229
|
+
stroke: "rgba(var(--oui-color-base-foreground)/0.16)",
|
|
230
230
|
strokeDasharray: "3 2",
|
|
231
231
|
fill: "none"
|
|
232
232
|
}
|
|
@@ -273,8 +273,15 @@ var PnLBarChart = (props) => {
|
|
|
273
273
|
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {})
|
|
274
274
|
}
|
|
275
275
|
),
|
|
276
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
277
|
-
|
|
276
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
277
|
+
recharts.CartesianGrid,
|
|
278
|
+
{
|
|
279
|
+
vertical: false,
|
|
280
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
281
|
+
strokeOpacity: 0.04
|
|
282
|
+
}
|
|
283
|
+
),
|
|
284
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgba(var(--oui-color-line), 0.04)" }),
|
|
278
285
|
!invisible && /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "pnl", shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle, {}), children: data.map((entry, index) => {
|
|
279
286
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
280
287
|
recharts.Cell,
|
|
@@ -287,7 +294,10 @@ var PnLBarChart = (props) => {
|
|
|
287
294
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
288
295
|
recharts.YAxis,
|
|
289
296
|
{
|
|
290
|
-
tick: {
|
|
297
|
+
tick: {
|
|
298
|
+
fontSize: 10,
|
|
299
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
300
|
+
},
|
|
291
301
|
tickFormatter: (value) => tickFormatter(value),
|
|
292
302
|
tickLine: false,
|
|
293
303
|
axisLine: false,
|
|
@@ -302,7 +312,7 @@ var PnLBarChart = (props) => {
|
|
|
302
312
|
interval: data.length - 2,
|
|
303
313
|
height: 1,
|
|
304
314
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel, { containerWidth: widthRef.current }),
|
|
305
|
-
stroke: "
|
|
315
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
306
316
|
strokeOpacity: 0.04
|
|
307
317
|
}
|
|
308
318
|
)
|
|
@@ -323,7 +333,7 @@ var XAxisLabel2 = (props) => {
|
|
|
323
333
|
dy: 16,
|
|
324
334
|
textAnchor: "end",
|
|
325
335
|
fontSize: 10,
|
|
326
|
-
fill: "rgba(
|
|
336
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)",
|
|
327
337
|
children: index === 0 ? payload.value : t("chart.now")
|
|
328
338
|
}
|
|
329
339
|
) });
|
|
@@ -364,14 +374,21 @@ var PnlLineChart = (props) => {
|
|
|
364
374
|
data,
|
|
365
375
|
margin: { top: 20, right: 10, left: -10, bottom: 0 },
|
|
366
376
|
children: [
|
|
367
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
377
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
378
|
+
recharts.CartesianGrid,
|
|
379
|
+
{
|
|
380
|
+
vertical: false,
|
|
381
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
382
|
+
strokeOpacity: 0.04
|
|
383
|
+
}
|
|
384
|
+
),
|
|
368
385
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
369
386
|
recharts.XAxis,
|
|
370
387
|
{
|
|
371
388
|
dataKey: "date",
|
|
372
389
|
interval: props.data.length - 2,
|
|
373
390
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
374
|
-
stroke: "
|
|
391
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
375
392
|
strokeOpacity: 0.04
|
|
376
393
|
}
|
|
377
394
|
),
|
|
@@ -379,7 +396,10 @@ var PnlLineChart = (props) => {
|
|
|
379
396
|
recharts.YAxis,
|
|
380
397
|
{
|
|
381
398
|
dataKey: "pnl",
|
|
382
|
-
tick: {
|
|
399
|
+
tick: {
|
|
400
|
+
fontSize: 10,
|
|
401
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
402
|
+
},
|
|
383
403
|
tickLine: false,
|
|
384
404
|
axisLine: false,
|
|
385
405
|
tickFormatter
|
|
@@ -456,14 +476,21 @@ var PnlAreaChart = (props) => {
|
|
|
456
476
|
data,
|
|
457
477
|
margin: { top: 20, right: 10, left: -10, bottom: 0 },
|
|
458
478
|
children: [
|
|
459
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
479
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
480
|
+
recharts.CartesianGrid,
|
|
481
|
+
{
|
|
482
|
+
vertical: false,
|
|
483
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
484
|
+
strokeOpacity: 0.04
|
|
485
|
+
}
|
|
486
|
+
),
|
|
460
487
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
461
488
|
recharts.XAxis,
|
|
462
489
|
{
|
|
463
490
|
dataKey: "date",
|
|
464
491
|
interval: props.data.length - 2,
|
|
465
492
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
466
|
-
stroke: "
|
|
493
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
467
494
|
strokeOpacity: 0.04
|
|
468
495
|
}
|
|
469
496
|
),
|
|
@@ -471,7 +498,10 @@ var PnlAreaChart = (props) => {
|
|
|
471
498
|
recharts.YAxis,
|
|
472
499
|
{
|
|
473
500
|
dataKey: "pnl",
|
|
474
|
-
tick: {
|
|
501
|
+
tick: {
|
|
502
|
+
fontSize: 10,
|
|
503
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
504
|
+
},
|
|
475
505
|
tickLine: false,
|
|
476
506
|
axisLine: false,
|
|
477
507
|
tickFormatter
|
|
@@ -516,6 +546,116 @@ var PnlAreaChart = (props) => {
|
|
|
516
546
|
);
|
|
517
547
|
};
|
|
518
548
|
var CustomTooltip4 = (props) => {
|
|
549
|
+
const { active, payload, label } = props;
|
|
550
|
+
const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
|
|
551
|
+
const { t } = i18n.useTranslation();
|
|
552
|
+
if (active && payload && payload.length) {
|
|
553
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
554
|
+
OrderlyChartTooltip,
|
|
555
|
+
{
|
|
556
|
+
label: label === todayStr.current ? t("chart.now") : label,
|
|
557
|
+
value: payload[0].value,
|
|
558
|
+
coloring: false
|
|
559
|
+
}
|
|
560
|
+
);
|
|
561
|
+
}
|
|
562
|
+
return null;
|
|
563
|
+
};
|
|
564
|
+
var dataTransfer3 = (data) => {
|
|
565
|
+
const series = [];
|
|
566
|
+
data?.reduce((acc, item) => {
|
|
567
|
+
acc += item.perp_volume ?? 0;
|
|
568
|
+
series.push({ ...item, volume: acc });
|
|
569
|
+
return acc;
|
|
570
|
+
}, 0);
|
|
571
|
+
return series;
|
|
572
|
+
};
|
|
573
|
+
var VolumeAreaChart = (props) => {
|
|
574
|
+
const { responsiveContainerProps } = props;
|
|
575
|
+
const colors = useColors();
|
|
576
|
+
const { isMobile } = ui.useScreen();
|
|
577
|
+
const colorId = react.useId();
|
|
578
|
+
const data = react.useMemo(() => dataTransfer3(props.data), [props.data]);
|
|
579
|
+
const baseValue = react.useMemo(
|
|
580
|
+
() => data.map((item) => item.volume).sort((a, b) => a - b)[0] ?? 0,
|
|
581
|
+
[data]
|
|
582
|
+
);
|
|
583
|
+
const chartComponent = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
584
|
+
recharts.AreaChart,
|
|
585
|
+
{
|
|
586
|
+
data,
|
|
587
|
+
margin: { top: 20, right: 10, left: -10, bottom: 0 },
|
|
588
|
+
children: [
|
|
589
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
590
|
+
recharts.CartesianGrid,
|
|
591
|
+
{
|
|
592
|
+
vertical: false,
|
|
593
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
594
|
+
strokeOpacity: 0.04
|
|
595
|
+
}
|
|
596
|
+
),
|
|
597
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
598
|
+
recharts.XAxis,
|
|
599
|
+
{
|
|
600
|
+
dataKey: "date",
|
|
601
|
+
interval: props.data?.length ? props.data.length - 2 : 0,
|
|
602
|
+
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
603
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
604
|
+
strokeOpacity: 0.04
|
|
605
|
+
}
|
|
606
|
+
),
|
|
607
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
608
|
+
recharts.YAxis,
|
|
609
|
+
{
|
|
610
|
+
dataKey: "volume",
|
|
611
|
+
tick: {
|
|
612
|
+
fontSize: 10,
|
|
613
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
614
|
+
},
|
|
615
|
+
tickLine: false,
|
|
616
|
+
axisLine: false,
|
|
617
|
+
tickFormatter
|
|
618
|
+
}
|
|
619
|
+
),
|
|
620
|
+
!props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
|
|
621
|
+
recharts.Tooltip,
|
|
622
|
+
{
|
|
623
|
+
cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
|
|
624
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {})
|
|
625
|
+
}
|
|
626
|
+
),
|
|
627
|
+
!props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
628
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
629
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: colors.primary, offset: "0%", stopOpacity: 0.5 }),
|
|
630
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: colors.primary, offset: "100%", stopOpacity: 0 })
|
|
631
|
+
] }) }),
|
|
632
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
633
|
+
recharts.Area,
|
|
634
|
+
{
|
|
635
|
+
type: "monotone",
|
|
636
|
+
dataKey: "volume",
|
|
637
|
+
stroke: colors.primary,
|
|
638
|
+
strokeWidth: isMobile ? 1.5 : 2,
|
|
639
|
+
dot: false,
|
|
640
|
+
isAnimationActive: false,
|
|
641
|
+
fill: `url(#${colorId})`,
|
|
642
|
+
baseValue: baseValue || 0
|
|
643
|
+
}
|
|
644
|
+
)
|
|
645
|
+
] })
|
|
646
|
+
]
|
|
647
|
+
}
|
|
648
|
+
);
|
|
649
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
650
|
+
recharts.ResponsiveContainer,
|
|
651
|
+
{
|
|
652
|
+
className: props.invisible ? "chart-invisible" : void 0,
|
|
653
|
+
...responsiveContainerProps,
|
|
654
|
+
children: chartComponent
|
|
655
|
+
}
|
|
656
|
+
);
|
|
657
|
+
};
|
|
658
|
+
var CustomTooltip5 = (props) => {
|
|
519
659
|
const { active, payload, label } = props;
|
|
520
660
|
const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
|
|
521
661
|
const { t } = i18n.useTranslation();
|
|
@@ -543,14 +683,21 @@ var AssetLineChart = (props) => {
|
|
|
543
683
|
data: props.data,
|
|
544
684
|
margin: { top: 20, right: 10, left: -20, bottom: -10 },
|
|
545
685
|
children: [
|
|
546
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
686
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
687
|
+
recharts.CartesianGrid,
|
|
688
|
+
{
|
|
689
|
+
vertical: false,
|
|
690
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
691
|
+
strokeOpacity: 0.04
|
|
692
|
+
}
|
|
693
|
+
),
|
|
547
694
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
548
695
|
recharts.XAxis,
|
|
549
696
|
{
|
|
550
697
|
dataKey: "date",
|
|
551
698
|
interval: props.data.length - 2,
|
|
552
699
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
553
|
-
stroke: "
|
|
700
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
554
701
|
strokeOpacity: 0.04
|
|
555
702
|
}
|
|
556
703
|
),
|
|
@@ -558,7 +705,10 @@ var AssetLineChart = (props) => {
|
|
|
558
705
|
recharts.YAxis,
|
|
559
706
|
{
|
|
560
707
|
dataKey: "account_value",
|
|
561
|
-
tick: {
|
|
708
|
+
tick: {
|
|
709
|
+
fontSize: 10,
|
|
710
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
711
|
+
},
|
|
562
712
|
tickLine: false,
|
|
563
713
|
axisLine: false,
|
|
564
714
|
tickFormatter: (value) => tickFormatter(value)
|
|
@@ -566,8 +716,22 @@ var AssetLineChart = (props) => {
|
|
|
566
716
|
),
|
|
567
717
|
!props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
568
718
|
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
569
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
570
|
-
|
|
719
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
720
|
+
"stop",
|
|
721
|
+
{
|
|
722
|
+
stopColor: "rgb(var(--oui-color-success))",
|
|
723
|
+
offset: "0%",
|
|
724
|
+
stopOpacity: 0.5
|
|
725
|
+
}
|
|
726
|
+
),
|
|
727
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
728
|
+
"stop",
|
|
729
|
+
{
|
|
730
|
+
stopColor: "rgb(var(--oui-color-success))",
|
|
731
|
+
offset: "100%",
|
|
732
|
+
stopOpacity: 0
|
|
733
|
+
}
|
|
734
|
+
)
|
|
571
735
|
] }) }),
|
|
572
736
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
573
737
|
recharts.Area,
|
|
@@ -592,14 +756,21 @@ var AssetLineChart = (props) => {
|
|
|
592
756
|
data: props.data,
|
|
593
757
|
margin: { top: 20, right: 10, left: -20, bottom: -10 },
|
|
594
758
|
children: [
|
|
595
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
759
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
760
|
+
recharts.CartesianGrid,
|
|
761
|
+
{
|
|
762
|
+
vertical: false,
|
|
763
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
764
|
+
strokeOpacity: 0.04
|
|
765
|
+
}
|
|
766
|
+
),
|
|
596
767
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
597
768
|
recharts.XAxis,
|
|
598
769
|
{
|
|
599
770
|
dataKey: "date",
|
|
600
771
|
interval: props.data.length - 2,
|
|
601
772
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
602
|
-
stroke: "
|
|
773
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
603
774
|
strokeOpacity: 0.04
|
|
604
775
|
}
|
|
605
776
|
),
|
|
@@ -607,7 +778,10 @@ var AssetLineChart = (props) => {
|
|
|
607
778
|
recharts.YAxis,
|
|
608
779
|
{
|
|
609
780
|
dataKey: "account_value",
|
|
610
|
-
tick: {
|
|
781
|
+
tick: {
|
|
782
|
+
fontSize: 10,
|
|
783
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
784
|
+
},
|
|
611
785
|
tickLine: false,
|
|
612
786
|
axisLine: false,
|
|
613
787
|
tickFormatter
|
|
@@ -617,7 +791,7 @@ var AssetLineChart = (props) => {
|
|
|
617
791
|
recharts.Tooltip,
|
|
618
792
|
{
|
|
619
793
|
cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
|
|
620
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(
|
|
794
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip5, {})
|
|
621
795
|
}
|
|
622
796
|
),
|
|
623
797
|
!props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -643,7 +817,7 @@ var AssetLineChart = (props) => {
|
|
|
643
817
|
}
|
|
644
818
|
);
|
|
645
819
|
};
|
|
646
|
-
var
|
|
820
|
+
var CustomTooltip6 = (props) => {
|
|
647
821
|
const { active, payload, label } = props;
|
|
648
822
|
const todayStr = react.useRef((/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
|
|
649
823
|
const { t } = i18n.useTranslation();
|
|
@@ -671,14 +845,21 @@ var AssetAreaChart = (props) => {
|
|
|
671
845
|
data: props.data,
|
|
672
846
|
margin: { top: 20, right: 10, left: -20, bottom: -10 },
|
|
673
847
|
children: [
|
|
674
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
848
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
849
|
+
recharts.CartesianGrid,
|
|
850
|
+
{
|
|
851
|
+
vertical: false,
|
|
852
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
853
|
+
strokeOpacity: 0.04
|
|
854
|
+
}
|
|
855
|
+
),
|
|
675
856
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
676
857
|
recharts.XAxis,
|
|
677
858
|
{
|
|
678
859
|
dataKey: "date",
|
|
679
860
|
interval: props.data.length - 2,
|
|
680
861
|
tick: /* @__PURE__ */ jsxRuntime.jsx(XAxisLabel2, {}),
|
|
681
|
-
stroke: "
|
|
862
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
682
863
|
strokeOpacity: 0.04
|
|
683
864
|
}
|
|
684
865
|
),
|
|
@@ -686,7 +867,10 @@ var AssetAreaChart = (props) => {
|
|
|
686
867
|
recharts.YAxis,
|
|
687
868
|
{
|
|
688
869
|
dataKey: "account_value",
|
|
689
|
-
tick: {
|
|
870
|
+
tick: {
|
|
871
|
+
fontSize: 10,
|
|
872
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
873
|
+
},
|
|
690
874
|
tickLine: false,
|
|
691
875
|
axisLine: false,
|
|
692
876
|
tickFormatter
|
|
@@ -696,13 +880,27 @@ var AssetAreaChart = (props) => {
|
|
|
696
880
|
recharts.Tooltip,
|
|
697
881
|
{
|
|
698
882
|
cursor: { strokeDasharray: "3 2", strokeOpacity: 0.16 },
|
|
699
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(
|
|
883
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip6, {})
|
|
700
884
|
}
|
|
701
885
|
),
|
|
702
886
|
!props.invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
703
887
|
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
704
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
705
|
-
|
|
888
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
889
|
+
"stop",
|
|
890
|
+
{
|
|
891
|
+
stopColor: "rgb(var(--oui-color-success))",
|
|
892
|
+
offset: "0%",
|
|
893
|
+
stopOpacity: 0.5
|
|
894
|
+
}
|
|
895
|
+
),
|
|
896
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
897
|
+
"stop",
|
|
898
|
+
{
|
|
899
|
+
stopColor: "rgb(var(--oui-color-success))",
|
|
900
|
+
offset: "100%",
|
|
901
|
+
stopOpacity: 0
|
|
902
|
+
}
|
|
903
|
+
)
|
|
706
904
|
] }) }),
|
|
707
905
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
708
906
|
recharts.Area,
|
|
@@ -746,11 +944,25 @@ var RoundedRectangle2 = (props) => {
|
|
|
746
944
|
}
|
|
747
945
|
);
|
|
748
946
|
};
|
|
947
|
+
var XAxisLabel3 = (props) => {
|
|
948
|
+
const { x, y, payload, index, width, containerWidth } = props;
|
|
949
|
+
const { t } = i18n.useTranslation();
|
|
950
|
+
const _x = index === 0 ? 48 : containerWidth > 0 ? containerWidth - 10 : width + payload.offset;
|
|
951
|
+
return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${_x},${y - 6})`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
952
|
+
"text",
|
|
953
|
+
{
|
|
954
|
+
x: 0,
|
|
955
|
+
y: 0,
|
|
956
|
+
dy: 16,
|
|
957
|
+
textAnchor: index === 0 ? "start" : "end",
|
|
958
|
+
fontSize: 10,
|
|
959
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)",
|
|
960
|
+
children: index === 0 ? payload.value : t("chart.now")
|
|
961
|
+
}
|
|
962
|
+
) });
|
|
963
|
+
};
|
|
749
964
|
var CustomizedCross2 = (props) => {
|
|
750
965
|
const { width, height, payload, stroke, fill } = props;
|
|
751
|
-
if (payload?.[0]?.value === 0) {
|
|
752
|
-
return null;
|
|
753
|
-
}
|
|
754
966
|
return (
|
|
755
967
|
// @ts-ignore
|
|
756
968
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -760,18 +972,15 @@ var CustomizedCross2 = (props) => {
|
|
|
760
972
|
top: props.top,
|
|
761
973
|
height,
|
|
762
974
|
width: 1,
|
|
763
|
-
stroke: "rgba(
|
|
975
|
+
stroke: "rgba(var(--oui-color-base-foreground)/0.16)",
|
|
764
976
|
strokeDasharray: "3 2",
|
|
765
977
|
fill: "none"
|
|
766
978
|
}
|
|
767
979
|
)
|
|
768
980
|
);
|
|
769
981
|
};
|
|
770
|
-
var
|
|
982
|
+
var CustomTooltip7 = (props) => {
|
|
771
983
|
const { active, payload, label, tooltip } = props;
|
|
772
|
-
if (payload?.[0]?.value === 0) {
|
|
773
|
-
return null;
|
|
774
|
-
}
|
|
775
984
|
if (active && payload && payload.length) {
|
|
776
985
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
777
986
|
OrderlyChartTooltip,
|
|
@@ -790,6 +999,7 @@ var VolBarChart = (props) => {
|
|
|
790
999
|
const colors = useColors(
|
|
791
1000
|
props.colors?.fill ? { profit: props.colors?.fill, loss: props.colors?.fill } : void 0
|
|
792
1001
|
);
|
|
1002
|
+
const widthRef = react.useRef(null);
|
|
793
1003
|
const isEmpty = props.data?.reduce((pre, cur) => pre + cur.volume, 0) === 0;
|
|
794
1004
|
const maxVolume = props.data?.reduce(
|
|
795
1005
|
(pre, cur) => pre > cur.volume ? pre : cur.volume,
|
|
@@ -798,71 +1008,90 @@ var VolBarChart = (props) => {
|
|
|
798
1008
|
const decimal = maxVolume <= 10 ? 2 : maxVolume <= 100 ? 1 : 0;
|
|
799
1009
|
return (
|
|
800
1010
|
// @ts-ignore
|
|
801
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(props.className), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
802
|
-
recharts.
|
|
1011
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(props.className), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1012
|
+
recharts.ResponsiveContainer,
|
|
803
1013
|
{
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
),
|
|
823
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "#000" }),
|
|
824
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "volume", shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle2, {}), minPointSize: 1, children: props.data.map((entry, index) => {
|
|
825
|
-
return (
|
|
826
|
-
// @ts-ignore
|
|
1014
|
+
className: ui.cn(props.invisible && "chart-invisible"),
|
|
1015
|
+
onResize: (width) => {
|
|
1016
|
+
widthRef.current = width;
|
|
1017
|
+
},
|
|
1018
|
+
...props.responsiveContainerProps,
|
|
1019
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1020
|
+
recharts.BarChart,
|
|
1021
|
+
{
|
|
1022
|
+
data: props.data,
|
|
1023
|
+
margin: { left: -10, top: 10, right: 10, bottom: 30 },
|
|
1024
|
+
children: [
|
|
1025
|
+
!props.invisible && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1026
|
+
recharts.Tooltip,
|
|
1027
|
+
{
|
|
1028
|
+
cursor: /* @__PURE__ */ jsxRuntime.jsx(CustomizedCross2, {}),
|
|
1029
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip7, { tooltip: props.tooltip })
|
|
1030
|
+
}
|
|
1031
|
+
),
|
|
827
1032
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
828
|
-
recharts.
|
|
1033
|
+
recharts.CartesianGrid,
|
|
829
1034
|
{
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
1035
|
+
vertical: false,
|
|
1036
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
1037
|
+
strokeOpacity: 0.08,
|
|
1038
|
+
repeatCount: 6
|
|
1039
|
+
}
|
|
1040
|
+
),
|
|
1041
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: "rgb(var(--oui-color-base-10))" }),
|
|
1042
|
+
!props.invisible && /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "volume", shape: /* @__PURE__ */ jsxRuntime.jsx(RoundedRectangle2, {}), children: props.data.map((entry, index) => {
|
|
1043
|
+
return (
|
|
1044
|
+
// @ts-ignore
|
|
1045
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1046
|
+
recharts.Cell,
|
|
1047
|
+
{
|
|
1048
|
+
fill: entry.volume > 0 ? colors.profit : colors.loss,
|
|
1049
|
+
opacity: entry.opacity
|
|
1050
|
+
},
|
|
1051
|
+
`cell-${index}`
|
|
1052
|
+
)
|
|
1053
|
+
);
|
|
1054
|
+
}) }),
|
|
1055
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1056
|
+
recharts.YAxis,
|
|
1057
|
+
{
|
|
1058
|
+
tick: {
|
|
1059
|
+
fontSize: 10,
|
|
1060
|
+
fill: "rgba(var(--oui-color-base-foreground)/0.54)"
|
|
1061
|
+
},
|
|
1062
|
+
tickLine: false,
|
|
1063
|
+
axisLine: false,
|
|
1064
|
+
dataKey: "volume",
|
|
1065
|
+
tickFormatter: (value, index) => {
|
|
1066
|
+
if (isEmpty) return `${index * 100}`;
|
|
1067
|
+
return numberToHumanStyle2(value, decimal);
|
|
1068
|
+
},
|
|
1069
|
+
width: 45
|
|
1070
|
+
}
|
|
1071
|
+
),
|
|
1072
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1073
|
+
recharts.XAxis,
|
|
1074
|
+
{
|
|
1075
|
+
dataKey: "date",
|
|
1076
|
+
tickLine: false,
|
|
1077
|
+
interval: Math.max(0, (props.data?.length ?? 0) - 2),
|
|
1078
|
+
height: 1,
|
|
1079
|
+
tick: (tickProps) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1080
|
+
XAxisLabel3,
|
|
1081
|
+
{
|
|
1082
|
+
...tickProps,
|
|
1083
|
+
containerWidth: widthRef.current ?? tickProps.width
|
|
1084
|
+
}
|
|
1085
|
+
),
|
|
1086
|
+
stroke: "rgb(var(--oui-color-line))",
|
|
1087
|
+
strokeOpacity: 0.04
|
|
1088
|
+
}
|
|
834
1089
|
)
|
|
835
|
-
|
|
836
|
-
}
|
|
837
|
-
|
|
838
|
-
recharts.YAxis,
|
|
839
|
-
{
|
|
840
|
-
tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
|
|
841
|
-
tickLine: false,
|
|
842
|
-
axisLine: false,
|
|
843
|
-
dataKey: "volume",
|
|
844
|
-
tickFormatter: (value, index) => {
|
|
845
|
-
if (isEmpty) return `${index * 100}`;
|
|
846
|
-
return numberToHumanStyle2(value, decimal);
|
|
847
|
-
},
|
|
848
|
-
width: 45
|
|
849
|
-
}
|
|
850
|
-
),
|
|
851
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
852
|
-
recharts.XAxis,
|
|
853
|
-
{
|
|
854
|
-
dataKey: "date",
|
|
855
|
-
tickLine: false,
|
|
856
|
-
interval: props.data.length - 2,
|
|
857
|
-
height: 1,
|
|
858
|
-
tick: { fontSize: 10, fill: "rgba(255,255,255,0.54)" },
|
|
859
|
-
stroke: "rgb(229, 231, 235)",
|
|
860
|
-
strokeOpacity: 0.2
|
|
861
|
-
}
|
|
862
|
-
)
|
|
863
|
-
]
|
|
1090
|
+
]
|
|
1091
|
+
}
|
|
1092
|
+
)
|
|
864
1093
|
}
|
|
865
|
-
) })
|
|
1094
|
+
) })
|
|
866
1095
|
);
|
|
867
1096
|
};
|
|
868
1097
|
function numberToHumanStyle2(number, decimalPlaces = 0) {
|
|
@@ -939,6 +1168,7 @@ exports.PnLBarChart = PnLBarChart;
|
|
|
939
1168
|
exports.PnlAreaChart = PnlAreaChart;
|
|
940
1169
|
exports.PnlLineChart = PnlLineChart;
|
|
941
1170
|
exports.VolBarChart = VolBarChart;
|
|
1171
|
+
exports.VolumeAreaChart = VolumeAreaChart;
|
|
942
1172
|
exports.chartPlugin = chartPlugin;
|
|
943
1173
|
//# sourceMappingURL=index.js.map
|
|
944
1174
|
//# sourceMappingURL=index.js.map
|