I have the below code that embeds a Superset Dashboard inside the custom element. Since the function embeddashboard expects an iframe mountpoint, i create a mountpoint inside the custom element and pass the id to the function. The page however doesnt fill the entire iframe even though i have it at 100%. Can anyone suggest what mistakes i am making?
Full code:
import { embedDashboard } from '@superset-ui/embedded-sdk';
const dashboardId = '1234';
const supersetDomain = 'abc.com';
const dashboardUiConfig = {
hideTitle: true,
filters: {
expanded: true,
},
urlParams: {}
};
// Function to create the iframe element
const createIframe = () => {
const iframeElement = document.createElement('div');
iframeElement.id = 'superset-iframe';
iframeElement.style.width = '100%';
iframeElement.style.height = '100%';
iframeElement.style.border = 'none';
iframeElement.style.display = 'flex';
iframeElement.style.justifyContent = 'center';
iframeElement.style.alignItems = 'center';
return iframeElement;
};
// Function to create and inject custom styles
const createStyle = () => {
const styleElement = document.createElement('style');
styleElement.innerHTML = `
superset-dash {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
#superset-iframe {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
`;
return styleElement;
};
// Define custom element for the Superset dashboard
class SupersetDashboard extends HTMLElement {
constructor() {
super();
}
// Called when the element is added to the DOM
connectedCallback() {
// Check if the iframe already exists
if (!this.querySelector('#superset-iframe')) {
this.style.display = 'flex';
this.style.height = '100vh';
this.style.width = '100vw';
this.style.justifyContent = 'center';
this.style.alignItems = 'center';
this.appendChild(createStyle());
const iframe = createIframe();
this.appendChild(iframe);
const guestToken = this.getAttribute('guest-token');
if (guestToken) {
embedDashboard({
id: dashboardId,
supersetDomain: supersetDomain,
mountPoint: iframe,
fetchGuestToken: () => guestToken,
dashboardUiConfig: dashboardUiConfig
}).catch(err => console.error('Error embedding dashboard:', err));
} else {
console.error('Guest token not found.');
}
}
}
// Observe changes to the guest-token attribute
static get observedAttributes() {
return ['guest-token'];
}
// Called when an observed attribute changes
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'guest-token' && oldVal !== newVal) {
// Update the iframe if the guest token changes
this.connectedCallback();
}
}
}
// Define the custom element
customElements.define('superset-dash', SupersetDashboard);
// Ensure the script runs after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
const supersetElement = document.querySelector('superset-dash');
if (supersetElement) {
supersetElement.connectedCallback();
}
});
screenshot below:
