from ipywidgets import (
Widget, DOMWidget, widget_serialization, register
)
from ipywidgets.widgets.trait_types import TypedTuple
from traitlets import (
Unicode, Int, CInt, Instance, ForwardDeclaredInstance, This, Enum,
Tuple, List, Dict, Float, CFloat, Bool, Union, Any,
)
from ..basewidget import BaseWidget
[docs]
class Sankey(BaseWidget):
"""
:warning: **Autogenerated class**
**Sankey diagram**
Sankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.
**Example:**
**Visual Encoding:**
The Sankey diagram encodes each `node` of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The `label` next to the small rectangle encodes the name of the node.
In addition, the edge between two small rectangles in the diagram encodes the `link` of the raw data. The width of edge is shown proportionally to the `value` of `link`.
"""
def __init__(self, **kwargs):
super().__init__(**kwargs)
_model_name = Unicode("SankeyModel").tag(sync=True)
type = Unicode("sankey", allow_none=True, ).tag(sync=True)
id = Unicode(None, allow_none=True, help="""Component ID, not specified by default. If specified, it can be used to refer the component in option or API.""").tag(sync=True)
name = Unicode(None, allow_none=True, help="""Series name used for displaying in [tooltip](#tooltip) and filtering with [legend](#legend), or updating data and configuration with `setOption`.""").tag(sync=True)
zlevel = Float(None, allow_none=True, help="""`zlevel` value of all graphical elements in .
`zlevel` is used to make layers with Canvas. Graphical elements with different `zlevel` values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger `zlevel` will be placed on Canvases with smaller `zlevel`.""").tag(sync=True)
z = Float(None, allow_none=True, help="""`z` value of all graphical elements in , which controls order of drawing graphical components. Components with smaller `z` values may be overwritten by those with larger `z` values.
`z` has a lower priority to `zlevel`, and will not create new Canvas.""").tag(sync=True)
left = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between sankey component and the left side of the container.
`left` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.""").tag(sync=True)
top = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between sankey component and the top side of the container.
`top` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
If the `top` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.""").tag(sync=True)
right = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between sankey component and the right side of the container.
`right` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.""").tag(sync=True)
bottom = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between sankey component and the bottom side of the container.
`bottom` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.""").tag(sync=True)
width = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Width of sankey component.""").tag(sync=True)
height = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Height of sankey component.""").tag(sync=True)
nodeWidth = Float(None, allow_none=True, help="""The node width of rectangle in Sankey diagram.""").tag(sync=True)
nodeGap = Float(None, allow_none=True, help="""The gap between any two rectangles in each column of the Sankey diagram.""").tag(sync=True)
nodeAlign = Unicode(None, allow_none=True, help="""Controls the horizontal alignment of nodes in the diagram.
May be:
* `left`: initial nodes (those with no incoming links) are aligned to the left of the diagram.
* `right`: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.
* `justify`: initial and terminal nodes are aligned on the left and right edges.
Note when [orient](#series-sankey.orient) is `vertical`, `nodeAlign` controls vertical alignment.""").tag(sync=True)
layoutIterations = Float(None, allow_none=True, help="""The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is `32`. If you want the order of the nodes in the chart to be the same with the order in the original [data](#series-sankey.data), you can set the value to be `0`.""").tag(sync=True)
orient = Unicode(None, allow_none=True, help="""The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values are `horizontal` or `vertical`.""").tag(sync=True)
draggable = Bool(None, allow_none=True, help="""The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to `false`.""").tag(sync=True)
edgeLabel = Dict(default_value=None, allow_none=True, help="""> Since `v5.4.1`
The label style of each edge/link.""").tag(sync=True)
levels = Any(None, allow_none=True, help="""The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:
```
levels: [{
depth: 0,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 1,
itemStyle: {
color: '#b3cde3'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}]
```
You can also only set a certain layer:
```
levels: [{
depth: 3,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}]
```""").tag(sync=True)
label = Dict(default_value=None, allow_none=True, help="""`label` describes the text label style in each rectangular node.""").tag(sync=True)
labelLayout = Union([Any(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""> Since `v5.0.0`
Unified layout configuration of labels.
It provide a chance to adjust the labels' `(x, y)` position, alignment based on the original layout each series provides.
This option can be a callback with following parameters.
```
// corresponding index of data
dataIndex: number
// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'
dataType?: string
// corresponding index of series
seriesIndex: number
// Displayed text of label.
text: string
// Bounding rectangle of label.
labelRect: {x: number, y: number, width: number, height: number}
// Horizontal alignment of label.
align: 'left' | 'center' | 'right'
// Vertical alignment of label.
verticalAlign: 'top' | 'middle' | 'bottom'
// Bounding rectangle of the element corresponding to.
rect: {x: number, y: number, width: number, height: number}
// Default points array of labelLine. Currently only provided in pie and funnel series.
// It's null in other series.
labelLinePoints?: number[][]
```
**Example:**
Align the labels on the right. Left 10px margin to the edge.
```
labelLayout(params) {
return {
x: params.rect.x + 10,
y: params.rect.y + params.rect.height / 2,
verticalAlign: 'middle',
align: 'left'
}
}
```
Set the text size based on the size of element bounding rectangle.
```
labelLayout(params) {
return {
fontSize: Math.max(params.rect.width / 10, 5)
};
}
```""").tag(sync=True)
itemStyle = Dict(default_value=None, allow_none=True, help="""The style of node rectangle in Sankey diagram.""").tag(sync=True)
lineStyle = Dict(default_value=None, allow_none=True, help="""The edge style of Sankey diagram""").tag(sync=True)
emphasis = Dict(default_value=None, allow_none=True, help="""Configurations of emphasis state.""").tag(sync=True)
blur = Dict(default_value=None, allow_none=True, help="""> Since `v5.0.0`
Configurations of blur state. Available when [emphasis.focus](#series-sankey.emphasis.focus) is set.""").tag(sync=True)
select = Dict(default_value=None, allow_none=True, help="""> Since `v5.0.0`
Configurations of selected state. Available when [selectedMode](#series-sankey.selectedMode) is set.""").tag(sync=True)
selectedMode = Union([Bool(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""> Since `v5.0.0`
Selected mode. It is disabled by default, and you may set it to be `true` to enable it.
Besides, it can be set to `'single'`, `'multiple'` or `'series'`, for single selection, multiple selections and whole series selection.
> `'series'` is supported since v5.3.0""").tag(sync=True)
data = Any(None, allow_none=True, help="""The nodes list of the sankey diagram.
```
data: [{
name: 'node1',
// This attribute decides the layer of the current node.
depth: 0
}, {
name: 'node2',
depth: 1
}]
```
**Notice:** The name of the node cannot be repeated.""").tag(sync=True)
nodes = Any(None, allow_none=True, help="""Equals to [data](#series-sankey.data)""").tag(sync=True)
links = Any(None, allow_none=True, help="""The links between nodes. **Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.** For instance:
```
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
```""").tag(sync=True)
edges = Any(None, allow_none=True, help="""Equals to [links](#series-sankey.links)""").tag(sync=True)
silent = Bool(None, allow_none=True, help="""Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.""").tag(sync=True)
animation = Bool(None, allow_none=True, help="""Whether to enable animation.""").tag(sync=True)
animationThreshold = Float(None, allow_none=True, help="""Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.""").tag(sync=True)
animationDuration = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Duration of the first animation, which supports callback function for different data to have different animation effect:
```
animationDuration: function (idx) {
// delay for later data is larger
return idx * 100;
}
```""").tag(sync=True)
animationEasing = Unicode(None, allow_none=True, help="""Easing method used for the first animation. Varied easing effects can be found at [easing effect example](https://echarts.apache.org/examples/en/editor.html?c=line-easing).""").tag(sync=True)
animationDelay = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
```
animationDelay: function (idx) {
// delay for later data is larger
return idx * 100;
}
```
See [this example](https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay) for more information.""").tag(sync=True)
animationDurationUpdate = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Time for animation to complete, which supports callback function for different data to have different animation effect:
```
animationDurationUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
```""").tag(sync=True)
animationEasingUpdate = Unicode(None, allow_none=True, help="""Easing method used for animation.""").tag(sync=True)
animationDelayUpdate = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Delay before updating animation, which supports callback function for different data to have different animation effects.
For example:
```
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
```
See [this example](https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay) for more information.""").tag(sync=True)
tooltip = Dict(default_value=None, allow_none=True, help="""tooltip settings in this series.""").tag(sync=True)