@ant-design/icons#LineChartOutlined JavaScript Examples

export default function Credits() {
  return (
    <FormattedMessage {...messages.title}>
      {(title) => (
        <StyledCard
          darker="true"
          bordered="true"
          title={title}
          excluded="true"
          shadowed="true"
          extra={
            <StyledButton type="link">
              <StyledButtonContent onMouseDown={(e) => e.stopPropagation()}>
                <LineChartOutlined /> <FormattedMessage {...messages.action} />
              </StyledButtonContent>
            </StyledButton>
          }
        >
          <StyledCardContent onMouseDown={(e) => e.stopPropagation()}>
            <FormattedMessage {...messages.description} />
          </StyledCardContent>
        </StyledCard>
      )}
    </FormattedMessage>
  );
}

items = [
  {
    id: 1,
    name: routes.dashboard.name,
    path: routes.dashboard.path,
    icon: <DesktopOutlined />,
    disabled: false,
  },
  {
    id: 2,
    name: routes.payment.name,
    path: routes.payment.path,
    icon: <WalletOutlined />,
    disabled: false,
  },
  {
    id: 3,
    name: routes.history.name,
    path: routes.history.path,
    icon: <HistoryOutlined />,
    disabled: false,
  },
  {
    id: 4,
    name: 'Cards',
    path: '4',
    icon: <CreditCardOutlined />,
    disabled: true,
  },
  {
    id: 5,
    name: 'Credits',
    path: '5',
    icon: <LineChartOutlined />,
    disabled: true,
  },
  {
    id: 6,
    name: 'Deposits',
    path: '6',
    icon: <BankOutlined />,
    disabled: true,
  },
  {
    id: 7,
    name: routes.settings.name,
    path: routes.settings.path,
    icon: <SettingOutlined />,
    disabled: false,
  },
]

