ipecharts.option.seriesitems.themeriver module#

class ipecharts.option.seriesitems.themeriver.ThemeRiver(**kwargs: Any)[source]#

Bases: BaseWidget

Warning:

Autogenerated class

Theme river

It is a special flow graph which is mainly used to present the changes of an event or theme during a period.

Sample:

visual encoding:

The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.

What’s more, the time attribute of the orinigal dataset would map to a single time axis.

type Unicode('themeRiver')#
id Unicode(None)#

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

name Unicode(None)#

Series name used for displaying in [tooltip](#tooltip) and filtering with [legend](#legend), or updating data and configuration with setOption.

colorBy Unicode(None)#

> Since v5.2.0

The policy to take color from [option.color](#color). Valid values:

  • ‘series’: assigns the colors in the palette by series, so that all data in the same series are in the same color;

  • ‘data’: assigns colors in the palette according to data items, with each data item using a different color.

zlevel Float(None)#

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.

z Float(None)#

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.

left Union(None)#

Distance between thmemRiver 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.

top Union(None)#

Distance between thmemRiver 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.

right Union(None)#

Distance between thmemRiver 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%’.

bottom Union(None)#

Distance between thmemRiver 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%’.

width Union(None)#

Width of thmemRiver component.

height Union(None)#

Height of thmemRiver component.

Notes:

The positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.

coordinateSystem Unicode(None)#

coordinate. The theme river adopts single time axis.

boundaryGap Any(None)#

The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.

singleAxisIndex Float(None)#

The index of single time axis, which defaults to be 0 because it contains only one axis.

label Dict()#

label describes style of text labels with which each ribbon-shape river branch corresponds in theme river.

labelLine Dict()#

> Since v5.0.0

Configuration of label guide line.

labelLayout Union(None)#

> 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)

};

}

```

itemStyle Dict()#

style of each ribbon-shape river branch in theme river.

emphasis Dict()#

Configurations of emphasis state.

blur Dict()#

> Since v5.0.0

Configurations of blur state.

select Dict()#

> Since v5.0.0

Configurations of select state.

selectedMode Union(None)#

> 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

data Any(None)#

``` data: [

[“2015/11/09”,10,”DQ”], [“2015/11/10”,10,”DQ”], [“2015/11/11”,10,”DQ”], [“2015/11/08”,10,”SS”], [“2015/11/09”,10,”SS”], [“2015/11/10”,10,”SS”], [“2015/11/11”,10,”SS”], [“2015/11/12”,10,”SS”], [“2015/11/13”,10,”QG”], [“2015/11/08”,10,”QG”], [“2015/11/11”,10,”QG”], [“2015/11/13”,10,”QG”],

]

```

data specification:

As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event “SS” is a main river. After dispose, we would complete these 3 default time points with the format of [“2015/11/08”,0,”DQ”], [“2015/11/12”,0,”DQ”], ［”2015/11/13”,0,”DQ”］, making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.

tooltip Dict()#

tooltip settings in this series.