# InsightsDashboard

## appmixer.ui.InsightsDashboard

![](/files/-Lvod6Xb_SfUlkAt5MpQ)

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();
```

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appmixer.com/6.0/v4.2/appmixer-sdk/api-reference/insightsdashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.