https://www.gooddata.com/ logo
Join Slack
Powered by
Hi Team, I created an Insight on the dashboard but...
# gooddata-ui
v
Hi Team, I created an Insight on the dashboard but was not able to see on my local server if I integrated that Insight using React.Js I attached some images for reference
j
Hi Vicky, have you tried to remove all the styling, if it works?
v
Hi @Jan Soubusta, Yes I tried removing the styling property with respect to div but still not working, I can't see the Donut chart <Page> <div> <InsightView insight={insight} showTitle={showTitle} /> </div> </Page>
j
Is anything suspicious in the browser console?
v
Nothing in console
@Jan Soubusta When I create Insights it comes under the Private tab
j
@Dan Homola any thoughts on this? I am not an expert in this area 😉
d
Hi, I think there is some confusion, let me try to clear things up 🙂 The Private area on the screenshot is relevant to Dashboards, not individual Insights, so this is not the reason it is not showing as InsightView “does not care” about dashboard settings (see the related docs for more info about that feature). Judging from your app screenshot, I can see that parts of the chart do get rendered (the legend) so the data seem to coming through. First thing I would check is whether you have all the necessary CSS fies included. Please check your main index.js file if it includes all the CSS imports as shown in the template. That might be the missing piece.
m
@Vicky Kumar I think you should also set height of the InsightView container, eg:
Copy code
<Page>
    <div style={{ height: 500 }}>
        <InsightView insight={insight} showTitle={showTitle} />
    </div>
</Page>
v
@Matyáš Kandl Yes I tried with setting the height but no success
Hi Team Still facing the same issue and while saving the Insight I am getting only the Save button Instead of a save button it should be a Save and Publish button
u
Hi Vicky, When you save private dashboard there is SAVE button in edit mode and Edit and Share buttons in View mode? By publish button did you mean Share button , because there is no publish in dashboards but in LDM. And in order to be able to share your private dashboard you should at least have Explorer rights. What is your user role?
v
@Ulku Kijasev user role is Admin
i
@Vicky Kumar Hi, as already mentioned by @Dan Homola don’t mismatch Dashboard and Insight. Single insight is created in Analyze application, eg. Donut chart, then this single Insight can be viewed on multiple Dashboards as their widget. Once filtered by date, once filtered by course type and so on. So dont let Dashboards application distract you. Your code in your app looks ok, it even shows proper legend of chart, so probably you are having some styles/css issue.
@Vicky Kumar try to add this css import to your app 
import "@gooddata/sdk-ui-ext/styles/css/main.css";
or also others as mentioned here in this template
v
@Ivan Nejezchleb I import CSS files as suggested but no luck
i
@Vicky Kumar and are you sure that Page element does not have any styling which would cause its content truncated or something like that? You should be able to see/debug it in Chrome debug tools in Elements part
v
@Ivan Nejezchleb I just have simple code no styling for page
Copy code
<Page>
    <div>
        <InsightView insight={insight} showTitle={showTitle} />
    </div>
</Page>
i
@Vicky Kumar if you open your application in Chrome, open Debug tools, go to Elements and there in Console type 
document.querySelector('.highcharts-root')
it should find one element and you should be able then check its content, size, visibility and other properties and it means that our JS code worked as expected. If you are not able to find this element, then there is probably some other error eg in Network panel or somewhere else and chart component was not rendered properly at all
v
@Ivan Nejezchleb We are having the element with the same class name i.e. .highcharts-root
i
@Vicky Kumar Then you only need to check why this element (or one of its children) is not visible if it exists on page
j
Hi guys, I'm trying on my own and I am able to simulate the same problem (only legend is rendered, but not the insight) by setting the height of the parent container to 0px, e.g.
Copy code
<div style={{ height: 0 }}>
    <ColumnChart
        measures={[Md.PageViews]}
        viewBy={Md.ProductCategory}
        stackBy={Md.ProductBrand}
    />
