amazon quicksight menyematkan SDK
1.0.0
Terima kasih telah menggunakan SDK JavaScript Amazon QuickSight. Anda dapat menggunakan SDK ini untuk menyematkan Amazon QuickSight di HTML Anda.
Untuk informasi lebih lanjut dan mempelajari cara menggunakan QuickSight Embedding, silakan kunjungi Situs Web Portal Pengembang QuickSight
Amazon QuickSight menawarkan empat pengalaman penyematan berbeda dengan opsi isolasi pengguna dengan namespace, dan izin UI khusus.
Opsi 1: Gunakan Amazon QuickSight Embedding SDK di browser:
...
< script src =" https://unpkg.com/[email protected]/dist/quicksight-embedding-js-sdk.min.js " > script >
< script type =" text/javascript " >
const onLoad = async ( ) => {
const embeddingContext = await QuickSightEmbedding . createEmbeddingContext ( ) ;
//...
} ;
script >
...
< body onload =" onLoad() " >
...Opsi 2: Instal Amazon QuickSight Embedding SDK di NodeJs:
npm install amazon-quicksight-embedding-sdk dan kemudian menggunakannya dalam kode Anda menggunakan sintaks require
const QuickSightEmbedding = require ( "amazon-quicksight-embedding-sdk" ) ;
const embeddingContext = await QuickSightEmbedding . createEmbeddingContext ( ) ; atau, menggunakan sintaks import bernama:
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk' ;
const embeddingContext = await createEmbeddingContext ( ) ; atau, menggunakan sintaks import wildcard:
import * as QuickSightEmbedding from 'amazon-quicksight-embedding-sdk' ;
const embeddingContext = await QuickSightEmbedding . createEmbeddingContext ( ) ; Gunakan metode createEmbeddingContext untuk membuat konteks penyematan. Ini mengembalikan janji tipe EmbeddingContext .
export type CreateEmbeddingContext = ( frameOptions ?: EmbeddingContextFrameOptions ) => Promise < EmbeddingContext >
export type EventListener = (
event : EmbeddingEvents ,
metadata ?: ExperienceFrameMetadata
) => void ;
export type EmbeddingContextFrameOptions = {
onChange ?: EventListener ;
} ;
export type IEmbeddingContext = {
embedDashboard : ( frameOptions : FrameOptions , contentOptions ?: DashboardContentOptions ) => Promise < DashboardExperience > ;
embedVisual : ( frameOptions : FrameOptions , contentOptions ?: VisualContentOptions ) => Promise < VisualExperience > ;
embedConsole : ( frameOptions : FrameOptions , contentOptions ?: ConsoleContentOptions ) => Promise < ConsoleExperience > ;
embedQSearchBar : ( frameOptions : FrameOptions , contentOptions ?: QSearchContentOptions ) => Promise < QSearchExperience > ;
embedGenerativeQnA : ( frameOptions : FrameOptions , contentOptions ?: GenerativeQnAContentOptions ) => Promise < GenerativeQnAContentOptions > ;
} ; Anda dapat membuat konteks penyematan dengan memanggil metode createEmbeddingContext tanpa argumen apa pun
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk' ;
const embeddingContext : EmbeddingContext = await createEmbeddingContext ( ) ; atau, Anda dapat meneruskan argumen objek dengan properti onChange
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk' ;
const embeddingContext : EmbeddingContext = await createEmbeddingContext ( {
onChange : ( changeEvent ) => {
console . log ( 'Context received a change' , changeEvent ) ;
} ,
} ) ; Konteks penyematan membuat iframe nol piksel tambahan dan menambahkannya ke elemen body pada halaman untuk memusatkan komunikasi antara SDK dan konten QuickSight yang disematkan.
Instance EmbeddingContext memperlihatkan 4 metode pengalaman
Metode ini mengambil 2 parameter:
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk' ;
const embeddingContext = await createEmbeddingContext ( ) ;
const {
embedDashboard ,
embedVisual ,
embedConsole ,
embedQSearchBar ,
} = embeddingContext ;
const frameOptions = {
//...
} ;
const contentOptions = {
//...
} ;
// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard ( frameOptions , contentOptions ) ;
// Embedding a visual experience
const embeddedVisualExperience = await embedVisual ( frameOptions , contentOptions ) ;
// Embedding a console experience
const embeddedConsoleExperience = await embedConsole ( frameOptions , contentOptions ) ;
// Embedding a Q search bar experience
const embeddedQSearchExperience = await embedQSearchBar ( frameOptions , contentOptions ) ;frameOptions untuk Semua Pengalaman Penyematan Ini adalah URL penyematan yang Anda buat menggunakan Operasi API QuickSight untuk Penyematan.
Ikuti Penyematan dengan QuickSight API di Panduan Pengguna Amazon QuickSight untuk menghasilkan url.
Untuk setiap pengalaman, Anda perlu memastikan bahwa pengguna diberikan izin yang diperlukan untuk melihat pengalaman yang disematkan.
Ini adalah HTMLElement induk tempat kita akan menyematkan QuickSight.
Ini bisa berupa HTMLElement:
container: document . getElementById ( "experience-container" )Atau, bisa berupa string pemilih kueri:
container: "#experience-container" Anda dapat mengatur width untuk iframe yang menyimpan pengalaman QuickSight tersemat. Anda dapat mengaturnya menjadi nilai tetap:
width: "1000px"Atau, nilai relatif:
width: "60%" Untuk menjadikan pengalaman QuickSight tertanam Anda responsif, jangan setel (biarkan default: 100% ). Kemudian Anda dapat membuat wadah HTMLElement responsif terhadap perubahan ukuran layar.
Anda dapat mengatur height untuk iframe yang menyimpan pengalaman QuickSight tersemat. Anda dapat mengaturnya menjadi nilai tetap:
height: "700px"Atau, nilai relatif:
height: "80%" Untuk menjadikan pengalaman QuickSight tertanam Anda responsif, jangan setel (biarkan default: 100% ). Kemudian Anda dapat membuat wadah HTMLElement responsif terhadap perubahan ukuran layar.
Anda dapat menyesuaikan gaya iframe yang menampung pengalaman tersemat Anda dengan salah satu hal berikut:
.quicksight-embedding-iframe {
margin: 5px;
}
className : .your-own-class {
margin: 5px;
}
const option = { className : "your-own-class" }Kami telah mengganti border dan padding iframe menjadi 0px, karena menyetel border dan padding pada iframe mungkin menyebabkan masalah yang tidak terduga. Jika Anda harus menyetel batas dan bantalan pada sesi QuickSight yang disematkan, setel pada div kontainer yang berisi iframe.
Ini merender spinner sederhana dalam wadah pengalaman yang disematkan saat konten iframe pengalaman penyematan sedang dimuat.
Callback ini dipanggil ketika ada perubahan status kode SDK.
export type EventListener = (event: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => void;
export interface ChangeEvent {
eventName: EventName,
eventLevel: ChangeEventLevel,
message?: EventMessageValue,
data?: EventData
}
export type ExperienceFrameMetadata = {
frame: EmbeddingIFrameElement | null;
};
eventLevel yang didukungLevel s:
ERROR
INFO
WARN
ErrorChangeEventName s
NO_FRAME_OPTIONS = 'NO_FRAME_OPTIONS',
INVALID_FRAME_OPTIONS = 'INVALID_FRAME_OPTIONS',
FRAME_NOT_CREATED: invoked when the creation of the iframe element failed
NO_BODY: invoked when there is no `body` element in the hosting html
NO_CONTAINER: invoked when the experience container is not found
INVALID_CONTAINER: invoked when the container provided is not a valid DOM node
NO_URL: invoked when no url is provided in the frameOptions
INVALID_URL: invoked when the url provided is not a valid url for the experience
NO_FRAME_OPTIONS: invoked when frameOptions property is not populated,
INVALID_FRAME_OPTIONS: invoked when the frameOptions value is not object type,
InfoChangeEventName s
FRAME_STARTED: invoked just before the iframe is created
FRAME_MOUNTED: invoked after the iframe is appended into the experience container
FRAME_LOADED: invoked after iframe element emited the `load` event
FRAME_REMOVED: invoked after iframe element is removed from the DOM
WarnChangeEventName s
UNRECOGNIZED_CONTENT_OPTIONS: invoked when the content options for the experience contain unrecognized properties
UNRECOGNIZED_FRAME_OPTIONS: invoked when the frame options for the experience contain unrecognized properties
UNRECOGNIZED_EVENT_TARGET: invoked when a message with unrecognized event target is received
const frameOptions = {
//...
onChange : ( changeEvent : EmbeddingEvents , metadata : ExperienceFrameMetadata ) => {
if ( changeEvent . eventLevel === ' ERROR ' ) {
console . log ( `Do something when embedding experience failed with " ${ changeEvent . eventName } "` ) ;
return ;
}
switch ( changeEvent . eventName ) {
case 'FRAME_MOUNTED' : {
console . log ( "Do something when the experience frame is mounted." ) ;
break ;
}
case 'FRAME_LOADED' : {
console . log ( "Do something when the experience frame is loaded." ) ;
break ;
}
case 'FRAME_REMOVED' : {
console . log ( "Do something when the experience frame is removed." ) ;
break ;
}
//...
}
} ,
} ;contentOptions untuk Semua Pengalaman Penyematan Anda dapat mengatur lokal untuk sesi QuickSight yang tertanam:
const option = { locale : "en-US" } ; Opsi lokal yang tersedia adalah:
en-US (English),
da-DK (Dansk)
de-DE (Deutsch),
ja-JP (日本語),
es-ES (Español),
fr-FR (Français),
it-IT (Italiano),
nl-NL (Nederlands),
nb-NO (Norsk),
pt-BR (Português),
fi-FI (Suomi),
sv-SE (Svenska),
ja-JP (日本語),
ko-KR (한국어),
zh-CN (中文 (简体)),
zh-TW (中文 (繁體))
Untuk daftar lokal yang lebih baru, silakan merujuk ke https://docs.aws.amazon.com/quicksight/latest/user/choosing-a-lingual-in-quicksight.html. Nilai lokal apa pun yang tidak didukung akan digunakan kembali menggunakan en-US .
Anda dapat menambahkan panggilan balik onMessage ke dalam contentOptions dari semua pengalaman penyematan.
export type EventListener = ( event : EmbeddingEvents , metadata ?: ExperienceFrameMetadata ) => void ;
export interface SimpleMessageEvent {
eventName : EventName ;
message ?: EventMessageValue ;
data ?: EventData ;
eventTarget ?: InternalExperiences ;
}
export type ExperienceFrameMetadata = {
frame : EmbeddingIFrameElement | null ;
} ; Lihat dokumentasi khusus pengalaman di bawah untuk eventName yang didukung untuk setiap jenis pengalaman.
const contentOptions = {
//...
onMessage : async ( messageEvent : EmbeddingEvents , metadata ?: ExperienceFrameMetadata ) => {
switch ( messageEvent . eventName ) {
case 'CONTENT_LOADED' : {
console . log ( "Do something when the embedded experience is fully loaded." ) ;
break ;
}
case 'ERROR_OCCURRED' : {
console . log ( "Do something when the embedded experience fails loading." ) ;
break ;
}
//...
}
}
} ; Penyematan Dasbor memberikan pengalaman baca-saja yang interaktif. Tingkat interaktivitas diatur saat dasbor dipublikasikan.
Untuk informasi lebih lanjut, lihat Bekerja dengan analitik tertanam dalam Panduan Pengguna Amazon QuickSight.
Gunakan metode embedDashboard untuk menyematkan dasbor QuickSight. Ini mengembalikan janji tipe DashboardExperience .
export class DashboardExperience extends BaseExperience < DashboardContentOptions , InternalDashboardExperience , IDashboardExperience , TransformedDashboardContentOptions , DashboardExperienceFrame > {
initiatePrint : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
undo : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
redo : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
toggleBookmarksPane : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
getParameters : ( ) => Promise < Parameter [ ] > ;
getSheets : ( ) => Promise < Sheet [ ] > ;
getVisualActions : ( sheetId : string , visualId : string ) => Promise < VisualAction [ ] > ;
addVisualActions : ( sheetId : string , visualId : string , actions : VisualAction [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
setVisualActions : ( sheetId : string , visualId : string , actions : VisualAction [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
getFilterGroupsForSheet : ( sheetId : string ) => Promise < FilterGroup [ ] > ;
getFilterGroupsForVisual : ( sheetId : string , visualId : string ) => Promise < FilterGroup [ ] > ;
addFilterGroups : ( filterGroups : FilterGroup [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
updateFilterGroups : ( filterGroups : FilterGroup [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
removeFilterGroups : ( filterGroupsOrIds : FilterGroup [ ] | string [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
setTheme : ( themeArn : string ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
setThemeOverride : ( themeOverride : ThemeConfiguration ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
createSharedView : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
getSelectedSheetId : ( ) => Promise < string > ;
setSelectedSheetId : ( sheetId : string ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
navigateToDashboard : ( dashboardId : string , navigateToDashboardOptions ?: NavigateToDashboardOptions ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
removeVisualActions : ( sheetId : string , visualId : string , actions : VisualAction [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
getSheetVisuals : ( sheetId : string ) => Promise < Visual [ ] > ;
setParameters : ( parameters : Parameter [ ] ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
reset : ( ) => Promise < SuccessResponseMessage | ErrorResponseMessage > ;
send : < EventMessageValue extends EventMessageValues > ( messageEvent : EmbeddingMessageEvent < MessageEventName > ) => Promise < ResponseMessage < EventMessageValue > > ;
}