Merge pull request #3614 from IgniteUI/dTsvekov/fix-data-analysis-sample-master

fix(data-analysis): charts update functionality and extras update

Author: zdrawku

package-lock.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",

package.json

@@ -1,7 +1,7 @@
 <igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
   <div slot="grid" igxOverlayOutlet style="height: 100%">
     <igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
-      [chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
+      primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
       <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
       <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
       <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>
@@ -111,7 +111,7 @@
                 <div
                   (click)="createChart(chart)"
                   title="{{chart}}"
-                  [ngClass]="{'disabled': allCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
+                  [ngClass]="{'disabled': availableCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
                   style="width: 60px; margin-right: 20px; cursor: pointer; position: relative;">
                   <img src="assets/images/svg/charts/{{chart}}.svg" />
                   @if (selectedCharts[chart]) {
@@ -133,3 +133,6 @@
   }
 </igc-dockmanager>
 
+<ng-template #template>
+    <span>Incompatible data</span>
+</ng-template>

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html

@@ -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<HTMLIgcDockmanagerElement>;
@@ -67,6 +70,10 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
     @ViewChildren(DockSlotComponent)
     public dockSlots: QueryList<DockSlotComponent>;
 
+    @ViewChild('template', { read: TemplateRef })
+    public emptyChartTemplate: TemplateRef<any>;
+
+    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,12 +194,47 @@ 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);
         this.docLayout = { ...this.dockManager.nativeElement.layout };
         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();
+    }
+}

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.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);
     }
-}
+}

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts

@@ -4,6 +4,10 @@
 
 .main {
     width: calc(100% - 300px);
+    igx-navbar {
+        position: relative;
+        z-index: 0;
+    }
 }
 
 .content {