Hello all, I am embedding this dashboard into my react SDK as a test of the SDK setup and having trouble with getting the graphics to load (image 2). The graphics just act like they are loading forever. Same issue on other dashboards that show a filterable table report.

Hi Grant, Thank you for your question. May I ask which SDK version are you using? Are you able to see a TraceID form the dev-console on your browser, or even better, could you share with us a HAR file? And ,could you tell me the libraries you are using on your code?

Do I have a mapbox account associated with my Gooddata account or will it be separate?

Hi Grant, there is not associated account, and the token is free. I did my testing and in my case is working, the only you have to add is the mapbox token, like:

const config = {
        mapboxToken: "123456789abcdefgh",
    };

Or if you want the complete code, where I also add the buttons to change dashboard:

import React, { useState } from "react";
import * as md from '../md/full';
import Page from "../components/Page";
import { Dashboard } from "@gooddata/sdk-ui-dashboard";

const Home: React.FC = () => {
    const [dashboardId, setDashboardId] = useState(md.Dashboards.GeoDashboard);

    const handleDashboardChange = (id: string) => {
        setDashboardId(id);
    };

    const config = {
        mapboxToken: "123456789abcdefgh",
    };

    return (
        <Page>
            <div style={{ display: 'flex', height: '100%' }}>
                <div style={{ width: '200px', height: '100%', marginRight: '16px', display: 'flex', flexDirection: 'column' }}>
                    <div>
                        <strong>Dashboards</strong>
                    </div>
                    <button
                        onClick={() => handleDashboardChange(md.Dashboards.GeoDashboard)}
                        style={{ textDecoration: dashboardId === md.Dashboards.GeoDashboard ? 'underline' : 'none' }}
                    >
                        GeoDashboard
                    </button>
                    <button
                        onClick={() => handleDashboardChange(md.Dashboards.PieDashboard)}
                        style={{ textDecoration: dashboardId === md.Dashboards.PieDashboard ? 'underline' : 'none' }}
                    >
                        PieDashboard
                    </button>
                </div>
                <div style={{ flexGrow: 1 }}>
                    <Dashboard dashboard={dashboardId} config={config} />
                </div>
            </div>
        </Page>
    );
};

export default Home;

Regarding the Pie chart, if all the permissions all right it must show. Did you defined the proper API Token as the variable _`TIGER_API_TOKEN`_ in the .env file? And, regarding the TraceId, there is no error, just success login from the user Jeremy. Please, let me know then if you manage to render the dashboard.

yes my tiger_api_token in stored in my .env file. I made an account and added the mapboxToken to my page the way you show it and it still isn't loading. But also my other dashboard that is just supposed to display a table report isn't loading in the embedded dashboard either. So I wonder if I have some other error?

Ok, so it seems the GeoChart is not the problem (for now), just to clarify, are you able to embed another insight or Dashboard?

Both of the dashboards I have made up and have tried to embed do the endless loading. I can embed other insights through

Between the dashboard are working and not, is there a difference, for example are from a different workspace? Could you try please, to duplicate or create the same insights that you have in the dashboard is currently working, to the dashboard where the embedding is not working? and, also put a insight from the dashboard is NOT working to the dashboard is working? We need to be sure if the problem are the insights, or the dashboard/workspace, or even permissions, because I assume you are using the same application and similar script.

Yeah so I have this inspection summary report inserted as a insight.

Thank you Grant, thats help. I can say is not problem of the insight neither permission or token. Just related, the most probably, with the way you embed the dashboard. Last thing, can you try to embed the dashboard with a simplier version of the code? without defined style, without buttons. Just something like this:

import React from "react";
import * as md from '../md/full';
import Page from "../components/Page";
import { Dashboard } from "@gooddata/sdk-ui-dashboard";

const Home: React.FC = () => {
    return (
        <Page>
                <div>
                    <Dashboard dashboard={md.Dashboards.<DashBoardNAme_from_md>}/>
                </div>
        </Page>
    );
};

export default Home;

Okay I just added it to my home page and am getting the same issue.

import { Link, Typography } from '@mui/material';
import { PageContainer } from 'core/components';
import { useTitle } from 'core/hooks';
import DocsPaths from 'modules/docs/routes/paths';
import { useTranslation } from 'react-i18next';
import { Link as RouterLink } from 'react-router-dom';
import * as idRef from 'gooddata/catalog.ts';
import { Dashboard } from '@gooddata/sdk-ui-dashboard';

export default function Home() {
	const { t } = useTranslation();

	useTitle(`Home - ${t('core:title')}`);

	return (
		<PageContainer>
			<Typography variant="h1" gutterBottom>
				CVO UI
			</Typography>
			
			<div>
				<Dashboard dashboard={idRef.Dashboards.TestDashboard}/>
			</div>
		</PageContainer>
	);
}

Hi Grant, I have been checking internally what it could be the issue. May I ask if you are using the component <https://react.dev/reference/react/StrictMode%7C&lt;StrictMode>> in your application or page? If yes, could you try to disable it and try again to embed the dashboard?

disabling <strictMode> fixed almost all of it! Thanks! The charts and tables are now loading!! Only thing I seem to be missing is a style import for the buttons

Hi Grant, I am glad now you can render the complete dashboard, well done. Regarding the Style.. May I ask how are you handle the Styles? using Vite?