MainPage = ({ setWalletModalVisibility }) => {
  const {
    address,
    bonded_state,
    deposit_state,
    reserve_asset_symbol,
    fund_aa,
    fund_state,
    stable_state,
    params,
    symbol1,
    symbol2,
    symbol3,
    symbol4,
    loading
  } = useSelector((state) => state.active);
  const pendings = useSelector((state) => state.pendings);
  const { activeWallet, lang } = useSelector((state) => state.settings);
  const { loaded } = useSelector((state) => state.list);
  const [currentTab, setCurrentTab] = useState(undefined);
  const [handleSkip, setHandleSkip] = useState(false);
  const [tabInitialized, setTabInitialized] = useState(false);
  const [addressInitialized, setAddressInitialized] = useState(false);
  const actualParams = getParams(params, bonded_state);
  const urlParams = useParams();
  const history = useHistory();
  const location = useLocation();
  const dispatch = useDispatch();
  const { tab } = urlParams;
  const hash = location.hash.slice(1);
  const { t } = useTranslation();
  const basename = lang && lang !== "en" ? "/" + lang : "";

  useEffect(() => {
    if ((addressInitialized || !urlParams.address) && !loading && loaded && tabInitialized && currentTab && address && !tabList.includes(hash)) {
      let newTab;
      if (tab === "fund" && !(bonded_state?.fund_aa)) {
        if ("reserve" in bonded_state) {
          newTab = "deposits";
        } else {
          newTab = "buy-redeem";
        }
      } else if (currentTab === "deposits" && bonded_state?.fund_aa) {
        if ("reserve" in bonded_state) {
          newTab = "fund";
        } else {
          newTab = "buy-redeem";
        }
      }

      history.replace(`${basename}/trade/${address}/${newTab || currentTab || ""}${location.hash}`);
    }
  }, [currentTab, loaded, address, addressInitialized, loading]);

  useEffect(() => {
    if (!tabList.includes(hash)) {
      history.replace({ hash: undefined });
    }
  }, [address]);

  useEffect(() => {
    if (urlParams.address && address !== urlParams.address) {
      if (botCheck(navigator.userAgent)) {
        dispatch(changeActiveForBot(urlParams.address));
      } else {
        dispatch(changeActive(urlParams.address));
      }
    }
    setAddressInitialized(true);
  }, [])

  useEffect(() => {
    if (tabInitialized && tab !== currentTab) {
      setCurrentTab(tab);
    }
    if (tab !== "governance" && !tabList.includes(hash)) {
      history.replace({ hash: undefined });
    }
  }, [tab])

  useEffect(() => {
    if (loaded && !isEmpty(bonded_state) && !tabInitialized) {
      if (tabList.includes(hash)) {
        if ("reserve" in bonded_state || ["parameters", "charts"].includes(hash)) {
          setCurrentTab(hash === "buy" ? "buy-redeem" : hash);
        } else {
          setCurrentTab("buy-redeem");
        }
        history.replace({ hash: undefined });
      } else if (!tab) {
        if ("reserve" in bonded_state) {
          setCurrentTab("charts");
        } else {
          setCurrentTab("buy-redeem");
        }
      } else {
        if (tab === "fund") {
          if (bonded_state?.fund_aa) {
            setCurrentTab(tab);
          } else {
            if ("reserve" in bonded_state) {
              setCurrentTab("deposits");
            } else {
              setCurrentTab("buy-redeem");
            }
          }
        } if (tab === "deposits") {
          if (bonded_state?.fund_aa) {
            if ("reserve" in bonded_state) {
              setCurrentTab("fund");
            } else {
              setCurrentTab("buy-redeem");
            }
          } else {
            setCurrentTab(tab);
          }
        } else {
          setCurrentTab(tab);
        }
      }
      setTabInitialized(true);
    }
  }, [loaded, tabInitialized, bonded_state]);

  const handleClickToLiquidity = () => {
    ReactGA.event({
      category: "Stablecoin",
      action: "Click to liquidity"
    })
  }

  if (loading) {
    return <div style={{ padding: 40, textAlign: "center" }}>
      <Spin size="large" />
    </div>
  } else if (address === undefined || !loaded) {
    return null;
  } else if (
    !handleSkip &&
    address !== "undefined" &&
    ((!symbol1 && !pendings.tokens1) ||
      (!symbol2 && !pendings.tokens2) ||
      (!symbol3 && !pendings.tokens3 && bonded_state.interest_rate) || (fund_aa && !symbol4 && !pendings.tokens4))
  ) {
    return (
      <RegisterSymbols
        symbol1={symbol1}
        symbol2={symbol2}
        symbol3={symbol3}
        pendings={pendings}
        fund_aa={fund_aa}
        fund_asset={fund_state?.shares_asset}
        asset1={bonded_state.asset1}
        asset2={bonded_state.asset2}
        asset3={stable_state?.asset || deposit_state?.asset}
        decimals1={actualParams.decimals1}
        decimals2={actualParams.decimals2}
        reserve_asset_decimals={actualParams.reserve_asset_decimals}
        address={address}
        activeWallet={activeWallet}
        handleSkip={setHandleSkip}
        interest={stable_state?.asset || !!bonded_state.interest_rate}
        isV2={!!fund_aa}
      />
    );
  } else
    return (
      <div>
        <Helmet title="Bonded stablecoins - Trade" />
        <>
          <Tabs
            activeKey={currentTab}
            onChange={(key) => setCurrentTab(key)}
            animated={false}
          >
            <TabPane
              disabled={!("reserve" in bonded_state)}
              tab={
                <span>
                  <LineChartOutlined /> {t("trade.tabs.charts.name", "Charts")}
                </span>
              }
              key="charts"
            >
              <Charts isActive={currentTab === "charts"} params={actualParams} />
            </TabPane>
            <TabPane
              tab={
                <span>
                  <InteractionOutlined /> {t("trade.tabs.buy_redeem.name", "Buy/redeem")}
                </span>
              }
              key="buy-redeem"
            >
              {!fund_aa ? ("reserve" in bonded_state ? (
                <Row style={{ marginTop: 20 }}>
                  <Col md={{ span: 10 }} xs={{ span: 24 }}>
                    <Issue />
                  </Col>
                  <Col md={{ span: 10, offset: 4 }} xs={{ span: 24 }}>
                    <Redeem setWalletModalVisibility={setWalletModalVisibility} />
                  </Col>
                </Row>
              ) : (
                <Row style={{ marginTop: 20 }}>
                  <Col span={18}>
                    <Issue />
                  </Col>
                </Row>
              )) : <IssueAndRedeem />}

              <div style={{ textAlign: "center" }}>
                <Trans i18nKey="trade.tabs.buy_redeem.liquidity">
                  <p>You can earn additional interest by adding these tokens to liquidity pools, see <a target="_blank" rel="noopener" href="https://liquidity.obyte.org" onClick={handleClickToLiquidity}>liquidity.obyte.org</a>.</p>
                </Trans>
              </div>
            </TabPane>
            {fund_aa ? <TabPane
              disabled={!("reserve" in bonded_state)}
              tab={
                <span>
                  <FundIcon /> {t("trade.tabs.stability_fund.name", "Stability fund")}
                </span>
              }
              key="fund"
            >
              <StabilityFund />
            </TabPane> : <TabPane
              disabled={!("reserve" in bonded_state) || (!bonded_state.interest_rate && !deposit_state.supply)}
              tab={
                <span>
                  <ImportOutlined /> {t("trade.tabs.deposits.name", "Deposits")}
                </span>
              }
              key="deposits"
            >
              <Deposits params={actualParams} openWalletModal={setWalletModalVisibility} />
            </TabPane>}
            <TabPane
              disabled={!("reserve" in bonded_state)}
              tab={
                <span>
                  <CapacitorIcon />
                  {t("trade.tabs.capacitor.name", "Capacitors")}
                </span>
              }
              key="capacitor"
            >
              <Capacitors
                address={address}
                bonded_state={bonded_state}
                params={actualParams}
                reserve_asset_symbol={reserve_asset_symbol}
              />
            </TabPane>

            <TabPane
              disabled={!("reserve" in bonded_state)}
              tab={
                <span>
                  <GovernanceIcon />
                  {t("trade.tabs.governance.name", "Governance")}
                </span>
              }
              key="governance"
            >
              <Governance openWalletModal={setWalletModalVisibility} />
            </TabPane>
            <TabPane
              disabled={!("reserve" in bonded_state)}
              tab={
                <span>
                  <NodeIndexOutlined />
                  {t("trade.tabs.transactions.name", "Transactions")}
                </span>
              }
              key="transactions"
            >
              <Transactions />
            </TabPane>
            <TabPane
              tab={
                <span>
                  <SlidersOutlined />
                  {t("trade.tabs.parameters.name", "Parameters")}
                </span>
              }
              key="parameters"
            >
              <Parameters />
            </TabPane>
          </Tabs>
        </>

        <BackTop />
      </div>
    );
}

sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}

render() {

        const hotKeyMenu = (
            <Menu>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65507', '65513', '65535'])}>Ctrl+Alt+Delete</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65507', '65513', '65288'])}>Ctrl+Alt+Backspace</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '100'])}>Windows+D</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '101'])}>Windows+E</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '114'])}>Windows+R</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '120'])}>Windows+X</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515'])}>Windows</Menu.Item>
            </Menu>
        );

        const cmdMenuItems = this.state.commands.map(item => {
            return <Tooltip placement="left" title={item['content']} color='blue' key={'t-' + item['id']}>
                <Menu.Item onClick={() => {
                    this.writeCommand(item['content'])
                }} key={'i-' + item['id']}>{item['name']}</Menu.Item>
            </Tooltip>;
        });

        const cmdMenu = (
            <Menu>
                {cmdMenuItems}
            </Menu>
        );

        return (
            <div>

                <div className="container" style={{
                    overflow: this.state.containerOverflow,
                    width: this.state.containerWidth,
                    height: this.state.containerHeight,
                    margin: '0 auto'
                }}>
                    <div id="display"/>
                </div>

                <Draggable>
                    <Affix style={{position: 'absolute', top: 50, right: 50}}>
                        <Button icon={<ExpandOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
                                onClick={() => {
                                    this.fullScreen();
                                }}/>
                    </Affix>
                </Draggable>

                {
                    this.state.session['copy'] === '1' || this.state.session['paste'] === '1' ?
                        <Draggable>
                            <Affix style={{position: 'absolute', top: 50, right: 100}}>
                                <Button icon={<CopyOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
                                        onClick={() => {
                                            this.setState({
                                                clipboardVisible: true
                                            });
                                        }}/>
                            </Affix>
                        </Draggable> : undefined
                }


                {
                    this.state.protocol === 'vnc' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<WindowsOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'rdp' && this.state.showFileSystem ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 50}}>
                                    <Button icon={<FolderOutlined/>}
                                            disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
                                        this.setState({
                                            fileSystemVisible: true,
                                        });
                                    }}/>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'rdp' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<WindowsOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'ssh' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 50}}>
                                    <Button icon={<FolderOutlined/>}
                                            disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
                                        this.setState({
                                            fileSystemVisible: true,
                                        });
                                    }}/>
                                </Affix>
                            </Draggable>

                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={cmdMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<CodeOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>

                            <Draggable>
                                <Affix style={{
                                    position: 'absolute',
                                    top: 150,
                                    right: 100,
                                    zIndex: this.state.enterBtnIndex
                                }}>
                                    <Button icon={<LineChartOutlined/>} onClick={() => {
                                        this.setState({
                                            statsVisible: true,
                                        });
                                        if (this.statsRef) {
                                            this.statsRef.addInterval();
                                        }
                                    }}/>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }


                <Drawer
                    title={'文件管理'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    onClose={() => {
                        this.focus();
                        this.setState({
                            fileSystemVisible: false
                        });
                    }}
                    visible={this.state.fileSystemVisible}
                >
                    <FileSystem
                        storageId={this.state.sessionId}
                        storageType={'sessions'}
                        upload={this.state.session['upload'] === '1'}
                        download={this.state.session['download'] === '1'}
                        delete={this.state.session['delete'] === '1'}
                        rename={this.state.session['rename'] === '1'}
                        edit={this.state.session['edit'] === '1'}
                        minHeight={window.innerHeight - 103}/>

                </Drawer>

                <Drawer
                    title={'状态信息'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    onClose={() => {
                        this.setState({
                            statsVisible: false,
                        });
                        this.focus();
                        if (this.statsRef) {
                            this.statsRef.delInterval();
                        }
                    }}
                    visible={this.state.statsVisible}
                >
                    <Stats sessionId={this.state.sessionId} onRef={this.onRef}/>
                </Drawer>

                {
                    this.state.clipboardVisible ?
                        <Modal
                            title="剪贴板"
                            maskClosable={false}
                            visible={this.state.clipboardVisible}

                            onOk={() => {
                                this.clipboardFormRef.current
                                    .validateFields()
                                    .then(values => {
                                        let clipboardText = values['clipboard'];

                                        this.sendClipboard({
                                            'data': clipboardText,
                                            'type': 'text/plain'
                                        });

                                        this.setState({
                                            clipboardText: clipboardText,
                                            clipboardVisible: false
                                        });
                                    })
                                    .catch(info => {

                                    });
                            }}
                            confirmLoading={this.state.confirmLoading}
                            onCancel={() => {
                                this.focus();
                                this.setState({
                                    clipboardVisible: false
                                })
                            }}
                        >
                            <Form ref={this.clipboardFormRef} initialValues={{'clipboard': this.state.clipboardText}}>
                                <Form.Item name='clipboard' rules={[{required: false}]}>
                                    <TextArea id='clipboard' rows={10}/>
                                </Form.Item>
                            </Form>
                        </Modal>
                        : undefined
                }

            </div>
        );
    }

