InsightView

The InsightView component is a generic component that renders insights created and saved by Analytical Designer.

Structure

import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";

<div style={{ height: 400, width: 600 }}>
    <InsightView
        insight="<visualization-identifier>"
        config={<chart-config>}
    />
</div>

import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";
import { uriRef } from "@gooddata/sdk-model";

<div style={{ height: 400, width: 600 }}>
    <InsightView
        insight={uriRef("<visualization-uri>")}
        config={<chart-config>}
    />
</div>

NOTE: A set of options in config is different for each type of visualization. The type expected on InsightView is the same as the type of the configuration expected on the respective React component.

Example

import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";

<div style={{ height: 400, width: 600 }}>
    <InsightView
        insight="aoJqpe5Ib4mO"
        config={{
            colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
            legend: {
                enabled: true,
                position: "bottom"
            }
        }}
    />
</div>

Filters

For more information, see Filter Visual Components.

Caching

To properly render the referenced table or chart, the InsightView component needs additional information from the GoodData platform. This information is usually static. To minimize the number of redundant requests and reduce the rendering time, some static information (such as the list of visualization classes, the color palette, or feature flags for each workspace) is cached for all InsightView components in the same application.

The amount of the cached information does not impact performance in any way. However, you can manually clear the cache whenever needed (for example, after logging out, when switching workspaces or leaving a page with visualizations using the GoodData.UI components).

import { clearInsightViewCaches } from "@gooddata/sdk-ui-ext";
...
clearInsightViewCaches();
...

Properties

Name	Required?	Type	Description
insight	true	ObjRef or string	The reference to or the identifier of the visualization the to be rendered
locale	false	string	The localization of the visualization. Defaults to en-US. For other languages, see the full list of available localizations.
config	false	IChartConfig | IGeoConfig | IPivotTableConfig	The configuration object
filters	false	IFilter[]	An array of filter definitions
backend	false	IAnalyticalBackend	The object with the configuration related to communication with the backend and access to analytical workspaces
workspace	false	string	The workspace ID
drillableItems	false	IDrillableItem[]	An array of points and attribute values to be drillable.
onDrill	false	IDrillEventCallback	The drilling event catcher. Called when drilling happens.
onError	false	function	A custom error handler. Called with the argument containing the state and original error message, for example, { status:ErrorStates.BAD_REQUEST,error: {...} }. See the full list of error states. Defaults to console.error.
onExportReady	false	Function	A callback when the component is ready for exporting its data
onLoadingChanged	false	function	A custom loading handler. Called when a visualization changes to/from the loading state. Called with the argument denoting a valid state, for example, { isLoading:false}.