From 13957079c196538f0faf2004c022b09c029c5675 Mon Sep 17 00:00:00 2001 From: Abhinandan Kushwaha Date: Thu, 7 Oct 2021 03:44:35 +0530 Subject: [PATCH] Added spacing and labelWidth props for each individual bar --- docs/BarChart/BarChartProps.md | 7 +++++-- ios/Podfile | 2 +- package.json | 2 +- src/BarChart/RenderBars.tsx | 19 +++++++++++++++++-- src/BarChart/index.tsx | 10 ++++++++-- 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 111bacc..fe043c2 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -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 | diff --git a/ios/Podfile b/ios/Podfile index 4ce9765..c6eca43 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -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! diff --git a/package.json b/package.json index bde2522..e805915 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index 364bdd3..1304636 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -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) => { { ; 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}