</div>
So I also think it is a styling issue. @Vicky Kumar please see the attached screenshot and let me know if the SVG element has a non-zero height on your side. We'll get to the bottom of this! 💪
v
@Jiri Zajic for SVG, I am having 807 X 370
😳 1
j
Could you please post the contents of your package.json?
v
@Jiri Zajic 
{
"name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@gooddata/sdk-backend-bear": "^8.9.0", "@gooddata/sdk-model": "^8.9.0", "@gooddata/sdk-ui": "^8.9.0", "@gooddata/sdk-ui-charts": "^8.9.0", "@gooddata/sdk-ui-dashboard": "^8.9.0", "@gooddata/sdk-ui-ext": "^8.9.0", "@gooddata/sdk-ui-filters": "^8.9.0", "@gooddata/sdk-ui-geo": "^8.9.0", "@gooddata/sdk-ui-pivot": "^8.9.0", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.8.7", "classnames": "^2.3.1", "formik": "^2.2.9", "lodash": "^4.17.15", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-router-dom": "^5.3.0", "react-router-use-location-state": "^2.3.1", "react-scripts": "4.0.3", "use-location-state": "^2.3.1", "yup": "^0.32.9" }, "scripts": { "start": "cross-env HTTPS=true PORT=3000 react-scripts start", "build": "react-scripts build", "build-with-explicit-hostname": "cross-env REACT_APP_SET_HOSTNAME=true npm run build", "eject": "react-scripts eject", "test": "react-scripts test --setupFilesAfterEnv ./jest.setup.js", "testcafe-backend": "rm -R ./build & yarn build & serve -l 5000 build", "testcafe": "cross-env TEST_BACKEND=http://localhost:5000 ./scripts/run-testcafe.js", "testcafe-visual": "cross-env TEST_MODE=visual ./scripts/run-testcafe.js", "refresh-md": "node ./scripts/refresh-md.js" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/core": "^7.16.5", "@babel/plugin-transform-typescript": "^7.16.1", "@babel/preset-env": "^7.16.5", "@babel/preset-typescript": "^7.16.5", "@babel/register": "^7.16.5", "@gooddata/catalog-export": "^8.9.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6", "babel-plugin-add-module-exports": "^1.0.4", "cross-env": "^5.2.0", "enzyme": "^3.10.0", "husky": "^3.0.0", "prettier": "2.5.1", "pretty-quick": "^3.1.3", "sass": "^1.45.1", "serve": "^11.3.2", "testcafe": "^1.18.3", "typescript": "^4.1.5" }, "husky": { "hooks": { "pre-commit": "pretty-quick --staged --pattern \"**/*.*(js|jsx|ts|tsx|scss)\"" } }, "engines": { "node": ">=12.15.0" } }
@Jiri Zajic any suggestion? I shared the package.json
j
Thank you @Vicky Kumar! Your package.json looks ok. (I wanted to make sure your GoodData.UI packages have all the same version.)
I just realized looking at this screenshot that there is some strange grey background. It doesn't look like that on my app. Which still leads me to the fact there is something off in your styling.
Let's try a few more things: 1️⃣ For 
showTitle
, give it some unique string (like 
asdf
), and then try to look for it in the DOM. Let me know if it's there — look at my screenshot.
2️⃣ Try removing the <Page /> element, just keep the code as simple as possible like this:
Copy code
const Home = () => {
    const style = { height: '400px' };
    return (
        <div style={style}>
            <InsightView insight="aajmxrkPC3qs" showTitle="asdf" />
        </div>
    );
};
3️⃣ If nothing helps, I would recommend you to start a new create-gooddata-react-app from scratch and render a simple chart to make sure it works. Then re-trace your steps and try to find what edits to the code you did that made the chart disappear.
Please let me know if 1️⃣ or 2️⃣ worked for you, and what did the result look like! 🙏
v
@Jiri Zajic I tried step 1 & step 2 show title changes reflected but still no luck
j
@Vicky Kumar Can you please share a screenshot how it looks without the <Page />?
v
Screenshot (110).png,Screenshot (111).png
j
Why is the page background gray? Where is it coming from?
Are you applying <ThemeProvider /> from GoodData.UI? The page background should not be gray — there are some other/extra styles interfering.
v
Grey color as the background was used as per design. Now I removed that CSS.
j
@Vicky Kumar can you remove all the remaining CSS that you added? What I'm trying to tell is that when you created a new application from scratch (using @gooddata/create-gooddata-react-app) it was most likely working. And as you kept adding your own styles and dependncies at some point it stopped working. I think that the only way to debug is to re-trace your steps.
@Vicky Kumar Could you please run 
npx --ignore-existing @gooddata/create-gooddata-react-app@0.19.1-beta.0
to create a new project, and then try to render the same Donut Chart before making any other modifications?
Another option is that you remove the folder node_modules, make a zip archive of your project and share it with me. You could also invite me to your workspace, or I could connect to some other workspace, and I would try on my machine and let you know.
v
@Jiri Zajic connecting together will be better for us. Please share your Email id so that I can invite you
j
v
@Jiri Zajic
j
Working on it. Give me 15 minutes.
@Vicky Kumar just tried it on my side and it works. I'm attaching my full source code (excl. node_modules — just hit 
yarn install
before 
yarn run
), the screenshot and the source code.
acadmi.zip
Let me know if you need more help debugging!
@Vicky Kumar if you're still facing issues, you can also share the exact code to reproduce this, so that I can test on my side. Let us know!
v
@Jiri Zajic Working fine with the repo you shared.
👍 1
j
@Vicky Kumar were you able to figure out why it is not working in your project?
v
@Jiri Zajic one more small help, please When I use Headline Insight I am getting text line 40.00 or 9.00 How can I convert these numbers to like 40 or 9? I tried to trim the string using split in Javascript but no success
u
Hi Vicky, The headline is composed of metrics. You can format these metrics in gooddata platform to have the format “#,##0” so that there won’t be any decimal points. But this change you should do on the headline insight in GoodData platform, this will be easier i believe.
j
Hello @Vicky Kumar, like @Ulku Kijasev says the format respects the metric format. There are several options for you: 1. You can change the format of the metric. (This will change the format everywhere where this metric is used.) 2. You can change the format while building an insight in Analyze. (This will only change the format for that particular insight.) 3. In GoodData.UI, you can also override the format only for one specific use, e.g. like this 
<Headline primaryMeasure={newMeasure(idRef("total_listings", "measure"), m => m.format("#,##0"))} />
.
v
Hi @Jiri Zajic @Ulku Kijasev I need to draw a bar chart and the design is attached. I need a string above each line and there should be a light grey background color that represents 100% container. data should be in percentage Please help me
j
Hello @Vicky Kumar! I don't think you'll get this exact bar chart using GoodData.UI's out-of-the-box components. If you need this exact design (string above each line, light grey background) you should use the <Execute /> component to get the raw data, and then implement the rendering logic on your side. There are examples on how to use the <Execute /> component at https://gdui-examples.herokuapp.com/execute/execute-component and also at https://sdk.gooddata.com/gooddata-ui/docs/interactive_examples.html, specifically this one: https://codesandbox.io/s/github/gooddata/gooddata-ui-examples/tree/master/example-execute?file=/src/App/index.js. Let us know how it works out for you!
v
@Jiri Zajic import { Execute, isEmptyResult } from "@gooddata/react-components"; while importing Execute and isEmptyResult I am getting an error message like Module not found: Error: Can't resolve '@gooddata/react-components'
j
Hello @Vicky Kumar! Where did you find the example that imports from @gooddata/react-components? The package @gooddata/react-components is a VERY old version of the GoodData.UI SDK that has been deprecated years ago. The <Execute /> component should now be imported from @gooddata/sdk-ui like you can see in the examples I shared above. If you found an example where anything is imported from @gooddata/react-components please report this to us so we can fix this! Except for some legacy solutions the @gooddata/react-components package should never be used any more.
v
@Jiri Zajic I found this import statement on GoodData website itself https://sdk.gooddata.com/gooddata-ui/docs/4.1.1/execute_component.html#parameters
j
@Vicky Kumar this is link to GoodData.UI version 4.1.1, please use the latest version 8.10. at https://sdk.gooddata.com/gooddata-ui/docs/create_new_visualization.html#react-components.
v
@Jiri Zajic is my code correct, I am getting error for afm(line no .10) & isEmptyResult(result) line no 23.
j
@Vicky Kumar you should remove @gooddata/react-components from your dependencies (
npm uninstall @gooddata/react-components
if you use npm, 
yarn remove @gooddata/react-components
if you use yarn). Please don't import anything from @gooddata/react-components, this package is outdated and not compatible with the latest version of GoodData.UI.
The <Execute /> component imported correctly from @gooddata/sdk-ui does not accept 
afm
property. The <Execute /> component accepts 
seriesBy
(typically an array of measures) and 
slicesBy
(typically an array of attributes).
Please observe examples at https://gdui-examples.herokuapp.com/execute/execute-component and see the most trivial example at https://github.com/gooddata/gooddata-ui-examples/blob/master/example-execute/src/App/index.js:
Copy code
import React from "react";
import * as Md from "../md";
import Hint from "./Hint";
import { Execute } from "@gooddata/sdk-ui";
import CustomVisualization from "./CustomVisualization";

