Visualization custom element

gd-insight embeds a single saved visualization. It renders the InsightView component:

<!-- minimal setup -->
<gd-insight insight="my-visualization-id"></gd-insight>

Supported attributes

<!-- all supported attributes -->
<gd-insight
    insight="my-visualization-id"
    workspace="my-workspace-id"
    locale="en-US"
    title="Custom visualization title"
    mapbox="my-mapbox-token"
    agGrid="my-ag-grid-license-key"
></gd-insight>

• insight - required, the ID of the visualization to embed.
• workspace - optional, the ID of the workspace of this visualization. By default, it’s taken from the context, for example from the script URL.
• locale - optional, defaults to en-US. The localization of the visualization UI. Use the hyphenated form (en-US, de-DE); an unknown value falls back to en-US. For all available languages, see the full list of available localizations.
• title - optional. As a boolean attribute, it renders the title stored with the visualization. As a string, it renders that string instead.
• filters - optional, a JSON array of filter objects applied to the visualization. An invalid value is logged with console.error and ignored.
• mapbox - optional, a Mapbox access token used by geo charts. Overrides the mapboxToken from the context.
• agGrid - optional, an AG Grid license key used by pivot tables. Overrides the agGridToken from the context.

<!-- with no `title` attribute, the title isn't rendered -->
<gd-insight insight="my-visualization"></gd-insight>

<!-- with a boolean `title` attribute, the title is loaded from the server and rendered above the visualization -->
<gd-insight insight="my-visualization" title></gd-insight>

<!-- with a string `title` attribute, that string is rendered above the visualization -->
<gd-insight insight="my-visualization" title="My custom title"></gd-insight>

You can also set the workspace ID once on the context instead of passing it to every element. See the code example in Web Components authentication.

Supported events

gd-insight emits the following events. The detail of each event is the argument of the matching InsightView callback:

• drill - the user drilled in the visualization. The detail is the drill event, IDrillEvent.
• error - loading or computing the visualization failed. The detail is the GoodDataSdkError.
• exportReady - the visualization is ready to be exported. The detail is the export function, IExportFunction; call it to export the data.
• loadingChanged - the loading state of the visualization changed. The detail is ILoadingState.
• insightLoaded - the visualization definition has loaded. The detail is the IInsight.

Events don’t bubble and aren’t cancelable. Subscribe to them as to any other DOM event:

<gd-insight insight="my-visualization" id="some-dom-id"></gd-insight>
<script>
    const insightEl = document.getElementById("some-dom-id");
    insightEl.addEventListener("insightLoaded", (event) => {
        // See what's in the event payload
        console.log(event.detail);
    });
</script>