Operaciones remotas de cuadrícula de pivote Angular

    En escenarios donde los datos dinámicos ya están agrupados y agregados desde un servicio remoto y no hay necesidad de un procesamiento adicional en el cliente, la cuadrícula dinámica se puede configurar para usar una estrategia vacía personalizada que omitirá el procesamiento de datos en el cliente y le permitirá mostrar directamente los datos tal como están:

    public pivotConfigHierarchy: IPivotConfiguration = {
    columnStrategy: NoopPivotDimensionsStrategy.instance(),
    rowStrategy: NoopPivotDimensionsStrategy.instance(),
}

    El siguiente ejemplo muestra cómo manejar escenarios, donde los datos ya están agregados y cómo debería verse su estructura:

    Los usuarios tienen la capacidad de lograr ciertos escenarios alimentando la cuadrícula dinámica con datos ya agregados. Existen algunos requisitos sobre cómo deben verse los datos y algunos detalles específicos sobre las jerarquías en la vista dinámica. Por ejemplo, para declarar jerarquía en la dimensión rows:

    rows: [
    {
        memberName: 'AllProducts',
        memberFunction: () => 'All Products',
        enabled: true,
        childLevel: {
            memberName: 'ProductCategory',
            enabled: true
        }
    }
]

    Y un ejemplo de lo agregado sería:

    public aggregatedData = [
    {
        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 }
        ]
    }
];

    La cuadrícula dinámica proporciona los campos de claves de objeto que utiliza para realizar sus cálculos dinámicos.

    • children: 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.
    • records: 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 records, puede especificar un valor diferente y único utilizando pivotKeys.
    • aggregations: campo que almacena valores de agregación. Se aplica al crear las jerarquías y tampoco debe cambiarse para escenarios comunes.
    • level: 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 level, 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 ejemplo anterior: All-Bulgaria.
    • rowDimensionSeparator: separador utilizado al generar los valores de campo de fila únicos. Es el guión bajo (_) del ejemplo anterior: AllProducts_records. Se utiliza al crear los records y el campo level.

    Todos estos se almacenan en la propiedad pivotKeys que forma parte de PivotConfiguration y se puede usar para cambiar las claves dinámicas predeterminadas. Estos valores predeterminados son:

    export const DEFAULT_PIVOT_KEYS = {
    aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
    rowDimensionSeparator: '_', columnDimensionSeparator: '-'
};

    Configurar NoopPivotDimensionsStrategy para columnStrategy y rowStrategy omite la agrupación y agregación de datos realizada por las canalizaciones de datos, pero la cuadrícula dinámica aún necesita declaraciones para las filas, columnas, valores y filtros para poder representar la vista dinámica como se esperaba:

    public pivotConfig: IPivotConfiguration = {
    rows: [
        {
            memberName: 'AllProducts',
            memberFunction: () => 'All Products',
            enabled: true,
            childLevel: {
                memberName: 'ProductCategory',
                enabled: true
            }
        }
    ],
    columns: [
        {
            memberName: 'All',
            enabled: true,
            childLevel: {
                memberName: 'Country',
                enabled: true
            }
        }
    ],
    values: [
        {
            member: 'UnitsSold',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'sum',
                label: 'Sum'
            },
            enabled: true
        },
    ]
}

    Es importante que los datos coincidan con la configuración. Para obtener mejores resultados, no se deben incluir campos adicionales en los datos agregados y ningún campo de los datos proporcionados debe quedar sin declarar como filas o columnas. El componente IgxPivotGrid construye sus datos basándose en PivotConfiguration y se espera que la configuración y los datos agregados coincidan en consecuencia.

    De manera similar, para otras operaciones de datos remotas, como ordenar y filtrar, el procesamiento de datos se puede omitir configurando las estrategias vacías relacionadas: filterStrategy, sortStrategy:

    <igx-pivot-grid [filterStrategy]="noopFilterStrategy" [sortStrategy]="noopSortStrategy" ...>
</igx-pivot-grid>

    public noopFilterStrategy = NoopFilteringStrategy.instance();
public noopSortStrategy = NoopSortingStrategy.instance();

    API References

    Additional Resources

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