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 noOfVerticalLines and verticalLinesSpacing to Bar nad Line charts

This commit is contained in:
Abhinandan-Kushwaha 2022-05-26 03:08:35 +05:30
parent a10d7fa3fa
commit 63da725699
7 changed files with 104 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -147,6 +147,8 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| noOfVerticalLines | number | Number of vertical lines displayed | data.length |
| verticalLinesSpacing | number | Distance between consecutive vertical lines | spacing |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |

2
docs/LineChart/LineChartProps.md
View File

@ -135,6 +135,8 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| noOfVerticalLines | number | Number of vertical lines displayed | data.length |
| verticalLinesSpacing | number | Distance between consecutive vertical lines | spacing |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |

2
package.json
View File

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

8
src/BarChart/RenderBars.tsx
View File

@ -49,10 +49,6 @@ type Props = {
capThickness?: number;
capColor?: ColorValue;
capRadius?: number;
showVerticalLines: Boolean;
verticalLinesThickness: number;
verticalLinesColor: ColorValue;
verticalLinesZIndex: number;
showXAxisIndices: Boolean;
xAxisIndicesHeight: number;
xAxisIndicesWidth: number;
@ -379,7 +375,7 @@ const RenderBars = (props: Props) => {
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && {zIndex: data.length - index},
]}>
{props.showVerticalLines && (
{/* {props.showVerticalLines && (
<View
style={{
zIndex: props.verticalLinesZIndex,
@ -391,7 +387,7 @@ const RenderBars = (props: Props) => {
backgroundColor: props.verticalLinesColor,
}}
/>
)}
)} */}
{props.showXAxisIndices && (
<View
style={{

8
src/BarChart/RenderStackBars.tsx
View File

@ -25,10 +25,6 @@ type Props = {
barWidth?: number;
rotateLabel?: Boolean;
showVerticalLines: Boolean;
verticalLinesThickness: number;
verticalLinesColor: ColorValue;
verticalLinesZIndex: number;
showXAxisIndices: Boolean;
xAxisIndicesHeight: number;
xAxisIndicesWidth: number;
@ -256,7 +252,7 @@ const RenderStackBars = (props: Props) => {
marginRight: spacing,
},
]}>
{props.showVerticalLines && (
{/* {props.showVerticalLines && (
<View
style={{
zIndex: props.verticalLinesZIndex,
@ -268,7 +264,7 @@ const RenderStackBars = (props: Props) => {
backgroundColor: props.verticalLinesColor,
}}
/>
)}
)} */}
{props.showXAxisIndices && (
<View
style={{

87
src/BarChart/index.tsx
View File

@ -84,6 +84,8 @@ type PropTypes = {
verticalLinesThickness?: number;
verticalLinesColor?: ColorValue;
verticalLinesZIndex?: number;
noOfVerticalLines?: number;
verticalLinesSpacing?: number;
showYAxisIndices?: Boolean;
showXAxisIndices?: Boolean;
@ -348,6 +350,13 @@ export const BarChart = (props: PropTypes) => {
props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
const verticalLinesColor = props.verticalLinesColor || 'lightgray';
const verticalLinesZIndex = props.verticalLinesZIndex || -1;
let verticalLinesAr = [];
props.noOfVerticalLines
? (verticalLinesAr = [...Array(props.noOfVerticalLines).keys()])
: (verticalLinesAr = [
...Array(props.stackData ? props.stackData.length : data.length).keys(),
]);
const verticalLinesSpacing = props.verticalLinesSpacing || 0;
const showYAxisIndices = props.showYAxisIndices || false;
const showXAxisIndices = props.showXAxisIndices || false;
@ -1372,6 +1381,76 @@ export const BarChart = (props: PropTypes) => {
// data={props.stackData || data}
keyExtractor={(item, index) => index.toString()}>
<Fragment>
{showVerticalLines &&
verticalLinesAr.map((item: itemType, index: number) => {
let totalSpacing = initialSpacing;
if (verticalLinesSpacing) {
totalSpacing = verticalLinesSpacing * (index + 1);
} else {
if (props.stackData) {
totalSpacing +=
(props.stackData[0].barWidth || props.barWidth || 30) / 2;
} else {
totalSpacing +=
(props.data[0].barWidth || props.barWidth || 30) / 2;
}
for (let i = 0; i < index; i++) {
let actualSpacing = spacing;
if (props.stackData) {
if (i >= props.stackData.length - 1) {
actualSpacing += (props.barWidth || 30) / 2;
} else {
if (
props.stackData[i].spacing ||
props.stackData[i].spacing === 0
) {
actualSpacing = props.stackData[i].spacing;
}
if (props.stackData[i + 1].barWidth) {
actualSpacing += props.stackData[i + 1].barWidth;
} else {
actualSpacing += props.barWidth || 30;
}
}
} else {
if (i >= props.data.length - 1) {
actualSpacing += (props.barWidth || 30) / 2;
} else {
if (
props.data[i].spacing ||
props.data[i].spacing === 0
) {
console.log('here for index ' + index + ' and i ' + i);
actualSpacing = props.data[i].spacing;
}
if (props.data[i + 1].barWidth) {
actualSpacing += props.data[i + 1].barWidth;
} else {
actualSpacing += props.barWidth || 30;
}
}
}
console.log('i = ' + i + ' actualSpacing ' + actualSpacing);
totalSpacing += actualSpacing;
}
}
return (
<View
key={index}
style={{
position: 'absolute',
zIndex: verticalLinesZIndex || -1,
marginBottom: xAxisThickness,
height: containerHeight + 15 - xAxisThickness,
width: verticalLinesThickness,
backgroundColor: verticalLinesColor,
bottom: 60,
left: totalSpacing,
}}
/>
);
})}
{showLine
? lineConfig.isAnimated
? renderAnimatedLine()
@ -1394,10 +1473,6 @@ export const BarChart = (props: PropTypes) => {
opacity={opacity}
disablePress={item.disablePress || props.disablePress}
rotateLabel={rotateLabel}
showVerticalLines={showVerticalLines}
verticalLinesThickness={verticalLinesThickness}
verticalLinesColor={verticalLinesColor}
verticalLinesZIndex={verticalLinesZIndex}
showXAxisIndices={showXAxisIndices}
xAxisIndicesHeight={xAxisIndicesHeight}
xAxisIndicesWidth={xAxisIndicesWidth}
@ -1459,10 +1534,6 @@ export const BarChart = (props: PropTypes) => {
capThickness={props.capThickness}
capColor={props.capColor}
capRadius={props.capRadius}
showVerticalLines={showVerticalLines}
verticalLinesThickness={verticalLinesThickness}
verticalLinesColor={verticalLinesColor}
verticalLinesZIndex={verticalLinesZIndex}
showXAxisIndices={showXAxisIndices}
xAxisIndicesHeight={xAxisIndicesHeight}
xAxisIndicesWidth={xAxisIndicesWidth}

20
src/LineChart/index.tsx
View File

@ -110,6 +110,8 @@ type propTypes = {
verticalLinesThickness?: number;
verticalLinesColor?: ColorValue;
verticalLinesZIndex?: number;
noOfVerticalLines?: number;
verticalLinesSpacing?: number;
hideAxesAndRules?: Boolean;
areaChart?: Boolean;
@ -1377,6 +1379,12 @@ export const LineChart = (props: propTypes) => {
const hideRules = props.hideRules || false;
const showVerticalLines = props.showVerticalLines || false;
const verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint || false;
let verticalLinesAr = [];
props.noOfVerticalLines
? (verticalLinesAr = [...Array(props.noOfVerticalLines).keys()])
: (verticalLinesAr = [...Array(data.length).keys()]);
const verticalLinesSpacing = props.verticalLinesSpacing || 0;
const showYAxisIndices = props.showYAxisIndices || false;
const showXAxisIndices = props.showXAxisIndices || false;
@ -3290,7 +3298,7 @@ export const LineChart = (props: propTypes) => {
props.width && {width: props.width + 10},
]}>
{showVerticalLines &&
data.map((item: itemType, index: number) => {
verticalLinesAr.map((item: itemType, index: number) => {
return (
<View
key={index}
@ -3299,13 +3307,17 @@ export const LineChart = (props: propTypes) => {
zIndex: verticalLinesZIndex || -1,
marginBottom: xAxisThickness,
height: verticalLinesUptoDataPoint
? (item.value * containerHeight) / maxValue - xAxisThickness
? index < data.length
? (data[index].value * containerHeight) / maxValue -
xAxisThickness
: 0
: containerHeight + 15 - xAxisThickness,
width: verticalLinesThickness,
backgroundColor: verticalLinesColor,
bottom: 60,
left:
index * spacing + (initialSpacing - dataPointsWidth1 / 2),
left: verticalLinesSpacing
? verticalLinesSpacing * (index + 1)
: index * spacing + (initialSpacing - dataPointsWidth1 / 2),
}}
/>
);