Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/awslabs/amazon-quicksight-embedding-sdk

A SDK to help users embed QuickSight dashboards on other pages.

https://github.com/awslabs/amazon-quicksight-embedding-sdk

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (5.9%) to scientific vocabulary

Keywords from Contributors

interactive archival projection generic sequences observability autograding hacking shellcodes modular
Last synced: 10 months ago · JSON representation

Repository

A SDK to help users embed QuickSight dashboards on other pages.

Basic Info
  • Host: GitHub
  • Owner: awslabs
  • License: apache-2.0
  • Language: TypeScript
  • Default Branch: master
  • Size: 1.99 MB
Statistics
  • Stars: 188
  • Watchers: 19
  • Forks: 42
  • Open Issues: 50
  • Releases: 0
Created over 7 years ago · Last pushed about 1 year ago
Metadata Files
Readme Changelog Contributing License Code of conduct

README.md

Amazon QuickSight Embedding SDK

 
Thank you for using the Amazon QuickSight JavaScript SDK. You can use this SDK to embed Amazon QuickSight in your HTML.

For more information and to learn how to use QuickSight Embedding, please visit QuickSight Developer Portal Website

Amazon QuickSight offers four different embedding experiences with options for user isolation with namespaces, and custom UI permissions.

 

Installation

 

Option 1: Use the Amazon QuickSight Embedding SDK in the browser: html ... <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script> <script type="text/javascript"> const onLoad = async () => { const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); //... }; </script> ... <body onload="onLoad()"> ...

Option 2: Install the Amazon QuickSight Embedding SDK in NodeJs: shell npm install amazon-quicksight-embedding-sdk and then use it in your code using require syntax ```javascript const QuickSightEmbedding = require("amazon-quicksight-embedding-sdk");

const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); ```

or, using named import syntax:

```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext(); ```

or, using wildcard import syntax:

```javascript import * as QuickSightEmbedding from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); ```

 

Creating the Embedding Context

 

Use createEmbeddingContext method to create an embedding context. It returns a promise of EmbeddingContext type.

```typescript

export type CreateEmbeddingContext = (frameOptions?: EmbeddingContextFrameOptions) => Promise

export type EventListener = ( event: EmbeddingEvents, metadata?: ExperienceFrameMetadata ) => void;

export type EmbeddingContextFrameOptions = { onChange?: EventListener; };

export type IEmbeddingContext = { embedDashboard: (frameOptions: FrameOptions, contentOptions?: DashboardContentOptions) => Promise; embedVisual: (frameOptions: FrameOptions, contentOptions?: VisualContentOptions) => Promise; embedConsole: (frameOptions: FrameOptions, contentOptions?: ConsoleContentOptions) => Promise; embedQSearchBar: (frameOptions: FrameOptions, contentOptions?: QSearchContentOptions) => Promise; embedGenerativeQnA: (frameOptions: FrameOptions, contentOptions?: GenerativeQnAContentOptions) => Promise; }; ```

You can create the embedding context by calling createEmbeddingContext method without any arguments ```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext: EmbeddingContext = await createEmbeddingContext();

```

or, you can pass an object argument with onChange property

```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext: EmbeddingContext = await createEmbeddingContext({ onChange: (changeEvent) => { console.log('Context received a change', changeEvent); }, }); ```

The embedding context creates an additional zero-pixel iframe and appends it into the body element on the page to centralize communication between the SDK and the embedded QuickSight content.

 

Embedding the Amazon QuickSight Experiences

 

An EmbeddingContext instance exposes 4 experience methods

  • embedDashboard
  • embedVisual
  • embedConsole
  • embedQSearchBar
  • embedGenerativeQnA

These methods take 2 parameters:

  • frameOptions (required)
  • contentOptions (optional)

 

Example

 

```typescript 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);

```

 

Common Properties of frameOptions for All Embedding Experiences

 

🔹 url: string (required)

This is the embed URL you have generated using the QuickSight API Operations for Embedding.

Follow Embedding with the QuickSight API in the Amazon QuickSight User Guide to generate the url.

For each experience, you need to make sure that the users are granted the necessary permissions to view the embedded experience.

🔹 container: string | HTMLElement (required)

This is the parent HTMLElement where we're going to embed QuickSight.

It can be an HTMLElement: javascript container: document.getElementById("experience-container") Or, it can be a query selector string: javascript container: "#experience-container"

🔹 width: string (optional, default='100%'),

You can set width for the iframe that holds your embedded QuickSight experience. You can set it to be a fixed value: javascript width: "1000px" Or, a relative value: javascript width: "60%"

To make your embedded QuickSight experience responsive, don't set it (leave them at the default: 100%). Then you can make the container HTMLElement responsive to screen size change.

🔹 height: string (optional, default='100%')

You can set height for the iframe that holds your embedded QuickSight experience. You can set it to be a fixed value: javascript height: "700px"

Or, a relative value: javascript height: "80%"

To make your embedded QuickSight experience responsive, don't set it (leave them at the default: 100%). Then you can make the container HTMLElement responsive to screen size change.

🔹 className: string (optional)

You can customize style of the iframe that holds your embedded experience by one of the followings:

  • Option 1: Use the "quicksight-embedding-iframe" class we predefined for you: .quicksight-embedding-iframe { margin: 5px; }
  • Option 2: Or, create your own class and pass in through className property: .your-own-class { margin: 5px; } javascript const option = { className: "your-own-class" }

We've overridden the border and padding of the iframe to be 0px, because setting border and padding on the iframe might cause unexpected issues. If you have to set border and padding on the embedded QuickSight session, set it on the container div that contains the iframe.

🔹 withIframePlaceholder: boolean (optional, default=false)

It renders a simple spinner in the embedded experience container while the contents of the embedding experience iframe is being loaded.

🔹 onChange: EventListener (optional)

This callback is invoked when there is a change in the SDK code status.

``` 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; }; ```

Supported eventLevels:

ERROR
INFO
WARN

ErrorChangeEventNames

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,

InfoChangeEventNames

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

WarnChangeEventNames

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

javascript 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; } //... } }, };

 

Common Properties of contentOptions for All Embedding Experiences

 

🔹 locale: string (optional) (not available in QSearchBar embedding)

You can set locale for the embedded QuickSight session: javascript const option = { locale: "en-US" }; Available locale options are: 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 (中文 (繁體))

For a more updated list of locales, please refer to https://docs.aws.amazon.com/quicksight/latest/user/choosing-a-language-in-quicksight.html. Any unsupported locale value will fallback to using en-US.

🔹 onMessage: EventListener (optional)

You can add onMessage callback into the contentOptions of all embedding experiences.

```typescript 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; };

```

See the experience specific documentation below for the supported eventNames for each experience type.

```typescript

const contentOptions = { //... onMessage: async (messageEvent: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => { switch (messageEvent.eventName) { case 'CONTENTLOADED': { console.log("Do something when the embedded experience is fully loaded."); break; } case 'ERROROCCURRED': { console.log("Do something when the embedded experience fails loading."); break; } //... } } }; ```

 

Dashboard Embedding

 

Dashboard Embedding provides an interactive read-only experience. The level of interactivity is set when the dashboard is published.

For more information, see Working with embedded analytics in the Amazon QuickSight User Guide.

 

Getting Started

 

Use embedDashboard method to embed a QuickSight dashboard. It returns a promise of DashboardExperience type.

typescript 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>; toggleThresholdAlertsPane: () => Promise<SuccessResponseMessage | ErrorResponseMessage>; toggleSchedulingPane: () => Promise<SuccessResponseMessage | ErrorResponseMessage>; toggleRecentSnapshotsPane: () => 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>>; }

 

