status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-23 17:18:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allowed 5 simultaneous data sets in Line and area charts!

Browse Source
This commit is contained in:
abhinandan-kushwaha 2022-03-09 19:37:54 +05:30
parent 5a52b3b258
commit eebba41984
4 changed files with 623 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
App.js
View File

@ -603,6 +603,59 @@ const App = () => {
{value: 40, label: 'Thu'}, {value: 40, label: 'Thu'},
]; ];
const sdata = [
{value:1.0,label:'1'},
{value:0.75,label:'2'},
{value:0.25,label:'3'},
{value:0.00,label:'4'},
{value:0.50,label:'5'},
{value:0.72,label:'6'},
{value:0.85,label:'7'},
{value:0.00,label:'8'},
{value:0.50,label:'9'},
{value:0.72,label:'10'},
{value:0.85,label:'11'},
{value:0.72,label:'12'},
{value:0.85,label:'13'},
{value:0.72,label:'14'},
{value:0.85,label:'15'},
];
// const lineData = [
// {value: 0, dataPointText: '0'},
// {value: 20, dataPointText: '20'},
// {value: 18, dataPointText: '18'},
// {value: 40, dataPointText: '40'},
// {value: 36, dataPointText: '36'},
// {value: 60, dataPointText: '60'},
// {value: 54, dataPointText: '54'},
// {value: 85, dataPointText: '85'}
// ];
// const lineData = [
// {value: 0, dataPointText: '0'},
// {value: 10, dataPointText: '10'},
// {value: 8, dataPointText: '8'},
// {value: 58, dataPointText: '58'},
// {value: 56, dataPointText: '56'},
// {value: 78, dataPointText: '78'},
// {value: 74, dataPointText: '74'},
// {value: 98, dataPointText: '98'},
// ];
// const lineData2 = [
// {value: 0, dataPointText: '0'},
// {value: 20, dataPointText: '20'},
// {value: 18, dataPointText: '18'},
// {value: 40, dataPointText: '40'},
// {value: 36, dataPointText: '36'},
// {value: 60, dataPointText: '60'},
// {value: 54, dataPointText: '54'},
// {value: 85, dataPointText: '85'},
// ];
const lineData = [{value: 0},{value: 10},{value: 8},{value: 58},{value: 56},{value: 78},{value: 74},{value: 98}];
const lineData2 = [{value: 0},{value: 20},{value: 18},{value: 40},{value: 36},{value: 60},{value: 54},{value: 85}];
return ( return (
<View <View
style={{ style={{
@ -610,7 +663,7 @@ const App = () => {
// marginLeft: 46, // marginLeft: 46,
marginLeft: 20, marginLeft: 20,
}}> }}>
<BarChart {/* <BarChart
data={dtt} data={dtt}
// frontColor='rgba(0,0,0,0.2)' // frontColor='rgba(0,0,0,0.2)'
// lineData={barData} // lineData={barData}
@ -622,8 +675,118 @@ const App = () => {
isAnimated: true, isAnimated: true,
}} }}
showLine showLine
/> */}
{/* <LineChart
areaChart
curved
data={lineData}
data2={lineData2}
height={250}
showVerticalLines
spacing={44}
initialSpacing={0}
color1="skyblue"
color2="orange"
textColor1="green"
hideDataPoints
dataPointsColor1="blue"
dataPointsColor2="red"
startFillColor1="skyblue"
startFillColor2="orange"
startOpacity={0.8}
endOpacity={0.3}
/> */}
{/* <View style={{backgroundColor: '#1A3461'}}>
<LineChart
initialSpacing={0}
data={lineData}
isAnimated
spacing={30}
textColor1="yellow"
textShiftY={-8}
textShiftX={-10}
textFontSize={13}
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
</View> */}
{/* <LineChart
// curved={true}
// isAnimated={true}
// animateTogether
pressEnabled={true}
showStripOnPress={true}
showTextOnPress={true}
data={lineData}
disableScroll={true}
// data2={lineData2}
height={250}
showVerticalLines
spacing={44}
initialSpacing={0}
color1="skyblue"
color2="orange"
textColor1="green"
dataPointsHeight={6}
dataPointsWidth={6}
dataPointsHeight2={6}
dataPointsWidth2={6}
dataPointsColor1="blue"
dataPointsColor2="red"
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
/> */}
<LineChart
isAnimated={true}
curved
areaChart={true}
color1='red'
color2='blue'
color3='green'
color4='purple'
data={sdata.slice(0,4)}
// startIndex={0}
// endIndex={1}
data2={sdata.slice(2,6)}
// startIndex2={3}
// endIndex2={4}
data3={sdata.slice(3,7)}
// startIndex3={5}
// endIndex3={6}
data4={sdata.slice(4,8)}
// startIndex4={7}
// endIndex4={8}
data5={sdata.slice(1,5)}
// startIndex5={9}
// endIndex5={10}
showFractionalValues
maxValue={1.5}
noOfSections={3}
spacing={90}
// stepHeight={40}
stepValue={0.5}
height={300}
thickness={3}
hideDataPoints1
hideDataPoints2
hideDataPoints3
hideDataPoints4
hideDataPoints5
startFillColor1='gray'
startFillColor2='yellow'
startFillColor3='lightgreen'
startFillColor4='pink'
startFillColor5='orange'
startOpacity={0.8}
endOpacity={0.3}
/> />
{/* <LineChart color1='red' color2='blue' curved={true} data={barData} startIndex={0} endIndex={2} data2={barData} startIndex2={3} endIndex2={5} /> */}
{/* <BarChart {/* <BarChart
// isAnimated={true} // isAnimated={true}
isThreeD={true} isThreeD={true}
@ -651,13 +814,13 @@ const App = () => {
// innerCircleBorderColor={'gray'} // innerCircleBorderColor={'gray'}
// showTextBackground={true} // showTextBackground={true}
/> */} /> */}
<TouchableOpacity {/* <TouchableOpacity
onPress={() => { onPress={() => {
dtt[1].value += 20; dtt[1].value += 20;
setDtt([...dtt]); setDtt([...dtt]);
}}> }}>
<Text>Press me</Text> <Text>Press me</Text>
</TouchableOpacity> </TouchableOpacity> */}
{/* <View {/* <View
style={{ style={{
marginVertical: 100, marginVertical: 100,

36
docs/LineChart/LineChartProps.md
View File

@ -114,7 +114,13 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| referenceLine2Position | number | position of second reference line | 3\*containerHeight / 2 | | referenceLine2Position | number | position of second reference line | 3\*containerHeight / 2 |
| showReferenceLine3 | Boolean | show third reference line | false | | showReferenceLine3 | Boolean | show third reference line | false |
| referenceLine3Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | | referenceLine3Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine3Position | number | position of third reference line | containerHeight / 3 | | referenceLine3Position | number | position of third reference line | containerHeight / 2 |
| showReferenceLine4 | Boolean | show fourth reference line | false |
| referenceLine4Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine4Position | number | position of fourth reference line | containerHeight / 2 |
| showReferenceLine5 | Boolean | show fifth reference line | false |
| referenceLine5Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine5Position | number | position of fifth reference line | containerHeight / 2 |
| showVerticalLines | Boolean | To show vertical lines | false | | showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | | verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 | | verticallinesThickness | number | Thickness of the vertical lines | 1 |
@ -157,18 +163,26 @@ type referenceConfigType = {
| color1 | ColorValue | Color of the lines joining the first set of data points | color (from props) | | 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) | | color2 | ColorValue | Color of the lines joining the second set of data points | color (from props) |
| color3 | ColorValue | Color of the lines joining the third set of data points | color (from props) | | color3 | ColorValue | Color of the lines joining the third set of data points | color (from props) |
| color4 | ColorValue | Color of the lines joining the fourth set of data points | color (from props) |
| color5 | ColorValue | Color of the lines joining the fifth set of data points | color (from props) |
| thickness | number | Thickness of the lines joining the data points | 2 | | thickness | number | Thickness of the lines joining the data points | 2 |
| thickness1 | number | Thickness of the lines joining the first set of data points | thickness (from props) | | thickness1 | number | Thickness of the lines joining the first set of data points | thickness (from props) |
| thickness2 | number | Thickness of the lines joining the second set of data points | thickness (from props) | | thickness2 | number | Thickness of the lines joining the second set of data points | thickness (from props) |
| thickness3 | number | Thickness of the lines joining the third set of data points | thickness (from props) | | 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) |
| startIndex | number | Start index for data line (used to display data lines having breaks) | 0 | | startIndex | number | Start index for data line (used to display data lines having breaks) | 0 |
| startIndex1 | number | Start index for data line 1 (used to display data lines having breaks) | 0 | | startIndex1 | number | Start index for data line 1 (used to display data lines having breaks) | 0 |
| startIndex2 | number | Start index for data line 2 (used to display data lines having breaks) | 0 | | startIndex2 | number | Start index for data line 2 (used to display data lines having breaks) | 0 |
| startIndex3 | number | Start index for data line 3 (used to display data lines having breaks) | 0 | | startIndex3 | number | Start index for data line 3 (used to display data lines having breaks) | 0 |
| 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 | | 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 | | 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 | | 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 | | 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 | | curved | Boolean | To show curved line joining the data points | false |
--- ---
@ -201,6 +215,18 @@ type referenceConfigType = {
| dataPointsRadius3 | number | Radius of data points for the third dataset (when data points' shape is circular) | 3 | | dataPointsRadius3 | number | Radius of data points for the third dataset (when data points' shape is circular) | 3 |
| dataPointsColor3 | ColorValue | Color of data points for the third dataset | red | | dataPointsColor3 | ColorValue | Color of data points for the third dataset | red |
| dataPointsShape3 | string | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | 'circular' | | dataPointsShape3 | string | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | 'circular' |
| hideDataPoints4 | Boolean | To hide data points for the fourth set of data | false |
| dataPointsHeight4 | number | Height of data points for the fourth dataset (when data points' shape is rectangular) | 2 |
| dataPointsWidth4 | number | Width of data points for the fourth dataset (when data points' shape is rectangular) | 2 |
| dataPointsRadius4 | number | Radius of data points for the fourth dataset (when data points' shape is circular) | 4 |
| dataPointsColor4 | ColorValue | Color of data points for the fourth dataset | red |
| dataPointsShape4 | string | Shape of data points for the fourth dataset (_'rectangular'_ or _'circular'_) | 'circular' |
| hideDataPoints5 | Boolean | To hide data points for the fifth set of data | false |
| dataPointsHeight5 | number | Height of data points for the fifth dataset (when data points' shape is rectangular) | 2 |
| dataPointsWidth5 | number | Width of data points for the fifth dataset (when data points' shape is rectangular) | 2 |
| dataPointsRadius5 | number | Radius of data points for the fifth dataset (when data points' shape is circular) | 5 |
| dataPointsColor5 | ColorValue | Color of data points for the fifth dataset | red |
| dataPointsShape5 | string | Shape of data points for the fifth dataset (_'rectangular'_ or _'circular'_) | 'circular' |
| focusedDataPointShape | String | Shape of the data points when focused due to press event | item.dataPointsShape OR dataPointsShape | | focusedDataPointShape | String | Shape of the data points when focused due to press event | item.dataPointsShape OR dataPointsShape |
| focusedDataPointWidth | number | Width of the data points when focused due to press event | item.dataPointsWidth OR dataPointsWidth | | focusedDataPointWidth | number | Width of the data points when focused due to press event | item.dataPointsWidth OR dataPointsWidth |
| focusedDataPointHeight | number | Height of the data points when focused due to press event | item.dataPointsHeight OR dataPointsHeight | | focusedDataPointHeight | number | Height of the data points when focused due to press event | item.dataPointsHeight OR dataPointsHeight |
@ -279,6 +305,14 @@ Above code changes the pressed data point's color and radius. Since in this exam
| endFillColor3 | ColorValue | End gradient color for the third dataset of the area chart | white | | endFillColor3 | ColorValue | End gradient color for the third dataset of the area chart | white |
| startOpacity3 | number | Start gradient color for the third dataset of the area chart | 1 | | startOpacity3 | number | Start gradient color for the third dataset of the area chart | 1 |
| endOpacity3 | number | End gradient opacity for the third dataset of the area chart | 1 | | endOpacity3 | number | End gradient opacity for the third dataset of the area chart | 1 |
| startFillColor4 | ColorValue | Start gradient color for the fourth dataset of the area chart | gray |
| endFillColor4 | ColorValue | End gradient color for the fourth dataset of the area chart | white |
| startOpacity4 | number | Start gradient color for the fourth dataset of the area chart | 1 |
| endOpacity4 | number | End gradient opacity for the fourth dataset of the area chart | 1 |
| startFillColor5 | ColorValue | Start gradient color for the fifth dataset of the area chart | gray |
| endFillColor5 | ColorValue | End gradient color for the fifth dataset of the area chart | white |
| startOpacity5 | number | Start gradient color for the fifth dataset of the area chart | 1 |
| endOpacity5 | number | End gradient opacity for the fifth dataset of the area chart | 1 |
| gradientDirection | string | Direction of the gradient (_'horizontal'_ or _'vertical'_) | 'vertical' | | gradientDirection | string | Direction of the gradient (_'horizontal'_ or _'vertical'_) | 'vertical' |
--- ---

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-native-gifted-charts", "name": "react-native-gifted-charts",
"version": "1.0.8", "version": "1.0.9",
"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.", "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", "main": "src/index.tsx",
"files": [ "files": [

422
src/LineChart/index.tsx
View File

@ -41,10 +41,14 @@ type propTypes = {
data?: Array<itemType>; data?: Array<itemType>;
data2?: Array<itemType>; data2?: Array<itemType>;
data3?: Array<itemType>; data3?: Array<itemType>;
data4?: Array<itemType>;
data5?: Array<itemType>;
thickness?: number; thickness?: number;
thickness1?: number; thickness1?: number;
thickness2?: number; thickness2?: number;
thickness3?: number; thickness3?: number;
thickness4?: number;
thickness5?: number;
rotateLabel?: Boolean; rotateLabel?: Boolean;
isAnimated?: Boolean; isAnimated?: Boolean;
animateOnDataChange?: Boolean; animateOnDataChange?: Boolean;
@ -81,6 +85,12 @@ type propTypes = {
showReferenceLine3?: Boolean; showReferenceLine3?: Boolean;
referenceLine3Config?: referenceConfigType; referenceLine3Config?: referenceConfigType;
referenceLine3Position?: number; referenceLine3Position?: number;
showReferenceLine4?: Boolean;
referenceLine4Config?: referenceConfigType;
referenceLine4Position?: number;
showReferenceLine5?: Boolean;
referenceLine5Config?: referenceConfigType;
referenceLine5Position?: number;
showVerticalLines?: Boolean; showVerticalLines?: Boolean;
verticalLinesThickness?: number; verticalLinesThickness?: number;
@ -108,15 +118,21 @@ type propTypes = {
startIndex1?: number; startIndex1?: number;
startIndex2?: number; startIndex2?: number;
startIndex3?: number; startIndex3?: number;
startIndex4?: number;
startIndex5?: number;
endIndex?: number; endIndex?: number;
endIndex1?: number; endIndex1?: number;
endIndex2?: number; endIndex2?: number;
endIndex3?: number; endIndex3?: number;
endIndex4?: number;
endIndex5?: number;
color?: string; color?: string;
color1?: string; color1?: string;
color2?: string; color2?: string;
color3?: string; color3?: string;
color4?: string;
color5?: string;
yAxisThickness?: number; yAxisThickness?: number;
yAxisColor?: ColorValue; yAxisColor?: ColorValue;
yAxisTextStyle?: any; yAxisTextStyle?: any;
@ -155,6 +171,18 @@ type propTypes = {
dataPointsRadius3?: number; dataPointsRadius3?: number;
dataPointsColor3?: string; dataPointsColor3?: string;
dataPointsShape3?: string; dataPointsShape3?: string;
hideDataPoints4?: Boolean;
dataPointsHeight4?: number;
dataPointsWidth4?: number;
dataPointsRadius4?: number;
dataPointsColor4?: string;
dataPointsShape4?: string;
hideDataPoints5?: Boolean;
dataPointsHeight5?: number;
dataPointsWidth5?: number;
dataPointsRadius5?: number;
dataPointsColor5?: string;
dataPointsShape5?: string;
customDataPoint?: Function; customDataPoint?: Function;
focusedDataPointShape?: String; focusedDataPointShape?: String;
@ -183,6 +211,14 @@ type propTypes = {
endFillColor3?: string; endFillColor3?: string;
startOpacity3?: number; startOpacity3?: number;
endOpacity3?: number; endOpacity3?: number;
startFillColor4?: string;
endFillColor4?: string;
startOpacity4?: number;
endOpacity4?: number;
startFillColor5?: string;
endFillColor5?: string;
startOpacity5?: number;
endOpacity5?: number;
gradientDirection?: string; gradientDirection?: string;
textFontSize?: number; textFontSize?: number;
@ -193,6 +229,10 @@ type propTypes = {
textColor2?: string; textColor2?: string;
textFontSize3?: number; textFontSize3?: number;
textColor3?: string; textColor3?: string;
textFontSize4?: number;
textColor4?: string;
textFontSize5?: number;
textColor5?: string;
hideOrigin?: Boolean; hideOrigin?: Boolean;
textShiftX?: number; textShiftX?: number;
textShiftY?: number; textShiftY?: number;
@ -264,15 +304,21 @@ export const LineChart = (props: propTypes) => {
const [points, setPoints] = useState(''); const [points, setPoints] = useState('');
const [points2, setPoints2] = useState(''); const [points2, setPoints2] = useState('');
const [points3, setPoints3] = useState(''); const [points3, setPoints3] = useState('');
const [points4, setPoints4] = useState('');
const [points5, setPoints5] = useState('');
const [fillPoints, setFillPoints] = useState(''); const [fillPoints, setFillPoints] = useState('');
const [fillPoints2, setFillPoints2] = useState(''); const [fillPoints2, setFillPoints2] = useState('');
const [fillPoints3, setFillPoints3] = useState(''); const [fillPoints3, setFillPoints3] = useState('');
const [fillPoints4, setFillPoints4] = useState('');
const [fillPoints5, setFillPoints5] = useState('');
const [selectedIndex, setSelectedIndex] = useState(-1); const [selectedIndex, setSelectedIndex] = useState(-1);
const containerHeight = props.height || 200; const containerHeight = props.height || 200;
const noOfSections = props.noOfSections || 10; const noOfSections = props.noOfSections || 10;
let data = useMemo(() => props.data || [], [props.data]); let data = useMemo(() => props.data || [], [props.data]);
const data2 = useMemo(() => props.data2 || [], [props.data2]); const data2 = useMemo(() => props.data2 || [], [props.data2]);
const data3 = useMemo(() => props.data3 || [], [props.data3]); const data3 = useMemo(() => props.data3 || [], [props.data3]);
const data4 = useMemo(() => props.data4 || [], [props.data4]);
const data5 = useMemo(() => props.data5 || [], [props.data5]);
const scrollToEnd = props.scrollToEnd || false; const scrollToEnd = props.scrollToEnd || false;
const scrollAnimation = props.scrollAnimation === false ? false : true; const scrollAnimation = props.scrollAnimation === false ? false : true;
@ -280,6 +326,8 @@ export const LineChart = (props: propTypes) => {
const widthValue = useMemo(() => new Animated.Value(0), []); const widthValue = useMemo(() => new Animated.Value(0), []);
const widthValue2 = useMemo(() => new Animated.Value(0), []); const widthValue2 = useMemo(() => new Animated.Value(0), []);
const widthValue3 = useMemo(() => new Animated.Value(0), []); const widthValue3 = useMemo(() => new Animated.Value(0), []);
const widthValue4 = useMemo(() => new Animated.Value(0), []);
const widthValue5 = useMemo(() => new Animated.Value(0), []);
const animationDuration = props.animationDuration || 800; const animationDuration = props.animationDuration || 800;
const onDataChangeAnimationDuration = const onDataChangeAnimationDuration =
@ -312,6 +360,12 @@ export const LineChart = (props: propTypes) => {
const startIndex3 = props.startIndex3 || 0; const startIndex3 = props.startIndex3 || 0;
const endIndex3 = const endIndex3 =
props.endIndex3 === 0 ? 0 : props.endIndex3 || data3.length - 1; props.endIndex3 === 0 ? 0 : props.endIndex3 || data3.length - 1;
const startIndex4 = props.startIndex4 || 0;
const endIndex4 =
props.endIndex4 === 0 ? 0 : props.endIndex4 || data4.length - 1;
const startIndex5 = props.startIndex5 || 0;
const endIndex5 =
props.endIndex5 === 0 ? 0 : props.endIndex5 || data5.length - 1;
if (!initialData) { if (!initialData) {
initialData = [...data]; initialData = [...data];
@ -441,6 +495,26 @@ export const LineChart = (props: propTypes) => {
}).start(); }).start();
}, [animationDuration, widthValue3]); }, [animationDuration, widthValue3]);
const decreaseWidth4 = useCallback(() => {
widthValue4.setValue(0);
Animated.timing(widthValue4, {
toValue: 1,
duration: animationDuration,
easing: Easing.linear,
useNativeDriver: false,
}).start();
}, [animationDuration, widthValue4]);
const decreaseWidth5 = useCallback(() => {
widthValue5.setValue(0);
Animated.timing(widthValue5, {
toValue: 1,
duration: animationDuration,
easing: Easing.linear,
useNativeDriver: false,
}).start();
}, [animationDuration, widthValue5]);
const areaChart = props.areaChart || false; const areaChart = props.areaChart || false;
const dataPointsHeight1 = const dataPointsHeight1 =
props.dataPointsHeight1 || props.dataPointsHeight || 2; props.dataPointsHeight1 || props.dataPointsHeight || 2;
@ -472,12 +546,36 @@ export const LineChart = (props: propTypes) => {
const dataPointsShape3 = const dataPointsShape3 =
props.dataPointsShape3 || props.dataPointsShape || 'circular'; props.dataPointsShape3 || props.dataPointsShape || 'circular';
const dataPointsHeight4 =
props.dataPointsHeight4 || props.dataPointsHeight || 2;
const dataPointsWidth4 = props.dataPointsWidth4 || props.dataPointsWidth || 2;
const dataPointsRadius4 =
props.dataPointsRadius4 || props.dataPointsRadius || 3;
const dataPointsColor4 =
props.dataPointsColor4 || props.dataPointsColor || 'red';
const dataPointsShape4 =
props.dataPointsShape4 || props.dataPointsShape || 'circular';
const dataPointsHeight5 =
props.dataPointsHeight5 || props.dataPointsHeight || 2;
const dataPointsWidth5 = props.dataPointsWidth5 || props.dataPointsWidth || 2;
const dataPointsRadius5 =
props.dataPointsRadius5 || props.dataPointsRadius || 3;
const dataPointsColor5 =
props.dataPointsColor5 || props.dataPointsColor || 'red';
const dataPointsShape5 =
props.dataPointsShape5 || props.dataPointsShape || 'circular';
const textFontSize1 = props.textFontSize1 || props.textFontSize || 10; const textFontSize1 = props.textFontSize1 || props.textFontSize || 10;
const textFontSize2 = props.textFontSize2 || props.textFontSize || 10; const textFontSize2 = props.textFontSize2 || props.textFontSize || 10;
const textFontSize3 = props.textFontSize3 || props.textFontSize || 10; const textFontSize3 = props.textFontSize3 || props.textFontSize || 10;
const textFontSize4 = props.textFontSize4 || props.textFontSize || 10;
const textFontSize5 = props.textFontSize5 || props.textFontSize || 10;
const textColor1 = props.textColor1 || props.textColor || 'gray'; const textColor1 = props.textColor1 || props.textColor || 'gray';
const textColor2 = props.textColor2 || props.textColor || 'gray'; const textColor2 = props.textColor2 || props.textColor || 'gray';
const textColor3 = props.textColor3 || props.textColor || 'gray'; const textColor3 = props.textColor3 || props.textColor || 'gray';
const textColor4 = props.textColor4 || props.textColor || 'gray';
const textColor5 = props.textColor5 || props.textColor || 'gray';
const initialSpacing = const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40; props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const thickness = props.thickness || 2; const thickness = props.thickness || 2;
@ -538,19 +636,35 @@ export const LineChart = (props: propTypes) => {
}, },
animateTogether ? 0 : animationDuration * 2, animateTogether ? 0 : animationDuration * 2,
); );
setTimeout(
() => {
decreaseWidth4();
},
animateTogether ? 0 : animationDuration * 3,
);
setTimeout(
() => {
decreaseWidth5();
},
animateTogether ? 0 : animationDuration * 4,
);
}, [ }, [
animateTogether, animateTogether,
animationDuration, animationDuration,
decreaseWidth, decreaseWidth,
decreaseWidth2, decreaseWidth2,
decreaseWidth3, decreaseWidth3,
decreaseWidth4,
decreaseWidth5,
labelsAppear, labelsAppear,
]); ]);
useEffect(() => { useEffect(() => {
let pp = '', let pp = '',
pp2 = '', pp2 = '',
pp3 = ''; pp3 = '',
pp4 = '',
pp5 = '';
if (!props.curved) { if (!props.curved) {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) { if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) {
@ -584,15 +698,39 @@ export const LineChart = (props: propTypes) => {
(data3[i].value * containerHeight) / maxValue) + (data3[i].value * containerHeight) / maxValue) +
' '; ' ';
} }
if (data4.length && i >= startIndex4 && i <= endIndex4) {
pp4 +=
'L' +
(initialSpacing - dataPointsWidth4 / 2 + spacing * i) +
' ' +
(containerHeight +
10 -
(data4[i].value * containerHeight) / maxValue) +
' ';
}
if (data5.length && i >= startIndex5 && i <= endIndex5) {
pp5 +=
'L' +
(initialSpacing - dataPointsWidth5 / 2 + spacing * i) +
' ' +
(containerHeight +
10 -
(data5[i].value * containerHeight) / maxValue) +
' ';
}
} }
setPoints2(pp2.replace('L', 'M')); setPoints2(pp2.replace('L', 'M'));
setPoints3(pp3.replace('L', 'M')); setPoints3(pp3.replace('L', 'M'));
setPoints4(pp4.replace('L', 'M'));
setPoints5(pp5.replace('L', 'M'));
/*************************** For Area Charts *************************/ /*************************** For Area Charts *************************/
if (areaChart) { if (areaChart) {
let ppp = '', let ppp = '',
ppp2 = '', ppp2 = '',
ppp3 = ''; ppp3 = '',
ppp4 = '',
ppp5 = '';
if (!animateOnDataChange) { if (!animateOnDataChange) {
ppp = ppp =
@ -665,6 +803,53 @@ export const LineChart = (props: propTypes) => {
' '; ' ';
setFillPoints3(ppp3.replace('L', 'M')); setFillPoints3(ppp3.replace('L', 'M'));
} }
if (data4.length) {
ppp4 =
'L' +
(initialSpacing - dataPointsWidth4 / 2) +
' ' +
(containerHeight + 10 - xAxisThickness) +
' ';
ppp4 += pp4;
ppp4 +=
'L' +
(initialSpacing -
dataPointsWidth4 / 2 +
spacing * (data.length - 1)) +
' ' +
(containerHeight + 10 - xAxisThickness);
ppp4 +=
'L' +
(initialSpacing - dataPointsWidth4 / 2) +
' ' +
(containerHeight + 10 - xAxisThickness) +
' ';
setFillPoints4(ppp4.replace('L', 'M'));
}
if (data5.length) {
ppp5 =
'L' +
(initialSpacing - dataPointsWidth5 / 2) +
' ' +
(containerHeight + 10 - xAxisThickness) +
' ';
ppp5 += pp5;
ppp5 +=
'L' +
(initialSpacing -
dataPointsWidth5 / 2 +
spacing * (data.length - 1)) +
' ' +
(containerHeight + 10 - xAxisThickness);
ppp5 +=
'L' +
(initialSpacing - dataPointsWidth5 / 2) +
' ' +
(containerHeight + 10 - xAxisThickness) +
' ';
setFillPoints5(ppp5.replace('L', 'M'));
}
} }
// console.log('pp-------->', pp); // console.log('pp-------->', pp);
@ -676,7 +861,9 @@ export const LineChart = (props: propTypes) => {
} else { } else {
let p1Array = [], let p1Array = [],
p2Array = [], p2Array = [],
p3Array = []; p3Array = [],
p4Array = [],
p5Array = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (i >= startIndex1 && i <= endIndex1) { if (i >= startIndex1 && i <= endIndex1) {
p1Array.push([ p1Array.push([
@ -700,14 +887,34 @@ export const LineChart = (props: propTypes) => {
(data3[i].value * containerHeight) / maxValue, (data3[i].value * containerHeight) / maxValue,
]); ]);
} }
if (data4.length && i >= startIndex4 && i <= endIndex4) {
p4Array.push([
initialSpacing - dataPointsWidth4 / 2 + spacing * i,
containerHeight +
10 -
(data4[i].value * containerHeight) / maxValue,
]);
}
if (data5.length && i >= startIndex5 && i <= endIndex5) {
p5Array.push([
initialSpacing - dataPointsWidth5 / 2 + spacing * i,
containerHeight +
10 -
(data5[i].value * containerHeight) / maxValue,
]);
}
} }
let xx = svgPath(p1Array, bezierCommand); let xx = svgPath(p1Array, bezierCommand);
let xx2 = svgPath(p2Array, bezierCommand); let xx2 = svgPath(p2Array, bezierCommand);
let xx3 = svgPath(p3Array, bezierCommand); let xx3 = svgPath(p3Array, bezierCommand);
let xx4 = svgPath(p4Array, bezierCommand);
let xx5 = svgPath(p5Array, bezierCommand);
// console.log('xx', xx); // console.log('xx', xx);
setPoints(xx); setPoints(xx);
setPoints2(xx2); setPoints2(xx2);
setPoints3(xx3); setPoints3(xx3);
setPoints4(xx4);
setPoints5(xx5);
/*************************** For Area Charts *************************/ /*************************** For Area Charts *************************/
@ -804,6 +1011,68 @@ export const LineChart = (props: propTypes) => {
' '; ' ';
setFillPoints3(xx3); setFillPoints3(xx3);
} }
if (data4.length) {
xx4 =
'M ' +
(initialSpacing - dataPointsWidth4 / 2) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ' +
'L ' +
(initialSpacing - dataPointsWidth4 / 2) +
',' +
(containerHeight +
10 -
(data4[0].value * containerHeight) / maxValue) +
' ' +
xx4 +
' ' +
'L ' +
(initialSpacing -
dataPointsWidth4 / 2 +
spacing * (data4.length - 1)) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ' +
'L ' +
(initialSpacing - dataPointsWidth4 / 2) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ';
setFillPoints4(xx4);
}
if (data5.length) {
xx5 =
'M ' +
(initialSpacing - dataPointsWidth5 / 2) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ' +
'L ' +
(initialSpacing - dataPointsWidth5 / 2) +
',' +
(containerHeight +
10 -
(data5[0].value * containerHeight) / maxValue) +
' ' +
xx5 +
' ' +
'L ' +
(initialSpacing -
dataPointsWidth5 / 2 +
spacing * (data5.length - 1)) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ' +
'L ' +
(initialSpacing - dataPointsWidth5 / 2) +
',' +
(containerHeight + 10 - xAxisThickness) +
' ';
setFillPoints5(xx5);
}
} }
/*************************************************************************************/ /*************************************************************************************/
@ -815,9 +1084,13 @@ export const LineChart = (props: propTypes) => {
data, data,
data2, data2,
data3, data3,
data4,
data5,
dataPointsWidth1, dataPointsWidth1,
dataPointsWidth2, dataPointsWidth2,
dataPointsWidth3, dataPointsWidth3,
dataPointsWidth4,
dataPointsWidth5,
initialSpacing, initialSpacing,
maxValue, maxValue,
props.curved, props.curved,
@ -829,6 +1102,10 @@ export const LineChart = (props: propTypes) => {
endIndex2, endIndex2,
startIndex3, startIndex3,
endIndex3, endIndex3,
startIndex4,
endIndex4,
startIndex5,
endIndex5,
]); ]);
const horizSections = [{value: '0'}]; const horizSections = [{value: '0'}];
@ -840,6 +1117,8 @@ export const LineChart = (props: propTypes) => {
const thickness1 = props.thickness1; const thickness1 = props.thickness1;
const thickness2 = props.thickness2; const thickness2 = props.thickness2;
const thickness3 = props.thickness3; const thickness3 = props.thickness3;
const thickness4 = props.thickness4;
const thickness5 = props.thickness5;
const rotateLabel = props.rotateLabel || false; const rotateLabel = props.rotateLabel || false;
const isAnimated = props.isAnimated || false; const isAnimated = props.isAnimated || false;
const hideDataPoints1 = const hideDataPoints1 =
@ -848,10 +1127,16 @@ export const LineChart = (props: propTypes) => {
props.hideDataPoints || props.hideDataPoints2 || false; props.hideDataPoints || props.hideDataPoints2 || false;
const hideDataPoints3 = const hideDataPoints3 =
props.hideDataPoints || props.hideDataPoints3 || false; 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 color1 = props.color1 || props.color || 'black';
const color2 = props.color2 || props.color || 'black'; const color2 = props.color2 || props.color || 'black';
const color3 = props.color3 || 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 = const startFillColor1 =
props.startFillColor1 || props.startFillColor || 'gray'; props.startFillColor1 || props.startFillColor || 'gray';
@ -871,6 +1156,18 @@ export const LineChart = (props: propTypes) => {
const startOpacity3 = props.startOpacity3 || props.startOpacity || 1; const startOpacity3 = props.startOpacity3 || props.startOpacity || 1;
const endOpacity3 = props.endOpacity3 || props.endOpacity || 1; const endOpacity3 = props.endOpacity3 || props.endOpacity || 1;
const startFillColor4 =
props.startFillColor4 || props.startFillColor || 'gray';
const endFillColor4 = props.endFillColor4 || props.endFillColor || 'white';
const startOpacity4 = props.startOpacity4 || props.startOpacity || 1;
const endOpacity4 = props.endOpacity4 || props.endOpacity || 1;
const startFillColor5 =
props.startFillColor5 || props.startFillColor || 'gray';
const endFillColor5 = props.endFillColor5 || props.endFillColor || 'white';
const startOpacity5 = props.startOpacity5 || props.startOpacity || 1;
const endOpacity5 = props.endOpacity5 || props.endOpacity || 1;
const rulesThickness = const rulesThickness =
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1; props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
const rulesColor = props.rulesColor || 'lightgray'; const rulesColor = props.rulesColor || 'lightgray';
@ -1100,6 +1397,16 @@ export const LineChart = (props: propTypes) => {
outputRange: [0, totalWidth], outputRange: [0, totalWidth],
}); });
const animatedWidth4 = widthValue4.interpolate({
inputRange: [0, 1],
outputRange: [0, totalWidth],
});
const animatedWidth5 = widthValue5.interpolate({
inputRange: [0, 1],
outputRange: [0, totalWidth],
});
// const sectionsOverlay = () => { // const sectionsOverlay = () => {
// return ( // return (
// <Animated.View // <Animated.View
@ -1670,6 +1977,9 @@ export const LineChart = (props: propTypes) => {
{renderSpecificVerticalLines(data)} {renderSpecificVerticalLines(data)}
{renderSpecificVerticalLines(data2)} {renderSpecificVerticalLines(data2)}
{renderSpecificVerticalLines(data3)}
{renderSpecificVerticalLines(data4)}
{renderSpecificVerticalLines(data5)}
{/*** !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!! ***/} {/*** !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!! ***/}
{!hideDataPoints1 {!hideDataPoints1
@ -1714,6 +2024,34 @@ export const LineChart = (props: propTypes) => {
endIndex3, endIndex3,
) )
: null} : null}
{!hideDataPoints4
? renderDataPoints(
data4,
dataPointsShape4,
dataPointsWidth4,
dataPointsHeight4,
dataPointsColor4,
dataPointsRadius4,
textColor4,
textFontSize4,
startIndex4,
endIndex4,
)
: null}
{!hideDataPoints5
? renderDataPoints(
data5,
dataPointsShape5,
dataPointsWidth5,
dataPointsHeight5,
dataPointsColor5,
dataPointsRadius5,
textColor5,
textFontSize5,
startIndex5,
endIndex5,
)
: null}
</Svg> </Svg>
</View> </View>
); );
@ -1784,6 +2122,8 @@ export const LineChart = (props: propTypes) => {
{renderSpecificVerticalLines(data)} {renderSpecificVerticalLines(data)}
{renderSpecificVerticalLines(data2)} {renderSpecificVerticalLines(data2)}
{renderSpecificVerticalLines(data3)} {renderSpecificVerticalLines(data3)}
{renderSpecificVerticalLines(data4)}
{renderSpecificVerticalLines(data5)}
{/*** !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!! ***/} {/*** !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!! ***/}
{!hideDataPoints1 {!hideDataPoints1
@ -1828,6 +2168,34 @@ export const LineChart = (props: propTypes) => {
endIndex3, endIndex3,
) )
: null} : null}
{!hideDataPoints4
? renderDataPoints(
data4,
dataPointsShape4,
dataPointsWidth4,
dataPointsHeight4,
dataPointsColor4,
dataPointsRadius4,
textColor4,
textFontSize4,
startIndex4,
endIndex4,
)
: null}
{!hideDataPoints5
? renderDataPoints(
data5,
dataPointsShape5,
dataPointsWidth5,
dataPointsHeight5,
dataPointsColor5,
dataPointsRadius5,
textColor5,
textFontSize5,
startIndex5,
endIndex5,
)
: null}
</Svg> </Svg>
</Animated.View> </Animated.View>
); );
@ -1983,6 +2351,54 @@ export const LineChart = (props: propTypes) => {
endOpacity3, endOpacity3,
) )
: null} : null}
{points4
? isAnimated
? renderAnimatedLine(
points4,
animatedWidth4,
thickness4,
color4,
fillPoints4,
startFillColor4,
endFillColor4,
startOpacity4,
endOpacity4,
)
: renderLine(
points4,
thickness4,
color4,
fillPoints4,
startFillColor4,
endFillColor4,
startOpacity4,
endOpacity4,
)
: null}
{points5
? isAnimated
? renderAnimatedLine(
points5,
animatedWidth5,
thickness5,
color5,
fillPoints5,
startFillColor5,
endFillColor5,
startOpacity5,
endOpacity5,
)
: renderLine(
points5,
thickness5,
color5,
fillPoints5,
startFillColor5,
endFillColor5,
startOpacity5,
endOpacity5,
)
: null}
{data.map((item: itemType, index: number) => { {data.map((item: itemType, index: number) => {
// console.log('item', item) // console.log('item', item)
return ( return (