/** * DevExtreme (viz/sankey.d.ts) * Version: 25.2.7 * Build date: Tue May 05 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import DataSource, { DataSourceLike } from '../data/data_source'; import { UserDefinedElement, DxElement, } from '../core/element'; import { template, VerticalAlignment, } from '../common'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events'; import BaseWidget, { BaseWidgetOptions, BaseWidgetTooltip, FileSavingEventInfo, ExportInfo, IncidentInfo, } from './core/base_widget'; import { HatchDirection, Palette, PaletteExtensionMode, TextOverflow, Font, } from '../common/charts'; export { HatchDirection, Palette, PaletteExtensionMode, TextOverflow, }; export type SankeyColorMode = 'none' | 'source' | 'target' | 'gradient'; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo; /** * The type of the drawn event handler's argument. */ export type DrawnEvent = EventInfo; /** * The type of the exported event handler's argument. */ export type ExportedEvent = EventInfo; /** * The type of the exporting event handler's argument. */ export type ExportingEvent = EventInfo & ExportInfo; /** * The type of the fileSaving event handler's argument. */ export type FileSavingEvent = FileSavingEventInfo; /** * The type of the incidentOccurred event handler's argument. */ export type IncidentOccurredEvent = EventInfo & IncidentInfo; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo; /** * The type of the linkClick event handler's argument. */ export type LinkClickEvent = NativeEventInfo & { /** * */ readonly target: dxSankeyLink; }; /** * The type of the linkHoverChanged event handler's argument. */ export type LinkHoverEvent = EventInfo & { /** * */ readonly target: dxSankeyLink; }; /** * The type of the nodeClick event handler's argument. */ export type NodeClickEvent = NativeEventInfo & { /** * */ readonly target: dxSankeyNode; }; /** * The type of the nodeHoverChanged event handler's argument. */ export type NodeHoverEvent = EventInfo & { /** * */ readonly target: dxSankeyNode; }; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** * * @deprecated * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxSankeyOptions extends BaseWidgetOptions { /** * Specifies adaptive layout properties. */ adaptiveLayout?: { /** * Specifies the minimum container height at which the layout begins to adapt. */ height?: number; /** * Specifies whether node labels should be kept when the UI component adapts the layout. */ keepLabels?: boolean; /** * Specifies the minimum container width at which the layout begins to adapt. */ width?: number; }; /** * Aligns node columns vertically. */ alignment?: VerticalAlignment | Array; /** * Binds the UI component to data. */ dataSource?: DataSourceLike | null; /** * Specifies whether nodes and links change their style when they are hovered over or pressed. */ hoverEnabled?: boolean; /** * Configures sankey nodes' labels. */ label?: { /** * Configures the labels' borders. */ border?: { /** * Colors the labels' borders. */ color?: string | undefined; /** * Specifies whether the borders are visible. */ visible?: boolean | undefined; /** * Sets the borders' width in pixels. */ width?: number | undefined; }; /** * Customizes the labels' texts. */ customizeText?: ((itemInfo: dxSankeyNode) => string); /** * Specifies the labels' font properties. */ font?: Font; /** * Moves the labels horizontally from their initial positions. */ horizontalOffset?: number; /** * Specifies how to arrange labels when there is insufficient space to display them all. */ overlappingBehavior?: TextOverflow; /** * Configures the labels' shadows. */ shadow?: { /** * Specifies the shadows' blur distance. A larger value increases the blur distance. */ blur?: number; /** * Colors the labels' shadows. */ color?: string; /** * Moves the shadows horizontally from their initial positions. */ offsetX?: number; /** * Moves the shadows vertically from their initial positions. */ offsetY?: number; /** * Specifies the shadows' transparency. */ opacity?: number; }; /** * Specifies whether to color labels in the nodes' colors. */ useNodeColors?: boolean; /** * Moves the labels vertically from their initial positions. */ verticalOffset?: number; /** * Specifies whether the labels are visible. */ visible?: boolean; }; /** * Configures sankey links' appearance. */ link?: { /** * Configures the links' borders. */ border?: { /** * Colors the links' borders. */ color?: string | undefined; /** * Specifies whether the borders are visible. */ visible?: boolean | undefined; /** * Sets the borders' width in pixels. */ width?: number | undefined; }; /** * Colors the sankey links. Applies only if colorMode is 'none'. */ color?: string; /** * Specifies how to color links. */ colorMode?: SankeyColorMode; /** * Configures the appearance a link changes to when it is hovered over or pressed. */ hoverStyle?: { /** * Configures the appearance a link's border changes to when the link is hovered over or pressed. */ border?: { /** * Specifies the color a link's border changes to when the link is hovered over or pressed. */ color?: string | undefined; /** * Specifies whether a link's border is visible when the link is hovered over or pressed. */ visible?: boolean | undefined; /** * Specifies the width a link's border changes to when the link is hovered over or pressed. */ width?: number | undefined; }; /** * Specifies the color a link changes to when it is hovered over or pressed. */ color?: string | undefined; /** * Applies hatching to a link when it is hovered over or pressed. */ hatching?: { /** * Specifies hatching lines' direction. */ direction?: HatchDirection; /** * Specifies hatching lines' transparency. */ opacity?: number; /** * Specifies the distance in pixels between two hatching lines. */ step?: number; /** * Specifies hatching lines' width. */ width?: number; }; /** * Specifies the transparency a link changes to when it is hovered over or pressed. */ opacity?: number | undefined; }; /** * Specifies the links' transparency. */ opacity?: number; }; /** * Configures sankey nodes' appearance. */ node?: { /** * Configures the nodes' borders. */ border?: { /** * Colors the nodes' borders. */ color?: string | undefined; /** * Specifies whether the borders are visible. */ visible?: boolean | undefined; /** * Sets the borders' width in pixels. */ width?: number | undefined; }; /** * Colors the sankey nodes. */ color?: string | undefined; /** * Configures the appearance a node changes to when it is hovered over or pressed. */ hoverStyle?: { /** * Configures the appearance a node's border changes to when the node is hovered over or pressed. */ border?: { /** * Specifies the color a node's border changes to when the node is hovered over or pressed. */ color?: string | undefined; /** * Specifies whether a node's border is visible when the node is hovered over or pressed. */ visible?: boolean | undefined; /** * Specifies the width a node's border changes to when the node is hovered over or pressed. */ width?: number | undefined; }; /** * Specifies the color a node changes to when it is hovered over or pressed. */ color?: string | undefined; /** * Applies hatching to a node when it is hovered over or pressed. */ hatching?: { /** * Specifies hatching lines' direction. */ direction?: HatchDirection; /** * Specifies hatching lines' transparency. */ opacity?: number; /** * Specifies the distance in pixels between two hatching lines. */ step?: number; /** * Specifies hatching lines' width. */ width?: number; }; /** * Specifies the transparency a node changes to when it is hovered over or pressed. */ opacity?: number | undefined; }; /** * Specifies the nodes' transparency. */ opacity?: number; /** * Specifies the vertical distance, in pixels, between two nodes. */ padding?: number; /** * Specifies the nodes' width in pixels. */ width?: number; }; /** * A function that is executed when a sankey link is clicked or tapped. */ onLinkClick?: ((e: LinkClickEvent) => void) | string; /** * A function that is executed after the pointer enters or leaves a sankey link. */ onLinkHoverChanged?: ((e: LinkHoverEvent) => void); /** * A function that is executed when a sankey node is clicked or tapped. */ onNodeClick?: ((e: NodeClickEvent) => void) | string; /** * A function that is executed after the pointer enters or leaves a sankey node. */ onNodeHoverChanged?: ((e: NodeHoverEvent) => void); /** * Sets the palette to be used to colorize sankey nodes. */ palette?: Array | Palette; /** * Specifies how to extend the palette when it contains less colors than the number of sankey nodes. */ paletteExtensionMode?: PaletteExtensionMode; /** * Specifies nodes' sorting order in their columns. */ sortData?: any | undefined; /** * Specifies which data source field provides links' source nodes. */ sourceField?: string; /** * Specifies which data source field provides links' target nodes. */ targetField?: string; /** * 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. */ tooltip?: Tooltip; /** * Specifies which data source field provides links' weights. */ weightField?: string; } /** * */ export type Tooltip = BaseWidgetTooltip & { /** * Customizes link tooltips' appearance. */ customizeLinkTooltip?: ((info: { source?: string; target?: string; weight?: number }) => any) | undefined; /** * Customizes node tooltips' appearance. */ customizeNodeTooltip?: ((info: { title?: string; label?: string; weightIn?: number; weightOut?: number }) => any) | undefined; /** * Specifies whether the tooltip is enabled. */ enabled?: boolean; /** * Specifies a custom template for a link's tooltip. */ linkTooltipTemplate?: template | ((info: { source?: string; target?: string; weight?: number }, element: DxElement) => string | UserDefinedElement) | undefined; /** * Specifies a custom template for a node's tooltip. */ nodeTooltipTemplate?: template | ((info: { label?: string; weightIn?: number; weightOut?: number }, element: DxElement) => string | UserDefinedElement) | undefined; }; /** * 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 default class dxSankey extends BaseWidget { /** * Gets all sankey links. */ getAllLinks(): Array; /** * Gets all sankey nodes. */ getAllNodes(): Array; getDataSource(): DataSource; /** * Hides all UI component tooltips. */ hideTooltip(): void; } /** * * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxSankeyConnectionInfoObject { /** * The title of the link's source node. */ source?: string; /** * The title of the link's target node. */ target?: string; /** * The link's weight. */ weight?: number; } /** * A sankey link's structure. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxSankeyLink { /** * An object that describes the connection. */ connection?: dxSankeyConnectionInfoObject; /** * Hides the sankey link's tooltip. */ hideTooltip(): void; /** * Changes the sankey link's hover state. */ hover(state: boolean): void; /** * Indicates whether the sankey link is in the hover state. */ isHovered(): boolean; /** * Shows the sankey link's tooltip. */ showTooltip(): void; } /** * A sankey node's structure. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxSankeyNode { /** * Hides the sankey node's tooltip. */ hideTooltip(): void; /** * Changes the sankey node's hover state. */ hover(state: boolean): void; /** * Indicates whether the sankey node is in the hover state. */ isHovered(): boolean; /** * The node's label. */ label?: string; /** * The node's incoming links. */ linksIn?: Array; /** * The node's outgoing links. */ linksOut?: Array; /** * Shows the sankey node's tooltip. */ showTooltip(): void; } export type Properties = dxSankeyOptions; /** * @deprecated use Properties instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type Options = dxSankeyOptions; // #region deprecated in v23.1 /** * @deprecated Use Tooltip instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type dxSankeyTooltip = Tooltip; // #endregion