# InsightsDashboard

## appmixer.ui.InsightsDashboard

![](https://3013747694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-LvoCqxTXtKUVgN7QYk0%2F-Lvod6Xb_SfUlkAt5MpQ%2FScreenshot%202019-12-11%20at%2012.07.12.png?alt=media\&token=87b7772b-0488-4a90-8d30-73a272f72e3c)

The appmixer.ui.InsightsDashboard is a UI widget that displays all the charts that the user has defined. The charts are interactive and can be re-arranged with drag\&drop, refreshed to reflect the latest state, cloned and removed. Usually, you would listen to the chart:open event to open the appmixer.ui.InsightsChartEditor for the user to be able to re-configure their chart.

| Method                                  | Description                                                                                                                                                                                                                                                                                                    |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.InsightsDashboard(config)` | Constructor function that accepts `config` object. The `config` object must contain at least the `el` property that points to a container DOM element where the InsightsDashboard will be rendered.                                                                                                            |
| `open()`                                | Render the InsightsDashboard inside its container.                                                                                                                                                                                                                                                             |
| `close()`                               | Close the InsightsDashboard.                                                                                                                                                                                                                                                                                   |
| `on(event, handler)`                    | React on events of the InsightsDashboard. See below for the list of events the InsightsDashboard supports.                                                                                                                                                                                                     |
| `off([event], [handler])`               | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only.                                                           |
| `state(name, value)`                    | Change the state of the UI. Currently, only `"loader"` and `"error"` states are supported. For example, in order to show a loader in the InsightsDashboard UI, just call `state("loader", true)`. If you want to display an error in the InsightsDashboard UI, call `state("error", "Something went wrong.")`. |
| `reload()`                              | Refresh the content of InsightsDashboard.                                                                                                                                                                                                                                                                      |

### InsightsDashboard Events

| Event          | Callback            | Triggered when...                              |
| -------------- | ------------------- | ---------------------------------------------- |
| `chart:open`   | `function(chartId)` | the user clicks the "tripple-dot" tool button. |
| `chart:remove` | `function(chartId)` | the user clicks the trash icon tool button.    |

### Example

```javascript
var insightsDashboard = appmixer.ui.InsightsDashboard({
    el: '#your-insights-dashboard-div'
});
var insightsChartEditor = appmixer.ui.InsightsChartEditor({
    el: '#your-insights-chart-editor-div'
});
insightsDashboard.on('chart:open', function(chartId) {
    insightsChartEditor.open();
    insightsChartEditor.set('chartId', chartId);
});
insightsDashboard.on('chart:remove', function(chartId) {
    appmixer.api.deleteChart(chartId).then(function() {
        insightsDashboard.reload();
    });
});
insightsDashboard.open();
```

##