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 do Grid quando todos os registros são atualizados várias vezes por segundo. Use os controles da interface do usuário para escolher o número de registros carregados e a frequência das atualizações. Alimente os mesmos dados no gráfico de linhas para experimentar os poderosos recursos de gráficos do Ignite UI for Angular. O Chart botão mostrará Category Prices per Region dados para as linhas selecionadas e o botão de Chart 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 tubulações são usadas 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 pipes correspondentes. No entanto, esse não é o caso de colunas, que estão vinculadas a complex data objects, porque o Angular pipe puro não detectará uma alteração 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.