Descripción general React Pivot Grid

    Las cuadrículas dinámicas Ignite UI for React se utilizan para sumar y representar datos multidimensionales voluminosos en un formato de tabla cruzada. El resumen de datos se puede ordenar, agrupar o filtrar de manera fácil y rápida. Dichos datos pueden incluir sumas, promedios y otras estadísticas. Los usuarios finales pueden modificar el diseño de la tabla dinámica mediante operaciones de arrastrar y soltar, según sus necesidades.

    ¿Qué es React Pivot Grid?

    El React IgrPivotGrid presenta los datos en una tabla dinámica y ayuda a realizar análisis complejos en el conjunto de datos proporcionado. Este sofisticado control de cuadrícula dinámica se utiliza para organizar, resumir y filtrar grandes volúmenes de datos que luego se muestran en un formato de tabla cruzada. Las características clave de una cuadrícula dinámica de React son las dimensiones de fila, las dimensiones de columna, las agregaciones y los filtros.

    Ofrece IgrPivotGrid a los usuarios la posibilidad de configurar y mostrar sus datos en una estructura de tabla dinámica multidimensional. Las filas y columnas representan grupos de datos distintos, y los valores de celda de datos representan agregaciones. Esto permite un análisis de datos complejo basado en un conjunto de datos plano simple. Se IgrPivotGrid trata de una tabla dinámica rica en funciones que proporciona una fácil configuración de las diferentes dimensiones y valores, así como operaciones de datos adicionales en ellos, como el filtrado y la clasificación.

    React Ejemplo de cuadrícula pivotante

    A continuación se muestra un ejemplo de cuadrícula dinámica React en combinación con el componente Selector de datos dinámicos React. De esta manera, puede tener opciones de configuración de tiempo de ejecución más flexibles.

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Ignite UI for React | CTA Banner

    Primeros pasos con React cuadrícula dinámica

    The React IgrPivotGrid can be configured via the pivotConfiguration property.

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration}>
    </IgrPivotGrid>
    tsx

    Se define por tres dimensiones principales: filas, columnas y valores. Las filas y columnas definen la estructura agrupada que se muestra en las filas y columnas de la cuadrícula. Los valores definen los campos de agregación y la agregación que se utilizará para calcular y mostrar los valores relacionados de los grupos.

    También se puede definir un filtro a través de la propiedad de configuración de filtros. Se puede usar para campos que no desea agregar como una dimensión o un valor, pero le gustaría filtrar sus valores de miembros relacionados a través de la interfaz de usuario.

    Dimensiones Configuración

    Cada configuración de dimensión básica requiere un MemberName que coincida con un campo de los datos proporcionados.

    Se pueden definir varias dimensiones hermanas, lo que crea un grupo anidado más complejo en el área de dimensión de fila o columna relacionada.

    Las dimensiones se pueden reordenar o mover de un área a otra mediante sus correspondientes chips mediante arrastrar y soltar.

    Una dimensión también puede describir una jerarquía expandible a través de la ChildLevel propiedad, por ejemplo:

    const childDimension = new IgrPivotDimension();
    childDimension.memberName = "ProductCategory";
    const dimension: IgrPivotDimension = new IgrPivotDimension();
    dimension.memberName = "AllProducts";
    dimension.enabled = true;
    dimension.childLevel = childDimension;
    tsx

    En este caso, la dimensión representa un expansor en la sección relacionada de la cuadrícula (fila o columna) y permite que los elementos secundarios se expandan o contraigan como parte de la jerarquía. De forma predeterminada, las dimensiones de fila se expanden inicialmente. Este comportamiento se puede controlar con la defaultExpandState propiedad de la cuadrícula dinámica.

    Dimensiones predefinidas

    Como parte de la cuadrícula dinámica, se exponen algunas dimensiones predefinidas adicionales para facilitar la configuración:

    • IgrPivotDateDimension Se puede utilizar para campos de fecha. Describe la siguiente jerarquía de forma predeterminada:
      • Todos los periodos
      • Años
      • Cuarteles
      • Meses
      • Fecha completa

    Se puede configurar para filas o columnas, por ejemplo:

    const pivotConfiguration = new IgrPivotConfiguration();
    
    const dateDimension = new IgrPivotDateDimension();
    dateDimension.memberName = "Date";
    dateDimension.enabled = true;
    const baseDimension = new IgrPivotDimension();
    baseDimension.memberName = "Date";
    baseDimension.enabled = true;
    
    dateDimension.baseDimension = baseDimension;
    pivotConfiguration1.columns = [dateDimension];
    ts

    También permite una mayor personalización a través del segundo parámetro de opción para habilitar o deshabilitar una parte particular de la jerarquía, por ejemplo:

    const options: IgrPivotDateDimensionOptions = {} as IgrPivotDateDimensionOptions;
    options.years = true;
    options.months = false;
    options.quarters = true;
    options.fullDate = false;
    dateDimension.options = options;
    tsx

    Configuración de Valores

    Una configuración de valor requiere un miembro que coincida con un campo de los datos proporcionados, o puede definir una función de agregador personalizado para escenarios personalizados más complejos. Fuera de la caja, hay 4 agregaciones predefinidas que se pueden usar según el tipo de datos del campo de datos:

    • PivotNumericAggregate: para campos numéricos. Contiene las siguientes funciones de agregación: SUM, AVG, MIN, MAX, COUNT.
    • PivotDateAggregate: para campos de fecha. Contiene las siguientes funciones de agregación: LATEST, EARLIEST, COUNT.
    • PivotTimeAggregate: para campos de tiempo. Contiene las siguientes funciones de agregación: LATEST, EARLIEST, COUNT.
    • PivotAggregate: para cualquier otro tipo de datos. Esta es la agregación base. Contiene las siguientes funciones de agregación: COUNT.

    La función de agregación actual se puede cambiar en tiempo de ejecución utilizando el menú desplegable del chip de valor. De forma predeterminada, muestra una lista de agregaciones disponibles según el tipo de datos del campo. También se puede establecer una lista personalizada de agregaciones a través de la propiedad AggregateList, por ejemplo:

    const pivotConfiguration = new IgrPivotConfiguration();
    const value = new IgrPivotValue();
    value.member = "AmountofSale";
    value.displayName = "Amount of Sale";
    value.enabled = true;
    const aggregator = new IgrPivotAggregator();
    aggregator.key = "SUM";
    aggregator.label = "Sum of Sale";
    aggregator.aggregatorName = PivotAggregationType.SUM;
    value.aggregate = aggregator;
    pivotConfiguration.values = [value];
    value.aggregateList = [aggregator];
    typescript

    El valor de pivote también proporciona una displayName propiedad. Se puede utilizar para mostrar un nombre personalizado para este valor en el encabezado de la columna.

    Habilitar propiedad

    pivotConfiguration es la interfaz que describe el estado actual del IgrPivotGrid componente. Con él el desarrollador puede declarar campos de los datos como filas, columnas, filtros o valores. La configuración permite activar o desactivar cada uno de estos elementos por separado. Solo los elementos habilitados se incluyen en el estado actual de la cuadrícula dinámica. El IgrPivotDataSelector componente utiliza la misma configuración y muestra una lista de todos los elementos: habilitados y deshabilitados. Para cada uno de ellos hay una casilla de verificación en el estado apropiado. Los usuarios finales pueden modificar fácilmente el estado de pivote alternando los diferentes elementos usando estas casillas de verificación. La Enable propiedad controla si un o IgrPivotValue determinado IgrPivotDimension está activo y participa en la vista dinámica representada por la cuadrícula dinámica.

    Código de configuración completo

    Echemos un vistazo a una configuración de pivote básica:

    const pivotConfiguration1: IgrPivotConfiguration = new IgrPivotConfiguration();
    
    const igrPivotDateDimension1 = new IgrPivotDimension();
    igrPivotDateDimension1.memberName = "Date";
    igrPivotDateDimension1.enabled = true;
    
    pivotConfiguration1.columns = [igrPivotDateDimension1];
    const igrPivotDimension2: IgrPivotDimension = new IgrPivotDimension();
    igrPivotDimension2.memberName = "ProductName";
    igrPivotDimension2.enabled = true;
    
    const igrPivotDimension3: IgrPivotDimension = new IgrPivotDimension();
    igrPivotDimension3.memberName = "SellerCity";
    igrPivotDimension3.enabled = true;
    
    pivotConfiguration1.rows = [igrPivotDimension2,igrPivotDimension3];
    const igrPivotDimension4: IgrPivotDimension = new IgrPivotDimension();
    igrPivotDimension4.memberName = "SellerName";
    igrPivotDimension4.enabled = true;
    
    pivotConfiguration1.filters = [igrPivotDimension4];
    const igrPivotValue1: IgrPivotValue = new IgrPivotValue();
    igrPivotValue1.member = "ProductUnitPrice";
    igrPivotValue1.displayName = "Amount of Sale";
    igrPivotValue1.dataType = GridColumnDataType.Currency;
    igrPivotValue1.enabled = true;
    const igrPivotAggregator1: IgrPivotAggregator = new IgrPivotAggregator();
    igrPivotAggregator1.key = "SUM";
    igrPivotAggregator1.label = "Sum of Sale";
    igrPivotAggregator1.aggregatorName = PivotAggregationType.SUM;
    
    igrPivotValue1.aggregate = igrPivotAggregator1;
    const igrPivotAggregator2: IgrPivotAggregator = new IgrPivotAggregator();
    igrPivotAggregator2.key = "SUM";
    igrPivotAggregator2.label = "Sum of Sale";
    igrPivotAggregator2.aggregatorName = PivotAggregationType.SUM;
    pivotConfiguration1.values = [igrPivotValue1];
    tsx

    Esta configuración define 1 fila, 1 columna y 1 agregación que suma los valores de cada grupo de dimensiones. Los miembros coinciden con los campos disponibles en la fuente de datos proporcionada:

    public data = [
    [
        {
            ProductName: `Clothing`,
            ProductUnitPrice: 12.8,
            SellerName: `Stanley Brooker`,
            SellerCity: `Seattle`,
            Date: `2007-01-01T00:00:00`,
            Value: 94.4,
            NumberOfUnits: 282
        },
    ];
    typescript

    Ejemplo de configuración completa

    El uso del código anterior dará como resultado el siguiente ejemplo, que agrupa las columnas únicas Fecha, Nombre del producto y Ciudad del vendedor en filas únicas y muestra las agregaciones relacionadas para el importe de la venta en las celdas relacionadas:

    EXAMPLE
    DATA
    TSX
    CSS

    Configuración de generación automática

    La autoGenerateConfig propiedad genera automáticamente dimensiones y valores basados en los campos de la fuente de datos:

    • Campos numéricos:

      • Created as IgrPivotValue using PivotNumericAggregate.sum aggregator.
      • Se agrega a la colección de valores y se habilita de forma predeterminada.
    • Campos no numéricos:

      • Created as IgrPivotDimension.
      • Deshabilitado de forma predeterminada.
      • Se ha agregado a la colección de columnas.
    • Campos de fecha (solo el primer date campo está habilitado, los otros date campos aplican la regla de campos no numéricos):

    Esta función permite a los desarrolladores crear rápidamente una vista dinámica sin especificar manualmente las dimensiones y los valores. Con un selector de pivote junto a la cuadrícula dinámica, los usuarios pueden habilitar y reordenar dimensiones y valores según sea necesario.

    Claves de cálculo de valor pivote

    La cuadrícula dinámica proporciona una personalización a los campos de claves de objeto que utiliza para realizar sus cálculos dinámicos.
    Una vista más detallada de cómo se utilizan se puede ver a continuación en los datos de ejemplo, donde puede ver los valores ya agregados:

    [
        {
            ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524,
            AllProducts_records: [
                { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
                { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
                { ProductCategory: 'Accessories', 'All-USA': 293 },
                { ProductCategory: 'Components', 'All-USA': 240 }
            ]
        }
    ];
    json

    Todos estos se almacenan en la propiedad pivotKeys que forma parte de la pivotConfiguration propiedad y se pueden usar para cambiar las claves dinámicas predeterminadas.

    • niños: campo que almacena niños para la construcción de jerarquía. Representa un mapa de valores agrupados y todos los pivotGridRecords que se basan en ese valor. Se puede utilizar en escenarios muy específicos, donde es necesario hacer algo mientras se crean las jerarquías. No es necesario cambiar esto para uso común.
    • registros: campo que almacena la referencia a los registros de datos originales. Se puede ver en el ejemplo anterior: AllProducts_records. Evite configurar campos en los datos con el mismo nombre que esta propiedad. Si sus registros de datos tienen propiedad de registros, puede especificar un valor diferente y único utilizando pivotKeys.
    • agregaciones: campo que almacena valores de agregación. Se aplica al crear las jerarquías y tampoco debe cambiarse para escenarios comunes.
    • nivel: campo que almacena el nivel de dimensión según su jerarquía. Evite configurar campos en los datos con el mismo nombre que esta propiedad. Si sus registros de datos tienen una propiedad de nivel, puede especificar un valor diferente y único utilizando pivotKeys.
    • columnDimensionSeparator: separador utilizado al generar los valores de campo de columna únicos. Es el guión(-) del valor de ejemplo -All-Bulgaria.
    • rowDimensionSeparator: separador utilizado al generar los valores de campo de fila únicos. Se utiliza al crear los registros y el campo de nivel.

    Los valores predeterminados son:

    {
        aggregations: 'aggregations',
        records: 'records',
        children: 'children',
        level: 'level',
        rowDimensionSeparator: '_',
        columnDimensionSeparator: '-'
    };
    typescript

    Si tiene valores de campo de datos que contienen las claves predeterminadas, asegúrese de cambiar los separadores que coincidan con cualquier otro símbolo que no esté utilizando actualmente. De lo contrario, podría producirse un comportamiento inesperado en el cálculo y la visualización de los valores agregados.

    Problemas conocidos y limitaciones

    Limitación Descripción
    No se admite la configuración de columnas de forma declarativa. La cuadrícula Pivot genera sus columnas en función de lacolumns configuración, por lo que no se admite configurarlos de forma declarativa, como en la cuadrícula base. Estas columnas no se tienen en cuenta.
    Configuración duplicadaMemberName oMember valores de propiedad para dimensiones/valores. Estas propiedades deben ser únicas para cada dimensión/valor. La duplicación puede provocar la pérdida de datos del resultado final.
    La selección de filas solo se admite en modo individual. Actualmente no se admite la selección múltiple.

    Referencias de API

    Recursos adicionales

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