https://www.gooddata.com/ logo
Join Slack
Powered by
Hey gooddata team, I am facing some issues while u...
# gooddata-cloud
a
Hey gooddata team, I am facing some issues while using components like BarChart and ColumnChart, the resulting visualization keeps on loading and no result is there. My sdk versions
Copy code
"@gooddata/sdk-backend-spi": "^10.24.0",
    "@gooddata/sdk-backend-tiger": "^10.24.0",
    "@gooddata/sdk-model": "^10.24.0",
    "@gooddata/sdk-ui": "^10.24.0",
    "@gooddata/sdk-ui-all": "^10.24.0",
    "@gooddata/sdk-ui-ext": "^10.24.0",
My code implementation, I am using measures and attributes from the drill context of an insightview. I have also tried catalog approach but the results are same
Copy code
<ColumnChart
                backend={backend}
                workspace={localStorage.getItem('workspace_id') || ''}
                measures={drillEvent?.dataView?.definition?.measures}
                // filters={drillFilters}
                viewBy={[...drillEvent?.dataView?.definition?.attributes]}
              />
m
Hi Ayush, thank you for this. First of all, please be aware you are not using the last version of SDK, it is a best practice to have them updated. Now, in order to reject the problem is the drillEvent or how you are passing the variables. Can you try to render the ColumnChart with the simplest definition, like:
Copy code
<ColumnChart
  backend={backend}
  workspace=<workspace_id_string>
  measures={[Md.fact_id]}
  viewBy={Md.attribute_id}
/>
Or similar. Are you synchronising the metadata?
My apologies, I missed the part of 'Catalog approach', I assume that is what answer my previous question. In that case, can you please share with us more context or the complete file you are using? Please, feel free to use DM.
Hi Ayush, Thank you for the information you provided. I want to clarify a few points to ensure we're on the same page: You have an insight, such as a pie chart, and when you click on any value or "slice" of that chart, you expect a bar or column chart to appear, using the clicked value as a filter for that chart. Additionally, besides using the catalog, you are also utilizing the API endpoints you shared with me via direct message. However, it seems that after you click, the bar or column chart is not rendering and appears to be stuck in a "loading" state indefinitely. Is that correct?
a
Hi Mauricio, Nope I am not slicing through any insight. I just want to use a ColumnChart component, using some attributes, which is not happening (stuck in loading state). Would love to connect for a call to solve the same.
m
Thank you for clarification. I am sorry, I was just confused as you wrote 'I am using measures and attributes from the drill context of an insightview' and you sent the the insightview payload. In that case, can you please send the complete code of you React page. At this point I believe the call is not needed. Thank you.
a
I am using the attributes and measures from the insight only to render a new ColumnChart, something I am experimenting with. I believe just sharing the code wouldn't be enough in our case and a proper demonstration should help you undetstand my problem more
cc @Rajat Hans
m
In that case, please feel free to create a screencast and share it with us via direct message. We would be happy to review the video so we can better understand the situation. Additionally, please keep in mind that since you mentioned you are "experimenting," we cannot guarantee a solution, as there may be some limitations. Could you also explain why you need this insight? Since you can use any attributes and measures in your visual component, we would appreciate it if you could elaborate on your use case.
a
Before this can you help me with this issue? I updated the SDK to the latest version, I am getting this issue?
Copy code
"@gooddata/sdk-backend-spi": "^10.39.0",
"@gooddata/sdk-backend-tiger": "^10.39.0",
"@gooddata/sdk-model": "^10.39.0",
"@gooddata/sdk-ui": "^10.39.0",
"@gooddata/sdk-ui-all": "^10.39.0",
"@gooddata/sdk-ui-ext": "^10.39.0",
Screenshot 2025-08-20 at 11.09.08 PM.png
Copy code
'use client';

import React from 'react';
import { GoodDataProvider } from '@/contexts/GoodDataContext';
import { GoodDataThemeProvider } from '@/contexts/GoodDataThemeContext';

import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

import "@/styles/gooddata-theme.css";

