antd#Statistic JavaScript Examples

extraContent = (
  <div
    style={{
      display: 'flex',
      width: 'max-content',
      justifyContent: 'flex-end',
    }}
  >
    <Statistic
      title="Status"
      value="Pending"
      style={{
        marginRight: 32,
      }}
    />
    <Statistic title="Price" prefix="$" value={568.08} />
  </div>
)

storiesOf('antd/statistic', module).add('basic', () => 
  <Row gutter={16}>
    <Col span={12}>
      <Statistic title="Active Users" value={112893} />
    </Col>
    <Col span={12}>
      <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
      <Button style={{ marginTop: 16 }} type="primary">
        Recharge
      </Button>
    </Col>
    <Col span={12}>
      <Statistic title="Active Users" value={112893} loading />
    </Col>
  </Row>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simplest Usage.</p></>) } });

storiesOf('antd/statistic', module).add('card', () => 
  <div className="site-statistic-demo-card">
    <Row gutter={16}>
      <Col span={12}>
        <Card>
          <Statistic
            title="Active"
            value={11.28}
            precision={2}
            valueStyle={{ color: '#3f8600' }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col span={12}>
        <Card>
          <Statistic
            title="Idle"
            value={9.3}
            precision={2}
            valueStyle={{ color: '#cf1322' }}
            prefix={<ArrowDownOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
    </Row>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Display statistic data in Card.</p></>) } });

storiesOf('antd/statistic', module).add('unit', () => 
  <Row gutter={16}>
    <Col span={12}>
      <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
    </Col>
    <Col span={12}>
      <Statistic title="Unmerged" value={93} suffix="/ 100" />
    </Col>
  </Row>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Add unit through <code>prefix</code> and <code>suffix</code>.</p></>) } });

ExtraContent = () => (
  <div className={styles.extraContent}>
    <div className={styles.statItem}>
      <Statistic title="项目数" value={56} />
    </div>
    <div className={styles.statItem}>
      <Statistic title="团队内排名" value={8} suffix="/ 24" />
    </div>
    <div className={styles.statItem}>
      <Statistic title="项目访问" value={2223} />
    </div>
  </div>
)

{ Countdown } = Statistic

{ Countdown } = Statistic

{ Countdown } = Statistic

{ Countdown } = Statistic

{ Countdown } = Statistic

TicketStats = () => {
  const [unClaimed, setUnClaimed] = useState();
  const [open, setOpen] = useState();
  const [complete, setComplete] = useState();

  const fetchOpen = async () => {
    await fetch(`/api/v1/data/getallopen`, {
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("jwt"),
        ContentType: "application/json",
      },
    })
      .then((res) => res.json())
      .then((result) => {
        setOpen(result.result);
      });
  };

  const fetchClosed = async () => {
    await fetch(`/api/v1/data/getallcompleted`, {
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("jwt"),
        ContentType: "application/json",
      },
    })
      .then((res) => res.json())
      .then((result) => {
        setComplete(result.result);
      });
  };

  const fetchUnissued = async () => {
    await fetch(`/api/v1/data/unallocatedTickets`, {
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("jwt"),
        ContentType: "application/json",
      },
    })
      .then((res) => res.json())
      .then((result) => {
        setUnClaimed(result.result);
      });
  };

  useEffect(() => {
    fetchOpen();
    fetchClosed();
    fetchUnissued();
  }, []);

  return (
    <div className="admin-dash-row">
      <div className="stats-card">
        <Card>
          <Statistic title="Closed Tickets" value={complete} />
        </Card>
      </div>
      <div className="stats-card">
        <Card>
          <Statistic title="Open Tickets" value={open} />
        </Card>
      </div>
      <div className="stats-card">
        <Card>
          <Statistic title="Unclaimed Tickets" value={unClaimed} />
        </Card>
      </div>
    </div>
  );
}

render() {
    // 设置Sider的minHeight可以使左右自适应对齐
    return (
      <div>
        <Layout>
          <Header style={styles.menu}>
            <Menu style={styles.menu} mode="horizontal">
              <Menu.Item key="/homepage">
                <Link to="/homepage">
                  首页
                </Link>
              </Menu.Item>
              <Menu.Item key='/controlboard'>
                <Link to="/controlboard">
                  监控台
                </Link>
              </Menu.Item>
              <Menu.Item key="/search">
                  <Link to="/search">
                    搜索
                  </Link>
                </Menu.Item>
            </Menu>
          </Header>
          <Content style={styles.content}>
            <Row style={{height:'100%'}}>
              <Col span={6}>
                <Panel />
                <Card title='端口' style={{border:'none'}}>
                  <Portchart />
                </Card>
                
              </Col>
              <Col span={12} style={styles.mapbox}>
                  <div className='iconbox'>
                    <Icon type='database' style={{fontSize:50,display:'inline-block',paddingRight:20}} />
                    <Statistic style={{display:'inline-block'}} title="设备" value={112893} />
                  </div>
                  <div className='iconbox'>
                    <Icon type='appstore' style={{fontSize:50,display:'inline-block',paddingRight:20}} />
                    <Statistic style={{display:'inline-block'}} title="组件" value={2893} />
                  </div>
                  <Card title="设备分布" style={{border:'none'}}>
                    <Worldmap />
                  </Card>   
              </Col> 
              <Col span={6}>
                
                <Typechart />
                <Card title="厂商" style={{border:'none'}}>
                    <Wordcloud />
                </Card>
              </Col>
            </Row>
          </Content>
          <Footer style={styles.foo}>descern ©2021 Created by halftion.cn</Footer>
        </Layout>
      </div>
    );
  }

