dev: refactoring, removed unnecessary code, added correct build ops

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 build
+dist
 .DS_Store

package.json

@@ -5,12 +5,14 @@
   "main": "build/index.js",
   "private": false,
   "module": "build/index.es.js",
+  "iife": "dist/superset-dashboard-sdk.js",
   "files": [
     "build"
   ],
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
+    "build:iife": "rollup -c rollup.config.iife.js",
     "storybook": "start-storybook -p 6006",
     "storybook:export": "build-storybook",
     "test": "jest",

rollup.config.iife.js

@@ -0,0 +1,19 @@
+import commonjs from "@rollup/plugin-commonjs";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+
+const packageJson = require("./package.json");
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: packageJson.iife,
+      format: "iife",
+      name: "SDS",
+    },
+  ],
+  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript({ useTsconfigDeclarationDir: true }), postcss()],
+};

rollup.config.js

@@ -20,11 +20,5 @@ export default {
       sourcemap: true,
     },
   ],
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({ useTsconfigDeclarationDir: true }),
-    postcss(),
-  ],
+  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript({ useTsconfigDeclarationDir: true }), postcss()],
 };

src/Dashboard/Dashboard.tsx

@@ -4,7 +4,7 @@ import rison from "rison";
 import React, { useEffect, useRef } from "react";
 
 import { DashboardProps } from "./Dashboard.types";
-import { embedDashboard } from "./Embedded";
+import { embedDashboard, EmbeddedDashboard } from "./Embedded";
 import { formatNativeFilter } from "./Embedded/NativeFilter";
 
 const Dashboard = ({
@@ -13,11 +13,14 @@ const Dashboard = ({
   dataProvider,
   guestToken,
   nativeFilters,
+  autosize = false,
+  placeholder = false,
   uiConfig = {
     hideTitle: true,
   },
 }: DashboardProps) => {
   const ref = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = React.useState(true);
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -42,7 +45,7 @@ const Dashboard = ({
         risonFilters = rison.encode(mergedNativeFilters);
       }
 
-      const config = await embedDashboard({
+      await embedDashboard({
         uuid: uuid,
         supersetDomain: domain,
         mountPoint: ref!.current,
@@ -54,12 +57,50 @@ const Dashboard = ({
             native_filters: risonFilters,
           },
         },
+      }).then(async (dashboard: EmbeddedDashboard) => {
+        if (!autosize) {
+          setLoading(false);
+          ref.current!.style.height = "100%";
+          return;
+        }
+        const { height } = await dashboard.getScrollSize();
+        let lastHeight = height;
+        const interval = setInterval(async () => {
+          const { height, width } = await dashboard.getScrollSize();
+          if (lastHeight === height) {
+            clearInterval(interval);
+            ref.current!.style.height = `${height}px`;
+            setLoading(false);
+          }
+          lastHeight = height;
+        }, 1500);
+
+        return () => {
+          clearInterval(interval);
+          dashboard.unmount();
+        };
       });
-      return;
     })();
   }, [ref.current, uuid]);
 
-  return <div className={`superset-dashboard`} ref={ref} />;
+  return (
+    <>
+      {placeholder !== false && loading === true && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            width: "100%",
+          }}
+        >
+          {placeholder}
+        </div>
+      )}
+      <div className={`superset-dashboard`} ref={ref} style={{ height: 0 }} />
+    </>
+  );
 };
 
 export default Dashboard;

src/Dashboard/Dashboard.types.ts

@@ -3,16 +3,37 @@ import { NativeFilter } from "./Embedded/NativeFilter";
 import { UiConfigType } from "./Embedded";
 
 export type DashboardProps = {
-  /**  The data provider to use for the dashboard. */
+  /**
+   * The data provider to use to fetch data.
+   */
   dataProvider?: DataProviderInterface;
-  /** The uuid of the dashboard to display. */
+  /**
+   * The UUID of the dashboard to embed.
+   */
   uuid: string;
-  /** Superset domain. */
+  /**
+   * The domain of the Superset instance to use.
+   */
   domain: string;
-  /** Superset dashboard config */
+  /**
+   * Superset Dashboard Config
+   */
   uiConfig?: UiConfigType;
-  /** You can provide guest token directly without using dataProvider. */
+  /**
+   * You can provide guest token directly without using dataProvider.
+   */
   guestToken?: string;
-  /** List of filters to apply to the dashboard. */
+  /**
+   * Native filters to apply to the dashboard.
+   */
   nativeFilters?: NativeFilter[];
+  /**
+   * If true, the dashboard will automatically resize to fit its content.
+   * It will always be influenced by the parent container size.
+   */
+  autosize?: boolean;
+  /**
+   * The placeholder to show while the dashboard is loading.
+   */
+  placeholder?: string | boolean;
 };

src/index.ts

@@ -1,5 +1,6 @@
 import Dashboard from "./Dashboard/Dashboard";
 import { DataProviderInterface } from "./DataProvider.types";
 import DefaultDataProvider from "./DataProvider";
+import render from "./render";
 
-export { Dashboard, DataProviderInterface, DefaultDataProvider };
+export { render, Dashboard, DataProviderInterface, DefaultDataProvider };

src/render.tsx

@@ -0,0 +1,39 @@
+import Dashboard from "./Dashboard/Dashboard";
+import { UiConfigType } from "./Dashboard/Embedded";
+import DataProvider from "./DataProvider";
+import React from "react";
+import ReactDOM from "react-dom";
+
+function render(
+  elementId: string,
+  endpoint: string,
+  username: string,
+  password: string,
+  uuid: string,
+  placeholder?: string | boolean,
+  autosize: boolean = false,
+  uiConfig?: UiConfigType
+) {
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(`Element with id ${elementId} not found`);
+    return;
+  }
+  const dataProvider = new DataProvider(endpoint, { username, password });
+
+  ReactDOM.render(
+    <React.StrictMode>
+      <Dashboard
+        placeholder={placeholder}
+        autosize={autosize}
+        domain={endpoint}
+        dataProvider={dataProvider}
+        uuid={uuid}
+        uiConfig={uiConfig}
+      />
+    </React.StrictMode>,
+    document.getElementById(elementId)
+  );
+}
+
+export default render;