react-native-gifted-charts 1.0.4 → 1.0.5

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/BarChart/Animated2DWithGradient.tsx +27 -7
  3. package/src/BarChart/RenderBars.tsx +71 -21
  4. package/src/BarChart/RenderStackBars.tsx +3 -1
  5. package/src/BarChart/index.tsx +8 -3
  6. package/src/LineChart/index.tsx +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
5
5
  "main": "src/index.tsx",
6
6
  "files": [
package/src/BarChart/Animated2DWithGradient.tsx CHANGED
@@ -32,6 +32,8 @@ type propTypes = {
32
32
  horizontal: Boolean;
33
33
  intactTopLabel: Boolean;
34
34
  barBorderRadius?: number;
35
+ containerHeight?: number;
36
+ maxValue?: number;
35
37
  };
36
38
  type itemType = {
37
39
  value?: number;
@@ -54,12 +56,19 @@ type itemType = {
54
56
  };
55
57
 
56
58
  const Animated2DWithGradient = (props: propTypes) => {
57
- const {item, opacity, animationDuration, noGradient, noAnimation} = props;
59
+ const {
60
+ item,
61
+ opacity,
62
+ animationDuration,
63
+ noGradient,
64
+ noAnimation,
65
+ containerHeight,
66
+ maxValue,
67
+ } = props;
58
68
  const [height, setHeight] = useState(noAnimation ? props.height : 2);
59
69
  const [initialRender, setInitialRender] = useState(
60
70
  noAnimation ? false : true,
61
71
  );
62
- // console.log('comes to animated2DWithGradient', item);
63
72
 
64
73
  useEffect(() => {
65
74
  if (!noAnimation) {
@@ -97,9 +106,19 @@ const Animated2DWithGradient = (props: propTypes) => {
97
106
  position: 'absolute',
98
107
  bottom: 0,
99
108
  width: '100%',
100
- height: height,
109
+ height: noAnimation
110
+ ? (Math.abs(item.value) * (containerHeight || 200)) /
111
+ (maxValue || 200)
112
+ : height,
101
113
  }}>
102
- <View style={{width: '100%', height: height}}>
114
+ <View
115
+ style={{
116
+ width: '100%',
117
+ height: noAnimation
118
+ ? (Math.abs(item.value) * (containerHeight || 200)) /
119
+ (maxValue || 200)
120
+ : height,
121
+ }}>
103
122
  {noGradient ? (
104
123
  <View
105
124
  style={[
@@ -223,13 +242,14 @@ const Animated2DWithGradient = (props: propTypes) => {
223
242
  height: item.barWidth || 30,
224
243
  width: item.barWidth || 30,
225
244
  justifyContent:
226
- (props.horizontal && !props.intactTopLabel) || item.value < 0
245
+ (props.horizontal && !props.intactTopLabel) ||
246
+ item.value < 0
227
247
  ? 'center'
228
248
  : 'flex-end',
229
249
  alignItems: 'center',
230
250
  opacity: opacity,
231
251
  },
232
- item.value < 0 && {transform:[{rotate:'180deg'}]},
252
+ item.value < 0 && {transform: [{rotate: '180deg'}]},
233
253
  props.horizontal &&
234
254
  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
235
255
  item.topLabelContainerStyle,
@@ -243,4 +263,4 @@ const Animated2DWithGradient = (props: propTypes) => {
243
263
  );
244
264
  };
245
265
 
246
- export default Animated2DWithGradient;
266
+ export default Animated2DWithGradient;
package/src/BarChart/RenderBars.tsx CHANGED
@@ -121,18 +121,29 @@ const RenderBars = (props: Props) => {
121
121
  rotateLabel
122
122
  ? props.horizontal
123
123
  ? {transform: [{rotate: '330deg'}]}
124
- : {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
124
+ : {
125
+ transform: [
126
+ {rotate: value < 0 ? '240deg' : '60deg'},
127
+ {translateX: value < 0 ? 56 : 0},
128
+ {translateY: value < 0 ? 32 : 0},
129
+ ],
130
+ }
125
131
  : props.horizontal
126
132
  ? {transform: [{rotate: '-90deg'}]}
127
133
  : value < 0
128
- ?{transform:[{rotate:'180deg'},{translateY:autoShiftLabels?0:32}]}
129
- :{},
134
+ ? {
135
+ transform: [
136
+ {rotate: '180deg'},
137
+ {translateY: autoShiftLabels ? 0 : 32},
138
+ ],
139
+ }
140
+ : {},
130
141
  ]}>
131
142
  {item.labelComponent ? (
132
143
  item.labelComponent()
133
144
  ) : (
134
145
  <Text
135
- style={[labelTextStyle, {textAlign: 'center'}]}
146
+ style={labelTextStyle || {textAlign: 'center'}}
136
147
  numberOfLines={1}>
137
148
  {label || ''}
138
149
  </Text>
@@ -141,7 +152,11 @@ const RenderBars = (props: Props) => {
141
152
  );
142
153
  };
143
154
 
144
- const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
155
+ const renderAnimatedLabel = (
156
+ label: String,
157
+ labelTextStyle: any,
158
+ value: number,
159
+ ) => {
145
160
  return (
146
161
  <Animated.View
147
162
  style={[
@@ -158,7 +173,7 @@ const RenderBars = (props: Props) => {
158
173
  bottom: rotateLabel ? -40 : -25,
159
174
  opacity: appearingOpacity,
160
175
  },
161
- value < 0 && {transform:[{rotate:'180deg'}]},
176
+ value < 0 && {transform: [{rotate: '180deg'}]},
162
177
  rotateLabel
163
178
  ? props.horizontal
164
179
  ? {transform: [{rotate: '330deg'}]}
@@ -171,7 +186,7 @@ const RenderBars = (props: Props) => {
171
186
  item.labelComponent()
172
187
  ) : (
173
188
  <Text
174
- style={[labelTextStyle, {textAlign: 'center'}]}
189
+ style={labelTextStyle || {textAlign: 'center'}}
175
190
  numberOfLines={1}>
176
191
  {label || ''}
177
192
  </Text>
@@ -255,7 +270,7 @@ const RenderBars = (props: Props) => {
255
270
  : 'flex-end',
256
271
  alignItems: 'center',
257
272
  },
258
- item.value < 0 && {transform:[{rotate:'180deg'}]},
273
+ item.value < 0 && {transform: [{rotate: '180deg'}]},
259
274
  props.horizontal &&
260
275
  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
261
276
  item.topLabelContainerStyle,
@@ -277,13 +292,27 @@ const RenderBars = (props: Props) => {
277
292
  // overflow: 'visible',
278
293
  marginBottom: 60,
279
294
  width: item.barWidth || props.barWidth || 30,
280
- height: item.value>=0 &&(!isThreeD || isAnimated) && item.topLabelComponent
281
- ? (item.topLabelComponentHeight || 30) +
282
- (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
283
- : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200),
295
+ height:
296
+ item.value >= 0 &&
297
+ (!isThreeD || isAnimated) &&
298
+ item.topLabelComponent
299
+ ? (item.topLabelComponentHeight || 30) +
300
+ (Math.abs(item.value) * (containerHeight || 200)) /
301
+ (maxValue || 200)
302
+ : (Math.abs(item.value) * (containerHeight || 200)) /
303
+ (maxValue || 200),
284
304
  marginRight: spacing,
285
305
  },
286
- item.value < 0 && {transform:[{translateY:(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)},{rotateZ:'180deg'}]},
306
+ item.value < 0 && {
307
+ transform: [
308
+ {
309
+ translateY:
310
+ (Math.abs(item.value) * (containerHeight || 200)) /
311
+ (maxValue || 200),
312
+ },
313
+ {rotateZ: '180deg'},
314
+ ],
315
+ },
287
316
  // !isThreeD && !item.showGradient && !props.showGradient &&
288
317
  // { backgroundColor: item.frontColor || props.frontColor || 'black' },
289
318
  side !== 'right' && {zIndex: data.length - index},
@@ -333,7 +362,10 @@ const RenderBars = (props: Props) => {
333
362
  topLabelComponent={item.topLabelComponent}
334
363
  opacity={opacity || 1}
335
364
  animationDuration={animationDuration || 800}
336
- height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
365
+ height={
366
+ (Math.abs(item.value) * (containerHeight || 200)) /
367
+ (maxValue || 200)
368
+ }
337
369
  intactTopLabel={props.intactTopLabel}
338
370
  horizontal={props.horizontal}
339
371
  />
@@ -358,7 +390,10 @@ const RenderBars = (props: Props) => {
358
390
  opacity={opacity || 1}
359
391
  horizontal={props.horizontal}
360
392
  intactTopLabel={props.intactTopLabel}
361
- height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
393
+ height={
394
+ (Math.abs(item.value) * (containerHeight || 200)) /
395
+ (maxValue || 200)
396
+ }
362
397
  value={item.value}
363
398
  />
364
399
  )
@@ -373,7 +408,12 @@ const RenderBars = (props: Props) => {
373
408
  roundedTop={props.roundedTop || false}
374
409
  gradientColor={props.gradientColor}
375
410
  frontColor={props.frontColor || 'black'}
376
- height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
411
+ containerHeight={containerHeight}
412
+ maxValue={maxValue}
413
+ height={
414
+ (Math.abs(item.value) * (containerHeight || 200)) /
415
+ (maxValue || 200)
416
+ }
377
417
  cappedBars={props.cappedBars}
378
418
  capThickness={props.capThickness}
379
419
  capColor={props.capColor}
@@ -396,7 +436,12 @@ const RenderBars = (props: Props) => {
396
436
  gradientColor={props.gradientColor}
397
437
  noGradient
398
438
  frontColor={props.frontColor || 'black'}
399
- height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
439
+ containerHeight={containerHeight}
440
+ maxValue={maxValue}
441
+ height={
442
+ (Math.abs(item.value) * (containerHeight || 200)) /
443
+ (maxValue || 200)
444
+ }
400
445
  cappedBars={props.cappedBars}
401
446
  capThickness={props.capThickness}
402
447
  capColor={props.capColor}
@@ -417,7 +462,12 @@ const RenderBars = (props: Props) => {
417
462
  noGradient
418
463
  noAnimation
419
464
  frontColor={props.frontColor || 'black'}
420
- height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
465
+ containerHeight={containerHeight}
466
+ maxValue={maxValue}
467
+ height={
468
+ (Math.abs(item.value) * (containerHeight || 200)) /
469
+ (maxValue || 200)
470
+ }
421
471
  cappedBars={props.cappedBars}
422
472
  capThickness={props.capThickness}
423
473
  capColor={props.capColor}
@@ -428,10 +478,10 @@ const RenderBars = (props: Props) => {
428
478
  />
429
479
  )}
430
480
  {isAnimated
431
- ? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
432
- : renderLabel(item.label || '', item.labelTextStyle,item.value)}
481
+ ? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
482
+ : renderLabel(item.label || '', item.labelTextStyle, item.value)}
433
483
  </TouchableOpacity>
434
484
  );
435
485
  };
436
486
 
437
- export default RenderBars;
487
+ export default RenderBars;
package/src/BarChart/RenderStackBars.tsx CHANGED
@@ -141,7 +141,9 @@ const RenderStackBars = (props: Props) => {
141
141
  stackItem.borderBottomRightRadius || 0,
142
142
  },
143
143
  ]}
144
- />
144
+ >
145
+ {stackItem.innerBarComponent && stackItem.innerBarComponent()}
146
+ </TouchableOpacity>
145
147
  );
146
148
  })}
147
149
  </View>
package/src/BarChart/index.tsx CHANGED
@@ -121,6 +121,7 @@ type PropTypes = {
121
121
  autoShiftLabels?: Boolean;
122
122
  scrollToEnd?: Boolean;
123
123
  scrollAnimation?: Boolean;
124
+ labelsExtraHeight?: number;
124
125
  };
125
126
  type lineConfigType = {
126
127
  curved?: Boolean;
@@ -231,6 +232,7 @@ export const BarChart = (props: PropTypes) => {
231
232
  const labelWidth = props.labelWidth || 0;
232
233
  const scrollToEnd = props.scrollToEnd || false;
233
234
  const scrollAnimation = props.scrollAnimation === false ? false : true;
235
+ const labelsExtraHeight = props.labelsExtraHeight || 0;
234
236
 
235
237
  let totalWidth = spacing;
236
238
  let maxItem = 0, minItem = 0;
@@ -1095,9 +1097,12 @@ export const BarChart = (props: PropTypes) => {
1095
1097
  style={[
1096
1098
  styles.container,
1097
1099
  {
1098
- height: containerHeight + horizSectionsBelow.length * stepHeight,
1100
+ height:
1101
+ containerHeight +
1102
+ horizSectionsBelow.length * stepHeight +
1103
+ labelsExtraHeight,
1099
1104
  },
1100
- yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness },
1105
+ yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
1101
1106
  props.width && {width: props.width},
1102
1107
  horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
1103
1108
  ]}>
@@ -1124,7 +1129,7 @@ export const BarChart = (props: PropTypes) => {
1124
1129
  // backgroundColor: 'yellow',
1125
1130
  height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
1126
1131
  paddingLeft: initialSpacing,
1127
- paddingBottom:horizSectionsBelow.length * stepHeight,
1132
+ paddingBottom:horizSectionsBelow.length * stepHeight + labelsExtraHeight,
1128
1133
  alignItems: 'flex-end',
1129
1134
  },
1130
1135
  !props.width && {width: totalWidth},
package/src/LineChart/index.tsx CHANGED
@@ -966,7 +966,7 @@ export const LineChart = (props: propTypes) => {
966
966
  labelComponent()
967
967
  ) : (
968
968
  <Text
969
- style={[labelTextStyle, {textAlign: 'center'}]}
969
+ style={labelTextStyle || {textAlign: 'center'}}
970
970
  numberOfLines={1}>
971
971
  {label || ''}
972
972
  </Text>
@@ -1004,7 +1004,7 @@ export const LineChart = (props: propTypes) => {
1004
1004
  labelComponent()
1005
1005
  ) : (
1006
1006
  <Text
1007
- style={[labelTextStyle, {textAlign: 'center'}]}
1007
+ style={labelTextStyle || {textAlign: 'center'}}
1008
1008
  numberOfLines={1}>
1009
1009
  {label || ''}
1010
1010
  </Text>