การ Embed Dashboard บน Platform ของผู้ใช้

Requirement ที่ต้องการจาก Platform

1. Origin ของ Platform ที่ต้องการใช้งานการ Embed Dashboard จาก ByteArk Lighthouse

   1. UAT
   2. Staging
   3. Production

Partner Integration Guide

Technical Requirement

Node JS

HTTP Client (axios)

ขั้นตอนการ Integrate

1. เพิ่ม SDK สำหรับการ Embed Dashboard ด้วย @superset-ui/embedded-sdk

ผ่านคำสั่ง

npm i @superset-ui/embedded-sdk

2. สร้าง Function fetchGuestToken โดยในส่วนของ id ให้ใช้ id ของ Dashboard ที่ได้จาก ByteArk

3. สร้าง <div> สำหรับการให้ SDK Render IFrame ลงไปเพื่อทำการ Embed Dashboard

4. Import Function จาก SDK ที่ได้ Install ไปเบื้องต้น

5. เรียกใช้งาน Fucntion EmbedDashboard โดย

mountPoint: documenElementById("<ใส่ ID ของ div ที่สร้างไว้ในเบื้องต้น>") Id : ใส่ Id ของ Dashboard ที่ได้จาก ByteArk

fetchGuestToken : ใส่ Function fetchGuestToken ที่ได้ Implement ไปในเบื้อต้น

6. ปรับแต่ง CSS การแสดงผลตามความต้องการของ Platform (ปรับในส่วนของ iframe)

ตัวอย่าง CSS

ตัวอย่าง Code Sandbox

https://codesandbox.io/p/sandbox/lighthouse-embedding-4z2q89 (opens new window)