mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-23 17:18:24 +00:00
Added press event to the line chart
This commit is contained in:
Abhinandan Kushwaha
parent
13238898c6
commit
6a2477d473
396
App.js
396
App.js
@ -2,27 +2,12 @@ import React, {useState} from 'react';
|
|||||||
import {TouchableOpacity} from 'react-native';
|
import {TouchableOpacity} from 'react-native';
|
||||||
import {Alert} from 'react-native';
|
import {Alert} from 'react-native';
|
||||||
import {View, Text, StyleSheet} from 'react-native';
|
import {View, Text, StyleSheet} from 'react-native';
|
||||||
import {BarChart, LineChart, PieChart} from './src';
|
import {BarChart, LineChart} from './src';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
// const lineData = [
|
|
||||||
// {value: 40, text: 'Jan', textShiftX: 8, textShiftY: -10},
|
|
||||||
// {value: 80, text: 'Feb'},
|
|
||||||
// {value: 170, text: 'Mar', textFontSize: 16, textColor: 'blue'},
|
|
||||||
// {value: 90, text: 'Apr'},
|
|
||||||
// {value: 190, text: 'May'},
|
|
||||||
// ];
|
|
||||||
// const lineData2 = [
|
|
||||||
// {value: 30, text: 'Jan', textShiftX: 8},
|
|
||||||
// {value: 40, text: 'Feb'},
|
|
||||||
// {value: 60, text: 'Mar'},
|
|
||||||
// {value: 70, text: 'Apr'},
|
|
||||||
// {value: 100, text: 'May'},
|
|
||||||
// ];
|
|
||||||
|
|
||||||
const [toggle, setToggle] = useState(true);
|
const [toggle, setToggle] = useState(true);
|
||||||
|
|
||||||
const data = [
|
const [data, setData] = useState([
|
||||||
{value: 15, label: 'Jan'},
|
{value: 15, label: 'Jan'},
|
||||||
{
|
{
|
||||||
value: 40,
|
value: 40,
|
||||||
@ -34,16 +19,10 @@ const App = () => {
|
|||||||
{
|
{
|
||||||
value: 10,
|
value: 10,
|
||||||
label: 'Mar',
|
label: 'Mar',
|
||||||
showDataPoint: true,
|
|
||||||
dataPointShape: 'rectangular',
|
|
||||||
dataPointHeight: 20,
|
|
||||||
dataPointWidth: 20,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 30,
|
value: 30,
|
||||||
label: 'Apr',
|
label: 'Apr',
|
||||||
// showVerticalLine: true,
|
|
||||||
showDataPoint: true,
|
|
||||||
},
|
},
|
||||||
{value: 20, label: 'May'},
|
{value: 20, label: 'May'},
|
||||||
{value: 40, label: 'Jun'},
|
{value: 40, label: 'Jun'},
|
||||||
@ -57,135 +36,15 @@ const App = () => {
|
|||||||
onPress: () => Alert.alert('Sales in Nov skyrocketed to $48 M'),
|
onPress: () => Alert.alert('Sales in Nov skyrocketed to $48 M'),
|
||||||
},
|
},
|
||||||
{value: 30, label: 'Dec'},
|
{value: 30, label: 'Dec'},
|
||||||
];
|
]);
|
||||||
|
|
||||||
const stackData = [
|
|
||||||
{
|
|
||||||
stacks: [
|
|
||||||
{value: 10, color: 'orange'},
|
|
||||||
{value: 20, color: '#4ABFF4', marginBottom: 2},
|
|
||||||
],
|
|
||||||
label: 'Jan',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
stacks: [
|
|
||||||
{value: 10, color: '#4ABFF4'},
|
|
||||||
{value: 11, color: 'orange', marginBottom: 2},
|
|
||||||
{value: 15, color: '#28B2B3', marginBottom: 2},
|
|
||||||
],
|
|
||||||
label: 'Mar',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
stacks: [
|
|
||||||
{value: 14, color: 'orange'},
|
|
||||||
{value: 18, color: '#4ABFF4', marginBottom: 2},
|
|
||||||
],
|
|
||||||
label: 'Feb',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
stacks: [
|
|
||||||
{value: 7, color: '#4ABFF4'},
|
|
||||||
{value: 11, color: 'orange', marginBottom: 2},
|
|
||||||
{value: 10, color: '#28B2B3', marginBottom: 2},
|
|
||||||
],
|
|
||||||
label: 'Mar',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const barData1 = [
|
|
||||||
{value: 250, label: 'M'},
|
|
||||||
{value: 500, label: 'T', frontColor: '#177AD5'},
|
|
||||||
{value: 745, label: 'W', frontColor: '#177AD5'},
|
|
||||||
{value: 320, label: 'T'},
|
|
||||||
{value: 600, label: 'F', frontColor: '#177AD5'},
|
|
||||||
{value: 256, label: 'S'},
|
|
||||||
{value: 300, label: 'S'},
|
|
||||||
];
|
|
||||||
|
|
||||||
const lineData1 = [
|
|
||||||
{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 ldata = [
|
|
||||||
{value: 15, label: '15'},
|
|
||||||
{value: 30, label: '30'},
|
|
||||||
{value: 26, label: '26'},
|
|
||||||
{value: 40, label: '40'},
|
|
||||||
];
|
|
||||||
|
|
||||||
// const MyComponent = () => {
|
|
||||||
// return (
|
|
||||||
// <View style={{backgroundColor: 'yellow'}}>
|
|
||||||
// <Text>Hello</Text>
|
|
||||||
// </View>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
const barData = [
|
|
||||||
{value: 230, label: 'Jan', frontColor: '#4ABFF4'},
|
|
||||||
{value: 180, label: 'Feb', frontColor: '#79C3DB'},
|
|
||||||
{value: 195, label: 'Mar', frontColor: '#28B2B3'},
|
|
||||||
{value: 250, label: 'Apr', frontColor: '#4ADDBA'},
|
|
||||||
{value: 320, label: 'May', frontColor: '#91E3E3'},
|
|
||||||
];
|
|
||||||
// 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},
|
|
||||||
// ];
|
|
||||||
const lineData = [
|
|
||||||
{value: 0},
|
|
||||||
{value: 20},
|
|
||||||
{value: 18},
|
|
||||||
{value: 40},
|
|
||||||
{value: 36},
|
|
||||||
{value: 60},
|
|
||||||
{value: 54},
|
|
||||||
{value: 85},
|
|
||||||
];
|
|
||||||
const pieData = [
|
|
||||||
{value: 70, color: '#177AD5' /*text: '54%'*/},
|
|
||||||
{value: 30, color: 'lightgray' /*text: '30%'*/},
|
|
||||||
// {value: 20, color: '#ED6665' /*text: '26%'*/},
|
|
||||||
];
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
marginTop: 100,
|
marginTop: 100,
|
||||||
paddingVertical: 50,
|
paddingVertical: 50,
|
||||||
}}>
|
}}>
|
||||||
{/* <LineChart data={ldata} /> */}
|
{!toggle ? (
|
||||||
|
|
||||||
{/* <PieChart
|
|
||||||
donut
|
|
||||||
innerRadius={80}
|
|
||||||
data={pieData}
|
|
||||||
centerLabelComponent={() => {
|
|
||||||
return <Text style={{fontSize: 30}}>70%</Text>;
|
|
||||||
}}
|
|
||||||
/> */}
|
|
||||||
{toggle ? (
|
|
||||||
<BarChart
|
<BarChart
|
||||||
isThreeD
|
isThreeD
|
||||||
key={'xyz'}
|
key={'xyz'}
|
||||||
@ -271,21 +130,54 @@ const App = () => {
|
|||||||
) : (
|
) : (
|
||||||
<LineChart
|
<LineChart
|
||||||
// width={150}
|
// width={150}
|
||||||
|
// hideDataPoints1
|
||||||
|
// spacing={30}
|
||||||
data={data}
|
data={data}
|
||||||
// areaChart
|
// data2={lineData1}
|
||||||
|
areaChart
|
||||||
initialSpacing={10}
|
initialSpacing={10}
|
||||||
|
onPress={(item, index) => {
|
||||||
|
console.log('index-->', index);
|
||||||
|
setData(data => {
|
||||||
|
item.dataPointColor = 'green';
|
||||||
|
item.dataPointRadius = 6;
|
||||||
|
item.dataPointText = item.value;
|
||||||
|
// item.dataPointShape = 'rectangular';
|
||||||
|
// item.dataPointWidth = 10;
|
||||||
|
// item.dataPointHeight = 10;
|
||||||
|
data[index] = item;
|
||||||
|
console.log('data------.....', data);
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
// disableScroll
|
||||||
|
pressEnabled
|
||||||
|
// showDataPointOnPress
|
||||||
|
showStripOnPress
|
||||||
|
showTextOnPress
|
||||||
|
textShiftY={-10}
|
||||||
|
textShiftX={-5}
|
||||||
|
textFontSize={18}
|
||||||
|
textColor={'green'}
|
||||||
|
stripWidth={1}
|
||||||
|
stripHeight={200}
|
||||||
|
// stripHeight={200}
|
||||||
|
stripOpacity={0.4}
|
||||||
curved
|
curved
|
||||||
isAnimated
|
isAnimated
|
||||||
showGradient
|
animationDuration={2000}
|
||||||
cappedBars
|
// animationDuration={2000}
|
||||||
|
// dataPointsShape="rectangular"
|
||||||
|
// showGradient
|
||||||
color={'rgb(78, 0, 142)'}
|
color={'rgb(78, 0, 142)'}
|
||||||
yAxisColor={'rgb(78, 0, 142)'}
|
yAxisColor={'rgb(78, 0, 142)'}
|
||||||
xAxisColor={'rgb(78, 0, 142)'}
|
xAxisColor={'rgb(78, 0, 142)'}
|
||||||
dataPointsColor={'rgb(78, 0, 142)'}
|
dataPointsColor={'rgb(78, 0, 142)'}
|
||||||
dataPointsWidth={1}
|
dataPointsWidth={8}
|
||||||
dataPointsHeight={1}
|
dataPointsHeight={8}
|
||||||
xAxisThickness={3}
|
xAxisThickness={3}
|
||||||
yAxisThickness={3}
|
yAxisThickness={3}
|
||||||
|
dataPointsRadius={4}
|
||||||
yAxisTextStyle={{color: 'rgb(78, 0, 142)'}}
|
yAxisTextStyle={{color: 'rgb(78, 0, 142)'}}
|
||||||
startFillColor={'rgb(200, 100, 244)'}
|
startFillColor={'rgb(200, 100, 244)'}
|
||||||
startOpacity={0.9}
|
startOpacity={0.9}
|
||||||
@ -299,210 +191,6 @@ const App = () => {
|
|||||||
style={{marginTop: 100, alignSelf: 'center'}}>
|
style={{marginTop: 100, alignSelf: 'center'}}>
|
||||||
<Text>Line Chart</Text>
|
<Text>Line Chart</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
{/* <BarChart
|
|
||||||
width={340}
|
|
||||||
rotateLabel
|
|
||||||
barWidth={12}
|
|
||||||
spacing={40}
|
|
||||||
noOfSections={4}
|
|
||||||
barBorderRadius={6}
|
|
||||||
stackData={stackData}
|
|
||||||
/> */}
|
|
||||||
{/* <BarChart
|
|
||||||
frontColor={'#177AD5'}
|
|
||||||
barWidth={22}
|
|
||||||
data={[{value: 15}, {value: 30}, {value: 26}, {value: 40}]}
|
|
||||||
/> */}
|
|
||||||
{/* <LineChart
|
|
||||||
curved
|
|
||||||
initialSpacing={0}
|
|
||||||
data={lineData}
|
|
||||||
spacing={30}
|
|
||||||
hideDataPoints
|
|
||||||
thickness={5}
|
|
||||||
hideRules
|
|
||||||
hideYAxisText
|
|
||||||
yAxisColor="#0BA5A4"
|
|
||||||
showVerticalLines
|
|
||||||
verticalLinesColor="rgba(14,164,164,0.5)"
|
|
||||||
xAxisColor="#0BA5A4"
|
|
||||||
color="#0BA5A4"
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* <LineChart
|
|
||||||
areaChart
|
|
||||||
hideDataPoints
|
|
||||||
isAnimated
|
|
||||||
animationDuration={1200}
|
|
||||||
startFillColor="#0BA5A4"
|
|
||||||
startOpacity={1}
|
|
||||||
endOpacity={0.3}
|
|
||||||
initialSpacing={0}
|
|
||||||
data={lineData}
|
|
||||||
spacing={30}
|
|
||||||
thickness={5}
|
|
||||||
hideRules
|
|
||||||
hideYAxisText
|
|
||||||
yAxisColor="#0BA5A4"
|
|
||||||
showVerticalLines
|
|
||||||
verticalLinesColor="rgba(14,164,164,0.5)"
|
|
||||||
xAxisColor="#0BA5A4"
|
|
||||||
color="#0BA5A4"
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* <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}
|
|
||||||
textShiftY={-2}
|
|
||||||
textShiftX={-5}
|
|
||||||
textFontSize={13}
|
|
||||||
/> */}
|
|
||||||
{/* <View style={{marginLeft: 20}}>
|
|
||||||
<BarChart
|
|
||||||
barWidth={22}
|
|
||||||
horizontal
|
|
||||||
yAxisAtTop
|
|
||||||
// spacing={16}
|
|
||||||
// height={260}
|
|
||||||
noOfSections={3}
|
|
||||||
barBorderRadius={4}
|
|
||||||
frontColor="lightgray"
|
|
||||||
data={barData1}
|
|
||||||
yAxisThickness={0}
|
|
||||||
xAxisThickness={0}
|
|
||||||
// horizontal
|
|
||||||
/>
|
|
||||||
</View> */}
|
|
||||||
|
|
||||||
{/* <View style={{marginLeft: 40}}>
|
|
||||||
<LineChart
|
|
||||||
data={data}
|
|
||||||
hideDataPoints
|
|
||||||
areaChart
|
|
||||||
curved
|
|
||||||
color="rgb(220,140,140)"
|
|
||||||
startFillColor="rgb(220,140,140)"
|
|
||||||
endFillColor="rgba(250,240,240)"
|
|
||||||
startOpacity={0.9}
|
|
||||||
endOpacity={0.3}
|
|
||||||
noOfSections={3}
|
|
||||||
// dataPointsShape='rectangular'
|
|
||||||
// dataPointsHeight={12}
|
|
||||||
// dataPointsWidth={12}
|
|
||||||
/>
|
|
||||||
</View> */}
|
|
||||||
|
|
||||||
{/* <BarChart
|
|
||||||
showGradient
|
|
||||||
// isThreeD
|
|
||||||
// isAnimated
|
|
||||||
// width={300}
|
|
||||||
gradientColor="lightgray"
|
|
||||||
// backgroundColor="yellow"
|
|
||||||
hideRules
|
|
||||||
// yAxisThickness={0}
|
|
||||||
roundedTop
|
|
||||||
showYAxisIndices
|
|
||||||
xAxisThickness={0}
|
|
||||||
spacing={30}
|
|
||||||
noOfSections={4}
|
|
||||||
// hideAxesAndRules
|
|
||||||
frontColor="#eeeeee"
|
|
||||||
barBorderRadius={10}
|
|
||||||
data={data}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* <View
|
|
||||||
style={{
|
|
||||||
// flex: 1,
|
|
||||||
// backgroundColor: 'pink',
|
|
||||||
width: 300,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}>
|
|
||||||
<BarChart
|
|
||||||
width={300}
|
|
||||||
rotateLabel
|
|
||||||
// isAnimated
|
|
||||||
horizontal
|
|
||||||
barWidth={8}
|
|
||||||
spacing={40}
|
|
||||||
noOfSections={4}
|
|
||||||
initialSpacing={50}
|
|
||||||
barBorderRadius={20}
|
|
||||||
stackData={stackData}
|
|
||||||
/>
|
|
||||||
</View> */}
|
|
||||||
|
|
||||||
{/* <Text>Hello</Text> */}
|
|
||||||
{/* <LineChart data={data} /> */}
|
|
||||||
{/* <PieChart
|
|
||||||
showText
|
|
||||||
showTextBackground
|
|
||||||
showValuesAsLabels
|
|
||||||
textSize={14}
|
|
||||||
data={data}
|
|
||||||
/> */}
|
|
||||||
{/* <LineChart data={data} curved /> */}
|
|
||||||
{/* <BarChart
|
|
||||||
data={data}
|
|
||||||
frontColor="lightgray"
|
|
||||||
cappedBars
|
|
||||||
capThickness={2}
|
|
||||||
capColor="gray"
|
|
||||||
/> */}
|
|
||||||
{/* <BarChart data={data} horizontal noOfSections={5} /> */}
|
|
||||||
{/* <LineChart
|
|
||||||
xAxisColor="red"
|
|
||||||
xAxisThickness={2}
|
|
||||||
yAxisColor="purple"
|
|
||||||
yAxisThickness={0.5}
|
|
||||||
yAxisTextStyle={{color: 'blue', fontSize: 10}}
|
|
||||||
isAnimated
|
|
||||||
animationDuration={1200}
|
|
||||||
height={300}
|
|
||||||
rotateLabel
|
|
||||||
// thickness={1}
|
|
||||||
dataPointsHeight={8}
|
|
||||||
dataPointsWidth={8}
|
|
||||||
animateTogether
|
|
||||||
// textColor="skyblue"
|
|
||||||
// dataPointsShape="rectangular"
|
|
||||||
spacing={84}
|
|
||||||
initialSpacing={4}
|
|
||||||
// areaChart
|
|
||||||
color1="skyblue"
|
|
||||||
color2="orange"
|
|
||||||
data={[...lineData]}
|
|
||||||
startFillColor1="skyblue"
|
|
||||||
endOpacity1={0.1}
|
|
||||||
endFillColor1="skyblue"
|
|
||||||
startFillColor2="orange"
|
|
||||||
endFillColor2="white"
|
|
||||||
curved
|
|
||||||
// hideRules
|
|
||||||
showVerticalRules
|
|
||||||
// showYAxisIndices
|
|
||||||
// showXAxisIndices
|
|
||||||
data2={[...lineData2]}
|
|
||||||
/> */}
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -177,6 +177,46 @@ type referenceConfigType = {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### onPress and strip related props
|
||||||
|
|
||||||
|
Line or Area charts can be made interactive by allowing users to press on the chart and highlight that particular data point. For example-
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
To achieve this the `pressEnabled` props must be set to true. In addition, use below props to handle the press event.
|
||||||
|
|
||||||
|
| Prop | Type | Description | Default value |
|
||||||
|
| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- |
|
||||||
|
| pressEnabled | Boolean | If set true, allows users to press on the chart (press event can be then handled using the `onPress` prop) | false |
|
||||||
|
| showDataPointOnPress | Boolean | If set true, it shows the data point corresponding to the pressed area of the chart | false |
|
||||||
|
| showStripOnPress | Boolean | If set true, it shows a vertical strip corresponding to the pressed area of the chart | false |
|
||||||
|
| showTextOnPress | Boolean | If set true, it shows the data point text corresponding to the pressed area of the chart | false |
|
||||||
|
| stripHeight | number | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | height of the data point |
|
||||||
|
| stripWidth | number | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | 2 |
|
||||||
|
| stripColor | ColorValue | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | color of the line |
|
||||||
|
| stripOpacity | number | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | (startOpacity+endOpacity)/2 |
|
||||||
|
| onPress | Function | The callback function that handles the press event. `item` and `index` are received as props | \_ |
|
||||||
|
| unFocusOnPressOut | Boolean | If set true, it unselects/unfocuses the focused/selected data point | true |
|
||||||
|
| delayBeforeUnFocus | number | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | 300 |
|
||||||
|
|
||||||
|
#### Example of onPress :
|
||||||
|
|
||||||
|
```js
|
||||||
|
onPress={(item, index) => {
|
||||||
|
setData(data => {
|
||||||
|
item.dataPointColor = 'green';
|
||||||
|
item.dataPointRadius = 6;
|
||||||
|
item.dataPointText = item.value;
|
||||||
|
data[index] = item;
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on th onPress event, the data must be a state variable.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Props for Area Chart
|
### Props for Area Chart
|
||||||
|
|
||||||
| Prop | Type | Description | Default value |
|
| Prop | Type | Description | Default value |
|
||||||
@ -203,3 +243,7 @@ type referenceConfigType = {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
|||||||
@ -50,6 +50,17 @@ type propTypes = {
|
|||||||
hideRules?: Boolean;
|
hideRules?: Boolean;
|
||||||
rulesColor?: ColorValue;
|
rulesColor?: ColorValue;
|
||||||
rulesThickness?: number;
|
rulesThickness?: number;
|
||||||
|
pressEnabled?: Boolean;
|
||||||
|
showDataPointOnPress?: Boolean;
|
||||||
|
showStripOnPress?: Boolean;
|
||||||
|
showTextOnPress?: Boolean;
|
||||||
|
stripHeight?: number;
|
||||||
|
stripWidth?: number;
|
||||||
|
stripColor?: ColorValue | String | any;
|
||||||
|
stripOpacity?: number;
|
||||||
|
onPress?: Function;
|
||||||
|
unFocusOnPressOut?: Boolean;
|
||||||
|
delayBeforeUnFocus?: number;
|
||||||
|
|
||||||
rulesType?: String;
|
rulesType?: String;
|
||||||
dashWidth?: number;
|
dashWidth?: number;
|
||||||
@ -201,6 +212,7 @@ export const LineChart = (props: propTypes) => {
|
|||||||
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 [selectedIndex, setSelectedIndex] = useState(-1);
|
||||||
const containerHeight = props.height || 200;
|
const containerHeight = props.height || 200;
|
||||||
const noOfSections = props.noOfSections || 10;
|
const noOfSections = props.noOfSections || 10;
|
||||||
const data = useMemo(() => props.data || [], [props.data]);
|
const data = useMemo(() => props.data || [], [props.data]);
|
||||||
@ -701,6 +713,18 @@ export const LineChart = (props: propTypes) => {
|
|||||||
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
|
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
|
||||||
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
|
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
|
||||||
|
|
||||||
|
const pressEnabled = props.pressEnabled || false;
|
||||||
|
const showDataPointOnPress = props.showDataPointOnPress || false;
|
||||||
|
const showStripOnPress = props.showStripOnPress || false;
|
||||||
|
const showTextOnPress = props.showTextOnPress || false;
|
||||||
|
const stripHeight = props.stripHeight;
|
||||||
|
const stripWidth = props.stripWidth === 0 ? 0 : props.stripWidth || 2;
|
||||||
|
const stripColor = props.stripColor || color1;
|
||||||
|
const stripOpacity = props.stripOpacity || (startOpacity1 + endOpacity1) / 2;
|
||||||
|
const unFocusOnPressOut = props.unFocusOnPressOut === false ? false : true;
|
||||||
|
const delayBeforeUnFocus =
|
||||||
|
props.delayBeforeUnFocus === 0 ? 0 : props.delayBeforeUnFocus || 300;
|
||||||
|
|
||||||
const defaultReferenceConfig = {
|
const defaultReferenceConfig = {
|
||||||
thickness: rulesThickness,
|
thickness: rulesThickness,
|
||||||
width: (props.width || totalWidth) + 11,
|
width: (props.width || totalWidth) + 11,
|
||||||
@ -1086,20 +1110,104 @@ export const LineChart = (props: propTypes) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onStripPress = (item, index) => {
|
||||||
|
setSelectedIndex(index);
|
||||||
|
if (props.onPress) {
|
||||||
|
props.onPress(item, index);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const renderDataPoints = (
|
const renderDataPoints = (
|
||||||
dataForRender,
|
dataForRender,
|
||||||
dataPointsShape,
|
dataPtsShape,
|
||||||
dataPointsWidth,
|
dataPtsWidth,
|
||||||
dataPointsHeight,
|
dataPtsHeight,
|
||||||
dataPointsColor,
|
dataPtsColor,
|
||||||
dataPointsRadius,
|
dataPtsRadius,
|
||||||
textColor,
|
textColor,
|
||||||
textFontSize,
|
textFontSize,
|
||||||
) => {
|
) => {
|
||||||
return dataForRender.map((item: itemType, index: number) => {
|
return dataForRender.map((item: itemType, index: number) => {
|
||||||
|
let dataPointsShape,
|
||||||
|
dataPointsWidth,
|
||||||
|
dataPointsHeight,
|
||||||
|
dataPointsColor,
|
||||||
|
dataPointsRadius,
|
||||||
|
text;
|
||||||
|
if (index === selectedIndex) {
|
||||||
|
dataPointsShape = item.dataPointShape || dataPtsShape;
|
||||||
|
dataPointsWidth = item.dataPointWidth || dataPtsWidth;
|
||||||
|
dataPointsHeight = item.dataPointHeight || dataPtsHeight;
|
||||||
|
dataPointsColor = item.dataPointColor || dataPtsColor;
|
||||||
|
dataPointsRadius = item.dataPointRadius || dataPtsRadius;
|
||||||
|
if (showTextOnPress) {
|
||||||
|
text = item.dataPointText;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dataPointsShape = dataPtsShape;
|
||||||
|
dataPointsWidth = dataPtsWidth;
|
||||||
|
dataPointsHeight = dataPtsHeight;
|
||||||
|
dataPointsColor = dataPtsColor;
|
||||||
|
dataPointsRadius = dataPtsRadius;
|
||||||
|
if (showTextOnPress) {
|
||||||
|
text = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
// console.log('comes in');
|
// console.log('comes in');
|
||||||
if (dataPointsShape === 'rectangular') {
|
|
||||||
return (
|
return (
|
||||||
|
<Fragment key={index}>
|
||||||
|
{pressEnabled ? (
|
||||||
|
<>
|
||||||
|
{unFocusOnPressOut ? (
|
||||||
|
<Rect
|
||||||
|
onPressIn={() => onStripPress(item, index)}
|
||||||
|
onPressOut={() =>
|
||||||
|
setTimeout(() => setSelectedIndex(-1), delayBeforeUnFocus)
|
||||||
|
}
|
||||||
|
x={initialSpacing + (spacing * index - spacing / 2)}
|
||||||
|
y={8}
|
||||||
|
width={spacing}
|
||||||
|
height={containerHeight - 0}
|
||||||
|
fill={'none'}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Rect
|
||||||
|
onPress={() => onStripPress(item, index)}
|
||||||
|
x={initialSpacing + (spacing * index - spacing / 2)}
|
||||||
|
y={8}
|
||||||
|
width={spacing}
|
||||||
|
height={containerHeight - 0}
|
||||||
|
fill={'none'}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{index === selectedIndex && showStripOnPress ? (
|
||||||
|
<Rect
|
||||||
|
x={
|
||||||
|
initialSpacing / 2 +
|
||||||
|
(spacing * index - stripWidth) +
|
||||||
|
stripWidth / 2 +
|
||||||
|
1
|
||||||
|
}
|
||||||
|
y={
|
||||||
|
stripHeight
|
||||||
|
? containerHeight - stripHeight + 8
|
||||||
|
: containerHeight -
|
||||||
|
dataPointsHeight / 2 +
|
||||||
|
15 -
|
||||||
|
(item.value * containerHeight) / maxValue
|
||||||
|
}
|
||||||
|
width={stripWidth}
|
||||||
|
height={
|
||||||
|
stripHeight ||
|
||||||
|
containerHeight - dataPointsHeight / 2 + 10 - 0
|
||||||
|
}
|
||||||
|
opacity={stripOpacity}
|
||||||
|
fill={stripColor}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
{dataPointsShape === 'rectangular' ? (
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
<Rect
|
<Rect
|
||||||
x={initialSpacing - dataPointsWidth + spacing * index}
|
x={initialSpacing - dataPointsWidth + spacing * index}
|
||||||
@ -1111,9 +1219,16 @@ export const LineChart = (props: propTypes) => {
|
|||||||
}
|
}
|
||||||
width={dataPointsWidth}
|
width={dataPointsWidth}
|
||||||
height={dataPointsHeight}
|
height={dataPointsHeight}
|
||||||
fill={dataPointsColor}
|
fill={
|
||||||
|
showDataPointOnPress
|
||||||
|
? index === selectedIndex
|
||||||
|
? dataPointsColor
|
||||||
|
: 'none'
|
||||||
|
: dataPointsColor
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{item.dataPointText && (
|
{text ? (
|
||||||
|
!showTextOnPress || index === selectedIndex ? (
|
||||||
<CanvasText
|
<CanvasText
|
||||||
fill={item.textColor || textColor}
|
fill={item.textColor || textColor}
|
||||||
fontSize={item.textFontSize || textFontSize}
|
fontSize={item.textFontSize || textFontSize}
|
||||||
@ -1121,7 +1236,10 @@ export const LineChart = (props: propTypes) => {
|
|||||||
initialSpacing -
|
initialSpacing -
|
||||||
dataPointsWidth +
|
dataPointsWidth +
|
||||||
spacing * index +
|
spacing * index +
|
||||||
(item.textShiftX || props.textShiftX || props.textShiftX || 0)
|
(item.textShiftX ||
|
||||||
|
props.textShiftX ||
|
||||||
|
props.textShiftX ||
|
||||||
|
0)
|
||||||
}
|
}
|
||||||
y={
|
y={
|
||||||
containerHeight -
|
containerHeight -
|
||||||
@ -1130,23 +1248,31 @@ export const LineChart = (props: propTypes) => {
|
|||||||
(item.value * containerHeight) / maxValue +
|
(item.value * containerHeight) / maxValue +
|
||||||
(item.textShiftY || props.textShiftY || 0)
|
(item.textShiftY || props.textShiftY || 0)
|
||||||
}>
|
}>
|
||||||
{item.dataPointText}
|
{text}
|
||||||
</CanvasText>
|
</CanvasText>
|
||||||
)}
|
) : null
|
||||||
|
) : null}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
) : (
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
<Circle
|
<Circle
|
||||||
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
|
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
|
||||||
cy={
|
cy={
|
||||||
containerHeight + 10 - (item.value * containerHeight) / maxValue
|
containerHeight +
|
||||||
|
10 -
|
||||||
|
(item.value * containerHeight) / maxValue
|
||||||
}
|
}
|
||||||
r={dataPointsRadius}
|
r={dataPointsRadius}
|
||||||
fill={dataPointsColor}
|
fill={
|
||||||
|
showDataPointOnPress
|
||||||
|
? index === selectedIndex
|
||||||
|
? dataPointsColor
|
||||||
|
: 'none'
|
||||||
|
: dataPointsColor
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{item.dataPointText && (
|
{text ? (
|
||||||
|
!showTextOnPress || index === selectedIndex ? (
|
||||||
<CanvasText
|
<CanvasText
|
||||||
fill={item.textColor || textColor}
|
fill={item.textColor || textColor}
|
||||||
fontSize={item.textFontSize || textFontSize}
|
fontSize={item.textFontSize || textFontSize}
|
||||||
@ -1163,8 +1289,11 @@ export const LineChart = (props: propTypes) => {
|
|||||||
(item.value * containerHeight) / maxValue +
|
(item.value * containerHeight) / maxValue +
|
||||||
(item.textShiftY || props.textShiftY || 0)
|
(item.textShiftY || props.textShiftY || 0)
|
||||||
}>
|
}>
|
||||||
{item.dataPointText}
|
{text}
|
||||||
</CanvasText>
|
</CanvasText>
|
||||||
|
) : null
|
||||||
|
) : null}
|
||||||
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user