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

Added examples

This commit is contained in:
Abhinandan Kushwaha 2021-08-14 19:07:21 +05:30
parent 00b04666f6
commit e205fe5693
8 changed files with 287 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
App.js
View File

@ -113,6 +113,26 @@ const App = () => {
{value: 250, label: 'Apr', frontColor: '#4ADDBA'},
{value: 320, label: 'May', frontColor: '#91E3E3'},
];
// const lineData = [
// {value: 0},
// {value: 10},
// {value: 8},
// {value: 58},
// {value: 56},
// {value: 78},
// {value: 74},
// {value: 98},
// ];
// const lineData2 = [
// {value: 0},
// {value: 20},
// {value: 18},
// {value: 40},
// {value: 36},
// {value: 60},
// {value: 54},
// {value: 85},
// ];
const lineData = [
{value: 0},
{value: 20},
@ -123,15 +143,27 @@ const App = () => {
{value: 54},
{value: 85},
];
const pieData = [
{value: 70, color: '#177AD5' /*text: '54%'*/},
{value: 30, color: 'lightgray' /*text: '30%'*/},
// {value: 20, color: '#ED6665' /*text: '26%'*/},
];
return (
<View
style={{
marginTop: 200,
paddingVertical: 50,
backgroundColor: '#1A3461',
}}>
{/* <LineChart data={ldata} /> */}
<PieChart
donut
innerRadius={80}
data={pieData}
centerLabelComponent={() => {
return <Text style={{fontSize: 30}}>70%</Text>;
}}
/>
{/* <BarChart
data={data}
horizontal
@ -174,15 +206,17 @@ const App = () => {
color="#0BA5A4"
/> */}
<LineChart
{/* <LineChart
areaChart
hideDataPoints
isAnimated
animationDuration={1200}
startFillColor="#0BA5A4"
startOpacity={1}
endOpacity={0.3}
initialSpacing={0}
data={lineData1}
spacing={40}
textShiftY={-10}
textShiftX={-5}
// hideDataPoints
textColor="yellow"
textFontSize={12}
data={lineData}
spacing={30}
thickness={5}
hideRules
hideYAxisText
@ -191,7 +225,31 @@ const App = () => {
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
/> */}
{/* <LineChart
areaChart
curved
data={lineData}
data2={lineData2}
height={250}
showVerticalLines
spacing={44}
initialSpacing={0}
color1="skyblue"
color2="orange"
textColor1="green"
hideDataPoints
dataPointsColor1="blue"
dataPointsColor2="red"
startFillColor1="skyblue"
startFillColor2="orange"
startOpacity={0.8}
endOpacity={0.3}
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
/> */}
{/* <View style={{marginLeft: 20}}>
<BarChart
barWidth={22}
@ -286,7 +344,6 @@ const App = () => {
capThickness={2}
capColor="gray"
/> */}
{/* <PieChart data={data} donut isThreeD shadow /> */}
{/* <BarChart data={data} horizontal noOfSections={5} /> */}
{/* <LineChart
xAxisColor="red"

42
examples/LineChart/AnimatedArea.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import {View} from 'react-native';
import {LineChart} from '../../src/LineChart';
const AnimatedArea = () => {
const lineData = [
{value: 0},
{value: 20},
{value: 18},
{value: 40},
{value: 36},
{value: 60},
{value: 54},
{value: 85},
];
return (
<View>
<LineChart
areaChart
hideDataPoints
isAnimated
animationDuration={1200}
startFillColor="#0BA5A4"
startOpacity={1}
endOpacity={0.3}
initialSpacing={0}
data={lineData}
spacing={30}
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
</View>
);
};
export default AnimatedArea;

55
examples/LineChart/AreaTwo.js Normal file
View File

@ -0,0 +1,55 @@
import React from 'react';
import {View} from 'react-native';
import {LineChart} from '../../src/LineChart';
const LineChartTwo = () => {
const lineData = [
{value: 0},
{value: 10},
{value: 8},
{value: 58},
{value: 56},
{value: 78},
{value: 74},
{value: 98},
];
const lineData2 = [
{value: 0},
{value: 20},
{value: 18},
{value: 40},
{value: 36},
{value: 60},
{value: 54},
{value: 85},
];
return (
<View>
<LineChart
areaChart
curved
data={lineData}
data2={lineData2}
height={250}
showVerticalLines
spacing={44}
initialSpacing={0}
color1="skyblue"
color2="orange"
textColor1="green"
hideDataPoints
dataPointsColor1="blue"
dataPointsColor2="red"
startFillColor1="skyblue"
startFillColor2="orange"
startOpacity={0.8}
endOpacity={0.3}
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
/>
</View>
);
};
export default LineChartTwo;

51
examples/LineChart/LineChartTwo.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import {View} from 'react-native';
import {LineChart} from '../../src/LineChart';
const LineChartTwo = () => {
const lineData = [
{value: 0, dataPointText: '0'},
{value: 10, dataPointText: '10'},
{value: 8, dataPointText: '8'},
{value: 58, dataPointText: '58'},
{value: 56, dataPointText: '56'},
{value: 78, dataPointText: '78'},
{value: 74, dataPointText: '74'},
{value: 98, dataPointText: '98'},
];
const lineData2 = [
{value: 0, dataPointText: '0'},
{value: 20, dataPointText: '20'},
{value: 18, dataPointText: '18'},
{value: 40, dataPointText: '40'},
{value: 36, dataPointText: '36'},
{value: 60, dataPointText: '60'},
{value: 54, dataPointText: '54'},
{value: 85, dataPointText: '85'},
];
return (
<View>
<LineChart
data={lineData}
data2={lineData2}
height={250}
showVerticalLines
spacing={44}
initialSpacing={0}
color1="skyblue"
color2="orange"
textColor1="green"
dataPointsHeight={6}
dataPointsWidth={6}
dataPointsColor1="blue"
dataPointsColor2="red"
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
/>
</View>
);
};
export default LineChartTwo;

24
examples/PieChart/ProgressPie.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import {View, Text} from 'react-native';
import {PieChart} from '../../src/PieChart';
const ProgressPie = () => {
const pieData = [
{value: 70, color: '#177AD5'},
{value: 30, color: 'lightgray'},
];
return (
<View>
<PieChart
donut
innerRadius={80}
data={pieData}
centerLabelComponent={() => {
return <Text style={{fontSize: 30}}>70%</Text>;
}}
/>
</View>
);
};
export default ProgressPie;

13
examples/PieChart/SplitPie.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import {PieChart} from '../../src/PieChart';
const SplitPie = () => {
const pieData = [
{value: 54, color: '#177AD5'},
{value: 40, color: '#79D2DE'},
{value: 20, color: '#ED6665', shiftX: 28, shiftY: -18},
];
return <PieChart data={pieData} />;
};
export default SplitPie;

33
examples/PieChart/ThreeDPie.js Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import {View} from 'react-native';
import {PieChart} from '../../src/PieChart';
const ThreeDPie = () => {
const pieData = [
{value: 54, color: '#177AD5', text: '54%'},
{value: 40, color: '#79D2DE', text: '30%'},
{value: 20, color: '#ED6665', text: '26%'},
];
return (
<View>
<PieChart
donut
isThreeD
showText
innerCircleBorderWidth={6}
innerCircleBorderColor="lightgray"
shiftInnerCenterX={-10}
shiftInnerCenterY={-15}
textColor="black"
radius={170}
textSize={20}
showTextBackground
textBackgroundRadius={26}
data={pieData}
/>
</View>
);
};
export default ThreeDPie;

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.1.2",
"version": "0.1.3",
"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.",
"main": "src/index.tsx",
"files": [