@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
471 lines (470 loc) • 11.2 kB
TypeScript
import { ChildProperty } from '@syncfusion/ej2-base';
import { Alignment, LegendPosition } from '../../common/utils/enum';
import { BorderModel, FontModel, LocationModel, MarginModel } from '../../common/model/base-model';
import { SankeyTextStyle, SankeyTooltipFadeOutMode } from './sankey-interface';
import { ColorType } from './sankey-enum';
import { SankeyDataLabelModel } from './sankey-base-model';
/**
* Configures label settings for Sankey nodes to customize their appearance and text styling.
*/
export declare class SankeyDataLabel extends ChildProperty<SankeyDataLabel> {
/**
* Options for customizing the data label of the Sankey
* node.
*/
text: string;
/**
* Adds space around text for better placement.
*
* @default null
*/
padding: number;
}
/**
* Configures label settings for Sankey nodes to customize their appearance and text styling.
*/
export declare class SankeyLabelSettings extends ChildProperty<SankeyLabelSettings> {
/**
* Shows or hides labels.
*
* @default true
*/
visible: boolean;
/**
* Controls label size.
*
* @default '12px'
*/
fontSize: string | number;
/**
* Sets text color for labels.
*
* @default ''
*/
color: string;
/**
* Applies a specific font family to labels.
*
* @default null
*/
fontFamily: string;
/**
* Sets text weight (for example, 400 for normal, 700 for bold).
*
* @default '400'
*/
fontWeight: string;
/**
* Adds space around text for better placement.
*
* @default 10
*/
padding: number;
/**
* Enables text styles such as italic.
*
* @default 'normal'
*/
fontStyle: string;
}
/**
* Defines a Sankey node item.
*/
export declare class SankeyNode extends ChildProperty<SankeyNode> {
/**
* Specifies the color applied to the node.
* The node color is applied based on the current theme if this property is not specified.
*
* @default null
*/
color: string;
/**
* A unique string identifier for the node.
* Ensure the `id` is unique across all nodes in the Sankey chart.
*
* @default null
*/
id: string;
/**
* Options for customizing the data label of the Sankey node.
*/
label: SankeyDataLabelModel;
/**
* Specifies a custom offset position for the node.
* This allows shifting the node horizontally (in Horizontal orientation) or vertically (in Vertical orientation), relative to its computed layout position.
*
* @default 0
*/
offset: number;
}
/**
* Represents a single link (edge) in a Sankey diagram. A link connects a source node to a target node and carries a quantitative flow between them.
*/
export declare class SankeyLink extends ChildProperty<SankeyLink> {
/**
* Specifies the unique identifier of the source node for this
* link.
* This should match the `id` of an existing Sankey node.
*
* @default null
*/
sourceId: string;
/**
* Specifies the unique identifier of the target node for this link.
* This should match the `id` of an existing Sankey node.
*
* @default null
*/
targetId: string;
/**
* Defines the weight or value of the link.
* This determines the thickness of the link in the Sankey diagram.
*
* @default null
*/
value: number;
}
/**
* Configures link style settings for Sankey diagram links to customize their appearance and behavior.
*/
export declare class SankeyLinkSettings extends ChildProperty<SankeyLinkSettings> {
/**
* Specifies the opacity of the link.
*
* @default 0.35
*/
opacity: number;
/**
* Specifies the opacity of the link when highlighted.
*
* @default 1
*/
highlightOpacity: number;
/**
* Specifies the opacity of the link when inactive.
*
* @default 0.3
*/
inactiveOpacity: number;
/**
* Link curvature factor (0..1), 0 = straight line, 1 = full curve.
*
* @default 0.55
*/
curvature: number;
/**
* Specifies the color blending type for the links.
*
* @default 'Blend'
*/
colorType: ColorType;
}
/**
* Configures node style settings for Sankey nodes to customize their appearance and styling.
*/
export declare class SankeyNodeSettings extends ChildProperty<SankeyNodeSettings> {
/**
* Specifies the stroke color of the node.
*
* @default ''
*/
stroke: string;
/**
* Specifies the fill color of the node.
*
* @default null
*/
fill: string;
/**
* Specifies the stroke width of the node.
*
* @default 1
*/
strokeWidth: number;
/**
* Specifies the padding around the node content.
*
* @default 10
*/
padding: number;
/**
* Specifies the width of the node rectangle in pixels.
*
* @default 20
*/
width: number;
/**
* Specifies the opacity of the node.
*
* @default 1
*/
opacity: number;
/**
* Specifies the opacity of the node when highlighted.
*
* @default 1
*/
highlightOpacity: number;
/**
* Specifies the opacity of the node when inactive.
*
* @default 0.3
*/
inactiveOpacity: number;
}
/**
* Represents the text style settings used for rendering the title of a Sankey diagram.
*/
export declare class SankeyTitleStyle extends ChildProperty<SankeyTitleStyle> {
/**
* Specifies the font size for the title text.
*
* @default null
*/
size: string;
/**
* Specifies the weight of the title text.
*
* @default null
*/
fontWeight: string;
/**
* Specifies the font family for the title text.
*
* @default null
*/
fontFamily: string;
/**
* Specifies the color of the title text.
*
* @default null
*/
color: string;
/**
* Specifies the font style for the title text.
*
* @default 'normal'
*/
fontStyle: string;
/**
* Specifies the opacity of the title text.
*
* @default 1
*/
opacity: number;
/**
* The `textAlignment` property determines how the text is aligned within the specified area.
*
* @default 'Center'
*/
textAlignment: Alignment;
}
/**
* Configures the tooltip behavior and appearance for the Sankey diagram.
*/
export declare class SankeyTooltipSettings extends ChildProperty<SankeyTooltipSettings> {
/**
* Enables or disables the tooltip display.
*
* @default true
*/
enable: boolean;
/**
* Background fill color of the tooltip.
*
* @default null
*/
fill: string;
/**
* Opacity of the tooltip container.
*
* @default 1
*/
opacity: number;
/**
* Text style used within the tooltip.
*
* @default null
*/
textStyle: SankeyTextStyle;
/**
* Format string for node tooltips.
*
* @default '$name : $value'
*/
nodeFormat: string;
/**
* Format string for link tooltips.
*
* @default '$start.name $start.value → $target.name $target.value'
*/
linkFormat: string;
/**
* Custom template or rendering function for node tooltips.
*
* @default null
*/
nodeTemplate: string | Function;
/**
* Custom template or rendering function for link tooltips.
*
* @default null
*/
linkTemplate: string | Function;
/**
* Enables or disables tooltip animation.
*
* @default true
*/
enableAnimation: boolean;
/**
* Duration of the tooltip show animation (in ms).
*
* @default 300
*/
duration: number;
/**
* Duration of the tooltip fade-out animation (in ms).
*
* @default 1000
*/
fadeOutDuration: number;
/**
* Specifies the mode for the fade-out animation when hiding the tooltip.
*
* @default Move
*/
fadeOutMode: SankeyTooltipFadeOutMode;
}
/**
* Configures the legend behavior and appearance for the Sankey diagram
*/
export declare class SankeyLegendSettings extends ChildProperty<SankeyLegendSettings> {
/**
* Enables or disables the legend display.
*
* @default true
*/
visible: boolean;
/**
* Specifies the width of the legend.
*
* @default null
*/
width: string;
/**
* Specifies the height of the legend.
*
* @default null
*/
height: string;
/**
* Specifies the position of the legend in the chart.
*
* @default 'Auto'
*/
position: LegendPosition;
/**
* Padding around the legend container.
*
* @default 8
*/
padding: number;
/**
* Padding between legend items.
*
* @default null
*/
itemPadding: number;
/**
* Defines the text styling options applied to legend labels in the Sankey diagram.
*/
textStyle: FontModel;
/**
* Size of the legend shape (icon).
*
* @default 10
*/
shapeWidth: number;
/**
* Size of the legend shape (icon).
*
* @default 10
*/
shapeHeight: number;
/**
* Options for customizing the border of the legend.
*/
border: BorderModel;
/**
* Options to configure the margins around the component.
*/
margin: MarginModel;
/**
* Padding between the legend shape and its text.
*
* @default 8
*/
shapePadding: number;
/**
* Background color of the legend.
*
* @default 'transparent'
*/
background: string;
/**
* Opacity of the legend container.
*
* @default 1
*/
opacity: number;
/**
* Enables or disables highlighting of legend items on interaction.
*
* @default true
*/
enableHighlight: boolean;
/**
* Title text for the legend.
*
* @default null
*/
title: string;
/**
* Defines the font styling used for rendering the legend title in the Sankey diagram.
*/
titleStyle: FontModel;
/**
* Specifies whether the legend layout should be inverted.
*
* @default false
*/
isInversed: boolean;
/**
* Specifies whether the legend items should be displayed in reverse order.
*
* @default false
*/
reverse: boolean;
/**
* Specifies the location of the legend relative to the Sankey chart.
* If x is 20, the legend moves 20 pixels to the right of the Sankey chart.
> Note that the `position` must be set to `Custom` for this feature to work.
* ```html
* <div id='Sankey'></div>
* ```
* ```typescript
* let sankey: Sankey = new Sankey({
* ...
* legendSettings: {
* visible: true,
* position: 'Custom',
* location: { x: 100, y: 150 }
* }
* ...
* });
* sankey.appendTo('#Sankey');
* ```
*/
location: LocationModel;
}