I Am using react-native-gifted-charts for displaying line chart and creating the data object for given array. and below is my code where i have done for linechart but lines are not displaying
import React, { useEffect, useState } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import arrow_dropdown from '../../../../assets/images/arrow_dropdown.png';
import styles from './Styles';
import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../../components/dimensions/Index';
import { LineChart } from 'react-native-gifted-charts';
import { Dropdown } from 'react-native-element-dropdown';
import { symptomTracker } from '../../../../services/residentServices/HealthTrackerService';
import moment from 'moment';
import { getAuthData } from '../../../../services/PaymentService';
const SymptomsTrack = ({
navigation,
symptom_lookupId,
onUpdateTitles,
patient_lookup_id,
}) => {
const [active, setActive] = useState(false);
const [active1, setActive1] = useState(false);
const [filter, setFilter] = useState('month');
const [placeholder, setPlaceholder] = useState('Monthly');
const [symptomsTitles, setSymptomsTitles] = useState([]);
const [lineData, setLineData] = useState([]);
const d = new Date();
const colors = [
'#2980b9',
'#27ae60',
'#f39c12',
'#e74c3c',
'#8e44ad',
'#2ecc71',
'#d35400',
'#34495e',
];
const filterData = [
{ label: 'Daily', value: 'day' },
{ label: 'Monthly', value: 'month' },
{ label: 'Weekly', value: 'week' },
];
useEffect(() => {
fetchGraphData();
}, [symptom_lookupId, filter]);
const fetchGraphData = async () => {
const { lookupId, type } = await getAuthData();
let data = {};
if (type === 'nurse') {
data = {
from_date: moment(d).subtract(1, 'months').format('YYYY-MM-DD'),
lookup_id: patient_lookup_id,
symto_lookup_id: symptom_lookupId,
to_date: moment(d).format('YYYY-MM-DD'),
type: filter,
};
} else {
data = {
from_date: moment(d).subtract(1, 'months').format('YYYY-MM-DD'),
lookup_id: lookupId,
symto_lookup_id: symptom_lookupId,
to_date: moment(d).format('YYYY-MM-DD'),
type: filter,
};
}
try {
const res = await symptomTracker(data);
const symptomsArray = res?.symptoms?.map(item => ({
symptomTitle: item.title,
lookup_id: item.lookup_id,
}));
onUpdateTitles(symptomsArray);
const groupedSymptomData = {};
res.data.forEach(item => {
if (item.symptoms) {
item.symptoms.forEach(symptom => {
if (!groupedSymptomData[symptom.lookup_id]) {
groupedSymptomData[symptom.lookup_id] = {
data: [],
color: colors[Object.keys(groupedSymptomData).length % colors.length],
};
}
groupedSymptomData[symptom.lookup_id].data.push({
value: symptom.value,
label: new Date(item.modified).toLocaleDateString(),
});
});
}
});
const lineDataUpdated = Object.keys(groupedSymptomData).map(key => ({
data: groupedSymptomData[key].data,
color: groupedSymptomData[key].color,
}));
console.log(JSON.stringify(lineDataUpdated, null, 2)); // Debugging line to check the formatted data
setLineData(lineDataUpdated);
} catch (error) {
console.error('Error:', error);
}
};
return (
<>
<View style={styles.contentContainer}>
<View
style={{
flexDirection: 'column',
justifyContent: 'space-between',
paddingBottom: SCREEN_HEIGHT * 0.01,
}}>
<Dropdown
style={styles.container}
placeholderStyle={styles.container_text}
selectedTextStyle={styles.container_text}
iconStyle={styles.iconStyle}
iconColor={'#1492E6'}
data={filterData}
maxHeight={SCREEN_HEIGHT * 0.5}
labelField="label"
valueField="value"
placeholder={placeholder}
value={filter}
renderRightIcon={() => (
<Image source={arrow_dropdown} style={styles.iconStyle} />
)}
onChange={item => {
setFilter(item.value);
}}
/>
<Text
style={[styles.container_text, { marginLeft: SCREEN_WIDTH * 0.01 }]}>
{moment(d).format('DD MMM YYYY')}
</Text>
</View>
<TouchableOpacity
style={
active
? [styles.container1, { borderColor: '#4191DF' }]
: styles.container1
}
onPress={() => {
setActive(true), setActive1(false);
}}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.container_text}>Compare to</Text>
<Text style={styles.container_text}>Baseline</Text>
</View>
<Text style={styles.count_text}>- -</Text>
</TouchableOpacity>
<TouchableOpacity
style={
active1
? [styles.container1, { borderColor: '#4191DF' }]
: styles.container1
}
onPress={() => {
setActive(false), setActive1(true);
}}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.container_text}>Average</Text>
<Text style={styles.container_text}>Rating</Text>
</View>
<Text style={styles.count_text}>- -</Text>
</TouchableOpacity>
</View>
<View style={{ marginTop: 10, alignSelf: 'center' }}>
{lineData.length > 0 ? (
<LineChart
data={lineData}
height={300}
width={SCREEN_WIDTH * 0.9}
thickness={2}
yAxisTextStyle={{ color: 'black' }}
xAxisTextStyle={{ color: 'black' }}
hideAxesAndRules={false}
showVerticalLines
yAxisTextNumberOfLines={11}
maxValue={10}
minValue={0}
spacing={44}
initialSpacing={0}
textColor1="green"
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
showDataPoints
dataPointsHeight={6}
dataPointsWidth={6}
dataPointsRadius={3}
isAnimated
/>
) : (
<LineChart
data={[{ value: 0, label: '' }]} // Empty data to show axes
height={300}
width={SCREEN_WIDTH * 0.9}
thickness={2}
yAxisTextStyle={{ color: 'black' }}
xAxisTextStyle={{ color: 'black' }}
hideAxesAndRules={false}
showVerticalLines
yAxisTextNumberOfLines={11}
maxValue={10}
minValue={0}
spacing={44}
initialSpacing={0}
textColor1="green"
textShiftY={-2}
textShiftX={-5}
textFontSize={13}
/>
)}
</View>
</>
);
};
export default SymptomsTrack;
Below is the linedata i am genarting from the api respons eiget but lines are not displaying for this below array.
[
{
"data": [
{
"value": 0,
"label": "6/3/2024"
},
{
"value": 5,
"label": "6/19/2024"
},
{
"value": 6,
"label": "6/19/2024"
}
],
"color": "#2980b9"
},
{
"data": [
{
"value": 0,
"label": "6/3/2024"
},
{
"value": 7,
"label": "6/19/2024"
},
{
"value": 3,
"label": "6/19/2024"
}
],
"color": "#27ae60"
},
]