render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };
    return (
      <div>
        <CustomBreadcrumb arr={['账单详单打印']} />
        <Card
          bordered={false}
          title="账单详单打印"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="用户名" {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的客户名',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>
                确定
              </Button>
            </FormItem>
          </Form>

          <Title>账单</Title>
          <Row style={{ marginBottom: 10 }}>
            <Col span={6}>
              <Card>
                <Statistic
                  title="当前账单费用"
                  value={this.state.fee}
                  precision={2}
                  prefix={<Icon type="pay-circle" />}
                  suffix="元"
                />
              </Card>
            </Col>
          </Row>

          <Title>详单</Title>
          <Table
            dataSource={this.state.logs}
            columns={columns1}
            style={styles.tableStyle}
          />
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
        return (
            <div>
                <Statistic title={this.state.title} value={this.state.value}/>

            </div>
        )
    }

{Countdown} = Statistic

render() {
        return (
            <div>
                <Statistic title={this.props.title} value={this.props.value}/>
            </div>
        )
    }

render() {
		return (
			<>
				<PageHeader
					title="Settings"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Row gutter={[16, 14]}>
						<Col span={12}>
							<Statistic title="Hashes" value={this.state._hashes.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Algorithms" value={Object.keys(this.state._algorithms).length} />
						</Col>
						<Col span={12}>
							<Statistic title="Dictionaries" value={this.state._dictionaries.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Rules" value={this.state._rules.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Masks" value={this.state._masks.length} />
						</Col>
						<Col span={24}>
							<Button
								icon={<SyncOutlined />}
								type="primary"
								onClick={this.onClickRescan}
								loading={this.state.isLoadingRescan}
							>
								Rescan
							</Button>
						</Col>
					</Row>
					<Row style={{ marginTop: "2rem" }} gutter={[16, 14]}>
						<Col span={24}>
							<Statistic
								title="Task counter"
								value={this.state.taskCounter}
							/>
							<Space>
							<Button
								style={{ marginTop: 16 }}
								type="default"
								onClick={this.onClickRefreshTaskCounter}
								loading={this.state.isLoadingRefreshTaskCounter}
							>
								Refresh
							</Button>
							<Popconfirm
								placement="topRight"
								title="Are you sure you want to reset the task counter?"
								onConfirm={this.onClickResetTaskCounter}
								okText="Yes"
								cancelText="No"
							>
								<Button
									style={{ marginTop: 16 }}
									type="danger"
									loading={this.state.isLoadingResetTaskCounter}
								>
									Reset counter
								</Button>
							</Popconfirm>
							</Space>
						</Col>
					</Row>
				</Content>
			</>
		)
	}

render() {
        return (
            <div className="user-background">
                <h3 className="title">个人信息</h3>
                <Row justify="space-between">
                    <Col span={6}>
                        <Card style={{ width: 300, marginTop: 16 }} bordered={false}>
                            <Meta
                                avatar={
                                    <Avatar src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2586243650,1628445668&fm=26&gp=0.jpg" />
                                }
                                title="欢迎回来，Chris"
                                description="这里是您的详情信息"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card style={{ width: 300, marginTop: 16 }} bordered={false}>
                            <Statistic
                                title="当前信用分"
                                value={710}
                                precision={2}
                                valueStyle={{ color: '#3f8600' }}
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>

                    </Col>
                    <Col span={6}>

                    </Col>
                </Row>
                <Row>
                    <Descriptions bordered>
                        <Descriptions.Item label="用户姓名">Chris</Descriptions.Item>
                        <Descriptions.Item label="性别">男</Descriptions.Item>
                        <Descriptions.Item label="年龄">25</Descriptions.Item>
                        <Descriptions.Item label="信息录入时间">2021-03-15 18:03:15</Descriptions.Item>
                        <Descriptions.Item label="信用评分时间" span={2}>
                            2021-03-15 18:15:08
                        </Descriptions.Item>
                        <Descriptions.Item label="账户地址" span={3}>
                            <a>0x10a12eB389B0Df756C63778E522C3463B7B60BD0</a>
                        </Descriptions.Item>
                        <Descriptions.Item label="当前数据状态" span={3}>
                            <Badge status="processing" text="尚未授权机构使用" />
                        </Descriptions.Item>
                        <Descriptions.Item label="名下房产数量">1</Descriptions.Item>
                        <Descriptions.Item label="贷款余额">￥200000.00</Descriptions.Item>
                        <Descriptions.Item label="月收入">￥15000.00</Descriptions.Item>
                        <Descriptions.Item label="信用历史">
                            三个月内信用卡逾期次数：<span className="normal">0</span>
                            <br />
                            半年内信用卡逾期次数: <span className="warning">1</span>
                            <br />
                            一年内信用卡逾期次数: <span className="warning">1</span>
                            <br />
                            两年内信用卡逾期次数: <span className="warning">2</span>
                            <br />
                        </Descriptions.Item>
                    </Descriptions>
                </Row>
                <a>{'>>'}更多</a>
            </div>
        )
    }

{ Countdown } = Statistic

storiesOf('antd/page-header', module).add('actions', () => 
  <>
    <PageHeader
      className="site-page-header"
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
    >
      <Descriptions size="small" column={3}>
        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
        <Descriptions.Item label="Association">
          <a>421421</a>
        </Descriptions.Item>
        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
        <Descriptions.Item label="Remarks">
          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
        </Descriptions.Item>
      </Descriptions>
    </PageHeader>
    <br />
    <PageHeader
      onBack={() => window.history.back()}
      title="Title"
      tags={<Tag color="blue">Running</Tag>}
      subTitle="This is a subtitle"
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
      ]}
    >
      <Row>
        <Statistic title="Status" value="Pending" />
        <Statistic
          title="Price"
          prefix="$"
          value={568.08}
          style={{
            margin: '0 32px',
          }}
        />
        <Statistic title="Balance" prefix="$" value={3345.08} />
      </Row>
    </PageHeader>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.</p></>) } });

