InsightsDashboard

appmixer.ui.InsightsDashboard

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

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