Example

 

```html <!DOCTYPE html> 

<head>
    <title>Dashboard Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedDashboard = async() => {
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: '<YOUR_EMBED_URL>',
                container: '#experience-container',
                height: "700px",
                width: "300px",
                resizeHeightOnSizeChangedEvent: true,
                onChange: (changeEvent, metadata) => {
                    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;
                        }
                    }
                },
            };

            const contentOptions = {
                parameters: [
                    {
                        Name: 'country',
                        Values: [
                            'United States'
                        ],
                    },
                    {
                        Name: 'states',
                        Values: [
                            'California',
                            'Washington'
                        ]
                    }
                ],
                locale: "en-US",
                sheetOptions: {
                    initialSheetId: '<YOUR_SHEETID>',
                    singleSheet: false,                        
                    emitSizeChangedEventOnSheetChange: false,
                },
                toolbarOptions: {
                    export: false,
                    undoRedo: false,
                    reset: false
                },
                attributionOptions: {
                    overlayContent: false,
                },
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'CONTENT_LOADED': {
                            console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode);
                            break;
                        }
                        case 'PARAMETERS_CHANGED': {
                            console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
                            break;
                        }
                        case 'SELECTED_SHEET_CHANGED': {
                            console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet);
                            break;
                        }
                        case 'SIZE_CHANGED': {
                            console.log("Size changed. New dimensions:", messageEvent.message);
                            break;
                        }
                        case 'MODAL_OPENED': {
                            window.scrollTo({
                                top: 0 // iframe top position
                            });
                            break;
                        }
                    }
                },
            };
            const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);

            const selectCountryElement = document.getElementById('country');
            selectCountryElement.addEventListener('change', (event) => {
                embeddedDashboardExperience.setParameters([
                    {
                        Name: 'country',
                        Values: event.target.value
                    }
                ]);
            });
        };
    </script>
</head>

<body onload="embedDashboard()">
    <span>
        <label for="country">Country</label>
        <select id="country" name="country">
            <option value="United States">United States</option>
            <option value="Mexico">Mexico</option>
            <option value="Canada">Canada</option>
        </select>
    </span>
    <div id="experience-container"></div>
</body>

```

 

frameOptions

 

See Common Properties of frameOptions for All Embedding Experiences for url, container, width, height, className, withIframePlaceholder, onChange properties

 

resizeHeightOnSizeChangedEvent: boolean (optional, default: false)

Use resizeHeightOnSizeChangedEvent to allow changing the iframe height when the height of the embedded content changed. json { "height": "300px", "resizeHeightOnSizeChangedEvent": true }

When the resizeHeightOnSizeChangedEvent property is set to true, the value of the height property acts as a loading height.

Note: With the resizeHeightOnSizeChangedEvent set to true, modals generated by the dashboard can be hidden if the content is larger than the screen. An example of this type of modal is the one that displays when you select "Export to CSV" on a Table visual. To solve this issue, you can add the following code to autoscroll the focus to the modal. javascript const contentOptions = { //... onMessage: (messageEvent, metadata) => { switch (messageEvent.eventName) { case 'MODAL_OPENED': { window.scrollTo({ top: 0 // iframe top position }); break; } //... } }, }

 

contentOptions

 

See Common Properties of contentOptions for All Embedding Experiences for locale property

 

🔹 parameters: Parameter[] (optional)

It allows you to set initial parameter values for your embedded QuickSight dashboard. Pass an array as value for multi-value parameters. For more information about parameters in Amazon QuickSight, see https://docs.aws.amazon.com/quicksight/latest/user/parameters-in-quicksight.html

🔹 toolbarOptions

If sub-properties of the toolbarOptions are set to false, then the navrbar is hidden.

     🔹 export: boolean (optional, default=false)

This can be used to show or hide export icon for dashboard embedding.

     🔹 undoRedo: boolean (optional, default=false)

This can be used to show or hide the undo and redo buttons for dashboard embedding.

     🔹 reset: boolean (optional, default=false)

This can be used to show or hide the reset button for dashboard embedding.

     🔹 bookmarks: boolean (optional, default=false)

This can be used to show or hide the bookmarks button for dashboard embedding.

The bookmarks feature is only available for the embedded dashboards of which embed URL is obtained using generateEmbedUrlForRegisteredUser which enables Bookmarks feature in the FeatureConfigurations property.

... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "<YOUR_DASHBOARD_ID>", "FeatureConfigurations": { "Bookmarks": { "Enabled": true } } } } ...

     🔹 thresholdAlerts: boolean (optional, default=false)

This can be used to show or hide the threshold alerts button for dashboard embedding.

The thresholdAlerts feature is only available for embedded dashboards generated using generateEmbedUrlForRegisteredUser with ThresholdAlerts feature enabled in the FeatureConfigurations property.

... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "<YOUR_DASHBOARD_ID>", "FeatureConfigurations": { "ThresholdAlerts": { "Enabled": true } } } } ...

     🔹 scheduling: boolean (optional, default=false)

This can be used to show or hide the schedules button for dashboard embedding.

The scheduling feature is only available for embedded dashboards generated using generateEmbedUrlForRegisteredUser with Schedules feature enabled in the FeatureConfigurations property.

... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "<YOUR_DASHBOARD_ID>", "FeatureConfigurations": { "Schedules": { "Enabled": true } } } } ...

     🔹 recentSnapshots: boolean (optional, default=false)

This can be used to show or hide the recent snapshots button for dashboard embedding.

The recentSnapshots feature is only available for embedded dashboards generated using generateEmbedUrlForRegisteredUser with RecentSnapshots feature enabled in the FeatureConfigurations property.

... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "<YOUR_DASHBOARD_ID>", "FeatureConfigurations": { "RecentSnapshots": { "Enabled": true } } } } ...

     🔹 executiveSummary: boolean (optional, default=false)

This can be used to enable executive summaries as the instant generation of insights from dashboards.

This option is available for both embedded console and embedded dashboard. To use, calling generateEmbedUrlForRegisteredUser or generateEmbedUrlForRegisteredUserWithIdentity with ExecutiveSummary feature enabled in the FeatureConfigurations property.

... "ExperienceConfiguration": { "QuickSightConsole": { "InitialPath": "<INITIAL_PATH>", "FeatureConfigurations": { "ExecutiveSummary": { "Enabled": true } } } } ... or ... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "<YOUR_DASHBOARD_ID>", "FeatureConfigurations": { "ExecutiveSummary": { "Enabled": true } } } } ...

     🔹 dataQnA: boolean (optional, default=false)

This can be used to enable multi-visual Q&A in console embedding.

This option is only available for embedded console. To use, calling generateEmbedUrlForRegisteredUser or generateEmbedUrlForRegisteredUserWithIdentity with both GenerativeAuthoring and DataQnA feature enabled in the FeatureConfigurations property. ... "ExperienceConfiguration": { "QuickSightConsole": { "InitialPath": "<INITIAL_PATH>", "FeatureConfigurations": { "GenerativeAuthoring": { "Enabled": true }, "DataQnA": { "Enabled": true } } } } ...

     🔹 buildVisual: boolean (optional, default=false)

This can be used to enable building visuals with the natural language query for authors in console embedding.

