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

    The sample below demonstrates the Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the Line Chart to experience the powerful charting capabilities of Ignite UI for Angular. The Chart button will show Category Prices per Region data for the selected rows and the Chart column button will show the same for the current row.

    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 pipes are used internally to update the grid view. A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to complex data objects, because the Angular pure pipe will not detect a change in a nested property. To resolve the situation, provide a new object reference for the data object containing the property. Example:

    <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.