mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-21 16:18:15 +00:00
Added arrow to Line and Area charts
This commit is contained in:
Abhinandan-Kushwaha
parent
a809e48ade
commit
da2f08799c
BIN
demos/arrowProps.png
Normal file
BIN
demos/arrowProps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
demos/lineArrow.png
Normal file
BIN
demos/lineArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -33,6 +33,78 @@
|
||||
| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left | 0 |
|
||||
| leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 |
|
||||
|
||||
#### lineConfig
|
||||
|
||||
The <b>lineConfig</b> prop describes the properties of the line chart that is displayed when we set the <b>showLine</b> prop to true. The properties allowed by the lineConfig prop are-
|
||||
|
||||
```js
|
||||
type lineConfigType = {
|
||||
initialSpacing?: number;
|
||||
curved?: Boolean;
|
||||
isAnimated?: Boolean;
|
||||
delay?: number;
|
||||
thickness?: number;
|
||||
color?: ColorValue | String | any;
|
||||
hideDataPoints?: Boolean;
|
||||
dataPointsShape?: String;
|
||||
dataPointsWidth?: number;
|
||||
dataPointsHeight?: number;
|
||||
dataPointsColor?: ColorValue | String | any;
|
||||
dataPointsRadius?: number;
|
||||
textColor?: ColorValue | String | any;
|
||||
textFontSize?: number;
|
||||
textShiftX?: number;
|
||||
textShiftY?: number;
|
||||
shiftY?: number;
|
||||
startIndex?: number;
|
||||
endIndex?: number;
|
||||
showArrow?: boolean;
|
||||
arrowConfig?: arrowType;
|
||||
};
|
||||
type arrowType = {
|
||||
length?: number;
|
||||
width?: number;
|
||||
strokeWidth?: number;
|
||||
strokeColor?: string;
|
||||
fillColor?: string;
|
||||
showArrowBase?: boolean;
|
||||
};
|
||||
```
|
||||
|
||||
The default value of the lineConfig object is -
|
||||
|
||||
```js
|
||||
defaultLineConfig = {
|
||||
initialSpacing: initialSpacing,
|
||||
curved: false,
|
||||
isAnimated: false,
|
||||
thickness: 1,
|
||||
color: 'black',
|
||||
hideDataPoints: false,
|
||||
dataPointsShape: 'circular',
|
||||
dataPointsWidth: 2,
|
||||
dataPointsHeight: 2,
|
||||
dataPointsColor: 'black',
|
||||
dataPointsRadius: 3,
|
||||
textColor: 'gray',
|
||||
textFontSize: 10,
|
||||
textShiftX: 0,
|
||||
textShiftY: 0,
|
||||
shiftY: 0,
|
||||
delay: 0,
|
||||
startIndex: 0,
|
||||
endIndex: lineData.length - 1,
|
||||
showArrow: false,
|
||||
arrowConfig: {
|
||||
length: 10,
|
||||
width: 10,
|
||||
strokeWidth: 1,
|
||||
strokeColor: 'black',
|
||||
fillColor: 'none',
|
||||
showArrowBase: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
---
|
||||
|
||||
**Alert!**\
|
||||
|
||||
@ -181,6 +181,7 @@ type referenceConfigType = {
|
||||
|
||||
| Prop | Type | Description | Default value |
|
||||
| ---------- | ---------- | ------------------------------------------------------------ | ---------------------- |
|
||||
| curved | Boolean | To show curved line joining the data points | false |
|
||||
| color | ColorValue | Color of the lines joining the data points | black |
|
||||
| color1 | ColorValue | Color of the lines joining the first set of data points | color (from props) |
|
||||
| color2 | ColorValue | Color of the lines joining the second set of data points | color (from props) |
|
||||
@ -211,12 +212,62 @@ type referenceConfigType = {
|
||||
| startIndex4 | number | Start index for data line 4 (used to display data lines having breaks) | 0 |
|
||||
| startIndex5 | number | Start index for data line 5 (used to display data lines having breaks) | 0 |
|
||||
| endIndex | number | End index for data line (used to display data lines having breaks) | data.length -1 |
|
||||
| endIndex1 | number | End index for data line 1 (used to display data lines having breaks) | data.length -1 |
|
||||
| endIndex2 | number | End index for data line 2 (used to display data lines having breaks) | data2.length -1 |
|
||||
| endIndex3 | number | End index for data line 3 (used to display data lines having breaks) | data3.length -1 |
|
||||
| endIndex4 | number | End index for data line 4 (used to display data lines having breaks) | data3.length -1 |
|
||||
| endIndex5 | number | End index for data line 5 (used to display data lines having breaks) | data3.length -1 |
|
||||
| curved | Boolean | To show curved line joining the data points | false |
|
||||
| endIndex1 | number | End index for data line 1 (used to display data lines having breaks) | data.length -1 |
|
||||
| endIndex2 | number | End index for data line 2 (used to display data lines having breaks) | data2.length -1 |
|
||||
| endIndex3 | number | End index for data line 3 (used to display data lines having breaks) | data3.length -1 |
|
||||
| endIndex4 | number | End index for data line 4 (used to display data lines having breaks) | data3.length -1 |
|
||||
| endIndex5 | number | End index for data line 5 (used to display data lines having breaks) | data3.length -1 |
|
||||
|
||||
## The arrow
|
||||
|
||||
Some Line charts have an arrow at the end of the line. Here's an example-
|
||||
|
||||
<img src='../../demos/lineArrow.png' alt='' height=400 width=500/>
|
||||
|
||||
To display the arrrow at the end of the line, just pass the <b>showArrows</b> or <b>showArrow{n}</b> prop.
|
||||
The properties of the arrow can controlled with the <b>arrowConfig</b> prop.
|
||||
### Understanding the arrow-
|
||||
|
||||
<img src='../../demos/arrowProps.png' alt='' height=400 width=500/>
|
||||
|
||||
| showArrows | boolean | To show an arrow at the end of each data line | false |
|
||||
| arrowConfig | arrowType | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | defaultArrowConfig |
|
||||
| showArrow1 | boolean | To show an arrow at the end of the first data line | false |
|
||||
| arrowConfig1 | arrowType | Object describing the properties of the first arrow | defaultArrowConfig |
|
||||
| showArrow2 | boolean | To show an arrow at the end of the second data line | false |
|
||||
| arrowConfig2 | arrowType | Object describing the properties of the second arrow | defaultArrowConfig |
|
||||
| showArrow3 | boolean | To show an arrow at the end of the third data line | false |
|
||||
| arrowConfig3 | arrowType | Object describing the properties of the third arrow | defaultArrowConfig |
|
||||
| showArrow4 | boolean | To show an arrow at the end of the fourth data line | false |
|
||||
| arrowConfig4 | arrowType | Object describing the properties of the fourth arrow | defaultArrowConfig |
|
||||
| showArrow5 | boolean | To show an arrow at the end of the fifth data line | false |
|
||||
| arrowConfig5 | arrowType | Object describing the properties of the fifth arrow | defaultArrowConfig |
|
||||
|
||||
The <b>arrowConfig</b> has the properties allowed by the <b>arrowType</b>-
|
||||
|
||||
```js
|
||||
type arrowType = {
|
||||
length?: number;
|
||||
width?: number;
|
||||
strokeWidth?: number;
|
||||
strokeColor?: string;
|
||||
fillColor?: string;
|
||||
showArrowBase?: boolean;
|
||||
};
|
||||
```
|
||||
|
||||
The default values of these properties are-
|
||||
|
||||
```js
|
||||
defaultArrowConfig = {
|
||||
length: 10,
|
||||
width: 10,
|
||||
strokeWidth: thickness1,
|
||||
strokeColor: color1,
|
||||
fillColor: 'none',
|
||||
showArrowBase: true,
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-gifted-charts",
|
||||
"version": "1.2.39",
|
||||
"version": "1.2.40",
|
||||
"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": [
|
||||
|
||||
@ -168,6 +168,16 @@ type lineConfigType = {
|
||||
shiftY?: number;
|
||||
startIndex?: number;
|
||||
endIndex?: number;
|
||||
showArrow?: boolean;
|
||||
arrowConfig?: arrowType;
|
||||
};
|
||||
type arrowType = {
|
||||
length?: number;
|
||||
width?: number;
|
||||
strokeWidth?: number;
|
||||
strokeColor?: string;
|
||||
fillColor?: string;
|
||||
showArrowBase?: boolean;
|
||||
};
|
||||
type referenceConfigType = {
|
||||
thickness: number;
|
||||
@ -207,6 +217,7 @@ type itemType = {
|
||||
export const BarChart = (props: PropTypes) => {
|
||||
const scrollRef = useRef();
|
||||
const [points, setPoints] = useState('');
|
||||
const [arrowPoints, setArrowPoints] = useState('');
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
const showLine = props.showLine || false;
|
||||
const initialSpacing =
|
||||
@ -244,6 +255,15 @@ export const BarChart = (props: PropTypes) => {
|
||||
delay: 0,
|
||||
startIndex: 0,
|
||||
endIndex: lineData.length - 1,
|
||||
showArrow: false,
|
||||
arrowConfig: {
|
||||
length: 10,
|
||||
width: 10,
|
||||
strokeWidth: 1,
|
||||
strokeColor: 'black',
|
||||
fillColor: 'none',
|
||||
showArrowBase: true,
|
||||
},
|
||||
};
|
||||
const lineConfig = props.lineConfig
|
||||
? {
|
||||
@ -282,6 +302,32 @@ export const BarChart = (props: PropTypes) => {
|
||||
props.lineConfig.endIndex === 0
|
||||
? 0
|
||||
: props.lineConfig.endIndex || defaultLineConfig.endIndex,
|
||||
|
||||
showArrow: props.lineConfig.showArrow ?? defaultLineConfig.showArrow,
|
||||
arrowConfig: {
|
||||
length:
|
||||
props.lineConfig.arrowConfig?.length ??
|
||||
defaultLineConfig.arrowConfig.length,
|
||||
width:
|
||||
props.lineConfig.arrowConfig?.width ??
|
||||
defaultLineConfig.arrowConfig.width,
|
||||
|
||||
strokeWidth:
|
||||
props.lineConfig.arrowConfig?.strokeWidth ??
|
||||
defaultLineConfig.arrowConfig.strokeWidth,
|
||||
|
||||
strokeColor:
|
||||
props.lineConfig.arrowConfig?.strokeColor ??
|
||||
defaultLineConfig.arrowConfig.strokeColor,
|
||||
|
||||
fillColor:
|
||||
props.lineConfig.arrowConfig?.fillColor ??
|
||||
defaultLineConfig.arrowConfig.fillColor,
|
||||
|
||||
showArrowBase:
|
||||
props.lineConfig.arrowConfig?.showArrowBase ??
|
||||
defaultLineConfig.arrowConfig.showArrowBase,
|
||||
},
|
||||
}
|
||||
: defaultLineConfig;
|
||||
const containerHeight = props.height || 200;
|
||||
@ -465,6 +511,52 @@ export const BarChart = (props: PropTypes) => {
|
||||
}, [animationDuration, widthValue]);
|
||||
// console.log('olddata', oldData);
|
||||
|
||||
const getArrowPoints = (
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength,
|
||||
arrowWidth,
|
||||
showArrowBase,
|
||||
) => {
|
||||
let dataLineSlope = (arrowTipY - y1) / (arrowTipX - x1);
|
||||
let d = arrowLength;
|
||||
let d2 = arrowWidth / 2;
|
||||
let interSectionX =
|
||||
arrowTipX - Math.sqrt((d * d) / (dataLineSlope * dataLineSlope + 1));
|
||||
let interSectionY = arrowTipY - dataLineSlope * (arrowTipX - interSectionX);
|
||||
|
||||
let arrowBasex1, arrowBaseY1, arrowBaseX2, arrowBaseY2;
|
||||
if (dataLineSlope === 0) {
|
||||
arrowBasex1 = interSectionX;
|
||||
arrowBaseY1 = interSectionY - d2;
|
||||
arrowBaseX2 = interSectionX;
|
||||
arrowBaseY2 = interSectionY + d2;
|
||||
} else {
|
||||
let arrowBaseSlope = -1 / dataLineSlope;
|
||||
arrowBasex1 =
|
||||
interSectionX -
|
||||
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
|
||||
arrowBaseY1 =
|
||||
interSectionY - arrowBaseSlope * (interSectionX - arrowBasex1);
|
||||
|
||||
arrowBaseX2 =
|
||||
interSectionX +
|
||||
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
|
||||
arrowBaseY2 =
|
||||
interSectionY + arrowBaseSlope * (interSectionX - arrowBasex1);
|
||||
}
|
||||
let arrowPoints = ` M${interSectionX} ${interSectionY}`;
|
||||
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBasex1} ${arrowBaseY1}`;
|
||||
arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
|
||||
arrowPoints += ` M${interSectionX} ${interSectionY}`;
|
||||
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBaseX2} ${arrowBaseY2}`;
|
||||
arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
|
||||
|
||||
return arrowPoints;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (showLine) {
|
||||
let pp = '';
|
||||
@ -488,6 +580,27 @@ export const BarChart = (props: PropTypes) => {
|
||||
' ';
|
||||
}
|
||||
setPoints(pp.replace('L', 'M'));
|
||||
if (lineData.length > 1 && lineConfig.showArrow) {
|
||||
let ppArray = pp.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(
|
||||
ppArray[ppArray.length - 2].replace('L', ''),
|
||||
);
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
lineConfig.arrowConfig.length,
|
||||
lineConfig.arrowConfig.width,
|
||||
lineConfig.arrowConfig.showArrowBase,
|
||||
);
|
||||
|
||||
setArrowPoints(arrowPoints);
|
||||
}
|
||||
} else {
|
||||
let p1Array = [];
|
||||
for (let i = 0; i < lineData.length; i++) {
|
||||
@ -532,11 +645,14 @@ export const BarChart = (props: PropTypes) => {
|
||||
lineConfig.startIndex,
|
||||
lineConfig.endIndex,
|
||||
maxValue,
|
||||
// moveBar,
|
||||
props.barWidth,
|
||||
showLine,
|
||||
spacing,
|
||||
yAxisLabelWidth,
|
||||
lineConfig.showArrow,
|
||||
lineConfig.arrowConfig.length,
|
||||
lineConfig.arrowConfig.width,
|
||||
lineConfig.arrowConfig.showArrowBase,
|
||||
]);
|
||||
|
||||
const defaultReferenceConfig = {
|
||||
@ -1334,6 +1450,14 @@ export const BarChart = (props: PropTypes) => {
|
||||
{!lineConfig.hideDataPoints
|
||||
? renderDataPoints()
|
||||
: renderSpecificDataPoints(data)}
|
||||
{lineConfig.showArrow && (
|
||||
<Path
|
||||
d={arrowPoints}
|
||||
fill={lineConfig.arrowConfig.fillColor}
|
||||
stroke={lineConfig.arrowConfig.strokeColor}
|
||||
strokeWidth={lineConfig.arrowConfig.strokeWidth}
|
||||
/>
|
||||
)}
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
);
|
||||
@ -1362,6 +1486,14 @@ export const BarChart = (props: PropTypes) => {
|
||||
{!lineConfig.hideDataPoints
|
||||
? renderDataPoints()
|
||||
: renderSpecificDataPoints(data)}
|
||||
{lineConfig.showArrow && (
|
||||
<Path
|
||||
d={arrowPoints}
|
||||
fill={lineConfig.arrowConfig.fillColor}
|
||||
stroke={lineConfig.arrowConfig.strokeColor}
|
||||
strokeWidth={lineConfig.arrowConfig.strokeWidth}
|
||||
/>
|
||||
)}
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
|
||||
@ -275,6 +275,26 @@ type propTypes = {
|
||||
labelsExtraHeight?: number;
|
||||
adjustToWidth?: Boolean;
|
||||
getPointerProps?: Function;
|
||||
showArrows?: boolean;
|
||||
arrowConfig?: arrowType;
|
||||
showArrow1?: boolean;
|
||||
arrowConfig1?: arrowType;
|
||||
showArrow2?: boolean;
|
||||
arrowConfig2?: arrowType;
|
||||
showArrow3?: boolean;
|
||||
arrowConfig3?: arrowType;
|
||||
showArrow4?: boolean;
|
||||
arrowConfig4?: arrowType;
|
||||
showArrow5?: boolean;
|
||||
arrowConfig5?: arrowType;
|
||||
};
|
||||
type arrowType = {
|
||||
length?: number;
|
||||
width?: number;
|
||||
strokeWidth?: number;
|
||||
strokeColor?: string;
|
||||
fillColor?: string;
|
||||
showArrowBase?: boolean;
|
||||
};
|
||||
type referenceConfigType = {
|
||||
thickness: number;
|
||||
@ -374,6 +394,11 @@ type Pointer = {
|
||||
export const LineChart = (props: propTypes) => {
|
||||
const scrollRef = useRef();
|
||||
const [scrollX, setScrollX] = useState(0);
|
||||
const [arrow1Points, setArrow1Points] = useState('');
|
||||
const [arrow2Points, setArrow2Points] = useState('');
|
||||
const [arrow3Points, setArrow3Points] = useState('');
|
||||
const [arrow4Points, setArrow4Points] = useState('');
|
||||
const [arrow5Points, setArrow5Points] = useState('');
|
||||
const [pointerIndex, setPointerIndex] = useState(-1);
|
||||
const [pointerX, setPointerX] = useState(0);
|
||||
const [pointerY, setPointerY] = useState(0);
|
||||
@ -830,6 +855,270 @@ export const LineChart = (props: propTypes) => {
|
||||
labelsAppear,
|
||||
]);
|
||||
|
||||
const thickness1 =
|
||||
props.thickness1 === 0 ? 0 : props.thickness1 || props.thickness || 1;
|
||||
const thickness2 =
|
||||
props.thickness2 === 0 ? 0 : props.thickness2 || props.thickness || 1;
|
||||
const thickness3 =
|
||||
props.thickness3 === 0 ? 0 : props.thickness3 || props.thickness || 1;
|
||||
const thickness4 =
|
||||
props.thickness4 === 0 ? 0 : props.thickness4 || props.thickness || 1;
|
||||
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;
|
||||
const strokeDashArray4 = props.strokeDashArray4 || props.strokeDashArray;
|
||||
const strokeDashArray5 = props.strokeDashArray5 || props.strokeDashArray;
|
||||
|
||||
const rotateLabel = props.rotateLabel || false;
|
||||
const isAnimated = props.isAnimated || false;
|
||||
const hideDataPoints1 =
|
||||
props.hideDataPoints || props.hideDataPoints1 || false;
|
||||
const hideDataPoints2 =
|
||||
props.hideDataPoints || props.hideDataPoints2 || false;
|
||||
const hideDataPoints3 =
|
||||
props.hideDataPoints || props.hideDataPoints3 || false;
|
||||
const hideDataPoints4 =
|
||||
props.hideDataPoints || props.hideDataPoints4 || false;
|
||||
const hideDataPoints5 =
|
||||
props.hideDataPoints || props.hideDataPoints5 || false;
|
||||
|
||||
const color1 = props.color1 || props.color || 'black';
|
||||
const color2 = props.color2 || props.color || 'black';
|
||||
const color3 = props.color3 || props.color || 'black';
|
||||
const color4 = props.color4 || props.color || 'black';
|
||||
const color5 = props.color5 || props.color || 'black';
|
||||
|
||||
const startFillColor1 =
|
||||
props.startFillColor1 || props.startFillColor || 'gray';
|
||||
const endFillColor1 = props.endFillColor1 || props.endFillColor || 'white';
|
||||
const startOpacity = props.startOpacity === 0 ? 0 : props.startOpacity || 1;
|
||||
const endOpacity = props.endOpacity === 0 ? 0 : props.endOpacity || 1;
|
||||
const startOpacity1 =
|
||||
props.startOpacity1 === 0 ? 0 : props.startOpacity1 || startOpacity;
|
||||
const endOpacity1 =
|
||||
props.endOpacity1 === 0 ? 0 : props.endOpacity1 || endOpacity;
|
||||
|
||||
const startFillColor2 =
|
||||
props.startFillColor2 || props.startFillColor || 'gray';
|
||||
const endFillColor2 = props.endFillColor2 || props.endFillColor || 'white';
|
||||
const startOpacity2 =
|
||||
props.startOpacity2 === 0 ? 0 : props.startOpacity2 || startOpacity;
|
||||
const endOpacity2 =
|
||||
props.endOpacity2 === 0 ? 0 : props.endOpacity2 || endOpacity;
|
||||
|
||||
const startFillColor3 =
|
||||
props.startFillColor3 || props.startFillColor || 'gray';
|
||||
const endFillColor3 = props.endFillColor3 || props.endFillColor || 'white';
|
||||
const startOpacity3 =
|
||||
props.startOpacity3 === 0 ? 0 : props.startOpacity3 || startOpacity;
|
||||
const endOpacity3 =
|
||||
props.endOpacity3 === 0 ? 0 : props.endOpacity3 || endOpacity;
|
||||
|
||||
const startFillColor4 =
|
||||
props.startFillColor4 || props.startFillColor || 'gray';
|
||||
const endFillColor4 = props.endFillColor4 || props.endFillColor || 'white';
|
||||
const startOpacity4 =
|
||||
props.startOpacity4 === 0 ? 0 : props.startOpacity4 || startOpacity;
|
||||
const endOpacity4 =
|
||||
props.endOpacity4 === 0 ? 0 : props.endOpacity4 || endOpacity;
|
||||
|
||||
const startFillColor5 =
|
||||
props.startFillColor5 || props.startFillColor || 'gray';
|
||||
const endFillColor5 = props.endFillColor5 || props.endFillColor || 'white';
|
||||
const startOpacity5 =
|
||||
props.startOpacity5 === 0 ? 0 : props.startOpacity5 || startOpacity;
|
||||
const endOpacity5 =
|
||||
props.endOpacity5 === 0 ? 0 : props.endOpacity5 || endOpacity;
|
||||
|
||||
const defaultArrowConfig = {
|
||||
length: 10,
|
||||
width: 10,
|
||||
strokeWidth: thickness1,
|
||||
strokeColor: color1,
|
||||
fillColor: 'none',
|
||||
showArrowBase: true,
|
||||
};
|
||||
|
||||
const arrowLength1 =
|
||||
props.arrowConfig1?.length ??
|
||||
props.arrowConfig?.length ??
|
||||
defaultArrowConfig.length;
|
||||
const arrowWidth1 =
|
||||
props.arrowConfig1?.width ??
|
||||
props.arrowConfig?.width ??
|
||||
defaultArrowConfig.width;
|
||||
const arrowStrokeWidth1 =
|
||||
props.arrowConfig1?.strokeWidth ??
|
||||
props.arrowConfig?.strokeWidth ??
|
||||
defaultArrowConfig.strokeWidth;
|
||||
const arrowStrokeColor1 =
|
||||
props.arrowConfig1?.strokeColor ??
|
||||
props.arrowConfig?.strokeColor ??
|
||||
defaultArrowConfig.strokeColor;
|
||||
const arrowFillColor1 =
|
||||
props.arrowConfig1?.fillColor ??
|
||||
props.arrowConfig?.fillColor ??
|
||||
defaultArrowConfig.fillColor;
|
||||
const showArrowBase1 =
|
||||
props.arrowConfig1?.showArrowBase ??
|
||||
props.arrowConfig?.showArrowBase ??
|
||||
defaultArrowConfig.showArrowBase;
|
||||
|
||||
const arrowLength2 =
|
||||
props.arrowConfig2?.length ??
|
||||
props.arrowConfig?.length ??
|
||||
defaultArrowConfig.length;
|
||||
const arrowWidth2 =
|
||||
props.arrowConfig2?.width ??
|
||||
props.arrowConfig?.width ??
|
||||
defaultArrowConfig.width;
|
||||
const arrowStrokeWidth2 =
|
||||
props.arrowConfig2?.strokeWidth ??
|
||||
props.arrowConfig?.strokeWidth ??
|
||||
defaultArrowConfig.strokeWidth;
|
||||
const arrowStrokeColor2 =
|
||||
props.arrowConfig2?.strokeColor ??
|
||||
props.arrowConfig?.strokeColor ??
|
||||
defaultArrowConfig.strokeColor;
|
||||
const arrowFillColor2 =
|
||||
props.arrowConfig2?.fillColor ??
|
||||
props.arrowConfig?.fillColor ??
|
||||
defaultArrowConfig.fillColor;
|
||||
const showArrowBase2 =
|
||||
props.arrowConfig2?.showArrowBase ??
|
||||
props.arrowConfig?.showArrowBase ??
|
||||
defaultArrowConfig.showArrowBase;
|
||||
|
||||
const arrowLength3 =
|
||||
props.arrowConfig3?.length ??
|
||||
props.arrowConfig?.length ??
|
||||
defaultArrowConfig.length;
|
||||
const arrowWidth3 =
|
||||
props.arrowConfig3?.width ??
|
||||
props.arrowConfig?.width ??
|
||||
defaultArrowConfig.width;
|
||||
const arrowStrokeWidth3 =
|
||||
props.arrowConfig3?.strokeWidth ??
|
||||
props.arrowConfig?.strokeWidth ??
|
||||
defaultArrowConfig.strokeWidth;
|
||||
const arrowStrokeColor3 =
|
||||
props.arrowConfig3?.strokeColor ??
|
||||
props.arrowConfig?.strokeColor ??
|
||||
defaultArrowConfig.strokeColor;
|
||||
const arrowFillColor3 =
|
||||
props.arrowConfig3?.fillColor ??
|
||||
props.arrowConfig?.fillColor ??
|
||||
defaultArrowConfig.fillColor;
|
||||
const showArrowBase3 =
|
||||
props.arrowConfig3?.showArrowBase ??
|
||||
props.arrowConfig?.showArrowBase ??
|
||||
defaultArrowConfig.showArrowBase;
|
||||
|
||||
const arrowLength4 =
|
||||
props.arrowConfig4?.length ??
|
||||
props.arrowConfig?.length ??
|
||||
defaultArrowConfig.length;
|
||||
const arrowWidth4 =
|
||||
props.arrowConfig4?.width ??
|
||||
props.arrowConfig?.width ??
|
||||
defaultArrowConfig.width;
|
||||
const arrowStrokeWidth4 =
|
||||
props.arrowConfig4?.strokeWidth ??
|
||||
props.arrowConfig?.strokeWidth ??
|
||||
defaultArrowConfig.strokeWidth;
|
||||
const arrowStrokeColor4 =
|
||||
props.arrowConfig4?.strokeColor ??
|
||||
props.arrowConfig?.strokeColor ??
|
||||
defaultArrowConfig.strokeColor;
|
||||
const arrowFillColor4 =
|
||||
props.arrowConfig4?.fillColor ??
|
||||
props.arrowConfig?.fillColor ??
|
||||
defaultArrowConfig.fillColor;
|
||||
const showArrowBase4 =
|
||||
props.arrowConfig4?.showArrowBase ??
|
||||
props.arrowConfig?.showArrowBase ??
|
||||
defaultArrowConfig.showArrowBase;
|
||||
|
||||
const arrowLength5 =
|
||||
props.arrowConfig5?.length ??
|
||||
props.arrowConfig?.length ??
|
||||
defaultArrowConfig.length;
|
||||
const arrowWidth5 =
|
||||
props.arrowConfig5?.width ??
|
||||
props.arrowConfig?.width ??
|
||||
defaultArrowConfig.width;
|
||||
const arrowStrokeWidth5 =
|
||||
props.arrowConfig5?.strokeWidth ??
|
||||
props.arrowConfig?.strokeWidth ??
|
||||
defaultArrowConfig.strokeWidth;
|
||||
const arrowStrokeColor5 =
|
||||
props.arrowConfig5?.strokeColor ??
|
||||
props.arrowConfig?.strokeColor ??
|
||||
defaultArrowConfig.strokeColor;
|
||||
const arrowFillColor5 =
|
||||
props.arrowConfig5?.fillColor ??
|
||||
props.arrowConfig?.fillColor ??
|
||||
defaultArrowConfig.fillColor;
|
||||
const showArrowBase5 =
|
||||
props.arrowConfig5?.showArrowBase ??
|
||||
props.arrowConfig?.showArrowBase ??
|
||||
defaultArrowConfig.showArrowBase;
|
||||
|
||||
const getArrowPoints = (
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength,
|
||||
arrowWidth,
|
||||
showArrowBase,
|
||||
) => {
|
||||
let dataLineSlope = (arrowTipY - y1) / (arrowTipX - x1);
|
||||
let d = arrowLength;
|
||||
let d2 = arrowWidth / 2;
|
||||
let interSectionX =
|
||||
arrowTipX - Math.sqrt((d * d) / (dataLineSlope * dataLineSlope + 1));
|
||||
let interSectionY = arrowTipY - dataLineSlope * (arrowTipX - interSectionX);
|
||||
|
||||
let arrowBasex1, arrowBaseY1, arrowBaseX2, arrowBaseY2;
|
||||
if (dataLineSlope === 0) {
|
||||
arrowBasex1 = interSectionX;
|
||||
arrowBaseY1 = interSectionY - d2;
|
||||
arrowBaseX2 = interSectionX;
|
||||
arrowBaseY2 = interSectionY + d2;
|
||||
} else {
|
||||
let arrowBaseSlope = -1 / dataLineSlope;
|
||||
arrowBasex1 =
|
||||
interSectionX -
|
||||
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
|
||||
arrowBaseY1 =
|
||||
interSectionY - arrowBaseSlope * (interSectionX - arrowBasex1);
|
||||
|
||||
arrowBaseX2 =
|
||||
interSectionX +
|
||||
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
|
||||
arrowBaseY2 =
|
||||
interSectionY + arrowBaseSlope * (interSectionX - arrowBasex1);
|
||||
}
|
||||
let arrowPoints = ` M${interSectionX} ${interSectionY}`;
|
||||
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBasex1} ${arrowBaseY1}`;
|
||||
arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
|
||||
arrowPoints += ` M${interSectionX} ${interSectionY}`;
|
||||
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBaseX2} ${arrowBaseY2}`;
|
||||
arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
|
||||
|
||||
return arrowPoints;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let pp = '',
|
||||
pp2 = '',
|
||||
@ -847,7 +1136,7 @@ export const LineChart = (props: propTypes) => {
|
||||
10 -
|
||||
(data[i].value * containerHeight) / maxValue) +
|
||||
' ';
|
||||
setPoints(pp.replace('L', 'M'));
|
||||
// setPoints(pp.replace('L', 'M'));
|
||||
}
|
||||
if (data2.length && i >= startIndex2 && i <= endIndex2) {
|
||||
pp2 +=
|
||||
@ -895,6 +1184,108 @@ export const LineChart = (props: propTypes) => {
|
||||
setPoints4(pp4.replace('L', 'M'));
|
||||
setPoints5(pp5.replace('L', 'M'));
|
||||
|
||||
setPoints(pp.replace('L', 'M'));
|
||||
|
||||
if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
|
||||
let ppArray = pp.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(ppArray[ppArray.length - 2].replace('L', ''));
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength1,
|
||||
arrowWidth1,
|
||||
showArrowBase1,
|
||||
);
|
||||
|
||||
setArrow1Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data2.length > 1 && (props.showArrow2 || props.showArrows)) {
|
||||
let ppArray = pp2.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(ppArray[ppArray.length - 2].replace('L', ''));
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength2,
|
||||
arrowWidth2,
|
||||
showArrowBase2,
|
||||
);
|
||||
|
||||
setArrow2Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data3.length > 1 && (props.showArrow3 || props.showArrows)) {
|
||||
let ppArray = pp3.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(ppArray[ppArray.length - 2].replace('L', ''));
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength3,
|
||||
arrowWidth3,
|
||||
showArrowBase3,
|
||||
);
|
||||
|
||||
setArrow3Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data4.length > 1 && (props.showArrow4 || props.showArrows)) {
|
||||
let ppArray = pp4.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(ppArray[ppArray.length - 2].replace('L', ''));
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength4,
|
||||
arrowWidth4,
|
||||
showArrowBase4,
|
||||
);
|
||||
|
||||
setArrow4Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data5.length > 1 && (props.showArrow5 || props.showArrows)) {
|
||||
let ppArray = pp5.trim().split(' ');
|
||||
let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
|
||||
let arrowTipX = parseInt(ppArray[ppArray.length - 2].replace('L', ''));
|
||||
let y1 = parseInt(ppArray[ppArray.length - 3]);
|
||||
let x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''));
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength5,
|
||||
arrowWidth5,
|
||||
showArrowBase5,
|
||||
);
|
||||
|
||||
setArrow5Points(arrowPoints);
|
||||
}
|
||||
|
||||
/*************************** For Area Charts *************************/
|
||||
if (areaChart) {
|
||||
let ppp = '',
|
||||
@ -1075,18 +1466,115 @@ export const LineChart = (props: propTypes) => {
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
let xx = svgPath(p1Array, bezierCommand);
|
||||
let xx2 = svgPath(p2Array, bezierCommand);
|
||||
let xx3 = svgPath(p3Array, bezierCommand);
|
||||
let xx4 = svgPath(p4Array, bezierCommand);
|
||||
let xx5 = svgPath(p5Array, bezierCommand);
|
||||
// console.log('xx', xx);
|
||||
|
||||
setPoints(xx);
|
||||
setPoints2(xx2);
|
||||
setPoints3(xx3);
|
||||
setPoints4(xx4);
|
||||
setPoints5(xx5);
|
||||
|
||||
if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
|
||||
let arrowTipY = p1Array[p1Array.length - 1][1];
|
||||
let arrowTipX = p1Array[p1Array.length - 1][0];
|
||||
let y1 = p1Array[p1Array.length - 2][1];
|
||||
let x1 = p1Array[p1Array.length - 2][0];
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength1,
|
||||
arrowWidth1,
|
||||
showArrowBase1,
|
||||
);
|
||||
|
||||
setArrow1Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data2.length > 1 && (props.showArrow2 || props.showArrows)) {
|
||||
let arrowTipY = p2Array[p2Array.length - 1][1];
|
||||
let arrowTipX = p2Array[p2Array.length - 1][0];
|
||||
let y1 = p2Array[p2Array.length - 2][1];
|
||||
let x1 = p2Array[p2Array.length - 2][0];
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength2,
|
||||
arrowWidth2,
|
||||
showArrowBase2,
|
||||
);
|
||||
|
||||
setArrow2Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data3.length > 1 && (props.showArrow3 || props.showArrows)) {
|
||||
let arrowTipY = p3Array[p3Array.length - 1][1];
|
||||
let arrowTipX = p3Array[p3Array.length - 1][0];
|
||||
let y1 = p3Array[p3Array.length - 2][1];
|
||||
let x1 = p3Array[p3Array.length - 2][0];
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength3,
|
||||
arrowWidth3,
|
||||
showArrowBase3,
|
||||
);
|
||||
|
||||
setArrow2Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data4.length > 1 && (props.showArrow4 || props.showArrows)) {
|
||||
let arrowTipY = p4Array[p4Array.length - 1][1];
|
||||
let arrowTipX = p4Array[p4Array.length - 1][0];
|
||||
let y1 = p4Array[p4Array.length - 2][1];
|
||||
let x1 = p4Array[p4Array.length - 2][0];
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength4,
|
||||
arrowWidth4,
|
||||
showArrowBase4,
|
||||
);
|
||||
|
||||
setArrow2Points(arrowPoints);
|
||||
}
|
||||
|
||||
if (data5.length > 1 && (props.showArrow5 || props.showArrows)) {
|
||||
let arrowTipY = p5Array[p5Array.length - 1][1];
|
||||
let arrowTipX = p5Array[p5Array.length - 1][0];
|
||||
let y1 = p5Array[p5Array.length - 2][1];
|
||||
let x1 = p5Array[p5Array.length - 2][0];
|
||||
|
||||
let arrowPoints = getArrowPoints(
|
||||
arrowTipX,
|
||||
arrowTipY,
|
||||
x1,
|
||||
y1,
|
||||
arrowLength5,
|
||||
arrowWidth5,
|
||||
showArrowBase5,
|
||||
);
|
||||
|
||||
setArrow2Points(arrowPoints);
|
||||
}
|
||||
|
||||
/*************************** For Area Charts *************************/
|
||||
|
||||
// console.log('xx---->>>', xx)
|
||||
@ -1279,6 +1767,27 @@ export const LineChart = (props: propTypes) => {
|
||||
endIndex4,
|
||||
startIndex5,
|
||||
endIndex5,
|
||||
arrowLength1,
|
||||
arrowWidth1,
|
||||
showArrowBase1,
|
||||
props.showArrow1,
|
||||
props.showArrows,
|
||||
props.showArrow2,
|
||||
props.showArrow3,
|
||||
props.showArrow4,
|
||||
props.showArrow5,
|
||||
arrowLength2,
|
||||
arrowWidth2,
|
||||
showArrowBase2,
|
||||
arrowLength3,
|
||||
arrowWidth3,
|
||||
showArrowBase3,
|
||||
arrowLength4,
|
||||
arrowWidth4,
|
||||
showArrowBase4,
|
||||
arrowLength5,
|
||||
arrowWidth5,
|
||||
showArrowBase5,
|
||||
]);
|
||||
|
||||
const horizSections = [{value: '0'}];
|
||||
@ -1287,90 +1796,6 @@ export const LineChart = (props: propTypes) => {
|
||||
const stepValue = props.stepValue || maxValue / noOfSections;
|
||||
const noOfSectionsBelowXAxis =
|
||||
props.noOfSectionsBelowXAxis || -minValue / stepValue;
|
||||
const thickness1 =
|
||||
props.thickness1 === 0 ? 0 : props.thickness1 || props.thickness || 1;
|
||||
const thickness2 =
|
||||
props.thickness2 === 0 ? 0 : props.thickness2 || props.thickness || 1;
|
||||
const thickness3 =
|
||||
props.thickness3 === 0 ? 0 : props.thickness3 || props.thickness || 1;
|
||||
const thickness4 =
|
||||
props.thickness4 === 0 ? 0 : props.thickness4 || props.thickness || 1;
|
||||
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;
|
||||
const strokeDashArray4 = props.strokeDashArray4 || props.strokeDashArray;
|
||||
const strokeDashArray5 = props.strokeDashArray5 || props.strokeDashArray;
|
||||
|
||||
const rotateLabel = props.rotateLabel || false;
|
||||
const isAnimated = props.isAnimated || false;
|
||||
const hideDataPoints1 =
|
||||
props.hideDataPoints || props.hideDataPoints1 || false;
|
||||
const hideDataPoints2 =
|
||||
props.hideDataPoints || props.hideDataPoints2 || false;
|
||||
const hideDataPoints3 =
|
||||
props.hideDataPoints || props.hideDataPoints3 || false;
|
||||
const hideDataPoints4 =
|
||||
props.hideDataPoints || props.hideDataPoints4 || false;
|
||||
const hideDataPoints5 =
|
||||
props.hideDataPoints || props.hideDataPoints5 || false;
|
||||
|
||||
const color1 = props.color1 || props.color || 'black';
|
||||
const color2 = props.color2 || props.color || 'black';
|
||||
const color3 = props.color3 || props.color || 'black';
|
||||
const color4 = props.color4 || props.color || 'black';
|
||||
const color5 = props.color5 || props.color || 'black';
|
||||
|
||||
const startFillColor1 =
|
||||
props.startFillColor1 || props.startFillColor || 'gray';
|
||||
const endFillColor1 = props.endFillColor1 || props.endFillColor || 'white';
|
||||
const startOpacity = props.startOpacity === 0 ? 0 : props.startOpacity || 1;
|
||||
const endOpacity = props.endOpacity === 0 ? 0 : props.endOpacity || 1;
|
||||
const startOpacity1 =
|
||||
props.startOpacity1 === 0 ? 0 : props.startOpacity1 || startOpacity;
|
||||
const endOpacity1 =
|
||||
props.endOpacity1 === 0 ? 0 : props.endOpacity1 || endOpacity;
|
||||
|
||||
const startFillColor2 =
|
||||
props.startFillColor2 || props.startFillColor || 'gray';
|
||||
const endFillColor2 = props.endFillColor2 || props.endFillColor || 'white';
|
||||
const startOpacity2 =
|
||||
props.startOpacity2 === 0 ? 0 : props.startOpacity2 || startOpacity;
|
||||
const endOpacity2 =
|
||||
props.endOpacity2 === 0 ? 0 : props.endOpacity2 || endOpacity;
|
||||
|
||||
const startFillColor3 =
|
||||
props.startFillColor3 || props.startFillColor || 'gray';
|
||||
const endFillColor3 = props.endFillColor3 || props.endFillColor || 'white';
|
||||
const startOpacity3 =
|
||||
props.startOpacity3 === 0 ? 0 : props.startOpacity3 || startOpacity;
|
||||
const endOpacity3 =
|
||||
props.endOpacity3 === 0 ? 0 : props.endOpacity3 || endOpacity;
|
||||
|
||||
const startFillColor4 =
|
||||
props.startFillColor4 || props.startFillColor || 'gray';
|
||||
const endFillColor4 = props.endFillColor4 || props.endFillColor || 'white';
|
||||
const startOpacity4 =
|
||||
props.startOpacity4 === 0 ? 0 : props.startOpacity4 || startOpacity;
|
||||
const endOpacity4 =
|
||||
props.endOpacity4 === 0 ? 0 : props.endOpacity4 || endOpacity;
|
||||
|
||||
const startFillColor5 =
|
||||
props.startFillColor5 || props.startFillColor || 'gray';
|
||||
const endFillColor5 = props.endFillColor5 || props.endFillColor || 'white';
|
||||
const startOpacity5 =
|
||||
props.startOpacity5 === 0 ? 0 : props.startOpacity5 || startOpacity;
|
||||
const endOpacity5 =
|
||||
props.endOpacity5 === 0 ? 0 : props.endOpacity5 || endOpacity;
|
||||
|
||||
const rulesThickness =
|
||||
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
|
||||
const rulesLength = props.rulesLength;
|
||||
@ -2683,6 +3108,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity: number,
|
||||
endOpacity: number,
|
||||
strokeDashArray: Array<number> | undefined | null,
|
||||
showArrow: boolean,
|
||||
arrowPoints,
|
||||
arrowStrokeWidth,
|
||||
arrowStrokeColor,
|
||||
arrowFillColor,
|
||||
) => {
|
||||
return (
|
||||
<Svg>
|
||||
@ -2815,6 +3245,14 @@ export const LineChart = (props: propTypes) => {
|
||||
endIndex5,
|
||||
)
|
||||
: null}
|
||||
{showArrow && (
|
||||
<Path
|
||||
d={arrowPoints}
|
||||
fill={arrowFillColor}
|
||||
stroke={arrowStrokeColor}
|
||||
strokeWidth={arrowStrokeWidth}
|
||||
/>
|
||||
)}
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
@ -2830,6 +3268,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity: number,
|
||||
endOpacity: number,
|
||||
strokeDashArray: Array<number> | undefined | null,
|
||||
showArrow,
|
||||
arrowPoints,
|
||||
arrowStrokeWidth,
|
||||
arrowStrokeColor,
|
||||
arrowFillColor,
|
||||
) => {
|
||||
return (
|
||||
<View
|
||||
@ -3038,6 +3481,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity,
|
||||
endOpacity,
|
||||
strokeDashArray,
|
||||
showArrow,
|
||||
arrowPoints,
|
||||
arrowStrokeWidth,
|
||||
arrowStrokeColor,
|
||||
arrowFillColor,
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
@ -3055,6 +3503,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity: number,
|
||||
endOpacity: number,
|
||||
strokeDashArray: Array<number> | undefined | null,
|
||||
showArrow,
|
||||
arrowPoints,
|
||||
arrowStrokeWidth,
|
||||
arrowStrokeColor,
|
||||
arrowFillColor,
|
||||
) => {
|
||||
// console.log('animatedWidth is-------->', animatedWidth);
|
||||
return (
|
||||
@ -3264,6 +3717,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity,
|
||||
endOpacity,
|
||||
strokeDashArray,
|
||||
showArrow,
|
||||
arrowPoints,
|
||||
arrowStrokeWidth,
|
||||
arrowStrokeColor,
|
||||
arrowFillColor,
|
||||
)}
|
||||
</Animated.View>
|
||||
);
|
||||
@ -3389,6 +3847,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
strokeDashArray1,
|
||||
props.showArrow1 || props.showArrows,
|
||||
arrow1Points,
|
||||
arrowStrokeWidth1,
|
||||
arrowStrokeColor1,
|
||||
arrowFillColor1,
|
||||
)
|
||||
: renderLine(
|
||||
zIndex1,
|
||||
@ -3401,6 +3864,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
strokeDashArray1,
|
||||
props.showArrow1 || props.showArrows,
|
||||
arrow1Points,
|
||||
arrowStrokeWidth1,
|
||||
arrowStrokeColor1,
|
||||
arrowFillColor1,
|
||||
)}
|
||||
{points2
|
||||
? isAnimated
|
||||
@ -3416,6 +3884,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
strokeDashArray2,
|
||||
props.showArrow2 || props.showArrows,
|
||||
arrow2Points,
|
||||
arrowStrokeWidth2,
|
||||
arrowStrokeColor2,
|
||||
arrowFillColor2,
|
||||
)
|
||||
: renderLine(
|
||||
zIndex2,
|
||||
@ -3428,6 +3901,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
strokeDashArray2,
|
||||
props.showArrow2 || props.showArrows,
|
||||
arrow2Points,
|
||||
arrowStrokeWidth2,
|
||||
arrowStrokeColor2,
|
||||
arrowFillColor2,
|
||||
)
|
||||
: null}
|
||||
{points3
|
||||
@ -3444,6 +3922,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity3,
|
||||
endOpacity3,
|
||||
strokeDashArray3,
|
||||
props.showArrow3 || props.showArrows,
|
||||
arrow3Points,
|
||||
arrowStrokeWidth3,
|
||||
arrowStrokeColor3,
|
||||
arrowFillColor3,
|
||||
)
|
||||
: renderLine(
|
||||
zIndex3,
|
||||
@ -3456,6 +3939,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity3,
|
||||
endOpacity3,
|
||||
strokeDashArray3,
|
||||
props.showArrow3 || props.showArrows,
|
||||
arrow3Points,
|
||||
arrowStrokeWidth3,
|
||||
arrowStrokeColor3,
|
||||
arrowFillColor3,
|
||||
)
|
||||
: null}
|
||||
{points4
|
||||
@ -3472,6 +3960,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity4,
|
||||
endOpacity4,
|
||||
strokeDashArray4,
|
||||
props.showArrow4 || props.showArrows,
|
||||
arrow4Points,
|
||||
arrowStrokeWidth4,
|
||||
arrowStrokeColor4,
|
||||
arrowFillColor4,
|
||||
)
|
||||
: renderLine(
|
||||
zIndex4,
|
||||
@ -3484,6 +3977,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity4,
|
||||
endOpacity4,
|
||||
strokeDashArray4,
|
||||
props.showArrow4 || props.showArrows,
|
||||
arrow4Points,
|
||||
arrowStrokeWidth4,
|
||||
arrowStrokeColor4,
|
||||
arrowFillColor4,
|
||||
)
|
||||
: null}
|
||||
{points5
|
||||
@ -3500,6 +3998,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity5,
|
||||
endOpacity5,
|
||||
strokeDashArray5,
|
||||
props.showArrow5 || props.showArrows,
|
||||
arrow5Points,
|
||||
arrowStrokeWidth5,
|
||||
arrowStrokeColor5,
|
||||
arrowFillColor5,
|
||||
)
|
||||
: renderLine(
|
||||
zIndex5,
|
||||
@ -3512,6 +4015,11 @@ export const LineChart = (props: propTypes) => {
|
||||
startOpacity5,
|
||||
endOpacity5,
|
||||
strokeDashArray5,
|
||||
props.showArrow5 || props.showArrows,
|
||||
arrow5Points,
|
||||
arrowStrokeWidth5,
|
||||
arrowStrokeColor5,
|
||||
arrowFillColor5,
|
||||
)
|
||||
: null}
|
||||
{pointerX > 0 ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user