GoodData UI

https://sdk.gooddata.com/gooddata-ui/docs
Admin
GoodData.UI is a TypeScript framework for building analytical web applications on top of GoodData...
Tokens:85,269
Snippets:926
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://sdk.gooddata.com/gooddata-ui/docs/upgrade_dashboard_plugins.html

Run the appropriate install command after updating package versions in package.json.

```bash
# for npm
npm install

# for yarn
yarn install
```

--------------------------------

### BulletChart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/bullet_chart_component.html

A complete example showing how to render a BulletChart with measures and view-by attributes.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { BulletChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <BulletChart
        primaryMeasure={Md.$FranchiseFeesAdRoyalty}
        targetMeasure={Md.$FranchiseFees}
        comparativeMeasure={Md.$FranchiseFeesOngoingRoyalty}
        viewBy={Md.LocationResort}
    />
</div>
```

--------------------------------

### Implement Heatmap Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/heatmap_component.html

Full implementation example showing the Heatmap component wrapped in a container with event handlers.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Heatmap } from "@gooddata/sdk-ui-charts";

import * as Md from "./md/full";

<div style={{ height: 300 }} className="s-heat-map">
    <Heatmap
        measure={Md.$TotalSales}
        rows={Md.LocationState}
        columns={Md.MenuCategory}
        onLoadingChanged={this.onLoadingChanged}
        onError={this.onError}
    />
</div>
```

--------------------------------

### Install dependencies for React integration

Source: https://sdk.gooddata.com/gooddata-ui/docs/ht_use_react_component_in_angular_2.x.html

Install the required React and GoodData.UI packages using npm or yarn.

```bash
npm install --save uuid invariant react@^16.8.0 react-dom@^16.8.0 @gooddata/sdk-ui-all @gooddata/sdk-backend-bear
npm install --save-dev @types/react @types/react-dom
```

```bash
yarn add uuid invariant react@^16.8.0 react-dom@^16.8.0 @gooddata/sdk-ui-all @gooddata/sdk-backend-bear
yarn add --dev @types/react @types/react-dom
```

--------------------------------

### Pie Chart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/pie_chart_component.html

A complete example showing how to render a PieChart with specific measures within a styled container.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { PieChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <PieChart
        measures={[Md.$FranchiseFeesAdRoyalty, Md.$FranchiseFeesInitialFranchiseFee, Md.$FranchiseFeesOngoingRoyalty]}
    />
</div>
```

--------------------------------

### Donut Chart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/donut_chart_component.html

A practical example showing how to render a DonutChart with multiple measures inside a styled container.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { DonutChart } from "@gooddata/sdk-ui-charts";

const style = { height: 300 };

<div style={style}>
    <DonutChart
        measures={[
            Md.$FranchiseFeesAdRoyalty,
            Md.$FranchiseFeesInitialFranchiseFee,
            Md.$FranchiseFeesOngoingRoyalty
        ]}
    />
</div>
```

--------------------------------

### Install GoodData Platform Dependencies

Source: https://sdk.gooddata.com/gooddata-ui/docs/platform_integration

Install the core packages required for the GoodData platform (codenamed bear).

```bash
yarn add @gooddata/api-client-bear @gooddata/sdk-backend-bear @gooddata/sdk-model
```

--------------------------------

### Install GoodData.UI Component Packages

Source: https://sdk.gooddata.com/gooddata-ui/docs/cloudnative_integration

Install specific UI packages based on the required functionality, ranging from headless components to full visualization suites.

```bash
yarn add @gooddata/sdk-ui
```

```bash
yarn add @gooddata/sdk-ui-charts @gooddata/sdk-ui-pivot @gooddata/sdk-ui-geo @gooddata/sdk-ui-ext
```

```bash
yarn add @gooddata/sdk-ui-all
```

--------------------------------

### Treemap Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/treemap_component.html

A complete example showing how to render a Treemap with measures and attributes.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Treemap } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <Treemap
        measures={[Md.NrChecks]}
        viewBy={Md.LocationState}
        segmentBy={Md.LocationCity}
        onLoadingChanged={this.onLoadingChanged}
        onError={this.onError}
    />
</div>
```

--------------------------------

### LineChart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/line_chart_component.html

A functional example showing how to render a LineChart with a measure and a trend attribute.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { LineChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <LineChart
        measures={[Md.$FranchiseFees]}
        trendBy={Md.DateMonth.Short}
    />
</div>
```

--------------------------------

### Install Core Tiger Dependencies

Source: https://sdk.gooddata.com/gooddata-ui/docs/cloudnative_integration

Install the essential packages required for GoodData Cloud and GoodData.CN connectivity.

```bash
yarn add @gooddata/api-client-tiger @gooddata/sdk-backend-tiger
```

--------------------------------

### BarChart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/bar_chart_component.html

A functional example showing how to render a BarChart with specific measures and attributes within a styled container.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { BarChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <BarChart
        measures={[Md.$TotalSales]}
        viewBy={Md.DateMonth.Short}
    />
</div>
```

--------------------------------

### Bubble Chart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/bubble_chart_component.html

A complete example showing how to render a Bubble Chart with specific measures and attributes.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { BubbleChart } from "@gooddata/sdk-ui-charts";

import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <BubbleChart
        xAxisMeasure={Md.$FranchiseFees}
        yAxisMeasure={Md.$FranchisedSales}
        size={Md.$AvgDailyTotalSalesByServer}
        viewBy={Md.LocationResort}
    />
</div>
```

--------------------------------

### Scatter Plot Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/scatter_plot_component.html

A functional example showing how to render a Scatter Plot within a styled container.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ScatterPlot } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <ScatterPlot
        xAxisMeasure={Md.$FranchiseFees}
        yAxisMeasure={Md.$FranchisedSales}
        attribute={Md.DateMonth.Short}
    />
</div>
```

--------------------------------

### Column Chart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/column_chart_component.html

A functional example showing how to render a ColumnChart with specific measures and attributes within a styled container.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ColumnChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <ColumnChart
        measures={[Md.$TotalSales]}
        viewBy={Md.DateMonth.Short}
    />
</div>
```

--------------------------------

### Install @gooddata/catalog-export

Source: https://sdk.gooddata.com/gooddata-ui/docs/export_catalog

Commands to add the catalog export tool as a development dependency using yarn or npm.

```bash
yarn add @gooddata/catalog-export --dev
```

```bash
$ npm install @gooddata/catalog-export --save-dev
```

--------------------------------

### InsightView with Configuration

Source: https://sdk.gooddata.com/gooddata-ui/docs/visualization_component

A concrete example of rendering an insight with custom color and legend configuration.

```javascript
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>
```

--------------------------------

### Export insight data example

Source: https://sdk.gooddata.com/gooddata-ui/docs/on_export_ready.html

Full component example demonstrating how to store the export function and trigger an XLSX export with custom configuration.

```javascript
import { InsightView } from "@gooddata/sdk-ui-ext";

export class Example extends React.Component {
    constructor(props) {
        super(props);
        this.doExport = this.doExport.bind(this);
        this.onExportReady = this.onExportReady.bind(this);
    }

    onExportReady(getExportedData) {
        this.getExportedData = getExportedData;
    }

    async doExport() {
        try {
            const result = await this.getExportedData({
                format: "xlsx",
                includeFilterContext: true,
                mergeHeaders: true,
                title: "CustomTitle"
            });
            console.log("Export successfully: ", result.uri);
        } catch (error) {
            console.log("Export error: ", error);
        }
    }

    render() {
        return (
            <div style={{ height: 367 }}>
                <InsightView
                    insight="<visualization-identifier>"
                    onExportReady={this.onExportReady}
                />
                <button className="button button-secondary" onClick={this.doExport}>Export</button>
            </div>
        );
    }
}
```

--------------------------------

### Basic InsightView Implementation

Source: https://sdk.gooddata.com/gooddata-ui/docs/visualization_component

Examples of initializing the InsightView component using either a visualization identifier or a URI reference.

```javascript
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>
```

```javascript
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>
```

--------------------------------

### Theme Provider Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/theme_provider.html

A basic implementation of the Theme Provider wrapping UI components.

```typescript
import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";

<div>
  <ThemeProvider>
    <BubbleHoverTrigger>
      <Button
        tagName="span"
        value="Hover over this link..."
        className="gd-button-link"
      />
      <Bubble className="bubble-primary">
        This is bubble content.
        <br />
        <Button value="Click here!" className="gd-button-positive" />
      </Bubble>
    </BubbleHoverTrigger>
  </ThemeProvider>
</div>
```

--------------------------------

### GeoPushpinChart Implementation Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/geo_pushpin_chart_component.html

Demonstrates a complete implementation of the GeoPushpinChart with configuration and container styling.

```javascript
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoPushpinChart } from "@gooddata/sdk-ui-geo";
import * as Md from "./md/full";

const config = {
    mapboxToken: "your_mapbox_token",
    tooltipText: Md.City.Name
};

<div style={{ height: 600, width: 900 }}>
    <GeoPushpinChart
        location={Md.City.LOcation}
        size={Md.Population.Sum}
        color={Md.Density.Sum}
        segmentBy={Md.StateName}
        config={config}
    />
</div>
```

--------------------------------

### Configure .gdcatalogrc

Source: https://sdk.gooddata.com/gooddata-ui/docs/export_catalog

Example JSON configuration file for defining workspace connection parameters and output file path.

```json
{
    "hostname": "your.gooddata.hostname.com",
    "projectId": "your_gooddata_workspaceid",
    "username": "email",
    "password": "password",
    "output": "desired_file_name.ts|js|json"
}
```

--------------------------------

### Ranking Filter Usage Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/ranking_filter_component.html

A complete example demonstrating the integration of a RankingFilter with a PivotTable, including measure and attribute configuration.

```javascript
import React, { useState } from "react";
import { PivotTable } from "@gooddata/sdk-ui-pivot";
import { newRankingFilter, localIdRef, measureLocalId, attributeLocalId } from "@gooddata/sdk-model";
import { RankingFilter, IMeasureDropdownItem, IAttributeDropdownItem } from "@gooddata/sdk-ui-filters";
import { Md } from "../../md";

const FranchiseFees = modifyMeasure(Md.$FranchiseFees, (m) =>
    m.format("#,##0").localId("franchiseFees").title("Franchise Fees")
);
const FranchisedSales = modifyMeasure(Md.$FranchisedSales, (m) =>
    m.format("#,##0").title("Franchise Sales").localId("franchiseSales")
);
const LocationState = modifyAttribute(Md.LocationState, (a) => a.localId("LocationState"));
const LocationName = modifyAttribute(Md.LocationName.Default, (a) => a.localId("locationName"));

const measures = [FranchiseFees, FranchisedSales];
const attributes = [LocationState, LocationName];

const measureDropdownItems: IMeasureDropdownItem[] = [
    {
        title: "Franchise fees",
        ref: localIdRef(measureLocalId(FranchiseFees)),
        sequenceNumber: "M1",
    },
    {
        title: "Franchised sales",
        ref: localIdRef(measureLocalId(FranchisedSales)),
        sequenceNumber: "M2",
    },
];
const attributeDropdownItems: IAttributeDropdownItem[] = [
    {
        title: "Location state",
        ref: localIdRef(attributeLocalId(LocationState)),
        type: "ATTRIBUTE",
    },
    {
        title: "Location",
        ref: localIdRef(attributeLocalId(LocationName)),
        type: "ATTRIBUTE",
    },
];
export const RankingFilterExample: React.FC = () => {
    const [filter, setFilter] = useState(newRankingFilter(measureLocalId(franchiseSalesLocalId), "TOP", 3));
    return (
        <React.Fragment>
            <RankingFilter
                measureItems={measureDropdownItems}
                attributeItems={attributeDropdownItems}
                filter={filter}
                onApply={(filter) => setFilter(filter)}
                buttonTitle={"Ranking filter"}
            />
            <hr className="separator" />
            <div style={{ height: 300 }} className="s-pivot-table">
                <PivotTable measures={measures} rows={attributes} filters={[filter]} />
            </div>
        </React.Fragment>
    );
};
```

--------------------------------

### Programmatic Authentication Setup

Source: https://sdk.gooddata.com/gooddata-ui/docs/webcomponents_authentication.html

Configures a custom authentication handler for the GoodData.CN backend using the setContext method.

```javascript
<script type="module">
    // Import the library along with `setContext` method
    import { setContext } from "https://example.gooddata.com/components/my-workspace.js";
    // Import GoodData.CN backend for GoodData.CN and GoodData Cloud
    import factory, { ContextDeferredAuthProvider } from "https://example.gooddata.com/components/tigerBackend.js";

    function myAuthenticationHandler(authError) {
        // ... define the logic for custom authentication flow
    }
    
    // Set up GoodData.CN backend and default workspace id
    setContext({
        backend: factory()
            .onHostname("https://example.gooddata.com")
            .withAuthentication(new ContextDeferredAuthProvider(myAuthenticationHandler)),
        workspaceId: "my-workspace",
    });
</script>
```

--------------------------------

### Initialize Dashboard Event Handling

Source: https://sdk.gooddata.com/gooddata-ui/docs/dashboard_component.html

Setup the Dashboard component and import necessary styles and event handlers to begin listening for dashboard events.

```typescript
import "@gooddata/sdk-ui-dashboard/styles/css/main.css";

import { Dashboard, anyEventHandler } from "@gooddata/sdk-ui-dashboard";
import { idRef } from "@gooddata/sdk-model";

const dashboardRef = idRef("<dashboard-identifier>");
```

--------------------------------

### ComboChart Basic Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/combo_chart_component.html

A standard implementation of a ComboChart using primary and secondary measures with a view-by attribute.

```javascript
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ComboChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <ComboChart
        primaryMeasures={Md.$FranchiseFeesInitialFranchiseFee}
        secondaryMeasures={Md.$FranchiseFeesAdRoyalty}
        viewBy={Md.LocationResort}
    />
</div>
```

--------------------------------

### Implement Same Period Previous Year Comparison

Source: https://sdk.gooddata.com/gooddata-ui/docs/time_over_time_comparison.html

Example showing the integration of a PoP measure into a PivotTable component.

```javascript
import { PivotTable } from "@gooddata/sdk-ui-pivot";
import { newMeasure, newPopMeasure } from "@gooddata/sdk-model";

const masterMeasure = newMeasure("measureIdentifier", m => m.alias("Master Measure"));
const popMeasure = newPopMeasure(masterMeasure, "attributeYearIdentifier", m => m.alias("Same Period Previous Year"));

const measures = [
    masterMeasure,
    popMeasure
];

<PivotTable
    measures={measures}
/>
```

--------------------------------

### Geo Pushpin Chart Basic Import

Source: https://sdk.gooddata.com/gooddata-ui/docs/geo_pushpin_chart_component.html

Initial setup for importing the GeoPushpinChart component and necessary styles.

```javascript
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoPushpinChart } from "@gooddata/sdk-ui-geo";
import * as Md from "./md/full";
```

--------------------------------

### BarChart Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/bar_chart_component.html

Example of the configuration object structure for customizing chart appearance, axes, and color mapping.

```json
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto"
    },
    legend: {
        enabled: true,
        position: "top",
    },
    dataLabels: {
        visible: "auto"
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### Install Catalog Export Tool

Source: https://sdk.gooddata.com/gooddata-ui/docs/cloudnative_integration

Add the catalog-export tool as a development dependency to generate code representations of workspace measures and attributes.

```bash
yarn add --dev @gooddata/catalog-export
```

--------------------------------

### Configure Pivot Table Settings

Source: https://sdk.gooddata.com/gooddata-ui/docs/pivot_table_component.html

Example configuration object for the Pivot Table component including grouping, menu options, separators, and column sizing.

```javascript
const config = {
    groupRows: false,
    maxHeight: 800,
    menu: {
        aggregations: true,
        aggregationsSubMenu: true
    },
    separators: {
        thousand: ",",
        decimal: "."
    },
    columnSizing: {
        defaultWidth: "autoresizeAll",
        columnWidths: [
            newWidthForAttributeColumn(Md.Date, 100),
            newWidthForSelectedColumns(Md.$FranchiseFees, [newAttributeColumnLocator(Md.DateMonth.Short, monthDateJanuaryUri)], 200),
        ]
    }
};

<PivotTable
    measures={measures}
    rows={rows}
    columns={columns}
    sortBy={sortBy}
    config={config}
/>
```

--------------------------------

### Configure Content Security Policy (CSP) for GoodData

Source: https://sdk.gooddata.com/gooddata-ui/docs/webcomponents_intro

Example CSP header configuration to allow resources from a specific GoodData server instance.

```text
script-src 'self' 'unsafe-inline' 'unsafe-eval' example.gooddata.com;
img-src 'self' data: blob: example.gooddata.com;
style-src 'self' 'unsafe-inline' example.gooddata.com;
font-src 'self' data: example.gooddata.com;
```

--------------------------------

### Programmatic SSO Authentication Setup

Source: https://sdk.gooddata.com/gooddata-ui/docs/webcomponents_authentication.html

Configures the backend to use the built-in redirectToTigerAuthentication provider for programmatic SSO flow.

```javascript
<script type="module">
    import { setContext } from "https://example.gooddata.com/components/my-workspace.js";
    import factory, { ContextDeferredAuthProvider, redirectToTigerAuthentication } from "https://example.gooddata.com/components/tigerBackend.js";
    
    setContext({
        backend: factory()
            .onHostname("https://example.gooddata.com")
            .withAuthentication(new ContextDeferredAuthProvider(redirectToTigerAuthentication)),
        workspaceId: "my-workspace",
    });
</script>
```

--------------------------------

### Donut Chart Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/donut_chart_component.html

Example of the configuration object structure, including color palettes, mappings, legend settings, and data labels.

```javascript
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    legend: {
        enabled: true,
        position: "top",
    },
    dataLabels: {
        visible: "auto"
    },
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### Bootstrap a new plugin

Source: https://sdk.gooddata.com/gooddata-ui/docs/upgrade_dashboard_plugins.html

Use this command to initialize a new plugin project with the latest template.

```bash
npx @gooddata/plugin-toolkit@latest dashboard-plugin init
```

--------------------------------

### Initialize a new dashboard plugin

Source: https://sdk.gooddata.com/gooddata-ui/docs/dashboard_plugins

Use the Plugin Development Toolkit CLI to bootstrap a new plugin project with a walking skeleton.

```bash
npx @gooddata/plugin-toolkit dashboard-plugin init
```

--------------------------------

### Initiate Service Provider-initiated SAML SSO

Source: https://sdk.gooddata.com/gooddata-ui/docs/platform_sso.html

Use the initiateSamlSso method to start the SAML authentication flow, providing the relayState URL for post-login redirection.

```javascript
import sdk from "@gooddata/api-client-bear";

const relayState = "https://my.app.com/";

sdk.user
  .initiateSamlSso(relayState)
  .catch(error => {
    // something went wrong, see the browser console for details
    console.error(error);
  });
```

--------------------------------

### Initialize Analytical Backend

Source: https://sdk.gooddata.com/gooddata-ui/docs/platform_integration

Create an instance of the Analytical Backend to handle communication with the GoodData platform.

```javascript
import bearFactory, { ContextDeferredAuthProvider } from "@gooddata/sdk-backend-bear";

const backend = bearFactory().withAuthentication(new ContextDeferredAuthProvider());

// or if your application will be hosted on a different host than the GoodData platform
const backend = bearFactory()
    .onHostname("https://example.com") // this should be the domain where the GoodData platform is hosted
    .withAuthentication(new ContextDeferredAuthProvider());
```

--------------------------------

### Initialize Analytical Backend

Source: https://sdk.gooddata.com/gooddata-ui/docs/cloudnative_integration

Configure the Analytical Backend instance with authentication, optionally specifying a custom hostname.

```javascript
import tigerFactory, { ContextDeferredAuthProvider, redirectToTigerAuthentication } from "@gooddata/sdk-backend-tiger";

const backend = tigerFactory().withAuthentication(new ContextDeferredAuthProvider(redirectToTigerAuthentication));

// or if your application will be hosted on a different host than the GoodData Cloud or GoodData.CN backend
const backend = tigerFactory()
    .onHostname("https://example.com") // this should be the domain where the GoodData Cloud or GoodData.CN is hosted
    .withAuthentication(new ContextDeferredAuthProvider(redirectToTigerAuthentication));
```

--------------------------------

### Configure backend for GoodData Cloud or GoodData.CN

Source: https://sdk.gooddata.com/gooddata-ui/docs/export_catalog

Use the backend argument on the command line or in the configuration file to switch from the default GoodData platform.

```bash
--backend tiger
```

```json
{
    "hostname": "your.own.gooddata.com",
    "workspaceId": "your_workspace_id",
    "output": "desired_file_name.ts|js|json",
    "backend": "tiger"
}
```

--------------------------------

### Configure a local development proxy

Source: https://sdk.gooddata.com/gooddata-ui/docs/platform_cors.html

Create a setupProxy.js file in the /src directory to route API requests through the local development server.

```javascript
const proxy = require("http-proxy-middleware");

module.exports = function (app) {
     app.use(proxy("/gdc", {
         "changeOrigin": true,
         "cookieDomainRewrite": "localhost",
         "secure": false,
         "target": "https://secure.gooddata.com",
         "headers": {
             "host": "secure.gooddata.com",
             "origin": null
         },
         "onProxyReq": function(proxyReq, req, res) {
             proxyReq.setHeader("accept-encoding", "identity")
         }
     }));
     app.use(proxy("/*.html", {
         "changeOrigin": true,
         "secure": false,
         "target": "https://secure.gooddata.com"
     }));
     app.use(proxy("/packages/*.{js,css}", {
         "changeOrigin": true,
         "secure": false,
         "target": "https://secure.gooddata.com"
     }));
 };
```

--------------------------------

### Initialize Backend with bearFactory

Source: https://sdk.gooddata.com/gooddata-ui/docs/breaking_changes_8.html

Configure the backend instance using the bearFactory, replacing the previous global SDK client approach.

```javascript
import { bearFactory } from "@gooddata/sdk-backend-bear"

const backend =
    bearFactory({ hostname: "<yourDomain>" })
    .withAuthentication(<authenticationProvider>);
```

--------------------------------

### Display help for catalog-export

Source: https://sdk.gooddata.com/gooddata-ui/docs/export_catalog

Run this command to view all available command line parameters.

```bash
npx @gooddata/catalog-export --help
```

--------------------------------

### Initialize Analytical Backend

Source: https://sdk.gooddata.com/gooddata-ui/docs/migration_guide_8.html

Create an instance of the analytical backend using the bear factory and configure authentication.

```typescript
import bearFactory, { ContextDeferredAuthProvider }
from "@gooddata/sdk-backend-bear";

const backend = bearFactory({ hostname })
.withAuthentication(new ContextDeferredAuthProvider());
```

--------------------------------

### Measure Value Filter Integration Example

Source: https://sdk.gooddata.com/gooddata-ui/docs/measure_value_filter_component.html

A complete example showing the component integrated with a BarChart to filter data by total sales.

```javascript
import React, { Component } from "react";
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { MeasureValueFilter } from "@gooddata/sdk-ui-filters";
import * as Md from "./md/full";

const measureTitle = "$ Total Sales";

export default class SalesByResort extends Component {
    this.state = { filters: [ newMeasureValueFilter(Md.$TotalSales, "GREATER_THAN", 0) ] };

    onApply = filter => {
        this.setState({ filters: [filter] });
    };

    render() {
        const { filters } = this.state;

        return (
            <div>
                <MeasureValueFilter
                    onApply={this.onApply}
                    filter={filters[0]}
                    buttonTitle={measureTitle}
                />
                <BarChart
                    measures={[Md.$TotalSales]}
                    viewBy={[Md.LocationResort]}
                    filters={filters}
                />
            </div>
        );
    }
}
```

--------------------------------

### Wrap application with PlaceholdersProvider

Source: https://sdk.gooddata.com/gooddata-ui/docs/placeholders

Initialize the placeholder context by wrapping the root component of the application.

```javascript
import { PlaceholdersProvider } from '@gooddata/sdk-ui';

const Root = () =>  (
    <PlaceholdersProvider>
        <App />
    </PlaceholdersProvider>
);
```

--------------------------------

### useCustomWidgetInsightDataView()

Source: https://sdk.gooddata.com/gooddata-ui/docs/dashboard_plugins_api.html

Allows you to get data for a specific insight in the context of the widget.

```APIDOC
## useCustomWidgetInsightDataView()

### Description
Allows you to get data for a specific insight in the context of the widget.
```

--------------------------------

### useCustomWidgetExecutionDataView()

Source: https://sdk.gooddata.com/gooddata-ui/docs/dashboard_plugins_api.html

Allows you to get data for free-form execution in the context of the widget.

```APIDOC
## useCustomWidgetExecutionDataView()

### Description
Allows you to get data for free-form execution in the context of the widget.
```

--------------------------------

### usePlaceholder

Source: https://sdk.gooddata.com/gooddata-ui/docs/placeholders

Hook to get or set the value of a common visualization definition placeholder.

```APIDOC
## usePlaceholder(placeholder)

### Description
Provides access to get or set the value of a standard visualization definition placeholder.
```

--------------------------------

### Initialize Analytical Backend with Fixed Credentials

Source: https://sdk.gooddata.com/gooddata-ui/docs/analytical_backend_integration.html

Configures the backend using FixedLoginAndPasswordAuthProvider for explicit username and password authentication.

```javascript
import bearFactory, { FixedLoginAndPasswordAuthProvider } from "@gooddata/sdk-backend-bear";

const backend = bearFactory({ hostname })
                .withAuthentication(
                    new FixedLoginAndPasswordAuthProvider("username", "password")
                );
```

--------------------------------

### useComposedPlaceholder

Source: https://sdk.gooddata.com/gooddata-ui/docs/placeholders

Use the useComposedPlaceholder hook to get a value of a composed visualization definition placeholder.

```APIDOC
## useComposedPlaceholder

### Description
Resolves a value from a composed placeholder based on provided resolution context.

### Usage
```javascript
const measure = useComposedPlaceholder(selectedMeasurePlaceholder, { measureIndex: 0 });
```
```

--------------------------------

### Generated attribute constants

Source: https://sdk.gooddata.com/gooddata-ui/docs/export_catalog

Examples of how attributes with multiple or single display forms are generated into constants.

```typescript
export const City = {
    /**
     * Display Form Title: city
     * Display Form ID: label.uscities.city
     */
    Default: newAttribute("label.uscities.city"),
    /**
     * Display Form Title: location
     * Display Form ID: label.uscities.city.location
     */ Location: newAttribute("label.uscities.city.location"),
};
```

```typescript
/**
 * Attribute Title: Location Resort
 * Display Form ID: attr.restaurantlocation.locationresort
 */
export const LocationResort = newAttribute("label.restaurantlocation.locationresort");
```

--------------------------------

### Initialize Analytical Backend with Deferred Authentication

Source: https://sdk.gooddata.com/gooddata-ui/docs/analytical_backend_integration.html

Creates a backend instance using the bear factory with deferred authentication, suitable for SSO or existing sessions.

```javascript
import bearFactory, { ContextDeferredAuthProvider } from "@gooddata/sdk-backend-bear";

const backend = bearFactory({ hostname })
                .withAuthentication(new ContextDeferredAuthProvider());
```

--------------------------------

### Define Color Arrays

Source: https://sdk.gooddata.com/gooddata-ui/docs/chart_config.html

Examples of color arrays used to define chart color schemes.

```json
["rgb(195, 49, 73)", "rgb(168, 194, 86)"]
```

```json
["#fa0510", "#AA2030"]
```

```json
["rgb(195, 49, 73)", "rgb(168, 194, 86)", "rgb(195, 49, 73)"]
```

--------------------------------

### Initialize Date Range

Source: https://sdk.gooddata.com/gooddata-ui/docs/date_filter_option.html

Sets a starting date one month prior to the current date.

```javascript
let dateFrom = new Date();
dateFrom.setMonth(dateFrom.getMonth() - 1);
```

--------------------------------

### Load the Web Components Library

Source: https://sdk.gooddata.com/gooddata-ui/docs/webcomponents_intro

Add the script tag to the head of your document to initialize the library for a specific workspace.

```html
<script type="module" src="https://{your-gd-server-url}/components/{workspace-id}.js?auth=sso"></script>

<!-- for example -->
<script type="module" src="https://example.gooddata.com/components/my-workspace.js?auth=sso"></script>
```

--------------------------------

### Treemap Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/treemap_component.html

Example of the supported configuration object structure for customizing Treemap appearance and behavior.

```javascript
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    legend: {
        enabled: true,
        position: "right",
    },
    dataLabels: {
        visible: "auto"
    },
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### Scatter Plot Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/scatter_plot_component.html

Example of the supported configuration structure for customizing chart appearance and behavior.

```json
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "40",
        max: "50"
    },
    dataLabels: {
        visible: "auto"
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### ErrorComponent Customization

Source: https://sdk.gooddata.com/gooddata-ui/docs/error_component.html

Examples demonstrating how to disable the default ErrorComponent or provide a custom implementation for visualization components.

```APIDOC
## ErrorComponent

### Description
The `ErrorComponent` property is a configuration option available on all visualization components in `@gooddata/sdk-ui`. It defines the component rendered when the visualization enters an error state.

### Usage
- **Disable**: Pass `null` to the `ErrorComponent` prop to hide the default error indicator.
- **Customize**: Pass a custom React component that accepts `code`, `message`, `description`, and `icon` props.

### Example: Disabled ErrorComponent
```javascript
import { Kpi } from "@gooddata/sdk-ui";
import * as Md from "./md/full";

<Kpi
    measure={Md.$FranchiseFees}
    LoadingComponent={null}
    ErrorComponent={null}
/>
```

### Example: Customized ErrorComponent
```javascript
const CustomError = ({ code, message, description, icon }) => (
    <p>
        <span className={icon} /> <strong>{message}</strong><br />
        {description}
    </p>
);

<Kpi
    measure={Md.$FranchiseFees}
    ErrorComponent={CustomError}
/>
```
```

--------------------------------

### AreaChart Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/area_chart_component.html

Example of the configuration object structure for customizing chart appearance, axes, and legends.

```json
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto"
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    legend: {
        enabled: true,
        position: "top",
    },
    dataLabels: {
        visible: "auto"
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### BulletChart Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/bullet_chart_component.html

Example of the configuration object structure for customizing chart appearance, colors, and axes.

```json
{
    colors: ["rgb(195, 49, 73)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "01"
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto"
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    legend: {
        enabled: true,
        position: "top",
    },
    dataLabels: {
        visible: "auto"
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### usePlaceholders

Source: https://sdk.gooddata.com/gooddata-ui/docs/placeholders

Use the usePlaceholders hook to get or set multiple values of a common visualization definition placeholder at once.

```APIDOC
## usePlaceholders

### Description
Allows atomic updates to multiple visualization definition placeholders simultaneously. The order of values in the array must match the order of the input placeholders.

### Usage
```javascript
const [[activeMeasure, activeAttribute], setMeasureAndAttribute] = usePlaceholders([measurePlaceholder, attributePlaceholder]);

// Update multiple values
setMeasureAndAttribute([Md.Revenue, Md.Location]);
```
```

--------------------------------

### Access plugin template files

Source: https://sdk.gooddata.com/gooddata-ui/docs/upgrade_dashboard_plugins.html

Reference the official GitHub repository to compare your local configuration files with the latest template versions.

```text
https://github.com/gooddata/gooddata-ui-sdk/blob/vX.Y.Z/tools/dashboard-plugin-template
```

--------------------------------

### KPI with Attribute Filter

Source: https://sdk.gooddata.com/gooddata-ui/docs/kpi_component.html

Example of a KPI component configured to display total sales filtered by a specific state.

```typescript
import { Kpi } from "@gooddata/sdk-ui";
import { newPositiveAttributeFilter } from "@gooddata/sdk-model";
import * as Md from "./md/full";

<Kpi
    measure={Md.$TotalSales}
    filters={[
        newPositiveAttributeFilter(Md.StateName, ["California"])
    ]}
/>
```

--------------------------------

### Set initial values for placeholders

Source: https://sdk.gooddata.com/gooddata-ui/docs/placeholders

Provide default values during the initialization of the PlaceholdersProvider.

```javascript
const Root = () =>  (
    <PlaceholdersProvider initialValues={[
        // Pairs of [placeholder, initialValue]
        [measurePlaceholder, Md.Revenue],
        [attributePlaceholder, Md.State],
    ]}>
        <App />
    </PlaceholdersProvider>
);
```

--------------------------------

### Bubble Chart Configuration Object

Source: https://sdk.gooddata.com/gooddata-ui/docs/bubble_chart_component.html

Example of the supported configuration structure for customizing chart appearance, axes, and legends.

```json
{
    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        },
        color: {
            type: "guid",
            value: "02"
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: "auto",
        min: "20",
        max: "30"
    },
    legend: {
        enabled: true,
        position: "right",
    },
    dataLabels: {
        visible: "auto"
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ",",
        decimal: "."
    }
}
```

--------------------------------

### Load Dashboards with Dynamic Plugins

Source: https://sdk.gooddata.com/gooddata-ui/docs/dashboard_embedding.html

Use the useDashboardLoader hook with adaptive loading mode to integrate remote plugins via module federation.

```javascript
import React from "react";

import { idRef } from "@gooddata/sdk-model";
import { useDashboardLoader } from "@gooddata/sdk-ui-loaders";

// create the interop object that the useDashboardLoader uses
// to interact with the module federation system
// both __webpack-prefixed global variables are provided by Webpack
const adaptiveLoadOptions = {
    moduleFederationIntegration: {
        __webpack_init_sharing__:
            typeof __webpack_init_sharing__ !== "undefined" ? __webpack_init_sharing__ : null,
        __webpack_share_scopes__:
            typeof __webpack_share_scopes__ !== "undefined" ? __webpack_share_scopes__ : null,
    },
};

const dashboardRef = idRef("<dashboard-identifier>");

export const DynamicPluginsExample = () => {
    const { status, result } = useDashboardLoader({
        dashboard: dashboardRef,
        // indicate that remote plugins should be used
        loadingMode: "adaptive",
        // provide the interop object to the loader
        adaptiveLoadOptions,
    });

    if (status === "loading" || status === "pending") {
        return <div>Loading dashboard...</div>;
    }

    if (status === "error") {
        return <div>Error loading dashboard...</div>;
    }

    // the loader result returns the component to be used
    // and also props that need to be passed to it
    const { DashboardComponent, props: dashboardProps } = result;
    return (
        <div>
            <DashboardComponent {...dashboardProps} />
        </div>
    );
};
```

--------------------------------

### Create a custom header predicate for attribute names

Source: https://sdk.gooddata.com/gooddata-ui/docs/ht_create_predicates.html

Matches attribute headers where the item name starts with the letter 'A'.

```typescript
import { isResultAttributeHeader } from "@gooddata/sdk-model";

const startsWithA = (header) => {
    return isResultAttributeHeader(header) && header.attributeHeaderItem.name.startsWith("A");
};
```
Tokens:
Raw