This option is only available for embedded console. To use, calling generateEmbedUrlForRegisteredUser or generateEmbedUrlForRegisteredUserWithIdentity with both GenerativeAuthoring and DataQnA feature enabled in the FeatureConfigurations property. ... "ExperienceConfiguration": { "QuickSightConsole": { "InitialPath": "<INITIAL_PATH>", "FeatureConfigurations": { "GenerativeAuthoring": { "Enabled": true }, "DataQnA": { "Enabled": true } } } } ...

     🔹 buildStory: boolean (optional, default=false)

This can be used to enable building stories from dashboards in console embedding.

This option is only available for embedded console. To use, calling generateEmbedUrlForRegisteredUser or generateEmbedUrlForRegisteredUserWithIdentity with DataStories feature enabled in the FeatureConfigurations property. ... "ExperienceConfiguration": { "QuickSightConsole": { "InitialPath": "<INITIAL_PATH>", "FeatureConfigurations": { "DataStories": { "Enabled": true } } } } ...

🔹 sheetOptions

     🔹 initialSheetId: string (optional)

You can use this when you want to specify the initial sheet of the dashboard, instead of loading the first sheet of the embedded dashboard. You can provide the target sheet id of the dashboard as the value. In case the sheet id value is invalid, the first sheet of the dashboard will be loaded.

     🔹 singleSheet: boolean (optional, default=false)

The singleSheet property can be used to enable or disable sheet tab controls in dashboard embedding.

     🔹 emitSizeChangedEventOnSheetChange: boolean (optional default=false)

You can use this in combination with resizeHeightOnSizeChangedEvent: true frame option, when you want the embedded dashboard height to auto resize based on sheet height, on every sheet change event.

🔹 attributionOptions

     🔹 overlayContent: boolean (optional, default=false)

We add 22 pixels of additional height at the bottom of the layout to provide dedicated space to the "Powered by QuickSight" footer. You can set this property to true to overlay it with your content.

🔹 onMessage: EventListener (optional)

The eventNames the dashboard experience receives

CONTENT_LOADED: Received when the visuals of the Amazon QuickSight dashboard are fully loaded
ERROR_OCCURRED: Received when an error occurred while rendering the visuals of the Amazon QuickSight dashboard. The message contains `errorCode`. The error codes are:
- `Forbidden` -- the URL's authentication code expired
- `Unauthorized` -- the session obtained from the authentication code expired
If you follow the instructions to generate the correct URL, but you still receive these error codes, you need to generate a new URL.
PARAMETERS_CHANGED: Received when the parameters in Amazon QuickSight dashboard changes.
SELECTED_SHEET_CHANGED: Received when the selected sheet in Amazon QuickSight dashboard changes.
SIZE_CHANGED: Received when the size of the Amazon QuickSight dashboard changes.
MODAL_OPENED: Received when a modal opened in Amazon QuickSight dashboard.

 

Actions

 

🔹 setParameters: (parameters: Parameter[]) => Promise<ResponseMessage>;

Use this function to update parameter values. Pass an array as value for multi-value parameters. You can build your own UI to trigger this, so that viewers of the embedded QuickSight session can control it from your app page.

Parameters in an embedded experience session can be set by using the following call: javascript embeddedExperience.setParameters([ { Name: 'country', Values: ['United States'], }, { Name: 'states', Values: ['California', 'Washington'], } ]);

To reset a parameter so that it includes all values, you can pass the string ALL_VALUES. javascript embeddedExperience.setParameters([ { Name: 'states', Values: ['ALL_VALUES'], } ]);

🔹 navigateToDashboard (dashboardId: string, options?: NavigateToDashboardOptions) => Promise<ResponseMessage>

To navigate to a different dashboard, use dashboard.navigateToDashboard(options). The input parameter options should contain the dashboardId that you want to navigate to, and also the parameters for that dashboard, for example: javascript const dashboardId: "37a99f75-8230-4409-ac52-e45c652cc21e"; const options = { parameters: [ { Name: 'country', Values: ['United States'], } ] }; embeddedDashboardExperience.navigateToDashboard(dashboardId, options);

🔹 setSelectedSheetId (sheetId: string) => Promise<ResponseMessage>

If you want to navigate from one sheet to another programmatically, with the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.setSelectedSheetId('<YOUR_SHEET_ID>');

🔹 getSheets () => Promise

If you want to get the current set of sheets, from Amazon QuickSight dashboard in ad-hoc manner, use the below method:

typescript const sheets: Sheet[] = await embeddedDashboardExperience.getSheets();

🔹 getSelectedSheetId () => Promise<string>

If you want to get the current sheet id, from Amazon QuickSight dashboard in ad-hoc manner, use the below method:

typescript const selectedSheetId: string = await embeddedDashboardExperience.getSelectedSheetId();

🔹 getSheetVisuals (sheetId: string) => Promise<Visual[]>

If you want to get the list of the visuals of a sheet from the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.getSheetVisuals('<YOUR_SHEET_ID>');

🔹 getVisualActions (sheetId: string, visualId: string) => Promise<VisualAction[]>

If you want to get the list of actions of a visual from the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.getVisualActions('<YOUR_SHEET_ID>', '<YOUR_VISUAL_ID>');

