0

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.

1
  • Te refieres a renderizar de nuevo cuando cambie data? Podrías dar más información. Pon un ejemplo.
    – Sr1871
    Commented el 13 oct. 2022 a las 2:40

1 respuesta 1

3

una de las cosas que quieres hacer es justamente la ventaja de utilizar react. Para ello puedes componetizar el RadarChart, para ello defines una función que luego puedas llamar en la App.js

import React  from 'react';
import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
require("./styles.css");
function RadarChartComponent({data},{nombre}){
  console.log(data);
  console.log(nombre)
    return(
    <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="a" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
        <Legend />
      </RadarChart>
      );
}

export default RadarChartComponent;

Luego de esto simplemente recorres tu data y lo llamas desde App.js

import "./App.css";
import io from "socket.io-client";
import { useEffect } from "react";
import React  from 'react';
import RadarChartComponent from "./Components/RadarChart/RadarChartComponent";
function App() {   
    var arr= {};
  useEffect(() => {
    socket.on("distribution", (data) => {
      arr = data;
    });
  }, [socket]);
  return (
    <div className="App">
      <h1>hola mundo</h1>
      {arr && ( arr.map((data,index) => (
        <RadarChartComponent data={data}/>
      )) ) }
      
    </div>
  );
}

Espero te sirva!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.