如何将 Apache Superset 图表嵌入到 React 应用程序中

Question

I want to embed my chart from Apache Superset into my React.js App. So far I know there is possibility to use like this:

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/r/3"
      >
</iframe>

It works fine but I want to use only a chart with filter options without all the superset dashbord pane:

I was trying to use https://www.npmjs.com/package/@superset-ui/core but there is no good documentation how to use it and it require to downgrade react version to 16, while I think in my project will be better newer version.

Currently I am trying to manipulate things inside iframe by catching things by

var iframe = document.getElementById("myIFRAME");
  var elmnt = iframe.contentWindow.document.getElementsByClassName(
    "dashboard-content css-185d7vi"
  );
   elmnt.style.display = "none";

But i think it's not a good way to do this and Im getting errors with CORS and Consider adding an error boundary to your tree to customize error handling behavior.

Answer 1

There is an option to add to iframe query attribute standalone=true..

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/superset/dashboard/world_health/?standalone=true"
      ></iframe>

Answer 2

I think this is helpful for your question.

https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#customizing-dashboard

<iframe
    width="1600"
    height="1600"
    seamless
    frameBorder="0"
    scrolling="yes"
    src="http://127.0.0.1:8088/superset/dashboard/16?standalone=2"
    >
</iframe>

Don't get the URL from ' Copy dashboard URL ' in superset. Instead of that you can get the dashboard URL from the browser link address. At the end of the URL simply add ' ?standalone=2 '