{ Countdown } = Statistic

render() {
        return (
            <div className={"overview"}>
                <div className="top">
                    <Card className={"card"} title="用户概览" extra={<a href="#">More</a>}>
                        <Row>
                            <Col span={12}>
                                <Statistic
                                    title="今日注册"
                                    value={this.state.userInfo.today}
                                    precision={0}
                                    valueStyle={{color: '#3f8600'}}
                                    prefix={<ArrowUpOutlined/>}
                                    suffix="个"
                                />
                            </Col>
                            <Col span={12}>
                                <Statistic
                                    title="总人数"
                                    value={this.state.userInfo.total}
                                    precision={0}
                                    valueStyle={{color: '#3f8600'}}
                                    suffix="个"
                                />
                            </Col>
                        </Row>
                    </Card>
                    <Card className={"card"} title="讲师概览" extra={<a href="#">More</a>}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                    <Card className={"card"} title="课程概览" extra={<a href="#">More</a>}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                    <Card className={"card"} title="文章概览" extra={<a href="#">More</a>}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </div>
                <div className="content">
                    <Tabs defaultActiveKey="5" onChange={this.callback}>

                        {[5,4,3,2,1].map(value=>{
                            return <TabPane tab={value+"分评价"} key={value}>
                                <List
                                    itemLayout="horizontal"
                                    dataSource={this.state.scoreInfo}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta
                                                avatar={<Avatar src={"http://lxt.itlike.com/"+item.user_header} />}
                                                title={<a href="https://ant.design">{item.user_name}</a>}
                                                description={item.content}
                                            />
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                        })}
                    </Tabs>
                </div>
            </div>
        )
    }

render() {
    const { activeData = [] } = this.state;
    return (
      <div className={styles.activeChart}>
        <Statistic title="目标评估" value="有望达到预期" />
        <div
          style={{
            marginTop: 32,
          }}
        >
          <MiniArea
            animate={false}
            line
            borderWidth={2}
            height={84}
            scale={{
              y: {
                tickCount: 3,
              },
            }}
            yAxis={{
              tickLine: undefined,
              label: undefined,
              title: undefined,
              line: undefined,
            }}
            data={activeData}
          />
        </div>
        {activeData && (
          <div>
            <div className={styles.activeChartGrid}>
              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
            </div>
            <div className={styles.dashedLine}>
              <div className={styles.line} />
            </div>
            <div className={styles.dashedLine}>
              <div className={styles.line} />
            </div>
          </div>
        )}
        {activeData && (
          <div className={styles.activeChartLegend}>
            <span>00:00</span>
            <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
            <span>{activeData[activeData.length - 1].x}</span>
          </div>
        )}
      </div>
    );
  }

{ Countdown } = Statistic

Step3 = props => {
  const { data, dispatch } = props;

  if (!data) {
    return null;
  }

  const { payAccount, receiverAccount, receiverName, amount } = data;

  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'formAndstepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const information = (
    <div className={styles.information}>
      <Descriptions column={1}>
        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
        <Descriptions.Item label="转账金额">
          <Statistic value={amount} suffix="元" />
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
  const extra = (
    <>
      <Button type="primary" onClick={onFinish}>
        再转一笔
      </Button>
      <Button>查看账单</Button>
    </>
  );
  return (
    <Result
      status="success"
      title="操作成功"
      subTitle="预计两小时内到账"
      extra={extra}
      className={styles.result}
    >
      {information}
    </Result>
  );
}

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

