A react component for embedding SiSense

bi-dashboard.js

import React, { useRef } from 'react'
import PropTypes from 'prop-types'
const BI_BASE_URL = 'https://sisense.onuptick.com'

const BIDashboard = ({ defaultDashboard, jwt }) => {
  // This component creates an iframe element setting the initial src to log the user in via a JWT
  // once that load has finished, the onLoad handler is called (loadDashboard). This then
  // hands over to the SiSense API to initialise the iframe and complete the embedding.
  const src = BI_BASE_URL + '/jwt?jwt=' + jwt
  const iFrameElement = useRef(null)
  const loadDashboard = () => {
    const embed = window['sisense.embed']
    const SisenseFrame = embed.SisenseFrame
    const frame = new SisenseFrame({ //  eslint-disable-line
      url: BI_BASE_URL,
      dashboard: defaultDashboard,
      settings: {
        showLeftPane: false,
        showToolbar: false,
        showRightPane: false,
      },
      element: iFrameElement.current,
    })
  }

  return (
    <iframe ref={iFrameElement} id="sisense-frame" src={src} className="w-100 h-100" data-jwt="{{ jwt }}" onLoad={loadDashboard} />
  )
}
BIDashboard.propTypes = {
  defaultDashboard: PropTypes.string,
  jwt: PropTypes.string,
}

export default BIDashboard