devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,099 lines (971 loc) • 40.5 kB
TypeScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 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 { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core';
import DataSource from 'devextreme/data/data_source';
import { FunnelAlgorithm, dxFunnelItem, FunnelLegendItem, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, HoverChangedEvent, IncidentOccurredEvent, InitializedEvent, ItemClickEvent, LegendClickEvent, OptionChangedEvent, SelectionChangedEvent } from 'devextreme/viz/funnel';
import { DataSourceOptions } from 'devextreme/data/data_source';
import { Store } from 'devextreme/data/store';
import { ExportFormat, HorizontalEdge, HorizontalAlignment, Position, Orientation, VerticalEdge, SingleMultipleOrNone } from 'devextreme/common';
import { HatchDirection, DashStyle, Font, LabelPosition, TextOverflow, WordWrap, Palette, PaletteExtensionMode, ShiftLabelOverlap, Theme } from 'devextreme/common/charts';
import { Format } from 'devextreme/common/core/localization';
import DxFunnel from 'devextreme/viz/funnel';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import type * as DxFunnelTypes from "devextreme/viz/funnel_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/funnel/nested";
import * as i3 from "devextreme-angular/core";
/**
* 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.
*/
export declare class DxFunnelComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxFunnel;
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout(): {
height?: number;
keepLabels?: boolean;
width?: number;
};
set adaptiveLayout(value: {
height?: number;
keepLabels?: boolean;
width?: number;
});
/**
* Specifies the algorithm for building the funnel.
*/
get algorithm(): FunnelAlgorithm;
set algorithm(value: FunnelAlgorithm);
/**
* Specifies which data source field provides arguments for funnel items. The argument identifies a funnel item and represents it on the legend.
*/
get argumentField(): string;
set argumentField(value: string);
/**
* Specifies which data source field provides colors for funnel items. If this field is absent, the palette provides the colors.
*/
get colorField(): string;
set colorField(value: string);
/**
* Binds the UI component to data.
*/
get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string;
set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string);
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): Record<string, any>;
set elementAttr(value: Record<string, any>);
/**
* Configures the exporting and printing features.
*/
get export(): {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
};
set export(value: {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
});
/**
* Specifies whether funnel items change their style when a user pauses on them.
*/
get hoverEnabled(): boolean;
set hoverEnabled(value: boolean);
/**
* Turns the funnel upside down.
*/
get inverted(): boolean;
set inverted(value: boolean);
/**
* Configures funnel items' appearance.
*/
get item(): {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hoverStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
selectionStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
};
set item(value: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hoverStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
selectionStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
});
/**
* Configures funnel item labels.
*/
get label(): {
backgroundColor?: string;
border?: {
color?: string;
dashStyle?: DashStyle;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
opacity?: number;
visible?: boolean;
width?: number;
};
customizeText?: ((itemInfo: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
horizontalAlignment?: HorizontalEdge;
horizontalOffset?: number;
position?: LabelPosition;
showForZeroValues?: boolean;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
set label(value: {
backgroundColor?: string;
border?: {
color?: string;
dashStyle?: DashStyle;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
opacity?: number;
visible?: boolean;
width?: number;
};
customizeText?: ((itemInfo: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
horizontalAlignment?: HorizontalEdge;
horizontalOffset?: number;
position?: LabelPosition;
showForZeroValues?: boolean;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
});
/**
* Configures the legend.
*/
get legend(): {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>);
customizeText?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
};
set legend(value: {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>);
customizeText?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
});
/**
* Configures the loading indicator.
*/
get loadingIndicator(): {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
};
set loadingIndicator(value: {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
});
/**
* Generates space around the UI component.
*/
get margin(): {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
set margin(value: {
bottom?: number;
left?: number;
right?: number;
top?: number;
});
/**
* 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(): number;
set neckHeight(value: number);
/**
* 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(): number;
set neckWidth(value: number);
/**
* Sets the palette to be used to colorize funnel items.
*/
get palette(): Array<string> | Palette;
set palette(value: Array<string> | Palette);
/**
* Specifies what to do with colors in the palette when their number is less than the number of funnel items.
*/
get paletteExtensionMode(): PaletteExtensionMode;
set paletteExtensionMode(value: PaletteExtensionMode);
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified(): boolean;
set pathModified(value: boolean);
/**
* Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.
*/
get redrawOnResize(): boolean;
set redrawOnResize(value: boolean);
/**
* Specifies how item labels should behave when they overlap.
*/
get resolveLabelOverlapping(): ShiftLabelOverlap;
set resolveLabelOverlapping(value: ShiftLabelOverlap);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* 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(): SingleMultipleOrNone;
set selectionMode(value: SingleMultipleOrNone);
/**
* Specifies the UI component's size in pixels.
*/
get size(): {
height?: number | undefined;
width?: number | undefined;
};
set size(value: {
height?: number | undefined;
width?: number | undefined;
});
/**
* Specifies whether to sort funnel items.
*/
get sortData(): boolean;
set sortData(value: boolean);
/**
* Sets the name of the theme the UI component uses.
*/
get theme(): Theme;
set theme(value: Theme);
/**
* Configures the UI component's title.
*/
get title(): string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
};
set title(value: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
});
/**
* 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(): {
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((info: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
};
set tooltip(value: {
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((info: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
});
/**
* Specifies which data source field provides values for funnel items. The value defines a funnel item's area.
*/
get valueField(): string;
set valueField(value: string);
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function that is executed when the UI component's rendering has finished.
*/
onDrawn: EventEmitter<DrawnEvent>;
/**
* A function that is executed after the UI component is exported.
*/
onExported: EventEmitter<ExportedEvent>;
/**
* A function that is executed before the UI component is exported.
*/
onExporting: EventEmitter<ExportingEvent>;
/**
* A function that is executed before a file with exported UI component is saved to the user's local storage.
*/
onFileSaving: EventEmitter<FileSavingEvent>;
/**
* A function that is executed after the pointer enters or leaves a funnel item.
*/
onHoverChanged: EventEmitter<HoverChangedEvent>;
/**
* A function that is executed when an error or warning occurs.
*/
onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<InitializedEvent>;
/**
* A function that is executed when a funnel item is clicked or tapped.
*/
onItemClick: EventEmitter<ItemClickEvent>;
/**
* A function that is executed when a legend item is clicked or tapped.
*/
onLegendClick: EventEmitter<LegendClickEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that is executed when a funnel item is selected or selection is canceled.
*/
onSelectionChanged: EventEmitter<SelectionChangedEvent>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
adaptiveLayoutChange: EventEmitter<{
height?: number;
keepLabels?: boolean;
width?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
algorithmChange: EventEmitter<FunnelAlgorithm>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
argumentFieldChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
colorFieldChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange: EventEmitter<Record<string, any>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
exportChange: EventEmitter<{
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
hoverEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
invertedChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
itemChange: EventEmitter<{
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hoverStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
selectionStyle?: {
border?: {
color?: string | undefined;
visible?: boolean | undefined;
width?: number | undefined;
};
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
};
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
labelChange: EventEmitter<{
backgroundColor?: string;
border?: {
color?: string;
dashStyle?: DashStyle;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
opacity?: number;
visible?: boolean;
width?: number;
};
customizeText?: ((itemInfo: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
horizontalAlignment?: HorizontalEdge;
horizontalOffset?: number;
position?: LabelPosition;
showForZeroValues?: boolean;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
legendChange: EventEmitter<{
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>);
customizeText?: ((itemInfo: {
item: dxFunnelItem;
text: string;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
loadingIndicatorChange: EventEmitter<{
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
marginChange: EventEmitter<{
bottom?: number;
left?: number;
right?: number;
top?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
neckHeightChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
neckWidthChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteChange: EventEmitter<Array<string> | Palette>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteExtensionModeChange: EventEmitter<PaletteExtensionMode>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pathModifiedChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
redrawOnResizeChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
resolveLabelOverlappingChange: EventEmitter<ShiftLabelOverlap>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rtlEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
selectionModeChange: EventEmitter<SingleMultipleOrNone>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
sizeChange: EventEmitter<{
height?: number | undefined;
width?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
sortDataChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
themeChange: EventEmitter<Theme>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
titleChange: EventEmitter<string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
tooltipChange: EventEmitter<{
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((info: {
item: dxFunnelItem;
percent: number;
percentText: string;
value: number;
valueText: string;
}) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
valueFieldChange: EventEmitter<string>;
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any);
protected _createInstance(element: any, options: any): DxFunnel;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setupChanges(prop: string, changes: SimpleChanges): void;
ngDoCheck(): void;
_setOption(name: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DxFunnelComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DxFunnelComponent, "dx-funnel", never, { "adaptiveLayout": { "alias": "adaptiveLayout"; "required": false; }; "algorithm": { "alias": "algorithm"; "required": false; }; "argumentField": { "alias": "argumentField"; "required": false; }; "colorField": { "alias": "colorField"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "export": { "alias": "export"; "required": false; }; "hoverEnabled": { "alias": "hoverEnabled"; "required": false; }; "inverted": { "alias": "inverted"; "required": false; }; "item": { "alias": "item"; "required": false; }; "label": { "alias": "label"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "neckHeight": { "alias": "neckHeight"; "required": false; }; "neckWidth": { "alias": "neckWidth"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "paletteExtensionMode": { "alias": "paletteExtensionMode"; "required": false; }; "pathModified": { "alias": "pathModified"; "required": false; }; "redrawOnResize": { "alias": "redrawOnResize"; "required": false; }; "resolveLabelOverlapping": { "alias": "resolveLabelOverlapping"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "size": { "alias": "size"; "required": false; }; "sortData": { "alias": "sortData"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; }, { "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"; }, never, never, false, never>;
}
export declare class DxFunnelModule {
static ɵfac: i0.ɵɵFactoryDeclaration<DxFunnelModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<DxFunnelModule, [typeof DxFunnelComponent], [typeof i1.DxoAdaptiveLayoutModule, typeof i1.DxoExportModule, typeof i1.DxoItemModule, typeof i1.DxoBorderModule, typeof i1.DxoHoverStyleModule, typeof i1.DxoHatchingModule, typeof i1.DxoSelectionStyleModule, typeof i1.DxoLabelModule, typeof i1.DxoConnectorModule, typeof i1.DxoFontModule, typeof i1.DxoFormatModule, typeof i1.DxoLegendModule, typeof i1.DxoMarginModule, typeof i1.DxoTitleModule, typeof i1.DxoSubtitleModule, typeof i1.DxoLoadingIndicatorModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i1.DxoShadowModule, typeof i2.DxoFunnelAdaptiveLayoutModule, typeof i2.DxoFunnelBorderModule, typeof i2.DxoFunnelConnectorModule, typeof i2.DxoFunnelExportModule, typeof i2.DxoFunnelFontModule, typeof i2.DxoFunnelFormatModule, typeof i2.DxoFunnelFunnelTitleModule, typeof i2.DxoFunnelFunnelTitleSubtitleModule, typeof i2.DxoFunnelHatchingModule, typeof i2.DxoFunnelHoverStyleModule, typeof i2.DxoFunnelItemModule, typeof i2.DxoFunnelItemBorderModule, typeof i2.DxoFunnelLabelModule, typeof i2.DxoFunnelLabelBorderModule, typeof i2.DxoFunnelLegendModule, typeof i2.DxoFunnelLegendBorderModule, typeof i2.DxoFunnelLegendTitleModule, typeof i2.DxoFunnelLegendTitleSubtitleModule, typeof i2.DxoFunnelLoadingIndicatorModule, typeof i2.DxoFunnelMarginModule, typeof i2.DxoFunnelSelectionStyleModule, typeof i2.DxoFunnelShadowModule, typeof i2.DxoFunnelSizeModule, typeof i2.DxoFunnelSubtitleModule, typeof i2.DxoFunnelTitleModule, typeof i2.DxoFunnelTooltipModule, typeof i2.DxoFunnelTooltipBorderModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxFunnelComponent, typeof i1.DxoAdaptiveLayoutModule, typeof i1.DxoExportModule, typeof i1.DxoItemModule, typeof i1.DxoBorderModule, typeof i1.DxoHoverStyleModule, typeof i1.DxoHatchingModule, typeof i1.DxoSelectionStyleModule, typeof i1.DxoLabelModule, typeof i1.DxoConnectorModule, typeof i1.DxoFontModule, typeof i1.DxoFormatModule, typeof i1.DxoLegendModule, typeof i1.DxoMarginModule, typeof i1.DxoTitleModule, typeof i1.DxoSubtitleModule, typeof i1.DxoLoadingIndicatorModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i1.DxoShadowModule, typeof i2.DxoFunnelAdaptiveLayoutModule, typeof i2.DxoFunnelBorderModule, typeof i2.DxoFunnelConnectorModule, typeof i2.DxoFunnelExportModule, typeof i2.DxoFunnelFontModule, typeof i2.DxoFunnelFormatModule, typeof i2.DxoFunnelFunnelTitleModule, typeof i2.DxoFunnelFunnelTitleSubtitleModule, typeof i2.DxoFunnelHatchingModule, typeof i2.DxoFunnelHoverStyleModule, typeof i2.DxoFunnelItemModule, typeof i2.DxoFunnelItemBorderModule, typeof i2.DxoFunnelLabelModule, typeof i2.DxoFunnelLabelBorderModule, typeof i2.DxoFunnelLegendModule, typeof i2.DxoFunnelLegendBorderModule, typeof i2.DxoFunnelLegendTitleModule, typeof i2.DxoFunnelLegendTitleSubtitleModule, typeof i2.DxoFunnelLoadingIndicatorModule, typeof i2.DxoFunnelMarginModule, typeof i2.DxoFunnelSelectionStyleModule, typeof i2.DxoFunnelShadowModule, typeof i2.DxoFunnelSizeModule, typeof i2.DxoFunnelSubtitleModule, typeof i2.DxoFunnelTitleModule, typeof i2.DxoFunnelTooltipModule, typeof i2.DxoFunnelTooltipBorderModule, typeof i3.DxTemplateModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<DxFunnelModule>;
}
export { DxFunnelTypes };