Integrating GoodData into React is simpler than it appears, as the entire GoodData UI SDK helps it natively. Let’s dive in and go over the four-step course of:

• Putting in Dependencies
• Establishing Surroundings Variables
• Establishing the Code Base
• Managing CORS

Notice: For these involved in a deeper dive into these integrations, I like to recommend trying out Patrik Braborec’s fast overview.

On the finish of this tutorial, it is possible for you to to combine GoodData Visualizations into your Subsequent.js utility. For the needs of this demo, let’s assume that you’ve got a fruit retailer like this:

That is a part of an ongoing collection about totally different front-end frameworks and their integration into GoodData. Final one was about Subsequent.js.

Step 1: Set up Dependencies

First issues first, you would want so as to add a couple of issues to your dependencies.

npm set up --save react@^18.2.0 react-dom@^18.2.0 @gooddata/sdk-ui-all @gooddata/sdk-backend-tiger

Particulars in regards to the GoodData.UI SDK just isn’t within the scope of this text, however if you want to be taught extra about it, right here is the GoodData.UI structure overview.

And only for completeness listed below are TypeScript dependencies:

npm set up --save-dev @sorts/react@^18.2.0 @sorts/react-dom@^18.2.0

Now that’s out of the best way, let us take a look at the code!

Step 2: Set surroundings variables

Be sure you have your .env and .env.native recordsdata with right values. After you clone the repository, you will notice a .env.native.template file within the /purchasers/reactjs folder. You’ll want to take away “template” from the filename to be able to arrange all the things appropriately.

For .env, you will want to outline three variables:

# GoodData host
REACT_APP_GD_HOSTNAME=""

# GoodData workspace id
REACT_APP_GD_WORKSPACE_ID=""

# GoodData perception id
REACT_APP_GD_INSIGHT_ID=""

When you open a GoodData dashboard, you’ll find the HOSTNAME and WORKSPACE_ID within the URL:

https://<HOSTNAME>/dashboards/#/workspace/<WORKSPACE_ID>/dashboard/<DASHBOARD_ID>

For INSIGHT_ID you’ll have to navigate to the Analyze tab after which navigate to one of many visualizations. There you’ll discover INSIGHT_ID like this:

https://<HOSTNAME>/dashboards/#/workspace/<WORKSPACE_ID>/<INSIGHT_ID>/edit

For .env.native, you will want just one variable:

# GoodData API token
REACT_APP_GD_API_TOKEN=""

Examine Create an API token documentation for extra data.

In case you want to use this in your manufacturing, we extremely suggest to make use of OAuth, as you could possibly probably leak your API_TOKEN.

Step 3: Arrange the Code

To shortly embed GoodData Visualizations, you would want to create a backend within the type of tigerFactory() in your chart part:

const backend = tigerFactory()
  .onHostname( course of.env.REACT_APP_GD_HOSTNAME )
  .withAuthentication(
    new TigerTokenAuthProvider( course of.env.REACT_APP_GD_API_TOKEN )
  );

Then simply merely wrap your chart in <BackendProvider> and <WorkspaceProvider> in our case – for simplicity – we wrapped the entire <App>.

root.render(
  <React.StrictMode>
    <BackendProvider backend={backend}>
      <WorkspaceProvider workspace= { course of.env.REACT_APP_GD_WORKSPACE_ID } >
        <App />
      </WorkspaceProvider>
    </BackendProvider>
  </React.StrictMode>
);

Now you’ll be able to merely create <InsightView>, and it’ll render the Visualization!

Here’s a quite simple template:

<h1>React  with GoodData</h1>
<InsightView perception= {INSIGHT_ID}/>

Now you’ll be able to simply add styling and you’re set! Only for simplicity, let’s simply go along with a minimal one:

#gooddata-chart {
 width: 100%;
 top: 400px;
}

Here’s a GitHub repo you’ll be able to simply begin with!

Step 4: Handle CORS

And that’s all for code! Fairly easy, is not it? 😉

Now the one factor that might be lacking is to maintain CORS. That is fairly easy in GoodData:

1. Navigate to your GoodData Occasion,
2. Go to the settings
3. Add allowed origins to the CORS.

Notice: For detailed details about CORS, seek advice from the official documentation.

For my native improvement, this was http://localhost:3000:

Now simply merely run npm serve and it is best to see one thing like this:

In case the colours of the visualization don’t fit your needs, you’ll be able to at all times change them.

Need to Be taught extra?

If you wish to strive GoodData, try our free trial – it really works effectively with the GitHub repo! If you need to debate embedding, AI, dashboard plugins or no matter you’ve gotten in your thoughts, attain out to us on our group Slack.