🔹 addVisualActions (sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>

If you want to add actions to a visual of the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.addVisualActions('<YOUR_SHEET_ID>', '<YOUR_VISUAL_ID>', [ { Name: '<NEW_ACTION_NAME>', CustomActionId: `<NEW_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

This method appends the new actions provided in the request to the existing actions of the visual

🔹 removeVisualActions (sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>

If you want to remove actions from a visual of the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.removeVisualActions('<YOUR_SHEET_ID>', '<YOUR_VISUAL_ID>', [ { Name: '<EXISTING_ACTION_NAME>', CustomActionId: `<EXISTING_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

🔹 setVisualActions (sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>

If you want to set actions of a visual of the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.setVisualActions('<YOUR_SHEET_ID>', '<YOUR_VISUAL_ID>', [ { Name: '<NEW_ACTION_NAME>', CustomActionId: `<NEW_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

This method replaces all existing actions of the visual with the new actions provided in the request

🔹 getFilterGroupsForSheet (sheetId: string) => Promise<FilterGroup[]>

If you want to get the list of filter groups for a sheet from the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.getFilterGroupsForSheet('<YOUR_SHEET_ID>');

🔹 getFilterGroupsForVisual (sheetId: string, visualId: string) => Promise<FilterGroup[]>

If you want to get the list of filter groups for a visual from the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.getFilterGroupsForVisual('<YOUR_SHEET_ID>', '<YOUR_VISUAL_ID>');

🔹 addFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to add filter groups to the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.addFilterGroups([ { FilterGroupId: '<NEW_FILTER_GROUP_ID>', Filters: [ { CategoryFilter: { Column: { ColumnName: '<YOUR_COLUMN_NAME>', DataSetIdentifier: '<YOUR_DATASET_IDENTIFIER>' }, FilterId: '<NEW_FILTER_GROUP_ID>', Configuration: { FilterListConfiguration: { MatchOperator: 'CONTAINS', NullOption: 'NON_NULLS_ONLY', CategoryValues: [ '<A_VALUE_IN_THE_COLUMN>' ] } } } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'SELECTED_VISUALS', VisualIds: [ '<A_VISUAL_ID_IN_DASHBOARD>' ], SheetId: '<YOUR_SHEET_ID>' // Only the selected sheet id is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]);

Filter groups can only be added to the currently selected sheet.

🔹 updateFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to update filter groups of the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.updateFilterGroups([ { FilterGroupId: '<EXISTING_FILTER_GROUP_ID>', Filters: [ { NumericEqualityFilter: { Column: { ColumnName: '<YOUR_COLUMN_NAME>', DataSetIdentifier: '<YOUR_DATASET_IDENTIFIER>' }, FilterId: '<FILTER_GROUP_ID>', MatchOperator: 'EQUALS', NullOption: 'ALL_VALUES', Value: <SOME_NUMERIC_VALUE_IN_THE_COLUMN> } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'ALL_VISUALS', SheetId: '<YOUR_SHEET_ID>' // Only the selected sheet id is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]);

Only the filter groups of the currently selected sheet can be updated.

🔹 removeFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to remove filter groups of the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.removeFilterGroups([ '<EXISTING_FILTER_GROUP_ID>', // ... ]);

Only the filter groups of the currently selected sheet can be removed.

🔹 setTheme (themeArn: string) => Promise<ResponseMessage>

If you want to set theme for the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.setTheme('<YOUR_THEME_ARN>');

Make sure that the user has access to the theme that you want to use. You can make a call to the ListThemes API operation to obtain a list of the themes and theme ARNs that the user has access to.

🔹 setThemeOverride (themeOverride: ThemeConfiguration) => Promise<ResponseMessage>

If you want to override the current theme configuration for the Amazon quicksight dashboard, use the below method:

javascript embeddedDashboardExperience.setThemeOverride({ UIColorPalette: { PrimaryForeground: '#FFCCCC', PrimaryBackground: '#555555', //... }, // ... });

🔹 createSharedView () => Promise<ResponseMessage>

If you want to share the current view, use the below method:

javascript embeddedDashboardExperience.createSharedView();

🔹 initiatePrint () => Promise<ResponseMessage>

This feature allows you to initiate dashboard print, from parent website, without a navbar print icon, in the dashboard. To initiate a dashboard print from parent website, use dashboard.initiatePrint(), for example: javascript embeddedDashboardExperience.initiatePrint();

🔹 getParameters () => Promise

If you want to get the active parameter values, from Amazon QuickSight dashboard in ad-hoc manner, use the below method:

typescript const parameters: Parameter[] = await embeddedDashboardExperience.getParameters();

🔹 undo () => Promise<ResponseMessage>

If you want to unto the changes, use the below method:

javascript embeddedDashboardExperience.undo();

🔹 redo () => Promise<ResponseMessage>

If you want to redo the changes, use the below method:

javascript embeddedDashboardExperience.redo();

🔹 reset () => Promise<ResponseMessage>

If you want to reset the changes, use the below method:

javascript embeddedDashboardExperience.reset();

🔹 toggleBookmarksPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the bookmarks pane, use the below method:

javascript embeddedDashboardExperience.toggleBookmarksPane();

🔹 toggleSchedulingPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the scheduling pane, use the below method:

javascript embeddedDashboardExperience.toggleSchedulingPane();

🔹 toggleThresholdAlertsPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the thresholdAlerts pane, use the below method:

javascript embeddedDashboardExperience.toggleThresholdAlertsPane();

🔹 toggleRecentSnapshotsPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the recentSnapshots pane, use the below method:

javascript embeddedDashboardExperience.toggleRecentSnapshotsPane();

🔹 toggleExecutiveSummaryPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the executive summary pane, use the below method:

javascript embeddedDashboardExperience.toggleExecutiveSummaryPane();

 

Visual Embedding

 

Visual Embedding provides an interactive read-only experience.

For more information, see Embedding Amazon QuickSight Visuals in the Amazon QuickSight User Guide.

 

Getting Started

 

Use embedVisual method to embed a dashboard visual. It returns a promise of VisualExperience type.

```typescript export class VisualExperience extends BaseExperience { setParameters: (parameters: Parameter[]) => Promise>; reset: () => Promise; getActions: () => Promise; addActions: (actions: VisualAction[]) => Promise; setActions: (actions: VisualAction[]) => Promise; removeActions: (actions: VisualAction[]) => Promise; getFilterGroups: () => Promise; addFilterGroups: (filterGroups: FilterGroup[]) => Promise; updateFilterGroups: (filterGroups: FilterGroup[]) => Promise; removeFilterGroups: (filterGroupsOrIds: FilterGroup[] | string[]) => Promise; setTheme: (themeArn: string) => Promise; setThemeOverride: (themeOverride: ThemeConfiguration) => Promise send: (messageEvent: EmbeddingMessageEvent) => Promise>; }

```

 

Example

 

```html <!DOCTYPE html> 

<head>
    <title>Visual Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedVisual = async() => {    
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                container: '#experience-container',
                height: "700px",
                width: "1000px",
                onChange: (changeEvent, metadata) => {
                    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;
                        }
                    }
                },
            };

            const contentOptions = {
                parameters: [
                    {
                        Name: 'country',
                        Values: ['United States'],
                    },
                    {
                        Name: 'states',
                        Values: [
                            'California',
                            'Washington'
                        ]
                    }
                ],
                locale: "en-US",
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'CONTENT_LOADED': {
                            console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Error occured while rendering the experience. Error code:", messageEvent.message.errorCode);
                            break;
                        }
                        case 'PARAMETERS_CHANGED': {
                            console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
                            break;
                        }
                        case 'SIZE_CHANGED': {
                            console.log("Size changed. New dimensions:", messageEvent.message);
                            break;
                        }
                    }
                },
            };
            const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);

            const selectCountryElement = document.getElementById('country');
            selectCountryElement.addEventListener('change', (event) => {
                embeddedVisualExperience.setParameters([
                    {
                        Name: 'country',
                        Values: event.target.value
                    }
                ]);
            });
        };
    </script>
</head>

<body onload="embedVisual()">
    <span>
        <label for="country">Country</label>
        <select id="country" name="country">
            <option value="United States">United States</option>
            <option value="Mexico">Mexico</option>
            <option value="Canada">Canada</option>
        </select>
    </span>
    <div id="experience-container"></div>
</body>

```

 

frameOptions

 

See Common Properties of frameOptions for All Embedding Experiences for url, container, width, height, className, withIframePlaceholder, onChange properties

 

resizeHeightOnSizeChangedEvent: boolean (optional, default: false)

Use resizeHeightOnSizeChangedEvent to allow changing the iframe height when the height of the embedded content changed. json { "height": "300px", "resizeHeightOnSizeChangedEvent": true }

When the resizeHeightOnSizeChangedEvent property is set to true, the value of the height property acts as a loading height.

 

contentOptions

 

See Common Properties of contentOptions for All Embedding Experiences for locale and parameters properties

🔹 parameters: Parameter[] (optional)

It allows you to set initial parameter values for your embedded QuickSight visual. Pass an array as value for multi-value parameters. For more information about parameters in Amazon QuickSight, see https://docs.aws.amazon.com/quicksight/latest/user/parameters-in-quicksight.html

🔹 fitToIframeWidth: boolean (optional, default=true)

If this is set to false, the visual keeps its dimensions as it was designed within its dashboard layout. Otherwise, it adjusts its width to match the iframe's width, while maintaining the original aspect ratio.

The observed behavior of the fitToIframeWidth property varies depending on the layout setting of the underlying dashboard that the visual is a part of:

In Tiled and Free-form layouts, the width is fixed. When the fitToIframeWidth property is toggled, the width changes between fixed width and full iframe width.

In Classic layout, the width is responsive. Since the visual already fits to the width of the iframe, it remains full iframe width even when the fitToIframeWidth property is set to false.

🔹 onMessage: SimpleMessageEventHandler (optional)

The eventNames the visual experience receives

CONTENT_LOADED: Received when the visuals of the Amazon QuickSight dashboard are fully loaded
ERROR_OCCURRED: Received when an error occurred while rendering the Amazon QuickSight visual. The message contains `errorCode`. The error codes are:
- `Forbidden` -- the URL's authentication code expired
- `Unauthorized` -- the session obtained from the authentication code expired
If you follow the instructions to generate the correct URL, but you still receive these error codes, you need to generate a new URL.
PARAMETERS_CHANGED: Received when the parameters in Amazon QuickSight dashboard changes.
SIZE_CHANGED: Received when the size of the Amazon QuickSight dashboard changes.

 

Actions

 

🔹 setParameters: (parameters: Parameter[]) => Promise<ResponseMessage>;

Use this function to update parameter values. Pass an array as value for multi-value parameters. You can build your own UI to trigger this, so that viewers of the embedded QuickSight session can control it from your app page.

Parameters in an embedded experience session can be set by using the following call: javascript embeddedVisualExperience.setParameters([ { Name: 'country', Values: ['United States'], }, { Name: 'states', Values: ['California', 'Washington'], } ]);

To reset a parameter so that it includes all values, you can pass the string ALL_VALUES. javascript embeddedVisualExperience.setParameters([ { Name: 'states', Values: ['ALL_VALUES'], } ]);

🔹 getActions () => Promise<VisualAction[]>

If you want to get the list of actions of the visual, use the below method:

javascript embeddedVisualExperience.getVisualActions();

🔹 addActions (actions: VisualAction[]) => Promise<ResponseMessage>

If you want to add actions to the visual, use the below method:

javascript embeddedVisualExperience.addActions([ { Name: '<NEW_ACTION_NAME>', CustomActionId: `<NEW_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

This method appends the new actions provided in the request to the existing actions of the visual

🔹 removeActions (actions: VisualAction[]) => Promise<ResponseMessage>

If you want to remove actions from the visual, use the below method:

javascript embeddedVisualExperience.removeActions([ { Name: '<EXISTING_ACTION_NAME>', CustomActionId: `<EXISTING_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

🔹 setActions (actions: VisualAction[]) => Promise<ResponseMessage>

If you want to set actions of the visual, use the below method:

javascript embeddedVisualExperience.setActions([ { Name: '<NEW_ACTION_NAME>', CustomActionId: `<NEW_ACTION_ID>`, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]);

This method replaces all existing actions of the visual with the new actions provided in the request

🔹 getFilterGroups () => Promise<VisualAction[]>

If you want to get the list of filter groups for the visual, use the below method:

javascript embeddedVisualExperience.getFilterGroups();

🔹 addFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to add filter groups to the visual, use the below method:

javascript embeddedVisualExperience.addFilterGroups([ { FilterGroupId: '<NEW_FILTER_GROUP_ID>', Filters: [ { NumericRangeFilter: { Column: { ColumnName: '<YOUR_COLUMN_NAME>', DataSetIdentifier: '<YOUR_DATASET_IDENTIFIER>' }, FilterId: '<NEW_FILTER_GROUP_ID>', NullOption: 'ALL_VALUES', IncludeMaximum: true, IncludeMinimum: true, RangeMaximum: { StaticValue: <SOME_NUMERIC_VALUE_IN_THE_COLUMN> }, RangeMinimum: { StaticValue: <SOME_NUMERIC_VALUE_IN_THE_COLUMN> } } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'SELECTED_VISUALS', VisualIds: [ '<THE_EMBEDDED_VISUAL_ID>' // Only the embedded visual's id is supported ], SheetId: '<YOUR_SHEET_ID>' // Only the id of the sheet the embedded visual is on is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]);

🔹 updateFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to update filter groups of the visual, use the below method:

javascript embeddedVisualExperience.updateFilterGroups([ { FilterGroupId: '<EXISTING_FILTER_GROUP_ID>', Filters: [ { RelativeDatesFilter: { Column: { ColumnName: '<YOUR_COLUMN_NAME>', DataSetIdentifier: '<YOUR_DATASET_IDENTIFIER>' }, FilterId: '<FILTER_GROUP_ID>', AnchorDateConfiguration: { AnchorOption: 'NOW' }, TimeGranularity: 'YEAR', RelativeDateType: 'LAST', NullOption: 'NON_NULLS_ONLY', MinimumGranularity: 'DAY', RelativeDateValue: 3 } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'SELECTED_VISUALS', VisualIds: [ '<THE_EMBEDDED_VISUAL_ID>' // Only the embedded visual's id is supported ], SheetId: '<YOUR_SHEET_ID>' // Only the selected sheet id is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]);

🔹 removeFilterGroups (filterGroups: FilterGroup[]) => Promise<ResponseMessage>

If you want to remove filter groups from the visual, use the below method:

javascript embeddedVisualExperience.removeFilterGroups([ '<EXISTING_FILTER_GROUP_ID>', // ... ]);

🔹 setTheme (themeArn: string) => Promise<ResponseMessage>

If you want to set theme for the visual, use the below method:

javascript embeddedVisualExperience.setTheme('<YOUR_THEME_ARN>');

Make sure that the user has access to the theme that you want to use. You can make a call to the ListThemes API operation to obtain a list of the themes and theme ARNs that the user has access to.

🔹 setThemeOverride (themeOverride: ThemeConfiguration) => Promise<ResponseMessage>

If you want to override the current theme configuration for the visual, use the below method:

javascript embeddedVisualExperience.setThemeOverride({ UIColorPalette: { PrimaryForeground: '#FFCCCC', PrimaryBackground: '#555555', //... }, // ... });

🔹 reset () => Promise<ResponseMessage>

If you want to reset the changes, use the below method:

javascript embeddedVisualExperience.reset();

 

Console Embedding

 

Console embedding provides the QuickSight authoring experience.

For more information, see Embedding the Amazon QuickSight Console

Embedded authoring experience allows the user to create QuickSight assets, just like they can in the AWS console for QuickSight. Exactly what the user can do in the console is controlled by a custom permission profile. The profile can remove abilities such as creating or updating data sources and datasets. You can set also the default visual type. Embedded consoles currently don't support screen scaling in formatting options.

 

Getting Started

 

Use embedConsole method to embed a QuickSight console. It returns a promise of ConsoleExperience type.

typescript export class ConsoleExperience extends BaseExperience<ConsoleContentOptions, InternalConsoleExperience, IConsoleExperience, TransformedConsoleContentOptions, ConsoleExperienceFrame> { send: <EMV extends EventMessageValues = EventMessageValues>(messageEvent: TargetedMessageEvent) => Promise<ResponseMessage<EMV>>; }

 

Example

 

```html <!DOCTYPE html> 

<head>
    <title>Console Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedConsole = async() => {
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                container: '#experience-container',
                height: "700px",
                width: "1000px",
                onChange: (changeEvent, metadata) => {
                    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;
                        }
                    }
                },
            };

            const contentOptions = {
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'ERROR_OCCURRED': {
                            console.log("Do something when the embedded experience fails loading.");
                            break;
                        }
                    }
                }
            };
            const embeddedConsoleExperience = await embeddingContext.embedConsole(frameOptions, contentOptions);
        };
    </script>
