react-native-gifted-charts 1.3.33 → 1.4.0

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 (31) hide show
  1. package/README.md +9 -2
  2. package/package.json +2 -1
  3. package/src/BarChart/Animated2DWithGradient.tsx +13 -154
  4. package/src/BarChart/RenderBars.tsx +29 -179
  5. package/src/BarChart/RenderStackBars.tsx +22 -104
  6. package/src/BarChart/index.tsx +87 -686
  7. package/src/Components/AnimatedThreeDBar/index.tsx +16 -48
  8. package/src/Components/BarAndLineChartsWrapper/index.tsx +38 -283
  9. package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx +17 -339
  10. package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx +147 -0
  11. package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx +157 -0
  12. package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.tsx +86 -0
  13. package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.tsx +42 -0
  14. package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx +1 -1
  15. package/src/Components/BarSpecificComponents/cap.tsx +1 -1
  16. package/src/Components/common/StripAndLabel.tsx +3 -56
  17. package/src/Components/lineSvg.tsx +1 -1
  18. package/src/LineChart/LineChartBicolor.tsx +80 -516
  19. package/src/LineChart/index.tsx +266 -1778
  20. package/src/PieChart/index.tsx +20 -84
  21. package/src/PieChart/main.tsx +47 -119
  22. package/src/PopulationPyramid/index.tsx +90 -203
  23. package/src/index.tsx +2 -14
  24. package/src/BarChart/types.ts +0 -394
  25. package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx +0 -402
  26. package/src/LineChart/types.ts +0 -575
  27. package/src/PieChart/types.ts +0 -77
  28. package/src/PopulationPyramid/types.ts +0 -200
  29. package/src/utils/constants.ts +0 -333
  30. package/src/utils/index.tsx +0 -1137
  31. package/src/utils/types.ts +0 -360
