Atualizações de dados ao vivo do React Grid

    O recurso Ignite UI for React Atualizações de Dados ao Vivo no React Grid é usado para habilitar atualizações em tempo real ou quase em tempo real dos dados exibidos dentro da grade. Isso é extremamente útil em aplicativos onde os dados estão em constante mudança, como rastreadores de bolsa, placar esportivo ao vivo ou dashboards de IoT (Internet das Coisas). ElesIgrGrid conseguem lidar com milhares de atualizações por segundo, mantendo-se responsivos às interações do usuário.

    React Live-data Update Example

    O exemplo abaixo demonstra o desempenho da Grade quando todos os registros são atualizados várias vezes por segundo. Use os controles da interface para escolher o número de registros carregados e a frequência das atualizações. Insira os mesmos dados no Quadro de Colunas para experimentar as poderosas capacidades de gráficos do Ignite UI for Angular. OChart botão mostrará os dados de Preços de Categoria por Região para as linhas selecionadas e oChart botão da coluna mostrará o mesmo para a linha atual.

    Data binding and updates

    Um serviço fornece dados ao componente quando a página é carregada e quando o controlador deslizante é usado para buscar um determinado número de registros. Enquanto em um cenário real os dados atualizados seriam consumidos do serviço, aqui os dados são atualizados no código. Isso é feito para manter a demonstração simples e focar em seu objetivo principal - demonstrar o desempenho da grade.

    <IgrGrid></IgrGrid>

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

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

    Uma alteração no valor do campo de dados ou uma alteração no objeto de dados/referência de coleta de dados acionará os pipes correspondentes. No entanto, esse não é o caso de colunas, que são associadas a objetos de dados complexos. Para resolver a situação, forneça uma nova referência de objeto para o objeto de dados que contém a propriedade. Exemplo:

    <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;
}

    Modelos

    A atualização do modo de exibição funciona da mesma maneira para colunas com um modelo padrão e para colunas com um modelo personalizado. No entanto, é recomendável manter os modelos personalizados relativamente simples. À medida que o número de elementos no modelo aumenta, o impacto negativo no desempenho também aumenta.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.