import React, {useState} from 'react'; import {View, Text, TouchableWithoutFeedback} from 'react-native'; import { heightPercentageToDP as hp, widthPercentageToDP as wp, } from 'react-native-responsive-screen'; import {LineChart} from 'react-native-chart-kit'; const Services = () => { const [selectedData, setSelectedData] = useState(null); const hideSelectedData = () => { setTimeout(() => { setSelectedData(null); }, 3000); }; const APIdata = { output: { brentGraph: [ { date: '19-Dec-2023', iceBrentCrudeOil: 79.23, differenceValue: null, }, { date: '20-Dec-2023', iceBrentCrudeOil: 79.7, differenceValue: 0.47, }, { date: '21-Dec-2023', iceBrentCrudeOil: 79.39, differenceValue: -0.31, }, { date: '22-Dec-2023', iceBrentCrudeOil: 79.07, differenceValue: -0.32, }, { date: '26-Dec-2023', iceBrentCrudeOil: 81.07, differenceValue: 2, }, { date: '27-Dec-2023', iceBrentCrudeOil: 79.65, differenceValue: -1.42, }, { date: '28-Dec-2023', iceBrentCrudeOil: 78.39, differenceValue: -1.26, }, { date: '29-Dec-2023', iceBrentCrudeOil: 80.04, differenceValue: -1.35, }, { date: '02-Jan-2024', iceBrentCrudeOil: 85.89, differenceValue: -1.15, }, { date: '03-Jan-2024', iceBrentCrudeOil: 78.25, differenceValue: 2.36, }, { date: '04-Jan-2024', iceBrentCrudeOil: 77.59, differenceValue: -0.66, }, { date: '05-Jan-2024', iceBrentCrudeOil: 78.76, differenceValue: 1.17, }, { date: '08-Jan-2024', iceBrentCrudeOil: 76.12, differenceValue: -2.64, }, { date: '09-Jan-2024', iceBrentCrudeOil: 77.59, differenceValue: 1.47, }, { date: '10-Jan-2024', iceBrentCrudeOil: 76.8, differenceValue: -0.79, }, { date: '11-Jan-2024', iceBrentCrudeOil: 78.48, differenceValue: 1.68, }, { date: '12-Jan-2024', iceBrentCrudeOil: 78.53, differenceValue: 0.05, }, { date: '15-Jan-2024', iceBrentCrudeOil: 78.16, differenceValue: -0.37, }, { date: '16-Jan-2024', iceBrentCrudeOil: 78.73, differenceValue: 0.57, }, { date: '17-Jan-2024', iceBrentCrudeOil: 77.24, differenceValue: -1.49, }, ], minIceBrentCrudeOil: '75.89', maxIceBrentCrudeOil: '81.07', changeBrentOil: '-1.018', }, errors: [ { status: 'Success', code: '0', detail: '129', }, ], }; const originalLabels = APIdata.output.brentGraph.map(entry => entry.date); const stepSize = Math.ceil(originalLabels.length / 4); const labels = originalLabels.filter((_, index) => index % stepSize === 0); const stepSizeNew = 1; const labelsNew = originalLabels.filter( (_, index) => index % stepSizeNew === 0, ); const data = { labels: labels, datasets: [ { data: APIdata.output.brentGraph.map(entry => entry.iceBrentCrudeOil), }, ], }; const handleDataPointClick = ({value, dataset}) => { const index = dataset.data.indexOf(value); const selectedDate = labelsNew[index]; const selectedValue = value.toFixed(2); setSelectedData({date: selectedDate, value: selectedValue}); hideSelectedData(); }; return ( <View> <View style={{alignSelf: 'center', alignItems: 'center'}}> <Text>Gas Oil</Text> <Text>Showing report for the last 32 days </Text> </View> <View style={{alignItems: 'center'}}> <LineChart data={data} width={wp('95%')} height={hp('25%')} chartConfig={{ backgroundGradientFrom: '#fb8c00', backgroundGradientTo: '#ffa726', color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`, labelColor: () => `black`, }} bezier onDataPointClick={handleDataPointClick} style={{ marginVertical: hp('1%'), borderRadius: hp('0.5%'), }} /> </View> {/* Popup card when data is selected */} {selectedData && ( <TouchableWithoutFeedback onPress={() => setSelectedData(null)}> <View style={{ position: 'absolute', top: hp('5.5%'), right: wp('2.9%'), backgroundColor: 'white', padding: hp('1%'), borderRadius: hp('0.5%'), }}> <Text style={{fontSize: hp('1%')}}>Date: {selectedData.date}</Text> <Text style={{fontSize: hp('1%')}}> Value: {selectedData.value} </Text> </View> </TouchableWithoutFeedback> )} </View> ); }; export default Services; |
0 Comments