package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx DELETED
@@ -1,402 +0,0 @@
1
- import React, {Fragment} from 'react';
2
- import {View, Animated} from 'react-native';
3
- import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
4
- import {styles} from '../../BarChart/styles';
5
- import {getXForLineInBar, getYForLineInBar} from '../../utils';
6
-
7
- const RenderLineInBarChart = props => {
8
- const {
9
- yAxisLabelWidth,
10
- initialSpacing,
11
- spacing,
12
- containerHeight,
13
- lineConfig,
14
- maxValue,
15
- animatedWidth,
16
- lineBehindBars,
17
- points,
18
- arrowPoints,
19
- data,
20
- totalWidth,
21
- barWidth,
22
- labelsExtraHeight,
23
- xAxisLabelsVerticalShift,
24
- } = props;
25
-
26
- const firstBarWidth = data[0].barWidth ?? barWidth;
27
-
28
- const renderSpecificVerticalLines = (dataForRender: any) => {
29
- return dataForRender.map((item: any, index: number) => {
30
- if (item.showVerticalLine) {
31
- const currentBarWidth = item.barWidth || barWidth || 30;
32
- return (
33
- <Rect
34
- x={
35
- yAxisLabelWidth +
36
- 6 -
37
- (item.verticalLineThickness || 1) / 2 -
38
- 1 -
39
- (initialSpacing - currentBarWidth / 2) +
40
- (currentBarWidth + spacing) * index
41
- }
42
- y={
43
- containerHeight -
44
- lineConfig.shiftY -
45
- (item.value * containerHeight) / maxValue +
46
- 9
47
- }
48
- width={item.verticalLineThickness || 1}
49
- height={
50
- (item.value * containerHeight) / maxValue + lineConfig.shiftY
51
- }
52
- fill={item.verticalLineColor || 'lightgray'}
53
- />
54
- );
55
- }
56
- return null;
57
- });
58
- };
59
-
60
- const renderDataPoints = () => {
61
- return data.map((item: any, index: number) => {
62
- if (index < lineConfig.startIndex || index > lineConfig.endIndex) {
63
- return null;
64
- }
65
- const currentBarWidth = item.barWidth || barWidth || 30;
66
- const customDataPoint =
67
- item.customDataPoint || lineConfig.customDataPoint;
68
- const value =
69
- item.value ??
70
- item.stacks.reduce((total, item) => total + item.value, 0);
71
- if (customDataPoint) {
72
- return (
73
- <View
74
- style={[
75
- styles.customDataPointContainer,
76
- {
77
- height: lineConfig.dataPointsHeight,
78
- width: lineConfig.dataPointsWidth,
79
- top:
80
- containerHeight -
81
- (value * containerHeight) / maxValue -
82
- (item.shiftY ?? lineConfig.shiftY ?? 0),
83
- left: getXForLineInBar(
84
- index,
85
- firstBarWidth,
86
- currentBarWidth,
87
- yAxisLabelWidth,
88
- lineConfig,
89
- spacing,
90
- ),
91
- },
92
- ]}>
93
- {customDataPoint(item, index)}
94
- </View>
95
- );
96
- }
97
- if (lineConfig.dataPointsShape === 'rectangular') {
98
- return (
99
- <Fragment key={index}>
100
- <Rect
101
- x={getXForLineInBar(
102
- index,
103
- firstBarWidth,
104
- currentBarWidth,
105
- yAxisLabelWidth,
106
- lineConfig,
107
- spacing,
108
- )}
109
- y={
110
- getYForLineInBar(
111
- value,
112
- lineConfig.shiftY,
113
- containerHeight,
114
- maxValue,
115
- ) -
116
- lineConfig.dataPointsHeight / 2
117
- }
118
- width={lineConfig.dataPointsWidth}
119
- height={lineConfig.dataPointsHeight}
120
- fill={lineConfig.dataPointsColor}
121
- />
122
- {item.dataPointText && (
123
- <CanvasText
124
- fill={item.textColor || lineConfig.textColor}
125
- fontSize={item.textFontSize || lineConfig.textFontSize}
126
- x={
127
- getXForLineInBar(
128
- index,
129
- firstBarWidth,
130
- currentBarWidth,
131
- yAxisLabelWidth,
132
- lineConfig,
133
- spacing,
134
- ) + (item.textShiftX || lineConfig.textShiftX || 0)
135
- }
136
- y={
137
- getYForLineInBar(
138
- value,
139
- lineConfig.shiftY,
140
- containerHeight,
141
- maxValue,
142
- ) -
143
- lineConfig.dataPointsHeight / 2 +
144
- (item.textShiftY || lineConfig.textShiftY || 0)
145
- }>
146
- {item.dataPointText}
147
- </CanvasText>
148
- )}
149
- </Fragment>
150
- );
151
- }
152
- return (
153
- <Fragment key={index}>
154
- <Circle
155
- cx={getXForLineInBar(
156
- index,
157
- firstBarWidth,
158
- currentBarWidth,
159
- yAxisLabelWidth,
160
- lineConfig,
161
- spacing,
162
- )}
163
- cy={getYForLineInBar(
164
- value,
165
- lineConfig.shiftY,
166
- containerHeight,
167
- maxValue,
168
- )}
169
- r={lineConfig.dataPointsRadius}
170
- fill={lineConfig.dataPointsColor}
171
- />
172
- {item.dataPointText && (
173
- <CanvasText
174
- fill={item.textColor || lineConfig.textColor}
175
- fontSize={item.textFontSize || lineConfig.textFontSize}
176
- x={
177
- getXForLineInBar(
178
- index,
179
- firstBarWidth,
180
- currentBarWidth,
181
- yAxisLabelWidth,
182
- lineConfig,
183
- spacing,
184
- ) + (item.textShiftX || lineConfig.textShiftX || 0)
185
- }
186
- y={
187
- getYForLineInBar(
188
- value,
189
- lineConfig.shiftY,
190
- containerHeight,
191
- maxValue,
192
- ) -
193
- lineConfig.dataPointsHeight / 2 +
194
- (item.textShiftY || lineConfig.textShiftY || 0)
195
- }>
196
- {item.dataPointText}
197
- </CanvasText>
198
- )}
199
- </Fragment>
200
- );
201
- });
202
- };
203
- const renderSpecificDataPoints = dataForRender => {
204
- return dataForRender.map((item: any, index: number) => {
205
- const currentBarWidth = item.barWidth || barWidth || 30;
206
- if (item.showDataPoint) {
207
- if (item.dataPointShape === 'rectangular') {
208
- return (
209
- <Fragment key={index}>
210
- <Rect
211
- x={getXForLineInBar(
212
- index,
213
- firstBarWidth,
214
- currentBarWidth,
215
- yAxisLabelWidth,
216
- lineConfig,
217
- spacing,
218
- )}
219
- y={
220
- getYForLineInBar(
221
- item.value,
222
- lineConfig.shiftY,
223
- containerHeight,
224
- maxValue,
225
- ) -
226
- item.dataPointsHeight / 2
227
- }
228
- width={item.dataPointWidth || lineConfig.dataPointsWidth}
229
- height={item.dataPointHeight || 2}
230
- fill={item.dataPointColor || 'black'}
231
- />
232
- {item.dataPointText && (
233
- <CanvasText
234
- fill={item.textColor || 'black'}
235
- fontSize={item.textFontSize || 10}
236
- x={
237
- getXForLineInBar(
238
- index,
239
- firstBarWidth,
240
- currentBarWidth,
241
- yAxisLabelWidth,
242
- lineConfig,
243
- spacing,
244
- ) + (item.textShiftX || lineConfig.textShiftX || 0)
245
- }
246
- y={
247
- getYForLineInBar(
248
- item.value,
249
- lineConfig.shiftY,
250
- containerHeight,
251
- maxValue,
252
- ) -
253
- (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
254
- (item.textShiftY || lineConfig.textShiftY || 0)
255
- }>
256
- {item.dataPointText}
257
- </CanvasText>
258
- )}
259
- </Fragment>
260
- );
261
- } else {
262
- return (
263
- <Fragment key={index}>
264
- <Circle
265
- cx={getXForLineInBar(
266
- index,
267
- firstBarWidth,
268
- currentBarWidth,
269
- yAxisLabelWidth,
270
- lineConfig,
271
- spacing,
272
- )}
273
- cy={getYForLineInBar(
274
- item.value,
275
- lineConfig.shiftY,
276
- containerHeight,
277
- maxValue,
278
- )}
279
- r={item.dataPointRadius || 3}
280
- fill={item.dataPointColor || 'black'}
281
- />
282
- {item.dataPointText && (
283
- <CanvasText
284
- fill={item.textColor || 'black'}
285
- fontSize={item.textFontSize || 10}
286
- x={
287
- getXForLineInBar(
288
- index,
289
- firstBarWidth,
290
- currentBarWidth,
291
- yAxisLabelWidth,
292
- lineConfig,
293
- spacing,
294
- ) + (item.textShiftX || lineConfig.textShiftX || 0)
295
- }
296
- y={
297
- getYForLineInBar(
298
- item.value,
299
- lineConfig.shiftY,
300
- containerHeight,
301
- maxValue,
302
- ) -
303
- (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
304
- (item.textShiftY || lineConfig.textShiftY || 0)
305
- }>
306
- {item.dataPointText}
307
- </CanvasText>
308
- )}
309
- </Fragment>
310
- );
311
- }
312
- }
313
- return null;
314
- });
315
- };
316
-
317
- const renderAnimatedLine = () => {
318
- // console.log('animatedWidth is-------->', animatedWidth);
319
- return (
320
- <Animated.View
321
- pointerEvents="none"
322
- style={{
323
- position: 'absolute',
324
- height: containerHeight + 10,
325
- left: 6 - yAxisLabelWidth,
326
- bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
327
- width: animatedWidth,
328
- zIndex: lineBehindBars ? -1 : 100000,
329
- // backgroundColor: 'wheat',
330
- }}>
331
- <Svg>
332
- <Path
333
- d={points}
334
- fill="none"
335
- stroke={lineConfig.color}
336
- strokeWidth={lineConfig.thickness}
337
- />
338
-
339
- {renderSpecificVerticalLines(data)}
340
-
341
- {!lineConfig.hideDataPoints
342
- ? renderDataPoints()
343
- : renderSpecificDataPoints(data)}
344
- {lineConfig.showArrow && (
345
- <Path
346
- d={arrowPoints}
347
- fill={lineConfig.arrowConfig.fillColor}
348
- stroke={lineConfig.arrowConfig.strokeColor}
349
- strokeWidth={lineConfig.arrowConfig.strokeWidth}
350
- />
351
- )}
352
- </Svg>
353
- </Animated.View>
354
- );
355
- };
356
-
357
- const renderLine = () => {
358
- return (
359
- <View
360
- pointerEvents="none"
361
- style={{
362
- position: 'absolute',
363
- height: containerHeight + 10 + labelsExtraHeight,
364
- left: 6 - yAxisLabelWidth,
365
- bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
366
- width: totalWidth,
367
- zIndex: lineBehindBars ? -1 : 100000,
368
- // backgroundColor: 'rgba(200,150,150,0.1)'
369
- }}>
370
- <Svg>
371
- <Path
372
- d={points}
373
- fill="none"
374
- stroke={lineConfig.color}
375
- strokeWidth={lineConfig.thickness}
376
- />
377
- {renderSpecificVerticalLines(data)}
378
-
379
- {!lineConfig.hideDataPoints
380
- ? renderDataPoints()
381
- : renderSpecificDataPoints(data)}
382
- {lineConfig.showArrow && (
383
- <Path
384
- d={arrowPoints}
385
- fill={lineConfig.arrowConfig.fillColor}
386
- stroke={lineConfig.arrowConfig.strokeColor}
387
- strokeWidth={lineConfig.arrowConfig.strokeWidth}
388
- />
389
- )}
390
- </Svg>
391
- </View>
392
- );
393
- };
394
-
395
- if (lineConfig.isAnimated) {
396
- return renderAnimatedLine();
397
- }
398
-
399
- return renderLine();
400
- };
401
-
402
- export default RenderLineInBarChart;