InsightView

The InsightView component is a generic component that renders visualizations created and saved in Analyze.

You pass a reference to the saved visualization in the insight prop: an identifier string, or an ObjRef created with idRef. GoodData Cloud and GoodData.CN reference objects by identifier. InsightView loads the definition from the workspace, so the buckets, filters, and properties come from the saved visualization. Use the individual chart components, such as Treemap, when you define the buckets in your code instead.

How it works

1. InsightView loads the saved visualization together with the workspace color palette, the user workspace settings, and the permissions of the current user.
2. Unless executeByReference is set, it adds the filters from the filters prop to the visualization’s own filters.
3. It reads the visualization type from the saved visualization and renders the matching visualization.

The saved types tablenext and pushpinnext render the new pivot table and the new geo pushpin chart directly. For any other type, InsightView logs a warning to the console and shows the default error component with the “unknown visualization” message.

Loading and errors

• The error component shows only when none of the visualization, color palette, settings, or permissions is still loading. Errors with a known error code get a localized message and description. Errors that aren’t GoodData.UI SDK errors show the generic unknown-error message. SDK errors with no mapped code show the error code as the message.
• A visualization error is cleared as soon as the visualization starts loading again.
• The function passed to onExportReady uses the saved visualization’s title as the export title when you don’t set title in the export config.
• You can replace onDrill, onError, onLoadingChanged, onExportReady, onDataView, and pushData between renders. The visualization always calls the latest one. Replacing onInsightLoaded loads the visualization again.

When it reloads

Reloading compares props by reference. Recreating the rendered visualization compares values.

• Switching locale to a language the component hasn’t loaded yet renders nothing until the translations load. After that, InsightView mounts again and loads everything again.
• Keep insight (when it is an ObjRef), filters, and onInsightLoaded referentially stable, for example with useMemo and useCallback. A new reference, array, or function on every render loads the visualization again on every render.
• When a new load starts before the previous one finishes, the previous result is ignored. The request itself is not canceled.
• The loaded visualization definition, color palette, settings, and permissions are cached per workspace, so a reload doesn’t always reach the backend. The cache keeps up to 20 visualizations per workspace for up to 5 workspaces. After you edit a saved visualization, call clearInsightViewCacheForInsight(workspace, ref) so that the next load (for example after a remount) fetches the new definition. Pass the same kind of reference that you pass to insight. See Caching.

Configuration

config.mapboxToken and config.agGridToken fall back to MapboxTokenProvider (legacy Mapbox-based geo charts only) / AgGridTokenProvider, then to the workspace settings of the same names. config.maxZoomLevel falls back to the workspace setting.

Limits

• InsightView needs a backend and a workspace, either in the backend and workspace props or from BackendProvider and WorkspaceProvider. There is no explicit check. Rendering without a backend fails with a runtime error instead of showing the error component.
• For an unknown visualization type, the default error component shows, not your ErrorComponent, and onError isn’t called.
• With @gooddata/sdk-ui-ext/styles/css/main.css imported, InsightView takes the full height of its parent. Give the parent element an explicit height, as in the examples below.

Filters

To learn how to build the filters that you pass in the filters prop, see Apply filters to visualizations.

Caching

To render a visualization, InsightView needs more than the visualization itself: the workspace color palette, the current user’s workspace settings (including feature flags), and the user’s permissions in the workspace. To avoid repeated requests, InsightView caches this information together with the loaded visualization definitions. The cache is shared by all InsightView components in the application and is kept per workspace: up to 20 visualization definitions for each workspace, for up to 5 workspaces. A cached value is used until you clear it, even when the saved visualization changes on the backend.

To drop the cached definition of one visualization, for example after you edit it, call clearInsightViewCacheForInsight. Pass the same kind of reference that you pass to insight. The new definition is fetched the next time an InsightView loads that visualization, for example after it remounts.

To clear the cached visualization definitions, color palettes, and workspace settings at once, for example after logging out or when switching workspaces, call clearInsightViewCaches. It doesn’t clear the cached user permissions.

import { clearInsightViewCaches, clearInsightViewCacheForInsight } from "@gooddata/sdk-ui-ext";
import { idRef } from "@gooddata/sdk-model";

clearInsightViewCacheForInsight("<workspace-id>", idRef("<visualization-id>"));
clearInsightViewCaches();

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-id>"
        config={<chart-config>}
    />
</div>

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

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

The options in config are different for each visualization type. InsightView expects the same configuration type as the matching 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="<visualization-id>"
        config={{
            colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
            legend: {
                enabled: true,
                position: "bottom"
            }
        }}
    />
</div>

Props