From 9be5ce7a15444add622b2347adbac920e29ec8ba Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Fri, 27 May 2022 14:26:36 +0530 Subject: [PATCH] fixed issues with strokeWidth-focusOnPress combo in Pie charts --- docs/PieChart/PieChartProps.md | 3 + package.json | 2 +- src/PieChart/index.tsx | 11 +++- src/PieChart/main.tsx | 108 ++++++++++++++++++++++----------- 4 files changed, 88 insertions(+), 36 deletions(-) diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md index 504ebf3..1c15388 100644 --- a/docs/PieChart/PieChartProps.md +++ b/docs/PieChart/PieChartProps.md @@ -86,6 +86,9 @@ The default value for labelsPosition is 'mid'. In case of donut and semicircle c | labelPosition | string | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | | onPress | Function | Callback function called on press of Pie sections (takes item and index as parameter) | | onLabelPress | Function | Callback function called on press of a Label (takes item and index as parameter) | +| strokeWidth | number | Stroke (line) width for the Pie chart and its section | +| strokeColor | ColorValue | Stroke (line) color | + ### Donut chart related props diff --git a/package.json b/package.json index 23db5eb..ede7d14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.27", + "version": "1.2.28", "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.", "main": "src/index.tsx", "files": [ diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx index 64b056a..64dcb94 100644 --- a/src/PieChart/index.tsx +++ b/src/PieChart/index.tsx @@ -67,6 +67,8 @@ type itemType = { labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid'; onPress?: Function; onLabelPress?: Function; + strokeWidth?: number; + strokeColor?: string; }; export const PieChart = (props: propTypes) => { @@ -113,15 +115,22 @@ export const PieChart = (props: propTypes) => { value: props.data[selectedIndex].value, color: props.data[selectedIndex].color || colors[selectedIndex % 9], + strokeColor: props.data[selectedIndex].strokeColor || null, + strokeWidth: props.data[selectedIndex].strokeWidth || null, + gradientCenterColor: + props.data[selectedIndex].gradientCenterColor || null, }, { value: total - props.data[selectedIndex].value, - color: 'transparent', + peripheral: true, + strokeWidth: 0, }, ]} key="pie" radius={radius + extraRadiusForFocused} initialAngle={startAngle} + showText={false} + innerRadius={props.innerRadius || radius / 2.5} /> diff --git a/src/PieChart/main.tsx b/src/PieChart/main.tsx index 01b8a17..60691b2 100644 --- a/src/PieChart/main.tsx +++ b/src/PieChart/main.tsx @@ -73,6 +73,9 @@ type itemType = { labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid'; onPress?: Function; onLabelPress?: Function; + strokeWidth?: number; + strokeColor?: string; + peripheral?: boolean; }; export const PieChartMain = (props: propTypes) => { @@ -266,44 +269,81 @@ export const PieChartMain = (props: propTypes) => { cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) + (item.shiftY || 0); - // console.log('sx', sx); - // console.log('sy', sy); - // console.log('ax', ax); - // console.log('ay', ay); return ( - total / 2 ? 1 : 0 - } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${ - cy + (item.shiftY || 0) - }`} - stroke={strokeColor} - strokeWidth={strokeWidth} - fill={ - showGradient - ? `url(#grad${index})` - : item.color || colors[index % 9] - } - onPress={() => { - if (item.onPress) { - item.onPress(); - } else if (props.onPress) { - props.onPress(item, index); + <> + {/********************* Pie sections background with colors excluding the borders *********/} + total / 2 ? 1 : 0 + } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${ + cy + (item.shiftY || 0) + }`} + stroke={'transparent'} + strokeWidth={0} + fill={ + props.selectedIndex === index || item.peripheral + ? 'transparent' + : showGradient + ? `url(#grad${index})` + : item.color || colors[index % 9] } - if (props.focusOnPress) { - if (props.selectedIndex === index) { - if (toggleFocusOnPress) { - props.setSelectedIndex(-1); - } - } else { - props.setSelectedIndex(index); + onPress={() => { + if (item.onPress) { + item.onPress(); + } else if (props.onPress) { + props.onPress(item, index); } + if (props.focusOnPress) { + if (props.selectedIndex === index) { + if (toggleFocusOnPress) { + props.setSelectedIndex(-1); + } + } else { + props.setSelectedIndex(index); + } + } + }} + /> + + {/********************* Pie sections borders (made separately as they can have separate strokeWidths) *********/} + + /> + total / 2 ? 1 : 0 + } 1 ${ax} ${ay}`} + stroke={item.strokeColor || strokeColor} + strokeWidth={ + props.focusOnPress && props.selectedIndex === index + ? 0 + : item.strokeWidth === 0 + ? 0 + : item.strokeWidth || strokeWidth + } + /> + + ); }) )}