Embedded Events

This applies to: Visual Data Discovery

Embedded events are described in the following tables:

Sample code showing how to subscribe to the events that trigger the event listeners is provided in each description. In these examples, when the event is triggered, a log message is written to the console. You can alter this behavior using custom JavaScript appropriate for your installation. For example, you can trigger a pop-up message (instead of a log message) using the Javascript alert() method instead of the console.log() method. For example: alert("Dashboard has been loaded !!!");

The event detail payload that is passed to the event listener is experimental and might be changed. Mutating the detail object (e.detail.*) will not update the UI; the object is read-only.

Symphony provides a componentInstanceId provides a as part of event details for dashboard, source, and visual events.

Document Events

Event Description
composer-init-failed

Triggered by document if the component fails to initialize. No data is passed in the event.

document.addEventListener("composer-init-failed", () => {
     console.log("composer-init-failed");
});
composer-unauthorized

Triggered by document when the authorization token expires. No data is passed in the event.

document.addEventListener("composer-unauthorized", () => {
     console.log("composer-unauthorized");
});

Dashboard Events

Event Description
composer-dashboard-changed

Triggered by the dashboard when there is any change in the dashboard configuration. This is useful for tracking the active state of the dashboard. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-changed", (e) => {
     console.log(e.detail.dashboard);
});
composer-dashboard-deleted

Triggered by the dashboard when the dashboard is deleted. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-deleted", (e) => {
     console.log(e.detail.dashboard);
});
composer-dashboard-failed Triggered by the dashboard when the dashboard fails to load. The data passed in the event includes the failure reason (failedReason).
dashboard.addEventListener("composer-dashboard-failed", (e) => {
     console.log(e.detail.failedReason);
});
composer-dashboard-loaded

Triggered when a dashboard resource is loaded. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-loaded", (e) => {
     console.log(e.detail.dashboard);
});
composer-dashboard-ready

Triggered by the dashboard when all visuals on the dashboard have been rendered. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-ready", (e) => {     
     console.log(e.detail.dashboard);
});
composer-dashboard-saved

Triggered by the dashboard when a dashboard resource has been successfully saved. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-saved", (e) => {
     console.log(e.detail.dashboard);
});
composer-dashboard-widget-added

Triggered by the dashboard when a visual is added to the dashboard. The data passed in the event includes the visual and visual data (e.detail.visual).

dashboard.addEventListener("composer-dashboard-widget-added", (e) => {       
     console.log(e.detail.visual);
});
composer-dashboard-widget-removed

Triggered by the dashboard when a visual is removed from the dashboard. The data passed in the event includes the visual and visual data (e.detail.visual).

dashboard.addEventListener("composer-dashboard-widget-removed", (e) => {
     console.log(e.detail.visual);
});
composer-dashboard-pristine

Triggered by the dashboard when changes are made but not saved. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-pristine", (e) => {
     console.log(e.detail.dashboard);
});
composer-dashboard-dirty

Triggered by the dashboard when there are no unsaved changes to the dashboard. The data passed in the event includes the dashboard and dashboard data (e.detail.dashboard).

dashboard.addEventListener("composer-dashboard-widget-removed", (e) => {
     console.log(e.detail.dashboard);
});

Visual Authoring Events

Event Description
composer-visual-builder-changed

Triggered when there is any change in the nested visual or the visual authoring configuration. The data passed in the event includes the visual authoring configuration (e.detail.visualBuilder).

embeddedComponent.addEventListener("composer-visual-builder-changed", (e) => {
     console.log(e.detail.visualBuilder);
});
composer-visual-builder-failed

Triggered when visual authoring fails to load. The data passed in the event includes the visual builder data as well as the failure reason (e.detail.failedReason).

embeddedComponent.addEventListener("composer-visual-builder-failed", (e) => {
     console.log(e.detail.visualBuilder);
     console.log(e.detail.failedReason);
});
composer-visual-builder-loaded

Triggered when visual authoring is loaded and the visual authoring shell is rendered. The data passed in the event includes the visual authoring configuration (e.detail.visualBuilder).

embeddedComponent.addEventListener("composer-visual-builder-loaded", (e) => {
     console.log(e.detail.visualBuilder);
});
composer-visual-builder-ready

Triggered when the nested visual is rendered. The data passed in the event includes the visual authoring configuration (e.detail.visualBuilder).

embeddedComponent.addEventListener("composer-visual-builder-ready", (e) => {
     console.log(e.detail.visualBuilder);
});

Visual Events

Event Description
composer-visual-failed

Triggered by the dashboard or by visual authoring when a visual within the dashboard fails to load. The data passed in the event includes the visual and visual data as well as the failure reason (failedReason).

embeddedComponent.addEventListener("composer-visual-failed", (e) => {
     console.log(e.detail.visual);
     console.log(e.detail.failedReason);
});
composer-visual-loaded

Triggered by the dashboard or visual authoring when a visual within the dashboard is loaded. The data passed in the event includes the visual and visual data as well as the visualization instance ID (e.detail.visual).

