UNPKG

embed-dossier-mstr-react

Version:

This is a React component that allows you to embed a MicroStrategy Dossier in your React application.

1,207 lines (1,187 loc) 41.2 kB
import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import { ReactNode } from 'react'; type EVENT_TYPE = { ON_COMPONENT_SELECTION_CHANGED: "onComponentSelectionChanged"; ON_DOSSIER_AUTHORING_CLOSED: "onDossierAuthoringClosed"; ON_DOSSIER_AUTHORING_SAVED: "onDossierAuthoringSaved"; ON_DOSSIER_INSTANCE_CHANGED: "onDossierInstanceChanged"; ON_DOSSIER_INSTANCE_ID_CHANGE: "onDossierInstanceIDChange"; ON_ERROR: "onError"; ON_FILTER_UPDATED: "onFilterUpdated"; ON_GRAPHICS_SELECTED: "onGraphicsSelected"; ON_LAYOUT_CHANGED: "onLayoutChanged"; ON_LIBRARY_ITEM_SELECTED: "onLibraryItemSelected"; ON_LIBRARY_ITEM_SELECTION_CLEARED: "onLibraryItemSelectionCleared"; ON_LIBRARY_MENU_SELECTED: "onLibraryMenuSelected"; ON_PAGE_LOADED: "onPageLoaded"; ON_PAGE_RENDER_FINISHED: "onPageRenderFinished"; ON_PAGE_SWITCHED: "onPageSwitched"; ON_PANEL_SWITCHED: "onPanelSwitched"; ON_PROMPT_ANSWERED: "onPromptAnswered"; ON_PROMPT_LOADED: "onPromptLoaded"; ON_SESSION_ERROR: "onSessionError"; ON_VISUALIZATION_RESIZED: "onVisualizationResized"; ON_VIZ_ELEMENT_CHANGED: "onVisualizationElementsChanged"; ON_VIZ_SELECTION_CHANGED: "onVizSelectionChanged"; }; /** * This file contains the types for the filter that we use for applying filters to the dossier. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/filters */ interface GeneralFilterItems { value: string; name: string; selected: boolean; } interface QualType { type: "highest" | "lowest" | "highest percent" | "lowest percent"; } interface FilterSelection { value?: string; name?: string; } interface FilterTypeInfo { items: GeneralFilterItems[]; supportMultiple: boolean; } interface FilterTypeInfoSlider extends FilterTypeInfo { indexInfo: { itemsLength: number; from: number; to: number; }; } interface FilterTypeInfoCalendar { from: string; to: string; maxDate: string; minDate: string; } interface FilterTypeInfoMetricQualByValue { operator: "equals" | "not equals" | "greater" | "greater equal" | "less" | "less equal" | "between" | "not between" | "in" | "not in" | "is null" | "is not null"; from?: string; to?: string; value?: string; } interface FilterTypeInfoMetricQualByRank { qualType: QualType; value: string; } interface FilterTypeInfoMetricSliderByValue { indexInfo: { itemsLength: number; itemsStep: number; from: number; to: number; }; min: number; max: number; from: number; to: number; } interface FilterTypeInfoMetricSliderByRank { indexInfo: { itemsLength: number; itemsStep: number; value: number; }; min: number; max: number; qualType: QualType; value: number; } interface FilterListType { filterKey: string; filterName: string; filterType: "attributeSelector" | "attributeSearchSelector"; filterDetail: FilterTypeInfo | FilterTypeInfoSlider | FilterTypeInfoCalendar | FilterTypeInfoMetricQualByValue | FilterTypeInfoMetricQualByRank | FilterTypeInfoMetricSliderByValue | FilterTypeInfoMetricSliderByRank; isExclude: boolean; } interface SelectionFilter { id: string; name: string; } interface FilterCreation { key: string; name: string; selections: SelectionFilter[]; } interface FilterJson { filterInfo: { key: string; }; selections?: FilterSelection[] | FilterSelection | number | number[]; date?: { from: string; to: string; }; exp?: { operator: "equals" | "not equals" | "greater" | "greater equal" | "less" | "less equal" | "between" | "not between" | "in" | "not in" | "is null" | "is not null"; firstValue?: string; lastValue?: string; qualType?: "highest" | "lowest" | "highest percent" | "lowest percent"; range?: number[]; value?: number; }; holdSubmit?: boolean; } interface DockedCommentAndFilter { dockedPosition?: "left" | "right"; canClose?: boolean; dockChangeable?: boolean; isDocked?: boolean; } interface DockedTheme extends DockedCommentAndFilter { theme?: "light" | "dark"; } interface NavigationBar { enabled?: boolean; gotoLibrary?: boolean; title?: boolean; toc?: boolean; reset?: boolean; reprompt?: boolean; share?: boolean; comment?: boolean; notification?: boolean; filter?: boolean; options?: boolean; bookmark?: boolean; undoRedo?: boolean; edit?: boolean; } interface CustomUi { library?: { navigationBar?: { enabled?: boolean; sortAndFilter?: boolean; title?: boolean; searchBar?: boolean; createNew?: { enabled?: boolean; }; notification?: boolean; multiSelect?: { enabled?: boolean; }; account?: { enabled?: boolean; }; user?: { enabled?: boolean; }; }; sidebar?: { enabled?: boolean; show?: boolean; }; }; reportConsumption?: { enabled?: boolean; goToLibrary?: boolean; pageBy?: boolean; reset?: boolean; reExecute?: boolean; filter?: boolean; rePrompt?: boolean; account?: { enabled?: boolean; }; share?: { enabled?: boolean; }; }; dossierConsumption?: { navigationBar?: { enabled?: boolean; goToLibrary?: boolean; title?: boolean; toc?: boolean; reset?: boolean; reprompt?: boolean; share?: boolean; comment?: boolean; notification?: boolean; filter?: boolean; options?: boolean; bookmark?: boolean; undoRedo?: boolean; search?: boolean; edit?: boolean; dockedToc?: { isOpen?: boolean; isDocked?: boolean; }; }; }; botConsumption?: { aiBot?: { titleBar?: { enabled?: boolean; }; snapshotPanel?: { enabled?: boolean; }; topicsPanel?: { enabled?: boolean; }; chatPanel?: { showClearHistory?: boolean; showGiveTopics?: boolean; showWelcomePageBotImg?: boolean; showCopyBtn?: boolean; shouldLoadHistory?: boolean; shouldSaveToHistory?: boolean; }; }; navigationBar?: { enabled?: boolean; }; }; dossierAuthoring?: { toolbar?: { tableOfContents?: { visible?: boolean; }; undo?: { visible?: boolean; }; redo?: { visible?: boolean; }; refresh?: { visible?: boolean; }; save?: { visible?: boolean; }; more?: { visible?: boolean; }; nlp?: { visible?: boolean; }; freeformLayout?: { visible?: boolean; }; pauseDataRetrieval?: { visible?: boolean; }; dividerLeft?: { visible?: boolean; }; dividerRight?: { visible?: boolean; }; addData?: { visible?: boolean; }; addChapter?: { visible?: boolean; }; addPage?: { visible?: boolean; }; insertVisualization?: { visible?: boolean; }; insertFilter?: { visible?: boolean; }; insertText?: { visible?: boolean; }; insertImage?: { visible?: boolean; }; insertHtml?: { visible?: boolean; }; insertShape?: { visible?: boolean; }; insertStack?: { visible?: boolean; }; insertInfoWindow?: { visible?: boolean; }; responsiveViewEditor?: { visible?: boolean; }; responsivePreview?: { visible?: boolean; }; }; menubar?: { library?: { visible?: boolean; }; }; }; } interface OptionsFeature { enabled?: boolean; help?: boolean; logout?: boolean; manage?: boolean; showLibraries?: boolean; showTutorials?: boolean; preferences?: boolean; } interface ShareFeature { enabled?: boolean; invite?: boolean; link?: boolean; email?: boolean; export?: boolean; download?: boolean; shareDossier?: boolean; subscribe?: boolean; } interface CurrentPage { key: string; targetGroup?: { id?: string; name?: string; }; } interface PageInfo { applicationId?: string; projectId?: string; objectId?: string; pageKey?: string; isAuthoring?: boolean; } interface ErrorHandlerInterface { title: string; message: string; desc: string; statusCode: string | number; errorCode: string | number; isServerErrorCode: boolean; ticketId: string; } type EventTypes = EVENT_TYPE[keyof EVENT_TYPE]; type EventHandler = () => void; interface EventHandlers { onComponentSelectionChanged?: EventHandler; onDossierAuthoringClosed?: EventHandler; onDossierAuthoringSaved?: EventHandler; onDossierInstanceChanged?: EventHandler; onDossierInstanceIDChange?: EventHandler; onError?: EventHandler; onFilterUpdated?: EventHandler; onGraphicsSelected?: EventHandler; onLayoutChanged?: EventHandler; onLibraryItemSelected?: EventHandler; onLibraryItemSelectionCleared?: EventHandler; onLibraryMenuSelected?: EventHandler; onPageLoaded?: EventHandler; onPageRenderFinished?: EventHandler; onPageSwitched?: EventHandler; onPanelSwitched?: EventHandler; onPromptAnswered?: EventHandler; onPromptLoaded?: EventHandler; onSessionError?: EventHandler; onVisualizationResized?: EventHandler; onVisualizationElementsChanged?: EventHandler; onVizSelectionChanged?: EventHandler; } interface TableOfContents { chapters: DossierChapter[]; } interface DossierPage { name: string; nodeKey: string; } interface DossierChapter { name: string; nodeKey: string; pages: DossierPage[]; getNextChapter: () => any; getPrevChapter: () => any; getFirstPage: () => any; getLastPage: () => any; } interface DossierConsumptionSettings { componentSelectionMode: "noSelection" | "singleSelection" | "multipleSelection"; disableManipulationsAutoSaving?: boolean; enablePageSelection?: boolean; disableGroupSelection?: boolean; } interface BotConsumptionSettings { disableManipulationsAutoSaving?: boolean; } interface Settings { dossierConsumption?: DossierConsumptionSettings; botConsumption?: BotConsumptionSettings; } /** * MicroStrategy SDK * * This global declare for MicroStrategy SDK is used to declare the global * window object for MicroStrategy SDK. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs * */ declare global { interface Window { microstrategy: MicroStrategySDK; } } /** * Interface for MicroStrategy SDK * * These are some interfaces that we need for embedding dossier. * Interfaces that we create are based on the MicroStrategy SDK documentation and also the implementation on the MicroStrategy Embedding SDK Playground. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/playground/ * */ interface MicroStrategySDK { dossier: { create: (config: MicroStrategyDossierConfig) => Promise<MicroStrategyDossier>; destroy: () => void; CustomAuthenticationType: { AUTH_TOKEN: string; IDENTITY_TOKEN: string; }; EventType: EVENT_TYPE; }; auth: { oidcLogin: (serverUrl: string) => Promise<string>; samlLogin: (serverUrl: string) => Promise<string>; }; embedding: { featureFlags: Record<string, unknown> | unknown; }; embeddingContexts: { embedLibraryPage: (config: EmbedLibraryPageConfig) => Promise<EmbedLibraryPage>; embedDossierConsumptionPage: (config: EmbedDossierConsumptionPageConfig) => Promise<EmbedDossierConsumptionPage>; embedBotConsumptionPage: (config: EmbedBotConsumptionPageConfig) => Promise<EmbedBotConsumptionPage>; embedReportPage: (config: EmbedReportPageConfig) => Promise<EmbedReportPage>; }; } /** * Interfaces for Embedding types of Embedded Dashboard and other Embedding Contexts * * When this package created, we only need to create the interface for MicroStrategy Dossier. * But when we want to create the interface for other Embedding Contexts, we need to create the interface for them. * * Each Embedding Context has its own properties and methods. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs * */ /** * Interface for MicroStrategy Dossier Config Properties * * This interface is used to declare the MicroStrategy Dossier Config Properties. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface MicroStrategyDossierConfig { placeholder: HTMLDivElement | null; url: string; containerHeight?: string; containerWidth?: string; customAuthenticationType?: MicroStrategyDossierConfigCustomAuthenticationType | string; disableNotification?: boolean; disableErrorPopupWindow?: boolean; dockedComment?: DockedCommentAndFilter; dockedFilter?: DockedCommentAndFilter; dockedTheme?: DockedTheme; dockedToc?: { dockedPosition?: "left" | "right"; theme?: "light" | "dark"; canClose?: boolean; dockChangeable?: boolean; isDocked?: boolean; }; dossierFeature?: { readonly?: boolean; }; enableCollaboration?: boolean; enableCustomAuthentication?: boolean; enableResponsive?: boolean; filterFeature?: { enabled?: boolean; edit?: boolean; summary?: boolean; }; filters?: FilterCreation[]; getLoginToken?: () => Promise<string | void | null>; instance?: { mid?: string; id?: string; status?: string | number; partialManipulation?: boolean; }; navigationBar?: NavigationBar; customUi?: CustomUi; optionsFeature?: OptionsFeature; shareFeature?: ShareFeature; smartBanner?: boolean; tocFeature?: { enabled?: boolean; }; uiMessage?: { enabled?: boolean; addToLibrary?: boolean; }; visibleTutorials?: { library: boolean; welcome: boolean; dossier: boolean; notification: boolean; }; dossierRenderingMode?: "consumption" | "authoring"; /** * * The authoring props managed tools or features that are available in the authoring mode. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/authoring-library * * The following properties are available: * - menubar * - toolbar * - panelVisibility */ authoring?: { menubar?: { library?: { visible?: boolean; }; }; toolbar?: { tableOfContents?: { visible?: boolean; }; undo?: { visible?: boolean; }; redo?: { visible?: boolean; }; refresh?: { visible?: boolean; }; pauseDataRetrieval?: { visible?: boolean; }; reprompt?: { visible?: boolean; }; dividerLeft?: { visible?: boolean; }; addData?: { visible?: boolean; }; addChapter?: { visible?: boolean; }; addPage?: { visible?: boolean; }; insertVisualization?: { visible?: boolean; }; insertFilter?: { visible?: boolean; }; insertText?: { visible?: boolean; }; insertImage?: { visible?: boolean; }; insertHtml?: { visible?: boolean; }; insertShape?: { visible?: boolean; }; insertPanelStack?: { visible?: boolean; }; insertInfoWindow?: { visible?: boolean; }; save?: { visible?: boolean; }; dividerRight?: { visible?: boolean; }; more?: { visible?: boolean; }; freeformLayout?: { visible?: boolean; }; nlp?: { visible?: boolean; }; responsiveViewEditor?: { visible?: boolean; }; responsivePreview?: { visible?: boolean; }; }; panelVisibility?: { contents?: boolean; datasets?: boolean; editor?: boolean; filter?: boolean; format?: boolean; layers?: boolean; }; }; disableCustomErrorHandlerOnCreate?: boolean; sessionErrorHandler?: (error: ErrorHandlerInterface) => void; errorHandler?: (error: ErrorHandlerInterface) => void; } /** * Interface for MicroStrategy Dossier Config Custom Authentication Type * * This interface is used to declare the MicroStrategy Dossier Config Custom Authentication Type. * * In MicroStrategy Embedding SDK, we can use two types of authentication: AUTH_TOKEN and IDENTITY_TOKEN. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface MicroStrategyDossierConfigCustomAuthenticationType { AUTH_TOKEN: string; IDENTITY_TOKEN: string; } /** * Interface for MicroStrategy Dossier Dashboard APIs * * This interface is used to declare the MicroStrategy Dossier Dashboard that will be viewed on the web page. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface MicroStrategyDossier { close: () => void; refresh: () => void; resize: (width: string, height: string) => void; /** * Instance * * Get the instance ID of the dossier * @returns Promise<string> */ getDossierInstanceId: () => Promise<string>; /** * Filter * * Get the filter list * @returns Promise<FilterListType[]> */ getFilterList: () => Promise<FilterListType[]>; /** * Filter * * Filter methods * * @params FilterJson (most of the methods are using this type) * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/filters */ filterSelectAllAttributes: (params: FilterJson) => void; filterDeselectAllAttributes: (params: FilterJson) => void; filterSelectSingleAttribute: (params: FilterJson) => void; filterSelectMultiAttributes: (params: FilterJson) => void; filterSearchSingleAttribute: (params: FilterJson) => void; filterSearchMultiAttributes: (params: FilterJson) => void; filterAttributeSingleSlider: (params: FilterJson) => void; filterAttributeMultiSlider: (params: FilterJson) => void; filterSetDateRange: (params: FilterJson) => void; filterSetMetricQualByValue: (params: FilterJson) => void; filterSetMetricQualByRank: (params: FilterJson) => void; filterSetMetricSliderByValue: (params: FilterJson) => void; filterSetMetricSliderByRank: (params: FilterJson) => void; filterClearAll: () => void; filterClear: (params: FilterJson) => void; filterSetInclude: (params: FilterJson) => void; filterSetExclude: (params: FilterJson) => void; filterApplyAll: () => void; /** * Switch to Mode * * Switch to the mode of the dossier * @param mode "consumption" | "authoring" * @returns Promise<void> */ switchToMode?: (mode: "consumption" | "authoring") => Promise<void>; /** * Navigation * * Once you have embedded a dashboard, you can use helper methods in the Embedding SDK to let users navigate within the dashboard. * * For example, you can add code to get the table of contents for the dashboard, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/add-nav */ getTableOfContents: () => TableOfContents; goToPrevPage: () => Promise<{ valid: boolean; message: string; } | void>; goToNextPage: () => Promise<{ valid: boolean; message: string; } | void>; navigateToPage: (page: DossierPage) => Promise<{ valid: boolean; message: string; } | void>; getCurrentChapter: () => DossierChapter; getCurrentPage: () => DossierPage; getPageByNodeKey: (nodeKey: string) => DossierPage; getChapterList: () => DossierChapter[]; getCurrentPageVisualizationList: () => Promise<[ { key: string; name: string; } ]>; openFilterSummaryBar: () => void | null; closeFilterSummaryBar: () => void | null; getPageList: () => DossierPage[]; /** * Event Handlers * * You could use these methods to customize the behavior of the dossier. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/add-event#registereventhandlerevtname-handler */ registerEventHandler: (event: EventTypes, handler: EventHandler) => void; removeEventHandler: (event: EventTypes, handler: EventHandler) => void; /** * Wrapper Functions for Event Handlers * * The following wrapper functions make it easy to register event handlers for specific events. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/add-event#wrapper-functions */ registerGraphicsSelectEventHandlerToViz: (vizKey: string, handler: EventHandler) => void; registerFilterUpdateHandler: (handler: EventHandler) => void; registerPageSwitchHandler: (handler: EventHandler) => void; registerDossierInstanceIDChangeHandler: (handler: EventHandler) => void; removeCustomErrorHandler?: (error: ErrorHandlerInterface) => void; removeSessionHandler: () => void; /** * * The following methods are used to handle errors. * These methods are used to handle errors that occur during the creation of the dossier. * * @param error * About the params itself would be return ErrorHandlerInterface * * @returns * Return could be any void */ addCustomErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; addSessionErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; } /** * Interface for Embedding Contexts APIs * * This interface is used to declare the Embedding Contexts APIs. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbeddingContexts { embedLibraryPage: (params: EmbedLibraryPageConfig) => Promise<EmbedLibraryPage>; embedDossierConsumptionPage: (params: EmbedDossierConsumptionPageConfig) => Promise<EmbedDossierConsumptionPage>; embedBotConsumptionPage: (params: EmbedBotConsumptionPageConfig) => Promise<EmbedBotConsumptionPage>; embedReportPage: (params: EmbedReportPageConfig) => Promise<EmbedReportPage>; registerEventHandler: (event: EventTypes, handler: EventHandler) => void; removeEventHandler: (event: EventTypes, handler: EventHandler) => void; removeCustomErrorHandler: () => void; removeSessionErrorHandler: () => void; goToPage: (pageInfo: PageInfo) => Promise<{ redirect: boolean; }>; addCustomErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; addSessionErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; } /** * Interface for Embed Library Page Config * * This interface is used to declare the Embed Library Page Config. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedLibraryPageConfig { placeholder: HTMLElement | null; serverUrl: string; containerHeight?: string; containerWidth?: string; enableCustomAuthentication?: boolean; customAuthenticationType?: MicroStrategyDossierConfigCustomAuthenticationType | string; getLoginToken?: () => Promise<string | void | null>; disableCustomErrorHandlerOnCreate?: boolean; errorHandler?: (error: ErrorHandlerInterface) => void; sessionErrorHandler?: (error: ErrorHandlerInterface) => void; customUi?: CustomUi; libraryItemSelectMode?: "single" | "multiple"; currentPage?: CurrentPage; } /** * Interface for EmbedLibraryPage APIs * * The LibraryPage object is the manipulator of the MicroStrategy Library home page. It could be got by embeddingContext.libraryPage. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedLibraryPage { getAllMyGroups?: () => Promise<{ id: string; name: string; }[]>; getAllDefaultGroups?: () => Promise<{ id: string; name: string; }[]>; setNavigationBarEnabled?: (enabled: boolean) => void; setSidebarVisibility?: (shown: boolean) => void; addCustomErrorHandler?: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; addSessionErrorHandler?: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; } /** * Interface for Embed Dossier Consumption Page Config * * This interface is used to declare the Embed Dossier Consumption Page Config. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedDossierConsumptionPageConfig { placeholder: HTMLDivElement | null; serverUrl: string; projectId: string; objectId: string; customApplicationId?: string; enableCustomAuthentication?: boolean; pageKey?: string; containerHeight?: string; containerWidth?: string; customAuthenticationType?: MicroStrategyDossierConfigCustomAuthenticationType | string; getLoginToken?: () => Promise<string | void | null>; disableCustomErrorHandlerOnCreate?: boolean; errorHandler?: (error: ErrorHandlerInterface) => void; sessionErrorHandler?: (error: ErrorHandlerInterface) => void; customUi?: CustomUi; settings?: Pick<Settings, "dossierConsumption"> | Pick<Settings, "botConsumption">; } interface EmbedDossierConsumptionPage { addCustomErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; addSessionErrorHandler: (handler: (error: ErrorHandlerInterface) => void, showErrorPopup: boolean) => void; } /** * Interface for Embed Bot Consumption Page Config * * This interface is used to declare the Embed Bot Consumption Page Config. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedBotConsumptionPageConfig extends EmbedDossierConsumptionPageConfig { disableHyper?: boolean; permissions?: { allowClipboardWrite?: boolean; }; } /** * Interface for Embed Bot Consumption Page APIs * * This interface is used to declare the Embed Bot Consumption Page APIs. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedBotConsumptionPage { } /** * Interface for Embed Report Page Config * * This interface is used to declare the Embed Report Page Config. * */ interface EmbedReportPageConfig extends EmbedDossierConsumptionPageConfig { } /** * Interface for Embed Report Page APIs * * This interface is used to declare the Embed Report Page APIs. * * For more information, please refer to the MicroStrategy SDK documentation. * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/methods-and-properties * */ interface EmbedReportPage { } interface DashboardEmbedProps { dossierUrl: string; className?: string; style?: React.CSSProperties; config?: Omit<MicroStrategyDossierConfig, "placeholder" | "url">; } declare const DashboardEmbed: ({ dossierUrl, className, style, config, }: DashboardEmbedProps) => react_jsx_runtime.JSX.Element; interface LibraryPageEmbedProps { serverUrlLibrary: string; config?: Omit<EmbedLibraryPageConfig, "placeholder" | "serverUrl">; className?: string; style?: React.CSSProperties; } declare const LibraryPageEmbed: ({ serverUrlLibrary, config, className, style, }: LibraryPageEmbedProps) => react_jsx_runtime.JSX.Element; interface BotConsumptionPageProps { serverUrlLibrary: string; projectId: string; objectId: string; config: Omit<EmbedBotConsumptionPageConfig, "placeholder" | "serverUrl" | "projectId" | "objectId">; className?: string; style?: React.CSSProperties; } declare const BotConsumptionPage: ({ serverUrlLibrary, projectId, objectId, config, className, style, }: BotConsumptionPageProps) => react_jsx_runtime.JSX.Element; /** * Props interface for the DashboardEmbedWithAuth component * * @property dossierUrl - The full URL of the MicroStrategy dossier to embed * Format: https://{env-url}/{libraryName}/app/{projectId}/{dossierId} * @property className - Optional CSS class names to apply to the container * @property style - Optional inline styles to apply to the container * @property config - Dashboard configuration options excluding placeholder and URL * @property loginMode - Authentication method to use (guest/standard/saml/oidc/ldap) * @property username - Username for standard/LDAP authentication * @property password - Password for standard/LDAP authentication * @property loadingComponent - Custom component to show during authentication/loading * @property errorComponent - Custom component or function to render error states */ interface DashboardEmbedWithAuthProps { dossierUrl: string; className?: string; style?: React.CSSProperties; config?: Omit<MicroStrategyDossierConfig, "placeholder" | "url">; loginMode: "guest" | "standard" | "saml" | "oidc" | "ldap"; username?: string; password?: string; loadingComponent?: ReactNode; errorComponent?: ReactNode | ((error: string) => ReactNode); } /** * DashboardEmbedWithAuth Component * * A React component that handles authentication and embedding of MicroStrategy dashboards. * This component supports multiple authentication methods and provides customizable * loading and error states. * * Features: * - Multiple authentication methods (Guest, Standard, SAML, OIDC, LDAP) * - Customizable loading and error states * - Responsive design support * - Custom styling options * * Usage example: * ```tsx * <DashboardEmbedWithAuth * dossierUrl="https://your-mstr-server/MicroStrategyLibrary/app/..." * loginMode="standard" * username="user" * password="pass" * className="dashboard-container" * loadingComponent={<Spinner />} * errorComponent={(error) => <ErrorAlert message={error} />} * /> * ``` * * @param props - Component props of type DashboardEmbedWithAuthProps * @returns React component that renders the authenticated dashboard */ declare const DashboardEmbedWithAuth: ({ dossierUrl, className, style, config, loginMode, username, password, loadingComponent, errorComponent, }: DashboardEmbedWithAuthProps) => react_jsx_runtime.JSX.Element; /** * Hook Information * useLoadMstrSDK({serverUrlLibrary: ''}) * * This hook is used to load the MicroStrategy SDK based on the server URL Library provided. * * Usage: * const { isSdkLoaded, isSdkError } = useLoadMstrSDK({serverUrlLibrary: ''}) * * @param serverUrlLibrary - The URL of the MicroStrategy library * @returns isSdkLoaded - Whether the SDK is loaded * @returns isSdkError - Whether there was an error loading the SDK * * Use this hook to check if the SDK is loaded and if there was an error loading the SDK. */ declare const useLoadMstrSDK: ({ serverUrlLibrary }: { serverUrlLibrary: string; }) => { isSdkLoaded: boolean; isSdkError: { isError: boolean; message: string; }; }; interface UseCreateDashboardProps { serverUrlLibrary: string; config: Omit<MicroStrategyDossierConfig, "placeholder">; } declare const useCreateDashboard: ({ serverUrlLibrary, config, }: UseCreateDashboardProps) => { dashboard: MicroStrategyDossier | null; containerRef: react.RefObject<HTMLDivElement>; isSdkLoaded: boolean; isDashboardError: boolean; }; /** * Props interface for useCreateLibraryPage * * @property serverUrlLibrary - Base URL for the MicroStrategy Library * @property config - Library page configuration excluding placeholder and serverUrl */ interface UseCreateLibraryPageProps { serverUrlLibrary: string; config?: Omit<EmbedLibraryPageConfig, "placeholder" | "serverUrl">; } /** * Custom hook for creating a MicroStrategy Library Page * * This hook handles the creation and management of an embedded Library page. * For more information, see: * @see https://microstrategy.github.io/embedding-sdk-docs/add-functionality/embedding-contexts */ declare const useCreateLibraryPage: ({ serverUrlLibrary, config, }: UseCreateLibraryPageProps) => { libraryPage: EmbedLibraryPage | null; libraryPageRef: react.RefObject<HTMLDivElement>; isSdkLoaded: boolean; isLoading: boolean; error: string | null; }; interface UseCreateBotConsumptionPageProps { serverUrlLibrary: string; projectId: string; objectId: string; config: Omit<EmbedBotConsumptionPageConfig, "placeholder" | "serverUrl" | "projectId" | "objectId">; } declare const useCreateBotConsumptionPage: ({ serverUrlLibrary, projectId, objectId, config, }: UseCreateBotConsumptionPageProps) => { botConsumptionPage: EmbedBotConsumptionPage | null; botConsumptionPageRef: react.RefObject<HTMLDivElement>; isBotConsumptionPageError: boolean; isSdkError: { isError: boolean; message: string; }; isSdkLoaded: boolean; }; /** * Custom hook for creating and managing authenticated MicroStrategy dashboards * * This hook handles the complete lifecycle of dashboard authentication and creation: * - Multiple authentication methods support * - Token management * - Dashboard initialization * - Error handling * * Supported authentication methods: * - Guest authentication (no credentials required) * - Standard authentication (username/password) * - LDAP authentication (username/password) * - SAML authentication (redirect to identity provider) * - OIDC authentication (OpenID Connect flow) * * @see https://microstrategy.github.io/embedding-sdk-docs/support-for-different-authentication-environments/ */ /** * Props interface for useCreateDashboardWithAuth hook * * @property serverUrlLibrary - Base URL for the MicroStrategy Library server * @property placeholder - DOM element where the dashboard will be rendered * @property config - Dashboard configuration excluding placeholder * @property loginMode - Authentication method to use * @property username - Optional username for standard/LDAP auth * @property password - Optional password for standard/LDAP auth */ interface UseCreateDashboardWithAuthProps { serverUrlLibrary: string; placeholder: HTMLDivElement | null; config: Omit<MicroStrategyDossierConfig, "placeholder">; loginMode: "guest" | "standard" | "saml" | "oidc" | "ldap"; username?: string; password?: string; } /** * Custom hook for creating authenticated MicroStrategy dashboards * * This hook manages the complete lifecycle of an authenticated dashboard: * 1. Loads the MicroStrategy SDK * 2. Handles authentication based on the specified login mode * 3. Creates and initializes the dashboard * 4. Manages authentication state and errors * * @param props - Hook configuration of type UseCreateDashboardWithAuthProps * @returns Object containing dashboard instance and authentication state * * @example * ```tsx * const { dashboard, isAuthenticating, error } = useCreateDashboardWithAuth({ * serverUrlLibrary: "https://your-mstr-server", * placeholder: divRef.current, * config: { url: "dashboard-url", ... }, * loginMode: "standard", * username: "user", * password: "pass" * }); * ``` */ declare const useCreateDashboardWithAuth: ({ serverUrlLibrary, placeholder, config, loginMode, username, password, }: UseCreateDashboardWithAuthProps) => { isAuthenticated: boolean; isAuthenticating: boolean; error: string | null; dashboard: MicroStrategyDossier | null; }; declare const getInfoFromUrl: (url: string) => { serverUrl: string; serverUrlLibrary: string; libraryName: string; projectId: string; dossierId: string; }; /** * Authentication Functions for MicroStrategy Dossier Embedding according to the MicroStrategy Embedding SDK */ declare const getAuthToken: ({ serverUrlLibrary, }: { serverUrlLibrary: string; }) => Promise<string | void>; declare const getServerUrl: (url: string) => string; export { BotConsumptionPage, type BotConsumptionSettings, type CurrentPage, type CustomUi, DashboardEmbed, DashboardEmbedWithAuth, type DockedCommentAndFilter, type DockedTheme, type DossierChapter, type DossierConsumptionSettings, type DossierPage, type EVENT_TYPE, type EmbedBotConsumptionPage, type EmbedBotConsumptionPageConfig, type EmbedDossierConsumptionPage, type EmbedDossierConsumptionPageConfig, type EmbedLibraryPage, type EmbedLibraryPageConfig, type EmbedReportPage, type EmbedReportPageConfig, type EmbeddingContexts, type EventHandler, type EventHandlers, type EventTypes, type FilterTypeInfoCalendar, type FilterTypeInfoMetricQualByValue, LibraryPageEmbed, type MicroStrategyDossier, type MicroStrategyDossierConfig, type MicroStrategyDossierConfigCustomAuthenticationType, type MicroStrategySDK, type NavigationBar, type OptionsFeature, type PageInfo, type Settings, type ShareFeature, type TableOfContents, getAuthToken, getInfoFromUrl, getServerUrl, useCreateBotConsumptionPage, useCreateDashboard, useCreateDashboardWithAuth, useCreateLibraryPage, useLoadMstrSDK };