export default function AnalyticsLayoutClient({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <GoodDataProvider>
      <GoodDataThemeProvider>
        {children}
      </GoodDataThemeProvider>
    </GoodDataProvider>
  );
}
I get the same error when installing any new GD package as well
m
Hi regarding the problem. I can see you updated some packages, but I can not see the version of 
"@GoodData/sdk-ui-kit"
. Just in case, did you check if you have the file attribute.svg in the respective path from the error? Also, as I assumed you jumped from version 10.24 to 10.39, if you see the changelog, in the version 10.33:
Copy code
Replace ~@gooddata/ imports in scss files with @gooddata/ to allow integration with next.js
meaning that the CSS got consolidated into 
sdk-ui-ext
and 
sdk-ui
, thus technically you do not need to import 
sdk-ui-kit/styles/css/main.css
anymore if you’re on 10.39, but if for any reason you need it, you will need to update it too. Please, let me know if that works
a
The file exists but still getting the same message
@Mauricio Cabezas this is a major blocker for us, please help us out. Even after fixing this up, we have more issues with GoodData to fix
r
@Sahitya
👀 1
m
Hi Ayush, besides to check if the file is there, have you updated too the 
"@GoodData/sdk-ui-kit"
package as I suggested? What is the current state of the error, still the same?, did you try also to comment the line 
import "@gooddata/sdk-ui-kit/styles/css/main.css";
in your code? Regarding the main request, we are still waiting for the video or more detailed explanation to understand better.
a
Yes, I have followed the same steps, yet the same issue
image.png
Copy code
"@gooddata/sdk-backend-spi": "^10.40.0",
        "@gooddata/sdk-backend-tiger": "^10.40.0",
        "@gooddata/sdk-model": "^10.40.0",
        "@gooddata/sdk-ui": "^10.40.0",
        "@gooddata/sdk-ui-all": "^10.40.0",
        "@gooddata/sdk-ui-ext": "^10.40.0",
        "@gooddata/sdk-ui-kit": "^10.40.0",
m
Ok, I will forward this to our Technical Support Team, a colleague of us will provide an update.
🙌 1
a
Copy code
'use client';

import React from 'react';
import { GoodDataProvider } from '@/contexts/GoodDataContext';
import { GoodDataThemeProvider } from '@/contexts/GoodDataThemeContext';

import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
// import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

import "@/styles/gooddata-theme.css";

export default function AnalyticsLayoutClient({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <GoodDataProvider>
      <GoodDataThemeProvider>
        {children}
      </GoodDataThemeProvider>
    </GoodDataProvider>
  );
}
s
@Ayush Kumar while @Mauricio Cabezas triages, I tried commenting out the CSS files to prevent the import error, but the charts and visualizations that we've integrated already are not loading, is this because of data discrepancy?
a
Nope this is because redshift is off, also commenting out the CSS will remove all the override classes we have written
✅ 1
s
@Mauricio Cabezas is there a recommended node version for the gooddata SDK?
m
Hi, here you can see the compatible and supported versions, in the case of Node is: 
Node ^16.20.0 LTS
👍 1
s
@Mauricio Cabezas FYI i think i've found the issue in your SDK, in gooddata SDK version 10.24.0, the svg import URLs are preceded with 
~
for absolute imports, whereas in the newer versions, they dont, which is what causes the compilation error. first screenshot is from 10.24.0, second one is from 10.40.0. Suspect PR: https://github.com/gooddata/gooddata-ui-sdk/pull/6716 Manually adding back the tilde fixed the error for the svg imports, but now the library throws another error:
Copy code
⨯ ./node_modules/@gooddata/sdk-ui-filters/styles/css/main.css:4:1
Module not found: Can't resolve './@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot'

<https://nextjs.org/docs/messages/module-not-found>

