@evergis/charts 2.0.21 → 2.0.22
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/charts.esm.js
CHANGED
|
@@ -46,16 +46,8 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
46
46
|
return strings;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
_templateObject = function _templateObject() {
|
|
53
|
-
return data;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
return data;
|
|
57
|
-
}
|
|
58
|
-
const Wrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject());
|
|
49
|
+
var _templateObject;
|
|
50
|
+
const Wrapper = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n box-sizing: border-box;\n"])));
|
|
59
51
|
|
|
60
52
|
function useNode() {
|
|
61
53
|
const [node, onSetNode] = useState(null);
|
|
@@ -93,16 +85,8 @@ const appendSvg = (node, width, height) => {
|
|
|
93
85
|
return svg;
|
|
94
86
|
};
|
|
95
87
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
_templateObject$1 = function _templateObject() {
|
|
100
|
-
return data;
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
return data;
|
|
104
|
-
}
|
|
105
|
-
const SwipeScrollContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$1());
|
|
88
|
+
var _templateObject$1;
|
|
89
|
+
const SwipeScrollContainer = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n user-select: none;\n"])));
|
|
106
90
|
|
|
107
91
|
function animate(_ref) {
|
|
108
92
|
let {
|
|
@@ -249,13 +233,14 @@ const useSwipe = (node, _ref) => {
|
|
|
249
233
|
}, [container, onStart, node, width]);
|
|
250
234
|
};
|
|
251
235
|
|
|
236
|
+
const _excluded = ["children", "width", "onSwipe"];
|
|
252
237
|
const SwipeScroll = (_ref) => {
|
|
253
238
|
let {
|
|
254
239
|
children,
|
|
255
240
|
width,
|
|
256
241
|
onSwipe
|
|
257
242
|
} = _ref,
|
|
258
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
243
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
259
244
|
|
|
260
245
|
const [ref, draggingNode] = useNode();
|
|
261
246
|
useSwipe(draggingNode, _extends({
|
|
@@ -291,15 +276,7 @@ const getTextAnchor = (index, length) => {
|
|
|
291
276
|
return 'end';
|
|
292
277
|
};
|
|
293
278
|
|
|
294
|
-
|
|
295
|
-
const data = _taggedTemplateLiteralLoose(["\n position: absolute;\n"]);
|
|
296
|
-
|
|
297
|
-
_templateObject$2 = function _templateObject() {
|
|
298
|
-
return data;
|
|
299
|
-
};
|
|
300
|
-
|
|
301
|
-
return data;
|
|
302
|
-
}
|
|
279
|
+
var _templateObject$2;
|
|
303
280
|
|
|
304
281
|
const getTranslate = (_ref) => {
|
|
305
282
|
let {
|
|
@@ -326,7 +303,7 @@ const LabelContainer = /*#__PURE__*/styled.div.attrs(props => ({
|
|
|
326
303
|
style: {
|
|
327
304
|
transform: getTranslate(props)
|
|
328
305
|
}
|
|
329
|
-
}))( /*#__PURE__*/
|
|
306
|
+
}))(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n"])));
|
|
330
307
|
|
|
331
308
|
const labelClassName = 'd3-chart-label';
|
|
332
309
|
const drawRadialLabels = (_ref) => {
|
|
@@ -380,65 +357,7 @@ const drawRadialLabels = (_ref) => {
|
|
|
380
357
|
});
|
|
381
358
|
};
|
|
382
359
|
|
|
383
|
-
|
|
384
|
-
const data = _taggedTemplateLiteralLoose(["\n margin-left: 4px;\n font-size: 10px;\n color: rgba(255, 255, 255, 0.54);\n"]);
|
|
385
|
-
|
|
386
|
-
_templateObject6 = function _templateObject6() {
|
|
387
|
-
return data;
|
|
388
|
-
};
|
|
389
|
-
|
|
390
|
-
return data;
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
function _templateObject5() {
|
|
394
|
-
const data = _taggedTemplateLiteralLoose(["\n ", "\n"]);
|
|
395
|
-
|
|
396
|
-
_templateObject5 = function _templateObject5() {
|
|
397
|
-
return data;
|
|
398
|
-
};
|
|
399
|
-
|
|
400
|
-
return data;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
function _templateObject4() {
|
|
404
|
-
const data = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 2px 4px;\n border-radius: 4px;\n color: rgb(255, 255, 255);\n background-color: rgb(144, 197, 61);\n margin-left: 8px;\n"]);
|
|
405
|
-
|
|
406
|
-
_templateObject4 = function _templateObject4() {
|
|
407
|
-
return data;
|
|
408
|
-
};
|
|
409
|
-
|
|
410
|
-
return data;
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
function _templateObject3() {
|
|
414
|
-
const data = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n right: 0;\n transform: translate(calc(100% + 6px), -50%);\n"]);
|
|
415
|
-
|
|
416
|
-
_templateObject3 = function _templateObject3() {
|
|
417
|
-
return data;
|
|
418
|
-
};
|
|
419
|
-
|
|
420
|
-
return data;
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
function _templateObject2() {
|
|
424
|
-
const data = _taggedTemplateLiteralLoose(["\n text-align: center;\n max-width: 120px;\n"]);
|
|
425
|
-
|
|
426
|
-
_templateObject2 = function _templateObject2() {
|
|
427
|
-
return data;
|
|
428
|
-
};
|
|
429
|
-
|
|
430
|
-
return data;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
function _templateObject$3() {
|
|
434
|
-
const data = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n"]);
|
|
435
|
-
|
|
436
|
-
_templateObject$3 = function _templateObject() {
|
|
437
|
-
return data;
|
|
438
|
-
};
|
|
439
|
-
|
|
440
|
-
return data;
|
|
441
|
-
}
|
|
360
|
+
var _templateObject$3, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
442
361
|
const getTranslate$1 = (_ref) => {
|
|
443
362
|
let {
|
|
444
363
|
anchor,
|
|
@@ -459,22 +378,14 @@ const getTranslate$1 = (_ref) => {
|
|
|
459
378
|
|
|
460
379
|
return "translate(" + translateX + "px, " + translateY + "px)";
|
|
461
380
|
};
|
|
462
|
-
const Label = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
463
|
-
const Name = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
464
|
-
const middleBadgeStyles = /*#__PURE__*/css( /*#__PURE__*/
|
|
465
|
-
const DefaultBadge = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
466
|
-
const MiddleBadge = /*#__PURE__*/styled(DefaultBadge)( /*#__PURE__*/
|
|
467
|
-
const BadgePrefix = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
468
|
-
|
|
469
|
-
function _templateObject$4() {
|
|
470
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n path,\n line,\n circle {\n fill: none;\n stroke-width: 1px;\n stroke: rgba(149, 149, 149, 0.18);\n }\n }\n .", " {\n font-size: 12px;\n fill-opacity: 0.56;\n }\n .", " {\n fill-opacity: 0.06;\n stroke-width: 2px;\n fill: rgb(144, 197, 61);\n stroke: rgb(144, 197, 61);\n }\n .", " {\n fill: rgb(144, 197, 61);\n }\n"]);
|
|
381
|
+
const Label = /*#__PURE__*/styled.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
|
|
382
|
+
const Name = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n max-width: 120px;\n"])));
|
|
383
|
+
const middleBadgeStyles = /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n right: 0;\n transform: translate(calc(100% + 6px), -50%);\n"])));
|
|
384
|
+
const DefaultBadge = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 2px 4px;\n border-radius: 4px;\n color: rgb(255, 255, 255);\n background-color: rgb(144, 197, 61);\n margin-left: 8px;\n"])));
|
|
385
|
+
const MiddleBadge = /*#__PURE__*/styled(DefaultBadge)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), middleBadgeStyles);
|
|
386
|
+
const BadgePrefix = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 4px;\n font-size: 10px;\n color: rgba(255, 255, 255, 0.54);\n"])));
|
|
471
387
|
|
|
472
|
-
|
|
473
|
-
return data;
|
|
474
|
-
};
|
|
475
|
-
|
|
476
|
-
return data;
|
|
477
|
-
}
|
|
388
|
+
var _templateObject$4;
|
|
478
389
|
const radarChartclassNames = {
|
|
479
390
|
radar: 'radar',
|
|
480
391
|
radarAxis: 'radarAxis',
|
|
@@ -487,7 +398,7 @@ const radarChartclassNames = {
|
|
|
487
398
|
radarLabelBadgePrefix: 'radarLabelBadgePrefix',
|
|
488
399
|
radarCircle: 'radarCircle'
|
|
489
400
|
};
|
|
490
|
-
const SvgWrapper = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
401
|
+
const SvgWrapper = /*#__PURE__*/styled(Wrapper)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n path,\n line,\n circle {\n fill: none;\n stroke-width: 1px;\n stroke: rgba(149, 149, 149, 0.18);\n }\n }\n .", " {\n font-size: 12px;\n fill-opacity: 0.56;\n }\n .", " {\n fill-opacity: 0.06;\n stroke-width: 2px;\n fill: rgb(144, 197, 61);\n stroke: rgb(144, 197, 61);\n }\n .", " {\n fill: rgb(144, 197, 61);\n }\n"])), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
|
|
491
402
|
|
|
492
403
|
const draw = (node, props) => {
|
|
493
404
|
const {
|
|
@@ -717,15 +628,7 @@ function degreesToRadians(degrees) {
|
|
|
717
628
|
return degrees * (Math.PI / flatAngle);
|
|
718
629
|
}
|
|
719
630
|
|
|
720
|
-
|
|
721
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n fill: #4a4a4a;\n }\n .", " {\n position: absolute;\n max-width: 128px;\n }\n .", " {\n stroke: #000;\n }\n .", " {\n fill: transparent;\n cursor: pointer;\n }\n"]);
|
|
722
|
-
|
|
723
|
-
_templateObject$5 = function _templateObject() {
|
|
724
|
-
return data;
|
|
725
|
-
};
|
|
726
|
-
|
|
727
|
-
return data;
|
|
728
|
-
}
|
|
631
|
+
var _templateObject$5;
|
|
729
632
|
const pieChartclassNames = {
|
|
730
633
|
pieGlobal: 'pieGlobal',
|
|
731
634
|
pieSlice: 'pieSlice',
|
|
@@ -743,7 +646,7 @@ const pieChartclassNames = {
|
|
|
743
646
|
pieTooltipColorBox: 'pieTooltipColorBox',
|
|
744
647
|
pieFullChartTooltipCircle: 'pieFullChartTooltipCircle'
|
|
745
648
|
};
|
|
746
|
-
const SvgWrapper$1 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
649
|
+
const SvgWrapper$1 = /*#__PURE__*/styled(Wrapper)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n fill: #4a4a4a;\n }\n .", " {\n position: absolute;\n max-width: 128px;\n }\n .", " {\n stroke: #000;\n }\n .", " {\n fill: transparent;\n cursor: pointer;\n }\n"])), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink, pieChartclassNames.pieFullChartTooltipCircle);
|
|
747
650
|
|
|
748
651
|
const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
|
|
749
652
|
const getAlign = d => {
|
|
@@ -807,159 +710,21 @@ const drawRadialLabels$1 = (_ref) => {
|
|
|
807
710
|
}
|
|
808
711
|
};
|
|
809
712
|
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
};
|
|
826
|
-
|
|
827
|
-
return data;
|
|
828
|
-
}
|
|
829
|
-
|
|
830
|
-
function _templateObject12() {
|
|
831
|
-
const data = _taggedTemplateLiteralLoose(["\n position: relative;\n font-size: 11px;\n color: #fff;\n font-weight: bold;\n letter-spacing: 0.52px;\n"]);
|
|
832
|
-
|
|
833
|
-
_templateObject12 = function _templateObject12() {
|
|
834
|
-
return data;
|
|
835
|
-
};
|
|
836
|
-
|
|
837
|
-
return data;
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
function _templateObject11() {
|
|
841
|
-
const data = _taggedTemplateLiteralLoose(["\n text-align: right;\n flex-shrink: 0;\n flex-grow: 1;\n"]);
|
|
842
|
-
|
|
843
|
-
_templateObject11 = function _templateObject11() {
|
|
844
|
-
return data;
|
|
845
|
-
};
|
|
846
|
-
|
|
847
|
-
return data;
|
|
848
|
-
}
|
|
849
|
-
|
|
850
|
-
function _templateObject10() {
|
|
851
|
-
const data = _taggedTemplateLiteralLoose(["\n margin-right: 4px;\n"]);
|
|
852
|
-
|
|
853
|
-
_templateObject10 = function _templateObject10() {
|
|
854
|
-
return data;
|
|
855
|
-
};
|
|
856
|
-
|
|
857
|
-
return data;
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
function _templateObject9() {
|
|
861
|
-
const data = _taggedTemplateLiteralLoose(["\n height: 2px;\n border-radius: 0;\n"]);
|
|
862
|
-
|
|
863
|
-
_templateObject9 = function _templateObject9() {
|
|
864
|
-
return data;
|
|
865
|
-
};
|
|
866
|
-
|
|
867
|
-
return data;
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
function _templateObject8() {
|
|
871
|
-
const data = _taggedTemplateLiteralLoose(["\n margin-right: 4px;\n width: 10px;\n height: 10px;\n border-radius: 2px;\n"]);
|
|
872
|
-
|
|
873
|
-
_templateObject8 = function _templateObject8() {
|
|
874
|
-
return data;
|
|
875
|
-
};
|
|
876
|
-
|
|
877
|
-
return data;
|
|
878
|
-
}
|
|
879
|
-
|
|
880
|
-
function _templateObject7() {
|
|
881
|
-
const data = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 4px;\n"]);
|
|
882
|
-
|
|
883
|
-
_templateObject7 = function _templateObject7() {
|
|
884
|
-
return data;
|
|
885
|
-
};
|
|
886
|
-
|
|
887
|
-
return data;
|
|
888
|
-
}
|
|
889
|
-
|
|
890
|
-
function _templateObject6$1() {
|
|
891
|
-
const data = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 0.25rem;\n &:last-of-type {\n margin-bottom: 0;\n }\n"]);
|
|
892
|
-
|
|
893
|
-
_templateObject6$1 = function _templateObject6() {
|
|
894
|
-
return data;
|
|
895
|
-
};
|
|
896
|
-
|
|
897
|
-
return data;
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
function _templateObject5$1() {
|
|
901
|
-
const data = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n margin-bottom: 6px;\n"]);
|
|
902
|
-
|
|
903
|
-
_templateObject5$1 = function _templateObject5() {
|
|
904
|
-
return data;
|
|
905
|
-
};
|
|
906
|
-
|
|
907
|
-
return data;
|
|
908
|
-
}
|
|
909
|
-
|
|
910
|
-
function _templateObject4$1() {
|
|
911
|
-
const data = _taggedTemplateLiteralLoose(["\n position: relative;\n font-size: 11px;\n color: #fff;\n margin-bottom: 8px;\n padding: 4px 6px;\n background-color: rgba(48, 69, 79, 1);\n border-radius: 4px;\n box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);\n :before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 100%);\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 3px 0 3px;\n border-color: rgba(48, 69, 79, 1) transparent transparent transparent;\n }\n"]);
|
|
912
|
-
|
|
913
|
-
_templateObject4$1 = function _templateObject4() {
|
|
914
|
-
return data;
|
|
915
|
-
};
|
|
916
|
-
|
|
917
|
-
return data;
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
function _templateObject3$1() {
|
|
921
|
-
const data = _taggedTemplateLiteralLoose(["\n align-items: center;\n"]);
|
|
922
|
-
|
|
923
|
-
_templateObject3$1 = function _templateObject3() {
|
|
924
|
-
return data;
|
|
925
|
-
};
|
|
926
|
-
|
|
927
|
-
return data;
|
|
928
|
-
}
|
|
929
|
-
|
|
930
|
-
function _templateObject2$1() {
|
|
931
|
-
const data = _taggedTemplateLiteralLoose([""]);
|
|
932
|
-
|
|
933
|
-
_templateObject2$1 = function _templateObject2() {
|
|
934
|
-
return data;
|
|
935
|
-
};
|
|
936
|
-
|
|
937
|
-
return data;
|
|
938
|
-
}
|
|
939
|
-
|
|
940
|
-
function _templateObject$6() {
|
|
941
|
-
const data = _taggedTemplateLiteralLoose(["\n width: 0;\n height: 0;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n pointer-events: none;\n white-space: nowrap;\n"]);
|
|
942
|
-
|
|
943
|
-
_templateObject$6 = function _templateObject() {
|
|
944
|
-
return data;
|
|
945
|
-
};
|
|
946
|
-
|
|
947
|
-
return data;
|
|
948
|
-
}
|
|
949
|
-
const TooltipFlex = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$6());
|
|
950
|
-
const LabelFlex = /*#__PURE__*/styled(TooltipFlex)( /*#__PURE__*/_templateObject2$1());
|
|
951
|
-
const LabelFlexCenter = /*#__PURE__*/styled(LabelFlex)( /*#__PURE__*/_templateObject3$1());
|
|
952
|
-
const TooltipContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4$1());
|
|
953
|
-
const TooltipGroupName = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5$1());
|
|
954
|
-
const TooltipItem = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject6$1());
|
|
955
|
-
const ColFlex = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject7());
|
|
956
|
-
const ColorBox = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject8());
|
|
957
|
-
const ColorLine = /*#__PURE__*/styled(ColorBox)( /*#__PURE__*/_templateObject9());
|
|
958
|
-
const Name$1 = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject10());
|
|
959
|
-
const Value = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject11());
|
|
960
|
-
const Label$1 = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject12());
|
|
961
|
-
const LabelTop = /*#__PURE__*/styled(Label$1)( /*#__PURE__*/_templateObject13());
|
|
962
|
-
const LabelBottom = /*#__PURE__*/styled(Label$1)( /*#__PURE__*/_templateObject14());
|
|
713
|
+
var _templateObject$6, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
714
|
+
const TooltipFlex = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 0;\n height: 0;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n pointer-events: none;\n white-space: nowrap;\n"])));
|
|
715
|
+
const LabelFlex = /*#__PURE__*/styled(TooltipFlex)(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
716
|
+
const LabelFlexCenter = /*#__PURE__*/styled(LabelFlex)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-items: center;\n"])));
|
|
717
|
+
const TooltipContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n font-size: 11px;\n color: #fff;\n margin-bottom: 8px;\n padding: 4px 6px;\n background-color: rgba(48, 69, 79, 1);\n border-radius: 4px;\n box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);\n :before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 100%);\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 3px 0 3px;\n border-color: rgba(48, 69, 79, 1) transparent transparent transparent;\n }\n"])));
|
|
718
|
+
const TooltipGroupName = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 14px;\n margin-bottom: 6px;\n"])));
|
|
719
|
+
const TooltipItem = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 0.25rem;\n &:last-of-type {\n margin-bottom: 0;\n }\n"])));
|
|
720
|
+
const ColFlex = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 4px;\n"])));
|
|
721
|
+
const ColorBox = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 4px;\n width: 10px;\n height: 10px;\n border-radius: 2px;\n"])));
|
|
722
|
+
const ColorLine = /*#__PURE__*/styled(ColorBox)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n border-radius: 0;\n"])));
|
|
723
|
+
const Name$1 = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 4px;\n"])));
|
|
724
|
+
const Value = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: right;\n flex-shrink: 0;\n flex-grow: 1;\n"])));
|
|
725
|
+
const Label$1 = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n font-size: 11px;\n color: #fff;\n font-weight: bold;\n letter-spacing: 0.52px;\n"])));
|
|
726
|
+
const LabelTop = /*#__PURE__*/styled(Label$1)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 6px;\n"])));
|
|
727
|
+
const LabelBottom = /*#__PURE__*/styled(Label$1)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n bottom: 6px;\n"])));
|
|
963
728
|
|
|
964
729
|
const drawTooltip = (_ref) => {
|
|
965
730
|
let {
|
|
@@ -1356,15 +1121,7 @@ const getLegend = (_ref) => {
|
|
|
1356
1121
|
return svg;
|
|
1357
1122
|
};
|
|
1358
1123
|
|
|
1359
|
-
|
|
1360
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n display: flex;\n margin-bottom: 16px;\n }\n .", " {\n display: inline-flex;\n align-items: flex-end;\n height: ", ";\n margin-bottom: 4px;\n font-weight: bold;\n }\n .", " {\n height: ", ";\n margin-bottom: 4px;\n position: relative;\n display: flex;\n }\n .", " {\n font-size: 14px;\n bottom: 0;\n position: absolute;\n }\n .", " {\n display: flex;\n flex-direction: column;\n margin-right: 10px;\n }\n .", " {\n font-size: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n .", " {\n position: relative;\n }\n .", " {\n position: absolute;\n }\n"]);
|
|
1361
|
-
|
|
1362
|
-
_templateObject$7 = function _templateObject() {
|
|
1363
|
-
return data;
|
|
1364
|
-
};
|
|
1365
|
-
|
|
1366
|
-
return data;
|
|
1367
|
-
}
|
|
1124
|
+
var _templateObject$7;
|
|
1368
1125
|
const calendarChartClassNames = /*#__PURE__*/_extends({
|
|
1369
1126
|
calendarChart: 'calendarChart',
|
|
1370
1127
|
calendarYear: 'calendarYear',
|
|
@@ -1378,7 +1135,7 @@ const calendarChartClassNames = /*#__PURE__*/_extends({
|
|
|
1378
1135
|
calendarDay: 'calendarDay'
|
|
1379
1136
|
}, legendClassNames);
|
|
1380
1137
|
const headerHeight = '20px';
|
|
1381
|
-
const SvgWrapper$2 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
1138
|
+
const SvgWrapper$2 = /*#__PURE__*/styled(Wrapper)(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n display: flex;\n margin-bottom: 16px;\n }\n .", " {\n display: inline-flex;\n align-items: flex-end;\n height: ", ";\n margin-bottom: 4px;\n font-weight: bold;\n }\n .", " {\n height: ", ";\n margin-bottom: 4px;\n position: relative;\n display: flex;\n }\n .", " {\n font-size: 14px;\n bottom: 0;\n position: absolute;\n }\n .", " {\n display: flex;\n flex-direction: column;\n margin-right: 10px;\n }\n .", " {\n font-size: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n .", " {\n position: relative;\n }\n .", " {\n position: absolute;\n }\n"])), calendarChartClassNames.calendarYear, calendarChartClassNames.calendarYearTitle, headerHeight, calendarChartClassNames.calendarHeader, headerHeight, calendarChartClassNames.calendarMonth, calendarChartClassNames.calendarAxis, calendarChartClassNames.calendarWeekDay, calendarChartClassNames.calendarDays, calendarChartClassNames.calendarDay);
|
|
1382
1139
|
|
|
1383
1140
|
const draw$2 = (node, props) => {
|
|
1384
1141
|
const {
|
|
@@ -1561,25 +1318,7 @@ const stackedData = data => {
|
|
|
1561
1318
|
});
|
|
1562
1319
|
};
|
|
1563
1320
|
|
|
1564
|
-
|
|
1565
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n transition: opacity linear 200ms;\n z-index: 1;\n .", " {\n justify-content: flex-start;\n align-items: center;\n pointer-events: none;\n }\n .", " {\n margin: 0 0 0 10px;\n }\n }\n"]);
|
|
1566
|
-
|
|
1567
|
-
_templateObject2$2 = function _templateObject2() {
|
|
1568
|
-
return data;
|
|
1569
|
-
};
|
|
1570
|
-
|
|
1571
|
-
return data;
|
|
1572
|
-
}
|
|
1573
|
-
|
|
1574
|
-
function _templateObject$8() {
|
|
1575
|
-
const data = _taggedTemplateLiteralLoose(["\n .", ",\n .", ",\n .", " {\n shape-rendering: crispEdges;\n }\n .", " {\n fill: none;\n stroke: steelblue;\n stroke-width: 1.5px;\n stroke-linejoin: round;\n stroke-linecap: round;\n }\n .", " {\n fill-opacity: 0.24;\n }\n .", ",\n .", ",\n .", " {\n stroke: rgba(149, 149, 149, 0.24);\n }\n .", ",\n .", " {\n transition: opacity linear 200ms;\n pointer-events: none;\n stroke-width: 1px;\n }\n .", " {\n stroke: #fff;\n stroke-width: 2px;\n }\n .", " {\n shape-rendering: crispEdges;\n }\n .", " {\n fill: none;\n pointer-events: all;\n }\n"]);
|
|
1576
|
-
|
|
1577
|
-
_templateObject$8 = function _templateObject() {
|
|
1578
|
-
return data;
|
|
1579
|
-
};
|
|
1580
|
-
|
|
1581
|
-
return data;
|
|
1582
|
-
}
|
|
1321
|
+
var _templateObject$8, _templateObject2$2;
|
|
1583
1322
|
const lineChartClassNames = {
|
|
1584
1323
|
lineChartYScaleGlobal: 'lineChartYScaleGlobal',
|
|
1585
1324
|
lineChartXScaleGlobal: 'lineChartXScaleGlobal',
|
|
@@ -1603,8 +1342,8 @@ const lineChartClassNames = {
|
|
|
1603
1342
|
lineChartMouseLabelContainer: 'lineChartMouseLabelContainer',
|
|
1604
1343
|
lineChartMouseLabel: 'lineChartMouseLabel'
|
|
1605
1344
|
};
|
|
1606
|
-
const SvgWrapper$3 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
1607
|
-
const TooltipStyles = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/
|
|
1345
|
+
const SvgWrapper$3 = /*#__PURE__*/styled(Wrapper)(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", ",\n .", ",\n .", " {\n shape-rendering: crispEdges;\n }\n .", " {\n fill: none;\n stroke: steelblue;\n stroke-width: 1.5px;\n stroke-linejoin: round;\n stroke-linecap: round;\n }\n .", " {\n fill-opacity: 0.24;\n }\n .", ",\n .", ",\n .", " {\n stroke: rgba(149, 149, 149, 0.24);\n }\n .", ",\n .", " {\n transition: opacity linear 200ms;\n pointer-events: none;\n stroke-width: 1px;\n }\n .", " {\n stroke: #fff;\n stroke-width: 2px;\n }\n .", " {\n shape-rendering: crispEdges;\n }\n .", " {\n fill: none;\n pointer-events: all;\n }\n"])), lineChartClassNames.lineChartYScaleGlobal, lineChartClassNames.lineChartXScaleGlobal, lineChartClassNames.lineChartGridGlobal, lineChartClassNames.lineChartLinesGlobal, lineChartClassNames.lineChartArea, lineChartClassNames.lineChartGridLineX, lineChartClassNames.lineChartGridLineY, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseCircle, lineChartClassNames.lineChartDot, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseRect);
|
|
1346
|
+
const TooltipStyles = /*#__PURE__*/createGlobalStyle(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n transition: opacity linear 200ms;\n z-index: 1;\n .", " {\n justify-content: flex-start;\n align-items: center;\n pointer-events: none;\n }\n .", " {\n margin: 0 0 0 10px;\n }\n }\n"])), lineChartClassNames.lineChartMouseLabel, lineChartClassNames.lineChartLabelFlex, lineChartClassNames.lineChartLabel);
|
|
1608
1347
|
|
|
1609
1348
|
const drawGrid = (_ref) => {
|
|
1610
1349
|
let {
|
|
@@ -1631,27 +1370,9 @@ const drawGrid = (_ref) => {
|
|
|
1631
1370
|
}
|
|
1632
1371
|
};
|
|
1633
1372
|
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
_templateObject2$3 = function _templateObject2() {
|
|
1638
|
-
return data;
|
|
1639
|
-
};
|
|
1640
|
-
|
|
1641
|
-
return data;
|
|
1642
|
-
}
|
|
1643
|
-
|
|
1644
|
-
function _templateObject$9() {
|
|
1645
|
-
const data = _taggedTemplateLiteralLoose(["\n width: 0;\n height: 0;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n font-size: 12px;\n white-space: nowrap;\n"]);
|
|
1646
|
-
|
|
1647
|
-
_templateObject$9 = function _templateObject() {
|
|
1648
|
-
return data;
|
|
1649
|
-
};
|
|
1650
|
-
|
|
1651
|
-
return data;
|
|
1652
|
-
}
|
|
1653
|
-
const LabelContainer$1 = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$9());
|
|
1654
|
-
const Label$2 = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$3());
|
|
1373
|
+
var _templateObject$9, _templateObject2$3;
|
|
1374
|
+
const LabelContainer$1 = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 0;\n height: 0;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n font-size: 12px;\n white-space: nowrap;\n"])));
|
|
1375
|
+
const Label$2 = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n"])));
|
|
1655
1376
|
|
|
1656
1377
|
const labelClassName$1 = 'd3-chart-label';
|
|
1657
1378
|
const drawLabel = (_ref) => {
|
|
@@ -1682,6 +1403,7 @@ const drawLabel = (_ref) => {
|
|
|
1682
1403
|
});
|
|
1683
1404
|
};
|
|
1684
1405
|
|
|
1406
|
+
const _excluded$1 = ["values"];
|
|
1685
1407
|
const drawTooltip$1 = (_ref) => {
|
|
1686
1408
|
let {
|
|
1687
1409
|
svg,
|
|
@@ -1798,7 +1520,7 @@ const drawTooltip$1 = (_ref) => {
|
|
|
1798
1520
|
let {
|
|
1799
1521
|
values
|
|
1800
1522
|
} = _ref7,
|
|
1801
|
-
rest = _objectWithoutPropertiesLoose(_ref7,
|
|
1523
|
+
rest = _objectWithoutPropertiesLoose(_ref7, _excluded$1);
|
|
1802
1524
|
|
|
1803
1525
|
return _extends({}, rest, {
|
|
1804
1526
|
value: getValue(values),
|
|
@@ -2169,7 +1891,7 @@ const drawLines = (_ref) => {
|
|
|
2169
1891
|
let linesSelection = null;
|
|
2170
1892
|
let areasSelection = null;
|
|
2171
1893
|
let area$1 = null;
|
|
2172
|
-
const line$1 = line().defined(d => d !== null).x((_, index) => xScale(index
|
|
1894
|
+
const line$1 = line().defined(d => d !== null).x((_, index) => xScale(index) + bandwidth / 2) // @ts-ignore
|
|
2173
1895
|
.y(d => yScale(d)).curve(curve || curveLinear);
|
|
2174
1896
|
const bandwidth = xScale.bandwidth();
|
|
2175
1897
|
const linesData = lineData.filter((_ref2) => {
|
|
@@ -2201,7 +1923,7 @@ const drawLines = (_ref) => {
|
|
|
2201
1923
|
|
|
2202
1924
|
if (areasData.length > 0) {
|
|
2203
1925
|
let dataIndex = -2;
|
|
2204
|
-
area$1 = area().x((_, index) => xScale(index
|
|
1926
|
+
area$1 = area().x((_, index) => xScale(index) + bandwidth / 2).y0((_, index) => {
|
|
2205
1927
|
if (index === 0) {
|
|
2206
1928
|
dataIndex = dataIndex + 1;
|
|
2207
1929
|
}
|
|
@@ -2224,25 +1946,7 @@ const drawLines = (_ref) => {
|
|
|
2224
1946
|
};
|
|
2225
1947
|
};
|
|
2226
1948
|
|
|
2227
|
-
|
|
2228
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n z-index: 1;\n transition: all linear 144ms;\n\n .", " {\n margin-bottom: 4px;\n :last-of-type {\n margin-bottom: 0;\n }\n }\n }\n"]);
|
|
2229
|
-
|
|
2230
|
-
_templateObject2$4 = function _templateObject2() {
|
|
2231
|
-
return data;
|
|
2232
|
-
};
|
|
2233
|
-
|
|
2234
|
-
return data;
|
|
2235
|
-
}
|
|
2236
|
-
|
|
2237
|
-
function _templateObject$a() {
|
|
2238
|
-
const data = _taggedTemplateLiteralLoose(["\n line {\n stroke-width: 1px;\n shape-rendering: crispEdges;\n }\n .", ",\n .", " {\n stroke: rgba(48, 69, 79, 0.06);\n }\n .", " {\n }\n .", " {\n fill: none;\n pointer-events: all;\n }\n .", " {\n stroke-width: 1.5px;\n stroke-linejoin: round;\n stroke-linecap: round;\n }\n .", " {\n shape-rendering: auto;\n }\n .", " {\n fill-opacity: 0.24;\n }\n"]);
|
|
2239
|
-
|
|
2240
|
-
_templateObject$a = function _templateObject() {
|
|
2241
|
-
return data;
|
|
2242
|
-
};
|
|
2243
|
-
|
|
2244
|
-
return data;
|
|
2245
|
-
}
|
|
1949
|
+
var _templateObject$a, _templateObject2$4;
|
|
2246
1950
|
const tooltipClassnames = {
|
|
2247
1951
|
barChartMouseRect: 'barChartMouseRect',
|
|
2248
1952
|
barChartMouseContainer: 'barChartMouseContainer',
|
|
@@ -2274,8 +1978,8 @@ const barChartClassNames = /*#__PURE__*/_extends({
|
|
|
2274
1978
|
barChartGridLineYZero: 'barChartGridLineYZero',
|
|
2275
1979
|
barChartGridLineY: 'barChartGridLineY'
|
|
2276
1980
|
}, tooltipClassnames, labelClassnames, barChartLinesClassNames);
|
|
2277
|
-
const SvgWrapper$4 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
2278
|
-
const TooltipStyles$1 = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/
|
|
1981
|
+
const SvgWrapper$4 = /*#__PURE__*/styled(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line {\n stroke-width: 1px;\n shape-rendering: crispEdges;\n }\n .", ",\n .", " {\n stroke: rgba(48, 69, 79, 0.06);\n }\n .", " {\n }\n .", " {\n fill: none;\n pointer-events: all;\n }\n .", " {\n stroke-width: 1.5px;\n stroke-linejoin: round;\n stroke-linecap: round;\n }\n .", " {\n shape-rendering: auto;\n }\n .", " {\n fill-opacity: 0.24;\n }\n"])), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea);
|
|
1982
|
+
const TooltipStyles$1 = /*#__PURE__*/createGlobalStyle(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n z-index: 1;\n transition: all linear 144ms;\n\n .", " {\n margin-bottom: 4px;\n :last-of-type {\n margin-bottom: 0;\n }\n }\n }\n"])), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
|
|
2279
1983
|
|
|
2280
1984
|
const drawGrid$1 = (_ref) => {
|
|
2281
1985
|
let {
|
|
@@ -2305,6 +2009,7 @@ const drawGrid$1 = (_ref) => {
|
|
|
2305
2009
|
}
|
|
2306
2010
|
};
|
|
2307
2011
|
|
|
2012
|
+
const _excluded$2 = ["groupName"];
|
|
2308
2013
|
const getDomain = (_ref) => {
|
|
2309
2014
|
let {
|
|
2310
2015
|
data,
|
|
@@ -2314,7 +2019,7 @@ const getDomain = (_ref) => {
|
|
|
2314
2019
|
let MIN = Number.POSITIVE_INFINITY;
|
|
2315
2020
|
let MAX = Number.NEGATIVE_INFINITY;
|
|
2316
2021
|
data.forEach((_ref2) => {
|
|
2317
|
-
let groups = _objectWithoutPropertiesLoose(_ref2,
|
|
2022
|
+
let groups = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
|
|
2318
2023
|
|
|
2319
2024
|
let groupMax = 0;
|
|
2320
2025
|
let groupMin = 0;
|
|
@@ -2351,6 +2056,7 @@ const getDomain = (_ref) => {
|
|
|
2351
2056
|
};
|
|
2352
2057
|
};
|
|
2353
2058
|
|
|
2059
|
+
const _excluded$3 = ["groupName"];
|
|
2354
2060
|
const marshaling = (_ref) => {
|
|
2355
2061
|
let {
|
|
2356
2062
|
data,
|
|
@@ -2365,7 +2071,7 @@ const marshaling = (_ref) => {
|
|
|
2365
2071
|
let {
|
|
2366
2072
|
groupName
|
|
2367
2073
|
} = _ref2,
|
|
2368
|
-
groups = _objectWithoutPropertiesLoose(_ref2,
|
|
2074
|
+
groups = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
|
|
2369
2075
|
|
|
2370
2076
|
const marshalledGroup = [];
|
|
2371
2077
|
const hundred = 100;
|
|
@@ -2436,6 +2142,7 @@ const getLabel = labelPosition => {
|
|
|
2436
2142
|
}
|
|
2437
2143
|
};
|
|
2438
2144
|
|
|
2145
|
+
const _excluded$4 = ["values"];
|
|
2439
2146
|
const drawTooltip$2 = (_ref) => {
|
|
2440
2147
|
let {
|
|
2441
2148
|
svg,
|
|
@@ -2558,7 +2265,7 @@ const drawTooltip$2 = (_ref) => {
|
|
|
2558
2265
|
}
|
|
2559
2266
|
|
|
2560
2267
|
const top = (typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2) + offsetY;
|
|
2561
|
-
const left = (tooltipBind ? (xScale(currIndex
|
|
2268
|
+
const left = (tooltipBind ? (xScale(currIndex) || 0) + bandwidth / 2 : x) + offsetX;
|
|
2562
2269
|
|
|
2563
2270
|
if (tooltipBind && flagCurrIndex === currIndex) {
|
|
2564
2271
|
return;
|
|
@@ -2575,7 +2282,7 @@ const drawTooltip$2 = (_ref) => {
|
|
|
2575
2282
|
let {
|
|
2576
2283
|
values
|
|
2577
2284
|
} = _ref4,
|
|
2578
|
-
rest = _objectWithoutPropertiesLoose(_ref4,
|
|
2285
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$4);
|
|
2579
2286
|
|
|
2580
2287
|
return _extends({}, rest, {
|
|
2581
2288
|
value: values[currIndex],
|
|
@@ -2709,7 +2416,7 @@ const drawTooltip$2 = (_ref) => {
|
|
|
2709
2416
|
groupIndex: index
|
|
2710
2417
|
};
|
|
2711
2418
|
}))) : marshalledData;
|
|
2712
|
-
const groups = labelContainer.selectAll('div').data(concatedData).enter().append('div').style('position', 'absolute').style('transform', (_, index) => "translate(" + Math.round(xScale(index
|
|
2419
|
+
const groups = labelContainer.selectAll('div').data(concatedData).enter().append('div').style('position', 'absolute').style('transform', (_, index) => "translate(" + Math.round(xScale(index)) + "px," + -(marginTop || 0) + "px)");
|
|
2713
2420
|
const LabelFlexStyled = labelPosition === 'center' ? LabelFlexCenter : LabelFlex;
|
|
2714
2421
|
const LabelStyle = getLabel(labelPosition);
|
|
2715
2422
|
groups.selectAll('span').data(item => onLabelItem ? onLabelItem(item) : item).join('div').style('left', item => Math.round(item.x + barWidth / 2) + "px").style('top', item => getLabelY(labelPosition, y2, item) + "px").style('position', 'absolute').html(item => ReactDOMServer.renderToString(React.createElement(LabelFlexStyled, {
|
|
@@ -2722,6 +2429,7 @@ const drawTooltip$2 = (_ref) => {
|
|
|
2722
2429
|
}
|
|
2723
2430
|
};
|
|
2724
2431
|
|
|
2432
|
+
const _excluded$5 = ["groupName"];
|
|
2725
2433
|
const resizeBarWidth = (_ref) => {
|
|
2726
2434
|
let {
|
|
2727
2435
|
data,
|
|
@@ -2733,7 +2441,7 @@ const resizeBarWidth = (_ref) => {
|
|
|
2733
2441
|
const groupPadding = typeof sectionPadding === 'number' ? sectionPadding : 0;
|
|
2734
2442
|
const chartWidth = range[1] - range[0];
|
|
2735
2443
|
const barsWidth = data.reduce((acc, _ref2) => {
|
|
2736
|
-
let curr = _objectWithoutPropertiesLoose(_ref2,
|
|
2444
|
+
let curr = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
|
|
2737
2445
|
|
|
2738
2446
|
return acc + Object.keys(curr).reduce((acc, _key, index) => index > 0 ? acc + (barWidth || 0) + (barPadding || 0) : acc + barWidth, 0) + groupPadding;
|
|
2739
2447
|
}, groupPadding);
|
|
@@ -2896,7 +2604,7 @@ const draw$4 = (node, props) => {
|
|
|
2896
2604
|
});
|
|
2897
2605
|
xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
|
|
2898
2606
|
const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal);
|
|
2899
|
-
const groups = gSvg.selectAll('g').data(marshalledData).enter().append('g').attr('transform', (_, i) => "translate(" + Math.round(xScale(i
|
|
2607
|
+
const groups = gSvg.selectAll('g').data(marshalledData).enter().append('g').attr('transform', (_, i) => "translate(" + Math.round(xScale(i)) + "," + -(marginTop || 0) + ")");
|
|
2900
2608
|
const bars = drawBars ? drawBars({
|
|
2901
2609
|
groups,
|
|
2902
2610
|
yScale,
|
|
@@ -3007,6 +2715,7 @@ BarChart.defaultProps = {
|
|
|
3007
2715
|
sectionPadding: 1
|
|
3008
2716
|
};
|
|
3009
2717
|
|
|
2718
|
+
const _excluded$6 = ["value"];
|
|
3010
2719
|
const hundred = 100;
|
|
3011
2720
|
const useMarshaling = (_ref) => {
|
|
3012
2721
|
let {
|
|
@@ -3039,7 +2748,7 @@ const useMarshaling = (_ref) => {
|
|
|
3039
2748
|
let {
|
|
3040
2749
|
value
|
|
3041
2750
|
} = _ref4,
|
|
3042
|
-
rest = _objectWithoutPropertiesLoose(_ref4,
|
|
2751
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$6);
|
|
3043
2752
|
|
|
3044
2753
|
return _extends({}, rest, {
|
|
3045
2754
|
value,
|
|
@@ -3052,85 +2761,7 @@ const useMarshaling = (_ref) => {
|
|
|
3052
2761
|
}, [data, fullExtent, maxValue, labels]);
|
|
3053
2762
|
};
|
|
3054
2763
|
|
|
3055
|
-
|
|
3056
|
-
const data = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n display: flex;\n justify-content: flex-start;\n height: 100%;\n"]);
|
|
3057
|
-
|
|
3058
|
-
_templateObject8$1 = function _templateObject8() {
|
|
3059
|
-
return data;
|
|
3060
|
-
};
|
|
3061
|
-
|
|
3062
|
-
return data;
|
|
3063
|
-
}
|
|
3064
|
-
|
|
3065
|
-
function _templateObject7$1() {
|
|
3066
|
-
const data = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(0, -50%);\n"]);
|
|
3067
|
-
|
|
3068
|
-
_templateObject7$1 = function _templateObject7() {
|
|
3069
|
-
return data;
|
|
3070
|
-
};
|
|
3071
|
-
|
|
3072
|
-
return data;
|
|
3073
|
-
}
|
|
3074
|
-
|
|
3075
|
-
function _templateObject6$2() {
|
|
3076
|
-
const data = _taggedTemplateLiteralLoose(["\n position: relative;\n"]);
|
|
3077
|
-
|
|
3078
|
-
_templateObject6$2 = function _templateObject6() {
|
|
3079
|
-
return data;
|
|
3080
|
-
};
|
|
3081
|
-
|
|
3082
|
-
return data;
|
|
3083
|
-
}
|
|
3084
|
-
|
|
3085
|
-
function _templateObject5$2() {
|
|
3086
|
-
const data = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n will-change: left, top;\n"]);
|
|
3087
|
-
|
|
3088
|
-
_templateObject5$2 = function _templateObject5() {
|
|
3089
|
-
return data;
|
|
3090
|
-
};
|
|
3091
|
-
|
|
3092
|
-
return data;
|
|
3093
|
-
}
|
|
3094
|
-
|
|
3095
|
-
function _templateObject4$2() {
|
|
3096
|
-
const data = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n vertical-align: middle;\n"]);
|
|
3097
|
-
|
|
3098
|
-
_templateObject4$2 = function _templateObject4() {
|
|
3099
|
-
return data;
|
|
3100
|
-
};
|
|
3101
|
-
|
|
3102
|
-
return data;
|
|
3103
|
-
}
|
|
3104
|
-
|
|
3105
|
-
function _templateObject3$2() {
|
|
3106
|
-
const data = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n height: 1rem;\n"]);
|
|
3107
|
-
|
|
3108
|
-
_templateObject3$2 = function _templateObject3() {
|
|
3109
|
-
return data;
|
|
3110
|
-
};
|
|
3111
|
-
|
|
3112
|
-
return data;
|
|
3113
|
-
}
|
|
3114
|
-
|
|
3115
|
-
function _templateObject2$5() {
|
|
3116
|
-
const data = _taggedTemplateLiteralLoose(["\n text-align: right;\n"]);
|
|
3117
|
-
|
|
3118
|
-
_templateObject2$5 = function _templateObject2() {
|
|
3119
|
-
return data;
|
|
3120
|
-
};
|
|
3121
|
-
|
|
3122
|
-
return data;
|
|
3123
|
-
}
|
|
3124
|
-
|
|
3125
|
-
function _templateObject$b() {
|
|
3126
|
-
const data = _taggedTemplateLiteralLoose(["\n width: 100%;\n"]);
|
|
3127
|
-
|
|
3128
|
-
_templateObject$b = function _templateObject() {
|
|
3129
|
-
return data;
|
|
3130
|
-
};
|
|
3131
|
-
|
|
3132
|
-
return data;
|
|
3133
|
-
}
|
|
2764
|
+
var _templateObject$b, _templateObject2$5, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1;
|
|
3134
2765
|
const horizontalBarChartClassNames = {
|
|
3135
2766
|
horizontalBarChartButtonTd: 'horizontalBarChartButtonTd',
|
|
3136
2767
|
horizontalBarChartLabelTd: 'horizontalBarChartLabelTd',
|
|
@@ -3153,14 +2784,14 @@ const horizontalBarChartClassNames = {
|
|
|
3153
2784
|
horizontalBarChartTooltipName: 'horizontalBarChartTooltipName',
|
|
3154
2785
|
horizontalBarChartTooltipValue: 'horizontalBarChartTooltipValue'
|
|
3155
2786
|
};
|
|
3156
|
-
const Table = /*#__PURE__*/styled.table( /*#__PURE__*/
|
|
3157
|
-
const LabelCell = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
3158
|
-
const BarFlex = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
3159
|
-
const BarsTd = /*#__PURE__*/styled.td( /*#__PURE__*/
|
|
3160
|
-
const TooltipFlex$1 = /*#__PURE__*/styled(TooltipFlex)( /*#__PURE__*/
|
|
3161
|
-
const StackSumContainer = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
3162
|
-
const StackSum = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
3163
|
-
const StackWrapper = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
2787
|
+
const Table = /*#__PURE__*/styled.table(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
2788
|
+
const LabelCell = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
|
|
2789
|
+
const BarFlex = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n height: 1rem;\n"])));
|
|
2790
|
+
const BarsTd = /*#__PURE__*/styled.td(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n vertical-align: middle;\n"])));
|
|
2791
|
+
const TooltipFlex$1 = /*#__PURE__*/styled(TooltipFlex)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n will-change: left, top;\n"])));
|
|
2792
|
+
const StackSumContainer = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
2793
|
+
const StackSum = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(0, -50%);\n"])));
|
|
2794
|
+
const StackWrapper = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n display: flex;\n justify-content: flex-start;\n height: 100%;\n"])));
|
|
3164
2795
|
|
|
3165
2796
|
const Tooltip = (_ref) => {
|
|
3166
2797
|
let {
|
|
@@ -3250,6 +2881,7 @@ const useTooltip = (_ref) => {
|
|
|
3250
2881
|
return [onMouseMove, onMouseLeave];
|
|
3251
2882
|
};
|
|
3252
2883
|
|
|
2884
|
+
const _excluded$7 = ["item", "mouseMove", "mouseLeave", "tooltipBind"];
|
|
3253
2885
|
const useStackWrapper = stackedTooltip => {
|
|
3254
2886
|
return useMemo(() => stackedTooltip ? (_ref) => {
|
|
3255
2887
|
let {
|
|
@@ -3258,7 +2890,7 @@ const useStackWrapper = stackedTooltip => {
|
|
|
3258
2890
|
mouseLeave,
|
|
3259
2891
|
tooltipBind
|
|
3260
2892
|
} = _ref,
|
|
3261
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
2893
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
3262
2894
|
|
|
3263
2895
|
return React.createElement(StackWrapper, Object.assign({
|
|
3264
2896
|
className: horizontalBarChartClassNames.horizontalBarChartStackWrapper,
|
|
@@ -3274,16 +2906,8 @@ const useStackWrapper = stackedTooltip => {
|
|
|
3274
2906
|
}, [stackedTooltip]);
|
|
3275
2907
|
};
|
|
3276
2908
|
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
_templateObject$c = function _templateObject() {
|
|
3281
|
-
return data;
|
|
3282
|
-
};
|
|
3283
|
-
|
|
3284
|
-
return data;
|
|
3285
|
-
}
|
|
3286
|
-
const BarStyled = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$c());
|
|
2909
|
+
var _templateObject$c;
|
|
2910
|
+
const BarStyled = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n height: 100%;\n"])));
|
|
3287
2911
|
|
|
3288
2912
|
const Bar = (_ref) => {
|
|
3289
2913
|
let {
|
|
@@ -3336,38 +2960,10 @@ const useScale = (_ref) => {
|
|
|
3336
2960
|
}, [maxValue, scaleTicks, scaleDomain]);
|
|
3337
2961
|
};
|
|
3338
2962
|
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
return data;
|
|
3344
|
-
};
|
|
3345
|
-
|
|
3346
|
-
return data;
|
|
3347
|
-
}
|
|
3348
|
-
|
|
3349
|
-
function _templateObject2$6() {
|
|
3350
|
-
const data = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 1rem;\n"]);
|
|
3351
|
-
|
|
3352
|
-
_templateObject2$6 = function _templateObject2() {
|
|
3353
|
-
return data;
|
|
3354
|
-
};
|
|
3355
|
-
|
|
3356
|
-
return data;
|
|
3357
|
-
}
|
|
3358
|
-
|
|
3359
|
-
function _templateObject$d() {
|
|
3360
|
-
const data = _taggedTemplateLiteralLoose(["\n position: relative;\n"]);
|
|
3361
|
-
|
|
3362
|
-
_templateObject$d = function _templateObject() {
|
|
3363
|
-
return data;
|
|
3364
|
-
};
|
|
3365
|
-
|
|
3366
|
-
return data;
|
|
3367
|
-
}
|
|
3368
|
-
const TickTd = /*#__PURE__*/styled.td( /*#__PURE__*/_templateObject$d());
|
|
3369
|
-
const Ticks = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$6());
|
|
3370
|
-
const Tick = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3$3());
|
|
2963
|
+
var _templateObject$d, _templateObject2$6, _templateObject3$3;
|
|
2964
|
+
const TickTd = /*#__PURE__*/styled.td(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
2965
|
+
const Ticks = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 1rem;\n"])));
|
|
2966
|
+
const Tick = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
3371
2967
|
|
|
3372
2968
|
const XScale = (_ref) => {
|
|
3373
2969
|
let {
|
|
@@ -3524,25 +3120,7 @@ HorizontalBarChart.defaultProps = {
|
|
|
3524
3120
|
withoutXScale: false
|
|
3525
3121
|
};
|
|
3526
3122
|
|
|
3527
|
-
|
|
3528
|
-
const data = _taggedTemplateLiteralLoose(["\n .", " {\n position: absolute;\n transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);\n pointer-events: none;\n z-index: 1;\n }\n"]);
|
|
3529
|
-
|
|
3530
|
-
_templateObject2$7 = function _templateObject2() {
|
|
3531
|
-
return data;
|
|
3532
|
-
};
|
|
3533
|
-
|
|
3534
|
-
return data;
|
|
3535
|
-
}
|
|
3536
|
-
|
|
3537
|
-
function _templateObject$e() {
|
|
3538
|
-
const data = _taggedTemplateLiteralLoose(["\n .", ",\n .", ",\n .", " {\n shape-rendering: crispEdges;\n }\n\n .", ",\n .", " {\n stroke: rgba(149, 149, 149, 0.24);\n }\n\n .", " {\n font-size: 10px;\n }\n"]);
|
|
3539
|
-
|
|
3540
|
-
_templateObject$e = function _templateObject() {
|
|
3541
|
-
return data;
|
|
3542
|
-
};
|
|
3543
|
-
|
|
3544
|
-
return data;
|
|
3545
|
-
}
|
|
3123
|
+
var _templateObject$e, _templateObject2$7;
|
|
3546
3124
|
const bubbleChartClassNames = {
|
|
3547
3125
|
bubbleChartYAxis: 'bubbleChartYAxis',
|
|
3548
3126
|
bubbleChartYAxisZeroTick: 'bubbleChartYAxisZeroTick',
|
|
@@ -3557,8 +3135,8 @@ const bubbleChartClassNames = {
|
|
|
3557
3135
|
bubbleChartTooltipFlex: 'bubbleChartTooltipFlex',
|
|
3558
3136
|
bubbleChartTip: 'bubbleChartTip'
|
|
3559
3137
|
};
|
|
3560
|
-
const SvgWrapper$5 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/
|
|
3561
|
-
const TooltipStyles$2 = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/
|
|
3138
|
+
const SvgWrapper$5 = /*#__PURE__*/styled(Wrapper)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", ",\n .", ",\n .", " {\n shape-rendering: crispEdges;\n }\n\n .", ",\n .", " {\n stroke: rgba(149, 149, 149, 0.24);\n }\n\n .", " {\n font-size: 10px;\n }\n"])), bubbleChartClassNames.bubbleChartYAxis, bubbleChartClassNames.bubbleChartXAxis, bubbleChartClassNames.bubbleChartGridGlobal, bubbleChartClassNames.bubbleChartGridLineX, bubbleChartClassNames.bubbleChartGridLineY, bubbleChartClassNames.bubbleChartYScaleLabel);
|
|
3139
|
+
const TooltipStyles$2 = /*#__PURE__*/createGlobalStyle(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .", " {\n position: absolute;\n transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);\n pointer-events: none;\n z-index: 1;\n }\n"])), bubbleChartClassNames.bubbleChartTooltipContainer);
|
|
3562
3140
|
|
|
3563
3141
|
const drawGrid$2 = (_ref) => {
|
|
3564
3142
|
let {
|
|
@@ -3583,16 +3161,8 @@ const drawGrid$2 = (_ref) => {
|
|
|
3583
3161
|
}
|
|
3584
3162
|
};
|
|
3585
3163
|
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
_templateObject$f = function _templateObject() {
|
|
3590
|
-
return data;
|
|
3591
|
-
};
|
|
3592
|
-
|
|
3593
|
-
return data;
|
|
3594
|
-
}
|
|
3595
|
-
const Tooltip$1 = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$f());
|
|
3164
|
+
var _templateObject$f;
|
|
3165
|
+
const Tooltip$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 0;\n height: 0;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n font-size: 12px;\n white-space: nowrap;\n"])));
|
|
3596
3166
|
|
|
3597
3167
|
const drawTooltip$3 = (_ref) => {
|
|
3598
3168
|
let {
|