@itg-galaxy/superset-embed-widget

Embed Apache Superset dashboards into your Angular project with a single HTML tag.

What is this?

Apache Superset is an open-source data visualization tool. Your team builds and manages dashboards there. This package lets you display those dashboards inside your Angular app — no iframes to configure, no token logic to write. You just drop in a tag and the dashboard appears.

How it works

1. Your team creates a dashboard in Apache Superset and gets a Dashboard ID.
2. This package calls your backend (POST /api/Superset/GenerateGuestTokenByDashboardId) to get a secure guest token.
3. The dashboard is rendered inside your Angular app automatically.

Install

npm install @itg-galaxy/superset-embed-widget @superset-ui/embedded-sdk

Setup (once per project) — do not skip this step

Important: Without this step the widget will throw an error and no dashboard will render.

In your app.config.ts, initialize the widget with your backend's base URL:

import { initSupersetWidget } from '@itg-galaxy/superset-embed-widget';

provideAppInitializer(() => {
  const injector = inject(Injector);
  initSupersetWidget(injector, {
    authPath: 'http://your-backend-url',  // base URL of your API server
  });
});

Usage

Import the auto-registering entry once (e.g. in main.ts or app.config.ts):

import '@itg-galaxy/superset-embed-widget/auto';

Then use the tag anywhere in your Angular templates:

<superset-dashboard dashboardId="your-dashboard-id-here"></superset-dashboard>

That's it. The widget will call your backend, get the guest token, and render the Superset dashboard inside the tag.

What your backend must return

Your POST /api/Superset/GenerateGuestTokenByDashboardId endpoint should return:

{
  "id": "dashboard-id",
  "supersetDomain": "http://your-superset-instance.com",
  "token": "guest-token-from-superset"
}

Peer dependencies

This package requires the following to already be installed in your project:

• @angular/common >= 16
• @angular/core >= 16
• @superset-ui/embedded-sdk ^0.3.0
• rxjs >= 7