Commit ca192d78: Merged PR 66: Enhanced directives functionality and chartFactory options...

Merged PR 66: Enhanced directives functionality and chartFactory options...

ca192d78

Dobromir Tsvetkov

authored and

Zdravko Kolev

committed Feb 28

master(!66)

succeeded

Files

Details



	projects/igniteui-angular-extras/src/lib
	context-menu
	context-menu.component.html
	context-menu.component.ts
	igx-context-menu.directive.ts
	directives/chart-integration
	chart-integration.directive.ts
	initializers.ts
	package-lock.json
	package.json

context-menu.component.html

-1+1

/projects/igniteui-angular-extras/src/lib/context-menu/context-menu.component.html

View

</div>

</igx-tab-content>

</igx-tab-item>

<igx-tab-item [disabled]="!chartTypes.length">

<igx-tab-item *ngIf="displayCreationTab" [disabled]="!chartTypes.length">

<igx-tab-header>

<span igxTabHeaderLabel>Create Chart</span>

</igx-tab-header>

context-menu.component.ts

-1+24

/projects/igniteui-angular-extras/src/lib/context-menu/context-menu.component.ts

View

import { AfterViewInit, Component, ElementRef, ViewChild, ViewContainerRef, OnDestroy, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { CommonModule, NgFor } from '@angular/common';

import { CommonModule, NgFor, NgIf } from '@angular/common';

import { Subject } from 'rxjs';

import { takeUntil } from 'rxjs/operators';

import {

imports: [

CommonModule,

NgFor,

NgIf,

SvgPipe,

IgxToggleDirective,

IgxIconComponent,

public textFormatters = [];

public currentChartType;

public currentFormatter;

public displayCreationTab = true;

private destroy$ = new Subject<any>();

private _dialogId;

private _chartDialogOS: OverlaySettings = { closeOnOutsideClick: false };

public ngAfterViewInit() {

this.chartTypes = this.contextDirective.charts;

this.textFormatters = this.contextDirective.formatters;

this.displayCreationTab = this.contextDirective.displayCreationTab;

if (this.contextDirective.chartsDirective) {

this.contextDirective.chartsDirective.onChartTypesDetermined.pipe(takeUntil(this.destroy$))

instance.currentChartType = this.currentChartType;

instance.allCharts = this.chartTypes;

instance.chartDirective = this.contextDirective.chartsDirective;

// TODO: This code handles resizing for a fullscreen dialog when the chart dialog resize event is triggered.

// Currently, it determines the visible child element by filtering based on visibility and CSS classes,

// which is not a reliable or optimal approach. Instead, this should be improved by properly handling

// when elements in the overlay are detached and ensuring chart dialog is only available.

instance.chartDialogResizeNotify?.subscribe(resizedContentArgs => {

if ((this.overlayService as any)._overlayElement) {

const overlayElement = (this.overlayService as any)._overlayElement;

const visibleChild = Array.from(overlayElement.children).find(

(child: HTMLElement) =>

getComputedStyle(child).visibility !== 'hidden' &&

child.classList.contains('igx-overlay__wrapper--flex')

) as HTMLElement | null;

if (visibleChild) {

const targetElement = visibleChild.children[0] as HTMLElement | null;

if (targetElement && targetElement.style) {

targetElement.style.width = resizedContentArgs[0].contentRect.width + 'px';

}

});

instance.onClose?.subscribe(() => this.closeDialog());

}

});

igx-context-menu.directive.ts

-1+2

/projects/igniteui-angular-extras/src/lib/context-menu/igx-context-menu.directive.ts

View

Directive,

EventEmitter,

Output,

Input,

OnInit,

OnDestroy,

Optional,

selector: '[igxContextMenu]',

})

export class IgxContextMenuDirective implements OnInit, AfterViewInit, OnDestroy {

@Input() public displayCreationTab: boolean = true;

@Output() public onButtonClose = new EventEmitter<any>();

public formatters = [];

chart-integration.directive.ts

-9+19

/projects/igniteui-angular-extras/src/lib/directives/chart-integration/chart-integration.directive.ts

View

IgxPieChartInitializer, IgxStackedDataChartInitializer, IOptions } from './initializers';

export interface IDeterminedChartTypesArgs {

chartsAvailabilty: Map<CHART_TYPE, boolean>;

chartsAvailability: Map<CHART_TYPE, boolean>;

chartsForCreation: CHART_TYPE[];

}

this._valueMemberPaths = Object.keys(dataModel).filter(key => typeof dataModel[key] === 'number');

this._chartData = selectedData.map((dataRecord, index) => this.addIndexMemberPath(dataRecord, index + 1));

const args: IDeterminedChartTypesArgs = {

chartsAvailabilty: new Map<CHART_TYPE, boolean>(),

chartsAvailability: new Map<CHART_TYPE, boolean>(),

chartsForCreation: []

};

charts.delete(CHART_TYPE.SCATTER_BUBBLE);

}

args.chartsAvailabilty = this.chartTypesAvailability;

args.chartsAvailability = this.chartTypesAvailability;

args.chartsForCreation = [...charts];

this.onChartTypesDetermined.emit(args);

}

