Abhinandan Kushwaha
GitHub
commit
0c33831059
75
App.js
75
App.js
|
|
@ -25,6 +25,40 @@ const App = () => {
|
|||
{ 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 (
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<View
|
||||
|
|
@ -73,37 +107,16 @@ const App = () => {
|
|||
|
||||
<BarChart
|
||||
width={300}
|
||||
stackData={
|
||||
[
|
||||
{
|
||||
stacks:
|
||||
[{
|
||||
value: 10, color: 'red'
|
||||
},
|
||||
{
|
||||
value: 20, color: 'blue'
|
||||
}]
|
||||
},
|
||||
{
|
||||
stacks:
|
||||
[{
|
||||
value: 14, color: 'red'
|
||||
},
|
||||
{
|
||||
value: 18, color: 'blue'
|
||||
}]
|
||||
},
|
||||
{
|
||||
stacks:
|
||||
[{
|
||||
value: 7, color: 'red'
|
||||
},
|
||||
{
|
||||
value: 10, color: 'blue'
|
||||
}]
|
||||
}
|
||||
]
|
||||
} />
|
||||
rotateLabel
|
||||
// isAnimated
|
||||
horizontal
|
||||
barWidth={8}
|
||||
spacing={40}
|
||||
noOfSections={4}
|
||||
initialSpacing={50}
|
||||
barBorderRadius={20}
|
||||
stackData={stackData}
|
||||
/>
|
||||
|
||||
|
||||
{/* <Text>Hello</Text> */}
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
| 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 |
|
||||
|
||||
## 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 |
|
||||
|
||||
|
||||
````
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"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.",
|
||||
"main": "src/index.tsx",
|
||||
"files": [
|
||||
|
|
|
|||
|
|
@ -99,7 +99,8 @@ const RenderBars = (props: Props) => {
|
|||
<View
|
||||
style={[
|
||||
{
|
||||
width: rotateLabel ? '150%' : '120%',
|
||||
width: (item.barWidth || props.barWidth || 30) + spacing / 2,
|
||||
left: -6,
|
||||
position: 'absolute',
|
||||
bottom: rotateLabel ? -40 : -25,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { Component, useEffect } from 'react';
|
||||
import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native';
|
||||
import Animated2DWithGradient from './Animated2DWithGradient';
|
||||
import React, { Component } from 'react';
|
||||
import { View, TouchableOpacity, Text, ColorValue } from 'react-native';
|
||||
import { Style } from 'util';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -8,16 +7,11 @@ type Props = {
|
|||
width?: number;
|
||||
height?: number;
|
||||
color?: ColorValue;
|
||||
showGradient?: Boolean;
|
||||
gradientColor?: any;
|
||||
frontColor?: ColorValue;
|
||||
sideColor?: ColorValue;
|
||||
topColor?: ColorValue;
|
||||
topLabelComponent?: Component;
|
||||
topLabelContainerStyle?: Style;
|
||||
opacity?: number;
|
||||
side?: String;
|
||||
labelTextStyle?: any;
|
||||
disablePress?: boolean;
|
||||
|
||||
item: itemType;
|
||||
index: number;
|
||||
|
|
@ -27,20 +21,7 @@ type Props = {
|
|||
data?: any;
|
||||
barWidth?: number;
|
||||
|
||||
isThreeD?: Boolean;
|
||||
isAnimated?: 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;
|
||||
verticalLinesThickness: number;
|
||||
verticalLinesColor: ColorValue;
|
||||
|
|
@ -56,11 +37,6 @@ type Props = {
|
|||
type itemType = {
|
||||
value?: number;
|
||||
onPress?: any;
|
||||
frontColor?: ColorValue;
|
||||
sideColor?: ColorValue;
|
||||
topColor?: ColorValue;
|
||||
showGradient?: Boolean;
|
||||
gradientColor?: any;
|
||||
label?: String;
|
||||
barWidth?: number;
|
||||
labelTextStyle?: any;
|
||||
|
|
@ -71,111 +47,61 @@ type itemType = {
|
|||
capColor?: ColorValue;
|
||||
capRadius?: number;
|
||||
labelComponent?: Function;
|
||||
barBorderRadius?: number;
|
||||
borderRadius?: number;
|
||||
stacks?: Array<any>
|
||||
};
|
||||
const RenderStackBars = (props: Props) => {
|
||||
const {
|
||||
item,
|
||||
index,
|
||||
containerHeight,
|
||||
maxValue,
|
||||
spacing,
|
||||
side,
|
||||
data,
|
||||
// oldValue,
|
||||
|
||||
isThreeD,
|
||||
isAnimated,
|
||||
rotateLabel,
|
||||
appearingOpacity,
|
||||
opacity,
|
||||
animationDuration,
|
||||
} = props;
|
||||
// const renderLabel = (label: String, labelTextStyle: any) => {
|
||||
// return (
|
||||
// <View
|
||||
// style={[
|
||||
// {
|
||||
// width: rotateLabel ? '150%' : '120%',
|
||||
// position: 'absolute',
|
||||
// bottom: rotateLabel ? -40 : -25,
|
||||
// },
|
||||
// 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>
|
||||
// )}
|
||||
// </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 disablePress = props.disablePress || false;
|
||||
const renderLabel = (label: String, labelTextStyle: any) => {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
|
||||
left: -6,
|
||||
position: 'absolute',
|
||||
bottom: rotateLabel ? -40 : -25
|
||||
},
|
||||
rotateLabel
|
||||
? props.horizontal
|
||||
? { transform: [{ rotate: '330deg' }] }
|
||||
: { transform: [{ rotate: '60deg' }] }
|
||||
: props.horizontal
|
||||
? { transform: [{ rotate: '-90deg' }] }
|
||||
: {},
|
||||
]}>
|
||||
{item.labelComponent ? (
|
||||
item.labelComponent()
|
||||
) : (
|
||||
<Text
|
||||
style={[labelTextStyle]}
|
||||
numberOfLines={1}>
|
||||
{label || ''}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const getPosition = (index: number) => {
|
||||
let position = 0;
|
||||
for (let i = 0; i < index - 1; i++) {
|
||||
position += (props.item.stacks[index].value * (containerHeight || 200)) / (maxValue || 200)
|
||||
for (let i = 0; i < index; i++) {
|
||||
position += (props.item.stacks[i].value * (containerHeight || 200)) / (maxValue || 200)
|
||||
}
|
||||
return position;
|
||||
}
|
||||
|
||||
const getTotalHeight = () => {
|
||||
return props.item.stacks.reduce((acc, stack) => {
|
||||
// console.log('stack-->', stack)
|
||||
return acc + stack.value
|
||||
}, 0)
|
||||
return props.item.stacks.reduce((acc, stack) => 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) => {
|
||||
|
|
@ -186,69 +112,36 @@ const RenderStackBars = (props: Props) => {
|
|||
style={[
|
||||
{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
width: item.stacks[0].barWidth || props.barWidth || 30,
|
||||
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) => {
|
||||
return (
|
||||
<View
|
||||
<TouchableOpacity
|
||||
onPress={stackItem.onPress}
|
||||
disabled={disablePress}
|
||||
style={[
|
||||
{
|
||||
position: 'absolute',
|
||||
bottom: getPosition(index),
|
||||
bottom: getPosition(index) + (stackItem.marginBottom || 0),
|
||||
width: '100%',
|
||||
height: (stackItem.value * (containerHeight || 200)) / (maxValue || 200),
|
||||
height: (stackItem.value * (containerHeight || 200)) / (maxValue || 200) - (stackItem.marginBottom || 0),
|
||||
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>
|
||||
{item.topLabelComponent && (
|
||||
<View
|
||||
|
|
@ -281,13 +174,10 @@ const RenderStackBars = (props: Props) => {
|
|||
{
|
||||
// overflow: 'visible',
|
||||
marginBottom: 60,
|
||||
width: item.stacks[0].barWidth || props.barWidth || 30,
|
||||
width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
|
||||
height: getTotalHeight(),
|
||||
marginRight: spacing,
|
||||
},
|
||||
// !isThreeD && !item.showGradient && !props.showGradient &&
|
||||
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
|
||||
side !== 'right' && data && { zIndex: data.length - index },
|
||||
}
|
||||
]}
|
||||
>
|
||||
{props.showVerticalLines && (
|
||||
|
|
@ -319,9 +209,7 @@ const RenderStackBars = (props: Props) => {
|
|||
{
|
||||
static2DSimple(item)
|
||||
}
|
||||
{/* {isAnimated
|
||||
? renderAnimatedLabel(item.label || '', item.labelTextStyle)
|
||||
: renderLabel(item.label || '', item.labelTextStyle)} */}
|
||||
{renderLabel(item.label || '', item.labelTextStyle)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ type PropTypes = {
|
|||
showScrollIndicator?: Boolean;
|
||||
roundedTop?: Boolean;
|
||||
roundedBottom?: Boolean;
|
||||
disablePress?: Boolean;
|
||||
disablePress?: boolean;
|
||||
|
||||
frontColor?: ColorValue;
|
||||
sideColor?: ColorValue;
|
||||
|
|
@ -111,7 +111,7 @@ export const BarChart = (props: PropTypes) => {
|
|||
if (props.stackData) {
|
||||
props.stackData.forEach(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)
|
||||
if (stackSum > maxItem) {
|
||||
maxItem = stackSum
|
||||
|
|
@ -329,8 +329,7 @@ export const BarChart = (props: PropTypes) => {
|
|||
style={[
|
||||
styles.container,
|
||||
{
|
||||
height: containerHeight,
|
||||
backgroundColor: 'yellow'
|
||||
height: containerHeight
|
||||
},
|
||||
props.width && { width: props.width },
|
||||
horizontal && { transform: [{ rotate: '90deg' }, { translateY: -15 }] },
|
||||
|
|
@ -350,7 +349,6 @@ export const BarChart = (props: PropTypes) => {
|
|||
height: containerHeight + 130,
|
||||
width: totalWidth,
|
||||
paddingLeft: ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2,
|
||||
backgroundColor: 'pink',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
showsHorizontalScrollIndicator={showScrollIndicator}
|
||||
|
|
@ -367,29 +365,10 @@ export const BarChart = (props: PropTypes) => {
|
|||
containerHeight={containerHeight}
|
||||
maxValue={maxValue}
|
||||
spacing={spacing}
|
||||
side={side}
|
||||
data={data}
|
||||
barWidth={props.barWidth}
|
||||
opacity={opacity}
|
||||
isThreeD={isThreeD}
|
||||
isAnimated={isAnimated}
|
||||
animationDuration={animationDuration}
|
||||
rotateLabel={rotateLabel}
|
||||
animatedHeight={animatedHeight}
|
||||
appearingOpacity={appearingOpacity}
|
||||
roundedTop={props.roundedTop}
|
||||
roundedBottom={props.roundedBottom}
|
||||
disablePress={props.disablePress}
|
||||
frontColor={props.frontColor}
|
||||
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}
|
||||
rotateLabel={rotateLabel}
|
||||
showVerticalLines={showVerticalLines}
|
||||
verticalLinesThickness={verticalLinesThickness}
|
||||
verticalLinesColor={verticalLinesColor}
|
||||
|
|
|
|||
Loading…
Reference in New Issue