Capacitors = ({ bonded_state, address, params, reserve_asset_symbol }) => {
  const [width] = useWindowSize();
  const { t } = useTranslation();
  const link = generateLink(1e4, { move_capacity: 1 }, undefined, address);
  const timeToNextMovement =
    bonded_state.lost_peg_ts +
    (bonded_state.move_capacity_timeout ||
      params.move_capacity_timeout ||
      2 * 3600);

  const isExpiry = Date.now() / 1000 > timeToNextMovement;
  const hours = Math.round(params.move_capacity_timeout / 3600);
  const minutes = Math.round(params.move_capacity_timeout - 3600 * hours) / 60;
  
  const currency =
    params.reserve_asset in config.reserves
      ? config.reserves[params.reserve_asset].name
      : reserve_asset_symbol || "";
  return (
    <div>
      <Title level={3}>{t("trade.tabs.capacitor.title", "Capacitors info")}</Title>
      <p>
        <Text type="secondary">
          {t("trade.tabs.capacitor.desc", "Capacitors store fees charged from users who moved the price away from the peg. They are used to reward those who move the price back to the peg.")}
        </Text>
      </p>
      <Space size="large" direction={width > 680 ? "horizontal" : "vertical"}>
        <Statistic
          title={
            <Label
              label={t("trade.tabs.capacitor.fast.title", "Fast capacity")}
              descr={t("trade.tabs.capacitor.fast.desc", "This capacity is immediately available to reward users who move the price back to the peg.")}
            />
          }
          value={(Number(bonded_state.fast_capacity / 10 ** params.reserve_asset_decimals) || 0).toFixed(params.reserve_asset_decimals)}
          suffix={currency}
          precision={params.reserve_asset_decimals}
        />

        <Statistic
          title={
            <Label
              label={t("trade.tabs.capacitor.slow.title", "Slow capacity")}
              descr={t("trade.tabs.capacitor.slow.desc", "This capacity is reserved for the future and will be gradually moved into the fast capacity.")}
            />
          }
          value={(Number(bonded_state.slow_capacity / 10 ** params.reserve_asset_decimals) || 0).toFixed(params.reserve_asset_decimals) || 0}
          suffix={currency}
          precision={params.reserve_asset_decimals}
        />
        <div>
          {isExpiry ? (
            <Statistic
              title={t("trade.tabs.capacitor.time_until.title", "Time until the next movement")}
              value={t("trade.tabs.capacitor.time_until.expired", "Time is expired")}
            />
          ) : (
              <>
                {!isNaN(timeToNextMovement) && (
                  <Countdown
                    title={t("trade.tabs.capacitor.time_until.title", "Time until the next movement")}
                    // format="D [days] HH:mm:ss"
                    value={moment.unix(timeToNextMovement)}
                  />
                )}
              </>
            )}
        </div>
      </Space>
      <div style={{ marginTop: 20 }}>
        <Title level={3}>{t("trade.tabs.capacitor.move.title", "Move the capacity to fast pool")}</Title>
        <p>
          <Text type="secondary">
            {t("trade.tabs.capacitor.move.desc", "The capacity can be moved from the slow to the fast pool if the price goes off-peg by more than {{threshold_distance}}% and stays there for more than {{hours}} h. {{minutes}} m.", {threshold_distance: params.threshold_distance * 100, hours, minutes})}
          </Text>
        </p>
        <QRButton type="primary" href={link} disabled={!isExpiry}>
          {t("trade.tabs.capacitor.move.btn", "Click to move")}
        </QRButton>
      </div>
    </div>
  );
}

