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: Make sure to also include CSS styles for the visualizations you expect to appear in the InsightView. See the integration guide for more information.

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
colorPalette	false	IColorPalette	The color palette to use in the chart
showTitle	false or not set	boolean, string, or function	If this property is a boolean and set to true, the title of the chart is shown as specified in the insight object itself. If this property is a string, set its value to the title of the chart to be shown (the string must not be empty). If this property is a function, implement it so that it takes the loaded insight object and return the modified title as a string to show it as the chart title.
TitleComponent	false	Component	A component to be rendered if the title should be shown
ErrorComponent	false	Component	A component to be rendered if this component is in error state (see ErrorComponent)
LoadingComponent	false	Component	A component to be rendered if this component is in loading state (see LoadingComponent)
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}.
onInsightLoaded	false	function	A callback when the insight is loaded