public getAllChartTypes() {

return Array.from(this._dataChartTypes);

}

public getAvailableCharts() {

const res = [];

this.chartTypesAvailability.forEach((isAvailable, chartType) => {

});

}

public chartFactory(type: CHART_TYPE, viewContainerRef: ViewContainerRef) {

public chartFactory(type: CHART_TYPE, viewContainerRef?: ViewContainerRef, createdChart?: any) {

if (!this.chartTypesAvailability.get(type)) {

return;

}

const chartType = this.dataCharts.get(type);

const options: IChartComponentOptions = this.getChartOptions(type);

const initializer: ChartInitializer = this.getInitializer(type, chartType);

let chart;

if (viewContainerRef) {

let componentFactory: ComponentFactory<any>;

let componentRef: ComponentRef<any>;

this._sizeScale.maximumValue = 60;

this._sizeScale.minimumValue = 10;

const chartType = this.dataCharts.get(type);

if (type === CHART_TYPE.PIE) {

componentFactory = this.factoryResolver.resolveComponentFactory(IgxPieChartComponent);

componentFactory = this.factoryResolver.resolveComponentFactory(IgxDataChartComponent);

componentRef = viewContainerRef.createComponent(componentFactory);

}

const options: IChartComponentOptions = this.getChartOptions(type);

const initializer: ChartInitializer = this.getInitializer(type, chartType);

if (this.useLegend) {

const legendType = type === CHART_TYPE.PIE ? IgxItemLegendComponent : IgxLegendComponent;

const legendFactory = this.factoryResolver.resolveComponentFactory(legendType as any);

const legendComponentRef: ComponentRef<any> = viewContainerRef.createComponent(legendFactory);

options.chartOptions['legend'] = legendComponentRef.instance;

}

const chart = initializer.initChart(componentRef.instance, options);

chart = initializer.initChart(componentRef.instance, options);

} else if (createdChart) {

chart = initializer.initChart(createdChart, options);

}

this.onChartCreationDone.emit(chart);

return chart;

}

private getInitializer(chartType: CHART_TYPE, componentClassRef): ChartInitializer {

this.customChartComponentOptions.get(chart)[optionsType][property] = options[property];

});

}

initializers.ts

-1+13

/projects/igniteui-angular-extras/src/lib/directives/chart-integration/initializers.ts

View

}

public initChart(chart: IgxPieChartComponent, options: IChartComponentOptions) {

this.applyOptions(chart, options.chartOptions);

return chart;

}

public initChart(chart: IgxDataChartComponent, options: IChartComponentOptions): IgxDataChartComponent {

if (chart.series.count) {

chart.series.clear();

}

if (chart.axes.count) {

chart.axes.clear();

}

options.seriesOptions.forEach((option) => {

const series = this.seriesFactory.create(this.seriesType);

series.xAxis = this.xAxis;

this.seriesType = seriesType;

}

public initChart(chart: IgxDataChartComponent, options?: IChartComponentOptions): IgxDataChartComponent {

if (chart.series.count) {

chart.series.clear();

}

if (chart.axes.count) {

chart.axes.clear();

}

const series = this.seriesFactory.create(this.seriesType);

series.xAxis = this.xAxis;

series.yAxis = this.yAxis;

package-lock.json

/package-lock.json

View

package.json

/package.json

View