Import trace for requested module:
./node_modules/@gooddata/sdk-ui-filters/styles/css/main.css
Which unfortunately does not get resolved by adding tilde to the imports. This might help you debug the issue further.
a
@Mauricio Cabezas here is a recording of the ColumnChart issue we are facing -> https://www.loom.com/share/12a9e6c304a2458d8d83b867e93ea40a?sid=1b6af0f7-a05d-4c41-afad-d8baf644c684
m
HI, please allow me to provide an update. Thank you for the video you sent, without having the reproducer, at first glance, I can see that you are trying to reuse the attributes and measures directly from the raw 
insight
object, using the console.logs() is not the correct approach. Those values that show up in the console are not in the correct format that our chart components expect, which is why the custom visualization is not rendering as intended. The correct format is or type is IMeasure[]. The recommended approach is to use the SDK helper functions 
insightMeasures()
and 
insightAttributes()
. These will safely extract the measures and attributes from the saved insight in the right shape, so you can pass them directly to your 
ColumnChart
(or any other chart). This way you can reuse the definition of your saved insight, but display it in the visualisation type you choose.
a
@Mauricio Cabezas if you look carefully in the code implementation, I am not using the attributes and measures directly. I just took a reference and used the attributes and measures from the catalog file. Thanks for the helper method suggestion, will execute these ones and let you know if it works
r
@Mauricio Cabezas is this right approach to do this? we're just trying to implement drill downs on insights
a
@Mauricio Cabezas, We are experiencing issues with the 
insightMeasures()
and 
insightAttributes()
functions, which are repeatedly causing our application to crash and generating extensive TypeScript errors. You can find the screenshots and code implementation below Additionally, regarding the SDK update, you had previously indicated that you would engage your Technical Support Team and provide us with a resolution. Despite multiple follow-ups on this thread and via email, it has now been almost two weeks without any meaningful update or fix. My team has reiterated these concerns numerous times, and this persistent lack of resolution has become a major blocker for our project delivery. Given the critical impact on our workflow, we urgently request escalation and immediate action from your end. Please prioritize this issue and ensure we receive a comprehensive response or solution as soon as possible.
image.png
Copy code
useEffect(() => {
    const fetchInsights = async () => {
      const insight =  await backend?.workspace(workspaceId).insights().getInsight(idRef("9a07e92c-9c2d-420c-b39b-b51df9b9843c"));
      if(insight) {
        const insightMeasures_ = insightMeasures(insight);
        const insightAttributes_ = insightAttributes(insight);
        setMeasures(insightMeasures_ as any);
        setAttributes(insightAttributes_ as any);
      }
    }
    fetchInsights();
  }, []);
Copy code
<ColumnChart measures={measures as any} backend={backend} workspace={workspaceId} viewBy={attributes as any} />
j
Hi Ayush, Thank you for the additional details. I'm currently summarizing the issue and I will escalate it to our L2 Technical Team. One of the team members will update you as soon as possible.
d
Hello Ayush, This is Daniela with L2 Team. I’m currently checking the thread and getting myself familiarized with the issue.
Thanks for your patience. First, I want to apologize with you about his not being escalated sooner. I see that it was promised. I’m currently checking internally on what happen, so this won’t repeat. My apologies about that. I see that you mention 2 issues, but the rendering is the urgent one, so let’s start there. I saw the video (very well explained, thanks for that!). Would it be possible for me to have the InsightGrid.tsx with the ColumChart that is currently not working? It will the fastest for me to reproduce the issue this way. This, along with the .har from the video. It will really speed things up. Thank you PS: if you prefer, you can send it thru DM
a
@Daniela Salmeron sure, but it has a lot of other code, let's make sure to keep our focus on the ColumnChart part only
d
Sure thing! thanks
Hello! After checking your code further, this are my findings: Even though the insight 
9a07e92c-9c2d-420c-b39b-b51df9b9843c
exists and is valid, the timing of React lifecycle vs context initialization causes the useEffect to run and fail before the backend is ready, and it never gets another chance to run. The root cause is the Empty Dependency Array Issue:
Copy code
(Lines 439-450):
useEffect(() => {
  const fetchInsights = async () => {
    // This insight DOES exist in customer's workspace
    const insight = await backend?.workspace(workspaceId).insights().getInsight(idRef("9a07e92c-9c2d-420c-b39b-b51df9b9843c"));
    if(insight) {
      setMeasures(insightMeasures(insight));
      setAttributes(insightAttributes(insight));
    }
  }
Everything else works because the other components use the correct synchronous pattern. In the code you actually have the working solution to this, but is commented, this is in Line 502: // {backend && <ColumnChart measures={[NetSales.Sum]} backend={backend} workspace={workspaceId} />} The 
ColumnChart
mounts with empty buckets because the data-fetching 
useEffect
runs once before 
backend/workspaceId
are ready. Therefore, you will need to add dependencies + guard rendering or (easiest) would be to swap to 
InsightView
for that saved insight.
a
Copy code
{backend && <ColumnChart measures={[NetSales.Sum]} backend={backend} workspace={workspaceId} />}
Even in this case, there is infinite loading
d
Hello! Thanks for sending the reproducer. After some internal discussion, it was mentioned that you will have a session soon with one of my colleagues, where he will help you further. He has already helped you in the past. Therefore, I forwarded the reproducer to him and he is already looking into it.
5 Views
Open in Slack
PreviousNext
Powered by