status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #248 from Abhinandan-Kushwaha/abhi 

Abhi
This commit is contained in:
Abhinandan Kushwaha 2022-07-03 17:31:21 +05:30 committed by GitHub
parent b3fafdeba0 bd034b2e91
commit be4edbe134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demos/blues.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

1
docs/BarChart/BarChartProps.md
View File

@ -25,6 +25,7 @@
| showLine | Boolean | To show a Line chart over the Bar chart with the same data | false |
| lineData | Array of items | The data object for the line chart (use only when showLine is true) | data |
| lineConfig | lineConfigType | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | defaultLineConfig |
| lineBehindBars | boolean | When set to true, the line chart will appear behind the Bars in case of overlap | false |
| autoShiftLabels | Boolean | When set to true, automatically shifts the X axis labels for negative values | false |
| scrollToEnd | Boolean | When set to true, the chart automatically scrolls to the rightmost bar | false |
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true |

6
docs/PieChart/PieChartProps.md
View File

@ -12,6 +12,7 @@
| focusOnPress | Boolean | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | false |
| toggleFocusOnPress | Boolean | When set to true, if the user presses an already focused pie section, it will be unfocused | true |
| extraRadiusForFocused | number | Extra radius for the focused Pie section | radius/10 |
| sectionAutoFocus | boolean | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | false |
| onLabelPress | Function | Callback function called on press of a Label (takes item and index as parameter) | onPress OR null |
| tiltAngle | Angle in deg | The angle by which the chart should be tilted | '55deg' for 3D charts, otherwise 0 |
| shadow | Boolean | Shadow to the Pie chart, when set to true, it enhances the 3D effect | false |
@ -86,8 +87,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 |
| strokeWidth | number | Stroke (line) width for the Pie chart and its section |
| strokeColor | ColorValue | Stroke (line) color |
| focused | boolean | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.40",
"version": "1.2.41",
"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": [

6
src/BarChart/index.tsx
View File

@ -62,6 +62,7 @@ type PropTypes = {
showLine?: Boolean;
lineData?: any;
lineConfig?: lineConfigType;
lineBehindBars?: boolean;
cappedBars?: Boolean;
capThickness?: number;
@ -235,6 +236,7 @@ export const BarChart = (props: PropTypes) => {
return props.data;
}, [props.yAxisOffset, props.data]);
const lineData = props.lineData || data;
const lineBehindBars = props.lineBehindBars || false;
const defaultLineConfig = {
initialSpacing: initialSpacing,
curved: false,
@ -1434,7 +1436,7 @@ export const BarChart = (props: PropTypes) => {
height: containerHeight + 10,
bottom: 60, //stepHeight * -0.5 + xAxisThickness,
width: animatedWidth,
zIndex: -1,
zIndex: lineBehindBars ? -1 : 100000,
// backgroundColor: 'wheat',
}}>
<Svg>
@ -1471,7 +1473,7 @@ export const BarChart = (props: PropTypes) => {
height: containerHeight + 10,
bottom: 60, //stepHeight * -0.5 + xAxisThickness,
width: totalWidth,
zIndex: -1,
zIndex: lineBehindBars ? -1 : 100000,
// backgroundColor: 'rgba(200,150,150,0.1)'
}}>
<Svg>

8
src/PieChart/index.tsx
View File

@ -45,6 +45,7 @@ type propTypes = {
toggleFocusOnPress?: Boolean;
selectedIndex?: number;
setSelectedIndex?: Function;
sectionAutoFocus?: boolean;
onLabelPress?: Function;
extraRadiusForFocused?: number;
};
@ -69,13 +70,16 @@ type itemType = {
onLabelPress?: Function;
strokeWidth?: number;
strokeColor?: string;
focused?: boolean;
};
export const PieChart = (props: propTypes) => {
const radius = props.radius || 120;
const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
const [selectedIndex, setSelectedIndex] = useState(-1);
const [selectedIndex, setSelectedIndex] = useState(
props.data.findIndex(item => item.focused === true),
);
let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
let total = 0;
props.data.forEach(item => {
@ -96,7 +100,7 @@ export const PieChart = (props: propTypes) => {
}}>
{!(
props.data.length <= 1 ||
!props.focusOnPress ||
!(props.focusOnPress || props.sectionAutoFocus) ||
selectedIndex === -1
) && (
<View