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 pueden lograr ciertos escenarios alimentando la cuadrícula pivote con datos ya agregados. Hay algunos requisitos sobre cómo deben verse los datos y algunos detalles específicos sobre jerarquías en la vista pivote. Por ejemplo, para declarar la jerarquía enrows dimensión:

    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 hijos para la construcción de jerarquías. Representa un mapa de valores agrupados y todos los pivotGridRecords que se basan en ese valor. Puede utilizarse en escenarios muy específicos, donde es necesario hacer algo al crear las jerarquías. No hace falta cambiar esto para el uso común.
    • records- Campo que almacena referencia a los registros de datos originales. Se puede ver en el ejemplo anterior -AllProducts_records. Evita configurar campos en los datos con el mismo nombre que esta propiedad. Si tus registros de datos tienenrecords propiedades, puedes especificar un valor diferente y único para ellos usando elpivotKeys.
    • aggregations- Campo que almacena valores de agregación. Se aplica al crear las jerarquías y tampoco debe cambiarse en situaciones comunes.
    • level- Campo que almacena el nivel dimensional según su jerarquía. Evita configurar campos en los datos con el mismo nombre que esta propiedad. Si tus registros de datos tienenlevel propiedades, puedes especificar un valor diferente y único para ellos usando elpivotKeys.
    • columnDimensionSeparator- Separador utilizado al generar los valores únicos de los campos de columna. Es el guion(-) del ejemplo anterior -All-Bulgaria.
    • rowDimensionSeparator- Separador utilizado al generar los valores únicos de los campos de fila. Es el guion subestimado(_) del ejemplo anterior -AllProducts_records. Se utiliza al crear elrecords campo ylevel.

    Todos estos se almacenan en lapivotKeys propiedad que forma parte de yPivotConfiguration pueden usarse para cambiar las claves pivote predeterminadas. Estos valores predeterminados son:

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

    Al configurarNoopPivotDimensionsStrategy para elcolumnStrategy yrowStrategy se salta el agrupamiento y agregación de datos realizado por las tuberías de datos, pero la cuadrícula pivote aún necesita declaraciones para las filas, columnas, valores y filtros para renderizar la vista pivote como se espera:

    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 ni se debe dejar ningún campo de los datos proporcionados sin declarar como filas o columnas. ElIgxPivotGrid componente construye sus datos en base a laPivotConfiguration y se espera que la configuración y los datos agregados coincidan en consecuencia.

    De manera similar, para otras operaciones remotas de datos como ordenar y filtrar, el procesamiento de datos puede saltarse estableciendo las estrategias de vacío 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.