Actualizaciones de datos en vivo de React Grid

    La función Ignite UI for React Actualizaciones de Datos en Vivo en React Grid se utiliza para habilitar actualizaciones en tiempo real o casi en tiempo real de los datos mostrados dentro de la grid. Esto es extremadamente útil en aplicaciones donde los datos cambian constantemente, como los rastreadores de bolsa, los resultados deportivos en directo o los paneles de control IoT (Internet de las Cosas). PuedenIgrGrid gestionar miles de actualizaciones por segundo, manteniendo la respuesta a las interacciones del usuario.

    React Live-data Update Example

    El ejemplo siguiente muestra el rendimiento de la cuadrícula cuando todos los registros se actualizan varias veces por segundo. Utiliza los controles de la interfaz para elegir el número de registros cargados y la frecuencia de actualizaciones. Introduce los mismos datos en la Gráfico de columnas para experimentar las potentes capacidades de cartografía de Ignite UI for Angular. ElChart botón mostrará los datos de Precios de Categoría por Región para las filas seleccionadas y elChart botón de columna mostrará lo mismo para la fila actual.

    Data binding and updates

    Un servicio proporciona datos al componente cuando se carga la página y cuando se utiliza el controlador deslizante para recuperar una cierta cantidad de registros. Mientras que en un escenario real los datos actualizados se consumirían desde el servicio, aquí los datos se actualizan en código. Esto se hace para mantener la demostración simple y enfocarse en su objetivo principal: demostrar el rendimiento de la red.

    <IgrGrid></IgrGrid>

    const startUpdate = () => {
  timer.current = setInterval(() => {
    setData((oldData) => FinancialData.updateAllPrices(oldData));
  }, frequency);

  setIsStartButtonDisabled(true);
  setIsStopButtonDisabled(false);
  setIsChartButtonDisabled(true);
}

    Un cambio en el valor del campo de datos o un cambio en el objeto de datos/referencia de recopilación de datos activará las canalizaciones correspondientes. Sin embargo, este no es el caso de las columnas, que están vinculadas a objetos de datos complejos. Para resolver la situación, proporcione una nueva referencia de objeto para el objeto de datos que contiene la propiedad. Ejemplo:

    <IgrGrid>
    <IgrColumn field="price.usd"></IgrColumn>
</IgrGrid>

    const updateData = (data: any[]) => {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    gridRef.current.data = newData;
}

    Plantillas

    La actualización de la vista funciona de la misma manera para columnas con una plantilla predeterminada y para columnas con una plantilla personalizada. Sin embargo, se recomienda mantener las plantillas personalizadas relativamente simples. A medida que crece el número de elementos en la plantilla, también aumenta el impacto negativo en el rendimiento.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.