</head>

<body onload="embedConsole()">
    <div id="experience-container"></div>
</body>

```

 

frameOptions

 

See Common Properties of frameOptions for All Embedding Experiences for url, container, width, height, className, withIframePlaceholder, onChange properties

 

contentOptions

 

See Common Properties of contentOptions for All Embedding Experiences for locale property

🔹 onMessage: SimpleMessageEventHandler (optional)

The eventNames the console experience receives

ERROR_OCCURRED: Received when an error occurred while rendering the console. The message contains `errorCode`. The error codes are:
- `Forbidden` -- the URL's authentication code expired
- `Unauthorized` -- the session obtained from the authentication code expired
If you follow the instructions to generate the correct URL, but you still receive these error codes, you need to generate a new URL.
PAGE_NAVIGATION: Received when the embedded instance navigates to a new route. The message contains `pageType`, which corresponds to the new route.

 

Actions

 

🔹 createSharedView () => Promise<ResponseMessage>

If you want to share the current view, use the below method:

javascript embeddedConsoleExperience.createSharedView();

This method can only be called from the DASHBOARD route.

🔹 toggleThresholdAlertsPane () => Promise<ResponseMessage>

If you want to toggle the threshold alerts pane, use the below method:

javascript embeddedConsoleExperience.toggleThresholdAlertsPane();

This method can only be called from the DASHBOARD route.

🔹 toggleSchedulingPane () => Promise<ResponseMessage>

If you want to toggle the scheduling pane, use the below method:

javascript embeddedConsoleExperience.toggleSchedulingPane();

This method can only be called from the DASHBOARD route.

🔹 toggleRecentSnapshotsPane () => Promise<ResponseMessage>

If you want to toggle the recent snapshots pane, use the below method:

javascript embeddedConsoleExperience.toggleRecentSnapshotsPane();

This method can only be called from the DASHBOARD route.

🔹 toggleExecutiveSummaryPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the executive summary pane, use the below method:

javascript embeddedConsoleExperience.toggleExecutiveSummaryPane();

This method can only be called from the DASHBOARD route.

🔹 openDataQnAPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the GenBI data QnA pane, use the below method:

javascript embeddedConsoleExperience.openDataQnAPane();

🔹 openBuildVisualPane () => Promise<ResponseMessage>

If you want to toggle the visibility state of the GenBI build visual pane, use the below method:

javascript embeddedConsoleExperience.openBuildVisualPane();

🔹 buildStoryFromDashboard () => Promise<ResponseMessage>

If you want to build story from dashboard, use the below method:

javascript embeddedConsoleExperience.buildStoryFromDashboard();

This method can only be called from the DASHBOARD route.

 

QSearchBar Embedding

 

QSearchBar Embedding provides the QuickSight Q search bar experience.

For more information, see Embedding Amazon QuickSight Q Search Bar in the Amazon QuickSight User Guide.

 

Getting Started

 

Use embedQSearchBar method to embed a Q search bar. It returns a promise of QSearchExperience type.

typescript export class QSearchExperience extends BaseExperience<QSearchContentOptions, InternalQSearchExperience, IQSearchExperience, TransformedQSearchContentOptions, QSearchExperienceFrame> { close: () => Promise<SuccessResponseMessage | ErrorResponseMessage>; setQuestion: (question: string) => Promise<SuccessResponseMessage | ErrorResponseMessage>; }

 

Example

 

```html <!DOCTYPE html> 