embeddedComponent.addEventListener("composer-visual-loaded", (e) => {
     console.log(e.detail.visual);
});
composer-visual-rendered

Triggered by the dashboard or visual authoring when a visual within the dashboard is fully rendered. The data passed in the event includes the visual and visual data as well as the visualization instance ID (e.detail.visual).

embeddedComponent.addEventListener("composer-visual-rendered", (e) => {
     console.log(e.detail.visual);
});
composer-visual-saved

Triggered when visual authoring has been successfully saved. The data passed in the event includes the visual authoring configuration (e.detail.visual).

vb.addEventListener("composer-visual-saved", (e) => {
     console.log(e.detail.visual);
});
composer-visual-series-mousemove

Triggered when a user hovers over one item in a series, such as a bar on a bar chart, or sector in a pie visual. The data passed in the event includes componentInstanceId, visualApi, and the current series in e.detail.

embeddedComponent.addEventListener("composer-visual-series-mousemove", (e) => {
	console.log(e.detail.componentInstanceId);
	console.log(e.detail.visualApi);
	console.log(e.detail.data);
});
composer-visual-series-mouseout

Triggered when a user stops hovering over an item in a series, such as a bar on a bar chart, or sector in a pie visual. 

embeddedComponent.addEventListener("composer-visual-series-mouseout", (e) => {
	console.log(e.detail.componentInstanceId);
	console.log(e.detail.visualApi);
});
composer-visual-mousemove

Triggered when a user hovers over a space that is empty but related to a visual, such as between the bars of a visual, or in a blank spot on a pie visual.

embeddedComponent.addEventListener("composer-visual-series-mousemove", (e) => {
	console.log(e.detail.componentInstanceId);
	console.log(e.detail.visualApi);
});
composer-visual-mouseout

Triggered when a user stops hovering the visual. 

embeddedComponent.addEventListener("composer-visual-series-mouseout", (e) => {
	console.log(e.detail.componentInstanceId);
	console.log(e.detail.visualApi);
});

Source Editor Events

Event Description
composer-source-editor-ready

Triggered when the source editor is rendered the first time. The data passed in the event is undefined.

sourceEditor.addEventListener("composer-source-editor-ready", (e) =>{			console.log(e);
});
composer-source-definition-ready

Triggered when a source is loaded on Source Creation tab. The data passed in the event include the source definition: e.detail.source.

sourceEditor.addEventListener("composer-source-definition-ready", (e) => {	console.log(e.detail.source);
});
composer-source-fields-ready

Triggered when source fields are loaded on the Fields tab. The data passed in the event includes the source fields:e.detail.fields.

sourceEditor.addEventListener("composer-source-fields-ready", (e) => {
	console.log(e.detail.fields);
});
composer-source-cache-ready

Triggered when source cache settings are loaded on the Cache tab. The data passed in the event includes the source cache settings: e.detail.cache.

sourceEditor.addEventListener("composer-source-cache-ready", (e) => {
	console.log(e.detail.cache);
});
composer-source-settings-ready

Triggered when source global settings are loaded on the Global Settings tab. The data passed in the event includes the source global settings: e.detail.settings.

sourceEditor.addEventListener("composer-source-settings-ready", (e) => {
	console.log(e.detail.settings);
});
composer-source-created

Triggered when a source is created. The data passed in the event includes the source definition: e.detail.source.

sourceEditor.addEventListener("composer-source-created", (e) => {
	console.log(e.detail.source);
});
composer-source-saved

Triggered when a source is saved. The data passed in the event includes the source definition: e.detail.source.

sourceEditor.addEventListener("composer-source-saved", (e) => {
	console.log(e.detail.source);
});
composer-source-field-created

Triggered when a source field is created. The data passed in the event includes the source field: e.detail.field.

sourceEditor.addEventListener("composer-source-field-created", (e) => {
	console.log(e.detail.field);
});
composer-source-field-saved

Triggered when a source field is saved. The data passed in the event includes the source field: e.detail.field.

sourceEditor.addEventListener("composer-source-field-saved", (e) => {
	console.log(e.detail.field);
});
composer-source-field-deleted

Triggered when a source field is deleted. The data passed in the event includes the source field: e.detail.field.

sourceEditor.addEventListener("composer-source-field-deleted", (e) => {
	console.log(e.detail.field);
});
composer-source-metric-created

Triggered when a source metric is created. The data passed in the event includes the source metric: e.detail.metric.

sourceEditor.addEventListener("composer-source-metric-created", (e) => {
	console.log(e.detail.metric);
});
composer-source-metric-saved

Triggered when a source metric is saved. The data passed in the event includes the source metric: e.detail.metric.

sourceEditor.addEventListener("composer-source-metric-saved", (e) => {
	console.log(e.detail.metric);
});
composer-source-metric-deleted

Triggered when a source metric is deleted. The data passed in the event includes the source metric: e.detail.metric.

sourceEditor.addEventListener("composer-source-metric-deleted", (e) => {
	console.log(e.detail.metric);
});