StabilityFund = () => {
  const { t } = useTranslation();
  const [inputBuy, setInputBuy] = useState(undefined);
  const [inputRedeem, setInputRedeem] = useState(undefined);

  const buyRef = useRef(null);
  const redeemRef = useRef(null);

  const { activeWallet } = useSelector((state) => state.settings);
  const { symbol1, symbol2, reservePrice, oraclePrice, symbol4, fund_balance, fund_state, params, bonded_state, reserve_asset_symbol, fund_aa, de_state } = useSelector((state) => state.active);
  const actualParams = getParams(params, bonded_state);
  const { decimals1, decimals2, reserve_asset, reserve_asset_decimals, m, n, below_peg_timeout } = actualParams;
  const { asset1 } = bonded_state;

  const shares_supply = fund_state.shares_supply || 0;
  const s1 = bonded_state.supply1 / 10 ** decimals1;
  const s2 = bonded_state.supply2 / 10 ** decimals2;
  const p1 = m * s1 ** (m - 1) * s2 ** n;

  const t1Balance = fund_balance?.[asset1] || 0;
  const reserveBalance = fund_balance?.[reserve_asset] || 0;
  const balance = reserveBalance + p1 * 10 ** (reserve_asset_decimals - decimals1) * (t1Balance);

  const reserveBalancePercent = reserveBalance ? +Number((reserveBalance / balance) * 100).toFixed(2) : 0;
  const t1BalancePercent = t1Balance ? +Number((p1 * 10 ** (reserve_asset_decimals - decimals1) * t1Balance / balance) * 100).toFixed(2) : 0;

  const share_price = shares_supply ? balance / shares_supply : 1;

  const now = Math.floor(Date.now() / 1000);
  const timeToNextMovement = "below_peg_ts" in de_state ? de_state.below_peg_ts + below_peg_timeout : 0;
  const [isExpired, setIsExpired] = useState(timeToNextMovement <= now);

  useEffect(() => {
    const now = Math.floor(Date.now() / 1000);
    setIsExpired(timeToNextMovement <= now);
  }, [timeToNextMovement]);

  const handleChangeBuy = (ev) => {
    const value = ev.target.value;
    if (value === "") {
      setInputBuy(undefined);
    } else if (f(value) <= decimals1) {
      setInputBuy(value);
    }
  }

  const handleChangeRedeem = (ev) => {
    const value = ev.target.value;
    if (value === "") {
      setInputRedeem(undefined);
    } else if (f(value) <= decimals1) {
      setInputRedeem(value);
    }
  }
  const amountByteForBuy = Math.ceil((inputBuy * share_price) * 10 ** reserve_asset_decimals + 10000);

  const link = inputBuy && generateLink(
    amountByteForBuy,
    {},
    activeWallet,
    bonded_state.decision_engine_aa,
    reserve_asset,
  );

  const link2 = inputRedeem && generateLink(
    Math.ceil((inputRedeem) * 10 ** reserve_asset_decimals),
    {},
    activeWallet,
    bonded_state.decision_engine_aa,
    fund_state.shares_asset,
  );

  const my_share = inputRedeem * 10 ** reserve_asset_decimals / fund_state.shares_supply;
  const reserve_amount = Math.floor(my_share * fund_balance?.[reserve_asset]);
  const t1_amount = Math.floor(my_share * t1Balance);

  const linkFixedPrice = generateLink(
    1e4,
    { act: 1 },
    activeWallet,
    bonded_state.decision_engine_aa,
  );

  const handleEnterBuy = (ev) => {
    if (ev.key === "Enter") {
      if (Number(inputBuy)) {
        buyRef.current.click();
      }
    }
  };

  const handleEnterRedeem = (ev) => {
    if (ev.key === "Enter") {
      if (Number(inputRedeem)
        && isValidRedeem
      ) {
        redeemRef.current.click();
      }
    }
  };

  const obj = {
    tokens1: - t1_amount,
    tokens2: 0,
    params: actualParams,
    vars: bonded_state,
    oracle_price: oraclePrice,
    timestamp: Math.floor(Date.now() / 1000),
    reservePrice,
    isV2: !!fund_aa
  };

  const exchange = $get_exchange_result(obj);
  const you_get_in_smallest_units = (reserve_amount - exchange.reserve_needed - (reserve_asset === "base" ? 4000 : 0));
  const you_get = +Number(you_get_in_smallest_units / 10 ** reserve_asset_decimals);
  const fee_percent = (exchange.fee / you_get_in_smallest_units) * 100;
  const isValidRedeem = !!exchange?.payout && Number(exchange.payout) > 0 && you_get > 0 && Number(inputRedeem) < shares_supply / 10 ** reserve_asset_decimals && (!fee_percent || fee_percent < 100);
  const [width] = useWindowSize();
  let bPriceInversed = false;
  if ("oracles" in actualParams) {
    if (actualParams.oracles[0].op === "*" && !actualParams.leverage)
      bPriceInversed = true;
  } else {
    if (actualParams.op1 === "*" && !actualParams.leverage)
      bPriceInversed = true;
  }

  const new_p2 = exchange ? (bPriceInversed ? 1 / exchange.p2 : exchange.p2) : undefined;
  const old_p2 = bPriceInversed ? 1 / bonded_state.p2 : bonded_state.p2;
  const t_p2 = exchange ? (bPriceInversed ? 1 / exchange.target_p2 : exchange.target_p2) : undefined;
  const priceChange = exchange && new_p2 - (old_p2 || 0);
  const changePricePercent = (priceChange / old_p2 || 0) * 100;
  const changeFinalPricePercent = exchange && exchange.target_p2
    ? ((new_p2 - t_p2) / t_p2) * 100
    : 0;

  const p2Pair = (!bPriceInversed ? (symbol2 || "T2") + "/" + (reserve_asset_symbol || "RESERVE") : (reserve_asset_symbol || "RESERVE") + "/" + (symbol2 || "T2"));

  const aboveTarget = bonded_state.p2 > exchange.target_p2;
  const fixPriceDisabled = (!isExpired && !aboveTarget);

  return <div>
    <Title style={{ marginBottom: 0 }} level={3}>{t("trade.tabs.stability_fund.title", "Stability fund")}</Title>
    <Paragraph type="secondary">{t("trade.tabs.stability_fund.desc", "In v2 stablecoins, the fund is used to automatically keep the price near the peg.")}</Paragraph>


    <Title level={4}>{t("trade.tabs.stability_fund.info_title", "Fund information")}</Title>
    <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
      <div style={{ marginBottom: 25, marginRight: 25, width: width > 400 ? 300 : "100%" }}>
        <Suspense fallback={<div>Loading...</div>}>
          <Pie
            autoFit={true}
            // autoEllipsis={false}
            animation={false}
            label={
              {
                type: "inner",
                autoRotate: false,
                offset: '-50%',
                content: function content(_ref) {
                  const { value, symbol } = _ref;
                  const percent = balance ? Number(((value || 0) / ((balance) / 10 ** reserve_asset_decimals)) * 100).toFixed(2) : 0;
                  return `${symbol} ${Number(percent).toFixed(2)}%`
                }, style: {
                  fontSize: 13,
                  textAlign: 'center',
                  fontWeight: "bold"
                },
              }
            }
            meta={{
              value: {
                formatter: v => {
                  return `${Number(v).toFixed(reserve_asset_decimals)} ${reserve_asset_symbol}`;
                }
              }
            }}
            renderer="svg"
            legend={false}
            data={
              [
                { symbol: reserve_asset_symbol || "RESERVE", type: reserve_asset_symbol || "RESERVE", value: reserveBalance / 10 ** reserve_asset_decimals },
                { symbol: symbol1 || "T1", type: t1Balance / 10 ** decimals1 + " " + (symbol1 || "T1"), value: (p1 * 10 ** (reserve_asset_decimals - decimals1) * t1Balance) / 10 ** reserve_asset_decimals }
              ]
            } angleField="value" colorField="type" />
        </Suspense>
      </div>
      <div style={{ marginBottom: 25 }}>
        <Space wrap={true} size={25}>
          <Statistic title={`${symbol4 || "T_FUND"} price`} precision={decimals1} suffix={reserve_asset_symbol} value={Number(share_price).toFixed(reserve_asset_decimals)} />
          <Statistic title={`${symbol1 || "T1"} price`} precision={decimals1} suffix={reserve_asset_symbol} value={Number(p1 || 0).toFixed(decimals1)} />
        </Space>
        <Statistic style={{ marginTop: 25 }} title={t("trade.tabs.stability_fund.total_asset", "Total asset value")} valueRender={() => <span>{`${Number(reserveBalance / 10 ** reserve_asset_decimals).toFixed(decimals1)} ${reserve_asset_symbol || "RESERVE"} (${reserveBalancePercent}%)`} <br /> + {`${Number(t1Balance / 10 ** decimals1).toFixed(decimals1)} ${symbol1 || "T1"} (${t1BalancePercent}%)`} <br /> = {`${Number(balance / 10 ** reserve_asset_decimals).toFixed(reserve_asset_decimals)} ${reserve_asset_symbol}`}</span>} />
      </div>
    </div>


    <Row style={{ marginBottom: 25 }}>
      <Col xs={{ span: 24 }} md={{ span: 24 }} lg={{ span: 12 }} style={{ marginBottom: 25 }}>
        <Title level={4}>{t("trade.tabs.stability_fund.buy_title", "Buy")}</Title>
        <Paragraph type="secondary">
          {t("trade.tabs.stability_fund.buy_desc", "The GBYTE you invest will be added to the fund's reserves and you'll get its shares in exchange.")}
        </Paragraph>
        <Space wrap={true}>
          <Input onKeyPress={handleEnterBuy} style={{ width: "100%" }} placeholder={t("trade.tabs.stability_fund.amount", "Amount of shares")} value={inputBuy} onChange={handleChangeBuy} size="large" />
          <QRButton onClick={() => ReactGA.event({
            category: "Fund page",
            action: "Buy fund tokens",
            label: `Buy ${symbol4}`,
          })} ref={buyRef} href={link} size="large" disabled={!Number(inputBuy)} type="primary">{t("trade.tabs.stability_fund.send", "Send {{count}}", { count: Number(inputBuy) ? +Number(amountByteForBuy / 10 ** reserve_asset_decimals).toFixed(reserve_asset_decimals) : "" })} {reserve_asset_symbol || "RESERVE"}</QRButton>
        </Space>
        {Number(inputBuy) ? <Paragraph type="secondary">
          <div><b>{t("trade.tabs.buy_redeem.fee", "Fee")}:</b> 0</div>
          <div><b>{t("trade.tabs.buy_redeem.reward", "Reward")}:</b> 0</div>
          <div>
            <b>{"p2" in bonded_state ? t("trade.tabs.buy_redeem.price_change", "{{pair}} price change", { pair: p2Pair }) + ": " : t("trade.tabs.buy_redeem.price", "{{pair}} price", { pair: p2Pair }) + ": "}</b>
            0 (0%)
          </div>
          <div>
            <b>{t("trade.tabs.buy_redeem.final_price", "Final {{pair}} price", { pair: p2Pair })}:</b>{" "}
            {Number(old_p2).toFixed(actualParams.reserve_asset_decimals)}
          </div>
        </Paragraph> : null}
      </Col>

      <Col xs={{ span: 24 }} md={{ span: 24 }} lg={{ span: 12 }}>
        <Title level={4}>{t("trade.tabs.stability_fund.redeem_title", "Redeem")}</Title>
        <Paragraph type="secondary">
          {t("trade.tabs.stability_fund.redeem_desc", "When you redeem, you get your share of the fund's assets in reserve currency {{reserve_asset_symbol}}, plus your share of {{symbol}} is redeemed (potentially affecting the price and paying fees) and the proceeds in {{reserve_asset_symbol}} are also sent to you.", { reserve_asset_symbol, symbol: symbol1 || "T1" })}
        </Paragraph>
        <Space wrap={true} align="end">
          <Input onKeyPress={handleEnterRedeem} placeholder={t("trade.tabs.stability_fund.amount", "Amount of shares")} value={inputRedeem} onChange={handleChangeRedeem} size="large" />
          <QRButton onClick={() => ReactGA.event({
            category: "Fund page",
            action: "Sell fund tokens",
            label: `Sell ${symbol4}`,
          })} ref={redeemRef} href={link2} size="large" disabled={!isValidRedeem} type="primary">{t("trade.tabs.stability_fund.send", "Send {{count}}", { count: Number(inputRedeem) ? +Number(inputRedeem).toFixed(reserve_asset_decimals) : "" })} {symbol4 || "T_FUND"}</QRButton>
        </Space>
        {Number(inputRedeem) && isValidRedeem ? <Paragraph type="secondary">
          <div>{t("trade.tabs.buy_redeem.redeem_will_receive", "You will get {{amount}} {{symbol}}", { amount: (you_get).toFixed(reserve_asset_decimals), symbol: reserve_asset_symbol || "RESERVE" })}</div>
          <div><b>{t("trade.tabs.buy_redeem.fee", "Fee")}:</b> <span style={(fee_percent > 1) ? ((fee_percent > 3) ? { color: "red" } : { color: "orange" }) : { color: "inherit" }}>{+Number(fee_percent).toFixed(2)}%</span></div>
          <div><b>{t("trade.tabs.buy_redeem.reward", "Reward")}:</b> <span style={exchange && exchange.reward_percent > 0 ? { color: "green" } : { color: "inherit" }}>{+Number(exchange.reward_percent).toFixed(2)}%</span></div>
          <div>
            <b>{"p2" in bonded_state ? t("trade.tabs.buy_redeem.price_change", "{{pair}} price change", { pair: p2Pair }) + ": " : t("trade.tabs.buy_redeem.price", "{{pair}} price", { pair: p2Pair }) + ": "}</b>
            {priceChange > 0 ? "+" : ""}
            {priceChange.toFixed(4)}
            {"p2" in bonded_state &&
              " (" +
              (changePricePercent > 0 ? "+" : "") +
              changePricePercent.toFixed(2) +
              "%)"}
          </div>
          <div>
            <b>{t("trade.tabs.buy_redeem.final_price", "Final {{pair}} price", { pair: p2Pair })}:</b>{" "}
            {(Number(new_p2).toFixed(
              actualParams.reserve_asset_decimals
            ) + (changeFinalPricePercent ?
              ` (${Math.abs(changeFinalPricePercent).toFixed(2)}% ${changeFinalPricePercent > 0 ? t("trade.tabs.buy_redeem.above_target", "above the target") : t("trade.tabs.buy_redeem.below_target", "below the target")})` : "")) || "-"}
          </div>
        </Paragraph> : (Number(inputRedeem) && !isValidRedeem ? <div style={{ color: "#e74c3c" }}>{t("trade.tabs.buy_redeem.big_change", "The transaction would change the price too much, please try a smaller amount")}</div> : null)}
      </Col>
    </Row>

    <div style={{ marginBottom: 25 }}>
      <Title level={4}>{t("trade.tabs.stability_fund.fix_title", "Fix {{symbol}} price", { symbol: symbol2 })}</Title>
      <Space wrap={true} align="center" size={25}>
        {!isExpired && !aboveTarget ? <Countdown
          title={t("trade.tabs.stability_fund.next_fix", "Time until the next fix")}
          value={moment.unix(timeToNextMovement)}
          onFinish={() => setIsExpired(true)}
        /> : (!aboveTarget ? <Statistic
          title={t("trade.tabs.stability_fund.next_fix", "Time until the next fix")}
          value={t("trade.tabs.stability_fund.expired", "Expired")} /> : null)}
        <QRButton type="primary" onClick={() => ReactGA.event({
          category: "Fund page",
          action: "Fix price",
          label: `Fix ${symbol2} price`,
        })} disabled={fixPriceDisabled} href={linkFixedPrice}>{t("trade.tabs.stability_fund.fix_btn", "Send fix request")}</QRButton>
      </Space>
    </div>
  </div>
}

