@splashbi/dashboard-web-component

<sbi-dashboard-layout> — a SplashBI dashboard (grid layout, FusionCharts, AG Grid) packaged as a single, framework-agnostic custom element. React, ReactDOM, GridStack, AG Grid and FusionCharts are all inlined into one script — a consuming app (React, Angular, plain HTML, anything) only needs this package's JS + CSS, no other setup.

Install

npm install @splashbi/dashboard-web-component

Usage

<link rel="stylesheet" href="node_modules/@splashbi/dashboard-web-component/dist/sbi-dashboard-layout.css" />
<script src="node_modules/@splashbi/dashboard-web-component/dist/sbi-dashboard-layout.js"></script>

<sbi-dashboard-layout
  base-path="https://your-splashbi-gateway.example.com"
  runner-path="/sbi-runner"
  dashboard-code="YOUR_DASHBOARD_CODE"
  process-code="YOUR_PROCESS_CODE"
></sbi-dashboard-layout>

Or, bundler-style:

import '@splashbi/dashboard-web-component';
import '@splashbi/dashboard-web-component/sbi-dashboard-layout.css';

Both register the same sbi-dashboard-layout custom element and tag; use whichever loading style fits the host app. src/custom-elements.d.ts (shipped with this package via the types field) is what lets a TypeScript/JSX project accept the tag with its kebab-case attributes without a cast.

Attributes

| Attribute | Required | Behavior | |---|---|---| | base-path | yes | SplashBI gateway URL. Nothing loads until this, dashboard-code and process-code are all set. | | runner-path | no (default /sbi-runner) | Base path for the NDJSON render endpoint. | | dashboard-code | yes | Dashboard to load. | | process-code | yes | Process code for the for-run call. | | tab-code | no | Renders this specific tab. Omit it and the first tab (by displaySequence) renders automatically. | | encrypt | no (boolean) | Present = RSA-OAEP + AES-256-GCM encrypt POST bodies; absent = plain JSON. | | reload-nonce | no | Bump this (any changed value) to force a reload even when every other attribute is unchanged. | | theme | no | FusionCharts theme name: fusion, gammel, candy, ocean, zune, carbon, or umber. Unrecognized names are silently ignored by FusionCharts. |

Setting or changing any attribute re-runs the whole flow (load structure, pick the tab, build its layout, stream its chart data). theme is the one exception — changing only theme re-paints already-loaded FusionCharts widgets in place, no reload. See src/DashboardLayout.tsx's file header and the "Theme precedence" note it documents for the full behavior.

Auth

This element has no login screen of its own. It reads an existing SplashBI session token from localStorage['_accessToken'] on the page it's embedded in — the host application is responsible for putting a valid token there before the element loads.

No Shadow DOM

Styles are global, not encapsulated — GridStack, AG Grid and FusionCharts all expect to reach global styles and the page <body>.

Local development

npm install
npm run build     # tsc -b && vite build -> dist/sbi-dashboard-layout.{js,css}

src/element.tsx is the custom element wrapper (attribute observation, mount/unmount). src/DashboardLayout.tsx holds the actual logic — fetch, encryption, GridStack/FusionCharts/AG-Grid rendering.

Relationship to the rest of this repo

This package's source (element.tsx, DashboardLayout.tsx, DashboardRun.css, custom-elements.d.ts, fusioncharts.d.ts) was copied, not moved, from ../plain-react/src so this package could be made publish-ready without touching plain-react's working dev app in the same change. That means there are currently two copies of this source — this is a deliberate, temporary state, not the end goal:

• [ ] Point plain-react's dev app at this published/workspace-linked package instead of its own copy of element.tsx/DashboardLayout.tsx.
• [ ] Point splashbi-webcomponent-examples/react-example and .../angular-example at this package instead of the file copies plain-react/scripts/publish-element.cjs currently pushes into their public/ folders.
• [ ] Delete plain-react/scripts/publish-element.cjs and the duplicated source once both are migrated, so there is exactly one source of truth.

Do not publish new versions from both plain-react and here indefinitely — pick one source and retire the other once the consumers are migrated.

Before the first public npm publish

This package is technically ready to build and publish (publishConfig targets the public npm registry, independent of this machine's default registry). A few things still need a decision or a check before that first publish actually happens — none of these are technical blockers, they're business/legal calls:

• [ ] FusionCharts redistribution. fusioncharts is a commercially licensed charting library, and this package inlines its JS directly into the published bundle (dist/sbi-dashboard-layout.js, ~5.9 MB unminified-equivalent). Publishing that bundle to the public npm registry means anyone can install and use the bundled FusionCharts code without going through FusionCharts' own licensing. Check FusionCharts' EULA / talk to whoever holds the SplashBI FusionCharts license before publishing — this is the one item most likely to block a public release as currently built. (ag-grid-community and gridstack are MIT-licensed and are not a concern.)
  • Package version. Starts at 0.1.0 since the public attribute surface hasn't been exercised by an external consumer yet, bump to 1.0.0 once it has been.
• [ ] License field. Currently set to "UNLICENSED" in package.json as a safe placeholder (no rights granted) — replace it with whatever your team decides (MIT, a custom source-available license, etc.) before publishing. UNLICENSED should not be the final state.
• [ ] Claim the @splashbi scope on npmjs.com (unclaimed as of this writing) as an npm user or organization account.
• [ ] Security/legal sign-off for shipping this externally, since it's currently developed in a proof-of-concept repository (poc-works/dashboard-ui-component-embeding).

Bundle size

The published bundle inlines React, ReactDOM, GridStack, AG Grid and FusionCharts (~5.9 MB unminified / ~1.7 MB gzipped as of this writing). This is intentional — it keeps the "drop in a script tag, works anywhere" simplicity for non-React hosts (e.g. a plain Angular app). A React host that already loads its own React/ReactDOM will load a second copy; that's a known trade-off of the self-contained build, not an oversight.