devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
727 lines (692 loc) • 26.6 kB
JavaScript
import * as i2 from '@angular/platform-browser';
import { BrowserTransferStateModule } from '@angular/platform-browser';
import * as i0 from '@angular/core';
import { PLATFORM_ID, Component, Inject, Input, Output, NgModule } from '@angular/core';
import DxFunnel from 'devextreme/viz/funnel';
import * as i1 from 'devextreme-angular/core';
import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core';
import { DxoAdaptiveLayoutModule, DxoExportModule, DxoItemModule, DxoBorderModule, DxoHoverStyleModule, DxoHatchingModule, DxoSelectionStyleModule, DxoLabelModule, DxoConnectorModule, DxoFontModule, DxoFormatModule, DxoLegendModule, DxoMarginModule, DxoTitleModule, DxoSubtitleModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTooltipModule, DxoShadowModule } from 'devextreme-angular/ui/nested';
/*!
* devextreme-angular
* Version: 22.1.14
* Build date: Mon Apr 29 2024
*
* Copyright (c) 2012 - 2024 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
*/
/**
* The Funnel is a UI component that visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. The Funnel UI component conveys information using different interactive elements (tooltips, labels, legend) and enables you to create not only a funnel, but also a pyramid chart.
*/
class DxFunnelComponent extends DxComponent {
constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
this._watcherHelper = _watcherHelper;
this._idh = _idh;
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: 'disabledChange' },
{ 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: 'paletteExtensionModeChange' },
{ emit: 'pathModifiedChange' },
{ emit: 'redrawOnResizeChange' },
{ emit: 'resolveLabelOverlappingChange' },
{ emit: 'rtlEnabledChange' },
{ emit: 'selectionModeChange' },
{ emit: 'sizeChange' },
{ emit: 'sortDataChange' },
{ emit: 'themeChange' },
{ emit: 'titleChange' },
{ emit: 'tooltipChange' },
{ emit: 'valueFieldChange' }
]);
this._idh.setHost(this);
optionHost.setHost(this);
}
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout() {
return this._getOption('adaptiveLayout');
}
set adaptiveLayout(value) {
this._setOption('adaptiveLayout', value);
}
/**
* Specifies the algorithm for building the funnel.
*/
get algorithm() {
return this._getOption('algorithm');
}
set algorithm(value) {
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.
*/
get argumentField() {
return this._getOption('argumentField');
}
set argumentField(value) {
this._setOption('argumentField', value);
}
/**
* Specifies which data source field provides colors for funnel items. If this field is absent, the palette provides the colors.
*/
get colorField() {
return this._getOption('colorField');
}
set colorField(value) {
this._setOption('colorField', value);
}
/**
* Binds the UI component to data.
*/
get dataSource() {
return this._getOption('dataSource');
}
set dataSource(value) {
this._setOption('dataSource', value);
}
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled() {
return this._getOption('disabled');
}
set disabled(value) {
this._setOption('disabled', value);
}
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr() {
return this._getOption('elementAttr');
}
set elementAttr(value) {
this._setOption('elementAttr', value);
}
/**
* Configures the exporting and printing features.
*/
get export() {
return this._getOption('export');
}
set export(value) {
this._setOption('export', value);
}
/**
* Specifies whether funnel items change their style when a user pauses on them.
*/
get hoverEnabled() {
return this._getOption('hoverEnabled');
}
set hoverEnabled(value) {
this._setOption('hoverEnabled', value);
}
/**
* Turns the funnel upside down.
*/
get inverted() {
return this._getOption('inverted');
}
set inverted(value) {
this._setOption('inverted', value);
}
/**
* Configures funnel items' appearance.
*/
get item() {
return this._getOption('item');
}
set item(value) {
this._setOption('item', value);
}
/**
* Configures funnel item labels.
*/
get label() {
return this._getOption('label');
}
set label(value) {
this._setOption('label', value);
}
/**
* Configures the legend.
*/
get legend() {
return this._getOption('legend');
}
set legend(value) {
this._setOption('legend', value);
}
/**
* Configures the loading indicator.
*/
get loadingIndicator() {
return this._getOption('loadingIndicator');
}
set loadingIndicator(value) {
this._setOption('loadingIndicator', value);
}
/**
* Generates space around the UI component.
*/
get margin() {
return this._getOption('margin');
}
set margin(value) {
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'.
*/
get neckHeight() {
return this._getOption('neckHeight');
}
set neckHeight(value) {
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'.
*/
get neckWidth() {
return this._getOption('neckWidth');
}
set neckWidth(value) {
this._setOption('neckWidth', value);
}
/**
* Sets the palette to be used to colorize funnel items.
*/
get palette() {
return this._getOption('palette');
}
set palette(value) {
this._setOption('palette', value);
}
/**
* Specifies what to do with colors in the palette when their number is less than the number of funnel items.
*/
get paletteExtensionMode() {
return this._getOption('paletteExtensionMode');
}
set paletteExtensionMode(value) {
this._setOption('paletteExtensionMode', value);
}
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified() {
return this._getOption('pathModified');
}
set pathModified(value) {
this._setOption('pathModified', value);
}
/**
* Specifies whether to redraw the UI component when the size of the parent browser window changes or a mobile device rotates.
*/
get redrawOnResize() {
return this._getOption('redrawOnResize');
}
set redrawOnResize(value) {
this._setOption('redrawOnResize', value);
}
/**
* Specifies how item labels should behave when they overlap.
*/
get resolveLabelOverlapping() {
return this._getOption('resolveLabelOverlapping');
}
set resolveLabelOverlapping(value) {
this._setOption('resolveLabelOverlapping', value);
}
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled() {
return this._getOption('rtlEnabled');
}
set rtlEnabled(value) {
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.
*/
get selectionMode() {
return this._getOption('selectionMode');
}
set selectionMode(value) {
this._setOption('selectionMode', value);
}
/**
* Specifies the UI component's size in pixels.
*/
get size() {
return this._getOption('size');
}
set size(value) {
this._setOption('size', value);
}
/**
* Specifies whether to sort funnel items.
*/
get sortData() {
return this._getOption('sortData');
}
set sortData(value) {
this._setOption('sortData', value);
}
/**
* Sets the name of the theme the UI component uses.
*/
get theme() {
return this._getOption('theme');
}
set theme(value) {
this._setOption('theme', value);
}
/**
* Configures the UI component's title.
*/
get title() {
return this._getOption('title');
}
set title(value) {
this._setOption('title', value);
}
/**
* Configures tooltips - small pop-up rectangles that display information about a data-visualizing UI component element being pressed or hovered over with the mouse pointer.
*/
get tooltip() {
return this._getOption('tooltip');
}
set tooltip(value) {
this._setOption('tooltip', value);
}
/**
* Specifies which data source field provides values for funnel items. The value defines a funnel item's area.
*/
get valueField() {
return this._getOption('valueField');
}
set valueField(value) {
this._setOption('valueField', value);
}
_createInstance(element, options) {
return new DxFunnel(element, options);
}
ngOnDestroy() {
this._destroyWidget();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
this.setupChanges('dataSource', changes);
this.setupChanges('palette', changes);
}
setupChanges(prop, changes) {
if (!(prop in this._optionsToUpdate)) {
this._idh.setup(prop, changes);
}
}
ngDoCheck() {
this._idh.doCheck('dataSource');
this._idh.doCheck('palette');
this._watcherHelper.checkWatchers();
super.ngDoCheck();
super.clearChangedOptions();
}
_setOption(name, value) {
let isSetup = this._idh.setupSingle(name, value);
let isChanged = this._idh.getChanges(name, value) !== null;
if (isSetup || isChanged) {
super._setOption(name, value);
}
}
}
/** @nocollapse */ DxFunnelComponent.ɵfac = function DxFunnelComponent_Factory(t) { return new (t || DxFunnelComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.DxTemplateHost), i0.ɵɵdirectiveInject(i1.WatcherHelper), i0.ɵɵdirectiveInject(i1.IterableDifferHelper), i0.ɵɵdirectiveInject(i1.NestedOptionHost), i0.ɵɵdirectiveInject(i2.TransferState), i0.ɵɵdirectiveInject(PLATFORM_ID)); };
/** @nocollapse */ DxFunnelComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DxFunnelComponent, selectors: [["dx-funnel"]], inputs: { adaptiveLayout: "adaptiveLayout", algorithm: "algorithm", argumentField: "argumentField", colorField: "colorField", dataSource: "dataSource", disabled: "disabled", elementAttr: "elementAttr", export: "export", hoverEnabled: "hoverEnabled", inverted: "inverted", item: "item", label: "label", legend: "legend", loadingIndicator: "loadingIndicator", margin: "margin", neckHeight: "neckHeight", neckWidth: "neckWidth", palette: "palette", paletteExtensionMode: "paletteExtensionMode", pathModified: "pathModified", redrawOnResize: "redrawOnResize", resolveLabelOverlapping: "resolveLabelOverlapping", rtlEnabled: "rtlEnabled", selectionMode: "selectionMode", size: "size", sortData: "sortData", theme: "theme", title: "title", tooltip: "tooltip", valueField: "valueField" }, outputs: { onDisposing: "onDisposing", onDrawn: "onDrawn", onExported: "onExported", onExporting: "onExporting", onFileSaving: "onFileSaving", onHoverChanged: "onHoverChanged", onIncidentOccurred: "onIncidentOccurred", onInitialized: "onInitialized", onItemClick: "onItemClick", onLegendClick: "onLegendClick", onOptionChanged: "onOptionChanged", onSelectionChanged: "onSelectionChanged", adaptiveLayoutChange: "adaptiveLayoutChange", algorithmChange: "algorithmChange", argumentFieldChange: "argumentFieldChange", colorFieldChange: "colorFieldChange", dataSourceChange: "dataSourceChange", disabledChange: "disabledChange", elementAttrChange: "elementAttrChange", exportChange: "exportChange", hoverEnabledChange: "hoverEnabledChange", invertedChange: "invertedChange", itemChange: "itemChange", labelChange: "labelChange", legendChange: "legendChange", loadingIndicatorChange: "loadingIndicatorChange", marginChange: "marginChange", neckHeightChange: "neckHeightChange", neckWidthChange: "neckWidthChange", paletteChange: "paletteChange", paletteExtensionModeChange: "paletteExtensionModeChange", pathModifiedChange: "pathModifiedChange", redrawOnResizeChange: "redrawOnResizeChange", resolveLabelOverlappingChange: "resolveLabelOverlappingChange", rtlEnabledChange: "rtlEnabledChange", selectionModeChange: "selectionModeChange", sizeChange: "sizeChange", sortDataChange: "sortDataChange", themeChange: "themeChange", titleChange: "titleChange", tooltipChange: "tooltipChange", valueFieldChange: "valueFieldChange" }, features: [i0.ɵɵProvidersFeature([
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function DxFunnelComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display: block; }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxFunnelComponent, [{
type: Component,
args: [{
selector: 'dx-funnel',
template: '',
styles: [' :host { display: block; }'],
providers: [
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]
}]
}], function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i2.TransferState }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, { adaptiveLayout: [{
type: Input
}], algorithm: [{
type: Input
}], argumentField: [{
type: Input
}], colorField: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], elementAttr: [{
type: Input
}], export: [{
type: Input
}], hoverEnabled: [{
type: Input
}], inverted: [{
type: Input
}], item: [{
type: Input
}], label: [{
type: Input
}], legend: [{
type: Input
}], loadingIndicator: [{
type: Input
}], margin: [{
type: Input
}], neckHeight: [{
type: Input
}], neckWidth: [{
type: Input
}], palette: [{
type: Input
}], paletteExtensionMode: [{
type: Input
}], pathModified: [{
type: Input
}], redrawOnResize: [{
type: Input
}], resolveLabelOverlapping: [{
type: Input
}], rtlEnabled: [{
type: Input
}], selectionMode: [{
type: Input
}], size: [{
type: Input
}], sortData: [{
type: Input
}], theme: [{
type: Input
}], title: [{
type: Input
}], tooltip: [{
type: Input
}], valueField: [{
type: Input
}], onDisposing: [{
type: Output
}], onDrawn: [{
type: Output
}], onExported: [{
type: Output
}], onExporting: [{
type: Output
}], onFileSaving: [{
type: Output
}], onHoverChanged: [{
type: Output
}], onIncidentOccurred: [{
type: Output
}], onInitialized: [{
type: Output
}], onItemClick: [{
type: Output
}], onLegendClick: [{
type: Output
}], onOptionChanged: [{
type: Output
}], onSelectionChanged: [{
type: Output
}], adaptiveLayoutChange: [{
type: Output
}], algorithmChange: [{
type: Output
}], argumentFieldChange: [{
type: Output
}], colorFieldChange: [{
type: Output
}], dataSourceChange: [{
type: Output
}], disabledChange: [{
type: Output
}], elementAttrChange: [{
type: Output
}], exportChange: [{
type: Output
}], hoverEnabledChange: [{
type: Output
}], invertedChange: [{
type: Output
}], itemChange: [{
type: Output
}], labelChange: [{
type: Output
}], legendChange: [{
type: Output
}], loadingIndicatorChange: [{
type: Output
}], marginChange: [{
type: Output
}], neckHeightChange: [{
type: Output
}], neckWidthChange: [{
type: Output
}], paletteChange: [{
type: Output
}], paletteExtensionModeChange: [{
type: Output
}], pathModifiedChange: [{
type: Output
}], redrawOnResizeChange: [{
type: Output
}], resolveLabelOverlappingChange: [{
type: Output
}], rtlEnabledChange: [{
type: Output
}], selectionModeChange: [{
type: Output
}], sizeChange: [{
type: Output
}], sortDataChange: [{
type: Output
}], themeChange: [{
type: Output
}], titleChange: [{
type: Output
}], tooltipChange: [{
type: Output
}], valueFieldChange: [{
type: Output
}] }); })();
class DxFunnelModule {
}
/** @nocollapse */ DxFunnelModule.ɵfac = function DxFunnelModule_Factory(t) { return new (t || DxFunnelModule)(); };
/** @nocollapse */ DxFunnelModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: DxFunnelModule });
/** @nocollapse */ DxFunnelModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
], DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxFunnelModule, [{
type: NgModule,
args: [{
imports: [
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
],
declarations: [
DxFunnelComponent
],
exports: [
DxFunnelComponent,
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule
]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DxFunnelModule, { declarations: [DxFunnelComponent], imports: [DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule], exports: [DxFunnelComponent, DxoAdaptiveLayoutModule,
DxoExportModule,
DxoItemModule,
DxoBorderModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoSelectionStyleModule,
DxoLabelModule,
DxoConnectorModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { DxFunnelComponent, DxFunnelModule };
//# sourceMappingURL=devextreme-angular-ui-funnel.js.map