https://www.gooddata.com/ logo
Join Slack
Powered by
Hey All, have a react sdk question about Geo Pushp...
# gooddata-ui
s
Hey All, have a react sdk question about Geo Pushpin charts. We're using the latest sdk however we're seeing that our Geo Pushpin charts look and work great in gooddata ui, however as soon as we embed them within the React SDK we get an error saying it cannot be displayed.
m
Hi Steve, Geo Pushpin charts are supported in React SDK. See our example gallery here: https://gdui-examples.herokuapp.com/geo-pushpin-chart. I would advise checking the React version you are using since currently version 17 is as high as you can go.
s
What do you mean 17 is latest you can go?
indicates react 18 support.
Are you saying that by moving to react 18 and sdk 9.0 we cannot use the pushpin insight type?
Or do we have to downgrade to react 17 and can still use sdk 9.0...?
image.png
m
I stand corrected, the versioning doesn’t seem to be an issue. Have you also followed the steps here: Migration from Version 8.x | GoodData.UI SDK?
s
Is this related to why its not working? Meaning it should be working ok in the reactsdk vs 9?
everything else seems to be functioning...
m
The guide must be followed if you migrated from a previous SDK version, there is also a section specific for React 18, but if this did not do the trick, I’ll be glad to double check internally.
s
Please check internally. Meanwhile we will verify all things are in alignment with the guide. Pretty sure it is because the pushpin issue is the only thing we've found for a week or so of ongoing development/testing. Can we use the v9 sdk with v17 react? We want to use the waterfall diagram.
m
Yes, React 16 and 17 are still supported in v9, but we plan to stop supporting these versions in the next major SDK release.
s
OK, when is the next major release?
m
Unfortunately, I don’t see it in our roadmap yet, but feel free to stay tuned to our Release Notes. Could you also share the contents of your package.json?
s
Here is what we have currently.
package.json
r
Hi Steve, are you getting any errors in the console when the embedded chart fails to load? Also, have you made sure to provide the mapbox token when using the embedded version?
s
we're gooddata cloud, so we shouldn't need to provide a mapbox token
correct?
unless we missed something. This is the first time we're trying to run embedded with the maps so if there is a token we're supposed to use.
r
Well, in GD Cloud, the token is provided by the platform - but for embedded use-cases, the platform can't pass the token along and it has to be generated by you.
s
We have to have our own mapbox account to support pushpin maps?
For gooddata cloud users?
image.png
No we are not getting any errors, by the way. Just warnings
r
The above is correct, however when embedding via the React SDK, you do have to provide the token.
❗ 1
s
We're doing this from a dashboard, not the insight itself
Hmm, that isn't clear from the documentation to be honest.
<*div* style={{ height: 600, width: 900 }}>
<`*MapboxTokenProvider* token="your_mapbox_token">` <*`GeoPushpinChart`* 
location={Md.City.LOcation}
size={Md.Population.Sum}
color={Md.Density.Sum}
segmentBy={Md.StateName}
/>
</*MapboxTokenProvider*>
</`*div*>` For example, we're not doing that. We're loading a dashboard that has a map inside. Same applies? Is there a way as part of the dashboard component to pass it in?
@Sean Barry fyi.
@Megan Richardson fyi as well
r
Well, if you embed the Dashboard via iframe, that should still work with the GD Cloud token (so no need to provide one).
s
we're not, we're using the react sdk
r
Reached out to Steve in private messages to discuss this further - however in general, this is the situation, with GD Cloud providing a mapbox token, but a custom token needed for GD.UI and any React SDK uses.
👀 1
v
@Steve Fox please let us sync internally about this topic and @Greta will reach out back to you shortly. Thank you!
s
Sounds good and thank you for the confirmation.
v
Just for a further reference this topic is being discussed separately between the teams.
✅ 1
Open in Slack
PreviousNext
Powered by