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 #3 from Abhinandan-Kushwaha/development 

Development
This commit is contained in:
Abhinandan Kushwaha 2021-08-05 17:44:12 +05:30 committed by GitHub
parent 1524fa4058 707e4af9ad
commit f724c920d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
App.js
View File

@ -19,28 +19,30 @@ const App = () => {
// ]; // ];
const data = [ const data = [
{value: 150}, {value: 15, label: 'Jan'},
{value: 80, text: 80}, {value: 40, label: 'Feb'},
{value: 90, text: 90, textColor: 'green', textBackgroundColor: 'pink'}, {value: 10, label: 'Mar'},
{value: 70}, {value: 0, label: 'Apr'},
]; ];
return ( return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<BarChart <BarChart
showGradient showGradient
isThreeD
isAnimated
gradientColor="gray" gradientColor="gray"
frontColor="white" // frontColor="white"
data={data} data={data}
/> />
<LineChart data={data} /> {/* <LineChart data={data} /> */}
<PieChart {/* <PieChart
showText showText
showTextBackground showTextBackground
showValuesAsLabels showValuesAsLabels
textSize={14} textSize={14}
data={data} data={data}
/> /> */}
{/* <LineChart data={data} curved /> */} {/* <LineChart data={data} curved /> */}
{/* <BarChart {/* <BarChart
data={data} data={data}

2
package.json
View File

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

98
src/Components/AnimatedBar/index.tsx
View File

@ -118,54 +118,60 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{opacity: opacity, position: 'absolute', bottom: 0}, {opacity: opacity, position: 'absolute', bottom: 0},
props.side === 'right' && {transform: [{rotateY: '180deg'}]}, props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}> ]}>
<View style={{marginTop: width / -2}}> {props.height ? (
<TriangleCorner <View style={{marginTop: width / -2}}>
color={sideColor} <TriangleCorner
width={width} color={sideColor}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}} width={width}
/> style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
<View />
style={{ <View
width: width / 2, style={{
height: height - width / 2, //animatedSideHeight width: width / 2,
backgroundColor: sideColor, height: height - width / 2, //animatedSideHeight
opacity: opacity, backgroundColor: sideColor,
}} opacity: opacity,
/> }}
<TriangleCorner />
color={sideColor} <TriangleCorner
width={width} color={sideColor}
style={{transform: [{rotate: '90deg'}], opacity: opacity}} width={width}
/> style={{transform: [{rotate: '90deg'}], opacity: opacity}}
</View> />
</View>
) : null}
{/******************* Top View *****************/} {/******************* Top View *****************/}
{props.height ? (
<View style={{position: 'absolute', top: width / -2}}> <>
<TriangleCorner <View style={{position: 'absolute', top: width / -2}}>
color={topColor} <TriangleCorner
width={width} color={topColor}
style={{transform: [{rotate: '90deg'}], opacity: opacity}} width={width}
/> style={{transform: [{rotate: '90deg'}], opacity: opacity}}
</View> />
<View style={{position: 'absolute', top: width / -2}}> </View>
<View <View style={{position: 'absolute', top: width / -2}}>
style={{ <View
width: width / 2, style={{
height: width / 2, width: width / 2,
left: width / 2, height: width / 2,
backgroundColor: topColor, left: width / 2,
opacity: opacity, backgroundColor: topColor,
}} opacity: opacity,
/> }}
</View> />
<View style={{position: 'absolute', top: width / -2, left: width}}> </View>
<TriangleCorner <View
color={topColor} style={{position: 'absolute', top: width / -2, left: width}}>
width={width} <TriangleCorner
style={{transform: [{rotate: '-90deg'}], opacity: opacity}} color={topColor}
/> width={width}
</View> style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
</>
) : null}
{/*******************************************************************/} {/*******************************************************************/}

148
src/Components/ThreeDBar/index.tsx
View File

@ -71,82 +71,84 @@ const ThreeDBar = (props: PropTypes) => {
const opacity = props.opacity || 1; const opacity = props.opacity || 1;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View {props.height ? (
style={[
styles.row,
props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
<View style={{marginTop: width / -2}}>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
<View
style={{
width: width / 2,
height: height - width / 2,
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
{/******************* Top View *****************/}
<View style={{position: 'absolute', top: width / -2}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
<View style={{position: 'absolute', top: width / -2}}>
<View
style={{
width: width / 2,
height: (3 * width) / 4,
left: width / 2,
backgroundColor: topColor,
opacity: opacity,
}}
/>
</View>
<View style={{position: 'absolute', top: width / -2, left: width}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
{/*******************************************************************/}
<View <View
style={{ style={[
width: width, styles.row,
height: height, props.side === 'right' && {transform: [{rotateY: '180deg'}]},
backgroundColor: frontColor, ]}>
borderLeftWidth: StyleSheet.hairlineWidth, <View style={{marginTop: width / -2}}>
borderTopWidth: StyleSheet.hairlineWidth, <TriangleCorner
borderColor: 'white', color={sideColor}
opacity: opacity, width={width}
}}> style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
{showGradient && (
<LinearGradient
style={{position: 'absolute', width: '100%', height: '100%'}}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
colors={[gradientColor, frontColor]}
/> />
)} <View
style={{
width: width / 2,
height: height - width / 2,
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
{/******************* Top View *****************/}
<View style={{position: 'absolute', top: width / -2}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
<View style={{position: 'absolute', top: width / -2}}>
<View
style={{
width: width / 2,
height: (3 * width) / 4,
left: width / 2,
backgroundColor: topColor,
opacity: opacity,
}}
/>
</View>
<View style={{position: 'absolute', top: width / -2, left: width}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
{/*******************************************************************/}
<View
style={{
width: width,
height: height,
backgroundColor: frontColor,
borderLeftWidth: StyleSheet.hairlineWidth,
borderTopWidth: StyleSheet.hairlineWidth,
borderColor: 'white',
opacity: opacity,
}}>
{showGradient && (
<LinearGradient
style={{position: 'absolute', width: '100%', height: '100%'}}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
colors={[gradientColor, frontColor]}
/>
)}
</View>
</View> </View>
</View> ) : null}
{/******************* Top Label *****************/} {/******************* Top Label *****************/}