render() {

        const cmdMenuItems = this.state.commands.map(item => {
            return <Tooltip placement="left" title={item['content']} color='blue' key={'t-' + item['id']}>
                <Menu.Item onClick={() => {
                    this.writeCommand(item['content'])
                }} key={'i-' + item['id']}>{item['name']}</Menu.Item>
            </Tooltip>;
        });

        const cmdMenu = (
            <Menu>
                {cmdMenuItems}
            </Menu>
        );

        return (
            <div>
                <div id='terminal' style={{
                    height: this.state.height,
                    width: this.state.width,
                    backgroundColor: '#1b1b1b'
                }}/>

                <Draggable>
                    <Affix style={{position: 'absolute', top: 50, right: 50, zIndex: this.state.enterBtnIndex}}>
                        <Button icon={<FolderOutlined/>} onClick={() => {
                            this.setState({
                                fileSystemVisible: true,
                                enterBtnIndex: 999, // xterm.js 输入框的zIndex是1000，在弹出文件管理页面后要隐藏此按钮
                            });
                        }}/>
                    </Affix>
                </Draggable>

                <Draggable>
                    <Affix style={{position: 'absolute', top: 50, right: 100, zIndex: this.state.enterBtnIndex}}>
                        <Dropdown overlay={cmdMenu} trigger={['click']} placement="bottomLeft">
                            <Button icon={<CodeOutlined/>}/>
                        </Dropdown>
                    </Affix>
                </Draggable>

                <Draggable>
                    <Affix style={{position: 'absolute', top: 100, right: 100, zIndex: this.state.enterBtnIndex}}>
                        <Button icon={<LineChartOutlined/>} onClick={() => {
                            this.setState({
                                statsVisible: true,
                                enterBtnIndex: 999, // xterm.js 输入框的zIndex是1000，在弹出文件管理页面后要隐藏此按钮
                            });
                            if (this.statsRef) {
                                this.statsRef.addInterval();
                            }
                        }}/>
                    </Affix>
                </Draggable>

                <Drawer
                    title={'会话详情'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    // maskClosable={false}
                    onClose={() => {
                        this.setState({
                            fileSystemVisible: false,
                            enterBtnIndex: 1001, // xterm.js 输入框的zIndex是1000，在隐藏文件管理页面后要显示此按钮
                        });
                        this.focus();
                    }}
                    visible={this.state.fileSystemVisible}
                >
                    <FileSystem
                        storageId={this.state.sessionId}
                        storageType={'sessions'}
                        upload={this.state.session['upload'] === '1'}
                        download={this.state.session['download'] === '1'}
                        delete={this.state.session['delete'] === '1'}
                        rename={this.state.session['rename'] === '1'}
                        edit={this.state.session['edit'] === '1'}
                        minHeight={window.innerHeight - 103}/>
                </Drawer>

                <Drawer
                    title={'状态信息'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    onClose={() => {
                        this.setState({
                            statsVisible: false,
                            enterBtnIndex: 1001, // xterm.js 输入框的zIndex是1000，在隐藏文件管理页面后要显示此按钮
                        });
                        this.focus();
                        if (this.statsRef) {
                            this.statsRef.delInterval();
                        }
                    }}
                    visible={this.state.statsVisible}
                >
                    <Stats sessionId={this.state.sessionId} onRef={this.onRef}/>
                </Drawer>
            </div>
        );
    }