Actualizaciones de datos en vivo Angular Grid

    El componente Grid es capaz de manejar miles de actualizaciones por segundo, sin dejar de responder a las interacciones del usuario.

    Angular Live-data Update Example

    El siguiente ejemplo demuestra el rendimiento de Grid cuando todos los registros se actualizan varias veces por segundo. Utilice los controles de la interfaz de usuario para elegir la cantidad de registros cargados y la frecuencia de las actualizaciones. Introduzca los mismos datos en el Gráfico de líneas para experimentar las poderosas capacidades de gráficos de Ignite UI for Angular. El botón Chart mostrará los datos Category Prices per Region para las filas seleccionadas y el botón de la columna Chart 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.

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

    Las tuberías Angular se utilizan internamente para actualizar la vista de cuadrícula. 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 complex data objects, porque la canalización pura Angular no detectará un cambio en una propiedad anidada. Para resolver la situación, proporcione una nueva referencia de objeto para el objeto de datos que contiene la propiedad. Ejemplo:

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

    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.

    Live-data feed with Dock Manager and igxGrid Components

    El propósito de esta demostración es mostrar un tablero de pantalla financiera con flujo de datos en tiempo real utilizando un back-end de concentrador SignalR. Como puede ver, el componente igxGrid maneja con facilidad las actualizaciones de alta frecuencia del servidor. El código para la aplicación ASP.NET Core que utiliza SignalR se puede encontrar en este repositorio público de GitHub.

    Start the hub connection

    Signal-r.service maneja la conectividad y las actualizaciones de los parámetros manejables expuestos, frecuencia, volumen y alternancia de estado de actualización en vivo (Inicio/Detención).

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

    Según la frecuencia especificada, los Grids recibirán un total de 30 nuevas actualizaciones desde el servidor. Se aplican clases cellStyle específicas a las tres columnas que manejan los cambios (Precio, Cambio y Cambio en porcentaje).

    Update frequency and data volume

    Al utilizar el panel de Acción a la izquierda, puede administrar la frecuencia de la alimentación de datos y el volumen de los datos solicitados. Todas las cuadrículas utilizan la misma fuente de datos. Siéntase libre de utilizar los otros elementos de acción para detener la fuente de datos, cambiar el tema de la aplicación o agregar dinámicamente un contenedor DockSlot con un igxGrid.

    Usamos el método 'updateparameters' para solicitar un nuevo conjunto de datos con cierta frecuencia. Este método es parte de la implementación del centro de transmisión de 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

    Al utilizar ComponentFactoryResolver, podemos crear componentes DockSlot y Grid sobre la marcha.

    DockManager component

    Aproveche el componente web Dock Manager y cree su propia vista web utilizando el expediente o los paneles flotantes. Para agregar un nuevo panel flotante, continúe, abra el panel de Acción a la derecha y haga clic en el botón "Agregar panel flotante". Arrastre y suelte el nuevo panel en la ubicación deseada.

    API References

    Additional Resources

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