status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-22 16:48:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #243 from Abhinandan-Kushwaha/abhi

Browse Source 
Added barStyle to Bar and Stacked bar charts
This commit is contained in:
Abhinandan Kushwaha 2022-07-01 22:19:52 +05:30 committed by GitHub
commit a809e48ade
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/BarChart/BarChartProps.md
View File

@ -93,6 +93,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D |
| sideWidth | number | Width of the side view of the bar, only for 3 D |
| topColor | ColorValue | Color of the top view of the bar, only for 3 D |
| barStyle | object | style object for the Bars |
| showGradient | Boolean | Prop to enable linear gradient for the bar color, defaults to false |
| gradientColor | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient |
| label | string | Label text appearing below the bar (under the X axis) |
@ -110,7 +111,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| spacing | number | Distance of the next Bar from the currennt Bar |
| barBackgroundPattern | Component | A svg component containing the background pattern for bars |
| patternId | String | ID of the pattern component |
| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left |
| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left |
---
@ -200,6 +201,7 @@ type referenceConfigType = {
| Prop | Type | Description | Default value |
| --------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ |
| barWidth | number | Width of the bar | 30 |
| barStyle | object | style object for the Bars | \_ |
| isThreeD | Boolean | Prop to render 3 dimensional bars | false |
| frontColor | ColorValue | Color of the bar | black for 2D, red for 3D |
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D | red |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.38",
"version": "1.2.39",
"description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

28
src/BarChart/Animated2DWithGradient.tsx
View File

@ -39,6 +39,7 @@ type propTypes = {
barBackgroundPattern?: Function;
patternId?: String;
barMarginBottom?: number;
barStyle?: object;
};
type itemType = {
value?: number;
@ -61,6 +62,7 @@ type itemType = {
barBackgroundPattern?: Function;
patternId?: String;
barMarginBottom?: number;
barStyle?: object;
};
const Animated2DWithGradient = (props: propTypes) => {
@ -68,6 +70,7 @@ const Animated2DWithGradient = (props: propTypes) => {
barBackgroundPattern,
patternId,
barWidth,
barStyle,
item,
opacity,
animationDuration,
@ -128,17 +131,20 @@ const Animated2DWithGradient = (props: propTypes) => {
: height) - (barMarginBottom || 0),
}}>
<View
style={{
width: '100%',
height:
(noAnimation
? Math.max(
props.minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
)
: height) - (barMarginBottom || 0),
}}>
style={[
{
width: '100%',
height:
(noAnimation
? Math.max(
props.minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
)
: height) - (barMarginBottom || 0),
},
item.barStyle || barStyle,
]}>
{noGradient ? (
<View
style={[

10
src/BarChart/RenderBars.tsx
View File

@ -69,6 +69,7 @@ type Props = {
initialSpacing: number;
selectedIndex: number;
setSelectedIndex: Function;
barStyle?: object;
};
type itemType = {
value?: number;
@ -97,6 +98,7 @@ type itemType = {
patternId?: String;
barMarginBottom?: number;
leftShiftForTooltip?: number;
barStyle?: object;
};
const RenderBars = (props: Props) => {
const {
@ -109,6 +111,7 @@ const RenderBars = (props: Props) => {
propSpacing,
side,
data,
barStyle,
// oldValue,
isThreeD,
@ -419,6 +422,8 @@ const RenderBars = (props: Props) => {
patternId={item.patternId || props.patternId}
topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30}
barStyle={barStyle}
item={item}
sideWidth={
item.sideWidth ||
props.sideWidth ||
@ -457,6 +462,8 @@ const RenderBars = (props: Props) => {
props.sideWidth ||
(item.barWidth || props.barWidth || 30) / 2
}
barStyle={barStyle}
item={item}
side={side || 'left'}
frontColor={item.frontColor || props.frontColor || ''}
sideColor={item.sideColor || props.sideColor || ''}
@ -482,6 +489,7 @@ const RenderBars = (props: Props) => {
barBackgroundPattern={props.barBackgroundPattern}
patternId={props.patternId}
barWidth={props.barWidth}
barStyle={barStyle}
item={item}
opacity={opacity}
animationDuration={animationDuration || 800}
@ -514,6 +522,7 @@ const RenderBars = (props: Props) => {
barBackgroundPattern={props.barBackgroundPattern}
patternId={props.patternId}
barWidth={props.barWidth}
barStyle={barStyle}
item={item}
opacity={opacity}
animationDuration={animationDuration || 800}
@ -544,6 +553,7 @@ const RenderBars = (props: Props) => {
barBackgroundPattern={props.barBackgroundPattern}
patternId={props.patternId}
barWidth={props.barWidth}
barStyle={barStyle}
item={item}
opacity={opacity}
animationDuration={animationDuration || 800}

3
src/BarChart/index.tsx
View File

@ -146,6 +146,7 @@ type PropTypes = {
renderTooltip?: Function;
leftShiftForTooltip?: number;
leftShiftForLastIndexTooltip?: number;
barStyle?: object;
};
type lineConfigType = {
initialSpacing?: number;
@ -200,6 +201,7 @@ type itemType = {
spacing?: number;
barBackgroundPattern?: Function;
patternId?: String;
barStyle?: object;
};
export const BarChart = (props: PropTypes) => {
@ -1619,6 +1621,7 @@ export const BarChart = (props: PropTypes) => {
initialSpacing={initialSpacing}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
barStyle={props.barStyle}
/>
))}
</Fragment>

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

@ -40,6 +40,8 @@ type animatedBarPropTypes = {
intactTopLabel: Boolean;
barBackgroundPattern?: Function;
patternId?: String;
barStyle?: object;
item: any;
};
const TriangleCorner = (props: trianglePropTypes) => {
@ -105,8 +107,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
};
const width = props.width;
const sideWidth = props.sideWidth;
const {item, width, sideWidth, barStyle} = props;
const {barBackgroundPattern, patternId} = props;
@ -193,7 +194,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
) : null}
<View
style={{
style={[{
width: width,
height: height, //animatedHeight
backgroundColor: frontColor,
@ -201,7 +202,9 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
borderTopWidth: StyleSheet.hairlineWidth,
borderColor: 'white',
opacity: opacity,
}}>
},
item.barStyle || barStyle
]}>
{showGradient && (
<LinearGradient
style={{position: 'absolute', width: '100%', height: '100%'}}

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

@ -24,6 +24,8 @@ type PropTypes = {
value: number;
barBackgroundPattern?: Function;
patternId?: String;
barStyle?: object;
item?: any;
};
type TriangleProps = {
@ -60,8 +62,16 @@ const aStyles = StyleSheet.create({
});
const ThreeDBar = (props: PropTypes) => {
const {width, sideWidth, height, value, barBackgroundPattern, patternId} =
props;
const {
width,
sideWidth,
height,
value,
barBackgroundPattern,
patternId,
barStyle,
item,
} = props;
const showGradient = props.showGradient || false;
const gradientColor = props.gradientColor || 'white';
@ -135,15 +145,18 @@ const ThreeDBar = (props: PropTypes) => {
</View>
<View
style={{
width: width,
height: height,
backgroundColor: frontColor,
borderLeftWidth: StyleSheet.hairlineWidth,
borderTopWidth: StyleSheet.hairlineWidth,
borderColor: 'white',
opacity: opacity,
}}>
style={[
{
width: width,
height: height,
backgroundColor: frontColor,
borderLeftWidth: StyleSheet.hairlineWidth,
borderTopWidth: StyleSheet.hairlineWidth,
borderColor: 'white',
opacity: opacity,
},
item.barStyle || barStyle,
]}>
{showGradient && (
<LinearGradient
style={{position: 'absolute', width: '100%', height: '100%'}}