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 zIndex1, zIndex2, zIndex3 etc to Line and Area charts

This commit is contained in:
Abhinandan-Kushwaha 2022-04-26 03:30:44 +05:30
parent ce35426ff0
commit 27a5a051ce
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/LineChart/LineChartProps.md
View File

@ -183,6 +183,11 @@ type referenceConfigType = {
| thickness3 | number | Thickness of the lines joining the third set of data points | thickness (from props) |
| thickness4 | number | Thickness of the lines joining the fourth set of data points | thickness (from props) |
| thickness5 | number | Thickness of the lines joining the fifth set of data points | thickness (from props) |
| zIndex1 | number | zIndex of the lines joining the first set of data points | 0 |
| zIndex2 | number | zIndex of the lines joining the second set of data points | 0 |
| zIndex3 | number | zIndex of the lines joining the third set of data points | 0 |
| zIndex4 | number | zIndex of the lines joining the fourth set of data points | 0 |
| zIndex5 | number | zIndex of the lines joining the fifth set of data points | 0 |
| strokeDashArray | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | undefined |
| strokeDashArray1 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
| strokeDashArray2 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | undefined OR strokeDashArray |

2
package.json
View File

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

39
src/LineChart/index.tsx
View File

@ -44,6 +44,11 @@ type propTypes = {
data3?: Array<itemType>;
data4?: Array<itemType>;
data5?: Array<itemType>;
zIndex1?: number;
zIndex2?: number;
zIndex3?: number;
zIndex4?: number;
zIndex5?: number;
thickness?: number;
thickness1?: number;
thickness2?: number;
@ -1216,6 +1221,12 @@ export const LineChart = (props: propTypes) => {
const thickness5 =
props.thickness5 === 0 ? 0 : props.thickness5 || props.thickness || 1;
const zIndex1 = props.zIndex1 || 0;
const zIndex2 = props.zIndex2 || 0;
const zIndex3 = props.zIndex3 || 0;
const zIndex4 = props.zIndex4 || 0;
const zIndex5 = props.zIndex5 || 0;
const strokeDashArray1 = props.strokeDashArray1 || props.strokeDashArray;
const strokeDashArray2 = props.strokeDashArray2 || props.strokeDashArray;
const strokeDashArray3 = props.strokeDashArray3 || props.strokeDashArray;
@ -2645,7 +2656,7 @@ export const LineChart = (props: propTypes) => {
};
const renderLine = (
lineNumber: number,
zIndex: number,
points: any,
currentLineThickness: number | undefined,
color: string,
@ -2825,7 +2836,7 @@ export const LineChart = (props: propTypes) => {
height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,
bottom: 60 + labelsExtraHeight,
width: totalWidth,
zIndex: 20,
zIndex: zIndex,
}}>
{lineSvgComponent(
points,
@ -2843,7 +2854,7 @@ export const LineChart = (props: propTypes) => {
};
const renderAnimatedLine = (
lineNumber: number,
zIndex: number,
points: any,
animatedWidth: any,
currentLineThickness: number | undefined,
@ -3025,7 +3036,7 @@ export const LineChart = (props: propTypes) => {
height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,
bottom: 60, //stepHeight * -0.5 + xAxisThickness,
width: animatedWidth,
zIndex: -1,
zIndex: zIndex,
// backgroundColor: 'wheat',
}}>
{lineSvgComponent(
@ -3137,7 +3148,7 @@ export const LineChart = (props: propTypes) => {
{isAnimated
? renderAnimatedLine(
1,
zIndex1,
points,
animatedWidth,
thickness1,
@ -3150,7 +3161,7 @@ export const LineChart = (props: propTypes) => {
strokeDashArray1,
)
: renderLine(
1,
zIndex1,
points,
thickness1,
color1,
@ -3164,7 +3175,7 @@ export const LineChart = (props: propTypes) => {
{points2
? isAnimated
? renderAnimatedLine(
2,
zIndex2,
points2,
animatedWidth2,
thickness2,
@ -3177,7 +3188,7 @@ export const LineChart = (props: propTypes) => {
strokeDashArray2,
)
: renderLine(
2,
zIndex2,
points2,
thickness2,
color2,
@ -3192,7 +3203,7 @@ export const LineChart = (props: propTypes) => {
{points3
? isAnimated
? renderAnimatedLine(
3,
zIndex3,
points3,
animatedWidth3,
thickness3,
@ -3205,7 +3216,7 @@ export const LineChart = (props: propTypes) => {
strokeDashArray3,
)
: renderLine(
3,
zIndex3,
points3,
thickness3,
color3,
@ -3220,7 +3231,7 @@ export const LineChart = (props: propTypes) => {
{points4
? isAnimated
? renderAnimatedLine(
4,
zIndex4,
points4,
animatedWidth4,
thickness4,
@ -3233,7 +3244,7 @@ export const LineChart = (props: propTypes) => {
strokeDashArray4,
)
: renderLine(
4,
zIndex4,
points4,
thickness4,
color4,
@ -3248,7 +3259,7 @@ export const LineChart = (props: propTypes) => {
{points5
? isAnimated
? renderAnimatedLine(
5,
zIndex5,
points5,
animatedWidth5,
thickness5,
@ -3261,7 +3272,7 @@ export const LineChart = (props: propTypes) => {
strokeDashArray5,
)
: renderLine(
5,
zIndex5,
points5,
thickness5,
color5,