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

Refactored code for Line chart-pointerconfig and wrote tests

This commit is contained in:
Abhinandan-Kushwaha 2022-05-16 16:00:56 +05:30
parent 41a8b30c2d
commit c08bc8431b
7 changed files with 8891 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
__tests__/LineChart.test.js
View File

@ -8,6 +8,10 @@ import AnimatedArea from '../examples/LineChart/AnimatedArea';
import AreaTwo from '../examples/LineChart/AreaTwo';
import LineChartTwo from '../examples/LineChart/LineChartTwo';
import SimpleBlueLine from '../examples/LineChart/SimpleBlueLine';
import ChartWithPointer from '../examples/LineChart/ChartWithPointer';
import ChartWithAdjustingPointer from '../examples/LineChart/ChartWithAdjustingPointer';
import ScrollingChartWithPointer from '../examples/LineChart/ScrollingChartWithPointer';
import CaloriesBurnt from '../examples/LineChart/CaloriesBurnt';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
@ -31,3 +35,23 @@ it('renders blue line chart correctly', () => {
const tree = renderer.create(<SimpleBlueLine />).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders ChartWithPointer correctly', () => {
const tree = renderer.create(<ChartWithPointer />).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders ChartWithAdjustingPointer correctly', () => {
const tree = renderer.create(<ChartWithAdjustingPointer />).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders ScrollingChartWithPointer correctly', () => {
const tree = renderer.create(<ScrollingChartWithPointer />).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders CaloriesBurnt Area chart correctly', () => {
const tree = renderer.create(<CaloriesBurnt />).toJSON();
expect(tree).toMatchSnapshot();
});

8294
__tests__/__snapshots__/LineChart.test.js.snap
View File

File diff suppressed because it is too large Load Diff

94
examples/LineChart/CaloriesBurnt.js Normal file
View File

