15849983933

Committed 24 Jun 2025 12:07PM UTC coverage: 91.421% (-0.02%) from 91.437%

Build # 15849983933

Build Type

Pull #15925

github

Committed by

web-flow

Commit Message

fix(igxGrid): Use default scheduler when throttling. (#15884)

Pull Request Pull Request #15925: Mass Merge 20.0.x to master

Run Details

13388 of 15716 branches covered (85.19%)

59 of 84 new or added lines in 13 files covered. (70.24%)

40 existing lines in 4 files now uncovered.

27068 of 29608 relevant lines covered (91.42%)

36679.68 hits per line

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

78.91

/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';

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;

    /**
     * Emitted when the columns panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (columnsExpandedChange)="columnsExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @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;

    /**
     * Emitted when the rows panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (rowsExpandedChange)="rowsExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @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;

    /**
     * Emitted when the filters panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (filtersExpandedChange)="filtersExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @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;

    /**
     * Emitted when the values panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (valuesExpandedChange)="valuesExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @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) { }

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

IgniteUI / igniteui-angular / 15849983933

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