Hi,
I need help with this ReactJS application in making a Pie chart.
So there are three components namely: Devdropdown , the main one and two child ones are Tables.jsx and Chart.jsx.
So, the table got displayed while passing props from the parent component. And I wanted the same way for the Pie Chart to occur as well. The scene is, the user selects an option from the dropdown which enables them to see the table data along with the Pie Chart. I am having issues with the Pie Chart. At times it is being displayed, at times it isn't. Here are the three jsx files:
What I have tried:
Devdropdown.jsx
import React, { useState, useEffect, useMemo } from "react";
import Tables from "./Tables";
import Chart from "./Chart";
const Devdropdown = () => {
const [devices, setDevices] = useState([{}]);
const [selected, setSelected] = useState();
const url = "..";
useEffect(() => {
async function getDevices() {
const response = await fetch(url);
const body = await response.json();
setDevices(body.data);
}
getDevices();
}, []);
const handleChange = (e) => {
e.preventDefault();
setSelected(e.target.value);
};
const deviceMap = useMemo(() => {
const grouped = new Map();
for (const device of devices) {
const currDeviceArr = grouped.get(device.device_id) ?? [];
currDeviceArr.push(device);
grouped.set(device.device_id, currDeviceArr);
}
return grouped;
}, [devices]);
console.log(deviceMap);
return (
<react.fragment>
<div>
<div>
<h1>Aircraft {selected}</h1>
<select
value="{selected}
" onchange="{handleChange}
" placeholder="select an option"
="">
{devices
? Array.from(deviceMap.keys(), (device_id) => (
{device_id}
))
: null}
<br>
<br>
<tables data="{deviceMap.get(selected)}">
</div>
<div>
<chart chartdata="{deviceMap.get(selected)}">
</div>
</div>
);
};
Tables.jsx
import React from "react";
import Table from "react-bootstrap/Table";
const Tables = ({ data = [] }) => {
return (
{data.map((device, i) => (
))}
<table><thead> <tr> <th>Timestamp</th> <th>Location</th> </tr> </thead> <tbody><tr> <td>{device.timestamp}</td> <td>{device.location}</td> </tr></tbody> </table>
);
};
Charts.jsx
import React from "react";
import { PieChart, Pie, Cell } from "recharts";
const Chart = ({ chartData = [] }) => {
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
return (
<piechart width="{700}" height="{700}">
<pie
data="{chartData.map((device)" ==""> device.location)}
dataKey="locations"
cx={120}
cy={200}
innerRadius={60}
outerRadius={80}
fill="#8884d8"
paddingAngle={5}
>
{chartData.map((entry, index) => (
<cell key="{`cell-${index}`}" fill="{COLORS[index" %="" colors.length]}="">
))}
);
};
export default Chart;
Here is how deviceMap looks like in the console. As you can see, I have already clicked on an option and the table details are also present. The same way , a Pie Chart should also be there with the Locations . If you guys could spare your time and tell me what should be done.
I have console logged the deviceMap object.
Map(5) {'D-1567' => Array(5), 'D-1568' => Array(5), 'D-1569' => Array(5), 'D-1570' => Array(1), 'D-1571' => Array(1)}
[[Entries]]
0
:
{"D-1567" => Array(5)}
key
:
"D-1567"
value
:
Array(5)
0
:
{id: 1, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:35:00.000Z', location: 'L1'}
1
:
{id: 2, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:40:00.000Z', location: 'L1'}
2
:
{id: 3, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:45:00.000Z', location: 'L1'}
3
:
{id: 4, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:50:00.000Z', location: 'L1'}
4
:
{id: 5, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:55:00.000Z', location: 'L2'}
length
:
5
[[Prototype]]
:
Array(0)
1
:
{"D-1568" => Array(5)}
2
:
{"D-1569" => Array(5)}
3
:
{"D-1570" => Array(1)}
4
:
{"D-1571" => Array(1)}