<head>
    <title>Q Search Bar Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedQSearchBar = async() => {    
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                container: '#experience-container',
                height: "700px",
                width: "1000px",
                onChange: (changeEvent, metadata) => {
                    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;
                        }
                    }
                },
            };

            const contentOptions = {
                hideTopicName: false, 
                theme: '<YOUR_THEME_ID>',
                allowTopicSelection: true,
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'Q_SEARCH_OPENED': {
                            console.log("Do something when Q Search content expanded");
                            break;
                        }
                        case 'Q_SEARCH_CLOSED': {
                            console.log("Do something when Q Search content collapsed");
                            break;
                        }
                        case 'Q_SEARCH_SIZE_CHANGED': {
                            console.log("Do something when Q Search size changed");
                            break;
                        }
                        case 'CONTENT_LOADED': {
                            console.log("Do something when the Q Search is loaded.");
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Do something when the Q Search fails loading.");
                            break;
                        }
                    }
                }
            };
            const embeddedQSearchBarExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
        };
    </script>
</head>

<body onload="embedQSearchBar()">
    <div id="experience-container"></div>
</body>

```

 

frameOptions

 

See Common Properties of frameOptions for All Embedding Experiences for url, container, width, height, className, withIframePlaceholder, onChange properties

Note for Q search bar embedding, you'll likely want to use className to give the iframe a position: absolute so that when expanded it does not shift the contents of your application. If elements in your application are appearing in front of the Q search bar, you can provide the iframe with a higher z-index as well.

 

contentOptions

 

🔹 hideTopicName: boolean (optional, default=false)

The hideTopicName property can be used to customize whether or not the QuickSight Q Topic name appears in the embedded search bar.

🔹 theme: string (optional)

The theme property can be used to set a content theme for the embedded search bar. Note that the embedded QuickSight user, or the group or namespace they belong to, must have permissions on this theme. The default theme is the default QuickSight theme seen in the console application.

🔹 allowTopicSelection: boolean (optional)

The allowTopicSelection property can be used to customize whether or not the embedded user can change the selected topic for the Q search bar. Note that this can only be set to false if the initialTopicId was specified in the embedding API; for more information, see QuickSight Embedding APIs. The default value is true.

🔹 onMessage: SimpleMessageEventHandler (optional)

The eventNames the Q search bar experience receives

Q_SEARCH_CLOSED: Received when the Q search collapsed
Q_SEARCH_ENTERED_FULLSCREEN: Received when the Q search entered fullscreen
Q_SEARCH_EXITED_FULLSCREEN: Received when the Q search exited fullscreen
Q_SEARCH_OPENED: Received when the Q search expanded
Q_SEARCH_SIZE_CHANGED: Received when the size of the Q search changed

 

Actions

 

🔹 setQuestion

This method sends a question to the Q search bar and immediately queries the question. It also automatically opens the Q popover.

javascript embeddedQBarExperience.setQuestion('show me monthly revenue');

🔹 close

This method closes the Q popover, returns the iframe to the original Q search bar size.

javascript embeddedQBarExperience.close();

 

Generative Q&A Embedding

 

Generative Q&A Embedding provides the Amazon Q in QuickSight Generative Q&A experience.

For more information, see Embed Generative Q&A Experience in the Amazon QuickSight User Guide.

 

Getting Started

 

Use embedGenerativeQnA method to embed the Generative Q&A experience. It returns a promise of GenerativeQnAExperience type.

typescript export class GenerativeQnAExperience extends BaseExperience<GenerativeQnAContentOptions, InternalGenerativeQnAExperience, IGenerativeQnAExperience, TransformedGenerativeQnAContentOptions, GenerativeQnAExperienceFrame> { close: () => Promise<SuccessResponseMessage | ErrorResponseMessage>; setQuestion: (question: string) => Promise<SuccessResponseMessage | ErrorResponseMessage>; }

 

Example

 

```html <!DOCTYPE html> 

