react-native-gifted-charts 1.2.27 → 1.2.28

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/PieChart/index.tsx +10 -1
  3. package/src/PieChart/main.tsx +73 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.2.27",
3
+ "version": "1.2.28",
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": [
package/src/PieChart/index.tsx CHANGED
@@ -67,6 +67,8 @@ type itemType = {
67
67
  labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
68
68
  onPress?: Function;
69
69
  onLabelPress?: Function;
70
+ strokeWidth?: number;
71
+ strokeColor?: string;
70
72
  };
71
73
 
72
74
  export const PieChart = (props: propTypes) => {
@@ -113,15 +115,22 @@ export const PieChart = (props: propTypes) => {
113
115
  value: props.data[selectedIndex].value,
114
116
  color:
115
117
  props.data[selectedIndex].color || colors[selectedIndex % 9],
118
+ strokeColor: props.data[selectedIndex].strokeColor || null,
119
+ strokeWidth: props.data[selectedIndex].strokeWidth || null,
120
+ gradientCenterColor:
121
+ props.data[selectedIndex].gradientCenterColor || null,
116
122
  },
117
123
  {
118
124
  value: total - props.data[selectedIndex].value,
119
- color: 'transparent',
125
+ peripheral: true,
126
+ strokeWidth: 0,
120
127
  },
121
128
  ]}
122
129
  key="pie"
123
130
  radius={radius + extraRadiusForFocused}
124
131
  initialAngle={startAngle}
132
+ showText={false}
133
+ innerRadius={props.innerRadius || radius / 2.5}
125
134
  />
126
135
  </View>
127
136
  <View style={{position: 'absolute'}}>
package/src/PieChart/main.tsx CHANGED
@@ -73,6 +73,9 @@ type itemType = {
73
73
  labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
74
74
  onPress?: Function;
75
75
  onLabelPress?: Function;
76
+ strokeWidth?: number;
77
+ strokeColor?: string;
78
+ peripheral?: boolean;
76
79
  };
77
80
 
78
81
  export const PieChartMain = (props: propTypes) => {
@@ -266,44 +269,81 @@ export const PieChartMain = (props: propTypes) => {
266
269
  cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
267
270
  (item.shiftY || 0);
268
271
 
269
- // console.log('sx', sx);
270
- // console.log('sy', sy);
271
- // console.log('ax', ax);
272
- // console.log('ay', ay);
273
272
  return (
274
- <Path
275
- key={index + 'a'}
276
- d={`M ${cx + (item.shiftX || 0)} ${
277
- cy + (item.shiftY || 0)
278
- } L ${sx} ${sy} A ${radius} ${radius} 0 ${
279
- semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
280
- } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
281
- cy + (item.shiftY || 0)
282
- }`}
283
- stroke={strokeColor}
284
- strokeWidth={strokeWidth}
285
- fill={
286
- showGradient
287
- ? `url(#grad${index})`
288
- : item.color || colors[index % 9]
289
- }
290
- onPress={() => {
291
- if (item.onPress) {
292
- item.onPress();
293
- } else if (props.onPress) {
294
- props.onPress(item, index);
273
+ <>
274
+ {/********************* Pie sections background with colors excluding the borders *********/}
275
+ <Path
276
+ key={index + 'a'}
277
+ d={`M ${cx + (item.shiftX || 0)} ${
278
+ cy + (item.shiftY || 0)
279
+ } L ${sx} ${sy} A ${radius} ${radius} 0 ${
280
+ semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
281
+ } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
282
+ cy + (item.shiftY || 0)
283
+ }`}
284
+ stroke={'transparent'}
285
+ strokeWidth={0}
286
+ fill={
287
+ props.selectedIndex === index || item.peripheral
288
+ ? 'transparent'
289
+ : showGradient
290
+ ? `url(#grad${index})`
291
+ : item.color || colors[index % 9]
295
292
  }
296
- if (props.focusOnPress) {
297
- if (props.selectedIndex === index) {
298
- if (toggleFocusOnPress) {
299
- props.setSelectedIndex(-1);
293
+ onPress={() => {
294
+ if (item.onPress) {
295
+ item.onPress();
296
+ } else if (props.onPress) {
297
+ props.onPress(item, index);
298
+ }
299
+ if (props.focusOnPress) {
300
+ if (props.selectedIndex === index) {
301
+ if (toggleFocusOnPress) {
302
+ props.setSelectedIndex(-1);
303
+ }
304
+ } else {
305
+ props.setSelectedIndex(index);
300
306
  }
301
- } else {
302
- props.setSelectedIndex(index);
303
307
  }
308
+ }}
309
+ />
310
+
311
+ {/********************* Pie sections borders (made separately as they can have separate strokeWidths) *********/}
312
+ <Path
313
+ key={index + 'line1'}
314
+ d={`M ${cx + (item.shiftX || 0)} ${
315
+ cy + (item.shiftY || 0)
316
+ } L ${sx} ${sy}`}
317
+ stroke={item.strokeColor || strokeColor}
318
+ strokeWidth={
319
+ item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
304
320
  }
305
- }}
306
- />
321
+ />
322
+ <Path
323
+ key={index + 'arc'}
324
+ d={`M ${sx} ${sy} A ${radius} ${radius} 0 ${
325
+ semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
326
+ } 1 ${ax} ${ay}`}
327
+ stroke={item.strokeColor || strokeColor}
328
+ strokeWidth={
329
+ props.focusOnPress && props.selectedIndex === index
330
+ ? 0
331
+ : item.strokeWidth === 0
332
+ ? 0
333
+ : item.strokeWidth || strokeWidth
334
+ }
335
+ />
336
+ <Path
337
+ key={index + 'line2'}
338
+ d={`M ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
339
+ cy + (item.shiftY || 0)
340
+ }`}
341
+ stroke={item.strokeColor || strokeColor}
342
+ strokeWidth={
343
+ item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
344
+ }
345
+ />
346
+ </>
307
347
  );
308
348
  })
309
349
  )}