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.