Skip to content

Commit 3c92787

Browse files
dobromirtsdobromirts
committed
fix(data-analysis): charts update functionality and extras version update
1 parent 25f5d90 commit 3c92787

4 files changed

Lines changed: 76 additions & 12 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"igniteui-angular": "^19.1.0-rc.0",
6969
"igniteui-angular-charts": "^19.0.0",
7070
"igniteui-angular-core": "^19.0.0",
71-
"igniteui-angular-extras": "^19.0.3",
71+
"igniteui-angular-extras": "file:../../igniteui-angular-extras-0.0.0.tgz",
7272
"igniteui-angular-i18n": "^19.0.10",
7373
"igniteui-dockmanager": "^1.16.0",
7474
"igniteui-live-editing": "^3.0.0",

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
22
<div slot="grid" igxOverlayOutlet style="height: 100%">
3-
<igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
4-
[chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
3+
<igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu [displayCreationTab]="false"
4+
primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
55
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
66
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
77
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>
@@ -111,7 +111,7 @@
111111
<div
112112
(click)="createChart(chart)"
113113
title="{{chart}}"
114-
[ngClass]="{'disabled': allCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
114+
[ngClass]="{'disabled': availableCharts.indexOf(chart) === -1, 'selected': chart | hastDuplicateLayouts: dock.layout: selectedCharts}"
115115
style="width: 60px; margin-right: 20px; cursor: pointer; position: relative;">
116116
<img src="assets/images/svg/charts/{{chart}}.svg" />
117117
@if (selectedCharts[chart]) {
@@ -133,3 +133,6 @@
133133
}
134134
</igc-dockmanager>
135135

136+
<ng-template #template>
137+
<span>Incompatible data</span>
138+
</ng-template>

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

Lines changed: 67 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
2-
import { AfterViewInit, ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren } from '@angular/core';
3-
import { IgxChartIntegrationDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
2+
import { AfterViewInit, ChangeDetectorRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren, TemplateRef } from '@angular/core';
3+
import { IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, IDeterminedChartTypesArgs } from 'igniteui-angular-extras';
44
import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
55
import { FinancialData } from '../../data/financialData';
66
import { FloatingPanesService } from '../../services/floating-panes.service';
@@ -53,10 +53,12 @@ export class HastDuplicateLayouts implements PipeTransform {
5353
templateUrl: './data-analysis-dock-manager.component.html',
5454
styleUrls: ['./data-analysis-dock-manager.component.scss'],
5555
providers: [FloatingPanesService],
56-
imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
56+
imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
5757
schemas: [CUSTOM_ELEMENTS_SCHEMA]
5858
})
59-
export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
59+
export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
60+
@ViewChild('grid', { read: IgxGridComponent, static: true })
61+
public grid: IgxGridComponent;
6062

6163
@ViewChild('dock', { read: ElementRef })
6264
public dockManager: ElementRef<HTMLIgcDockmanagerElement>;
@@ -67,6 +69,10 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
6769
@ViewChildren(DockSlotComponent)
6870
public dockSlots: QueryList<DockSlotComponent>;
6971

72+
@ViewChild('template', { read: TemplateRef })
73+
public emptyChartTemplate: TemplateRef<any>;
74+
75+
public availableCharts: CHART_TYPE[] = [];
7076
public allCharts: CHART_TYPE[] = [];
7177
public data;
7278
public chartData = [];
@@ -81,7 +87,7 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
8187
}
8288

