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

Handled 0 values

This commit is contained in:
Abhinandan Kushwaha 2021-08-05 17:42:48 +05:30
parent 98b5f151c9
commit 162b533b6d
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 = [
{value: 150},
{value: 80, text: 80},
{value: 90, text: 90, textColor: 'green', textBackgroundColor: 'pink'},
{value: 70},
{value: 15, label: 'Jan'},
{value: 40, label: 'Feb'},
{value: 10, label: 'Mar'},
{value: 0, label: 'Apr'},
];
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<BarChart
showGradient
isThreeD
isAnimated
gradientColor="gray"
frontColor="white"
// frontColor="white"
data={data}
/>
<LineChart data={data} />
<PieChart
{/* <LineChart data={data} /> */}
{/* <PieChart
showText
showTextBackground
showValuesAsLabels
textSize={14}
data={data}
/>
/> */}
{/* <LineChart data={data} curved /> */}
{/* <BarChart
data={data}

2
package.json
View File

@ -1,6 +1,6 @@
{
"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.",
"main": "src/index.tsx",
"files": [

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

@ -118,54 +118,60 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{opacity: opacity, position: 'absolute', bottom: 0},
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, //animatedSideHeight
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
{props.height ? (
<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, //animatedSideHeight
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
) : null}
{/******************* 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: width / 2,
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>
{props.height ? (
<>
<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: width / 2,
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>
</>
) : null}
{/*******************************************************************/}

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

@ -71,82 +71,84 @@ const ThreeDBar = (props: PropTypes) => {
const opacity = props.opacity || 1;
return (
<View style={styles.container}>
<View
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>
{/*******************************************************************/}
{props.height ? (
<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]}
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
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>
) : null}
{/******************* Top Label *****************/}