13587037457

Committed 28 Feb 2025 11:17AM UTC coverage: 91.531% (-0.1%) from 91.659%

Build # 13587037457

Build Type

Pull #15428

github

Committed by

web-flow

Commit Message

Merge 4e946d998 into cb515ea15

Pull Request Pull Request #15428: fix(pivot-grid): Handle currency pivot values with count aggregator

Run Details

13348 of 15642 branches covered (85.33%)

30 of 69 new or added lines in 4 files covered. (43.48%)

4 existing lines in 2 files now uncovered.

26913 of 29403 relevant lines covered (91.53%)

33623.23 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

68.24

/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts

import { useAnimation } from "@angular/animations";
import {
    ChangeDetectorRef,
    Component,
    EventEmitter,
    HostBinding,
    Input,
    Output,
    Renderer2,
    booleanAttribute
} from "@angular/core";
import { first } from "rxjs/operators";
import { SortingDirection } from "../../data-operations/sorting-strategy";
import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxDragDirective, IgxDragHandleDirective } from "../../directives/drag-drop/drag-drop.directive";
import { ISelectionEventArgs } from "../../drop-down/drop-down.common";
import { IgxDropDownComponent } from "../../drop-down/drop-down.component";
import {
    AbsoluteScrollStrategy,
    AutoPositionStrategy,
    OverlaySettings,
    PositionSettings,
    VerticalAlignment
} from "../../services/public_api";
import { ColumnType, PivotGridType } from "../common/grid.interface";
import {
    IPivotAggregator,
    IPivotDimension,
    IPivotValue,
    PivotDimensionType
} from "./pivot-grid.interface";
import { PivotUtil } from './pivot-util';
import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
import { IgxDropDownItemComponent } from "../../drop-down/drop-down-item.component";
import { IgxDropDownItemNavigationDirective } from "../../drop-down/drop-down-navigation.directive";
import { IgxExpansionPanelBodyComponent } from "../../expansion-panel/expansion-panel-body.component";
import { IgxChipComponent } from "../../chips/chip.component";
import { IgxExpansionPanelTitleDirective } from "../../expansion-panel/expansion-panel.directives";
import { IgxExpansionPanelHeaderComponent } from "../../expansion-panel/expansion-panel-header.component";
import { IgxExpansionPanelComponent } from "../../expansion-panel/expansion-panel.component";
import { IgxAccordionComponent } from "../../accordion/accordion.component";
import { IgxCheckboxComponent } from "../../checkbox/checkbox.component";
import { IgxListItemComponent } from "../../list/list-item.component";
import { IgxListComponent } from "../../list/list.component";
import { IgxInputDirective } from "../../directives/input/input.directive";
import { IgxPrefixDirective } from "../../directives/prefix/prefix.directive";
import { IgxIconComponent } from "../../icon/icon.component";
import { IgxInputGroupComponent } from "../../input-group/input-group.component";
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
import { Size } from '../common/enums';
import { GridColumnDataType } from '../../data-operations/data-util';
import { IgxPivotGridStateService } from './pivot-grid-state.service';

interface IDataSelectorPanel {
    name: string;
    i18n: string;
    type?: PivotDimensionType;
    dataKey: string;
    icon: string;
    itemKey: string;
    displayKey?: string;
    sortable: boolean;
    dragChannels: string[];
}

/* blazorIndirectRender
   blazorComponent */
/* wcElementTag: igc-pivot-data-selector */
/**
 * Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI
 *
 * @igxModule IgxPivotGridModule
 * @igxGroup Grids & Lists
 * @igxKeywords data selector, pivot, grid
 * @igxTheme pivot-data-selector-theme
 * @remarks
 * The Ignite UI Data Selector has a searchable list with the grid data columns,
 * there are also four expandable areas underneath for filters, rows, columns, and values
 * is used for grouping and aggregating simple flat data into a pivot table.
 * @example
 * ```html
 * <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="configuration">
 * </igx-pivot-grid>
 * <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 * ```
 */
@Component({
    selector: "igx-pivot-data-selector",
    templateUrl: "./pivot-data-selector.component.html",
    imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
})
export class IgxPivotDataSelectorComponent {

    /**
     * Gets/sets whether the columns panel is expanded
     * Get
     * ```typescript
     *  const columnsPanelState: boolean = this.dataSelector.columnsExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public columnsExpanded = true;

    /**
     * @hidden
     */
    @Output()
    public columnsExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the rows panel is expanded
     * Get
     * ```typescript
     *  const rowsPanelState: boolean = this.dataSelector.rowsExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public rowsExpanded = true;

    /**
     * @hidden
     */
    @Output()
    public rowsExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the filters panel is expanded
     * Get
     * ```typescript
     *  const filtersPanelState: boolean = this.dataSelector.filtersExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public filtersExpanded = true;