<head>
    <title>Generative Q&A Embedding Example</title>
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.1/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        const embedGenerativeQnA = async() => {    
            const {
                createEmbeddingContext,
            } = QuickSightEmbedding;

            const embeddingContext = await createEmbeddingContext({
                onChange: (changeEvent, metadata) => {
                    console.log('Context received a change', changeEvent, metadata);
                },
            });

            const frameOptions = {
                url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                container: '#experience-container',
                height: "700px",
                width: "1000px",
                onChange: (changeEvent, metadata) => {
                    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;
                        }
                    }
                },
            };

            const contentOptions = {
                panelOptions: {
                    panelType: 'FULL',
                    title: 'Custom Title',
                    showQIcon: false,
                },
                // Uncomment below, if you prefer an experience closer to embedQSearchBar instead of a full panel.
                /*
                panelOptions: {
                    panelType: 'SEARCH_BAR',
                    focusedHeight: '250px',
                    expandedHeight: '500px',
                },
                */
                showTopicName: false,
                showPinboard: false,
                allowTopicSelection: false,
                allowFullscreen: false,
                searchPlaceholderText: 'Custom Search Placeholder',
                themeOptions: {
                    themeArn: 'arn:aws:quicksight:<Region>:<AWS-Account-ID>:theme/<Theme-ID>'
                }
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'Q_SEARCH_OPENED': {
                            console.log("Do something when SEARCH_BAR type panel is expanded");
                            break;
                        }
                        case 'Q_SEARCH_FOCUSED': {
                            console.log("Do something when SEARCH_BAR type panel is focused");
                            break;
                        }
                        case 'Q_SEARCH_CLOSED': {
                            console.log("Do something when SEARCH_BAR type panel is collapsed");
                            break;
                        }
                        case 'Q_PANEL_ENTERED_FULLSCREEN': {
                            console.log("Do something when the experience enters full screen mode");
                            break;
                        }
                        case 'Q_PANEL_EXITED_FULLSCREEN': {
                            console.log("Do something when the experience exits full screen mode");
                            break;
                        }
                        case 'CONTENT_LOADED': {
                            console.log("Do something when the experience is loaded");
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Do something when an error occurs.");
                            break;
                        }
                    }
                }
            };
            const embeddedGenerativeQnExperience = await embeddingContext.embedGenerativeQnA(frameOptions, contentOptions);
        };
    </script>
</head>

<body onload="embedGenerativeQnA()">
    <div id="experience-container"></div>
</body>

