Embed Analytics into Your Application

This tutorial will refer to GoodData.UI, our powerful library for building analytical applications powered by GoodData.

You can embed an insight, a dashboard, or even Analytical Designer as a tool for creating insights. You can also create a fully tailored application from individual components of GoodData.UI.

Embed an Insight

You are going to create a simple web application and embed the insight that you created in the previous tutorial.

Steps:

1. Start generating the application skeleton with Accelerator Toolkit. Make sure you’re using at least version 0.13.0.

   npx @gooddata/create-gooddata-react-app --backend tiger

2. When prompted, enter the application name and the hostname where GoodData.CN is exposed.

   ? What is your application name? gooddata-cn-demo
   ? Insert your hostname: http://localhost:3000
   ? What is your application desired flavor?
     JavaScript
   ❯ TypeScript

   The toolkit generates the application skeleton in the directory with the name that you provided and will guide you through the next steps.

   Success! Your GoodData-powered application "gooddata-cn-demo" was created.
   You can start it using the following commands:
       cd gooddata-cn-demo
       yarn start

3. Start the application.

   cd gooddata-cn-demo
   yarn start

   Your browser opens. If port 8443 is empty on the localhost, it will be used by default.

   

   Running the application this way is intended only for development purposes. It sets your GoodData.CN as a local proxy so that it can be used without setting up CORS.

4. Provide your workspace identifier in src/constants.ts.

   export const workspace = "demo";

5. Load the logical data model and all its entities to the application.

   export TIGER_API_TOKEN=YWRtaW46Ym9vdHN0cmFwOmFkbWluMTIz
   yarn refresh-md

   The output similar to the following is generated:

   *----------------------------------------------*
   |  GoodData Catalog Export Tool v8.5.0         |
   *----------------------------------------------*
   ✔ Catalog loaded
   ✔ Date data sets loaded
   ✔ Insights loaded
   ✔ Analytical dashboards loaded
    ✔ SUCCESS  All data have been successfully exported
   *---------------------------------------------------------------------------------*
   |  The result generated from workspace with id demo is located at src/md/full.ts  |
   *---------------------------------------------------------------------------------*
   ✨  Done in 2.65s.

   Review the src/md/full.ts file to validate the generated content.

6. Embed the insight into the prepared home page. To do so, open src/routes/Home.tsx and update the content to the following:

   import React from "react";
   import { InsightView } from "@gooddata/sdk-ui-ext";
   
   import Page from "../components/Page";
   import { Insights } from "../md/full";
   
   const Home = () => {
       return (
           <Page>
               <InsightView insight={Insights.OrdersByStatusAndCategory} />
           </Page>
       );
   };
   export default Home;

7. Return to your application in the browser, and click Home in the navigation bar.

   The embedded insight opens.

   

Embed a Dashboard

You are going to embed the dashboard that you created in the previous tutorial.

Steps:

1. Open the demo workspace.

2. Click the Dashboards tab.

3. Click the … button in the top right corner, and click Embed.

   The embedding dialog opens.

   

4. Configure the embedding options as needed.

5. Click Copy Iframe to copy the dashboard URL to the clipboard.

   You can now use it to embed the dashboard into your web application.

   

Review More Examples

To see examples of using GoodData.UI components, visit the Example Gallery.