render() {

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        subTitle={<FormattedMessage id="consume-message"/>}
                        title={this.state.topic}
                    >
                        <Row>
                            <Space size='large'>
                                {
                                    this.state.topicInfo ?
                                        <>
                                            <Statistic title="Beginning Offset"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
                                            <Statistic title="End Offset"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}/>
                                            <Statistic title="Size"
                                                       value={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
                                        </>
                                        : undefined
                                }

                            </Space>
                        </Row>
                    </PageHeader>
                </div>

                <div className='kd-page-header' style={{padding: 20}}>
                    <Form ref={this.form} onFinish={this.pullMessage}
                          initialValues={{
                              count: this.state.count,
                              partition: this.state.partition,
                              autoOffsetReset: this.state.autoOffsetReset,
                          }}>
                        <Row gutter={24}>
                            <Col span={6}>
                                <Form.Item
                                    name={'partition'}
                                    label={'Partition'}
                                >
                                    <Select onChange={(value) => {
                                        this.setState({
                                            partition: value
                                        }, this.handlePartitionChange);
                                    }}>
                                        {
                                            this.state.topicInfo ?
                                                this.state.topicInfo['partitions'].map(item => {
                                                    return <Select.Option key={'p' + item['partition']}
                                                                          value={item['partition']}>{item['partition']}</Select.Option>
                                                }) : undefined
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={6}>
                                <Form.Item
                                    name={'autoOffsetReset'}
                                    label={'Auto Offset Reset'}
                                >
                                    <Select onChange={(value) => {
                                        this.setState({
                                            autoOffsetReset: value
                                        }, this.handlePartitionChange);
                                    }}>
                                        <Select.Option value="earliest">
                                            <FormattedMessage id="earliest"/>
                                        </Select.Option>
                                        <Select.Option value="newest">
                                            <FormattedMessage id="newest"/>
                                        </Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={6}>
                                <Form.Item
                                    name={'offset'}
                                    label={'Offset'}
                                >
                                    {
                                        this.state.topicInfo ?
                                            <InputNumber
                                                min={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}
                                                max={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}
                                                // defaultValue={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.count}
                                                value={this.state.offset}
                                                style={{width: '100%'}}
                                                onChange={(value) => {
                                                    this.setState({
                                                        offset: value
                                                    })
                                                }}
                                            />
                                            : undefined
                                    }

                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name={'count'}
                                    label={'Count'}
                                >
                                    <InputNumber min={1} style={{width: '100%'}}/>
                                </Form.Item>
                            </Col>

                            <Col span={6} key='keyFilter'>
                                <Form.Item
                                    name={'keyFilter'}
                                    label={'key'}
                                >
                                    <Input allowClear placeholder="filter key"/>
                                </Form.Item>

                            </Col>

                            <Col span={6} key='valueFilter'>
                                <Form.Item
                                    name={'valueFilter'}
                                    label={'value'}
                                >
                                    <Input allowClear placeholder="filter value"/>
                                </Form.Item>
                            </Col>
                            <Col span={12} style={{textAlign: 'right'}}>
                                <Space>
                                    <Button type="primary" htmlType="submit" loading={this.state.loading}>
                                        <FormattedMessage id="pull"/>
                                    </Button>

                                    <Button type="default" danger onClick={this.handleReset}>
                                        <FormattedMessage id="reset"/>
                                    </Button>
                                </Space>
                            </Col>
                        </Row>

                    </Form>
                </div>

                <div className='kd-content'>
                    <List
                        itemLayout="horizontal"
                        dataSource={this.state.items}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                        renderItem={(item, index) => {
                            const title = <>
                                <Space>
                                    <Text code>partition:</Text>
                                    <Text>{item['partition']}</Text>
                                    <Text code>key:</Text>
                                    <Text>{item['key']}</Text>
                                    <Text code>offset:</Text>
                                    <Text>{item['offset']}</Text>
                                    <Text code>timestamp:</Text>:
                                    <Tooltip
                                        title={dayjs(item['timestamp']).format("YYYY-MM-DD HH:mm:ss")}>
                                        <Text>{dayjs(item['timestamp']).fromNow()}</Text>
                                    </Tooltip>
                                </Space>
                            </>;

                            const description = <Row wrap={false}>
                                <Col flex="none">
                                    <div style={{padding: '0 5px'}}>
                                        {
                                            item['format'] ?
                                                <DownCircleTwoTone onClick={() => {
                                                    let items = this.state.items;
                                                    items[index]['format'] = undefined;
                                                    this.setState({
                                                        items: items
                                                    })
                                                }}/> :
                                                <RightCircleTwoTone onClick={() => {
                                                    let items = this.state.items;
                                                    try {
                                                        let obj = JSON.parse(items[index]['value']);
                                                        items[index]['format'] = JSON.stringify(obj, null, 4);
                                                        this.setState({
                                                            items: items
                                                        })
                                                    } catch (e) {

                                                    }
                                                }}/>
                                        }
                                    </div>
                                </Col>
                                <Col flex="auto">
                                    <pre>{item['format'] ? item['format'] : item['value']}</pre>
                                </Col>
                            </Row>;

                            return <List.Item>
                                <List.Item.Meta
                                    title={title}
                                    description={description}
                                />
                            </List.Item>;
                        }}
                    />
                </div>
            </div>
        );
    }