@ant-design/icons#SlidersOutlined JavaScript Examples

render() {
        let run = this.props.run;

        let parameters = run.parameters.map((parameter, i) => {
            return(<p key={i}><b>{parameter.name}</b>: {parameter.value}</p>)
        })
        
        let metrics = run.metrics.map((metric, i) => {
            return {
                key: i,
                metric: metric.name,
                value: metric.value
            }
        })

        let measurements = run.measurements.map((meas, i) => {
            console.log(meas)

            let cats = meas.measures.map(m => m.key)
            let values = meas.measures.map(m => m.value)

            const options = {
                chart: { type: 'bar' },
                title: {  text: 'Measurement' },
                xAxis: { categories: cats, title: { text: null } },
                yAxis: {
                    min: 0,
                    title: { text: 'Counts', align: 'high' },
                    labels: {  overflow: 'justify' }
                },
                tooltip: { valueSuffix: '' },
                plotOptions: { bar: { dataLabels: { enabled: true  } }  },
                credits: { enabled: false },
                series: [{
                    name: 'Measurements',
                    data: values,
                    color: "#6929C2"
                }]
            }
            
            return(
                <Card size="small" style={{ marginTop: 10 }}>
                    <HighchartsReact
                        highcharts={Highcharts}
                        options={options}
                    />
                </Card>
            )
        })


        return(
            <div style={{ margin: "0 20px", overflow: "scroll", maxHeight: "70vh" }}>
                <Row gutter={16}>
                    <Col span={24}>
                        <Statistic title="Run" value={run.uuid} prefix={<SlidersOutlined />} />                        
                    </Col>
                </Row>

                <Collapse defaultActiveKey={[]} style={{ marginTop: 10 }}>
                    <Panel header="Docker image" key="docker_image">
                        <b>{`docker run qiskitflow:experiment_${run.uuid}`}</b>
                    </Panel>
                    <Panel header="BibTeX" key="bibtex">
                    <p>
                        {`@software{QiskitFlow,
                        author = {Admin},
                        title = {Quantum experiment ${run.uuid}},
                        url = {https://qiskitflow.com/experiments/${run.experiment}},
                        version = {0.20.2},
                        date = {2020-10-08}
                        }`}
                    </p>
                    </Panel>
                    <Panel header="Sourcecode" key="code">
                    <   a>{`experiment${run.experiment}.py`}</a>
                    </Panel>
                </Collapse>

                <Card size="small" title="Parameters" style={{ marginTop: 10 }}>
                    {parameters}
                </Card>

                <Table columns={columns} dataSource={metrics} style={{ marginTop: 10 }}/>
                
                <div>{measurements}</div>
            </div>
        )
    }

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>
    );
}

render() {
    const {
      fixContent,
      ttsInput,
      props: {
        statusInfo,
        action,
        cameraEnabled,
        videoEl,
        onTTS,
        ttsPlaying,
        setting,
        playAudio,
        serverConfig,
        changeChannel,
        editabled,
        cameraList,
        channelStatus,
        saveServerConfig,
        isFullscreen,
        session,
        webrtcChannel,
      },
    } = this;
    const { isShowButton, ttsInputVisible, text } = this.state;
    const { channelList = [], specialChannel = {} } = serverConfig;
    const speedChannel = channelList.find(
      ({ id }) => id === specialChannel.speed
    );
    const { audioList = [] } = serverConfig;

    return (
      <div className="controller">
        <Router className="controller-router">
          <Ai
            path="ai/learn/*"
            canvasRef={videoEl}
            cameraEnabled={cameraEnabled}
            action={action}
            onAi={(isAiControlling) => this.setState({ isAiControlling })}
          />
          <ObjectDetection
            path="ai/coco-ssd/*"
            videoEl={videoEl}
            cameraEnabled={cameraEnabled}
            action={action}
            onAi={(isAiControlling) => this.setState({ isAiControlling })}
          />
        </Router>
        {!isFullscreen && (
          <Form className="controller-form" size="small" layout="inline">
            <Form.Item>
              <Popover
                content={fixContent}
                title="修正"
                trigger="click"
                placement="topLeft"
              >
                <Button icon={<SlidersOutlined />}>修正</Button>
              </Popover>
            </Form.Item>
            {speedChannel && (
              <>
                <Form.Item>
                  <Popover
                    placement="topLeft"
                    content={
                      <Slider
                        defaultValue={speedChannel.valuePostive * 100}
                        min={0}
                        max={100}
                        onChange={(v) => {
                          speedChannel.valuePostive = v / 100;
                          saveServerConfig({
                            channelList,
                          });
                        }}
                        arrowPointAtCenter
                        style={{ width: "30vw" }}
                      />
                    }
                  >
                    <Button shape="round">
                      前进:{Math.round(speedChannel.valuePostive * 100)}
                    </Button>
                  </Popover>
                </Form.Item>
                <Form.Item>
                  <Popover
                    placement="topLeft"
                    content={
                      <Slider
                        defaultValue={speedChannel.valueNegative * -100}
                        min={0}
                        max={100}
                        style={{ width: "30vw" }}
                        onChange={(v) => {
                          speedChannel.valueNegative = (v / 100) * -1;
                          saveServerConfig({
                            channelList,
                          });
                        }}
                      />
                    }
                  >
                    <Button shape="round">
                      倒退:{Math.round(speedChannel.valueNegative * -100)}
                    </Button>
                  </Popover>
                </Form.Item>
              </>
            )}

            <Form.Item>
              <Gamepad
                changeChannel={changeChannel}
                channelList={serverConfig.channelList}
                channelStatus={channelStatus}
                playAudio={playAudio}
                serverConfig={serverConfig}
              />
            </Form.Item>

            <Form.Item>
              <Orientation
                changeChannel={changeChannel}
                channelStatus={channelStatus}
                serverConfig={serverConfig}
              />
            </Form.Item>
            <Form.Item>
              <Keybord
                playAudio={playAudio}
                channelStatus={channelStatus}
                channelList={serverConfig.channelList}
                changeChannel={changeChannel}
                serverConfig={serverConfig}
                onEnter={() => {
                  this.setState({ ttsInputVisible: true });
                  setTimeout(() => {
                    ttsInput.current && ttsInput.current.focus();
                  }, 200);
                }}
              />
            </Form.Item>
            <Form.Item>
              <Popover
                arrowPointAtCenter
                trigger="click"
                placement="topRight"
                visible={ttsInputVisible}
                onVisibleChange={(ttsInputVisible) => {
                  this.setState({ ttsInputVisible });
                  setTimeout(() => {
                    ttsInput.current && ttsInput.current.focus();
                  }, 200);
                }}
                content={
                  <form>
                    <Input.Search
                      ref={ttsInput}
                      name="tts"
                      style={{ width: "60vw" }}
                      placeholder="发送语音"
                      enterButton="发送"
                      value={text}
                      onChange={(e) => this.setState({ text: e.target.value })}
                      onSearch={(text) => {
                        onTTS(text);
                        this.setState({ text: "" });
                      }}
                      loading={ttsPlaying}
                      onKeyDown={(e) => {
                        e.stopPropagation();
                        if (e.key === "Escape") {
                          this.setState({ ttsInputVisible: false });
                        }
                      }}
                    />
                  </form>
                }
              >
                <Button shape="round">
                  <SendOutlined />
                </Button>
              </Popover>
            </Form.Item>

            {audioList
              .filter((i) => i.showFooter)
              .map(({ path, text, name }) => (
                <Form.Item key={name}>
                  <Button
                    shape="round"
                    onClick={() => playAudio({ path, text })}
                    icon={<SoundOutlined />}
                  >
                    {name}
                  </Button>
                </Form.Item>
              ))}

            <Form.Item>
              <Popover
                placement="topRight"
                content={
                  <Space size={[16, 16]} wrap>
                    <Form.Item extra="显示触控 UI">
                      <Switch
                        checked={isShowButton}
                        onChange={(isShowButton) => {
                          store.set("is-show-button", isShowButton);
                          this.setState({ isShowButton });
                        }}
                        checkedChildren={<DragOutlined />}
                        unCheckedChildren={<DragOutlined />}
                      />
                    </Form.Item>
                    {audioList
                      .filter((i) => !i.showFooter)
                      .map(({ path, text, name, type }) => (
                        <Form.Item extra={`播放${name}`} key={name}>
                          {type === "audio" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ path })}
                              icon={<SoundOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                          {type === "text" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ text })}
                              icon={<SoundOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                          {type === "stop" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ stop: true })}
                              icon={<StopOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                        </Form.Item>
                      ))}
                  </Space>
                }
              >
                <Button shape="round">
                  <MoreOutlined />
                </Button>
              </Popover>
            </Form.Item>
            <Form.Item>
              <Microphone
                url={
                  setting.host &&
                  `${
                    window.location.protocol === "https:" ? "wss://" : "ws://"
                  }${setting.host}/audio`
                }
              />
            </Form.Item>
          </Form>
        )}
        <ControlUI
          webrtcChannel={webrtcChannel}
          session={session}
          channelStatus={channelStatus}
          isShowButton={isShowButton}
          uiComponentList={serverConfig.uiComponentList}
          channelList={serverConfig.channelList}
          changeChannel={changeChannel}
          editabled={editabled}
          cameraList={cameraList}
          setting={setting}
          isFullscreen={isFullscreen}
          statusInfo={statusInfo}
        />
      </div>
    );
  }