# Insights Dashboard

<figure><img src="https://content.gitbook.com/content/cfhstxIZQWZNvWjV2O6F/blobs/VEmSIwoY0JBAOw7XfFMV/insights-dashboard-light.png" alt=""><figcaption><p>Insights Dashboard</p></figcaption></figure>

## Configuration <a href="#configuration" id="configuration"></a>

Set up a new instance with `config` parameters and `set`/`get` methods:

```javascript
const insightsDashboard = appmixer.ui.InsightsDashboard(config)

insightsDashboard.set(key, value)
insightsDashboard.get(key)
```

#### **`config.el`** **`...`**

{% hint style="info" %}
Learn about `widget` `config` [here](https://docs.appmixer.com/6.0/6.1/appmixer-ui-sdk/ui-and-widgets/..#configuration).
{% endhint %}

## Instance <a href="#state" id="state"></a>

{% hint style="info" %}
Learn about `widget` instance [here](https://docs.appmixer.com/6.0/6.1/appmixer-ui-sdk/ui-and-widgets/..#instance).
{% endhint %}

### State

```javascript
insightsDashboard.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.

### Events <a href="#events" id="events"></a>

```javascript
insightsDashboard.on(event, handler)
```

#### **`chart:clone`**

```javascript
insightsDashboard.on('chart:clone', chartId => {/* ... */})
```

Clone chart.

#### **`chart:remove`**

```javascript
insightsDashboard.on('chart:remove', chartId => {/* ... */})
```

Remove chart.

#### **`chart:open`**

```javascript
insightsDashboard.on('chart:open', chartId => {/* ... */})
```

Open chart in **Chart Editor**.

## Example

```javascript
const insightsDashboard = appmixer.ui.InsightsDashboard({
    el: '#insights-dashboard'
})

insightsDashboard.open()
```