8389
public ngAfterViewInit() {
84-
this.allCharts = this.chartIntegration.getAvailableCharts();
90+
this.allCharts = this.chartIntegration.getAllChartTypes();
8591
this.cdr.detectChanges();
8692
const pieChartOptions = {
8793
labelsPosition: 4,
@@ -96,6 +102,26 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
96102
chart.indexOf('Bar') === -1 ||
97103
chart !== CHART_TYPE.PIE)
98104
.forEach(chart => this.chartIntegration.setChartComponentOptions(chart, OPTIONS_TYPE.X_AXIS, { labelAngle: 30 }));
105+
106+
this.chartIntegration.onChartTypesDetermined.subscribe((args: IDeterminedChartTypesArgs) => {
107+
if (args.chartsAvailability.size === 0 || args.chartsForCreation.length === 0) {
108+
this.chartIntegration.disableCharts(this.allCharts);
109+
} else {
110+
args.chartsAvailability.forEach((isAvailable, chart) => {
111+
if (args.chartsForCreation.indexOf(chart) === -1) {
112+
this.chartIntegration.disableCharts([chart]);
113+
} else {
114+
this.chartIntegration.enableCharts([chart]);
115+
}
116+
});
117+
}
118+
this.availableCharts = this.chartIntegration.getAvailableCharts();
119+
});
120+
this.cdr.detectChanges();
121+
122+
this.grid.rangeSelected.subscribe(range => {
123+
this.createChartCommonLogic();
124+
});
99125
}
100126

101127
// eslint-disable-next-line @typescript-eslint/member-ordering
@@ -163,12 +189,47 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
163189
this.paneService.appendPane(splitPane);
164190
const chartHost = this.getChartHostFromSlot(type);
165191
chartHost.viewContainerRef.clear();
166-
this.chartIntegration.chartFactory
167192
const chart = this.chartIntegration.chartFactory(type, chartHost.viewContainerRef);
168193

169194
this.dockManager.nativeElement.layout.floatingPanes.push(splitPane);
170195
this.docLayout = { ...this.dockManager.nativeElement.layout };
171196
this.selectedCharts[type] = chart;
172197
this.cdr.detectChanges();
173198
}
199+
200+
public createChartCommonLogic() {
201+
if (Object.keys(this.selectedCharts).length !== 0) {
202+
setTimeout(() => {
203+
Object.keys(this.selectedCharts).forEach((c: CHART_TYPE) => {
204+
const chartHost = this.getChartHostFromSlot(c);
205+
if (this.availableCharts.indexOf(c) !== -1) {
206+
if (c !== CHART_TYPE.PIE && typeof this.selectedCharts[c] === 'object') {
207+
this.selectedCharts[c] = this.chartIntegration.chartFactory(c, null, this.selectedCharts[c]);
208+
} else {
209+
chartHost.viewContainerRef.clear();
210+
this.selectedCharts[c] = this.chartIntegration.chartFactory(c, chartHost.viewContainerRef);
211+
}
212+
} else {
213+
this.clearViewContainer(chartHost.viewContainerRef);
214+
const embeddedView = chartHost.viewContainerRef.createEmbeddedView(this.emptyChartTemplate);
215+
embeddedView.detectChanges();
216+
this.selectedCharts[c] = 'Empty';
217+
}
218+
});
219+
});
220+
}
221+
}
222+
223+
private clearViewContainer(viewContainerRef: ViewContainerRef) {
224+
for (let i = viewContainerRef.length -1; i >= 0; i--) {
225+
const viewRef = viewContainerRef.get(i);
226+
if (viewRef) {
227+
const componentInstance = (viewRef as any).context;
228+
if (componentInstance && (componentInstance as any).destroy) {
229+
(componentInstance as any).destroy();
230+
}
231+
}
232+
}
233+
viewContainerRef.clear();
234+
}
174235
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
22
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
3-
import { IgxChartIntegrationDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
3+
import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective, OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
44

55
import { FinancialData } from '../data/financialData';
66
import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
1010
selector: 'app-grid-dynamic-chart-data',
1111
templateUrl: './grid-dynamic-chart-data.component.html',
1212
styleUrls: ['./grid-dynamic-chart-data.component.scss'],
13-
imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
13+
imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
1414
})
1515
export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
1616

0 commit comments

Comments
 (0)