@ -0,0 +1,94 @@
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {LineChart} from 'react-native-gifted-charts';
const CaloriesBurnt = () => {
const data1 = [
{value: 70},
{value: 36},
{value: 50},
{value: 40},
{value: 18},
{value: 38},
];
const data2 = [
{value: 50},
{value: 10},
{value: 45},
{value: 30},
{value: 45},
{value: 18},
];
return (
<View>
<LineChart
areaChart
curved
data={data1}
data2={data2}
hideDataPoints
spacing={68}
color1="#8a56ce"
color2="#56acce"
startFillColor1="#8a56ce"
startFillColor2="#56acce"
endFillColor1="#8a56ce"
endFillColor2="#56acce"
startOpacity={0.9}
endOpacity={0.2}
initialSpacing={0}
noOfSections={4}
yAxisColor="white"
yAxisThickness={0}
rulesType="solid"
rulesColor="gray"
yAxisTextStyle={{color: 'gray'}}
yAxisLabelSuffix="%"
xAxisColor="lightgray"
pointerConfig={{
pointerStripUptoDataPoint: true,
pointerStripColor: 'lightgray',
pointerStripWidth: 2,
strokeDashArray: [2, 5],
pointerColor: 'lightgray',
radius: 4,
pointerLabelWidth: 100,
pointerLabelHeight: 120,
pointerLabelComponent: items => {
return (
<View
style={{
height: 120,
width: 100,
backgroundColor: '#282C3E',
borderRadius: 4,
justifyContent: 'center',
paddingLeft: 16,
}}>
<Text style={{color: 'lightgray', fontSize: 12}}>{2018}</Text>
<Text style={{color: 'white', fontWeight: 'bold'}}>
{items[0].value}
</Text>
<Text style={{color: 'lightgray', fontSize: 12, marginTop: 12}}>
{2019}
</Text>
<Text style={{color: 'white', fontWeight: 'bold'}}>
{items[1].value}
</Text>
</View>
);
},
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
});
export default CaloriesBurnt;

146
examples/LineChart/ChartWithAdjustingPointer.js Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import {View, Text} from 'react-native';
import {LineChart} from '../../src/LineChart';
const ChartWithAdjustingPointer = () => {
const ptData = [
{value: 160, date: '1 Apr 2022'},
{value: 180, date: '2 Apr 2022'},
{value: 190, date: '3 Apr 2022'},
{value: 180, date: '4 Apr 2022'},
{value: 140, date: '5 Apr 2022'},
{value: 145, date: '6 Apr 2022'},
{value: 160, date: '7 Apr 2022'},
{value: 200, date: '8 Apr 2022'},
{value: 220, date: '9 Apr 2022'},
{
value: 240,
date: '10 Apr 2022',
label: '10 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '11 Apr 2022'},
{value: 260, date: '12 Apr 2022'},
{value: 340, date: '13 Apr 2022'},
{value: 385, date: '14 Apr 2022'},
{value: 280, date: '15 Apr 2022'},
{value: 390, date: '16 Apr 2022'},
{value: 370, date: '17 Apr 2022'},
{value: 285, date: '18 Apr 2022'},
{value: 295, date: '19 Apr 2022'},
{
value: 300,
date: '20 Apr 2022',
label: '20 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '21 Apr 2022'},
{value: 295, date: '22 Apr 2022'},
{value: 260, date: '23 Apr 2022'},
{value: 255, date: '24 Apr 2022'},
{value: 190, date: '25 Apr 2022'},
{value: 220, date: '26 Apr 2022'},
{value: 205, date: '27 Apr 2022'},
{value: 230, date: '28 Apr 2022'},
{value: 210, date: '29 Apr 2022'},
{
value: 200,
date: '30 Apr 2022',
label: '30 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 240, date: '1 May 2022'},
{value: 250, date: '2 May 2022'},
{value: 280, date: '3 May 2022'},
{value: 250, date: '4 May 2022'},
{value: 210, date: '5 May 2022'},
];
return (
<View
style={{
paddingVertical: 100,
paddingLeft: 20,
backgroundColor: '#1C1C1C',
}}>
<LineChart
areaChart
data={ptData}
rotateLabel
width={300}
hideDataPoints
spacing={10}
color="#00ff83"
thickness={2}
startFillColor="rgba(20,105,81,0.3)"
endFillColor="rgba(20,85,81,0.01)"
startOpacity={0.9}
endOpacity={0.2}
initialSpacing={0}
noOfSections={6}
stepHeight={50}
height={300}
maxValue={600}
yAxisColor="white"
yAxisThickness={0}
rulesType="solid"
rulesColor="gray"
yAxisTextStyle={{color: 'gray'}}
yAxisLabelPrefix="hello"
yAxisTextNumberOfLines={2}
// yAxisLabelWidth={40}
// yAxisSide='right'
xAxisColor="lightgray"
pointerConfig={{
pointerStripHeight: 160,
pointerStripColor: 'lightgray',
pointerStripWidth: 2,
pointerColor: 'lightgray',
radius: 6,
pointerLabelWidth: 100,
pointerLabelHeight: 90,
// activatePointersOnLongPress: true,
// autoAdjustPointerLabelPosition: false,
pointerLabelComponent: items => {
return (
<View
style={{
height: 90,
width: 100,
justifyContent: 'center',
// marginTop: -30,
// marginLeft: -40,
}}>
<Text
style={{
color: 'white',
fontSize: 14,
marginBottom: 6,
textAlign: 'center',
}}>
{items[0].date}
</Text>
<View
style={{
paddingHorizontal: 14,
paddingVertical: 6,
borderRadius: 16,
backgroundColor: 'white',
}}>
<Text style={{fontWeight: 'bold', textAlign: 'center'}}>
{'$' + items[0].value + '.0'}
</Text>
</View>
</View>
);
},
}}
/>
</View>
);
};
export default ChartWithAdjustingPointer;

146
examples/LineChart/ChartWithPointer.js Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import {View, Text} from 'react-native';
import {LineChart} from '../../src/LineChart';
const ChartWithPointer = () => {
const ptData = [
{value: 160, date: '1 Apr 2022'},
{value: 180, date: '2 Apr 2022'},
{value: 190, date: '3 Apr 2022'},
{value: 180, date: '4 Apr 2022'},
{value: 140, date: '5 Apr 2022'},
{value: 145, date: '6 Apr 2022'},
{value: 160, date: '7 Apr 2022'},
{value: 200, date: '8 Apr 2022'},
{value: 220, date: '9 Apr 2022'},
{
value: 240,
date: '10 Apr 2022',
label: '10 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '11 Apr 2022'},
{value: 260, date: '12 Apr 2022'},
{value: 340, date: '13 Apr 2022'},
{value: 385, date: '14 Apr 2022'},
{value: 280, date: '15 Apr 2022'},
{value: 390, date: '16 Apr 2022'},
{value: 370, date: '17 Apr 2022'},
{value: 285, date: '18 Apr 2022'},
{value: 295, date: '19 Apr 2022'},
{
value: 300,
date: '20 Apr 2022',
label: '20 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '21 Apr 2022'},
{value: 295, date: '22 Apr 2022'},
{value: 260, date: '23 Apr 2022'},
{value: 255, date: '24 Apr 2022'},
{value: 190, date: '25 Apr 2022'},
{value: 220, date: '26 Apr 2022'},
{value: 205, date: '27 Apr 2022'},
{value: 230, date: '28 Apr 2022'},
{value: 210, date: '29 Apr 2022'},
{
value: 200,
date: '30 Apr 2022',
label: '30 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 240, date: '1 May 2022'},
{value: 250, date: '2 May 2022'},
{value: 280, date: '3 May 2022'},
{value: 250, date: '4 May 2022'},
{value: 210, date: '5 May 2022'},
];
return (
<View
style={{
paddingVertical: 100,
paddingLeft: 20,
backgroundColor: '#1C1C1C',
}}>
<LineChart
areaChart
data={ptData}
rotateLabel
width={300}
hideDataPoints
spacing={10}
color="#00ff83"
thickness={2}
startFillColor="rgba(20,105,81,0.3)"
endFillColor="rgba(20,85,81,0.01)"
startOpacity={0.9}
endOpacity={0.2}
initialSpacing={0}
noOfSections={6}
stepHeight={50}
height={300}
maxValue={600}
yAxisColor="white"
yAxisThickness={0}
rulesType="solid"
rulesColor="gray"
yAxisTextStyle={{color: 'gray'}}
yAxisLabelPrefix="hello"
yAxisTextNumberOfLines={2}
// yAxisLabelWidth={40}
// yAxisSide='right'
xAxisColor="lightgray"
pointerConfig={{
pointerStripHeight: 160,
pointerStripColor: 'lightgray',
pointerStripWidth: 2,
pointerColor: 'lightgray',
radius: 6,
pointerLabelWidth: 100,
pointerLabelHeight: 90,
// activatePointersOnLongPress: true,
autoAdjustPointerLabelPosition: false,
pointerLabelComponent: items => {
return (
<View
style={{
height: 90,
width: 100,
justifyContent: 'center',
// marginTop: -30,
// marginLeft: -40,
}}>
<Text
style={{
color: 'white',
fontSize: 14,
marginBottom: 6,
textAlign: 'center',
}}>
{items[0].date}
</Text>
<View
style={{
paddingHorizontal: 14,
paddingVertical: 6,
borderRadius: 16,
backgroundColor: 'white',
}}>
<Text style={{fontWeight: 'bold', textAlign: 'center'}}>
{'$' + items[0].value + '.0'}
</Text>
</View>
</View>
);
},
}}
/>
</View>
);
};
export default ChartWithPointer;

146
examples/LineChart/ScrollingChartWithPointer.js Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import {View, Text} from 'react-native';
import {LineChart} from '../../src/LineChart';
const ScrollingChartWithPointer = () => {
const ptData = [
{value: 160, date: '1 Apr 2022'},
{value: 180, date: '2 Apr 2022'},
{value: 190, date: '3 Apr 2022'},
{value: 180, date: '4 Apr 2022'},
{value: 140, date: '5 Apr 2022'},
{value: 145, date: '6 Apr 2022'},
{value: 160, date: '7 Apr 2022'},
{value: 200, date: '8 Apr 2022'},
{value: 220, date: '9 Apr 2022'},
{
value: 240,
date: '10 Apr 2022',
label: '10 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '11 Apr 2022'},
{value: 260, date: '12 Apr 2022'},
{value: 340, date: '13 Apr 2022'},
{value: 385, date: '14 Apr 2022'},
{value: 280, date: '15 Apr 2022'},
{value: 390, date: '16 Apr 2022'},
{value: 370, date: '17 Apr 2022'},
{value: 285, date: '18 Apr 2022'},
{value: 295, date: '19 Apr 2022'},
{
value: 300,
date: '20 Apr 2022',
label: '20 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 280, date: '21 Apr 2022'},
{value: 295, date: '22 Apr 2022'},
{value: 260, date: '23 Apr 2022'},
{value: 255, date: '24 Apr 2022'},
{value: 190, date: '25 Apr 2022'},
{value: 220, date: '26 Apr 2022'},
{value: 205, date: '27 Apr 2022'},
{value: 230, date: '28 Apr 2022'},
{value: 210, date: '29 Apr 2022'},
{
value: 200,
date: '30 Apr 2022',
label: '30 Apr',
labelTextStyle: {color: 'lightgray', width: 60},
},
{value: 240, date: '1 May 2022'},
{value: 250, date: '2 May 2022'},
{value: 280, date: '3 May 2022'},
{value: 250, date: '4 May 2022'},
{value: 210, date: '5 May 2022'},
];
return (
<View
style={{
paddingVertical: 100,
paddingLeft: 20,
backgroundColor: '#1C1C1C',
}}>
<LineChart
areaChart
data={ptData}
rotateLabel
width={300}
hideDataPoints
spacing={10}
color="#00ff83"
thickness={2}
startFillColor="rgba(20,105,81,0.3)"
endFillColor="rgba(20,85,81,0.01)"
startOpacity={0.9}
endOpacity={0.2}
initialSpacing={0}
noOfSections={6}
stepHeight={50}
height={300}
maxValue={600}
yAxisColor="white"
yAxisThickness={0}
rulesType="solid"
rulesColor="gray"
yAxisTextStyle={{color: 'gray'}}
yAxisLabelPrefix="hello"
yAxisTextNumberOfLines={2}
// yAxisLabelWidth={40}
// yAxisSide='right'
xAxisColor="lightgray"
pointerConfig={{
pointerStripHeight: 160,
pointerStripColor: 'lightgray',
pointerStripWidth: 2,
pointerColor: 'lightgray',
radius: 6,
pointerLabelWidth: 100,
pointerLabelHeight: 90,
// activatePointersOnLongPress: true,
autoAdjustPointerLabelPosition: false,
pointerLabelComponent: items => {
return (
<View
style={{
height: 90,
width: 100,
justifyContent: 'center',
// marginTop: -30,
// marginLeft: -40,
}}>
<Text
style={{
color: 'white',
fontSize: 14,
marginBottom: 6,
textAlign: 'center',
}}>
{items[0].date}
</Text>
<View
style={{
paddingHorizontal: 14,
paddingVertical: 6,
borderRadius: 16,
backgroundColor: 'white',
}}>
<Text style={{fontWeight: 'bold', textAlign: 'center'}}>
{'$' + items[0].value + '.0'}
</Text>
</View>
</View>
);
},
}}
/>
</View>
);
};
export default ScrollingChartWithPointer;

69
src/LineChart/index.tsx
View File

@ -2522,6 +2522,43 @@ export const LineChart = (props: propTypes) => {
}
pointerYLocal = Math.min(...arr);
let left = 0,
top = 0;
if (autoAdjustPointerLabelPosition) {
if (pointerX < pointerLabelWidth / 2) {
left = 7;
} else {
if (
!activatePointersOnLongPress &&
pointerX >
(props.width ||
Dimensions.get('window').width - yAxisLabelWidth - 15) -
pointerLabelWidth / 2
) {
left = -pointerLabelWidth - 4;
} else {
left = -pointerLabelWidth / 2 + 5;
}
}
} else {
left = (pointerRadius || pointerWidth / 2) - 10 + shiftPointerLabelX;
}
if (autoAdjustPointerLabelPosition) {
if (pointerLabelHeight - pointerYLocal > 10) {
top = 10;
} else {
top = -pointerLabelHeight;
}
} else {
top =
(pointerStripUptoDataPoint
? pointerRadius || pointerStripHeight / 2
: -pointerYLocal + 8) -
pointerLabelWidth / 2 +
shiftPointerLabelY;
}
return (
<View
style={{
@ -2573,30 +2610,8 @@ export const LineChart = (props: propTypes) => {
style={[
{
position: 'absolute',
left: autoAdjustPointerLabelPosition
? pointerX < pointerLabelWidth / 2
? 7
: !activatePointersOnLongPress &&
pointerX >
(props.width ||
Dimensions.get('window').width -
yAxisLabelWidth -
15) -
pointerLabelWidth / 2
? -pointerLabelWidth - 4
: pointerLabelWidth / -2 + 5
: (pointerRadius || pointerWidth / 2) -
10 +
shiftPointerLabelX,
top: autoAdjustPointerLabelPosition
? pointerLabelHeight - pointerYLocal > 10
? 10
: -pointerLabelHeight
: (pointerStripUptoDataPoint
? pointerRadius || pointerStripHeight / 2
: -pointerYLocal + 8) -
pointerLabelWidth / 2 +
shiftPointerLabelY,
left: left,
top: top,
marginTop: pointerStripUptoDataPoint
? 0
: containerHeight - pointerStripHeight,
@ -2795,7 +2810,6 @@ export const LineChart = (props: propTypes) => {
2;
setPointerX(z);
let item, y;
setPointerX(z);
item = data[factor];
y =
containerHeight -
@ -2947,7 +2961,7 @@ export const LineChart = (props: propTypes) => {
setResponderActive(false);
setTimeout(() => setPointerX(0), pointerVanishDelay);
}}
onResponderTerminationRequest={(evt) => false}
onResponderTerminationRequest={evt => false}
// onResponderTerminate={evt => {
// console.log('evt...terminate.......',evt);
// }}
@ -3019,7 +3033,6 @@ export const LineChart = (props: propTypes) => {
2;
setPointerX(z);
let item, y;
setPointerX(z);
item = data[factor];
y =
containerHeight -
@ -3170,7 +3183,7 @@ export const LineChart = (props: propTypes) => {
setResponderActive(false);
setTimeout(() => setPointerX(0), pointerVanishDelay);
}}
onResponderTerminationRequest={(evt) => false}
onResponderTerminationRequest={evt => false}
// onResponderTerminate={evt => {
// console.log('evt...terminate.......',evt);
// }}