    /**
     * @hidden
     */
    @Output()
    public filtersExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the values panel is expanded
     * Get
     * ```typescript
     *  const valuesPanelState: boolean = this.dataSelector.valuesExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public valuesExpanded = true;

    /**
     * @hidden
     */
    @Output()
    public valuesExpandedChange = new EventEmitter<boolean>();

    private _grid: PivotGridType;
    private _dropDelta = 0;

    /** @hidden @internal **/
    @HostBinding("class.igx-pivot-data-selector")
    public cssClass = "igx-pivot-data-selector";

    @HostBinding("style.--ig-size")
    protected get size(): Size {
        return this.grid?.gridSize;
    }

    /** @hidden @internal **/
    public dimensions: IPivotDimension[];

    private _subMenuPositionSettings: PositionSettings = {
        verticalStartPoint: VerticalAlignment.Bottom,
        closeAnimation: undefined,
    };

    private _subMenuOverlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new AutoPositionStrategy(
            this._subMenuPositionSettings
        ),
        scrollStrategy: new AbsoluteScrollStrategy(),
    };

    /* blazorSuppress */
    public animationSettings = {
        closeAnimation: useAnimation(fadeOut, {
            params: {
                duration: "0ms",
            },
        }),
        openAnimation: useAnimation(fadeIn, {
            params: {
                duration: "0ms",
            },
        }),
    };

    /** @hidden @internal */
    public aggregateList: IPivotAggregator[] = [];
    /** @hidden @internal */
    public value: IPivotValue;
    /** @hidden @internal */
    public ghostText: string;
    /** @hidden @internal */
    public ghostWidth: number;
    /** @hidden @internal */
    public dropAllowed: boolean;
    /** @hidden @internal */
    public get dims(): IPivotDimension[] {
        return this._grid?.allDimensions || [];
    }
    /** @hidden @internal */
    public get values(): IPivotValue[] {
        return this._grid?.pivotConfiguration.values || [];
    }

    constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef, private pivotStateService: IgxPivotGridStateService) { }

    /**
     * @hidden @internal
     */
    public _panels: IDataSelectorPanel[] = [
        {
            name: "Filters",
            i18n: 'igx_grid_pivot_selector_filters',
            type: PivotDimensionType.Filter,
            dataKey: "filterDimensions",
            icon: "filter_list",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: false,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Columns",
            i18n: 'igx_grid_pivot_selector_columns',
            type: PivotDimensionType.Column,
            dataKey: "columnDimensions",
            icon: "view_column",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: true,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Rows",
            i18n: 'igx_grid_pivot_selector_rows',
            type: PivotDimensionType.Row,
            dataKey: "rowDimensions",
            icon: "table_rows",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: true,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Values",
            i18n: 'igx_grid_pivot_selector_values',
            type: null,
            dataKey: "values",
            icon: "functions",
            itemKey: "member",
            displayKey: 'displayName',
            sortable: false,
            dragChannels: ["Values"]
        },
    ];


    /* treatAsRef */
    /**
     * Sets the grid.
     */
    @Input()
    public set grid(value: PivotGridType) {
        this._grid = value;
    }

    /* treatAsRef */
    /**
     * Returns the grid.
     */
    public get grid(): PivotGridType {
        return this._grid;
    }

    /**
     * @hidden
     * @internal
     */
    public onItemSort(
        _: Event,
        dimension: IPivotDimension,
        dimensionType: PivotDimensionType
    ) {
        if (
            !this._panels.find(
                (panel: IDataSelectorPanel) => panel.type === dimensionType
            ).sortable
        )
            return;

        const startDirection = dimension.sortDirection || SortingDirection.None;
        const direction = startDirection + 1 > SortingDirection.Desc ?
            SortingDirection.None : startDirection + 1;
        this.grid.sortDimension(dimension, direction);
    }

    /**
     * @hidden
     * @internal
     */
    public onFilteringIconPointerDown(event: PointerEvent) {
        event.stopPropagation();
        event.preventDefault();
    }

    /**
     * @hidden
     * @internal
     */
    public onFilteringIconClick(event: MouseEvent, dimension: IPivotDimension) {
        event.stopPropagation();
        event.preventDefault();

        let dim = dimension;
        let col: ColumnType;

        while (dim) {
            col = this.grid.dimensionDataColumns.find(
                (x) => x.field === dim.memberName
            );
            if (col) {
                break;
            } else {
                dim = dim.childLevel;
            }
        }

        this.grid.filteringService.toggleFilterDropdown(event.target, col);
    }

    /**
     * @hidden
     * @internal
     */
    protected getDimensionState(dimensionType: PivotDimensionType) {
        switch (dimensionType) {
            case PivotDimensionType.Row:
                return this.grid.rowDimensions;
            case PivotDimensionType.Column:
                return this.grid.columnDimensions;
            case PivotDimensionType.Filter:
                return this.grid.filterDimensions;
            default:
                return null;
        }
    }

    /**
     * @hidden
     * @internal
     */
    protected moveValueItem(itemId: string) {
        const aggregation = this.grid.pivotConfiguration.values;
        const valueIndex =
            aggregation.findIndex((x) => x.member === itemId) !== -1
                ? aggregation?.findIndex((x) => x.member === itemId)
                : aggregation.length;
        const newValueIndex =
            valueIndex + this._dropDelta < 0 ? 0 : valueIndex + this._dropDelta;

        const aggregationItem = aggregation.find(
            (x) => x.member === itemId || x.displayName === itemId
        );

        if (aggregationItem) {
            this.grid.moveValue(aggregationItem, newValueIndex);
            this.grid.valuesChange.emit({
                values: this.grid.pivotConfiguration.values,
            });
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDropped(
        event: IDropDroppedEventArgs,
        dimensionType: PivotDimensionType
    ) {
        if (!this.dropAllowed) {
            return;
        }

        const dimension = this.grid.getDimensionsByType(dimensionType);
        const dimensionState = this.getDimensionState(dimensionType);
        const itemId = event.drag.element.nativeElement.id;
        const targetId = event.owner.element.nativeElement.id;
        const dimensionItem = dimension?.find((x) => x.memberName === itemId);
        const itemIndex =
            dimension?.findIndex((x) => x?.memberName === itemId) !== -1
                ? dimension?.findIndex((x) => x.memberName === itemId)
                : dimension?.length;
        const dimensions = this.grid.allDimensions.filter((x) => x && x.memberName === itemId);

        const reorder =
            dimensionState?.findIndex((item) => item.memberName === itemId) !==
            -1;

        let targetIndex =
            targetId !== ""
                ? dimension?.findIndex((x) => x.memberName === targetId)
                : dimension?.length;

        if (!dimension) {
            this.moveValueItem(itemId);
        }

        if (reorder) {
            targetIndex =
                itemIndex + this._dropDelta < 0
                    ? 0
                    : itemIndex + this._dropDelta;
        }

        if (dimensionItem) {
            this.grid.moveDimension(dimensionItem, dimensionType, targetIndex);
        } else {
            const newDim = dimensions.find((x) => x.memberName === itemId);
            this.grid.moveDimension(newDim, dimensionType, targetIndex);
        }

        this.grid.dimensionsChange.emit({
            dimensions: dimension,
            dimensionCollectionType: dimensionType,
        });
    }

    /**
     * @hidden
     * @internal
     */
    protected updateDropDown(
        value: IPivotValue,
        dropdown: IgxDropDownComponent
    ) {
        this.value = value;
        dropdown.width = "200px";
        this.aggregateList = PivotUtil.getAggregateList(value, this.grid);
        this.cdr.detectChanges();
        dropdown.open(this._subMenuOverlaySettings);
    }

    /**
     * @hidden
     * @internal
     */
    public onSummaryClick(
        event: MouseEvent,
        value: IPivotValue,
        dropdown: IgxDropDownComponent
    ) {
        this._subMenuOverlaySettings.target =
            event.currentTarget as HTMLElement;

        if (dropdown.collapsed) {
            this.updateDropDown(value, dropdown);
        } else {
            // close for previous chip
            dropdown.close();
            dropdown.closed.pipe(first()).subscribe(() => {
                this.updateDropDown(value, dropdown);
            });
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onAggregationChange(event: ISelectionEventArgs) {
        const valueMember = this.value.member;
        const columns = this.grid.columns;

        if (!this.isSelected(event.newSelection.value)) {
            this.value.aggregate = event.newSelection.value;

            const isCountAggregator = this.value.aggregate.key.toLowerCase() === 'count';
            const isSingleValue = this.grid.values.length === 1;

            columns.forEach(column => {
                const isRelevantColumn = column.field?.includes(valueMember);
                const isCurrencyColumn = column.dataType === GridColumnDataType.Currency;

                if (isSingleValue) {
                    if (isCountAggregator && isCurrencyColumn) {
                        column.dataType = GridColumnDataType.Number;
                        this.pivotStateService.addCurrencyColumn(valueMember);
                    } else if (this.pivotStateService.isCurrencyColumn(valueMember)) {
                        column.dataType = GridColumnDataType.Currency;
                    }
                } else if (isRelevantColumn) {
                    if (isCountAggregator && isCurrencyColumn) {
                        column.dataType = GridColumnDataType.Number;
                        this.pivotStateService.addCurrencyColumn(valueMember);
                    } else if (this.pivotStateService.isCurrencyColumn(valueMember)) {
                        column.dataType = GridColumnDataType.Currency;
                        this.pivotStateService.removeCurrencyColumn(valueMember);
                    }
                }
            });

            this.grid.pipeTrigger++;
            this.grid.cdr.markForCheck();
        }
    }

    /**
     * @hidden
     * @internal
     */
    public isSelected(val: IPivotAggregator) {
        return this.value.aggregate.key === val.key;
    }

    /**
     * @hidden
     * @internal
     */
    public ghostCreated(event: IDragGhostBaseEventArgs, value: string) {
        const { width: itemWidth } =
            event.owner.element.nativeElement.getBoundingClientRect();
        this.ghostWidth = itemWidth;
        this.ghostText = value;
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "position",
            "absolute"
        );
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "visibility",
            "hidden"
        );
    }

    /**
     * @hidden
     * @internal
     */
    public toggleItem(item: IPivotDimension | IPivotValue) {
        if (item as IPivotValue) {
            this.grid.toggleValue(item as IPivotValue);
        }

        if (item as IPivotDimension) {
            this.grid.toggleDimension(item as IPivotDimension);
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onPanelEntry(event: IDropBaseEventArgs, panel: string) {
        this.dropAllowed = event.dragData.gridID === this.grid.id && event.dragData.selectorChannels?.some(
            (channel: string) => channel === panel
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragMove(event: IDragMoveEventArgs) {
        const clientRect =
            event.owner.element.nativeElement.getBoundingClientRect();
        this._dropDelta = Math.round(
            (event.nextPageY - event.startY) / clientRect.height
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragEnd(event: IDragBaseEventArgs) {
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "position",
            "static"
        );
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "visibility",
            "visible"
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragOver(event: IDropBaseEventArgs) {
        if (this.dropAllowed) {
            this.renderer.addClass(
                event.owner.element.nativeElement,
                "igx-drag--push"
            );
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragLeave(event: IDropBaseEventArgs) {
        if (this.dropAllowed) {
            this.renderer.removeClass(
                event.owner.element.nativeElement,
                "igx-drag--push"
            );
        }
    }

    /**
     * @hidden
     * @internal
     */
    public getPanelCollapsed(panelType: PivotDimensionType): boolean {
        switch (panelType) {
            case PivotDimensionType.Column:
                return !this.columnsExpanded;
            case PivotDimensionType.Filter:
                return !this.filtersExpanded;
            case PivotDimensionType.Row:
                return !this.rowsExpanded;
            default:
                return !this.valuesExpanded;
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onCollapseChange(value: boolean, panelType: PivotDimensionType): void {
        switch (panelType) {
            case PivotDimensionType.Column:
                this.columnsExpanded = !value;
                this.columnsExpandedChange.emit(this.columnsExpanded);
                break;
            case PivotDimensionType.Filter:
                this.filtersExpanded = !value;
                this.filtersExpandedChange.emit(this.filtersExpanded);
                break;
            case PivotDimensionType.Row:
                this.rowsExpanded = !value;
                this.rowsExpandedChange.emit(this.rowsExpanded);
                break;
            default:
                this.valuesExpanded = !value;
                this.valuesExpandedChange.emit(this.valuesExpanded)
        }
    }
}

1	import { useAnimation } from "@angular/animations";
2	import {
3	ChangeDetectorRef,
4	Component,
5	EventEmitter,
6	HostBinding,
7	Input,
8	Output,
9	Renderer2,
10	booleanAttribute
11	} from "@angular/core";
12	import { first } from "rxjs/operators";
13	import { SortingDirection } from "../../data-operations/sorting-strategy";
14	import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxDragDirective, IgxDragHandleDirective } from "../../directives/drag-drop/drag-drop.directive";
15	import { ISelectionEventArgs } from "../../drop-down/drop-down.common";
16	import { IgxDropDownComponent } from "../../drop-down/drop-down.component";
17	import {
18	AbsoluteScrollStrategy,
19	AutoPositionStrategy,
20	OverlaySettings,
21	PositionSettings,
22	VerticalAlignment
23	} from "../../services/public_api";
24	import { ColumnType, PivotGridType } from "../common/grid.interface";
25	import {
26	IPivotAggregator,
27	IPivotDimension,
28	IPivotValue,
29	PivotDimensionType
30	} from "./pivot-grid.interface";
31	import { PivotUtil } from './pivot-util';
32	import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
33	import { IgxDropDownItemComponent } from "../../drop-down/drop-down-item.component";
34	import { IgxDropDownItemNavigationDirective } from "../../drop-down/drop-down-navigation.directive";
35	import { IgxExpansionPanelBodyComponent } from "../../expansion-panel/expansion-panel-body.component";
36	import { IgxChipComponent } from "../../chips/chip.component";
37	import { IgxExpansionPanelTitleDirective } from "../../expansion-panel/expansion-panel.directives";
38	import { IgxExpansionPanelHeaderComponent } from "../../expansion-panel/expansion-panel-header.component";
39	import { IgxExpansionPanelComponent } from "../../expansion-panel/expansion-panel.component";
40	import { IgxAccordionComponent } from "../../accordion/accordion.component";
41	import { IgxCheckboxComponent } from "../../checkbox/checkbox.component";
42	import { IgxListItemComponent } from "../../list/list-item.component";
43	import { IgxListComponent } from "../../list/list.component";
44	import { IgxInputDirective } from "../../directives/input/input.directive";
45	import { IgxPrefixDirective } from "../../directives/prefix/prefix.directive";
46	import { IgxIconComponent } from "../../icon/icon.component";
47	import { IgxInputGroupComponent } from "../../input-group/input-group.component";
48	import { fadeIn, fadeOut } from 'igniteui-angular/animations';
49	import { Size } from '../common/enums';
50	import { GridColumnDataType } from '../../data-operations/data-util';
51	import { IgxPivotGridStateService } from './pivot-grid-state.service';
52
53	interface IDataSelectorPanel {
54	name: string;
55	i18n: string;
56	type?: PivotDimensionType;
57	dataKey: string;
58	icon: string;
59	itemKey: string;
60	displayKey?: string;
61	sortable: boolean;
62	dragChannels: string[];
63	}
64
65	/* blazorIndirectRender
66	blazorComponent */
67	/* wcElementTag: igc-pivot-data-selector */
68	/**
69	* Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI
70	*
71	* @igxModule IgxPivotGridModule
72	* @igxGroup Grids & Lists
73	* @igxKeywords data selector, pivot, grid
74	* @igxTheme pivot-data-selector-theme
75	* @remarks
76	* The Ignite UI Data Selector has a searchable list with the grid data columns,
77	* there are also four expandable areas underneath for filters, rows, columns, and values
78	* is used for grouping and aggregating simple flat data into a pivot table.
79	* @example
80	* ```html
81	* <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="configuration">
82	* </igx-pivot-grid>
83	* <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
84	* ```
85	*/
86	@Component({
87	selector: "igx-pivot-data-selector",
88	templateUrl: "./pivot-data-selector.component.html",
89	imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
90	})
91	export class IgxPivotDataSelectorComponent {	2✔
92
93	/**
94	* Gets/sets whether the columns panel is expanded
95	* Get
96	* ```typescript
97	* const columnsPanelState: boolean = this.dataSelector.columnsExpanded;
98	* ```
99	* Set
100	* ```html
101	* <igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>
102	* ```
103	*
104	* Two-way data binding:
105	* ```html
106	* <igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>
107	* ```
108	*/
109	@Input({ transform: booleanAttribute })
110	public columnsExpanded = true;	69✔
111
112	/**
113	* @hidden
114	*/
115	@Output()
116	public columnsExpandedChange = new EventEmitter<boolean>();	69✔
117
118	/**
119	* Gets/sets whether the rows panel is expanded
120	* Get
121	* ```typescript
122	* const rowsPanelState: boolean = this.dataSelector.rowsExpanded;
123	* ```
124	* Set
125	* ```html
126	* <igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>
127	* ```
128	*
129	* Two-way data binding:
130	* ```html
131	* <igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>
132	* ```
133	*/
134	@Input({ transform: booleanAttribute })
135	public rowsExpanded = true;	69✔
136
137	/**
138	* @hidden
139	*/
140	@Output()
141	public rowsExpandedChange = new EventEmitter<boolean>();	69✔
142
143	/**
144	* Gets/sets whether the filters panel is expanded
145	* Get
146	* ```typescript
147	* const filtersPanelState: boolean = this.dataSelector.filtersExpanded;
148	* ```
149	* Set
150	* ```html
151	* <igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>
152	* ```
153	*
154	* Two-way data binding:
155	* ```html
156	* <igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>
157	* ```
158	*/
159	@Input({ transform: booleanAttribute })
160	public filtersExpanded = true;	69✔
161
162	/**
163	* @hidden
164	*/
165	@Output()
166	public filtersExpandedChange = new EventEmitter<boolean>();	69✔
167
168	/**
169	* Gets/sets whether the values panel is expanded
170	* Get
171	* ```typescript
172	* const valuesPanelState: boolean = this.dataSelector.valuesExpanded;
173	* ```
174	* Set
175	* ```html
176	* <igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>
177	* ```
178	*
179	* Two-way data binding:
180	* ```html
181	* <igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>
182	* ```
183	*/
184	@Input({ transform: booleanAttribute })
185	public valuesExpanded = true;	69✔
186
187	/**
188	* @hidden
189	*/
190	@Output()
191	public valuesExpandedChange = new EventEmitter<boolean>();	69✔
192
193	private _grid: PivotGridType;
194	private _dropDelta = 0;	69✔
195
196	/ @hidden @internal /
197	@HostBinding("class.igx-pivot-data-selector")
198	public cssClass = "igx-pivot-data-selector";	69✔
199
200	@HostBinding("style.--ig-size")
201	protected get size(): Size {
202	return this.grid?.gridSize;	467✔
203	}
204
205	/ @hidden @internal /
206	public dimensions: IPivotDimension[];
207
208	private _subMenuPositionSettings: PositionSettings = {	69✔
209	verticalStartPoint: VerticalAlignment.Bottom,
210	closeAnimation: undefined,
211	};
212
213	private _subMenuOverlaySettings: OverlaySettings = {	69✔
214	closeOnOutsideClick: true,
215	modal: false,
216	positionStrategy: new AutoPositionStrategy(
217	this._subMenuPositionSettings
218	),
219	scrollStrategy: new AbsoluteScrollStrategy(),
220	};
221
222	/* blazorSuppress */
223	public animationSettings = {	69✔
224	closeAnimation: useAnimation(fadeOut, {
225	params: {
226	duration: "0ms",
227	},
228	}),
229	openAnimation: useAnimation(fadeIn, {
230	params: {
231	duration: "0ms",
232	},
233	}),
234	};
235
236	/** @hidden @internal */
237	public aggregateList: IPivotAggregator[] = [];	69✔
238	/** @hidden @internal */
239	public value: IPivotValue;
240	/** @hidden @internal */
241	public ghostText: string;
242	/** @hidden @internal */
243	public ghostWidth: number;
244	/** @hidden @internal */
245	public dropAllowed: boolean;
246	/** @hidden @internal */
247	public get dims(): IPivotDimension[] {
248	return this._grid?.allDimensions \|\| [];	535✔
249	}
250	/** @hidden @internal */
251	public get values(): IPivotValue[] {
252	return this._grid?.pivotConfiguration.values \|\| [];	535✔
253	}
254
255	constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef, private pivotStateService: IgxPivotGridStateService) { }	69✔
256
257	/**
258	* @hidden @internal
259	*/
260	public _panels: IDataSelectorPanel[] = [	69✔
261	{
262	name: "Filters",
263	i18n: 'igx_grid_pivot_selector_filters',
264	type: PivotDimensionType.Filter,
265	dataKey: "filterDimensions",
266	icon: "filter_list",
267	itemKey: "memberName",
268	displayKey: 'displayName',
269	sortable: false,
270	dragChannels: ["Filters", "Columns", "Rows"]
271	},
272	{
273	name: "Columns",
274	i18n: 'igx_grid_pivot_selector_columns',
275	type: PivotDimensionType.Column,
276	dataKey: "columnDimensions",
277	icon: "view_column",
278	itemKey: "memberName",
279	displayKey: 'displayName',
280	sortable: true,
281	dragChannels: ["Filters", "Columns", "Rows"]
282	},
283	{
284	name: "Rows",
285	i18n: 'igx_grid_pivot_selector_rows',
286	type: PivotDimensionType.Row,
287	dataKey: "rowDimensions",
288	icon: "table_rows",
289	itemKey: "memberName",
290	displayKey: 'displayName',
291	sortable: true,
292	dragChannels: ["Filters", "Columns", "Rows"]
293	},
294	{
295	name: "Values",
296	i18n: 'igx_grid_pivot_selector_values',
297	type: null,
298	dataKey: "values",
299	icon: "functions",
300	itemKey: "member",
301	displayKey: 'displayName',
302	sortable: false,
303	dragChannels: ["Values"]
304	},
305	];
306
307
308	/* treatAsRef */
309	/**
310	* Sets the grid.
311	*/
312	@Input()
313	public set grid(value: PivotGridType) {
314	this._grid = value;	68✔
315	}
316
317	/* treatAsRef */
318	/**
319	* Returns the grid.
320	*/
321	public get grid(): PivotGridType {
322	return this._grid;	24,507✔
323	}
324
325	/**
326	* @hidden
327	* @internal
328	*/
329	public onItemSort(
330	_: Event,
331	dimension: IPivotDimension,
332	dimensionType: PivotDimensionType
333	) {
334	if (	6!
335	!this._panels.find(
336	(panel: IDataSelectorPanel) => panel.type === dimensionType	15✔
337	).sortable
338	)
339	return;	×
340
341	const startDirection = dimension.sortDirection \|\| SortingDirection.None;	6✔
342	const direction = startDirection + 1 > SortingDirection.Desc ?	6✔
343	SortingDirection.None : startDirection + 1;
344	this.grid.sortDimension(dimension, direction);	6✔
345	}
346
347	/**
348	* @hidden
349	* @internal
350	*/
351	public onFilteringIconPointerDown(event: PointerEvent) {
352	event.stopPropagation();	×
353	event.preventDefault();	×
354	}
355
356	/**
357	* @hidden
358	* @internal
359	*/
360	public onFilteringIconClick(event: MouseEvent, dimension: IPivotDimension) {
361	event.stopPropagation();	2✔
362	event.preventDefault();	2✔
363
364	let dim = dimension;	2✔
365	let col: ColumnType;
366
367	while (dim) {	2✔
368	col = this.grid.dimensionDataColumns.find(	2✔
369	(x) => x.field === dim.memberName	3✔
370	);
371	if (col) {	2!
372	break;	2✔
373	} else {
374	dim = dim.childLevel;	×
375	}
376	}
377
378	this.grid.filteringService.toggleFilterDropdown(event.target, col);	2✔
379	}
380
381	/**
382	* @hidden
383	* @internal
384	*/
385	protected getDimensionState(dimensionType: PivotDimensionType) {
386	switch (dimensionType) {	1!
387	case PivotDimensionType.Row:
388	return this.grid.rowDimensions;	×
389	case PivotDimensionType.Column:
390	return this.grid.columnDimensions;	×
391	case PivotDimensionType.Filter:
392	return this.grid.filterDimensions;	×
393	default:
394	return null;	1✔
395	}
396	}
397
398	/**
399	* @hidden
400	* @internal
401	*/
402	protected moveValueItem(itemId: string) {
403	const aggregation = this.grid.pivotConfiguration.values;	1✔
404	const valueIndex =
405	aggregation.findIndex((x) => x.member === itemId) !== -1	2!
406	? aggregation?.findIndex((x) => x.member === itemId)	2✔
407	: aggregation.length;
408	const newValueIndex =
409	valueIndex + this._dropDelta < 0 ? 0 : valueIndex + this._dropDelta;	1!
410
411	const aggregationItem = aggregation.find(	1✔
412	(x) => x.member === itemId \|\| x.displayName === itemId	2✔
413	);
414
415	if (aggregationItem) {	1✔
416	this.grid.moveValue(aggregationItem, newValueIndex);	1✔
417	this.grid.valuesChange.emit({	1✔
418	values: this.grid.pivotConfiguration.values,
419	});
420	}
421	}
422
423	/**
424	* @hidden
425	* @internal
426	*/
427	public onItemDropped(
428	event: IDropDroppedEventArgs,
429	dimensionType: PivotDimensionType
430	) {
431	if (!this.dropAllowed) {	1!
432	return;	×
433	}
434
435	const dimension = this.grid.getDimensionsByType(dimensionType);	1✔
436	const dimensionState = this.getDimensionState(dimensionType);	1✔
437	const itemId = event.drag.element.nativeElement.id;	1✔
438	const targetId = event.owner.element.nativeElement.id;	1✔
439	const dimensionItem = dimension?.find((x) => x.memberName === itemId);	1✔
440	const itemIndex =
441	dimension?.findIndex((x) => x?.memberName === itemId) !== -1	1!
442	? dimension?.findIndex((x) => x.memberName === itemId)	×
443	: dimension?.length;
444	const dimensions = this.grid.allDimensions.filter((x) => x && x.memberName === itemId);	2✔
445
446	const reorder =
447	dimensionState?.findIndex((item) => item.memberName === itemId) !==	1✔
448	-1;
449
450	let targetIndex =
451	targetId !== ""	1!
452	? dimension?.findIndex((x) => x.memberName === targetId)	×
453	: dimension?.length;
454
455	if (!dimension) {	1✔
456	this.moveValueItem(itemId);	1✔
457	}
458
459	if (reorder) {	1✔
460	targetIndex =	1✔
461	itemIndex + this._dropDelta < 0	1!
462	? 0
463	: itemIndex + this._dropDelta;
464	}
465
466	if (dimensionItem) {	1!
467	this.grid.moveDimension(dimensionItem, dimensionType, targetIndex);	×
468	} else {
469	const newDim = dimensions.find((x) => x.memberName === itemId);	1✔
470	this.grid.moveDimension(newDim, dimensionType, targetIndex);	1✔
471	}
472
473	this.grid.dimensionsChange.emit({	1✔
474	dimensions: dimension,
475	dimensionCollectionType: dimensionType,
476	});
477	}
478
479	/**
480	* @hidden
481	* @internal
482	*/
483	protected updateDropDown(
484	value: IPivotValue,
485	dropdown: IgxDropDownComponent
486	) {
487	this.value = value;	×
488	dropdown.width = "200px";	×
489	this.aggregateList = PivotUtil.getAggregateList(value, this.grid);	×
490	this.cdr.detectChanges();	×
491	dropdown.open(this._subMenuOverlaySettings);	×
492	}
493
494	/**
495	* @hidden
496	* @internal
497	*/
498	public onSummaryClick(
499	event: MouseEvent,
500	value: IPivotValue,
501	dropdown: IgxDropDownComponent
502	) {
503	this._subMenuOverlaySettings.target =	×
504	event.currentTarget as HTMLElement;
505
506	if (dropdown.collapsed) {	×
507	this.updateDropDown(value, dropdown);	×
508	} else {
509	// close for previous chip
510	dropdown.close();	×
511	dropdown.closed.pipe(first()).subscribe(() => {	×
512	this.updateDropDown(value, dropdown);	×
513	});
514	}
515	}
516
517	/**
518	* @hidden
519	* @internal
520	*/
521	public onAggregationChange(event: ISelectionEventArgs) {
NEW 522	const valueMember = this.value.member;	×
NEW 523	const columns = this.grid.columns;	×
524
525	if (!this.isSelected(event.newSelection.value)) {	×
526	this.value.aggregate = event.newSelection.value;	×
527
NEW 528	const isCountAggregator = this.value.aggregate.key.toLowerCase() === 'count';	×
NEW 529	const isSingleValue = this.grid.values.length === 1;	×
530
NEW 531	columns.forEach(column => {	×
NEW 532	const isRelevantColumn = column.field?.includes(valueMember);	×
NEW 533	const isCurrencyColumn = column.dataType === GridColumnDataType.Currency;	×
534
NEW 535	if (isSingleValue) {	×
NEW 536	if (isCountAggregator && isCurrencyColumn) {	×
NEW 537	column.dataType = GridColumnDataType.Number;	×
NEW 538	this.pivotStateService.addCurrencyColumn(valueMember);	×
NEW 539	} else if (this.pivotStateService.isCurrencyColumn(valueMember)) {	×
NEW 540	column.dataType = GridColumnDataType.Currency;	×
541	}
NEW 542	} else if (isRelevantColumn) {	×
NEW 543	if (isCountAggregator && isCurrencyColumn) {	×
NEW 544	column.dataType = GridColumnDataType.Number;	×
NEW 545	this.pivotStateService.addCurrencyColumn(valueMember);	×
NEW 546	} else if (this.pivotStateService.isCurrencyColumn(valueMember)) {	×
NEW 547	column.dataType = GridColumnDataType.Currency;	×
NEW 548	this.pivotStateService.removeCurrencyColumn(valueMember);	×
549	}
550	}
551	});
552
553	this.grid.pipeTrigger++;	×
554	this.grid.cdr.markForCheck();	×
555	}
556	}
557
558	/**
559	* @hidden
560	* @internal
561	*/
562	public isSelected(val: IPivotAggregator) {
563	return this.value.aggregate.key === val.key;	×
564	}
565
566	/**
567	* @hidden
568	* @internal
569	*/
570	public ghostCreated(event: IDragGhostBaseEventArgs, value: string) {
571	const { width: itemWidth } =
572	event.owner.element.nativeElement.getBoundingClientRect();	1✔
573	this.ghostWidth = itemWidth;	1✔
574	this.ghostText = value;	1✔
575	this.renderer.setStyle(	1✔
576	event.owner.element.nativeElement,
577	"position",
578	"absolute"
579	);
580	this.renderer.setStyle(	1✔
581	event.owner.element.nativeElement,
582	"visibility",
583	"hidden"
584	);
585	}
586
587	/**
588	* @hidden
589	* @internal
590	*/
591	public toggleItem(item: IPivotDimension \| IPivotValue) {
592	if (item as IPivotValue) {	1✔
593	this.grid.toggleValue(item as IPivotValue);	1✔
594	}
595
596	if (item as IPivotDimension) {	1✔
597	this.grid.toggleDimension(item as IPivotDimension);	1✔
598	}
599	}
600
601	/**
602	* @hidden
603	* @internal
604	*/
605	public onPanelEntry(event: IDropBaseEventArgs, panel: string) {
606	this.dropAllowed = event.dragData.gridID === this.grid.id && event.dragData.selectorChannels?.some(	2✔
607	(channel: string) => channel === panel	2✔
608	);
609	}
610
611	/**
612	* @hidden
613	* @internal
614	*/
615	public onItemDragMove(event: IDragMoveEventArgs) {
616	const clientRect =
617	event.owner.element.nativeElement.getBoundingClientRect();	2✔
618	this._dropDelta = Math.round(	2✔
619	(event.nextPageY - event.startY) / clientRect.height
620	);
621	}
622
623	/**
624	* @hidden
625	* @internal
626	*/
627	public onItemDragEnd(event: IDragBaseEventArgs) {
628	this.renderer.setStyle(	1✔
629	event.owner.element.nativeElement,
630	"position",
631	"static"
632	);
633	this.renderer.setStyle(	1✔
634	event.owner.element.nativeElement,
635	"visibility",
636	"visible"
637	);
638	}
639
640	/**
641	* @hidden
642	* @internal
643	*/
644	public onItemDragOver(event: IDropBaseEventArgs) {
645	if (this.dropAllowed) {	2✔
646	this.renderer.addClass(	2✔
647	event.owner.element.nativeElement,
648	"igx-drag--push"
649	);
650	}
651	}
652
653	/**
654	* @hidden
655	* @internal
656	*/
657	public onItemDragLeave(event: IDropBaseEventArgs) {
658	if (this.dropAllowed) {	2✔
659	this.renderer.removeClass(	2✔
660	event.owner.element.nativeElement,
661	"igx-drag--push"
662	);
663	}
664	}
665
666	/**
667	* @hidden
668	* @internal
669	*/
670	public getPanelCollapsed(panelType: PivotDimensionType): boolean {
671	switch (panelType) {	2,140✔
672	case PivotDimensionType.Column:
673	return !this.columnsExpanded;	535✔
674	case PivotDimensionType.Filter:
675	return !this.filtersExpanded;	535✔
676	case PivotDimensionType.Row:
677	return !this.rowsExpanded;	535✔
678	default:
679	return !this.valuesExpanded;	535✔
680	}
681	}
682
683	/**
684	* @hidden
685	* @internal
686	*/
687	public onCollapseChange(value: boolean, panelType: PivotDimensionType): void {
688	switch (panelType) {	4✔
689	case PivotDimensionType.Column:
690	this.columnsExpanded = !value;	1✔
691	this.columnsExpandedChange.emit(this.columnsExpanded);	1✔
692	break;	1✔
693	case PivotDimensionType.Filter:
694	this.filtersExpanded = !value;	1✔
695	this.filtersExpandedChange.emit(this.filtersExpanded);	1✔
696	break;	1✔
697	case PivotDimensionType.Row:
698	this.rowsExpanded = !value;	1✔
699	this.rowsExpandedChange.emit(this.rowsExpanded);	1✔
700	break;	1✔
701	default:
702	this.valuesExpanded = !value;	1✔
703	this.valuesExpandedChange.emit(this.valuesExpanded)	1✔
704	}
705	}
706	}

IgniteUI / igniteui-angular / 13587037457

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous