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 Grid(BaseWidget):
    """ 
:warning: **Autogenerated class**

The `grid component` is a rectangular container, used to lay out two-dimensional rectangular coordinate system (also known as `cartesian2d` coordinate system).

A `cartesian2d` coordinate system is composed fo an [xAxis](#xAixs) and a [yAxis](#yAxis). Multiple `cartesian2d` coordinate systems can be arranged within a single `grid component` - that is, multiple [xAxis](#xAixs) and multiple [yAxis](#yAxis) instances can be configured within one `grid component`.

An [xAxis](#xAixs) or a [yAxis](#yAxis) can be shared by multiple `cartesian2d` coordinate systems. For example, one [xAxis](#xAixs) and two [yAxis](#yAxis) form two `cartesian2d` coordinate systems.

[Line chart](#series-line), [bar chart](#series-bar), and [scatter chart (bubble chart)](#series-scatter), etc., can be drawn in `grid component`.

> In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But since ECharts 3, there is no limitation.

**Following is an example of Anscombe Quartet:**
    """

    def __init__(self, **kwargs):

        super().__init__(**kwargs)  
    
    _model_name = Unicode("GridModel").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)
    
    show = Bool(None, allow_none=True, help="""Whether to show the grid in rectangular coordinate.""").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%'`.""").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%'`.""").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 grid 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 grid 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)
    
    containLabel = Bool(None, allow_none=True, help="""Deprecated since `v6.0.0`. See [grid.outerBoundsMode](#grid.outerBoundsMode).

Whether the grid region contains [axis tick label](#yAxis.axisLabel).

* When containLabel is `false`:
  + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that is made of by xAxis and yAxis.
  + Setting to `false` will help when multiple grids need to be aligned at their axes.
* When containLabel is `true`:
  + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` decide the location and size of the rectangle that contains the axes, and the labels of the axes.
  + Setting to `true` will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.""").tag(sync=True)
    
    outerBoundsMode = Unicode(None, allow_none=True, help="""Since `v6.0.0`

The "outer bounds" is a constraint rectangle used to prevent axis labels and axis names from overflowing. `outerBoundsMode` defines the strategy for determining the "outer bounds".