```

 

frameOptions

 

See Common Properties of frameOptions for All Embedding Experiences for url, container, width, height, className, withIframePlaceholder, onChange properties

Note that while using SEARCH_BAR panel type, you'll likely want to use className to give the iframe a position: absolute so that when expanded it does not shift the contents of your application. If elements in your application are appearing in front of the search bar, you can provide the iframe with a higher z-index as well.

 

contentOptions

 

🔹 showTopicName: boolean (optional, default=true)

The showTopicName property can be used to customize whether or not the QuickSight Q Topic name appears in the experience.

🔹 showPinboard: boolean (optional, default=true)

The showPinboard property can be used to customize whether or not pinboard button is shown. For more information, see Pinning visuals in Amazon QuickSight Q. This property has no effect for anonymous user embedding, pinboard is usable by registered users only.

🔹 showSearchBar: boolean (optional, default=true)

The showSearchBar property can be used to customize whether or not search bar is shown in the answer panel.

🔹 showInterpretedAs: boolean (optional, default=true)

The showInterpretedAs property can be used to customize whether or not interpreted statement is shown in the answer panel.

🔹 showFeedback: boolean (optional, default=true)

The showFeedback property can be used to customize whether or not feedback button is shown in the answer panel.

🔹 showGeneratedNarrative: boolean (optional, default=true)

The showGeneratedNarrative property can be used to customize whether or not generated narrative is shown in the answer panel.

🔹 showDidYouMean: boolean (optional, default=true)

The showDidYouMean property can be used to customize whether or not alternative questions (if any) are shown in the answer panel.

🔹 showComplementaryVisuals: boolean (optional, default=true)

The showComplementaryVisuals property can be used to customize whether or not complementary visuals are shown in the answer panel.

🔹 showQBusinessInsights: boolean (optional, default=true)

The showQBusinessInsights property can be used to customize whether or not additional insights from Q business or the notification for enabling Q business insights are shown in the answer panel.

🔹 showSeeWhy: boolean (optional, default=true)

The showSeeWhy property can be used to customize whether or not see why button is shown in the answer panel.

🔹 allowReturn: boolean (optional, default=true)

The allowReturn property can be used to customize whether or not the back button to exit from the answer panel will be shown.

🔹 initialQuestionId: string (optional, default='')

The initialQuestionId property can be used to query existing question and display the answer panel directly.

🔹 initialAnswerId: string (optional, default='')

The initialAnswerId property can be used to query existing answer of verified question and display the answer panel directly.

🔹 allowTopicSelection: boolean (optional, default=true)

The allowTopicSelection property can be used to customize whether or not the embedded user can change the selected topic. Note that this can only be set to false if the initialTopicId was specified in the embedding API; for more information, see QuickSight Embedding APIs.

🔹 allowFullscreen: boolean (optional, default=true)

The allowFullscreen property can be used to customize whether or the experience is allowed to enter into full-screen mode.

🔹 searchPlaceholderText: string (optional)

The searchPlaceholderText property can be used to customize the placeholder text shown in the search text input field, when there is not a question being asked. Maximum 200 characters are allowed.

🔹 panelOptions: (optional)

The panelOptions property can be used to customize additional properties for full panel and search bar panel types.

     🔹 panelType: string

The panelType property can be used to choose between full panel and search bar panel types. If panelOptions object is provided, then this property must also be set to either FULL or SEARCH_BAR.

     🔹 title: string (optional)

The title property can be used to customize the panel title. Only valid for FULL panel type. Maximum 200 characters are allowed.

     🔹 showQIcon: boolean (optional, default=true)

The showQIcon property can be used to customize whether Q icon will be shown. Only valid for FULL panel type.

     🔹 focusedHeight: string (optional)

The focusedHeight property can be used to customize the height when the search bar is focused. This height is used when question suggestions are shown, or topic selection dropdown is opened. Only valid for SEARCH_BAR panel type.

     🔹 expandedHeight: boolean (optional, default=true)

The focusedHeight property can be used to customize the height when the search bar is expanded. This height is used when user gets an answer, or opens the pinboard. Only valid for SEARCH_BAR panel type.

🔹 themeOptions

     🔹 themeArn: string (optional)

The themeArn property can be used to to specify the theme the experience should load with.

🔹 onMessage: SimpleMessageEventHandler (optional)

The eventNames the Generative Q&A experience receives

Q_SEARCH_OPENED: Received when SEARCH_BAR type panel is expanded
Q_SEARCH_FOCUSED: Received when SEARCH_BAR type panel is focused
Q_SEARCH_CLOSED: Received when SEARCH_BAR type panel is collapsed
Q_PANEL_ENTERED_FULLSCREEN: Received when the experience enters full screen mode
Q_PANEL_EXITED_FULLSCREEN: Received when the experience exits full screen mode
CONTENT_LOADED: Received when the experience is loaded
ERROR_OCCURRED: Received when an error occurs. The message contains `errorCode`. The error codes are:
- Q_NO_TOPICS_AVAILABLE: User has no topic created or shared with them they can query with. There will not be any content rendered once this happens.
- Q_INITIAL_TOPIC_NOT_FOUND: The topic specified by InitialTopicId is not found.
- Q_TOPIC_EXPERIENCE_MISMATCH: Some or all topics do not have the expected user experience version.
- Q_TOPIC_NOT_QUERYABLE: Some or all topics are not queryable.

 

Actions

 

🔹 setQuestion

This method sends a question to the experience and immediately queries that question. It also triggers the search bar to open, if using that panel type.

javascript embeddedGenerativeQnExperience.setQuestion('show me monthly revenue');

🔹 close

This method closes the search bar, returns the iframe to the original search bar size. It has no effect for FULL panel type.

javascript embeddedGenerativeQnExperience.close();

 

Troubleshooting

 
1. Make sure the URL you provide in options is not encoded. You should avoid using an encoded URL because it breaks the authcode in the URL by changing it. Also, check that the URL sent in the response from the server side is not encoded. 2. The URL only works if it used with the authcode it came with. The URL and authcode need to be used together. They expire after five minutes, so it's worth checking that you're not troubleshooting an expired combination of URL and authcode. 2. Some browsers (e.g. mobile safari) have default setting to "Always Block Cookies". Change the setting to either "Allow form Websites I Visit" or "Always Allow". 3. Q search bar troubleshooting: * Shifting page contents in unwanted way - try giving the embedding container and the iframe class a style with position absolute. * Clicking on some parts of your application does not close the Q search bar - listen to the Q_SEARCH_OPENED and Q_SEARCH_CLOSED messages to create a backdrop/element on the page that's always clickable so that the document listener can properly close the search bar.

 

License

 
Copyright 2025 Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0

Owner

  • Name: Amazon Web Services - Labs
  • Login: awslabs
  • Kind: organization
  • Location: Seattle, WA

AWS Labs

GitHub Events

Total
  • Issues event: 18
  • Watch event: 21
  • Member event: 1
  • Issue comment event: 18
  • Push event: 3
  • Pull request event: 2
  • Fork event: 4
Last Year
  • Issues event: 18
  • Watch event: 21
  • Member event: 1
  • Issue comment event: 18
  • Push event: 3
  • Pull request event: 2
  • Fork event: 4

Committers

Last synced: about 1 year ago

All Time
  • Total Commits: 122
  • Total Committers: 28
  • Avg Commits per committer: 4.357
  • Development Distribution Score (DDS): 0.803
Past Year
  • Commits: 21
  • Committers: 6
  • Avg Commits per committer: 3.5
  • Development Distribution Score (DDS): 0.667
Top Committers
Name Email Commits
Brian Welkin b****n@a****m 24
Joy Arun Raj Michael Arockiasamy a****y@a****m 16
Dhairya d****y@a****m 14
Xiangnan Chen c****a@a****m 13
Elton Chan e****n@a****m 7
Raymond Huang h****o@a****m 5
dependabot[bot] 4****] 5
Rob Foley f****b@a****m 4
Art Chen b****c@a****m 4
Mengshi Liang m****l@a****m 4
Michael "Gilli" Gilliland m****d@a****o 3
Jacob Peddicord j****d 2
Haolin h****n@a****m 2
Jon Rinciari r****r@a****m 2
Michael Kuehn k****c@a****m 2
Sounak Mukhopadhyay m****k@a****m 2
Vijay Chaudhari v****a@a****m 2
sheraz-sarwar s****6@g****m 1
Jian Chen j****z@a****m 1
Joey Ashcroft j****r@a****m 1
Kavya reddy Patnam k****m@a****m 1
Kong k****n@a****m 1
Rom s****m@a****m 1
Zhengyi Zhang z****i@a****m 1
Oscar Daniel Villarraga d****a@g****m 1
Manit Singh Kalsi m****k@a****m 1
Igal Mizrahi i****m@a****m 1
Dan c****b@g****m 1
Committer Domains (Top 20 + Academic)
amazon.com: 22 gsoftcolombia.com: 1 arcadia.io: 1

Issues and Pull Requests

Last synced: 10 months ago

All Time
  • Total issues: 168
  • Total pull requests: 19
  • Average time to close issues: 7 months
  • Average time to close pull requests: 6 months
  • Total issue authors: 144
  • Total pull request authors: 9
  • Average comments per issue: 2.88
  • Average comments per pull request: 0.68
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 7
Past Year
  • Issues: 20
  • Pull requests: 5
  • Average time to close issues: 20 days
  • Average time to close pull requests: N/A
  • Issue authors: 19
  • Pull request authors: 3
  • Average comments per issue: 0.45
  • Average comments per pull request: 0.4
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • jeroenmeulendijks (4)
  • d-koppenhagen (4)
  • thecodersourabh (3)
  • grahamcarlyle (3)
  • syedabidali (3)
  • brianwyka (2)
  • cBevilaqua (2)
  • bclements (2)
  • WindRider7 (2)
  • adamduren (2)
  • adamcbuckley (2)
  • skined90 (2)
  • nbaltatzis (2)
  • CoryBond (2)
  • jcardus (2)
Pull Request Authors
  • dependabot[bot] (7)
  • manueltarouca (2)
  • vittorio-nardone (2)
  • hirouniverse (2)
  • taitai9847 (2)
  • AngeloAnolin (1)
  • ChristopherHackett (1)
  • AlejoEli (1)
  • msc117 (1)
Top Labels
Issue Labels
enhancement (20) question (1)
Pull Request Labels
dependencies (7)

Packages

  • Total packages: 3
  • Total downloads:
    • npm 428,268 last-month
  • Total docker downloads: 212
  • Total dependent packages: 5
    (may contain duplicates)
  • Total dependent repositories: 30
    (may contain duplicates)
  • Total versions: 47
  • Total maintainers: 15
npmjs.org: amazon-quicksight-embedding-sdk

JS SDK for embedding Amazon QuickSight

  • Versions: 43
  • Dependent Packages: 5
  • Dependent Repositories: 30
  • Downloads: 427,347 Last month
  • Docker Downloads: 212
Rankings
Downloads: 0.5%
Docker downloads count: 1.2%
Dependent repos count: 2.3%
Average: 3.1%
Forks count: 4.4%
Stargazers count: 4.5%
Dependent packages count: 5.9%
Maintainers (13)
amzn-oss cxiangna apatlori bwelkin rinciar msounak igalm-amazon pcheliy51 kuehnmic huaraymo jaypatel1111 mengshil haoliwan
Last synced: 10 months ago
npmjs.org: @phemium-costaisa/amazon-quicksight-embedding-sdk

JS SDK for embedding Amazon QuickSight

  • Versions: 1
  • Dependent Packages: 0
  • Dependent Repositories: 0
  • Downloads: 8 Last month
Rankings
Forks count: 4.5%
Stargazers count: 4.6%
Average: 24.5%
Dependent repos count: 36.5%
Dependent packages count: 52.5%
Maintainers (1)
phemiumcostaisa
Last synced: 10 months ago
npmjs.org: @smuthyam/amazon-quicksight-embedding-sdk

JS SDK for embedding Amazon QuickSight

  • Versions: 3
  • Dependent Packages: 0
  • Dependent Repositories: 0
  • Downloads: 913 Last month
Rankings
Dependent repos count: 33.2%
Average: 40.2%
Dependent packages count: 47.2%
Maintainers (1)
srinivas.muthyam
Last synced: 10 months ago

Dependencies

package-lock.json npm
  • 512 dependencies
package.json npm
  • @babel/cli ^7.15.7 development
  • @babel/core ^7.15.5 development
  • @babel/preset-env ^7.15.6 development
  • @babel/preset-flow ^7.14.5 development
  • @babel/register ^7.15.3 development
  • babel-eslint ^10.1.0 development
  • chai ^4.3.4 development
  • eslint ^7.30.0 development
  • eslint-plugin-flowtype 5.8.0 development
  • expose-loader ^3.0.0 development
  • flow-bin 0.145.0 development
  • jsdom ^15.2.1 development
  • jsdom-global ^3.0.2 development
  • mocha ^9.1.3 development
  • sinon ^11.1.1 development
  • webpack ^5.37.1 development
  • webpack-cli ^4.7.2 development
  • webpack-merge ^5.8.0 development