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

Development
This commit is contained in:
Abhinandan Kushwaha 2021-08-09 04:54:55 +05:30 committed by GitHub
parent ba3d8ce1f2 2da0f14691
commit 0c33831059
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 173 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
App.js
View File

@ -25,6 +25,40 @@ const App = () => {
{ value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true }, { value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true },
]; ];
const stackData = [
{
stacks:
[{
value: 10, color: 'red'
},
{
value: 20, color: 'blue', marginBottom: 1
}],
label: 'Jan'
},
{
stacks:
[{
value: 14, color: 'red'
},
{
value: 18, color: 'blue', marginBottom: 1
}],
label: 'Feb'
},
{
stacks:
[{
value: 7, color: 'red'
},
{ value: 11, color: 'green', marginBottom: 1 },
{
value: 10, color: 'blue', marginBottom: 1
}],
label: 'Mar'
}
];
return ( return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View <View
@ -73,37 +107,16 @@ const App = () => {
<BarChart <BarChart
width={300} width={300}
stackData={ rotateLabel
[ // isAnimated
{ horizontal
stacks: barWidth={8}
[{ spacing={40}
value: 10, color: 'red' noOfSections={4}
}, initialSpacing={50}
{ barBorderRadius={20}
value: 20, color: 'blue' stackData={stackData}
}] />
},
{
stacks:
[{
value: 14, color: 'red'
},
{
value: 18, color: 'blue'
}]
},
{
stacks:
[{
value: 7, color: 'red'
},
{
value: 10, color: 'blue'
}]
}
]
} />
{/* <Text>Hello</Text> */} {/* <Text>Hello</Text> */}

65
docs/BarChart/BarChartProps.md
View File

@ -139,4 +139,69 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| horizontal | Boolean | Render horizontal BarChart | false | | horizontal | Boolean | Render horizontal BarChart | false |
| yAxisAtTop | Boolean | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | false | | yAxisAtTop | Boolean | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | false |
| intactTopLabel | Boolean | To rotate the top label component to make it intact with the Bars | false | | intactTopLabel | Boolean | To rotate the top label component to make it intact with the Bars | false |
## Props for Stacked Bar Charts
#### To render stacked charts, you need to pass the prop stackData instead of data.
The structure of stackData is-
[
{
stacks:
[
{
value: 10, color: 'red', onPres: someFunction
},
{
value: 20, color: 'blue', marginBottom: 1, onPres: someFunction
},
...
],
label: 'Jan',
...otherProps,
},
{
stacks:
[
{
value: 8, color: 'red', onPres: someFunction
},
{
value: 17, color: 'blue', marginBottom: 1, onPres: someFunction
},
...
],
label: 'Feb',
...otherProps,
},
...
]
| Prop | Type | Description | Default value |
| -------------- | ------- | --------------------------------------------------------------------------------------------- | ------------- |
| stackData | Array of stack arrays | A stack array represents a stack of bars in the bar chart. It is described in the next table | false |
### Stack Array description
| Key | Value type | Description |
| -------------- | ---------------- | --------------------------------------------------------------------------------------------- |
| stacks array | Array of stacks | A stack is made of 1 or more objects of the type described in the next table |
| label | string | Label text appearing below the stack (under the X axis) |
| labelTextStyle | Style object for the label text appearing below the stack |
### Stack item description
| Key | Value type | Description |
| -------------- | ---------------- | --------------------------------------------------------------------------------------------- |
| value | number | Value of the item representing height of the stack item |
| color | ColorValue | Color of the stack item |
| onPress | function | Function called on pressing the stack item |
| marginBottom | number | margin below a particular stack section |
| barBorderRadius | number | Border radius of a stack section |
| borderTopLeftRadius | number | borderTopLeftRadius for a stack section |
| borderTopRightRadius | number | borderTopRightRadius for a stack section |
| borderBottomLeftRadius | number | borderBottomLeftRadius for a stack section |
| borderBottomRightRadius | number | borderBottomRightRadius for a stack section |
```` ````

2
package.json
View File

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

3
src/BarChart/RenderBars.tsx
View File

@ -99,7 +99,8 @@ const RenderBars = (props: Props) => {
<View <View
style={[ style={[
{ {
width: rotateLabel ? '150%' : '120%', width: (item.barWidth || props.barWidth || 30) + spacing / 2,
left: -6,
position: 'absolute', position: 'absolute',
bottom: rotateLabel ? -40 : -25, bottom: rotateLabel ? -40 : -25,
}, },

226
src/BarChart/RenderStackBars.tsx
View File

@ -1,6 +1,5 @@
import React, { Component, useEffect } from 'react'; import React, { Component } from 'react';
import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native'; import { View, TouchableOpacity, Text, ColorValue } from 'react-native';
import Animated2DWithGradient from './Animated2DWithGradient';
import { Style } from 'util'; import { Style } from 'util';
type Props = { type Props = {
@ -8,16 +7,11 @@ type Props = {
width?: number; width?: number;
height?: number; height?: number;
color?: ColorValue; color?: ColorValue;
showGradient?: Boolean;
gradientColor?: any;
frontColor?: ColorValue;
sideColor?: ColorValue;
topColor?: ColorValue;
topLabelComponent?: Component; topLabelComponent?: Component;
topLabelContainerStyle?: Style; topLabelContainerStyle?: Style;
opacity?: number; opacity?: number;
side?: String;
labelTextStyle?: any; labelTextStyle?: any;
disablePress?: boolean;
item: itemType; item: itemType;
index: number; index: number;
@ -27,20 +21,7 @@ type Props = {
data?: any; data?: any;
barWidth?: number; barWidth?: number;
isThreeD?: Boolean;
isAnimated?: Boolean;
rotateLabel?: Boolean; rotateLabel?: Boolean;
animatedHeight?: any;
appearingOpacity?: any;
animationDuration?: number;
roundedTop?: Boolean;
roundedBottom?: Boolean;
disablePress?: Boolean;
activeOpacity?: number;
cappedBars?: Boolean;
capThickness?: number;
capColor?: ColorValue;
capRadius?: number;
showVerticalLines: Boolean; showVerticalLines: Boolean;
verticalLinesThickness: number; verticalLinesThickness: number;
verticalLinesColor: ColorValue; verticalLinesColor: ColorValue;
@ -56,11 +37,6 @@ type Props = {
type itemType = { type itemType = {
value?: number; value?: number;
onPress?: any; onPress?: any;
frontColor?: ColorValue;
sideColor?: ColorValue;
topColor?: ColorValue;
showGradient?: Boolean;
gradientColor?: any;
label?: String; label?: String;
barWidth?: number; barWidth?: number;
labelTextStyle?: any; labelTextStyle?: any;
@ -71,111 +47,61 @@ type itemType = {
capColor?: ColorValue; capColor?: ColorValue;
capRadius?: number; capRadius?: number;
labelComponent?: Function; labelComponent?: Function;
barBorderRadius?: number; borderRadius?: number;
stacks?: Array<any> stacks?: Array<any>
}; };
const RenderStackBars = (props: Props) => { const RenderStackBars = (props: Props) => {
const { const {
item, item,
index,
containerHeight, containerHeight,
maxValue, maxValue,
spacing, spacing,
side,
data,
// oldValue,
isThreeD,
isAnimated,
rotateLabel, rotateLabel,
appearingOpacity,
opacity,
animationDuration,
} = props; } = props;
// const renderLabel = (label: String, labelTextStyle: any) => { const disablePress = props.disablePress || false;
// return ( const renderLabel = (label: String, labelTextStyle: any) => {
// <View return (
// style={[ <View
// { style={[
// width: rotateLabel ? '150%' : '120%', {
// position: 'absolute', width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
// bottom: rotateLabel ? -40 : -25, left: -6,
// }, position: 'absolute',
// rotateLabel bottom: rotateLabel ? -40 : -25
// ? props.horizontal },
// ? { transform: [{ rotate: '330deg' }] } rotateLabel
// : { transform: [{ rotate: '60deg' }] } ? props.horizontal
// : props.horizontal ? { transform: [{ rotate: '330deg' }] }
// ? { transform: [{ rotate: '-90deg' }] } : { transform: [{ rotate: '60deg' }] }
// : {}, : props.horizontal
// ]}> ? { transform: [{ rotate: '-90deg' }] }
// {item.labelComponent ? ( : {},
// item.labelComponent() ]}>
// ) : ( {item.labelComponent ? (
// <Text item.labelComponent()
// style={[labelTextStyle, { textAlign: 'center' }]} ) : (
// numberOfLines={1}> <Text
// {label || ''} style={[labelTextStyle]}
// </Text> numberOfLines={1}>
// )} {label || ''}
// </View> </Text>
// ); )}
// }; </View>
);
// const renderAnimatedLabel = (label: String, labelTextStyle: any) => { };
// return (
// <Animated.View
// style={[
// {
// width: rotateLabel ? '150%' : '120%',
// position: 'absolute',
// bottom: rotateLabel ? -40 : -25,
// opacity: appearingOpacity,
// },
// rotateLabel
// ? props.horizontal
// ? { transform: [{ rotate: '330deg' }] }
// : { transform: [{ rotate: '60deg' }] }
// : props.horizontal
// ? { transform: [{ rotate: '-90deg' }] }
// : {},
// ]}>
// {item.labelComponent ? (
// item.labelComponent()
// ) : (
// <Text
// style={[labelTextStyle, { textAlign: 'center' }]}
// numberOfLines={1}>
// {label || ''}
// </Text>
// )}
// </Animated.View>
// );
// };
const getPosition = (index: number) => { const getPosition = (index: number) => {
let position = 0; let position = 0;
for (let i = 0; i < index - 1; i++) { for (let i = 0; i < index; i++) {
position += (props.item.stacks[index].value * (containerHeight || 200)) / (maxValue || 200) position += (props.item.stacks[i].value * (containerHeight || 200)) / (maxValue || 200)
} }
return position; return position;
} }
const getTotalHeight = () => { const getTotalHeight = () => {
return props.item.stacks.reduce((acc, stack) => { return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0)
// console.log('stack-->', stack)
return acc + stack.value
}, 0)
} }
// useEffect(() => {
// const he = props.item.stacks.reduce((acc, stack) => {
// console.log('stack-->', stack)
// console.log('acc-->', acc)
// return acc + stack.value
// }, 0)
// console.log('he', he);
// }, [])
const static2DSimple = (item: itemType) => { const static2DSimple = (item: itemType) => {
@ -186,69 +112,36 @@ const RenderStackBars = (props: Props) => {
style={[ style={[
{ {
position: 'absolute', position: 'absolute',
width: '100%', width: item.stacks[0].barWidth || props.barWidth || 30,
height: '100%', height: '100%',
backgroundColor: item.frontColor || props.frontColor || 'black',
borderRadius: props.barBorderRadius || item.barBorderRadius || 0
},
props.roundedBottom && {
borderBottomLeftRadius:
(item.barWidth || props.barWidth || 30) / 2,
borderBottomRightRadius:
(item.barWidth || props.barWidth || 30) / 2,
},
props.cappedBars && {
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
},
props.roundedTop && {
borderTopLeftRadius: (item.barWidth || props.barWidth || 30) / 2,
borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
}, },
]}> ]}>
{ {
item.stacks.map((stackItem, index) => { item.stacks.map((stackItem, index) => {
return ( return (
<View <TouchableOpacity
onPress={stackItem.onPress}
disabled={disablePress}
style={[ style={[
{ {
position: 'absolute', position: 'absolute',
bottom: getPosition(index), bottom: getPosition(index) + (stackItem.marginBottom || 0),
width: '100%', width: '100%',
height: (stackItem.value * (containerHeight || 200)) / (maxValue || 200), height: (stackItem.value * (containerHeight || 200)) / (maxValue || 200) - (stackItem.marginBottom || 0),
backgroundColor: stackItem.color || 'black', backgroundColor: stackItem.color || 'black',
borderRadius: stackItem.borderRadius || 0 borderRadius: stackItem.borderRadius || props.barBorderRadius || 0,
},]} /> },
(!props.barBorderRadius && !stackItem.borderRadius) && {
borderTopLeftRadius: stackItem.borderTopLeftRadius || 0,
borderTopRightRadius: stackItem.borderTopRightRadius || 0,
borderBottomLeftRadius: stackItem.borderBottomLeftRadius || 0,
borderBottomRightRadius: stackItem.borderBottomRightRadius || 0,
}
]} />
) )
}) })
} }
{props.cappedBars && (
<View
style={{
position: 'absolute',
width: '100%',
height:
item.capThickness === 0
? 0
: item.capThickness || props.capThickness || 6,
backgroundColor: item.capColor || props.capColor || 'gray',
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
}}
/>
)}
</View> </View>
{item.topLabelComponent && ( {item.topLabelComponent && (
<View <View
@ -281,13 +174,10 @@ const RenderStackBars = (props: Props) => {
{ {
// overflow: 'visible', // overflow: 'visible',
marginBottom: 60, marginBottom: 60,
width: item.stacks[0].barWidth || props.barWidth || 30, width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
height: getTotalHeight(), height: getTotalHeight(),
marginRight: spacing, marginRight: spacing,
}, }
// !isThreeD && !item.showGradient && !props.showGradient &&
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && data && { zIndex: data.length - index },
]} ]}
> >
{props.showVerticalLines && ( {props.showVerticalLines && (
@ -319,9 +209,7 @@ const RenderStackBars = (props: Props) => {
{ {
static2DSimple(item) static2DSimple(item)
} }
{/* {isAnimated {renderLabel(item.label || '', item.labelTextStyle)}
? renderAnimatedLabel(item.label || '', item.labelTextStyle)
: renderLabel(item.label || '', item.labelTextStyle)} */}
</View> </View>
); );
}; };

29
src/BarChart/index.tsx
View File

@ -61,7 +61,7 @@ type PropTypes = {
showScrollIndicator?: Boolean; showScrollIndicator?: Boolean;
roundedTop?: Boolean; roundedTop?: Boolean;
roundedBottom?: Boolean; roundedBottom?: Boolean;
disablePress?: Boolean; disablePress?: boolean;
frontColor?: ColorValue; frontColor?: ColorValue;
sideColor?: ColorValue; sideColor?: ColorValue;
@ -111,7 +111,7 @@ export const BarChart = (props: PropTypes) => {
if (props.stackData) { if (props.stackData) {
props.stackData.forEach(stackItem => { props.stackData.forEach(stackItem => {
console.log('stackItem', stackItem); console.log('stackItem', stackItem);
let stackSum = stackItem.stacks.reduce((acc, stack) => acc + stack.val, 0) let stackSum = stackItem.stacks.reduce((acc, stack) => acc + stack.value, 0)
console.log('stackSum--->', stackSum) console.log('stackSum--->', stackSum)
if (stackSum > maxItem) { if (stackSum > maxItem) {
maxItem = stackSum maxItem = stackSum
@ -329,8 +329,7 @@ export const BarChart = (props: PropTypes) => {
style={[ style={[
styles.container, styles.container,
{ {
height: containerHeight, height: containerHeight
backgroundColor: 'yellow'
}, },
props.width && { width: props.width }, props.width && { width: props.width },
horizontal && { transform: [{ rotate: '90deg' }, { translateY: -15 }] }, horizontal && { transform: [{ rotate: '90deg' }, { translateY: -15 }] },
@ -350,7 +349,6 @@ export const BarChart = (props: PropTypes) => {
height: containerHeight + 130, height: containerHeight + 130,
width: totalWidth, width: totalWidth,
paddingLeft: ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2, paddingLeft: ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2,
backgroundColor: 'pink',
alignItems: 'flex-end', alignItems: 'flex-end',
}} }}
showsHorizontalScrollIndicator={showScrollIndicator} showsHorizontalScrollIndicator={showScrollIndicator}
@ -367,29 +365,10 @@ export const BarChart = (props: PropTypes) => {
containerHeight={containerHeight} containerHeight={containerHeight}
maxValue={maxValue} maxValue={maxValue}
spacing={spacing} spacing={spacing}
side={side}
data={data}
barWidth={props.barWidth} barWidth={props.barWidth}
opacity={opacity} opacity={opacity}
isThreeD={isThreeD}
isAnimated={isAnimated}
animationDuration={animationDuration}
rotateLabel={rotateLabel}
animatedHeight={animatedHeight}
appearingOpacity={appearingOpacity}
roundedTop={props.roundedTop}
roundedBottom={props.roundedBottom}
disablePress={props.disablePress} disablePress={props.disablePress}
frontColor={props.frontColor} rotateLabel={rotateLabel}
sideColor={props.sideColor}
topColor={props.topColor}
showGradient={props.showGradient}
gradientColor={props.gradientColor}
activeOpacity={props.activeOpacity}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}
capRadius={props.capRadius}
showVerticalLines={showVerticalLines} showVerticalLines={showVerticalLines}
verticalLinesThickness={verticalLinesThickness} verticalLinesThickness={verticalLinesThickness}
verticalLinesColor={verticalLinesColor} verticalLinesColor={verticalLinesColor}