rbro-tat-uds 2.0.0 → 2.0.1
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/build/cjs/components/UnitlinkGraph/UnitlinkGraph.cjs +76 -56
- package/build/cjs/index.cjs +76 -56
- package/build/esm/components/UnitlinkGraph/UnitlinkGraph.js +77 -57
- package/build/esm/index.js +76 -56
- package/build/types/components/UnitlinkGraph/UnitlinkGraph.d.ts +6 -0
- package/package.json +10 -2
|
@@ -61,6 +61,7 @@ const UnitLinkGraphStyled = styled.svg`
|
|
|
61
61
|
const UnitLinkGraph = ({
|
|
62
62
|
height = 0,
|
|
63
63
|
barMainConfiguration = {
|
|
64
|
+
followSlider: false,
|
|
64
65
|
header: "Placeholder",
|
|
65
66
|
color_primary: utils.colors.purple_600,
|
|
66
67
|
color_secondary: utils.colors.purple_50,
|
|
@@ -73,9 +74,16 @@ const UnitLinkGraph = ({
|
|
|
73
74
|
}
|
|
74
75
|
]
|
|
75
76
|
},
|
|
77
|
+
setBarMainActionsActive = () => {
|
|
78
|
+
},
|
|
79
|
+
barMainActionsActive = 0,
|
|
76
80
|
barSecondaryConfiguration,
|
|
81
|
+
setBarSecondaryActionsActive = () => {
|
|
82
|
+
},
|
|
83
|
+
barSecondaryActionsActive = 0,
|
|
77
84
|
initialSliderValue = 0,
|
|
78
85
|
maximum_ani = 7,
|
|
86
|
+
limit_ani = 7,
|
|
79
87
|
timeline_texts = {
|
|
80
88
|
left: "Placeholder"
|
|
81
89
|
},
|
|
@@ -90,6 +98,13 @@ const UnitLinkGraph = ({
|
|
|
90
98
|
const [mainWidth, setMainWidth] = React.useState(0);
|
|
91
99
|
const [mainStart, setMainStart] = React.useState(0);
|
|
92
100
|
const [sliderValue, setSliderValue] = React.useState(initialSliderValue);
|
|
101
|
+
const place_at_ani = React.useMemo(() => {
|
|
102
|
+
if (barMainConfiguration.followSlider) {
|
|
103
|
+
return sliderValue;
|
|
104
|
+
} else {
|
|
105
|
+
return barMainConfiguration.place_at_ani;
|
|
106
|
+
}
|
|
107
|
+
}, [barMainConfiguration, sliderValue]);
|
|
93
108
|
const configurations = React.useMemo(() => {
|
|
94
109
|
return {
|
|
95
110
|
mainGap: 16,
|
|
@@ -332,7 +347,7 @@ const UnitLinkGraph = ({
|
|
|
332
347
|
({ mainHeight }) => {
|
|
333
348
|
const MANY_SEGMENTS_PER_YEAR = 2;
|
|
334
349
|
const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
|
|
335
|
-
const segments_render =
|
|
350
|
+
const segments_render = place_at_ani * 2;
|
|
336
351
|
const segments_padding_y = 4.5;
|
|
337
352
|
const segments_y = floorToHalf(
|
|
338
353
|
totalHeight - mainHeight + segments_padding_y + configurations.mainGap
|
|
@@ -370,13 +385,7 @@ const UnitLinkGraph = ({
|
|
|
370
385
|
}
|
|
371
386
|
};
|
|
372
387
|
},
|
|
373
|
-
[
|
|
374
|
-
mainWidth,
|
|
375
|
-
mainStart,
|
|
376
|
-
configurations,
|
|
377
|
-
totalHeight,
|
|
378
|
-
barMainConfiguration.place_at_ani
|
|
379
|
-
]
|
|
388
|
+
[mainWidth, mainStart, configurations, totalHeight, place_at_ani]
|
|
380
389
|
);
|
|
381
390
|
const computeAction = React.useCallback(
|
|
382
391
|
({
|
|
@@ -430,7 +439,7 @@ const UnitLinkGraph = ({
|
|
|
430
439
|
mainHeightGraph,
|
|
431
440
|
config: barMainConfiguration,
|
|
432
441
|
getPointsPositionIndicatorX,
|
|
433
|
-
place_at:
|
|
442
|
+
place_at: place_at_ani,
|
|
434
443
|
main: true
|
|
435
444
|
});
|
|
436
445
|
let bar_secondary;
|
|
@@ -493,62 +502,68 @@ const UnitLinkGraph = ({
|
|
|
493
502
|
},
|
|
494
503
|
...rest,
|
|
495
504
|
children: [
|
|
496
|
-
/* @__PURE__ */ jsxRuntime.
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
505
|
+
place_at_ani > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
506
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
507
|
+
"line",
|
|
508
|
+
{
|
|
509
|
+
x1: graph.main.area.part_1.x1,
|
|
510
|
+
x2: graph.main.area.part_1.x2,
|
|
511
|
+
y1: graph.main.area.part_1.y1,
|
|
512
|
+
y2: graph.main.area.part_1.y2,
|
|
513
|
+
strokeWidth: graph.main.area.part_1.strokeWidth,
|
|
514
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
515
|
+
}
|
|
516
|
+
),
|
|
517
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
518
|
+
"line",
|
|
519
|
+
{
|
|
520
|
+
x1: graph.main.area.part_2.x1,
|
|
521
|
+
x2: graph.main.area.part_2.x2,
|
|
522
|
+
y1: graph.main.area.part_2.y1,
|
|
523
|
+
y2: graph.main.area.part_2.y2,
|
|
524
|
+
strokeWidth: graph.main.area.part_2.strokeWidth,
|
|
525
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
526
|
+
}
|
|
527
|
+
),
|
|
528
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
529
|
+
"line",
|
|
530
|
+
{
|
|
531
|
+
x1: graph.main.area.part_3.x1,
|
|
532
|
+
x2: graph.main.area.part_3.x2,
|
|
533
|
+
y1: graph.main.area.part_3.y1,
|
|
534
|
+
y2: graph.main.area.part_3.y2,
|
|
535
|
+
strokeWidth: graph.main.area.part_3.strokeWidth,
|
|
536
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
537
|
+
}
|
|
538
|
+
),
|
|
539
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
540
|
+
"polygon",
|
|
541
|
+
{
|
|
542
|
+
points: `
|
|
533
543
|
${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
534
544
|
${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
535
545
|
${graph.main.area.part_3.x2},${graph.mainHeightGraph}
|
|
536
546
|
${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
547
|
+
fill: graph.main.bars.main.colorSecondary
|
|
548
|
+
}
|
|
549
|
+
)
|
|
550
|
+
] }),
|
|
540
551
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
541
552
|
RenderBar,
|
|
542
553
|
{
|
|
543
554
|
bar: graph.main.bars.main,
|
|
544
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
555
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
556
|
+
activeAction: barMainActionsActive,
|
|
557
|
+
setActiveAction: (value) => setBarMainActionsActive(value)
|
|
545
558
|
}
|
|
546
559
|
),
|
|
547
560
|
graph.main.bars.secondary && /* @__PURE__ */ jsxRuntime.jsx(
|
|
548
561
|
RenderBar,
|
|
549
562
|
{
|
|
550
563
|
bar: graph.main.bars.secondary,
|
|
551
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
564
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
565
|
+
activeAction: barSecondaryActionsActive,
|
|
566
|
+
setActiveAction: (value) => setBarSecondaryActionsActive(value)
|
|
552
567
|
}
|
|
553
568
|
),
|
|
554
569
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -658,15 +673,20 @@ const UnitLinkGraph = ({
|
|
|
658
673
|
max: configurations.area.indicators.count - 1,
|
|
659
674
|
value: sliderValue,
|
|
660
675
|
onChange: setSliderValue,
|
|
661
|
-
limit:
|
|
676
|
+
limit: limit_ani
|
|
662
677
|
}
|
|
663
678
|
)
|
|
664
679
|
]
|
|
665
680
|
}
|
|
666
681
|
);
|
|
667
682
|
};
|
|
668
|
-
const RenderBar = ({
|
|
669
|
-
|
|
683
|
+
const RenderBar = ({
|
|
684
|
+
bar,
|
|
685
|
+
textLineHeight,
|
|
686
|
+
activeAction = 0,
|
|
687
|
+
setActiveAction = () => {
|
|
688
|
+
}
|
|
689
|
+
}) => {
|
|
670
690
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
671
691
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
672
692
|
"rect",
|
|
@@ -702,12 +722,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
|
|
|
702
722
|
}
|
|
703
723
|
),
|
|
704
724
|
bar.barActions.actions.map((action, index) => {
|
|
705
|
-
const isActive =
|
|
725
|
+
const isActive = activeAction === index;
|
|
706
726
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
707
727
|
"g",
|
|
708
728
|
{
|
|
709
729
|
className: "bar-actions-group",
|
|
710
|
-
onClick: () =>
|
|
730
|
+
onClick: () => setActiveAction(index),
|
|
711
731
|
children: [
|
|
712
732
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
713
733
|
"rect",
|
package/build/cjs/index.cjs
CHANGED
|
@@ -24437,6 +24437,7 @@ const UnitLinkGraphStyled = styled__default.default.svg`
|
|
|
24437
24437
|
const UnitLinkGraph = ({
|
|
24438
24438
|
height = 0,
|
|
24439
24439
|
barMainConfiguration = {
|
|
24440
|
+
followSlider: false,
|
|
24440
24441
|
header: "Placeholder",
|
|
24441
24442
|
color_primary: utils.colors.purple_600,
|
|
24442
24443
|
color_secondary: utils.colors.purple_50,
|
|
@@ -24449,9 +24450,16 @@ const UnitLinkGraph = ({
|
|
|
24449
24450
|
}
|
|
24450
24451
|
]
|
|
24451
24452
|
},
|
|
24453
|
+
setBarMainActionsActive = () => {
|
|
24454
|
+
},
|
|
24455
|
+
barMainActionsActive = 0,
|
|
24452
24456
|
barSecondaryConfiguration,
|
|
24457
|
+
setBarSecondaryActionsActive = () => {
|
|
24458
|
+
},
|
|
24459
|
+
barSecondaryActionsActive = 0,
|
|
24453
24460
|
initialSliderValue = 0,
|
|
24454
24461
|
maximum_ani = 7,
|
|
24462
|
+
limit_ani = 7,
|
|
24455
24463
|
timeline_texts = {
|
|
24456
24464
|
left: "Placeholder"
|
|
24457
24465
|
},
|
|
@@ -24466,6 +24474,13 @@ const UnitLinkGraph = ({
|
|
|
24466
24474
|
const [mainWidth, setMainWidth] = React.useState(0);
|
|
24467
24475
|
const [mainStart, setMainStart] = React.useState(0);
|
|
24468
24476
|
const [sliderValue, setSliderValue] = React.useState(initialSliderValue);
|
|
24477
|
+
const place_at_ani = React.useMemo(() => {
|
|
24478
|
+
if (barMainConfiguration.followSlider) {
|
|
24479
|
+
return sliderValue;
|
|
24480
|
+
} else {
|
|
24481
|
+
return barMainConfiguration.place_at_ani;
|
|
24482
|
+
}
|
|
24483
|
+
}, [barMainConfiguration, sliderValue]);
|
|
24469
24484
|
const configurations = React.useMemo(() => {
|
|
24470
24485
|
return {
|
|
24471
24486
|
mainGap: 16,
|
|
@@ -24708,7 +24723,7 @@ const UnitLinkGraph = ({
|
|
|
24708
24723
|
({ mainHeight }) => {
|
|
24709
24724
|
const MANY_SEGMENTS_PER_YEAR = 2;
|
|
24710
24725
|
const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
|
|
24711
|
-
const segments_render =
|
|
24726
|
+
const segments_render = place_at_ani * 2;
|
|
24712
24727
|
const segments_padding_y = 4.5;
|
|
24713
24728
|
const segments_y = floorToHalf(
|
|
24714
24729
|
totalHeight - mainHeight + segments_padding_y + configurations.mainGap
|
|
@@ -24746,13 +24761,7 @@ const UnitLinkGraph = ({
|
|
|
24746
24761
|
}
|
|
24747
24762
|
};
|
|
24748
24763
|
},
|
|
24749
|
-
[
|
|
24750
|
-
mainWidth,
|
|
24751
|
-
mainStart,
|
|
24752
|
-
configurations,
|
|
24753
|
-
totalHeight,
|
|
24754
|
-
barMainConfiguration.place_at_ani
|
|
24755
|
-
]
|
|
24764
|
+
[mainWidth, mainStart, configurations, totalHeight, place_at_ani]
|
|
24756
24765
|
);
|
|
24757
24766
|
const computeAction = React.useCallback(
|
|
24758
24767
|
({
|
|
@@ -24806,7 +24815,7 @@ const UnitLinkGraph = ({
|
|
|
24806
24815
|
mainHeightGraph,
|
|
24807
24816
|
config: barMainConfiguration,
|
|
24808
24817
|
getPointsPositionIndicatorX,
|
|
24809
|
-
place_at:
|
|
24818
|
+
place_at: place_at_ani,
|
|
24810
24819
|
main: true
|
|
24811
24820
|
});
|
|
24812
24821
|
let bar_secondary;
|
|
@@ -24869,62 +24878,68 @@ const UnitLinkGraph = ({
|
|
|
24869
24878
|
},
|
|
24870
24879
|
...rest,
|
|
24871
24880
|
children: [
|
|
24872
|
-
/* @__PURE__ */ jsxRuntime.
|
|
24873
|
-
|
|
24874
|
-
|
|
24875
|
-
|
|
24876
|
-
|
|
24877
|
-
|
|
24878
|
-
|
|
24879
|
-
|
|
24880
|
-
|
|
24881
|
-
|
|
24882
|
-
|
|
24883
|
-
|
|
24884
|
-
|
|
24885
|
-
|
|
24886
|
-
|
|
24887
|
-
|
|
24888
|
-
|
|
24889
|
-
|
|
24890
|
-
|
|
24891
|
-
|
|
24892
|
-
|
|
24893
|
-
|
|
24894
|
-
|
|
24895
|
-
|
|
24896
|
-
|
|
24897
|
-
|
|
24898
|
-
|
|
24899
|
-
|
|
24900
|
-
|
|
24901
|
-
|
|
24902
|
-
|
|
24903
|
-
|
|
24904
|
-
|
|
24905
|
-
|
|
24906
|
-
|
|
24907
|
-
|
|
24908
|
-
|
|
24881
|
+
place_at_ani > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
24882
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24883
|
+
"line",
|
|
24884
|
+
{
|
|
24885
|
+
x1: graph.main.area.part_1.x1,
|
|
24886
|
+
x2: graph.main.area.part_1.x2,
|
|
24887
|
+
y1: graph.main.area.part_1.y1,
|
|
24888
|
+
y2: graph.main.area.part_1.y2,
|
|
24889
|
+
strokeWidth: graph.main.area.part_1.strokeWidth,
|
|
24890
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24891
|
+
}
|
|
24892
|
+
),
|
|
24893
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24894
|
+
"line",
|
|
24895
|
+
{
|
|
24896
|
+
x1: graph.main.area.part_2.x1,
|
|
24897
|
+
x2: graph.main.area.part_2.x2,
|
|
24898
|
+
y1: graph.main.area.part_2.y1,
|
|
24899
|
+
y2: graph.main.area.part_2.y2,
|
|
24900
|
+
strokeWidth: graph.main.area.part_2.strokeWidth,
|
|
24901
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24902
|
+
}
|
|
24903
|
+
),
|
|
24904
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24905
|
+
"line",
|
|
24906
|
+
{
|
|
24907
|
+
x1: graph.main.area.part_3.x1,
|
|
24908
|
+
x2: graph.main.area.part_3.x2,
|
|
24909
|
+
y1: graph.main.area.part_3.y1,
|
|
24910
|
+
y2: graph.main.area.part_3.y2,
|
|
24911
|
+
strokeWidth: graph.main.area.part_3.strokeWidth,
|
|
24912
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24913
|
+
}
|
|
24914
|
+
),
|
|
24915
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24916
|
+
"polygon",
|
|
24917
|
+
{
|
|
24918
|
+
points: `
|
|
24909
24919
|
${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
24910
24920
|
${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
24911
24921
|
${graph.main.area.part_3.x2},${graph.mainHeightGraph}
|
|
24912
24922
|
${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
|
|
24913
|
-
|
|
24914
|
-
|
|
24915
|
-
|
|
24923
|
+
fill: graph.main.bars.main.colorSecondary
|
|
24924
|
+
}
|
|
24925
|
+
)
|
|
24926
|
+
] }),
|
|
24916
24927
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
24917
24928
|
RenderBar,
|
|
24918
24929
|
{
|
|
24919
24930
|
bar: graph.main.bars.main,
|
|
24920
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
24931
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
24932
|
+
activeAction: barMainActionsActive,
|
|
24933
|
+
setActiveAction: (value) => setBarMainActionsActive(value)
|
|
24921
24934
|
}
|
|
24922
24935
|
),
|
|
24923
24936
|
graph.main.bars.secondary && /* @__PURE__ */ jsxRuntime.jsx(
|
|
24924
24937
|
RenderBar,
|
|
24925
24938
|
{
|
|
24926
24939
|
bar: graph.main.bars.secondary,
|
|
24927
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
24940
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
24941
|
+
activeAction: barSecondaryActionsActive,
|
|
24942
|
+
setActiveAction: (value) => setBarSecondaryActionsActive(value)
|
|
24928
24943
|
}
|
|
24929
24944
|
),
|
|
24930
24945
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -25034,15 +25049,20 @@ const UnitLinkGraph = ({
|
|
|
25034
25049
|
max: configurations.area.indicators.count - 1,
|
|
25035
25050
|
value: sliderValue,
|
|
25036
25051
|
onChange: setSliderValue,
|
|
25037
|
-
limit:
|
|
25052
|
+
limit: limit_ani
|
|
25038
25053
|
}
|
|
25039
25054
|
)
|
|
25040
25055
|
]
|
|
25041
25056
|
}
|
|
25042
25057
|
);
|
|
25043
25058
|
};
|
|
25044
|
-
const RenderBar = ({
|
|
25045
|
-
|
|
25059
|
+
const RenderBar = ({
|
|
25060
|
+
bar,
|
|
25061
|
+
textLineHeight,
|
|
25062
|
+
activeAction = 0,
|
|
25063
|
+
setActiveAction = () => {
|
|
25064
|
+
}
|
|
25065
|
+
}) => {
|
|
25046
25066
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
25047
25067
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25048
25068
|
"rect",
|
|
@@ -25078,12 +25098,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
|
|
|
25078
25098
|
}
|
|
25079
25099
|
),
|
|
25080
25100
|
bar.barActions.actions.map((action, index) => {
|
|
25081
|
-
const isActive =
|
|
25101
|
+
const isActive = activeAction === index;
|
|
25082
25102
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
25083
25103
|
"g",
|
|
25084
25104
|
{
|
|
25085
25105
|
className: "bar-actions-group",
|
|
25086
|
-
onClick: () =>
|
|
25106
|
+
onClick: () => setActiveAction(index),
|
|
25087
25107
|
children: [
|
|
25088
25108
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25089
25109
|
"rect",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
3
|
|
|
4
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { colors } from '../../utils';
|
|
@@ -57,6 +57,7 @@ const UnitLinkGraphStyled = styled.svg`
|
|
|
57
57
|
const UnitLinkGraph = ({
|
|
58
58
|
height = 0,
|
|
59
59
|
barMainConfiguration = {
|
|
60
|
+
followSlider: false,
|
|
60
61
|
header: "Placeholder",
|
|
61
62
|
color_primary: colors.purple_600,
|
|
62
63
|
color_secondary: colors.purple_50,
|
|
@@ -69,9 +70,16 @@ const UnitLinkGraph = ({
|
|
|
69
70
|
}
|
|
70
71
|
]
|
|
71
72
|
},
|
|
73
|
+
setBarMainActionsActive = () => {
|
|
74
|
+
},
|
|
75
|
+
barMainActionsActive = 0,
|
|
72
76
|
barSecondaryConfiguration,
|
|
77
|
+
setBarSecondaryActionsActive = () => {
|
|
78
|
+
},
|
|
79
|
+
barSecondaryActionsActive = 0,
|
|
73
80
|
initialSliderValue = 0,
|
|
74
81
|
maximum_ani = 7,
|
|
82
|
+
limit_ani = 7,
|
|
75
83
|
timeline_texts = {
|
|
76
84
|
left: "Placeholder"
|
|
77
85
|
},
|
|
@@ -86,6 +94,13 @@ const UnitLinkGraph = ({
|
|
|
86
94
|
const [mainWidth, setMainWidth] = useState(0);
|
|
87
95
|
const [mainStart, setMainStart] = useState(0);
|
|
88
96
|
const [sliderValue, setSliderValue] = useState(initialSliderValue);
|
|
97
|
+
const place_at_ani = useMemo(() => {
|
|
98
|
+
if (barMainConfiguration.followSlider) {
|
|
99
|
+
return sliderValue;
|
|
100
|
+
} else {
|
|
101
|
+
return barMainConfiguration.place_at_ani;
|
|
102
|
+
}
|
|
103
|
+
}, [barMainConfiguration, sliderValue]);
|
|
89
104
|
const configurations = useMemo(() => {
|
|
90
105
|
return {
|
|
91
106
|
mainGap: 16,
|
|
@@ -328,7 +343,7 @@ const UnitLinkGraph = ({
|
|
|
328
343
|
({ mainHeight }) => {
|
|
329
344
|
const MANY_SEGMENTS_PER_YEAR = 2;
|
|
330
345
|
const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
|
|
331
|
-
const segments_render =
|
|
346
|
+
const segments_render = place_at_ani * 2;
|
|
332
347
|
const segments_padding_y = 4.5;
|
|
333
348
|
const segments_y = floorToHalf(
|
|
334
349
|
totalHeight - mainHeight + segments_padding_y + configurations.mainGap
|
|
@@ -366,13 +381,7 @@ const UnitLinkGraph = ({
|
|
|
366
381
|
}
|
|
367
382
|
};
|
|
368
383
|
},
|
|
369
|
-
[
|
|
370
|
-
mainWidth,
|
|
371
|
-
mainStart,
|
|
372
|
-
configurations,
|
|
373
|
-
totalHeight,
|
|
374
|
-
barMainConfiguration.place_at_ani
|
|
375
|
-
]
|
|
384
|
+
[mainWidth, mainStart, configurations, totalHeight, place_at_ani]
|
|
376
385
|
);
|
|
377
386
|
const computeAction = useCallback(
|
|
378
387
|
({
|
|
@@ -426,7 +435,7 @@ const UnitLinkGraph = ({
|
|
|
426
435
|
mainHeightGraph,
|
|
427
436
|
config: barMainConfiguration,
|
|
428
437
|
getPointsPositionIndicatorX,
|
|
429
|
-
place_at:
|
|
438
|
+
place_at: place_at_ani,
|
|
430
439
|
main: true
|
|
431
440
|
});
|
|
432
441
|
let bar_secondary;
|
|
@@ -489,62 +498,68 @@ const UnitLinkGraph = ({
|
|
|
489
498
|
},
|
|
490
499
|
...rest,
|
|
491
500
|
children: [
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
501
|
+
place_at_ani > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
502
|
+
/* @__PURE__ */ jsx(
|
|
503
|
+
"line",
|
|
504
|
+
{
|
|
505
|
+
x1: graph.main.area.part_1.x1,
|
|
506
|
+
x2: graph.main.area.part_1.x2,
|
|
507
|
+
y1: graph.main.area.part_1.y1,
|
|
508
|
+
y2: graph.main.area.part_1.y2,
|
|
509
|
+
strokeWidth: graph.main.area.part_1.strokeWidth,
|
|
510
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
511
|
+
}
|
|
512
|
+
),
|
|
513
|
+
/* @__PURE__ */ jsx(
|
|
514
|
+
"line",
|
|
515
|
+
{
|
|
516
|
+
x1: graph.main.area.part_2.x1,
|
|
517
|
+
x2: graph.main.area.part_2.x2,
|
|
518
|
+
y1: graph.main.area.part_2.y1,
|
|
519
|
+
y2: graph.main.area.part_2.y2,
|
|
520
|
+
strokeWidth: graph.main.area.part_2.strokeWidth,
|
|
521
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
522
|
+
}
|
|
523
|
+
),
|
|
524
|
+
/* @__PURE__ */ jsx(
|
|
525
|
+
"line",
|
|
526
|
+
{
|
|
527
|
+
x1: graph.main.area.part_3.x1,
|
|
528
|
+
x2: graph.main.area.part_3.x2,
|
|
529
|
+
y1: graph.main.area.part_3.y1,
|
|
530
|
+
y2: graph.main.area.part_3.y2,
|
|
531
|
+
strokeWidth: graph.main.area.part_3.strokeWidth,
|
|
532
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
533
|
+
}
|
|
534
|
+
),
|
|
535
|
+
/* @__PURE__ */ jsx(
|
|
536
|
+
"polygon",
|
|
537
|
+
{
|
|
538
|
+
points: `
|
|
529
539
|
${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
530
540
|
${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
531
541
|
${graph.main.area.part_3.x2},${graph.mainHeightGraph}
|
|
532
542
|
${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
543
|
+
fill: graph.main.bars.main.colorSecondary
|
|
544
|
+
}
|
|
545
|
+
)
|
|
546
|
+
] }),
|
|
536
547
|
/* @__PURE__ */ jsx(
|
|
537
548
|
RenderBar,
|
|
538
549
|
{
|
|
539
550
|
bar: graph.main.bars.main,
|
|
540
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
551
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
552
|
+
activeAction: barMainActionsActive,
|
|
553
|
+
setActiveAction: (value) => setBarMainActionsActive(value)
|
|
541
554
|
}
|
|
542
555
|
),
|
|
543
556
|
graph.main.bars.secondary && /* @__PURE__ */ jsx(
|
|
544
557
|
RenderBar,
|
|
545
558
|
{
|
|
546
559
|
bar: graph.main.bars.secondary,
|
|
547
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
560
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
561
|
+
activeAction: barSecondaryActionsActive,
|
|
562
|
+
setActiveAction: (value) => setBarSecondaryActionsActive(value)
|
|
548
563
|
}
|
|
549
564
|
),
|
|
550
565
|
/* @__PURE__ */ jsx(
|
|
@@ -654,15 +669,20 @@ const UnitLinkGraph = ({
|
|
|
654
669
|
max: configurations.area.indicators.count - 1,
|
|
655
670
|
value: sliderValue,
|
|
656
671
|
onChange: setSliderValue,
|
|
657
|
-
limit:
|
|
672
|
+
limit: limit_ani
|
|
658
673
|
}
|
|
659
674
|
)
|
|
660
675
|
]
|
|
661
676
|
}
|
|
662
677
|
);
|
|
663
678
|
};
|
|
664
|
-
const RenderBar = ({
|
|
665
|
-
|
|
679
|
+
const RenderBar = ({
|
|
680
|
+
bar,
|
|
681
|
+
textLineHeight,
|
|
682
|
+
activeAction = 0,
|
|
683
|
+
setActiveAction = () => {
|
|
684
|
+
}
|
|
685
|
+
}) => {
|
|
666
686
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
667
687
|
/* @__PURE__ */ jsx(
|
|
668
688
|
"rect",
|
|
@@ -698,12 +718,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
|
|
|
698
718
|
}
|
|
699
719
|
),
|
|
700
720
|
bar.barActions.actions.map((action, index) => {
|
|
701
|
-
const isActive =
|
|
721
|
+
const isActive = activeAction === index;
|
|
702
722
|
return /* @__PURE__ */ jsxs(
|
|
703
723
|
"g",
|
|
704
724
|
{
|
|
705
725
|
className: "bar-actions-group",
|
|
706
|
-
onClick: () =>
|
|
726
|
+
onClick: () => setActiveAction(index),
|
|
707
727
|
children: [
|
|
708
728
|
/* @__PURE__ */ jsx(
|
|
709
729
|
"rect",
|
package/build/esm/index.js
CHANGED
|
@@ -24414,6 +24414,7 @@ const UnitLinkGraphStyled = styled.svg`
|
|
|
24414
24414
|
const UnitLinkGraph = ({
|
|
24415
24415
|
height = 0,
|
|
24416
24416
|
barMainConfiguration = {
|
|
24417
|
+
followSlider: false,
|
|
24417
24418
|
header: "Placeholder",
|
|
24418
24419
|
color_primary: colors.purple_600,
|
|
24419
24420
|
color_secondary: colors.purple_50,
|
|
@@ -24426,9 +24427,16 @@ const UnitLinkGraph = ({
|
|
|
24426
24427
|
}
|
|
24427
24428
|
]
|
|
24428
24429
|
},
|
|
24430
|
+
setBarMainActionsActive = () => {
|
|
24431
|
+
},
|
|
24432
|
+
barMainActionsActive = 0,
|
|
24429
24433
|
barSecondaryConfiguration,
|
|
24434
|
+
setBarSecondaryActionsActive = () => {
|
|
24435
|
+
},
|
|
24436
|
+
barSecondaryActionsActive = 0,
|
|
24430
24437
|
initialSliderValue = 0,
|
|
24431
24438
|
maximum_ani = 7,
|
|
24439
|
+
limit_ani = 7,
|
|
24432
24440
|
timeline_texts = {
|
|
24433
24441
|
left: "Placeholder"
|
|
24434
24442
|
},
|
|
@@ -24443,6 +24451,13 @@ const UnitLinkGraph = ({
|
|
|
24443
24451
|
const [mainWidth, setMainWidth] = useState(0);
|
|
24444
24452
|
const [mainStart, setMainStart] = useState(0);
|
|
24445
24453
|
const [sliderValue, setSliderValue] = useState(initialSliderValue);
|
|
24454
|
+
const place_at_ani = useMemo(() => {
|
|
24455
|
+
if (barMainConfiguration.followSlider) {
|
|
24456
|
+
return sliderValue;
|
|
24457
|
+
} else {
|
|
24458
|
+
return barMainConfiguration.place_at_ani;
|
|
24459
|
+
}
|
|
24460
|
+
}, [barMainConfiguration, sliderValue]);
|
|
24446
24461
|
const configurations = useMemo(() => {
|
|
24447
24462
|
return {
|
|
24448
24463
|
mainGap: 16,
|
|
@@ -24685,7 +24700,7 @@ const UnitLinkGraph = ({
|
|
|
24685
24700
|
({ mainHeight }) => {
|
|
24686
24701
|
const MANY_SEGMENTS_PER_YEAR = 2;
|
|
24687
24702
|
const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
|
|
24688
|
-
const segments_render =
|
|
24703
|
+
const segments_render = place_at_ani * 2;
|
|
24689
24704
|
const segments_padding_y = 4.5;
|
|
24690
24705
|
const segments_y = floorToHalf(
|
|
24691
24706
|
totalHeight - mainHeight + segments_padding_y + configurations.mainGap
|
|
@@ -24723,13 +24738,7 @@ const UnitLinkGraph = ({
|
|
|
24723
24738
|
}
|
|
24724
24739
|
};
|
|
24725
24740
|
},
|
|
24726
|
-
[
|
|
24727
|
-
mainWidth,
|
|
24728
|
-
mainStart,
|
|
24729
|
-
configurations,
|
|
24730
|
-
totalHeight,
|
|
24731
|
-
barMainConfiguration.place_at_ani
|
|
24732
|
-
]
|
|
24741
|
+
[mainWidth, mainStart, configurations, totalHeight, place_at_ani]
|
|
24733
24742
|
);
|
|
24734
24743
|
const computeAction = useCallback(
|
|
24735
24744
|
({
|
|
@@ -24783,7 +24792,7 @@ const UnitLinkGraph = ({
|
|
|
24783
24792
|
mainHeightGraph,
|
|
24784
24793
|
config: barMainConfiguration,
|
|
24785
24794
|
getPointsPositionIndicatorX,
|
|
24786
|
-
place_at:
|
|
24795
|
+
place_at: place_at_ani,
|
|
24787
24796
|
main: true
|
|
24788
24797
|
});
|
|
24789
24798
|
let bar_secondary;
|
|
@@ -24846,62 +24855,68 @@ const UnitLinkGraph = ({
|
|
|
24846
24855
|
},
|
|
24847
24856
|
...rest,
|
|
24848
24857
|
children: [
|
|
24849
|
-
/* @__PURE__ */
|
|
24850
|
-
|
|
24851
|
-
|
|
24852
|
-
|
|
24853
|
-
|
|
24854
|
-
|
|
24855
|
-
|
|
24856
|
-
|
|
24857
|
-
|
|
24858
|
-
|
|
24859
|
-
|
|
24860
|
-
|
|
24861
|
-
|
|
24862
|
-
|
|
24863
|
-
|
|
24864
|
-
|
|
24865
|
-
|
|
24866
|
-
|
|
24867
|
-
|
|
24868
|
-
|
|
24869
|
-
|
|
24870
|
-
|
|
24871
|
-
|
|
24872
|
-
|
|
24873
|
-
|
|
24874
|
-
|
|
24875
|
-
|
|
24876
|
-
|
|
24877
|
-
|
|
24878
|
-
|
|
24879
|
-
|
|
24880
|
-
|
|
24881
|
-
|
|
24882
|
-
|
|
24883
|
-
|
|
24884
|
-
|
|
24885
|
-
|
|
24858
|
+
place_at_ani > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
24859
|
+
/* @__PURE__ */ jsx(
|
|
24860
|
+
"line",
|
|
24861
|
+
{
|
|
24862
|
+
x1: graph.main.area.part_1.x1,
|
|
24863
|
+
x2: graph.main.area.part_1.x2,
|
|
24864
|
+
y1: graph.main.area.part_1.y1,
|
|
24865
|
+
y2: graph.main.area.part_1.y2,
|
|
24866
|
+
strokeWidth: graph.main.area.part_1.strokeWidth,
|
|
24867
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24868
|
+
}
|
|
24869
|
+
),
|
|
24870
|
+
/* @__PURE__ */ jsx(
|
|
24871
|
+
"line",
|
|
24872
|
+
{
|
|
24873
|
+
x1: graph.main.area.part_2.x1,
|
|
24874
|
+
x2: graph.main.area.part_2.x2,
|
|
24875
|
+
y1: graph.main.area.part_2.y1,
|
|
24876
|
+
y2: graph.main.area.part_2.y2,
|
|
24877
|
+
strokeWidth: graph.main.area.part_2.strokeWidth,
|
|
24878
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24879
|
+
}
|
|
24880
|
+
),
|
|
24881
|
+
/* @__PURE__ */ jsx(
|
|
24882
|
+
"line",
|
|
24883
|
+
{
|
|
24884
|
+
x1: graph.main.area.part_3.x1,
|
|
24885
|
+
x2: graph.main.area.part_3.x2,
|
|
24886
|
+
y1: graph.main.area.part_3.y1,
|
|
24887
|
+
y2: graph.main.area.part_3.y2,
|
|
24888
|
+
strokeWidth: graph.main.area.part_3.strokeWidth,
|
|
24889
|
+
stroke: graph.main.bars.main.colorPrimary
|
|
24890
|
+
}
|
|
24891
|
+
),
|
|
24892
|
+
/* @__PURE__ */ jsx(
|
|
24893
|
+
"polygon",
|
|
24894
|
+
{
|
|
24895
|
+
points: `
|
|
24886
24896
|
${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
24887
24897
|
${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
|
|
24888
24898
|
${graph.main.area.part_3.x2},${graph.mainHeightGraph}
|
|
24889
24899
|
${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
|
|
24890
|
-
|
|
24891
|
-
|
|
24892
|
-
|
|
24900
|
+
fill: graph.main.bars.main.colorSecondary
|
|
24901
|
+
}
|
|
24902
|
+
)
|
|
24903
|
+
] }),
|
|
24893
24904
|
/* @__PURE__ */ jsx(
|
|
24894
24905
|
RenderBar,
|
|
24895
24906
|
{
|
|
24896
24907
|
bar: graph.main.bars.main,
|
|
24897
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
24908
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
24909
|
+
activeAction: barMainActionsActive,
|
|
24910
|
+
setActiveAction: (value) => setBarMainActionsActive(value)
|
|
24898
24911
|
}
|
|
24899
24912
|
),
|
|
24900
24913
|
graph.main.bars.secondary && /* @__PURE__ */ jsx(
|
|
24901
24914
|
RenderBar,
|
|
24902
24915
|
{
|
|
24903
24916
|
bar: graph.main.bars.secondary,
|
|
24904
|
-
textLineHeight: configurations.bars.actionsTextLineHeight
|
|
24917
|
+
textLineHeight: configurations.bars.actionsTextLineHeight,
|
|
24918
|
+
activeAction: barSecondaryActionsActive,
|
|
24919
|
+
setActiveAction: (value) => setBarSecondaryActionsActive(value)
|
|
24905
24920
|
}
|
|
24906
24921
|
),
|
|
24907
24922
|
/* @__PURE__ */ jsx(
|
|
@@ -25011,15 +25026,20 @@ const UnitLinkGraph = ({
|
|
|
25011
25026
|
max: configurations.area.indicators.count - 1,
|
|
25012
25027
|
value: sliderValue,
|
|
25013
25028
|
onChange: setSliderValue,
|
|
25014
|
-
limit:
|
|
25029
|
+
limit: limit_ani
|
|
25015
25030
|
}
|
|
25016
25031
|
)
|
|
25017
25032
|
]
|
|
25018
25033
|
}
|
|
25019
25034
|
);
|
|
25020
25035
|
};
|
|
25021
|
-
const RenderBar = ({
|
|
25022
|
-
|
|
25036
|
+
const RenderBar = ({
|
|
25037
|
+
bar,
|
|
25038
|
+
textLineHeight,
|
|
25039
|
+
activeAction = 0,
|
|
25040
|
+
setActiveAction = () => {
|
|
25041
|
+
}
|
|
25042
|
+
}) => {
|
|
25023
25043
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
25024
25044
|
/* @__PURE__ */ jsx(
|
|
25025
25045
|
"rect",
|
|
@@ -25055,12 +25075,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
|
|
|
25055
25075
|
}
|
|
25056
25076
|
),
|
|
25057
25077
|
bar.barActions.actions.map((action, index) => {
|
|
25058
|
-
const isActive =
|
|
25078
|
+
const isActive = activeAction === index;
|
|
25059
25079
|
return /* @__PURE__ */ jsxs(
|
|
25060
25080
|
"g",
|
|
25061
25081
|
{
|
|
25062
25082
|
className: "bar-actions-group",
|
|
25063
|
-
onClick: () =>
|
|
25083
|
+
onClick: () => setActiveAction(index),
|
|
25064
25084
|
children: [
|
|
25065
25085
|
/* @__PURE__ */ jsx(
|
|
25066
25086
|
"rect",
|
|
@@ -14,9 +14,15 @@ interface UnitLinkGraphProps extends HTMLAttributes<SVGSVGElement> {
|
|
|
14
14
|
height?: number;
|
|
15
15
|
barMainConfiguration: BarConfiguration & {
|
|
16
16
|
place_at_ani: number;
|
|
17
|
+
followSlider?: boolean;
|
|
17
18
|
};
|
|
19
|
+
setBarMainActionsActive?: (value: number) => void;
|
|
20
|
+
barMainActionsActive?: number;
|
|
18
21
|
barSecondaryConfiguration?: BarConfiguration;
|
|
22
|
+
setBarSecondaryActionsActive?: (value: number) => void;
|
|
23
|
+
barSecondaryActionsActive?: number;
|
|
19
24
|
maximum_ani?: number;
|
|
25
|
+
limit_ani?: number;
|
|
20
26
|
timeline_texts?: {
|
|
21
27
|
left: string;
|
|
22
28
|
right?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rbro-tat-uds",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "build/cjs/index.cjs",
|
|
6
6
|
"module": "build/esm/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"scripts": {
|
|
14
14
|
"publish:local-raw": "npm publish --registry http://localhost:4873",
|
|
15
|
-
"publish:local-clear": "npm unpublish rbro-tat-uds
|
|
15
|
+
"publish:local-clear": "npm unpublish rbro-tat-uds@2.0.0 --registry http://localhost:4873 --force",
|
|
16
16
|
"publish:local": "npm run publish:local-clear && npm run publish:local-raw"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
@@ -66,6 +66,14 @@
|
|
|
66
66
|
"default": "./build/cjs/utils/colors.cjs"
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
|
+
"./types/*": {
|
|
70
|
+
"import": {
|
|
71
|
+
"types": "./build/types/components/*"
|
|
72
|
+
},
|
|
73
|
+
"require": {
|
|
74
|
+
"types": "./build/types/components/*"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
69
77
|
"./esm": null,
|
|
70
78
|
"./modern": null
|
|
71
79
|
}
|