Giter Club home page Giter Club logo

Comments (1)

dosubot avatar dosubot commented on June 24, 2024 2

To edit the href link of the title of each chart within an embedded Superset dashboard in your React application, you can use JavaScript DOM manipulation to target and modify elements inside the iframe created by the @superset-ui/embedded-sdk. Here is an example of how you can achieve this:

  1. First, ensure that you have access to the iframe element.
  2. Use JavaScript to access the content of the iframe and modify the href attribute of the chart titles.

Here is a sample code snippet to demonstrate this:

// Function to update the href links of chart titles inside the iframe
function updateChartTitleLinks(iframeId, newHref) {
  const iframe = document.getElementById(iframeId);
  if (iframe && iframe.contentWindow) {
    const iframeDocument = iframe.contentWindow.document;

    // Wait for the iframe content to load
    iframe.onload = () => {
      // Select all chart title elements (assuming they have a specific class or tag)
      const chartTitleLinks = iframeDocument.querySelectorAll('.header-title a');

      // Update the href attribute for each chart title link
      chartTitleLinks.forEach(link => {
        link.href = newHref;
      });
    };
  }
}

// Call the function with the iframe ID and the new href link
updateChartTitleLinks('superset-iframe', 'https://new-link.com');

In this example:

  • Replace 'superset-iframe' with the actual ID of your iframe element.
  • Replace '.header-title a' with the appropriate selector for the chart title links in your Superset dashboard.
  • Replace 'https://new-link.com' with the new URL you want to set for the chart title links.

This code will update the href attribute of all chart title links inside the specified iframe once the iframe content has loaded [1].

Additionally, the @superset-ui/embedded-sdk provides a structured way to embed and interact with Superset dashboards. The embedDashboard function from the SDK can be used to embed the dashboard and manage the iframe. Here is a brief overview of how you can use it:

import { embedDashboard } from '@superset-ui/embedded-sdk';

// Function to embed the dashboard
async function embedSupersetDashboard() {
  const mountPoint = document.getElementById('dashboard-mount-point');
  const dashboard = await embedDashboard({
    id: 'your-dashboard-id',
    supersetDomain: 'https://superset.example.com',
    mountPoint,
    fetchGuestToken: async () => {
      // Fetch and return the guest token from your backend
      return 'your-guest-token';
    },
    dashboardUiConfig: {
      hideTitle: false,
      hideTab: false,
      hideChartControls: false,
      filters: {
        visible: true,
        expanded: true,
      },
    },
    debug: true,
    iframeTitle: 'Embedded Dashboard',
  });

  // Now you can interact with the embedded dashboard
  // For example, you can get the permalink of the dashboard
  const permalink = await dashboard.getDashboardPermalink('some-anchor');
  console.log(permalink);
}

// Call the function to embed the dashboard
embedSupersetDashboard();

This approach ensures that you have a robust and maintainable way to embed and interact with Superset dashboards in your React application [2].

To continue talking to Dosu, mention @dosu.

from superset.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.