/*! * devextreme-angular-test * Version: 17.2.8 * Build date: Mon Feb 05 2018 * * Copyright (c) 2012 - 2018 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ import { Component, NgModule, ElementRef, NgZone, Input, Output, OnDestroy, Injector, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxFunnel from 'devextreme/viz/funnel'; import { DxComponent } from '../core/component'; import { DxTemplateHost } from '../core/template-host'; import { DxTemplateModule } from '../core/template'; import { EventsRegistrator } from '../core/events-strategy'; import { NestedOptionHost } from '../core/nested-option'; import { WatcherHelper } from '../core/watcher-helper'; import { IterableDifferHelper } from '../core/iterable-differ-helper'; import { DxoAdaptiveLayoutModule } from './nested/adaptive-layout'; import { DxoExportModule } from './nested/export'; import { DxoItemModule } from './nested/item'; import { DxoBorderModule } from './nested/border'; import { DxoHoverStyleModule } from './nested/hover-style'; import { DxoHatchingModule } from './nested/hatching'; import { DxoSelectionStyleModule } from './nested/selection-style'; import { DxoLabelModule } from './nested/label'; import { DxoConnectorModule } from './nested/connector'; import { DxoFontModule } from './nested/font'; import { DxoFormatModule } from './nested/format'; import { DxoLegendModule } from './nested/legend'; import { DxoMarginModule } from './nested/margin'; import { DxoLoadingIndicatorModule } from './nested/loading-indicator'; import { DxoSizeModule } from './nested/size'; import { DxoTitleModule } from './nested/title'; import { DxoSubtitleModule } from './nested/subtitle'; import { DxoTooltipModule } from './nested/tooltip'; import { DxoShadowModule } from './nested/shadow'; /** * The Funnel is a widget that visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. The Funnel widget conveys information using different interactive elements (tooltips, labels, legend) and enables you to create not only a funnel, but also a pyramid chart. */ @Component({ selector: 'dx-funnel', template: '', styles: [ ' :host { display: block; }'], providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ] }) export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { instance: DxFunnel; /** * Specifies adaptive layout options. */ @Input() get adaptiveLayout(): any { return this._getOption('adaptiveLayout'); } set adaptiveLayout(value: any) { this._setOption('adaptiveLayout', value); } /** * Specifies the algorithm for building the funnel. */ @Input() get algorithm(): string { return this._getOption('algorithm'); } set algorithm(value: string) { this._setOption('algorithm', value); } /** * Specifies which data source field provides arguments for funnel items. The argument identifies a funnel item and represents it on the legend. */ @Input() get argumentField(): string { return this._getOption('argumentField'); } set argumentField(value: string) { this._setOption('argumentField', value); } /** * Specifies which data source field provides colors for funnel items. If this field is absent, the palette provides the colors. */ @Input() get colorField(): string { return this._getOption('colorField'); } set colorField(value: string) { this._setOption('colorField', value); } /** * Specifies the widget's data origin. */ @Input() get dataSource(): DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array { return this._getOption('dataSource'); } set dataSource(value: DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array) { this._setOption('dataSource', value); } /** * Specifies the attributes to be attached to the widget's root element. */ @Input() get elementAttr(): any { return this._getOption('elementAttr'); } set elementAttr(value: any) { this._setOption('elementAttr', value); } /** * Configures the exporting and printing features. */ @Input() get export(): any { return this._getOption('export'); } set export(value: any) { this._setOption('export', value); } /** * Specifies whether funnel items change their style when a user pauses on them. */ @Input() get hoverEnabled(): boolean { return this._getOption('hoverEnabled'); } set hoverEnabled(value: boolean) { this._setOption('hoverEnabled', value); } /** * Turns the funnel upside down. */ @Input() get inverted(): boolean { return this._getOption('inverted'); } set inverted(value: boolean) { this._setOption('inverted', value); } /** * Configures funnel items' appearance. */ @Input() get item(): any { return this._getOption('item'); } set item(value: any) { this._setOption('item', value); } /** * Configures funnel item labels. */ @Input() get label(): any { return this._getOption('label'); } set label(value: any) { this._setOption('label', value); } /** * Configures the legend. */ @Input() get legend(): any { return this._getOption('legend'); } set legend(value: any) { this._setOption('legend', value); } /** * Configures the loading indicator. */ @Input() get loadingIndicator(): any { return this._getOption('loadingIndicator'); } set loadingIndicator(value: any) { this._setOption('loadingIndicator', value); } /** * Generates space around the widget. */ @Input() get margin(): any { return this._getOption('margin'); } set margin(value: any) { this._setOption('margin', value); } /** * Specifies the ratio between the height of the neck and that of the whole funnel. Accepts values from 0 to 1. Applies only if the algorithm is "dynamicHeight". */ @Input() get neckHeight(): number { return this._getOption('neckHeight'); } set neckHeight(value: number) { this._setOption('neckHeight', value); } /** * Specifies the ratio between the width of the neck and that of the whole funnel. Accepts values from 0 to 1. Applies only if the algorithm is "dynamicHeight". */ @Input() get neckWidth(): number { return this._getOption('neckWidth'); } set neckWidth(value: number) { this._setOption('neckWidth', value); } /** * Sets the palette to be used for colorizing funnel items. */ @Input() get palette(): string| Array { return this._getOption('palette'); } set palette(value: string| Array) { this._setOption('palette', value); } /** * Notifies the widget that it is embedded into an HTML page that uses a tag modifying the path. */ @Input() get pathModified(): boolean { return this._getOption('pathModified'); } set pathModified(value: boolean) { this._setOption('pathModified', value); } /** * Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates. */ @Input() get redrawOnResize(): boolean { return this._getOption('redrawOnResize'); } set redrawOnResize(value: boolean) { this._setOption('redrawOnResize', value); } /** * Switches the widget to a right-to-left representation. */ @Input() get rtlEnabled(): boolean { return this._getOption('rtlEnabled'); } set rtlEnabled(value: boolean) { this._setOption('rtlEnabled', value); } /** * Specifies whether a single or multiple funnel items can be in the selected state at a time. Assigning "none" disables the selection feature. */ @Input() get selectionMode(): string { return this._getOption('selectionMode'); } set selectionMode(value: string) { this._setOption('selectionMode', value); } /** * Specifies the widget's size in pixels. */ @Input() get size(): any { return this._getOption('size'); } set size(value: any) { this._setOption('size', value); } /** * Specifies whether to sort funnel items. */ @Input() get sortData(): boolean { return this._getOption('sortData'); } set sortData(value: boolean) { this._setOption('sortData', value); } /** * Sets the name of the theme the widget uses. */ @Input() get theme(): string { return this._getOption('theme'); } set theme(value: string) { this._setOption('theme', value); } /** * Configures the widget's title. */ @Input() get title(): string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string } { return this._getOption('title'); } set title(value: string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string }) { this._setOption('title', value); } /** * Configures tooltips - small pop-up rectangles that display information about a data-visualizing widget element being pressed or hovered over with the mouse pointer. */ @Input() get tooltip(): any { return this._getOption('tooltip'); } set tooltip(value: any) { this._setOption('tooltip', value); } /** * Specifies which data source field provides values for funnel items. The value defines a funnel item's area. */ @Input() get valueField(): string { return this._getOption('valueField'); } set valueField(value: string) { this._setOption('valueField', value); } /** * A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only. */ @Output() onDisposing: EventEmitter; /** * A handler for the drawn event. Executed when the widget has finished drawing itself. */ @Output() onDrawn: EventEmitter; /** * A handler for the exported event. Executed after data from the widget is exported. */ @Output() onExported: EventEmitter; /** * A handler for the exporting event. Executed before data from the widget is exported. */ @Output() onExporting: EventEmitter; /** * A handler for the fileSaving event. Executed before a file with exported data is saved on the user's local storage. */ @Output() onFileSaving: EventEmitter; /** * A handler for the hoverChanged event. Executed after a funnel item's hover state is changed in the UI or programmatically. */ @Output() onHoverChanged: EventEmitter; /** * A handler for the incidentOccurred event. Executed when an error or warning appears in the widget. */ @Output() onIncidentOccurred: EventEmitter; /** * A handler for the initialized event. Executed only once, after the widget is initialized. */ @Output() onInitialized: EventEmitter; /** * A handler for the itemClick event. Executed when a user clicks a funnel item. */ @Output() onItemClick: EventEmitter; /** * A handler for the legendClick event. Executed when a user clicks a legend item. */ @Output() onLegendClick: EventEmitter; /** * A handler for the optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * A handler for the selectionChanged event. Executed after a funnel item's selection state is changed in the UI or programmatically. */ @Output() onSelectionChanged: EventEmitter; /** * A handler for the adaptiveLayoutChange event. */ @Output() adaptiveLayoutChange: EventEmitter; /** * A handler for the algorithmChange event. */ @Output() algorithmChange: EventEmitter; /** * A handler for the argumentFieldChange event. */ @Output() argumentFieldChange: EventEmitter; /** * A handler for the colorFieldChange event. */ @Output() colorFieldChange: EventEmitter; /** * A handler for the dataSourceChange event. */ @Output() dataSourceChange: EventEmitter>; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the exportChange event. */ @Output() exportChange: EventEmitter; /** * A handler for the hoverEnabledChange event. */ @Output() hoverEnabledChange: EventEmitter; /** * A handler for the invertedChange event. */ @Output() invertedChange: EventEmitter; /** * A handler for the itemChange event. */ @Output() itemChange: EventEmitter; /** * A handler for the labelChange event. */ @Output() labelChange: EventEmitter; /** * A handler for the legendChange event. */ @Output() legendChange: EventEmitter; /** * A handler for the loadingIndicatorChange event. */ @Output() loadingIndicatorChange: EventEmitter; /** * A handler for the marginChange event. */ @Output() marginChange: EventEmitter; /** * A handler for the neckHeightChange event. */ @Output() neckHeightChange: EventEmitter; /** * A handler for the neckWidthChange event. */ @Output() neckWidthChange: EventEmitter; /** * A handler for the paletteChange event. */ @Output() paletteChange: EventEmitter>; /** * A handler for the pathModifiedChange event. */ @Output() pathModifiedChange: EventEmitter; /** * A handler for the redrawOnResizeChange event. */ @Output() redrawOnResizeChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the selectionModeChange event. */ @Output() selectionModeChange: EventEmitter; /** * A handler for the sizeChange event. */ @Output() sizeChange: EventEmitter; /** * A handler for the sortDataChange event. */ @Output() sortDataChange: EventEmitter; /** * A handler for the themeChange event. */ @Output() themeChange: EventEmitter; /** * A handler for the titleChange event. */ @Output() titleChange: EventEmitter; /** * A handler for the tooltipChange event. */ @Output() tooltipChange: EventEmitter; /** * A handler for the valueFieldChange event. */ @Output() valueFieldChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, injector: Injector, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, optionHost: NestedOptionHost) { super(elementRef, ngZone, templateHost, _watcherHelper); injector.get(EventsRegistrator); this._createEventEmitters([ { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'drawn', emit: 'onDrawn' }, { subscribe: 'exported', emit: 'onExported' }, { subscribe: 'exporting', emit: 'onExporting' }, { subscribe: 'fileSaving', emit: 'onFileSaving' }, { subscribe: 'hoverChanged', emit: 'onHoverChanged' }, { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'itemClick', emit: 'onItemClick' }, { subscribe: 'legendClick', emit: 'onLegendClick' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'selectionChanged', emit: 'onSelectionChanged' }, { emit: 'adaptiveLayoutChange' }, { emit: 'algorithmChange' }, { emit: 'argumentFieldChange' }, { emit: 'colorFieldChange' }, { emit: 'dataSourceChange' }, { emit: 'elementAttrChange' }, { emit: 'exportChange' }, { emit: 'hoverEnabledChange' }, { emit: 'invertedChange' }, { emit: 'itemChange' }, { emit: 'labelChange' }, { emit: 'legendChange' }, { emit: 'loadingIndicatorChange' }, { emit: 'marginChange' }, { emit: 'neckHeightChange' }, { emit: 'neckWidthChange' }, { emit: 'paletteChange' }, { emit: 'pathModifiedChange' }, { emit: 'redrawOnResizeChange' }, { emit: 'rtlEnabledChange' }, { emit: 'selectionModeChange' }, { emit: 'sizeChange' }, { emit: 'sortDataChange' }, { emit: 'themeChange' }, { emit: 'titleChange' }, { emit: 'tooltipChange' }, { emit: 'valueFieldChange' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxFunnel(element, options); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); this.setupChanges('dataSource', changes); this.setupChanges('palette', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('dataSource'); this._idh.doCheck('palette'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); } _setOption(name: string, value: any) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } } @NgModule({ imports: [ DxoAdaptiveLayoutModule, DxoExportModule, DxoItemModule, DxoBorderModule, DxoHoverStyleModule, DxoHatchingModule, DxoSelectionStyleModule, DxoLabelModule, DxoConnectorModule, DxoFontModule, DxoFormatModule, DxoLegendModule, DxoMarginModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTitleModule, DxoSubtitleModule, DxoTooltipModule, DxoShadowModule, DxTemplateModule ], declarations: [ DxFunnelComponent ], exports: [ DxFunnelComponent, DxoAdaptiveLayoutModule, DxoExportModule, DxoItemModule, DxoBorderModule, DxoHoverStyleModule, DxoHatchingModule, DxoSelectionStyleModule, DxoLabelModule, DxoConnectorModule, DxoFontModule, DxoFormatModule, DxoLegendModule, DxoMarginModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTitleModule, DxoSubtitleModule, DxoTooltipModule, DxoShadowModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxFunnelModule { }