@evergis/charts 3.1.14 → 3.1.15
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/LICENSE +21 -21
- package/README.md +25 -25
- package/dist/charts/LineChart/types.d.ts +2 -0
- package/dist/charts.esm.js +462 -447
- package/dist/charts.esm.js.map +1 -1
- package/dist/helpers/drawMarkers.d.ts +10 -0
- package/dist/helpers/index.d.ts +1 -0
- package/dist/index.js +462 -446
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/charts.esm.js
CHANGED
|
@@ -6,10 +6,10 @@ import ReactDOMServer from 'react-dom/server';
|
|
|
6
6
|
import { uniqueId } from 'lodash';
|
|
7
7
|
import { unmountComponentAtNode, render } from 'react-dom';
|
|
8
8
|
|
|
9
|
-
const Wrapper = styled.div `
|
|
10
|
-
position: relative;
|
|
11
|
-
width: 100%;
|
|
12
|
-
box-sizing: border-box;
|
|
9
|
+
const Wrapper = styled.div `
|
|
10
|
+
position: relative;
|
|
11
|
+
width: 100%;
|
|
12
|
+
box-sizing: border-box;
|
|
13
13
|
`;
|
|
14
14
|
|
|
15
15
|
function useNode() {
|
|
@@ -57,10 +57,60 @@ const appendSvg = (node, width, height) => {
|
|
|
57
57
|
return svg;
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
const drawMarkers = ({ svg, markers, width, left, top, count, yScale }) => {
|
|
61
|
+
markers?.filter(marker => marker?.value > -1).forEach(marker => {
|
|
62
|
+
const x = left + ((width - left) / count * marker.value + 1);
|
|
63
|
+
if (marker.horizontal) {
|
|
64
|
+
if (marker.line) {
|
|
65
|
+
svg.append('line')
|
|
66
|
+
.style("stroke", marker.lineColor || marker.color || "inherit")
|
|
67
|
+
.style("stroke-width", 1)
|
|
68
|
+
.style("stroke-dasharray", ("5, 3"))
|
|
69
|
+
.attr("x1", left)
|
|
70
|
+
.attr("y1", yScale(marker.value) + 1)
|
|
71
|
+
.attr("x2", width)
|
|
72
|
+
.attr("y2", yScale(marker.value) + 1);
|
|
73
|
+
}
|
|
74
|
+
svg.append("text")
|
|
75
|
+
.attr("y", yScale(marker.value) + 1)
|
|
76
|
+
.attr("x", left)
|
|
77
|
+
.attr('text-anchor', 'middle')
|
|
78
|
+
.attr("class", ["marker", marker.className].filter(Boolean).join(" "))
|
|
79
|
+
.style("fill", marker?.color || "inherit")
|
|
80
|
+
.text(marker.label);
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (marker.line) {
|
|
84
|
+
svg.append('line')
|
|
85
|
+
.style("stroke", marker.lineColor || marker.color || "inherit")
|
|
86
|
+
.style("stroke-width", 1)
|
|
87
|
+
.style("stroke-dasharray", ("5, 3"))
|
|
88
|
+
.attr("x1", x)
|
|
89
|
+
.attr("y1", 0)
|
|
90
|
+
.attr("x2", x)
|
|
91
|
+
.attr("y2", (top - 12));
|
|
92
|
+
}
|
|
93
|
+
svg.append("text")
|
|
94
|
+
.attr("y", top - 4)
|
|
95
|
+
.attr("x", x)
|
|
96
|
+
.attr("text-anchor", (_, i) => !marker.align && !i ? "left"
|
|
97
|
+
: marker.align === "right"
|
|
98
|
+
? "end"
|
|
99
|
+
: marker.align === "left"
|
|
100
|
+
? "start"
|
|
101
|
+
: "middle")
|
|
102
|
+
.attr("class", ["marker", marker.className].filter(Boolean).join(" "))
|
|
103
|
+
.style("fill", marker?.color || "inherit")
|
|
104
|
+
.style("font-size", "0.625rem")
|
|
105
|
+
.style("line-height", "0")
|
|
106
|
+
.text(marker.label);
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
const SwipeScrollContainer = styled.div `
|
|
111
|
+
width: 100%;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
user-select: none;
|
|
64
114
|
`;
|
|
65
115
|
|
|
66
116
|
function animate({ duration, timing, draw, }) {
|
|
@@ -212,37 +262,37 @@ const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
|
|
|
212
262
|
}
|
|
213
263
|
return `translate(${translateX}px, ${translateY}px)`;
|
|
214
264
|
};
|
|
215
|
-
const Label$2 = styled.div `
|
|
216
|
-
display: flex;
|
|
217
|
-
align-items: center;
|
|
218
|
-
font-size: 12px;
|
|
265
|
+
const Label$2 = styled.div `
|
|
266
|
+
display: flex;
|
|
267
|
+
align-items: center;
|
|
268
|
+
font-size: 12px;
|
|
219
269
|
`;
|
|
220
|
-
const Name$1 = styled.div `
|
|
221
|
-
text-align: center;
|
|
222
|
-
max-width: 120px;
|
|
270
|
+
const Name$1 = styled.div `
|
|
271
|
+
text-align: center;
|
|
272
|
+
max-width: 120px;
|
|
223
273
|
`;
|
|
224
|
-
const middleBadgeStyles = css `
|
|
225
|
-
position: absolute;
|
|
226
|
-
top: 50%;
|
|
227
|
-
right: 0;
|
|
228
|
-
transform: translate(calc(100% + 6px), -50%);
|
|
274
|
+
const middleBadgeStyles = css `
|
|
275
|
+
position: absolute;
|
|
276
|
+
top: 50%;
|
|
277
|
+
right: 0;
|
|
278
|
+
transform: translate(calc(100% + 6px), -50%);
|
|
229
279
|
`;
|
|
230
|
-
const DefaultBadge = styled.div `
|
|
231
|
-
display: flex;
|
|
232
|
-
align-items: center;
|
|
233
|
-
padding: 2px 4px;
|
|
234
|
-
border-radius: 4px;
|
|
235
|
-
color: rgb(255, 255, 255);
|
|
236
|
-
background-color: rgb(144, 197, 61);
|
|
237
|
-
margin-left: 8px;
|
|
280
|
+
const DefaultBadge = styled.div `
|
|
281
|
+
display: flex;
|
|
282
|
+
align-items: center;
|
|
283
|
+
padding: 2px 4px;
|
|
284
|
+
border-radius: 4px;
|
|
285
|
+
color: rgb(255, 255, 255);
|
|
286
|
+
background-color: rgb(144, 197, 61);
|
|
287
|
+
margin-left: 8px;
|
|
238
288
|
`;
|
|
239
|
-
const MiddleBadge = styled(DefaultBadge) `
|
|
240
|
-
${middleBadgeStyles}
|
|
289
|
+
const MiddleBadge = styled(DefaultBadge) `
|
|
290
|
+
${middleBadgeStyles}
|
|
241
291
|
`;
|
|
242
|
-
const BadgePrefix = styled.div `
|
|
243
|
-
margin-left: 4px;
|
|
244
|
-
font-size: 10px;
|
|
245
|
-
color: rgba(255, 255, 255, 0.54);
|
|
292
|
+
const BadgePrefix = styled.div `
|
|
293
|
+
margin-left: 4px;
|
|
294
|
+
font-size: 10px;
|
|
295
|
+
color: rgba(255, 255, 255, 0.54);
|
|
246
296
|
`;
|
|
247
297
|
|
|
248
298
|
const radarChartclassNames = {
|
|
@@ -257,29 +307,29 @@ const radarChartclassNames = {
|
|
|
257
307
|
radarLabelBadgePrefix: 'radarLabelBadgePrefix',
|
|
258
308
|
radarCircle: 'radarCircle',
|
|
259
309
|
};
|
|
260
|
-
const SvgWrapper$5 = styled(Wrapper) `
|
|
261
|
-
.${radarChartclassNames.radarAxis} {
|
|
262
|
-
path,
|
|
263
|
-
line,
|
|
264
|
-
circle {
|
|
265
|
-
fill: none;
|
|
266
|
-
stroke-width: 1px;
|
|
267
|
-
stroke: rgba(149, 149, 149, 0.18);
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
.${radarChartclassNames.radarAxisText} {
|
|
271
|
-
font-size: 12px;
|
|
272
|
-
fill-opacity: 0.56;
|
|
273
|
-
}
|
|
274
|
-
.${radarChartclassNames.radarPolygon} {
|
|
275
|
-
fill-opacity: 0.06;
|
|
276
|
-
stroke-width: 2px;
|
|
277
|
-
fill: rgb(144, 197, 61);
|
|
278
|
-
stroke: rgb(144, 197, 61);
|
|
279
|
-
}
|
|
280
|
-
.${radarChartclassNames.radarCircle} {
|
|
281
|
-
fill: rgb(144, 197, 61);
|
|
282
|
-
}
|
|
310
|
+
const SvgWrapper$5 = styled(Wrapper) `
|
|
311
|
+
.${radarChartclassNames.radarAxis} {
|
|
312
|
+
path,
|
|
313
|
+
line,
|
|
314
|
+
circle {
|
|
315
|
+
fill: none;
|
|
316
|
+
stroke-width: 1px;
|
|
317
|
+
stroke: rgba(149, 149, 149, 0.18);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
.${radarChartclassNames.radarAxisText} {
|
|
321
|
+
font-size: 12px;
|
|
322
|
+
fill-opacity: 0.56;
|
|
323
|
+
}
|
|
324
|
+
.${radarChartclassNames.radarPolygon} {
|
|
325
|
+
fill-opacity: 0.06;
|
|
326
|
+
stroke-width: 2px;
|
|
327
|
+
fill: rgb(144, 197, 61);
|
|
328
|
+
stroke: rgb(144, 197, 61);
|
|
329
|
+
}
|
|
330
|
+
.${radarChartclassNames.radarCircle} {
|
|
331
|
+
fill: rgb(144, 197, 61);
|
|
332
|
+
}
|
|
283
333
|
`;
|
|
284
334
|
|
|
285
335
|
const getTranslate = ({ anchor, index, translateX, translateY, }) => {
|
|
@@ -301,8 +351,8 @@ const LabelContainer$1 = styled.div.attrs(props => ({
|
|
|
301
351
|
style: {
|
|
302
352
|
transform: getTranslate(props),
|
|
303
353
|
},
|
|
304
|
-
})) `
|
|
305
|
-
position: absolute;
|
|
354
|
+
})) `
|
|
355
|
+
position: absolute;
|
|
306
356
|
`;
|
|
307
357
|
|
|
308
358
|
const degByIndex = (index, count) => {
|
|
@@ -575,21 +625,21 @@ const pieChartclassNames = {
|
|
|
575
625
|
pieTooltipColorBox: 'pieTooltipColorBox',
|
|
576
626
|
pieFullChartTooltipCircle: 'pieFullChartTooltipCircle',
|
|
577
627
|
};
|
|
578
|
-
const SvgWrapper$4 = styled(Wrapper) `
|
|
579
|
-
.${pieChartclassNames.pieSliceLabel} {
|
|
580
|
-
fill: #4a4a4a;
|
|
581
|
-
}
|
|
582
|
-
.${pieChartclassNames.pieRadialLabel} {
|
|
583
|
-
position: absolute;
|
|
584
|
-
max-width: 128px;
|
|
585
|
-
}
|
|
586
|
-
.${pieChartclassNames.pieRadialLink} {
|
|
587
|
-
stroke: #000;
|
|
588
|
-
}
|
|
589
|
-
.${pieChartclassNames.pieFullChartTooltipCircle} {
|
|
590
|
-
fill: transparent;
|
|
591
|
-
cursor: pointer;
|
|
592
|
-
}
|
|
628
|
+
const SvgWrapper$4 = styled(Wrapper) `
|
|
629
|
+
.${pieChartclassNames.pieSliceLabel} {
|
|
630
|
+
fill: #4a4a4a;
|
|
631
|
+
}
|
|
632
|
+
.${pieChartclassNames.pieRadialLabel} {
|
|
633
|
+
position: absolute;
|
|
634
|
+
max-width: 128px;
|
|
635
|
+
}
|
|
636
|
+
.${pieChartclassNames.pieRadialLink} {
|
|
637
|
+
stroke: #000;
|
|
638
|
+
}
|
|
639
|
+
.${pieChartclassNames.pieFullChartTooltipCircle} {
|
|
640
|
+
fill: transparent;
|
|
641
|
+
cursor: pointer;
|
|
642
|
+
}
|
|
593
643
|
`;
|
|
594
644
|
|
|
595
645
|
const getMidFactor = (d) => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
|
|
@@ -680,90 +730,90 @@ const drawRadialLabels = ({ arc, enableRadialLabels, global, node, radius, dataR
|
|
|
680
730
|
}
|
|
681
731
|
};
|
|
682
732
|
|
|
683
|
-
const TooltipFlex$1 = styled.div `
|
|
684
|
-
width: 0;
|
|
685
|
-
height: 0;
|
|
686
|
-
display: flex;
|
|
687
|
-
align-items: flex-end;
|
|
688
|
-
justify-content: center;
|
|
689
|
-
pointer-events: none;
|
|
690
|
-
white-space: nowrap;
|
|
733
|
+
const TooltipFlex$1 = styled.div `
|
|
734
|
+
width: 0;
|
|
735
|
+
height: 0;
|
|
736
|
+
display: flex;
|
|
737
|
+
align-items: flex-end;
|
|
738
|
+
justify-content: center;
|
|
739
|
+
pointer-events: none;
|
|
740
|
+
white-space: nowrap;
|
|
691
741
|
`;
|
|
692
742
|
const LabelFlex = styled(TooltipFlex$1) ``;
|
|
693
|
-
const LabelFlexCenter = styled(LabelFlex) `
|
|
694
|
-
align-items: center;
|
|
743
|
+
const LabelFlexCenter = styled(LabelFlex) `
|
|
744
|
+
align-items: center;
|
|
695
745
|
`;
|
|
696
|
-
const TooltipContainer = styled.div `
|
|
697
|
-
position: relative;
|
|
698
|
-
font-size: 11px;
|
|
699
|
-
color: #fff;
|
|
700
|
-
margin-bottom: 8px;
|
|
701
|
-
padding: 4px 6px;
|
|
702
|
-
background-color: rgba(48, 69, 79, 1);
|
|
703
|
-
border-radius: 4px;
|
|
704
|
-
box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
|
|
705
|
-
|
|
706
|
-
:before {
|
|
707
|
-
content: '';
|
|
708
|
-
position: absolute;
|
|
709
|
-
bottom: 0;
|
|
710
|
-
left: 50%;
|
|
711
|
-
transform: translate(-50%, 100%);
|
|
712
|
-
width: 0;
|
|
713
|
-
height: 0;
|
|
714
|
-
border-style: solid;
|
|
715
|
-
border-width: 4px 3px 0 3px;
|
|
716
|
-
border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
|
|
717
|
-
}
|
|
746
|
+
const TooltipContainer = styled.div `
|
|
747
|
+
position: relative;
|
|
748
|
+
font-size: 11px;
|
|
749
|
+
color: #fff;
|
|
750
|
+
margin-bottom: 8px;
|
|
751
|
+
padding: 4px 6px;
|
|
752
|
+
background-color: rgba(48, 69, 79, 1);
|
|
753
|
+
border-radius: 4px;
|
|
754
|
+
box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
|
|
755
|
+
|
|
756
|
+
:before {
|
|
757
|
+
content: '';
|
|
758
|
+
position: absolute;
|
|
759
|
+
bottom: 0;
|
|
760
|
+
left: 50%;
|
|
761
|
+
transform: translate(-50%, 100%);
|
|
762
|
+
width: 0;
|
|
763
|
+
height: 0;
|
|
764
|
+
border-style: solid;
|
|
765
|
+
border-width: 4px 3px 0 3px;
|
|
766
|
+
border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
|
|
767
|
+
}
|
|
718
768
|
`;
|
|
719
|
-
const TooltipGroupName = styled.div `
|
|
720
|
-
font-size: 14px;
|
|
721
|
-
margin-bottom: 6px;
|
|
769
|
+
const TooltipGroupName = styled.div `
|
|
770
|
+
font-size: 14px;
|
|
771
|
+
margin-bottom: 6px;
|
|
722
772
|
`;
|
|
723
|
-
const TooltipItem = styled.div `
|
|
724
|
-
display: flex;
|
|
725
|
-
align-items: center;
|
|
726
|
-
margin-bottom: 0.25rem;
|
|
727
|
-
|
|
728
|
-
&:last-of-type {
|
|
729
|
-
margin-bottom: 0;
|
|
730
|
-
}
|
|
773
|
+
const TooltipItem = styled.div `
|
|
774
|
+
display: flex;
|
|
775
|
+
align-items: center;
|
|
776
|
+
margin-bottom: 0.25rem;
|
|
777
|
+
|
|
778
|
+
&:last-of-type {
|
|
779
|
+
margin-bottom: 0;
|
|
780
|
+
}
|
|
731
781
|
`;
|
|
732
|
-
const ColFlex = styled.div `
|
|
733
|
-
display: flex;
|
|
734
|
-
align-items: center;
|
|
735
|
-
margin-right: 4px;
|
|
782
|
+
const ColFlex = styled.div `
|
|
783
|
+
display: flex;
|
|
784
|
+
align-items: center;
|
|
785
|
+
margin-right: 4px;
|
|
736
786
|
`;
|
|
737
|
-
const ColorBox = styled.div `
|
|
738
|
-
margin-right: 4px;
|
|
739
|
-
width: 10px;
|
|
740
|
-
height: 10px;
|
|
741
|
-
border-radius: 2px;
|
|
787
|
+
const ColorBox = styled.div `
|
|
788
|
+
margin-right: 4px;
|
|
789
|
+
width: 10px;
|
|
790
|
+
height: 10px;
|
|
791
|
+
border-radius: 2px;
|
|
742
792
|
`;
|
|
743
|
-
const ColorLine = styled(ColorBox) `
|
|
744
|
-
height: 2px;
|
|
745
|
-
border-radius: 0;
|
|
793
|
+
const ColorLine = styled(ColorBox) `
|
|
794
|
+
height: 2px;
|
|
795
|
+
border-radius: 0;
|
|
746
796
|
`;
|
|
747
|
-
const Name = styled.div `
|
|
748
|
-
margin-right: 4px;
|
|
797
|
+
const Name = styled.div `
|
|
798
|
+
margin-right: 4px;
|
|
749
799
|
`;
|
|
750
|
-
const Value = styled.div `
|
|
751
|
-
text-align: right;
|
|
752
|
-
flex-shrink: 0;
|
|
753
|
-
flex-grow: 1;
|
|
800
|
+
const Value = styled.div `
|
|
801
|
+
text-align: right;
|
|
802
|
+
flex-shrink: 0;
|
|
803
|
+
flex-grow: 1;
|
|
754
804
|
`;
|
|
755
|
-
const Label$1 = styled.div `
|
|
756
|
-
position: relative;
|
|
757
|
-
font-size: 11px;
|
|
758
|
-
color: #fff;
|
|
759
|
-
font-weight: bold;
|
|
760
|
-
letter-spacing: 0.52px;
|
|
805
|
+
const Label$1 = styled.div `
|
|
806
|
+
position: relative;
|
|
807
|
+
font-size: 11px;
|
|
808
|
+
color: #fff;
|
|
809
|
+
font-weight: bold;
|
|
810
|
+
letter-spacing: 0.52px;
|
|
761
811
|
`;
|
|
762
|
-
const LabelTop = styled(Label$1) `
|
|
763
|
-
top: 6px;
|
|
812
|
+
const LabelTop = styled(Label$1) `
|
|
813
|
+
top: 6px;
|
|
764
814
|
`;
|
|
765
|
-
const LabelBottom = styled(Label$1) `
|
|
766
|
-
bottom: 6px;
|
|
815
|
+
const LabelBottom = styled(Label$1) `
|
|
816
|
+
bottom: 6px;
|
|
767
817
|
`;
|
|
768
818
|
|
|
769
819
|
const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
|
|
@@ -1152,53 +1202,53 @@ const calendarChartClassNames = {
|
|
|
1152
1202
|
...legendClassNames,
|
|
1153
1203
|
};
|
|
1154
1204
|
const headerHeight = "20px";
|
|
1155
|
-
const SvgWrapper$3 = styled(Wrapper) `
|
|
1156
|
-
.${calendarChartClassNames.calendarYear} {
|
|
1157
|
-
display: flex;
|
|
1158
|
-
margin-bottom: 16px;
|
|
1159
|
-
}
|
|
1160
|
-
|
|
1161
|
-
.${calendarChartClassNames.calendarYearTitle} {
|
|
1162
|
-
display: inline-flex;
|
|
1163
|
-
align-items: flex-end;
|
|
1164
|
-
height: ${headerHeight};
|
|
1165
|
-
margin-bottom: 4px;
|
|
1166
|
-
font-weight: bold;
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
.${calendarChartClassNames.calendarHeader} {
|
|
1170
|
-
height: ${headerHeight};
|
|
1171
|
-
margin-bottom: 4px;
|
|
1172
|
-
position: relative;
|
|
1173
|
-
display: flex;
|
|
1174
|
-
}
|
|
1175
|
-
|
|
1176
|
-
.${calendarChartClassNames.calendarMonth} {
|
|
1177
|
-
font-size: 14px;
|
|
1178
|
-
bottom: 0;
|
|
1179
|
-
position: absolute;
|
|
1180
|
-
}
|
|
1181
|
-
|
|
1182
|
-
.${calendarChartClassNames.calendarAxis} {
|
|
1183
|
-
display: flex;
|
|
1184
|
-
flex-direction: column;
|
|
1185
|
-
margin-right: 10px;
|
|
1186
|
-
}
|
|
1187
|
-
|
|
1188
|
-
.${calendarChartClassNames.calendarWeekDay} {
|
|
1189
|
-
font-size: 12px;
|
|
1190
|
-
display: inline-flex;
|
|
1191
|
-
align-items: center;
|
|
1192
|
-
justify-content: flex-end;
|
|
1193
|
-
}
|
|
1194
|
-
|
|
1195
|
-
.${calendarChartClassNames.calendarDays} {
|
|
1196
|
-
position: relative;
|
|
1197
|
-
}
|
|
1198
|
-
|
|
1199
|
-
.${calendarChartClassNames.calendarDay} {
|
|
1200
|
-
position: absolute;
|
|
1201
|
-
}
|
|
1205
|
+
const SvgWrapper$3 = styled(Wrapper) `
|
|
1206
|
+
.${calendarChartClassNames.calendarYear} {
|
|
1207
|
+
display: flex;
|
|
1208
|
+
margin-bottom: 16px;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.${calendarChartClassNames.calendarYearTitle} {
|
|
1212
|
+
display: inline-flex;
|
|
1213
|
+
align-items: flex-end;
|
|
1214
|
+
height: ${headerHeight};
|
|
1215
|
+
margin-bottom: 4px;
|
|
1216
|
+
font-weight: bold;
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
.${calendarChartClassNames.calendarHeader} {
|
|
1220
|
+
height: ${headerHeight};
|
|
1221
|
+
margin-bottom: 4px;
|
|
1222
|
+
position: relative;
|
|
1223
|
+
display: flex;
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
.${calendarChartClassNames.calendarMonth} {
|
|
1227
|
+
font-size: 14px;
|
|
1228
|
+
bottom: 0;
|
|
1229
|
+
position: absolute;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
.${calendarChartClassNames.calendarAxis} {
|
|
1233
|
+
display: flex;
|
|
1234
|
+
flex-direction: column;
|
|
1235
|
+
margin-right: 10px;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
.${calendarChartClassNames.calendarWeekDay} {
|
|
1239
|
+
font-size: 12px;
|
|
1240
|
+
display: inline-flex;
|
|
1241
|
+
align-items: center;
|
|
1242
|
+
justify-content: flex-end;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
.${calendarChartClassNames.calendarDays} {
|
|
1246
|
+
position: relative;
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
.${calendarChartClassNames.calendarDay} {
|
|
1250
|
+
position: absolute;
|
|
1251
|
+
}
|
|
1202
1252
|
`;
|
|
1203
1253
|
|
|
1204
1254
|
const draw$3 = (node, props) => {
|
|
@@ -1425,67 +1475,67 @@ const lineChartClassNames = {
|
|
|
1425
1475
|
lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
|
|
1426
1476
|
lineChartMouseLabel: "lineChartMouseLabel",
|
|
1427
1477
|
};
|
|
1428
|
-
const SvgWrapper$2 = styled(Wrapper) `
|
|
1429
|
-
.${lineChartClassNames.lineChartYScaleGlobal},
|
|
1430
|
-
.${lineChartClassNames.lineChartXScaleGlobal},
|
|
1431
|
-
.${lineChartClassNames.lineChartGridGlobal} {
|
|
1432
|
-
shape-rendering: crispEdges;
|
|
1433
|
-
}
|
|
1434
|
-
|
|
1435
|
-
.${lineChartClassNames.lineChartLinesGlobal} {
|
|
1436
|
-
fill: none;
|
|
1437
|
-
stroke: steelblue;
|
|
1438
|
-
stroke-width: 1.5px;
|
|
1439
|
-
stroke-linejoin: round;
|
|
1440
|
-
stroke-linecap: round;
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
.${lineChartClassNames.lineChartArea} {
|
|
1444
|
-
fill-opacity: 0.24;
|
|
1445
|
-
}
|
|
1446
|
-
|
|
1447
|
-
.${lineChartClassNames.lineChartGridLineX},
|
|
1448
|
-
.${lineChartClassNames.lineChartGridLineY},
|
|
1449
|
-
.${lineChartClassNames.lineChartMouseLine} {
|
|
1450
|
-
stroke: rgba(149, 149, 149, 0.24);
|
|
1451
|
-
}
|
|
1452
|
-
|
|
1453
|
-
.${lineChartClassNames.lineChartMouseLine},
|
|
1454
|
-
.${lineChartClassNames.lineChartMouseCircle} {
|
|
1455
|
-
transition: opacity linear 200ms;
|
|
1456
|
-
pointer-events: none;
|
|
1457
|
-
stroke-width: 1px;
|
|
1458
|
-
}
|
|
1459
|
-
|
|
1460
|
-
.${lineChartClassNames.lineChartDot} {
|
|
1461
|
-
stroke: #fff;
|
|
1462
|
-
stroke-width: 2px;
|
|
1463
|
-
}
|
|
1464
|
-
|
|
1465
|
-
.${lineChartClassNames.lineChartMouseLine} {
|
|
1466
|
-
shape-rendering: crispEdges;
|
|
1467
|
-
}
|
|
1468
|
-
|
|
1469
|
-
.${lineChartClassNames.lineChartMouseRect} {
|
|
1470
|
-
fill: none;
|
|
1471
|
-
pointer-events: all;
|
|
1472
|
-
}
|
|
1478
|
+
const SvgWrapper$2 = styled(Wrapper) `
|
|
1479
|
+
.${lineChartClassNames.lineChartYScaleGlobal},
|
|
1480
|
+
.${lineChartClassNames.lineChartXScaleGlobal},
|
|
1481
|
+
.${lineChartClassNames.lineChartGridGlobal} {
|
|
1482
|
+
shape-rendering: crispEdges;
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
.${lineChartClassNames.lineChartLinesGlobal} {
|
|
1486
|
+
fill: none;
|
|
1487
|
+
stroke: steelblue;
|
|
1488
|
+
stroke-width: 1.5px;
|
|
1489
|
+
stroke-linejoin: round;
|
|
1490
|
+
stroke-linecap: round;
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
.${lineChartClassNames.lineChartArea} {
|
|
1494
|
+
fill-opacity: 0.24;
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
.${lineChartClassNames.lineChartGridLineX},
|
|
1498
|
+
.${lineChartClassNames.lineChartGridLineY},
|
|
1499
|
+
.${lineChartClassNames.lineChartMouseLine} {
|
|
1500
|
+
stroke: rgba(149, 149, 149, 0.24);
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
.${lineChartClassNames.lineChartMouseLine},
|
|
1504
|
+
.${lineChartClassNames.lineChartMouseCircle} {
|
|
1505
|
+
transition: opacity linear 200ms;
|
|
1506
|
+
pointer-events: none;
|
|
1507
|
+
stroke-width: 1px;
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.${lineChartClassNames.lineChartDot} {
|
|
1511
|
+
stroke: #fff;
|
|
1512
|
+
stroke-width: 2px;
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
.${lineChartClassNames.lineChartMouseLine} {
|
|
1516
|
+
shape-rendering: crispEdges;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.${lineChartClassNames.lineChartMouseRect} {
|
|
1520
|
+
fill: none;
|
|
1521
|
+
pointer-events: all;
|
|
1522
|
+
}
|
|
1473
1523
|
`;
|
|
1474
|
-
const TooltipStyles$2 = createGlobalStyle `
|
|
1475
|
-
.${lineChartClassNames.lineChartMouseLabel} {
|
|
1476
|
-
transition: opacity linear 200ms;
|
|
1477
|
-
z-index: 100;
|
|
1478
|
-
|
|
1479
|
-
.${lineChartClassNames.lineChartLabelFlex} {
|
|
1480
|
-
justify-content: flex-start;
|
|
1481
|
-
align-items: center;
|
|
1482
|
-
pointer-events: none;
|
|
1483
|
-
}
|
|
1484
|
-
|
|
1485
|
-
.${lineChartClassNames.lineChartLabel} {
|
|
1486
|
-
margin: 0 0 0 10px;
|
|
1487
|
-
}
|
|
1488
|
-
}
|
|
1524
|
+
const TooltipStyles$2 = createGlobalStyle `
|
|
1525
|
+
.${lineChartClassNames.lineChartMouseLabel} {
|
|
1526
|
+
transition: opacity linear 200ms;
|
|
1527
|
+
z-index: 100;
|
|
1528
|
+
|
|
1529
|
+
.${lineChartClassNames.lineChartLabelFlex} {
|
|
1530
|
+
justify-content: flex-start;
|
|
1531
|
+
align-items: center;
|
|
1532
|
+
pointer-events: none;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
.${lineChartClassNames.lineChartLabel} {
|
|
1536
|
+
margin: 0 0 0 10px;
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1489
1539
|
`;
|
|
1490
1540
|
|
|
1491
1541
|
const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
|
|
@@ -1521,17 +1571,17 @@ const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, dr
|
|
|
1521
1571
|
}
|
|
1522
1572
|
};
|
|
1523
1573
|
|
|
1524
|
-
const LabelContainer = styled.div `
|
|
1525
|
-
width: 0;
|
|
1526
|
-
height: 0;
|
|
1527
|
-
display: flex;
|
|
1528
|
-
align-items: flex-end;
|
|
1529
|
-
justify-content: center;
|
|
1530
|
-
font-size: 12px;
|
|
1531
|
-
white-space: nowrap;
|
|
1574
|
+
const LabelContainer = styled.div `
|
|
1575
|
+
width: 0;
|
|
1576
|
+
height: 0;
|
|
1577
|
+
display: flex;
|
|
1578
|
+
align-items: flex-end;
|
|
1579
|
+
justify-content: center;
|
|
1580
|
+
font-size: 12px;
|
|
1581
|
+
white-space: nowrap;
|
|
1532
1582
|
`;
|
|
1533
|
-
const Label = styled.div `
|
|
1534
|
-
margin-bottom: 4px;
|
|
1583
|
+
const Label = styled.div `
|
|
1584
|
+
margin-bottom: 4px;
|
|
1535
1585
|
`;
|
|
1536
1586
|
|
|
1537
1587
|
const labelClassName = "d3-chart-label";
|
|
@@ -1766,7 +1816,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
|
|
|
1766
1816
|
};
|
|
1767
1817
|
|
|
1768
1818
|
const draw$2 = (node, props) => {
|
|
1769
|
-
const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, } = props;
|
|
1819
|
+
const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, } = props;
|
|
1770
1820
|
if (node !== null && chartData.length) {
|
|
1771
1821
|
const data = stacked ? stackedData(chartData) : chartData;
|
|
1772
1822
|
const marginTop = margin ? margin.top : 0;
|
|
@@ -1805,6 +1855,7 @@ const draw$2 = (node, props) => {
|
|
|
1805
1855
|
const { width: yAxisWidth } = computeDimensions(yAxis);
|
|
1806
1856
|
yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
|
|
1807
1857
|
let yAxisRightWidth = 0;
|
|
1858
|
+
const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
|
|
1808
1859
|
if (rightAxis) {
|
|
1809
1860
|
const rightAxisMin = d3.min(rightAxis);
|
|
1810
1861
|
const rightAxisMax = d3.max(rightAxis);
|
|
@@ -1830,7 +1881,7 @@ const draw$2 = (node, props) => {
|
|
|
1830
1881
|
.scaleLinear()
|
|
1831
1882
|
.domain([0, lastIndex])
|
|
1832
1883
|
.range([
|
|
1833
|
-
|
|
1884
|
+
left,
|
|
1834
1885
|
width - yAxisRightWidth - marginRight,
|
|
1835
1886
|
]);
|
|
1836
1887
|
const xAxisBottom = d3
|
|
@@ -1957,6 +2008,8 @@ const draw$2 = (node, props) => {
|
|
|
1957
2008
|
}
|
|
1958
2009
|
});
|
|
1959
2010
|
}
|
|
2011
|
+
const count = data?.[0]?.values?.length || 0;
|
|
2012
|
+
drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
|
|
1960
2013
|
d3.select(node)
|
|
1961
2014
|
.select(`.${labelClassName}`)
|
|
1962
2015
|
.remove();
|
|
@@ -2114,65 +2167,66 @@ const barChartClassNames = {
|
|
|
2114
2167
|
...labelClassnames,
|
|
2115
2168
|
...barChartLinesClassNames,
|
|
2116
2169
|
};
|
|
2117
|
-
const SvgWrapper$1 = styled(Wrapper) `
|
|
2118
|
-
display: ${({ selectable }) => selectable && "inline-block"};
|
|
2119
|
-
user-select: ${({ selectable }) => selectable && "none"};
|
|
2120
|
-
width: ${({ selectable }) => selectable && "auto"};
|
|
2121
|
-
|
|
2122
|
-
line {
|
|
2123
|
-
stroke-width: 1px;
|
|
2124
|
-
shape-rendering: crispEdges;
|
|
2125
|
-
}
|
|
2126
|
-
|
|
2127
|
-
.${barChartClassNames.barChartGridLineX},
|
|
2128
|
-
.${barChartClassNames.barChartGridLineY} {
|
|
2129
|
-
stroke: rgba(48, 69, 79, 0.06);
|
|
2130
|
-
}
|
|
2131
|
-
|
|
2132
|
-
.${barChartClassNames.barChartMouseRect} {
|
|
2133
|
-
}
|
|
2134
|
-
|
|
2135
|
-
.${barChartClassNames.barChartMouseRect} {
|
|
2136
|
-
fill: none;
|
|
2137
|
-
pointer-events: all;
|
|
2138
|
-
}
|
|
2139
|
-
|
|
2140
|
-
.${barChartClassNames.barChartLinesGlobal} {
|
|
2141
|
-
stroke-width: 1.5px;
|
|
2142
|
-
stroke-linejoin: round;
|
|
2143
|
-
stroke-linecap: round;
|
|
2144
|
-
}
|
|
2145
|
-
|
|
2146
|
-
.${barChartClassNames.barChartLine} {
|
|
2147
|
-
shape-rendering: auto;
|
|
2148
|
-
}
|
|
2149
|
-
|
|
2150
|
-
.${barChartClassNames.barChartArea} {
|
|
2151
|
-
fill-opacity: 0.24;
|
|
2152
|
-
}
|
|
2153
|
-
|
|
2154
|
-
.${barChartClassNames.barChartSelection} {
|
|
2155
|
-
position: absolute;
|
|
2156
|
-
top: 0;
|
|
2157
|
-
width: 0;
|
|
2158
|
-
background: rgba(0, 170, 255, 0.06);
|
|
2159
|
-
box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
|
|
2160
|
-
pointer-events: none;
|
|
2161
|
-
}
|
|
2170
|
+
const SvgWrapper$1 = styled(Wrapper) `
|
|
2171
|
+
display: ${({ selectable }) => selectable && "inline-block"};
|
|
2172
|
+
user-select: ${({ selectable }) => selectable && "none"};
|
|
2173
|
+
width: ${({ selectable }) => selectable && "auto"};
|
|
2174
|
+
|
|
2175
|
+
line {
|
|
2176
|
+
stroke-width: 1px;
|
|
2177
|
+
shape-rendering: crispEdges;
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2180
|
+
.${barChartClassNames.barChartGridLineX},
|
|
2181
|
+
.${barChartClassNames.barChartGridLineY} {
|
|
2182
|
+
stroke: rgba(48, 69, 79, 0.06);
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
.${barChartClassNames.barChartMouseRect} {
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
.${barChartClassNames.barChartMouseRect} {
|
|
2189
|
+
fill: none;
|
|
2190
|
+
pointer-events: all;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
.${barChartClassNames.barChartLinesGlobal} {
|
|
2194
|
+
stroke-width: 1.5px;
|
|
2195
|
+
stroke-linejoin: round;
|
|
2196
|
+
stroke-linecap: round;
|
|
2197
|
+
}
|
|
2198
|
+
|
|
2199
|
+
.${barChartClassNames.barChartLine} {
|
|
2200
|
+
shape-rendering: auto;
|
|
2201
|
+
}
|
|
2202
|
+
|
|
2203
|
+
.${barChartClassNames.barChartArea} {
|
|
2204
|
+
fill-opacity: 0.24;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
.${barChartClassNames.barChartSelection} {
|
|
2208
|
+
position: absolute;
|
|
2209
|
+
top: 0;
|
|
2210
|
+
width: 0;
|
|
2211
|
+
background: rgba(0, 170, 255, 0.06);
|
|
2212
|
+
box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
|
|
2213
|
+
pointer-events: none;
|
|
2214
|
+
}
|
|
2162
2215
|
`;
|
|
2163
|
-
const TooltipStyles$1 = createGlobalStyle `
|
|
2164
|
-
.${barChartClassNames.barChartMouseTooltip} {
|
|
2165
|
-
z-index: 100;
|
|
2166
|
-
transition: all linear 144ms;
|
|
2167
|
-
|
|
2168
|
-
.${barChartClassNames.barChartTooltipItem} {
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2216
|
+
const TooltipStyles$1 = createGlobalStyle `
|
|
2217
|
+
.${barChartClassNames.barChartMouseTooltip} {
|
|
2218
|
+
z-index: 100;
|
|
2219
|
+
transition: all linear 144ms;
|
|
2220
|
+
|
|
2221
|
+
.${barChartClassNames.barChartTooltipItem} {
|
|
2222
|
+
padding: 0.125rem;
|
|
2223
|
+
margin-bottom: 4px;
|
|
2224
|
+
|
|
2225
|
+
:last-of-type {
|
|
2226
|
+
margin-bottom: 0;
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
}
|
|
2176
2230
|
`;
|
|
2177
2231
|
|
|
2178
2232
|
const useSelection = (node, props) => {
|
|
@@ -2765,8 +2819,9 @@ const draw$1 = (node, props) => {
|
|
|
2765
2819
|
});
|
|
2766
2820
|
customYAxis && customYAxis(yAxis);
|
|
2767
2821
|
const { width: yAxisWidth } = computeDimensions(yAxis);
|
|
2822
|
+
const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
|
|
2768
2823
|
const range = [
|
|
2769
|
-
|
|
2824
|
+
left,
|
|
2770
2825
|
width - marginRight,
|
|
2771
2826
|
];
|
|
2772
2827
|
const xScale = d3
|
|
@@ -2844,48 +2899,8 @@ const draw$1 = (node, props) => {
|
|
|
2844
2899
|
const bars = drawBars
|
|
2845
2900
|
? drawBars({ groups, yScale, marshalledData, barWidth })
|
|
2846
2901
|
: getBars({ groups, barWidth });
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
return;
|
|
2850
|
-
}
|
|
2851
|
-
if (marker.horizontal) {
|
|
2852
|
-
if (marker.line) {
|
|
2853
|
-
svg.append('line')
|
|
2854
|
-
.style("stroke", marker.lineColor || marker.color || "inherit")
|
|
2855
|
-
.style("stroke-width", 1)
|
|
2856
|
-
.style("stroke-dasharray", ("5, 3"))
|
|
2857
|
-
.attr("x1", marginLeft + yAxisWidth)
|
|
2858
|
-
.attr("y1", yScale(marker.value) + 1)
|
|
2859
|
-
.attr("x2", width)
|
|
2860
|
-
.attr("y2", yScale(marker.value) + 1);
|
|
2861
|
-
}
|
|
2862
|
-
svg.append("text")
|
|
2863
|
-
.attr("y", yScale(marker.value) + 1)
|
|
2864
|
-
.attr("x", marginLeft + yAxisWidth)
|
|
2865
|
-
.attr('text-anchor', 'middle')
|
|
2866
|
-
.attr("class", ["marker", marker.className].filter(Boolean).join(" "))
|
|
2867
|
-
.style("fill", marker?.color || "inherit")
|
|
2868
|
-
.text(marker.label);
|
|
2869
|
-
return;
|
|
2870
|
-
}
|
|
2871
|
-
if (marker.line) {
|
|
2872
|
-
svg.append('line')
|
|
2873
|
-
.style("stroke", marker.lineColor || marker.color || "inherit")
|
|
2874
|
-
.style("stroke-width", 1)
|
|
2875
|
-
.style("stroke-dasharray", ("5, 3"))
|
|
2876
|
-
.attr("x1", width / data.length * marker.value + 1)
|
|
2877
|
-
.attr("y1", 0)
|
|
2878
|
-
.attr("x2", width / data.length * marker.value + 1)
|
|
2879
|
-
.attr("y2", (height - marginTop - marginBottom + 8));
|
|
2880
|
-
}
|
|
2881
|
-
svg.append("text")
|
|
2882
|
-
.attr("y", height - 2)
|
|
2883
|
-
.attr("x", width / data.length * marker.value + 1)
|
|
2884
|
-
.attr('text-anchor', marker.align === 'right' ? 'end' : marker.align === 'left' ? 'start' : 'middle')
|
|
2885
|
-
.attr("class", ["marker", marker.className].filter(Boolean).join(" "))
|
|
2886
|
-
.style("fill", marker?.color || "inherit")
|
|
2887
|
-
.text(marker.label);
|
|
2888
|
-
});
|
|
2902
|
+
const count = data?.length || 0;
|
|
2903
|
+
drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
|
|
2889
2904
|
let lines = null;
|
|
2890
2905
|
if (Array.isArray(lineData) && lineData.length > 0) {
|
|
2891
2906
|
lines = drawLines({
|
|
@@ -3019,45 +3034,45 @@ const horizontalBarChartClassNames = {
|
|
|
3019
3034
|
horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
|
|
3020
3035
|
horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue",
|
|
3021
3036
|
};
|
|
3022
|
-
const Table = styled.table `
|
|
3023
|
-
width: 100%;
|
|
3037
|
+
const Table = styled.table `
|
|
3038
|
+
width: 100%;
|
|
3024
3039
|
`;
|
|
3025
|
-
const LabelCell = styled.div `
|
|
3026
|
-
text-align: right;
|
|
3040
|
+
const LabelCell = styled.div `
|
|
3041
|
+
text-align: right;
|
|
3027
3042
|
`;
|
|
3028
|
-
const BarFlex = styled.div `
|
|
3029
|
-
width: 100%;
|
|
3030
|
-
display: flex;
|
|
3031
|
-
height: 1rem;
|
|
3043
|
+
const BarFlex = styled.div `
|
|
3044
|
+
width: 100%;
|
|
3045
|
+
display: flex;
|
|
3046
|
+
height: 1rem;
|
|
3032
3047
|
`;
|
|
3033
|
-
const BarsTd = styled.td `
|
|
3034
|
-
width: 100%;
|
|
3035
|
-
position: relative;
|
|
3036
|
-
vertical-align: middle;
|
|
3048
|
+
const BarsTd = styled.td `
|
|
3049
|
+
width: 100%;
|
|
3050
|
+
position: relative;
|
|
3051
|
+
vertical-align: middle;
|
|
3037
3052
|
`;
|
|
3038
|
-
const TooltipFlex = styled(TooltipFlex$1) `
|
|
3039
|
-
position: absolute;
|
|
3040
|
-
top: 0;
|
|
3041
|
-
left: 50%;
|
|
3042
|
-
transform: translate(-50%, -50%);
|
|
3043
|
-
will-change: left, top;
|
|
3053
|
+
const TooltipFlex = styled(TooltipFlex$1) `
|
|
3054
|
+
position: absolute;
|
|
3055
|
+
top: 0;
|
|
3056
|
+
left: 50%;
|
|
3057
|
+
transform: translate(-50%, -50%);
|
|
3058
|
+
will-change: left, top;
|
|
3044
3059
|
`;
|
|
3045
|
-
const StackSumContainer = styled.div `
|
|
3046
|
-
position: relative;
|
|
3060
|
+
const StackSumContainer = styled.div `
|
|
3061
|
+
position: relative;
|
|
3047
3062
|
`;
|
|
3048
|
-
const StackSum = styled.div `
|
|
3049
|
-
white-space: nowrap;
|
|
3050
|
-
position: absolute;
|
|
3051
|
-
top: 50%;
|
|
3052
|
-
left: 50%;
|
|
3053
|
-
transform: translate(0, -50%);
|
|
3063
|
+
const StackSum = styled.div `
|
|
3064
|
+
white-space: nowrap;
|
|
3065
|
+
position: absolute;
|
|
3066
|
+
top: 50%;
|
|
3067
|
+
left: 50%;
|
|
3068
|
+
transform: translate(0, -50%);
|
|
3054
3069
|
`;
|
|
3055
|
-
const StackWrapper = styled.div `
|
|
3056
|
-
position: absolute;
|
|
3057
|
-
top: 0;
|
|
3058
|
-
display: flex;
|
|
3059
|
-
justify-content: flex-start;
|
|
3060
|
-
height: 100%;
|
|
3070
|
+
const StackWrapper = styled.div `
|
|
3071
|
+
position: absolute;
|
|
3072
|
+
top: 0;
|
|
3073
|
+
display: flex;
|
|
3074
|
+
justify-content: flex-start;
|
|
3075
|
+
height: 100%;
|
|
3061
3076
|
`;
|
|
3062
3077
|
|
|
3063
3078
|
const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
|
|
@@ -3109,10 +3124,10 @@ const useStackWrapper = (stackedTooltip) => {
|
|
|
3109
3124
|
: ({ children }) => (jsx(Fragment$1, { children: children })), [stackedTooltip]);
|
|
3110
3125
|
};
|
|
3111
3126
|
|
|
3112
|
-
const BarStyled = styled.div `
|
|
3113
|
-
position: relative;
|
|
3114
|
-
display: inline-flex;
|
|
3115
|
-
height: 100%;
|
|
3127
|
+
const BarStyled = styled.div `
|
|
3128
|
+
position: relative;
|
|
3129
|
+
display: inline-flex;
|
|
3130
|
+
height: 100%;
|
|
3116
3131
|
`;
|
|
3117
3132
|
|
|
3118
3133
|
const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
|
|
@@ -3129,23 +3144,23 @@ const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mous
|
|
|
3129
3144
|
}, title: formatNativeTitle ? formatNativeTitle(bar) : "", onMouseOver: onMouseMove, onMouseMove: tooltipBind ? onMouseMove : void 0, onMouseOut: onMouseLeave }));
|
|
3130
3145
|
};
|
|
3131
3146
|
|
|
3132
|
-
const TickTd = styled.td `
|
|
3133
|
-
position: relative;
|
|
3147
|
+
const TickTd = styled.td `
|
|
3148
|
+
position: relative;
|
|
3134
3149
|
`;
|
|
3135
|
-
const Ticks = styled.div `
|
|
3136
|
-
position: relative;
|
|
3137
|
-
height: 1rem;
|
|
3150
|
+
const Ticks = styled.div `
|
|
3151
|
+
position: relative;
|
|
3152
|
+
height: 1rem;
|
|
3138
3153
|
`;
|
|
3139
|
-
const Tick = styled.div `
|
|
3140
|
-
white-space: nowrap;
|
|
3141
|
-
width: 0;
|
|
3142
|
-
height: 0;
|
|
3143
|
-
position: absolute;
|
|
3144
|
-
top: 50%;
|
|
3145
|
-
transform: translateY(-50%);
|
|
3146
|
-
display: flex;
|
|
3147
|
-
align-items: center;
|
|
3148
|
-
justify-content: center;
|
|
3154
|
+
const Tick = styled.div `
|
|
3155
|
+
white-space: nowrap;
|
|
3156
|
+
width: 0;
|
|
3157
|
+
height: 0;
|
|
3158
|
+
position: absolute;
|
|
3159
|
+
top: 50%;
|
|
3160
|
+
transform: translateY(-50%);
|
|
3161
|
+
display: flex;
|
|
3162
|
+
align-items: center;
|
|
3163
|
+
justify-content: center;
|
|
3149
3164
|
`;
|
|
3150
3165
|
|
|
3151
3166
|
const hundred = 100;
|
|
@@ -3244,29 +3259,29 @@ const bubbleChartClassNames = {
|
|
|
3244
3259
|
bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
|
|
3245
3260
|
bubbleChartTip: "bubbleChartTip",
|
|
3246
3261
|
};
|
|
3247
|
-
const SvgWrapper = styled(Wrapper) `
|
|
3248
|
-
.${bubbleChartClassNames.bubbleChartYAxis},
|
|
3249
|
-
.${bubbleChartClassNames.bubbleChartXAxis},
|
|
3250
|
-
.${bubbleChartClassNames.bubbleChartGridGlobal} {
|
|
3251
|
-
shape-rendering: crispEdges;
|
|
3252
|
-
}
|
|
3253
|
-
|
|
3254
|
-
.${bubbleChartClassNames.bubbleChartGridLineX},
|
|
3255
|
-
.${bubbleChartClassNames.bubbleChartGridLineY} {
|
|
3256
|
-
stroke: rgba(149, 149, 149, 0.24);
|
|
3257
|
-
}
|
|
3258
|
-
|
|
3259
|
-
.${bubbleChartClassNames.bubbleChartYScaleLabel} {
|
|
3260
|
-
font-size: 10px;
|
|
3261
|
-
}
|
|
3262
|
+
const SvgWrapper = styled(Wrapper) `
|
|
3263
|
+
.${bubbleChartClassNames.bubbleChartYAxis},
|
|
3264
|
+
.${bubbleChartClassNames.bubbleChartXAxis},
|
|
3265
|
+
.${bubbleChartClassNames.bubbleChartGridGlobal} {
|
|
3266
|
+
shape-rendering: crispEdges;
|
|
3267
|
+
}
|
|
3268
|
+
|
|
3269
|
+
.${bubbleChartClassNames.bubbleChartGridLineX},
|
|
3270
|
+
.${bubbleChartClassNames.bubbleChartGridLineY} {
|
|
3271
|
+
stroke: rgba(149, 149, 149, 0.24);
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3274
|
+
.${bubbleChartClassNames.bubbleChartYScaleLabel} {
|
|
3275
|
+
font-size: 10px;
|
|
3276
|
+
}
|
|
3262
3277
|
`;
|
|
3263
|
-
const TooltipStyles = createGlobalStyle `
|
|
3264
|
-
.${bubbleChartClassNames.bubbleChartTooltipContainer} {
|
|
3265
|
-
position: absolute;
|
|
3266
|
-
transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
|
|
3267
|
-
pointer-events: none;
|
|
3268
|
-
z-index: 1;
|
|
3269
|
-
}
|
|
3278
|
+
const TooltipStyles = createGlobalStyle `
|
|
3279
|
+
.${bubbleChartClassNames.bubbleChartTooltipContainer} {
|
|
3280
|
+
position: absolute;
|
|
3281
|
+
transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
|
|
3282
|
+
pointer-events: none;
|
|
3283
|
+
z-index: 1;
|
|
3284
|
+
}
|
|
3270
3285
|
`;
|
|
3271
3286
|
|
|
3272
3287
|
const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
|
|
@@ -3303,14 +3318,14 @@ const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) =
|
|
|
3303
3318
|
}
|
|
3304
3319
|
};
|
|
3305
3320
|
|
|
3306
|
-
const Tooltip = styled.div `
|
|
3307
|
-
width: 0;
|
|
3308
|
-
height: 0;
|
|
3309
|
-
display: flex;
|
|
3310
|
-
align-items: flex-end;
|
|
3311
|
-
justify-content: center;
|
|
3312
|
-
font-size: 12px;
|
|
3313
|
-
white-space: nowrap;
|
|
3321
|
+
const Tooltip = styled.div `
|
|
3322
|
+
width: 0;
|
|
3323
|
+
height: 0;
|
|
3324
|
+
display: flex;
|
|
3325
|
+
align-items: flex-end;
|
|
3326
|
+
justify-content: center;
|
|
3327
|
+
font-size: 12px;
|
|
3328
|
+
white-space: nowrap;
|
|
3314
3329
|
`;
|
|
3315
3330
|
|
|
3316
3331
|
const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {
|
|
@@ -3514,5 +3529,5 @@ const BubbleChart = (props) => {
|
|
|
3514
3529
|
};
|
|
3515
3530
|
BubbleChart.defaultProps = bubbleChartDefaultProps;
|
|
3516
3531
|
|
|
3517
|
-
export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, appendSvg, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames, useNode, useResize };
|
|
3532
|
+
export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, appendSvg, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, drawMarkers, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames, useNode, useResize };
|
|
3518
3533
|
//# sourceMappingURL=charts.esm.js.map
|