I have the code that receives through socketio a json type file where the data arrives, the idea is to make a visualization with RadarChart (this works correctly), the problem is that I can only visualize 1 single element while I should be able to do it dynamically and I don't know how to do it, attached code:
Functional Code
import io from "socket.io-client";
import { useEffect } from "react";
import React from 'react';
import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
require("./styles.css");
const socket = io.connect("http://localhost:80/socket");
Then to make the connection I have the following code (which also works correctly)
var data = [{'subject': 'a.DiXDQxpPWP7gz4LT', 'A': 25, 'fullMark': 100}, {'subject': 'a.I6ZFAmhSZ4KY2HU1', 'A': 11, 'fullMark': 100}, {'subject': 'a.2AmxcttO04AznGqW', 'A': 18, 'fullMark': 100}, {'subject': 'a.ZBp7HJqHo6TxLbvf', 'A': 13, 'fullMark': 100}, {'subject': 'a.JpOUH2WTEDkRzwoh', 'A': 5, 'fullMark': 100}, {'subject': 'a.8MyES7LycStyQFll', 'A': 9, 'fullMark': 100}];
var renderizado=radar([data]);
console.log(renderizado);
useEffect(() => {
socket.on("distribution", (data) => {
console.log(data);
data = [{'subject': 'a.DiXDQxpPWP7gz4LT', 'A': 25, 'fullMark': 100}, {'subject': 'a.I6ZFAmhSZ4KY2HU1', 'A': 11, 'fullMark': 100}, {'subject': 'a.2AmxcttO04AznGqW', 'A': 18, 'fullMark': 100}, {'subject': 'a.ZBp7HJqHo6TxLbvf', 'A': 13, 'fullMark': 100}, {'subject': 'a.JpOUH2WTEDkRzwoh', 'A': 5, 'fullMark': 100}, {'subject': 'a.8MyES7LycStyQFll', 'A': 9, 'fullMark': 100}];
});
}, [socket]);
return (
<div className="App">
<h1>hola mundo</h1>
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={data}>
<PolarGrid />
<PolarAngleAxis dataKey="subject" />
<PolarRadiusAxis angle={30} domain={[0, 100]} />
<Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
</div>
);
}
export default App;
The problem is this code segment:
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={data}>
<PolarGrid />
<PolarAngleAxis dataKey="subject" />
<PolarRadiusAxis angle={30} domain={[0, 100]} />
<Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
I need it to be dynamic, because more than 1 single graph has to be made depending on the data that arrives from the socket.
one of the things you want to do is just the advantage of using react. For this you can composize the RadarChart, for this you define a function that you can then call in the App.js
After this you simply loop through your data and call it from App.js
I hope it helps you!