In most cases, we do not need to specify [grid.outerBoundsMode](#grid.outerBoundsMode), [grid.outerBounds](#grid.outerBounds), [grid.outerBoundsContain](#grid.outerBoundsContain) and [grid.containLabel](#grid.containLabel), as the default settings can prevent axis labels and axis names from overflowing the canvas.

The grid component (Cartesian) layout strategy:

* First, lay out axis lines based on the rect defined by [grid.left](#grid.left)/[right](#grid.right)/[top](#grid.top)/[bottom](#grid.bottom)/[width](#grid.width)/[height](#grid.height). This can meet the requirement of aligning axis lines across multiple grids.
* Then, if axis labels and/or axis names overflow the "outer bounds", shrink the rectangle to prevent that overflow. [grid.outerBoundsContain](#grid.outerBoundsContain) determines whether axis label and axis name is confined by the "outer bounds".

Options of `outerBoundsMode`:

* `'auto'`/`null`/`undefined` (default):
  + Behave the same as `outerBoundsMode: 'same'` when `grid.containLabel: true`.
  + Otherwise, the "outer bounds" is determined by [grid.outerBounds](#grid.outerBounds) if specified.
  + Otherwise, automatically determine the "outer bounds" - typically defaulting to the current canvas, or a assigned layout rectangle if this `grid` is laid out in another coordinate system (see [grid.coordinateSystem](#grid.coordinateSystem)).
* `'none'`: Force the "outer bounds" to be infinity (i.e., no constraint), regardless of the specified [grid.outerBounds](#grid.outerBounds).
* `'same'`: Force the "outer bounds" to be the same as the layout rectangle defined by [grid.left](#grid.left)/[right](#grid.right)/[top](#grid.top)/[bottom](#grid.bottom)/[width](#grid.width)/[height](#grid.height), regardless of the specified [grid.outerBounds](#grid.outerBounds).

> The "outer bounds" encompasses the functionality of [grid.containLabel](#grid.containLabel); therefore, [grid.containLabel](#grid.containLabel) is deprecated. `grid.containLabel: true` is equivalent to `grid: {outerBoundsMode: 'same', outerBoundsContain: 'axisLabel'}`.
> The effect might be slightly different, but usually indiscernible. You can use the code below to enforce the previous effect, though it's unnecessary in most cases.
>
> ```
> import {use} from 'echarts/core';
> import {LegacyGridContainLabel} from 'echarts/features';
> use([LegacyGridContainLabel]);
> ```

**Demo**: [outerBounds example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/grid-outerBounds&edit=1&reset=1).""").tag(sync=True)
    
    outerBounds = Dict(default_value=None, allow_none=True, help="""Since `v6.0.0`

See details in [grid.outerBoundsMode](#grid.outerBoundsMode).

See also [outerBounds example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/grid-outerBounds&edit=1&reset=1).""").tag(sync=True)
    
    outerBoundsContain = Bool(None, allow_none=True, help="""Since `v6.0.0`

Options:

* `'auto'`/`null`/`undefined` (default):
  + Behave the same as `outerBoundsContain: 'axisLabel'` if `containLabel: true`.
  + Otherwise, behave the same as `outerBoundsContain: 'all'`.
* `'all'`: The "outer bounds" constrain the grid (Cartesian) rectangle (determined by the x-axis and y-axis lines) and axis labels and axis names.
* `'axisLabel'`: The "outer bounds" constrain the grid (Cartesian) rectangle (determined by the x-axis and y-axis lines) and axis labels, but exclude axis names.

For more details, see [grid.outerBoundsMode](#grid.outerBoundsMode).

See also [outerBounds example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/grid-outerBounds&edit=1&reset=1).""").tag(sync=True)
    
    backgroundColor = Any(None, allow_none=True, help="""Background color of grid, which is transparent by default.

> Color can be represented in RGB, for example `'rgb(128, 128, 128)'`. RGBA can be used when you need alpha channel, for example `'rgba(128, 128, 128, 0.5)'`. You may also use hexadecimal format, for example `'#ccc'`.

**Attention**: Works only if `show: true` is set.""").tag(sync=True)
    
    borderColor = Any(None, allow_none=True, help="""Border color of grid. Support the same color format as backgroundColor.

**Attention**: Works only if `show: true` is set.""").tag(sync=True)
    
    borderWidth = Float(None, allow_none=True, help="""Border width of grid.

**Attention**: Works only if `show: true` is set.""").tag(sync=True)
    
    shadowBlur = Float(None, allow_none=True, help="""Size of shadow blur. This attribute should be used along with `shadowColor`,`shadowOffsetX`, `shadowOffsetY` to set shadow to component.

For example:

```
{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}
```

**Attention**: This property works only if `show: true` is configured and `backgroundColor` is defined other than `transparent`.""").tag(sync=True)
    
    shadowColor = Any(None, allow_none=True, help="""Shadow color. Support same format as `color`.

**Attention**: This property works only if `show: true` configured.""").tag(sync=True)
    
    shadowOffsetX = Float(None, allow_none=True, help="""Offset distance on the horizontal direction of shadow.

**Attention**: This property works only if `show: true` configured.""").tag(sync=True)
    
    shadowOffsetY = Float(None, allow_none=True, help="""Offset distance on the vertical direction of shadow.

**Attention**: This property works only if `show: true` configured.""").tag(sync=True)
    
    tooltip = Dict(default_value=None, allow_none=True, help="""tooltip settings in the coordinate system component.

**General Introduction:**

tooltip can be configured on different places:

* Configured on global: [tooltip](#tooltip)
* Configured in a coordinate system: [grid.tooltip](#grid.tooltip), [polar.tooltip](#polar.tooltip), [single.tooltip](#single.tooltip)
* Configured in a series: [series.tooltip](#series.tooltip)
* Configured in each item of `series.data`: [series.data.tooltip](#series.data.tooltip)""").tag(sync=True)
    
    coordinateSystem = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Specifies another coordinate system component on which this `grid` is laid out.

Options:

* `null`/`undefined`/`'none'`

  Not laid out in any coordinate system; instead, laid out independently.

* `'calendar'`

  Lay out based on a [calendar coordinate system](#calendar). When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system should be specified using [calendarIndex](#grid.calendarIndex) or [calendarId](#grid.calendarId).

* `'matrix'`

  Lay out based on a [matrix coordinate system](#matrix). When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using [matrixIndex](#grid.matrixIndex) or [matrixId](#grid.matrixId).

  See example [sparkline in matrix](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1).

**Support for series and component layout on coordinate systems:**

The leftmost column lists the series and components that will be laid out (coordinate systems themselves are also components), and the topmost row lists the coordinate systems that can be laid out on.

|  | no coord sys | [grid](#grid) (cartesian2d) | [polar](#polar) | [geo](#geo) | [singleAxis](#singleAxis) | [radar](#radar) | [parallel](#parallel) | [calendar](#calendar) | [matrix](#matrix) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [grid](#grid) (cartesian2d) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [polar](#polar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [geo](#geo) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [singleAxis](#singleAxis) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [calendar](#calendar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| [matrix](#matrix) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| [series-line](#series-line) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-bar](#series-bar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-pie](#series-pie) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-scatter](#series-scatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-effectScatter](#series-effectScatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-radar](#series-radar) | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ (✅ if via [radar](#radar) coord sys) | ❌ (✅ if via [radar](#radar) coord sys) |
| [series-tree](#series-tree) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-treemap](#series-treemap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-sunburst](#series-sunburst) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-boxplot](#series-boxplot) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-candlestick](#series-candlestick) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-heatmap](#series-heatmap) | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-map](#series-map) | ✅ (create a geo coord sys exclusively) | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-parallel](#series-parallel) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ (✅ if via [parallel](#parallel) coord sys) | ❌ (✅ if via [parallel](#parallel) coord sys) |
| [series-lines](#series-lines) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [geo](#geo)) | ❌ (✅ if via another coord sys like [geo](#geo)) |
| [series-graph](#series-graph) | ✅ (create a "view" coord sys exclusively) | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-sankey](#series-sankey) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-funnel](#series-funnel) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-gauge](#series-gauge) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-pictorialBar](#series-pictorialBar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-themeRiver](#series-themeRiver) | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [singleAxis](#singleAxis)) | ❌ (✅ if via another coord sys like [singleAxis](#singleAxis)) |
| [series-chord](#series-chord) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [title](#title) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [legend](#legend) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [dataZoom](#dataZoom) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [visualMap](#visualMap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [toolbox](#toolbox) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [timeline](#timeline) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [thumbnail](#thumbnail) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |

See also [grid.coordinateSystemUsage](#grid.coordinateSystemUsage).""").tag(sync=True)
    
    coordinateSystemUsage = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Specify how to lay out this `grid` based on the specified [coordinateSystem](#grid.coordinateSystem).

In most cases, there is no need to specify `coordinateSystemUsage`, unless the default behavior is unexpected.

Options:

* `'data'`: **(Not applicable in [grid](#grid))**

  Each data item of a series (e.g., each `series.data[i]`) is laid out separately based on the specified coordinate system. Currently no non-series component supports `coordinateSystemUsage: 'data'`.
* `'box'`:

  The entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system.

  + For example, a [grid component](#grid) can be laid out in a [matrix coordinate system](#matrix) or a [calendar coordinate system](#calendar), where its layout rectangle is calculated by the specified [grid.coords](#grid.coords) in that system. See example [sparkline in matrix](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1).
  + For example, a [pie series](#series-pie) or a [chord series](#series-chord) can be laid out in a [geo coordinate system](#geo) or a [cartesian2d coordinate system](#grid), where the center is calculated by the specified [series-pie.coords](#series-pie.coords) or [series-pie.center](#series-pie.center) in that system. See example [pie in geo](https://echarts.apache.org/examples/en/editor.html?c=map-iceland-pie&edit=1&reset=1).

See also [grid.coordinateSystem](#grid.coordinateSystem).""").tag(sync=True)
    
    coord = Union([Any(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Since `v6.0.0`

When [coordinateSystemUsage](#grid.coordinateSystemUsage) is `'box'`, `coord` is used as the input to the coordinate system and calculate the layout rectangle or anchor point.

Examples: [sparkline in matrix](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1), [grpah in matrix](https://echarts.apache.org/examples/en/editor.html?c=doc-example/matrix-graph-box&edit=1&reset=1).

> Note: when [coordinateSystemUsage](#grid.coordinateSystemUsage) is `'data'`, the input of coordinate system is `series.data[i]` rather than this `coord`.

The format this `coord` is defined by each coordinate system, and it's the same as the second parameter of [chart.convertToPixel](api.html#echartsInstance.convertToPixel).""").tag(sync=True)
    
    calendarIndex = Float(None, allow_none=True, help="""Since `v6.0.0`

The index of the [calendar coordinate system](#calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`.""").tag(sync=True)
    
    calendarId = Float(None, allow_none=True, help="""Since `v6.0.0`

The id of the [calendar coordinate system](#calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`.""").tag(sync=True)
    
    matrixIndex = Float(None, allow_none=True, help="""Since `v6.0.0`

The index of the [matrix coordinate system](#matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`.""").tag(sync=True)
    
    matrixId = Float(None, allow_none=True, help="""Since `v6.0.0`

The id of the [matrix coordinate system](#matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`.""").tag(sync=True)
    
        
