Build Web Data Applications

If you want to use GoodData analytics in your web application, you can use GoodData.UI, which helps build data applications on top of GoodData.

GoodData.UI consists of multiple libraries from low-level REST API clients up to visualization libraries that deliver React-based components to render different types of charts and tables.

Examples

In the examples, you can find basic components such as Bar chart or Column chart and more complex components such as DashboardView. The examples contain code samples that allow you to copy & paste components into your application.

To see mentioned components and more, visit the Example Gallery.

Steps:

1. Generate a React application skeleton using the @gooddata/apptoolkit.

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

   Flag tiger for backend is our code name for our current backend solution.

2. When prompted, enter the application name and the hostname of GoodData.

   ? What is your application name? gooddata-demo
   ? Insert your hostname: $HOST_URL
   ? What is your application desired flavor?
     JavaScript
   ❯ TypeScript
   

   The toolkit generates the application skeleton and it will guide you through the next steps.

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

3. Start the application.

   cd gooddata-demo
   yarn start
   

   The application starts running in your browser. If port 8443 is available the application should run on localhost:8443 by default.

   
   
   Running the application this way is intended only for development purposes. It sets your GoodData 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 = "<your-workspace-id>";
   

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

   export TIGER_API_TOKEN=<API_TOKEN>
   yarn refresh-md
   

   An output is generated:

   *----------------------------------------------*
   |  GoodData Catalog Export Tool v8.5.0         |
   *----------------------------------------------*
   ✔ Catalog loaded
   ✔ Date data sets loaded
   ✔ Visualizations 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. Please note that before you can embed the visualization into your application, you may need to set up CORS to ensure you comply with the same-origin policy of most modern web browsers.

7. Embed the visualization 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>
               <div style={{ height: 400 }}>
                   <InsightView insight={Insights.OrdersByStatusAndCategory} />
               </div>
           </Page>
       );
   };
   export default Home;
   

   Notice that the example is referencing the OrdersByStatusAndCategory visualization. You will probably have different name of the visualization but the principle is the same. All visualizations from your workspace are listed in the file src/md/full.ts.

8. Return to your application in the browser, and click Home in the navigation bar. The embedded visualization opens.