Tengo el código que recibe mediante socketio un archivo tipo json donde llega la data, la idea es hacer una visualización con RadarChart (esto funciona correctamente), el problema es que solo puedo realizar la visualización de 1 solo elemento mientras que debería poder hacerlo dinámicamente y no se como se hace, adjunto código:
Código Funcional
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");
Luego para hacer la conexión tengo el siguiente código (el cual también funciona correctamente)
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;
El problema es este segmento de codigo:
<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>
que necesito que sea dinámico, porque se tienen que realizar mas de 1 solo grafico dependiendo de los datos que vayan llegando del socket.