diff --git a/package-lock.json b/package-lock.json index 45bf03e45a..f4cf8c5bcb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "igniteui-angular": "^19.1.0", "igniteui-angular-charts": "^19.0.0", "igniteui-angular-core": "^19.0.0", - "igniteui-angular-extras": "^19.0.3", + "igniteui-angular-extras": "^19.1.1", "igniteui-angular-i18n": "^19.1.0", "igniteui-dockmanager": "^1.16.0", "igniteui-live-editing": "^3.0.0", @@ -13132,9 +13132,9 @@ } }, "node_modules/igniteui-angular-extras": { - "version": "19.0.3", - "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-19.0.3.tgz", - "integrity": "sha512-sG3uTLLV/KZk5aOexdKtevcmp5wUd/FGEN60CXX2IQRzWdABIC/khzNrAYpP6tnyi8QsYR+gjrXQb+kr3RJUMQ==", + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-19.1.1.tgz", + "integrity": "sha512-kuUmQnvaSbOXUKyoYMC/rz9d7lALjLoPMWFkW/m6HB09e/YcvhGncYuyYC88Mk9xo8643g9HY/Qkkx6GvNBYqg==", "dependencies": { "igniteui-trial-watermark": "^3.0.2", "tslib": "^2.0.0" diff --git a/package.json b/package.json index a9b43e2818..78e9dd8ae5 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "igniteui-angular": "^19.1.0", "igniteui-angular-charts": "^19.0.0", "igniteui-angular-core": "^19.0.0", - "igniteui-angular-extras": "^19.0.3", + "igniteui-angular-extras": "^19.1.1", "igniteui-angular-i18n": "^19.1.0", "igniteui-dockmanager": "^1.16.0", "igniteui-live-editing": "^3.0.0", diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html index c2529ead80..0d16bc3837 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html @@ -1,7 +1,7 @@
+ primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"> @@ -111,7 +111,7 @@
@if (selectedCharts[chart]) { @@ -133,3 +133,6 @@ } + + Incompatible data + \ No newline at end of file diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts index 91c14d6946..0b4b11672f 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts @@ -1,12 +1,13 @@ /* eslint-disable max-len */ -import { AfterViewInit, ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren } from '@angular/core'; -import { IgxChartIntegrationDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras'; +import { AfterViewInit, ChangeDetectorRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren, TemplateRef } from '@angular/core'; +import { IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, IDeterminedChartTypesArgs } from 'igniteui-angular-extras'; import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager'; import { FinancialData } from '../../data/financialData'; import { FloatingPanesService } from '../../services/floating-panes.service'; import { DockSlotComponent } from './dock-slot/dock-slot.component'; -import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxDividerDirective, IgxBadgeComponent } from 'igniteui-angular'; +import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxDividerDirective, IgxBadgeComponent, IColumnSelectionEventArgs } from 'igniteui-angular'; import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common'; +import { debounceTime } from 'rxjs/operators'; @Pipe({ name: 'filterType' @@ -53,10 +54,12 @@ export class HastDuplicateLayouts implements PipeTransform { templateUrl: './data-analysis-dock-manager.component.html', styleUrls: ['./data-analysis-dock-manager.component.scss'], providers: [FloatingPanesService], - imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], + imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) -export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { +export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; @ViewChild('dock', { read: ElementRef }) public dockManager: ElementRef; @@ -67,6 +70,10 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { @ViewChildren(DockSlotComponent) public dockSlots: QueryList; + @ViewChild('template', { read: TemplateRef }) + public emptyChartTemplate: TemplateRef; + + public availableCharts: CHART_TYPE[] = []; public allCharts: CHART_TYPE[] = []; public data; public chartData = []; @@ -81,7 +88,7 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { } public ngAfterViewInit() { - this.allCharts = this.chartIntegration.getAvailableCharts(); + this.allCharts = this.chartIntegration.getAllChartTypes(); this.cdr.detectChanges(); const pieChartOptions = { labelsPosition: 4, @@ -96,6 +103,30 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { chart.indexOf('Bar') === -1 || chart !== CHART_TYPE.PIE) .forEach(chart => this.chartIntegration.setChartComponentOptions(chart, OPTIONS_TYPE.X_AXIS, { labelAngle: 30 })); + + this.chartIntegration.onChartTypesDetermined.subscribe((args: IDeterminedChartTypesArgs) => { + if (args.chartsAvailability.size === 0 || args.chartsForCreation.length === 0) { + this.chartIntegration.disableCharts(this.allCharts); + } else { + args.chartsAvailability.forEach((isAvailable, chart) => { + if (args.chartsForCreation.indexOf(chart) === -1) { + this.chartIntegration.disableCharts([chart]); + } else { + this.chartIntegration.enableCharts([chart]); + } + }); + } + this.availableCharts = this.chartIntegration.getAvailableCharts(); + }); + this.cdr.detectChanges(); + + this.grid.rangeSelected.subscribe(range => { + this.createChartCommonLogic(); + }); + + this.grid.columnSelectionChanging.pipe(debounceTime(100)).subscribe((args: IColumnSelectionEventArgs) => { + this.createChartCommonLogic(); + }); } // eslint-disable-next-line @typescript-eslint/member-ordering @@ -163,7 +194,6 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { this.paneService.appendPane(splitPane); const chartHost = this.getChartHostFromSlot(type); chartHost.viewContainerRef.clear(); - this.chartIntegration.chartFactory const chart = this.chartIntegration.chartFactory(type, chartHost.viewContainerRef); this.dockManager.nativeElement.layout.floatingPanes.push(splitPane); @@ -171,4 +201,40 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit { this.selectedCharts[type] = chart; this.cdr.detectChanges(); } -} + + public createChartCommonLogic() { + if (Object.keys(this.selectedCharts).length !== 0) { + setTimeout(() => { + Object.keys(this.selectedCharts).forEach((c: CHART_TYPE) => { + const chartHost = this.getChartHostFromSlot(c); + if (this.availableCharts.indexOf(c) !== -1) { + if (c !== CHART_TYPE.PIE && typeof this.selectedCharts[c] === 'object') { + this.selectedCharts[c] = this.chartIntegration.chartFactory(c, null, this.selectedCharts[c]); + } else { + chartHost.viewContainerRef.clear(); + this.selectedCharts[c] = this.chartIntegration.chartFactory(c, chartHost.viewContainerRef); + } + } else { + this.clearViewContainer(chartHost.viewContainerRef); + const embeddedView = chartHost.viewContainerRef.createEmbeddedView(this.emptyChartTemplate); + embeddedView.detectChanges(); + this.selectedCharts[c] = 'Empty'; + } + }); + }); + } + } + + private clearViewContainer(viewContainerRef: ViewContainerRef) { + for (let i = viewContainerRef.length -1; i >= 0; i--) { + const viewRef = viewContainerRef.get(i); + if (viewRef) { + const componentInstance = (viewRef as any).context; + if (componentInstance && (componentInstance as any).destroy) { + (componentInstance as any).destroy(); + } + } + } + viewContainerRef.clear(); + } +} \ No newline at end of file diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts index 5ebb2325b5..36392c552e 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts @@ -1,6 +1,6 @@ /* eslint-disable max-len */ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; -import { IgxChartIntegrationDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras'; +import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective, OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras'; import { FinancialData } from '../data/financialData'; import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular'; @@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common'; selector: 'app-grid-dynamic-chart-data', templateUrl: './grid-dynamic-chart-data.component.html', styleUrls: ['./grid-dynamic-chart-data.component.scss'], - imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe] + imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe] }) export class GridDynamicChartDataComponent implements OnInit, AfterViewInit { @@ -42,4 +42,4 @@ export class GridDynamicChartDataComponent implements OnInit, AfterViewInit { public formatCurrency(value: number) { return '$' + value.toFixed(3); } -} +} \ No newline at end of file diff --git a/projects/app-lob/src/app/index/index.component.scss b/projects/app-lob/src/app/index/index.component.scss index fbe880c2a5..4c40524bab 100644 --- a/projects/app-lob/src/app/index/index.component.scss +++ b/projects/app-lob/src/app/index/index.component.scss @@ -4,6 +4,10 @@ .main { width: calc(100% - 300px); + igx-navbar { + position: relative; + z-index: 0; + } } .content {