Comments (1)
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:
- First, ensure that you have access to the iframe element.
- 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)
- D3_FORMATS PROBLEM HOT 2
- Request execution time jumps HOT 1
- Unexpected error HOT 2
- Failed to setup alerts and reports based pypi installation HOT 6
- 4.0.1: Alerting and reports does not take EMAIL RECIPIENTS* HOT 4
- Filter does not follow label HOT 1
- [SIP-138] Proposal for Slack file upload V2 integration for Alerts and Reports HOT 2
- [SIP-139] Proposal for Ant Design 5.x Upgrade HOT 4
- On KILL QUERY error "expected string or bytes-like object" in Clickhouse DB HOT 1
- build fails when using docker compose up HOT 7
- Blank Charts while loading dashboard HOT 2
- Warning when upgrading DB HOT 1
- 500 error and unexpected keyword argument 'extra_filters' HOT 3
- sqlalchemy.exc.ArgumentError HOT 2
- Oracle as Metadata- Not working HOT 2
- Thumbnails work for Dashboards, not for charts HOT 1
- Unable to set role permissions for new schema unless a new connection is created. HOT 1
- Superset Login Redirect After Guest Token Usage in Angular Iframe HOT 1
- start of production no possible due to errors in docker-compose-non-dev.yml and docker/.env HOT 3
- Data Misalignment When Applying Filter HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from superset.