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

Added spacing and labelWidth props for each individual bar

This commit is contained in:
Abhinandan Kushwaha 2021-10-07 03:44:35 +05:30
parent 0480eb7c4e
commit 13957079c1
5 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/BarChart/BarChartProps.md
View File

@ -51,6 +51,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| gradientColor | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient |
| initialSpacing | number | distance of the first bar from the Y axis |
| label | string | Label text appearing below the bar (under the X axis) |
| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) |
| labelTextStyle | object | Style object for the label text appearing below the bar |
| labelComponent | Component | Custom label component appearing below the bar |
| topLabelComponent | Component | Custom component appearing above the bar |
@ -60,6 +61,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| capColor | ColorValue | Color of the bar cap |
| capRadius | number | Border radius of the bar cap |
| barBorderRadius | number | Border radius of the bar |
| spacing | number | Distance of the next Bar from the currennt Bar |
---
@ -94,6 +96,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) | barWidth |
---
@ -185,11 +188,11 @@ The structure of stackData is-
...
]
```
The stackData passed to the BarChart component is an array of objects.\
Each object contains a mandatory key named stacks.\
The value corresponding to the stacks key is an array of objects, each object representing a section of the stack.
| 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 |
@ -198,7 +201,7 @@ The value corresponding to the stacks key is an array of objects, each object re
| Key | Value type | Description |
| -------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------- |
| stacks array | Array of stack items | A stack is made of 1 or more objects of the type described in the next table |
| stacks array | Array of stack items | 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 |

2
ios/Podfile
View File

@ -1,7 +1,7 @@
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '10.0'
platform :ios, '11.0'
target 'GiftedCharts' do
config = use_native_modules!

2
package.json
View File

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

19
src/BarChart/RenderBars.tsx
View File

@ -30,6 +30,7 @@ type Props = {
data?: any;
barWidth?: number;
sideWidth?: number;
labelWidth?: number;
isThreeD?: Boolean;
isAnimated?: Boolean;
@ -78,6 +79,8 @@ type itemType = {
labelComponent?: Function;
barBorderRadius?: number;
topLabelComponentHeight?: number;
spacing?: number;
labelWidth?: number;
};
const RenderBars = (props: Props) => {
const {
@ -102,7 +105,13 @@ const RenderBars = (props: Props) => {
<View
style={[
{
width: (item.barWidth || props.barWidth || 30) + spacing / 2,
width:
(item.labelWidth ||
props.labelWidth ||
item.barWidth ||
props.barWidth ||
30) +
spacing / 2,
left: -6,
position: 'absolute',
bottom: rotateLabel ? -40 : -25,
@ -133,7 +142,13 @@ const RenderBars = (props: Props) => {
<Animated.View
style={[
{
width: rotateLabel ? '150%' : '120%',
width:
(item.labelWidth ||
props.labelWidth ||
item.barWidth ||
props.barWidth ||
30) +
spacing / 2,
position: 'absolute',
bottom: rotateLabel ? -40 : -25,
opacity: appearingOpacity,

10
src/BarChart/index.tsx
View File

@ -80,6 +80,7 @@ type PropTypes = {
horizSections?: Array<sectionType>;
barBorderRadius?: number;
hideOrigin?: Boolean;
labelWidth?: number;
};
type sectionType = {
value: number;
@ -100,6 +101,7 @@ type itemType = {
topLabelContainerStyle?: any;
disablePress?: any;
labelComponent?: View;
spacing?: number;
};
export const BarChart = (props: PropTypes) => {
@ -109,6 +111,7 @@ export const BarChart = (props: PropTypes) => {
const stepHeight = props.stepHeight || containerHeight / noOfSections;
const data = props.data || [];
const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
const labelWidth = props.labelWidth || 0;
let totalWidth = spacing;
let maxItem = 0;
@ -132,7 +135,9 @@ export const BarChart = (props: PropTypes) => {
if (item.value > maxItem) {
maxItem = item.value;
}
totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
totalWidth +=
(item.barWidth || props.barWidth || 30) +
(item.spacing === 0 ? 0 : item.spacing || spacing);
// console.log('totalWidth for bar===', totalWidth);
});
}
@ -419,11 +424,12 @@ export const BarChart = (props: PropTypes) => {
index={index}
containerHeight={containerHeight}
maxValue={maxValue}
spacing={spacing}
spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
side={side}
data={data}
barWidth={props.barWidth}
sideWidth={props.sideWidth}
labelWidth={labelWidth}
opacity={opacity}
isThreeD={isThreeD}
isAnimated={isAnimated}