embed-docs-mstr-react

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

Installation

``bash
npm install embed-docs-mstr-react
`

or

`bash
yarn add embed-docs-mstr-react
`

or

`bash
pnpm add embed-docs-mstr-react
`

Simple Usage

Next, import the DashboardEmbed component from the package and use it in your project. Here's a simple example of how you can use the package:

`tsx
import { DashboardEmbed } from "embed-dossier-mstr-react";

const MinimalTemplateEmbed = () => {
return (
<>
dossierUrl="your-dossier-url"
style={{
width: "1000px",
height: "1200px",
}}
/>

);
};

export default MinimalTemplateEmbed;
`

That's it! You have successfully embedded a simple dashboard in your React application using a DashboardEmbed component from the embed-dossier-mstr-react package.

Usage With Configuration

You can also customize the Dashboard properties when embedding it in your React application. Here's an example with detailed configuration options:

`tsx {6-79} showLineNumbers
import {
DashboardEmbed,
MicroStrategyDossierConfig,
} from "embed-dossier-mstr-react";

const dossierConfig: Omit = {
customUi: {},
disableNotification: true,
dockedComment: {
dockedPosition: "left",
canClose: true,
dockChangeable: false,
isDocked: false,
},
dockedFilter: {
dockedPosition: "left",
canClose: true,
dockChangeable: false,
isDocked: false,
},
dossierFeature: {
readonly: false,
},
enableCollaboration: true,
enableCustomAuthentication: false,
enableResponsive: true,
filterFeature: {
enabled: true,
edit: true,
summary: true,
},
filters: [],
navigationBar: {
enabled: true,
gotoLibrary: true,
title: true,
toc: true,
reset: true,
reprompt: true,
share: true,
comment: true,
notification: true,
filter: true,
options: true,
bookmark: true,
edit: false,
},
optionsFeature: {
enabled: true,
help: false,
logout: true,
manage: false,
showTutorials: false,
},
shareFeature: {
enabled: true,
invite: false,
link: true,
email: false,
export: true,
download: false,
shareDossier: false,
subscribe: false,
},
smartBanner: false,
tocFeature: {
enabled: true,
},
uiMessage: {
enabled: true,
addToLibrary: false,
},
visibleTutorials: {
library: true,
welcome: false,
dossier: true,
notification: false,
},
};

const SimpleDashboardEmbed = () => {
return (
<>
dossierUrl="your-dossier-url" // Example: https://demo.microstrategy.com/MicroStrategyLibrary/app/B7CA92F04B9FAE8D941C3E9B7E0CD754/27D332AC6D43352E0928B9A1FCAF4AB0
config={dossierConfig}
style={{
width: "1000px",
height: "1200px",
}}
/>

);
};

export default SimpleDashboardEmbed;
`

And there you have it! You have successfully embedded a dashboard in your React application with detailed configuration options using the embed-dossier-mstr-react package.

Usage Using Hooks

In embed-dossier-mstr-react, you can also use hooks to embed a dashboard in your React application. There's a lot of flexibility in using hooks to embed a dashboard. Here's an example of how you can use hooks to embed a dashboard:

`tsx
import cn from "classnames";
import {
getInfoFromUrl,
MicroStrategyDossierConfig,
useCreateDashboard,
} from "embed-dossier-mstr-react";

interface EmbedWithHooksProps {
dossierUrl: string; // https://{env-url}/{libraryName}/app/{projectId}/{dossierId}
className?: string;
style?: React.CSSProperties;
config?: Omit;
}

const EmbedWithHooks = ({
dossierUrl,
className,
style,
config,
}: EmbedWithHooksProps) => {
let serverUrlLibrary = "";

try {
const urlInfo = getInfoFromUrl(dossierUrl);
serverUrlLibrary = urlInfo.serverUrlLibrary;
} catch (error) {
console.error("Failed to parse dossier URL:", error);
}

const { dashboard, containerRef, isSdkLoaded, isDashboardError } =
useCreateDashboard({
serverUrlLibrary,
config: {
url: dossierUrl,
...config,
},
});

if (isDashboardError) {
return

Failed to load dashboard

;
}

if (!isSdkLoaded) {
return

Loading...

;
}

if (dashboard) {
console.log("Dashboard has created");
}

return