react-native-gifted-charts 1.2.36 → 1.2.37
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/package.json +1 -1
- package/src/BarChart/Animated2DWithGradient.tsx +11 -4
- package/src/BarChart/RenderBars.tsx +35 -18
- package/src/BarChart/RenderStackBars.tsx +14 -4
- package/src/BarChart/index.tsx +11 -0
- package/src/Components/AnimatedBar/index.tsx +1 -1
- package/src/Components/ThreeDBar/index.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gifted-charts",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.37",
|
|
4
4
|
"description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
|
5
5
|
"main": "src/index.tsx",
|
|
6
6
|
"files": [
|
|
@@ -17,6 +17,7 @@ if (Platform.OS === 'android') {
|
|
|
17
17
|
type propTypes = {
|
|
18
18
|
item: itemType;
|
|
19
19
|
height: number;
|
|
20
|
+
minHeight: number;
|
|
20
21
|
opacity?: number;
|
|
21
22
|
animationDuration: number;
|
|
22
23
|
roundedTop: Boolean;
|
|
@@ -119,8 +120,11 @@ const Animated2DWithGradient = (props: propTypes) => {
|
|
|
119
120
|
width: '100%',
|
|
120
121
|
height:
|
|
121
122
|
(noAnimation
|
|
122
|
-
?
|
|
123
|
-
|
|
123
|
+
? Math.max(
|
|
124
|
+
props.minHeight,
|
|
125
|
+
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
126
|
+
(maxValue || 200),
|
|
127
|
+
)
|
|
124
128
|
: height) - (barMarginBottom || 0),
|
|
125
129
|
}}>
|
|
126
130
|
<View
|
|
@@ -128,8 +132,11 @@ const Animated2DWithGradient = (props: propTypes) => {
|
|
|
128
132
|
width: '100%',
|
|
129
133
|
height:
|
|
130
134
|
(noAnimation
|
|
131
|
-
?
|
|
132
|
-
|
|
135
|
+
? Math.max(
|
|
136
|
+
props.minHeight,
|
|
137
|
+
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
138
|
+
(maxValue || 200),
|
|
139
|
+
)
|
|
133
140
|
: height) - (barMarginBottom || 0),
|
|
134
141
|
}}>
|
|
135
142
|
{noGradient ? (
|
|
@@ -11,6 +11,7 @@ type Props = {
|
|
|
11
11
|
style?: any;
|
|
12
12
|
width?: number;
|
|
13
13
|
height?: number;
|
|
14
|
+
minHeight?: number;
|
|
14
15
|
color?: ColorValue;
|
|
15
16
|
showGradient?: Boolean;
|
|
16
17
|
gradientColor?: any;
|
|
@@ -63,6 +64,7 @@ type Props = {
|
|
|
63
64
|
onPress?: Function;
|
|
64
65
|
xAxisTextNumberOfLines: number;
|
|
65
66
|
renderTooltip: Function;
|
|
67
|
+
leftShiftForLastIndexTooltip: number;
|
|
66
68
|
initialSpacing: number;
|
|
67
69
|
selectedIndex: number;
|
|
68
70
|
setSelectedIndex: Function;
|
|
@@ -100,6 +102,7 @@ const RenderBars = (props: Props) => {
|
|
|
100
102
|
index,
|
|
101
103
|
containerHeight,
|
|
102
104
|
maxValue,
|
|
105
|
+
minHeight,
|
|
103
106
|
spacing,
|
|
104
107
|
propSpacing,
|
|
105
108
|
side,
|
|
@@ -117,6 +120,7 @@ const RenderBars = (props: Props) => {
|
|
|
117
120
|
labelTextStyle,
|
|
118
121
|
xAxisTextNumberOfLines,
|
|
119
122
|
renderTooltip,
|
|
123
|
+
leftShiftForLastIndexTooltip,
|
|
120
124
|
initialSpacing,
|
|
121
125
|
selectedIndex,
|
|
122
126
|
setSelectedIndex,
|
|
@@ -324,12 +328,14 @@ const RenderBars = (props: Props) => {
|
|
|
324
328
|
);
|
|
325
329
|
};
|
|
326
330
|
|
|
327
|
-
const barHeight =
|
|
331
|
+
const barHeight = Math.max(
|
|
332
|
+
minHeight,
|
|
328
333
|
(item.value >= 0 && (!isThreeD || isAnimated) && item.topLabelComponent
|
|
329
334
|
? (item.topLabelComponentHeight || 30) +
|
|
330
335
|
(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
|
|
331
336
|
: (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)) -
|
|
332
|
-
|
|
337
|
+
barMarginBottom,
|
|
338
|
+
);
|
|
333
339
|
|
|
334
340
|
let leftSpacing = initialSpacing;
|
|
335
341
|
for (let i = 0; i < index; i++) {
|
|
@@ -424,11 +430,12 @@ const RenderBars = (props: Props) => {
|
|
|
424
430
|
topLabelComponent={item.topLabelComponent}
|
|
425
431
|
opacity={opacity || 1}
|
|
426
432
|
animationDuration={animationDuration || 800}
|
|
427
|
-
height={
|
|
433
|
+
height={Math.max(
|
|
434
|
+
minHeight,
|
|
428
435
|
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
429
436
|
(maxValue || 200) -
|
|
430
|
-
|
|
431
|
-
}
|
|
437
|
+
barMarginBottom,
|
|
438
|
+
)}
|
|
432
439
|
intactTopLabel={props.intactTopLabel}
|
|
433
440
|
horizontal={props.horizontal}
|
|
434
441
|
/>
|
|
@@ -457,11 +464,12 @@ const RenderBars = (props: Props) => {
|
|
|
457
464
|
opacity={opacity || 1}
|
|
458
465
|
horizontal={props.horizontal}
|
|
459
466
|
intactTopLabel={props.intactTopLabel}
|
|
460
|
-
height={
|
|
467
|
+
height={Math.max(
|
|
468
|
+
minHeight,
|
|
461
469
|
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
462
470
|
(maxValue || 200) -
|
|
463
|
-
|
|
464
|
-
}
|
|
471
|
+
barMarginBottom,
|
|
472
|
+
)}
|
|
465
473
|
value={item.value}
|
|
466
474
|
/>
|
|
467
475
|
)
|
|
@@ -480,10 +488,12 @@ const RenderBars = (props: Props) => {
|
|
|
480
488
|
frontColor={props.frontColor || 'black'}
|
|
481
489
|
containerHeight={containerHeight}
|
|
482
490
|
maxValue={maxValue}
|
|
483
|
-
height={
|
|
491
|
+
height={Math.max(
|
|
492
|
+
minHeight,
|
|
484
493
|
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
485
|
-
|
|
486
|
-
}
|
|
494
|
+
(maxValue || 200),
|
|
495
|
+
)}
|
|
496
|
+
minHeight={minHeight}
|
|
487
497
|
barMarginBottom={barMarginBottom}
|
|
488
498
|
cappedBars={props.cappedBars}
|
|
489
499
|
capThickness={props.capThickness}
|
|
@@ -511,10 +521,12 @@ const RenderBars = (props: Props) => {
|
|
|
511
521
|
frontColor={props.frontColor || 'black'}
|
|
512
522
|
containerHeight={containerHeight}
|
|
513
523
|
maxValue={maxValue}
|
|
514
|
-
height={
|
|
524
|
+
height={Math.max(
|
|
525
|
+
minHeight,
|
|
515
526
|
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
516
|
-
|
|
517
|
-
}
|
|
527
|
+
(maxValue || 200),
|
|
528
|
+
)}
|
|
529
|
+
minHeight={minHeight}
|
|
518
530
|
barMarginBottom={barMarginBottom}
|
|
519
531
|
cappedBars={props.cappedBars}
|
|
520
532
|
capThickness={props.capThickness}
|
|
@@ -540,10 +552,12 @@ const RenderBars = (props: Props) => {
|
|
|
540
552
|
frontColor={props.frontColor || 'black'}
|
|
541
553
|
containerHeight={containerHeight}
|
|
542
554
|
maxValue={maxValue}
|
|
543
|
-
height={
|
|
555
|
+
height={Math.max(
|
|
556
|
+
minHeight,
|
|
544
557
|
(Math.abs(item.value) * (containerHeight || 200)) /
|
|
545
|
-
|
|
546
|
-
}
|
|
558
|
+
(maxValue || 200),
|
|
559
|
+
)}
|
|
560
|
+
minHeight={minHeight}
|
|
547
561
|
barMarginBottom={barMarginBottom}
|
|
548
562
|
cappedBars={props.cappedBars}
|
|
549
563
|
capThickness={props.capThickness}
|
|
@@ -563,7 +577,10 @@ const RenderBars = (props: Props) => {
|
|
|
563
577
|
style={{
|
|
564
578
|
position: 'absolute',
|
|
565
579
|
bottom: barHeight + 60,
|
|
566
|
-
left:
|
|
580
|
+
left:
|
|
581
|
+
index === data.length - 1
|
|
582
|
+
? leftSpacing - leftShiftForLastIndexTooltip
|
|
583
|
+
: leftSpacing,
|
|
567
584
|
zIndex: 1000,
|
|
568
585
|
}}>
|
|
569
586
|
{renderTooltip(item, index)}
|
|
@@ -24,6 +24,7 @@ type Props = {
|
|
|
24
24
|
propSpacing?: number;
|
|
25
25
|
data?: any;
|
|
26
26
|
barWidth?: number;
|
|
27
|
+
onPress?: Function;
|
|
27
28
|
|
|
28
29
|
rotateLabel?: Boolean;
|
|
29
30
|
showXAxisIndices: Boolean;
|
|
@@ -38,6 +39,7 @@ type Props = {
|
|
|
38
39
|
patternId?: String;
|
|
39
40
|
xAxisTextNumberOfLines: number;
|
|
40
41
|
renderTooltip: Function;
|
|
42
|
+
leftShiftForLastIndexTooltip: number;
|
|
41
43
|
initialSpacing: number;
|
|
42
44
|
selectedIndex: number;
|
|
43
45
|
setSelectedIndex: Function;
|
|
@@ -85,11 +87,13 @@ const RenderStackBars = (props: Props) => {
|
|
|
85
87
|
labelTextStyle,
|
|
86
88
|
xAxisTextNumberOfLines,
|
|
87
89
|
renderTooltip,
|
|
90
|
+
leftShiftForLastIndexTooltip,
|
|
88
91
|
initialSpacing,
|
|
89
92
|
selectedIndex,
|
|
90
93
|
setSelectedIndex,
|
|
91
94
|
activeOpacity,
|
|
92
95
|
stackData,
|
|
96
|
+
data,
|
|
93
97
|
} = props;
|
|
94
98
|
let leftSpacing = initialSpacing;
|
|
95
99
|
for (let i = 0; i < index; i++) {
|
|
@@ -144,7 +148,7 @@ const RenderStackBars = (props: Props) => {
|
|
|
144
148
|
0,
|
|
145
149
|
);
|
|
146
150
|
|
|
147
|
-
const static2DSimple = (item: itemType) => {
|
|
151
|
+
const static2DSimple = (item: itemType, index: number) => {
|
|
148
152
|
const cotainsNegative = item.stacks.some(item => item.value < 0);
|
|
149
153
|
return (
|
|
150
154
|
<>
|
|
@@ -155,6 +159,8 @@ const RenderStackBars = (props: Props) => {
|
|
|
155
159
|
setSelectedIndex(index);
|
|
156
160
|
if (item.onPress) {
|
|
157
161
|
item.onPress();
|
|
162
|
+
} else if (props.onPress) {
|
|
163
|
+
props.onPress(item, index);
|
|
158
164
|
}
|
|
159
165
|
}}
|
|
160
166
|
style={[
|
|
@@ -186,7 +192,8 @@ const RenderStackBars = (props: Props) => {
|
|
|
186
192
|
(Math.abs(stackItem.value) * (containerHeight || 200)) /
|
|
187
193
|
(maxValue || 200) -
|
|
188
194
|
(stackItem.marginBottom || 0),
|
|
189
|
-
backgroundColor:
|
|
195
|
+
backgroundColor:
|
|
196
|
+
stackItem.color || item.color || props.color || 'black',
|
|
190
197
|
borderRadius:
|
|
191
198
|
stackItem.borderRadius || props.barBorderRadius || 0,
|
|
192
199
|
},
|
|
@@ -312,7 +319,7 @@ const RenderStackBars = (props: Props) => {
|
|
|
312
319
|
}}
|
|
313
320
|
/>
|
|
314
321
|
)}
|
|
315
|
-
{static2DSimple(item)}
|
|
322
|
+
{static2DSimple(item, index)}
|
|
316
323
|
{renderLabel(label || '', labelTextStyle)}
|
|
317
324
|
</View>
|
|
318
325
|
{renderTooltip && selectedIndex === index && (
|
|
@@ -320,7 +327,10 @@ const RenderStackBars = (props: Props) => {
|
|
|
320
327
|
style={{
|
|
321
328
|
position: 'absolute',
|
|
322
329
|
bottom: totalHeight + 60,
|
|
323
|
-
left:
|
|
330
|
+
left:
|
|
331
|
+
index === data.length - 1
|
|
332
|
+
? leftSpacing - leftShiftForLastIndexTooltip
|
|
333
|
+
: leftSpacing,
|
|
324
334
|
zIndex: 1000,
|
|
325
335
|
}}>
|
|
326
336
|
{renderTooltip(item, index)}
|
package/src/BarChart/index.tsx
CHANGED
|
@@ -24,6 +24,7 @@ import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
|
|
|
24
24
|
type PropTypes = {
|
|
25
25
|
width?: number;
|
|
26
26
|
height?: number;
|
|
27
|
+
minHeight?: number;
|
|
27
28
|
noOfSections?: number;
|
|
28
29
|
noOfSectionsBelowXAxis?: number;
|
|
29
30
|
maxValue?: number;
|
|
@@ -143,6 +144,7 @@ type PropTypes = {
|
|
|
143
144
|
barMarginBottom?: number;
|
|
144
145
|
onPress?: Function;
|
|
145
146
|
renderTooltip?: Function;
|
|
147
|
+
leftShiftForLastIndexTooltip?: number;
|
|
146
148
|
};
|
|
147
149
|
type lineConfigType = {
|
|
148
150
|
initialSpacing?: number;
|
|
@@ -1506,6 +1508,7 @@ export const BarChart = (props: PropTypes) => {
|
|
|
1506
1508
|
stackData={props.stackData}
|
|
1507
1509
|
item={item}
|
|
1508
1510
|
index={index}
|
|
1511
|
+
data={data}
|
|
1509
1512
|
containerHeight={containerHeight}
|
|
1510
1513
|
maxValue={maxValue}
|
|
1511
1514
|
spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
|
|
@@ -1536,8 +1539,12 @@ export const BarChart = (props: PropTypes) => {
|
|
|
1536
1539
|
labelTextStyle={
|
|
1537
1540
|
item.labelTextStyle || props.xAxisLabelTextStyle
|
|
1538
1541
|
}
|
|
1542
|
+
onPress={props.onPress}
|
|
1539
1543
|
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
|
|
1540
1544
|
renderTooltip={props.renderTooltip}
|
|
1545
|
+
leftShiftForLastIndexTooltip={
|
|
1546
|
+
props.leftShiftForLastIndexTooltip || 0
|
|
1547
|
+
}
|
|
1541
1548
|
initialSpacing={initialSpacing}
|
|
1542
1549
|
selectedIndex={selectedIndex}
|
|
1543
1550
|
setSelectedIndex={setSelectedIndex}
|
|
@@ -1556,6 +1563,7 @@ export const BarChart = (props: PropTypes) => {
|
|
|
1556
1563
|
propSpacing={spacing}
|
|
1557
1564
|
side={side}
|
|
1558
1565
|
data={data}
|
|
1566
|
+
minHeight={props.minHeight || 0}
|
|
1559
1567
|
barWidth={props.barWidth}
|
|
1560
1568
|
sideWidth={props.sideWidth}
|
|
1561
1569
|
labelWidth={labelWidth}
|
|
@@ -1602,6 +1610,9 @@ export const BarChart = (props: PropTypes) => {
|
|
|
1602
1610
|
onPress={props.onPress}
|
|
1603
1611
|
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
|
|
1604
1612
|
renderTooltip={props.renderTooltip}
|
|
1613
|
+
leftShiftForLastIndexTooltip={
|
|
1614
|
+
props.leftShiftForLastIndexTooltip || 0
|
|
1615
|
+
}
|
|
1605
1616
|
initialSpacing={initialSpacing}
|
|
1606
1617
|
selectedIndex={selectedIndex}
|
|
1607
1618
|
setSelectedIndex={setSelectedIndex}
|