Hola amigos, tengo una tarea para mostrar los datos del usuario en el gráfico (estoy usando gráficos de diapositivas nativos de reacción ), pero se vuelve un poco complicado. Entonces, lo que estoy tratando de lograr es lo siguiente: estoy haciendo una solicitud y obtengo los siguientes datos del servidor:

 { "trend": [92, 93, 94, 94, 93, 93, 94, 95, 95, 95, 95, 94, 96, 95, 96], "history": [1087, 112, 117, 190, 153, 163, 138, 166, 191, 191, 187, 163, 187, 177, 109, 107, 196, 175, 113, 192, 113, 112, 169, 109, 109, 157, 126, 170, 137, 146, 132, 114], }

Y sé que la trend son datos de los últimos 15 minutos con un intervalo de 1 minuto, y el history son datos de las últimas 8 horas con un intervalo de 15 minutos.

Necesito mapear estos datos y mostrarlos en el gráfico. Estoy tratando de hacer lo siguiente:

 const initialDateTime = dayjs(); const mappedTrend = data.trend.reverse().map((el, i) => ({ x: i === 0 ? initialDateTime.valueOf() : initialDateTime.add(i * 1, 'minutes').valueOf(), y: el, })); const mappedHistory = data.history.reverse().map((el, i) => ({ x: i === 0 ? initialDateTime.valueOf() : initialDateTime.add(i * 15, 'minutes').valueOf(), y: el, }));

en la salida tengo 2 matrices como {x: timestamp, y: value} ;

Luego lo estoy agregando al estado y el gráfico mira estos datos:

 setState({data: [...mappedHistory, ...mapTrend]})

parece que está bien hasta aquí, pero ahora, por ejemplo, necesito cargar más datos, después de, por ejemplo, 5 minutos puedo hacer otra solicitud y obtendré casi los mismos datos pero con números diferentes, y necesito ahora, para prolongar los datos del gráfico con uno nuevo, pero ¿cómo hacerlo? ¿Cómo agregar datos correctamente?

Preparé un refrigerio aquí Los problemas son que el gráfico se ve extraño y cuando llegan nuevos datos también se muestra extraño. Y la cuestión es que, en el gráfico, los datos deben estar dentro del rango de 24 horas, por eso uso xRange en el gráfico. Entonces, ¿alguna idea sobre cómo resolver esto o arreglarlo?