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


class Matrix(BaseWidget):
    """ 
:warning: **Autogenerated class**

Since `v6.0.0`

Matrix coordinate system component.

The `matrix` coordinate system, like a table, can serve as the layout system of data items in a series, mainly used to display the relationship and interaction of multi-dimensional data. It presents data in the form of a rectangular grid, where each grid unit (or "cell") represents the value of a specific data point in series like `series.heatmap`, `series.scatter`, `series.custom`, etc. The entire layout is displayed in rows and columns to express the relationship of two-dimensional or higher-dimensional data.

The `matrix` coordinate system can also serve as the layout system of the box of series like `series.pie`, `series.tree`, etc., or another coordinate systems like `grid` (i.e., Cartesian coordinate system), `geo`, `polar`, etc., or plain components like `legend`, `dataZoom`, etc. This character enables [mini charts](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1) to be laid out in a table, or enables the layout approach like [CSS grid layout](https://echarts.apache.org/examples/en/editor.html?c=matrix-grid-layout&edit=1&reset=1). Currently all the series and components can be laid out within a matrix. `matrix` can also be used purely as table for data texts.

Correlation heat map using heat map in matrix coordinate system:

Correlation scatter plot using scatter plot in matrix coordinate system:

Correlation graph using relationship graph in matrix coordinate system:

Correlation pie chart using pie chart in matrix coordinate system. The example below shows multi-level X data:

Confusion matrix using custom series in matrix coordinate system:

Mini charts are laid out in a table:



And other **mini charts** examples: [matrix mini bar example](https://echarts.apache.org/examples/en/editor.html?c=matrix-mini-bar-data-collection&edit=1&reset=1).

By flexibly using the combination of chart series, coordinate systems, and APIs, richer effects can be achieved.

Reference:

- Cell locating and reference: see the description in [matrix.body.data](#matrix.body.data.coord)
    """

    def __init__(self, **kwargs):

        super().__init__(**kwargs)  
    
    _model_name = Unicode("MatrixModel").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)
    
    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 undefined 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 the 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 undefined 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 the container height 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 undefined 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 the container width like `'20%'`.

Adaptive by default.""").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 undefined 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 the container height like `'20%'`.

Adaptive by default.""").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 matrix component. Adaptive by default.

`width` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`.""").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 matrix component. Adaptive by default.

`height` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`.""").tag(sync=True)
    
    x = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

X-axis header region.""").tag(sync=True)
    
    y = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

Y-axis header region.""").tag(sync=True)
    
    body = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

Body cells, which are the ones except header cells.""").tag(sync=True)
    
    corner = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

Corner cells, which are the one at the intersection of x and y-axis.""").tag(sync=True)
    
    backgroundStyle = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

The style of the entire matrix area.""").tag(sync=True)
    
    borderZ2 = Float(None, allow_none=True, help="""The secondary z-index of the outer border and the divider line.""").tag(sync=True)
    
    tooltip = Dict(default_value=None, allow_none=True, help="""The tooltip for cells, follow the same option as [tooltip](#tooltip). Disabled by default. We can enable tooltip if the text is overflow a cell boundary and truncated.

```
matrix: {
    tooltip: {
        show: true
    },
    // ...
}
```""").tag(sync=True)
    
        
