Atualizações de dados ao vivo do Angular Grid

    O componente Grid é capaz de lidar com milhares de atualizações por segundo, mantendo-se responsivo às interações do usuário.

    Angular 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 Gráfico de Linhas para experimentar as poderosas capacidades de cartografia do Ignite UI for Angular. OChart botão mostraráCategory Prices per Region dados para as linhas selecionadas e oChart botão de 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.

    <igx-grid #grid [data]="data"></igx-grid>

    public ngOnInit() {
    this.localService.getData(this.volume);
    this.volumeSlider.onValueChange.subscribe(x => this.localService.getData(this.volume);
    this.localService.records.subscribe(x => { this.data = x; });
}

    Angular tubos são usados internamente para atualizar a visualização em grade. 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 correspondentes pipes. No entanto, isso não ocorre para colunas, que são vinculadas a ,complex data objects porque o Angular pipe puro não detectará uma mudança em uma propriedade aninhada. Para resolver a situação, forneça uma nova referência de objeto para o objeto de dados que contém a propriedade. Exemplo:

    <igx-grid #grid [data]="data">
    <igx-column field="price.usd"></igx-column>
</igx-grid>

    private updateData(data: IRecord[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.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.

    Live-data feed with Dock Manager and igxGrid Components

    O objetivo desta demonstração é mostrar um quadro de tela financeira com fluxo de dados em tempo real usando um back-end de hub do SignalR. Como você pode ver, o componente igxGrid lida com facilidade com as atualizações de alta frequência do servidor. O código para o aplicativo ASP.NET Core usando o SignalR pode ser encontrado neste repositório público do GitHub.

    Start the hub connection

    O signal-r.service lida com a conectividade e as atualizações dos parâmetros gerenciáveis expostos frequency, volume e alternância de estado de atualização ao vivo (Start/Stop).

    this.hubConnection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Trace)
        .withUrl('https://pt-br.infragistics.com/angular-apis/webapi/streamHub')
        .build();
    this.hubConnection
        .start()
        .then(() => {
            this.hasRemoteConnection = true;
            this.registerSignalEvents();
            this.broadcastParams(interval, volume, live, updateAll);
        })
        .catch(() => {});

    Com base na frequência especificada, um total de 30 novas atualizações serão recebidas pelas grades do servidor. Uma classe cellStyle específica é aplicada às três colunas que estão lidando com as alterações (Price, Change e Change in percent).

    Update frequency and data volume

    Usando o painel Ação à esquerda, você pode gerenciar a frequência do feed de dados e o volume dos dados solicitados. Todas as grades usam a mesma fonte de dados. Sinta-se à vontade para usar os outros elementos de ação para interromper o feed de dados, alterar o tema do aplicativo ou adicionar dinamicamente um contêiner DockSlot com um igxGrid.

    Usamos o método 'updateparameters' para solicitar um novo conjunto de dados com certa frequência. Esse método faz parte da implementação do hub de fluxo do SignalR.

    this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll)
    .then(() => console.log('requestLiveData', volume))
    .catch(err => {
        console.error(err);
    });

    Dynamically create DockSlot and Grid components

    Usando o ComponentFactoryResolver, podemos criar componentes DockSlot e Grid em tempo real.

    DockManager component

    Aproveite o WebComponent do Dock Manager e crie sua própria visualização da Web usando o docket ou os painéis flutuantes. Para adicionar um novo painel flutuante, vá em frente e abra o painel de ação à direita e clique no botão 'Adicionar painel flutuante'. Arraste e solte o novo painel no local desejado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.