export default () => (
  <>
    <h1>Custom Visualization</h1>

    <div style={{ height: 400 }}>
      <Execute seriesBy={[Md.Revenue]} slicesBy={[Md.ProductCategory, Md.CustomerRegion]}>
        {CustomVisualization}
      </Execute>
    </div>

    <Hint />
  </>
);
Where CustomVisualization.js is defined in https://github.com/gooddata/gooddata-ui-examples/blob/master/example-execute/src/App/CustomVisualization.js.
v
@Jiri Zajic thanks, worked as you suggested
👍 1
@Jiri Zajic @Ulku Kijasev Can we use stack by in Combo Chart I need to draw the chart according to the attached image
@Jiri Zajic @Ulku Kijasev Please help me with this graph Thanks
j
Hi @Vicky Kumar I’ll take a look at your question. Give me some time and I’ll come back with an answer.
Hello again. I quickly tested this - it is indeed possible to use stack by with combo charts. See example with some mock data below:
Colour config is available in the designer as usual or via the 
config
key in the actual component. See example:
Copy code
<InsightView
    insight={MD.Insights.StackedInsight}
    config={
        {
            colors: [
                // Bottom column 
                'rgb(255,192,203)',
                // Top column
                'rgb(157,34,53)',
                // Line
                'rgb(150,150,150)'
            ]
        }
    }
