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