Metabase embedding学习，实现将Metabase嵌入到其余应用中

• 学习网址：https://metabase.com/docs/v0.23.0/administration-guide/13-embedding.html
• 具体操做步骤

1.打开Metabase管理者设置页面html

2.按照图片所示，点击“Enable”react

3.点击后到用户数据图的具体页面，点击图上对应位置web

4.按照图示操做npm

5.按照图示操做，由于Metabase里面有不少用户，要想实现插入到咱们的应用后，不一样用户呈现本身对应的图标，因此应该选择专属的参数，修改完毕后点击publishjson

6.按照图示操做，点击code，出现两段代码，第一段代码是js代码，第二段是html代码，将代码粘贴到合适的位置redux

7.报错信息async

7.1解决下图的问题，只须要给iframeUrl加上判断，当参数payload里面的params为空时，iframeUrl为空，不然才是上面的那段代码ide

7.2解决下图的问题，暂时不会等待更新学习

8.截取我最后成功的部分代码ui

import React, { Component } from "react";
import { connect } from "react-redux";
import { getMedicalStatus } from "../action/patientAction";
import moment from "moment";
import jwt from "jsonwebtoken";
class UserStatus extends Component {
  async componentDidMount() {
    const { getMedicalStatus } = this.props;
    const id = window.location.href.split("=")[1];
    getMedicalStatus(id);
  }
  render() {
    const METABASE_SITE_URL = "....此处隐藏";
    const METABASE_SECRET_KEY =
      "....此处隐藏";
    const medicalDate = moment()
      .add(-2, "days")
      .format("YYYY-MM-DD_HH:mm:SS");
    let payload = {
      resource: { dashboard: 11 },
      params: {
        userid: this.props.medicalStatus.userId,
        time: medicalDate,
        name: this.props.medicalStatus.fullName
      }
    };
    let token = jwt.sign(payload, METABASE_SECRET_KEY);
    let iframeUrl =
      METABASE_SITE_URL +
      "/embed/dashboard/" +
      token +
      "#bordered=true&titled=true";
    return (
      <div className="device-detail-container">
        <iframe
          title="myFrame"
          src={iframeUrl}
          frameBorder="0"
          width="100%"
          height="600"
          overflow="auto"
        />
      </div>
    );
  }
}
const mapStateToProp = state => ({
  medicalStatus: state.patientsListStore.medicalStatus
});

const mapDispatchToProp = dispatch => ({
  getMedicalStatus: userId => dispatch(getMedicalStatus(userId))
});
export default connect(
  mapStateToProp,
  mapDispatchToProp
)(UserStatus);

按照上面的方法，iframe并无自适应高度，解决方法以下

npm insatll react-iframe-resizer-super --save
npm install iframe-resizer --save

1.建立一个组件，文件名为iframe

import ReactIframeResizer from "react-iframe-resizer-super";
import React, { Component } from "react";
class Iframe extends Component {
  render() {
    const iframeResizerOptions = { checkOrigin: false };
    console.log("props", this.props.iframeurl);
    return (
      <ReactIframeResizer
        src={this.props.iframeurl}
        iframeResizerEnable={true}
        ref="frame"
        iframeResizerOptions={iframeResizerOptions}
      />
    );
  }
}
export default Iframe;

而后在另一个组件中引用便可

<IframeComponent iframeurl={iframeUrl} />

出现警告：[iFrameSizer][Host page: iFrameResizer0] Ignored iFrame, already setup.

解决方法以下：在源码中修改