/>
v
@Jan Rehanek I also tried creating Combo Insights but I didn't find any option for the stack by. In the attached screenshot we can see we have 3 options 1. for column 2. for lines 3. view by No options are available to add matrices for the stack by Please help, Thanks
j
Should be over here - you need to expand the metric config menu by clicking the three little horizontal bars.
v
@Jiri Zajic @Ulku Kijasev @Jan Rehanek How can I use the time for the x-axis label A screenshot is attached for reference.
j
Hello @Vicky Kumar! As far as I know the time isn't natively supported on the GoodData Platform; it's date only. However there is a workaround where you can design your LDM to provide support for hours and minutes by defining extra attributes.
v
@Jiri Zajic I didn't find any references regarding time or hour in link that you shared above
j
Correct, there is none since time isn't natively supported on the GoodData Platform. But again, it can be worked around by defining attributes (hour with values 0-23, and minute with values 0-59).
v
@Jiri Zajic @Ulku Kijasev @Jan Rehanek I need to create a chart according to the attached screenshot. For January, February, March and so on we have multiple data
j
I'm afraid I don't follow. It appears like a simple column chart with a single metric sliced by date. What do you mean by "for January, February, March and so on we have multiple data"? Like that you have multiple metrics? What does each column represent in the screenshot you shared? A day? A week? I'm having a hard time telling what column is still January and where February begins.
Open in Slack
PreviousNext
Powered by