Frontend Integration Collection: Subsequent.js

Integrating GoodData into Subsequent.js is less complicated than it appears, even with out native assist. Let’s dive in and go over the four-step course of:

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

Observe: For these focused on 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 sequence about completely different front-end frameworks and their integration into GoodData, final one was about SvelteKit.

Step 1: Set up Dependencies

First issues first, you would want so as to add a number 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 concerning the GoodData.UI SDK will not be within the scope of this text, however if you need to be taught extra about it, right here is the GoodData.UI structure overview.

And only for completeness listed here are TypeScript dependencies:

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

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

Step 2: Set setting variables

Be sure to have your .env and .env.native information with appropriate values. After you clone the repository, you will notice a .env.native.template file within the /shoppers/nextjs folder. That you must take away “template” from the filename in an effort to arrange every thing accurately.

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

# GoodData host
NEXT_PUBLIC_GD_HOSTNAME=""

# GoodData workspace id
NEXT_PUBLIC_GD_WORKSPACE_ID=""

# GoodData perception id
NEXT_PUBLIC_GD_INSIGHT_ID=""

If you happen to open a GoodData dashboard, you could 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’d 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
NEXT_PUBLIC_GD_API_TOKEN=""

Examine Create an API token documentation for extra info.

In case you wish to use this in your manufacturing, we extremely advocate to make use of OAuth, as you may probably leak your API_TOKEN.

Step 3: Arrange the Code

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

const backend = tigerFactory()
  .onHostname( course of.env.NEXT_PUBLIC_GD_HOSTNAME )
  .withAuthentication(
    new TigerTokenAuthProvider( course of.env.NEXT_PUBLIC_GD_API_TOKEN )
);

Then simply merely export it with the GoodDataChart element:

export default operate GoodDataChart() {
  return (
    <BackendProvider backend={backend}>
        <div className="gooddata-chart">
          <WorkspaceProvider workspace= { course of.env.NEXT_PUBLIC_GD_WORKSPACE_ID } >
                <InsightView perception= { course of.env.NEXT_PUBLIC_GD_INSIGHT_ID } />
          </WorkspaceProvider>
        </div>
    </BackendProvider>
  );
}

Now you’ll be able to merely have create and it might render the Visualization!

Here’s a quite simple template:

<h1>Subsequent.js  with GoodData</h1>
<GoodDataChart/>

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 may be lacking is to handle 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.

Observe: For detailed details about CORS, consult with the official documentation.

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

Now simply merely run ng serve and you need to see one thing like this:

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

Wish to Be taught extra?

If you wish to attempt 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 in your thoughts, attain out to us on our group Slack.