/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 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 */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import { VerticalAlignment, ExportFormat, HorizontalAlignment, VerticalEdge } from 'devextreme/common'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { dxSankeyNode, SankeyColorMode, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LinkClickEvent, LinkHoverEvent, NodeClickEvent, NodeHoverEvent, OptionChangedEvent } from 'devextreme/viz/sankey'; import { Font, TextOverflow, HatchDirection, Palette, PaletteExtensionMode, Theme, WordWrap, DashStyle } from 'devextreme/common/charts'; import { Format } from 'devextreme/common/core/localization'; import DxSankey from 'devextreme/viz/sankey'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core'; import type * as DxSankeyTypes from "devextreme/viz/sankey_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/sankey/nested"; import * as i3 from "devextreme-angular/core"; /** * The Sankey is a UI component that visualizes the flow magnitude between value sets. The values being connected are called nodes; the connections - links. The higher the flow magnitude, the wider the link is. */ export declare class DxSankeyComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; instance: DxSankey; /** * Specifies adaptive layout properties. */ get adaptiveLayout(): { height?: number; keepLabels?: boolean; width?: number; }; set adaptiveLayout(value: { height?: number; keepLabels?: boolean; width?: number; }); /** * Aligns node columns vertically. */ get alignment(): Array | VerticalAlignment; set alignment(value: Array | VerticalAlignment); /** * Binds the UI component to data. */ get dataSource(): Array | DataSource | DataSourceOptions | null | Store | string; set dataSource(value: Array | 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; set elementAttr(value: Record); /** * Configures the exporting and printing features. */ get export(): { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }; set export(value: { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }); /** * Specifies whether nodes and links change their style when they are hovered over or pressed. */ get hoverEnabled(): boolean; set hoverEnabled(value: boolean); /** * Configures sankey nodes' labels. */ get label(): { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; customizeText?: ((itemInfo: dxSankeyNode) => string); font?: Font; horizontalOffset?: number; overlappingBehavior?: TextOverflow; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; useNodeColors?: boolean; verticalOffset?: number; visible?: boolean; }; set label(value: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; customizeText?: ((itemInfo: dxSankeyNode) => string); font?: Font; horizontalOffset?: number; overlappingBehavior?: TextOverflow; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; useNodeColors?: boolean; verticalOffset?: number; visible?: boolean; }); /** * Configures sankey links' appearance. */ get link(): { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string; colorMode?: SankeyColorMode; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; }; set link(value: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string; colorMode?: SankeyColorMode; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; }); /** * 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; }); /** * Configures sankey nodes' appearance. */ get node(): { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; padding?: number; width?: number; }; set node(value: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; padding?: number; width?: number; }); /** * Sets the palette to be used to colorize sankey nodes. */ get palette(): Array | Palette; set palette(value: Array | Palette); /** * Specifies how to extend the palette when it contains less colors than the number of sankey nodes. */ 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); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * 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 nodes' sorting order in their columns. */ get sortData(): any | undefined; set sortData(value: any | undefined); /** * Specifies which data source field provides links' source nodes. */ get sourceField(): string; set sourceField(value: string); /** * Specifies which data source field provides links' target nodes. */ get targetField(): string; set targetField(value: string); /** * 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; cornerRadius?: number; customizeLinkTooltip?: ((info: { source: string; target: string; weight: number; }) => Record) | undefined; customizeNodeTooltip?: ((info: { label: string; title: string; weightIn: number; weightOut: number; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; linkTooltipTemplate?: any; nodeTooltipTemplate?: any; 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; cornerRadius?: number; customizeLinkTooltip?: ((info: { source: string; target: string; weight: number; }) => Record) | undefined; customizeNodeTooltip?: ((info: { label: string; title: string; weightIn: number; weightOut: number; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; linkTooltipTemplate?: any; nodeTooltipTemplate?: any; 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 links' weights. */ get weightField(): string; set weightField(value: string); /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the UI component's rendering has finished. */ onDrawn: EventEmitter; /** * A function that is executed after the UI component is exported. */ onExported: EventEmitter; /** * A function that is executed before the UI component is exported. */ onExporting: EventEmitter; /** * A function that is executed before a file with exported UI component is saved to the user's local storage. */ onFileSaving: EventEmitter; /** * A function that is executed when an error or warning occurs. */ onIncidentOccurred: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed when a sankey link is clicked or tapped. */ onLinkClick: EventEmitter; /** * A function that is executed after the pointer enters or leaves a sankey link. */ onLinkHoverChanged: EventEmitter; /** * A function that is executed when a sankey node is clicked or tapped. */ onNodeClick: EventEmitter; /** * A function that is executed after the pointer enters or leaves a sankey node. */ onNodeHoverChanged: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * 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. */ alignmentChange: EventEmitter | VerticalAlignment>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceChange: EventEmitter | DataSource | DataSourceOptions | null | Store | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * 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; 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; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelChange: EventEmitter<{ border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; customizeText?: ((itemInfo: dxSankeyNode) => string); font?: Font; horizontalOffset?: number; overlappingBehavior?: TextOverflow; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; useNodeColors?: boolean; verticalOffset?: number; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ linkChange: EventEmitter<{ border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string; colorMode?: SankeyColorMode; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; }>; /** * 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. */ nodeChange: EventEmitter<{ border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hoverStyle?: { border?: { color?: string | undefined; visible?: boolean | undefined; width?: number | undefined; }; color?: string | undefined; hatching?: { direction?: HatchDirection; opacity?: number; step?: number; width?: number; }; opacity?: number | undefined; }; opacity?: number; padding?: number; width?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ paletteChange: EventEmitter | Palette>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ paletteExtensionModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pathModifiedChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ redrawOnResizeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * 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; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sourceFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ targetFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ themeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ titleChange: EventEmitter; /** * 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; cornerRadius?: number; customizeLinkTooltip?: ((info: { source: string; target: string; weight: number; }) => Record) | undefined; customizeNodeTooltip?: ((info: { label: string; title: string; weightIn: number; weightOut: number; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; linkTooltipTemplate?: any; nodeTooltipTemplate?: any; 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. */ weightFieldChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxSankey; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxSankeyModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/sankey/nested'; export { DxSankeyTypes };