antd#Statistic JavaScript Examples

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

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

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('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></>) } });

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

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

            </div>
        )
    }

{ Countdown } = Statistic

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

{ Countdown } = Statistic

{ Countdown } = Statistic

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

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

{ Countdown } = Statistic

render() {
    return (
      <Layout>
        <Header className="header">
          <a className="header-a" href="https://github.com/zhxie/ikago">
            <img className="header-icon" src={logo} alt="icon" />
          </a>
          <p className="header-title">{this.state.name}</p>
          <p className="header-subtitle">{this.state.version}</p>
        </Header>
        <Content className="content">
          <Row gutter={16}>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  prefix={(() => {
                    if (this.state.active) {
                      return <CheckOutlined />;
                    } else if (this.state.inactive) {
                      return <WarningOutlined />;
                    } else {
                      return <LoadingOutlined />;
                    }
                  })()}
                  title="Status"
                  value={(() => {
                    if (this.state.active) {
                      return 'Active';
                    } else if (this.state.inactive) {
                      return 'Inactive';
                    } else {
                      return 'Connecting';
                    }
                  })()}
                  valueStyle={{
                    color: (() => {
                      if (!this.state.inactive) {
                        return '#000';
                      } else {
                        return '#cf1322';
                      }
                    })()
                  }}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  precision={2}
                  prefix={<ClockCircleOutlined />}
                  title="Operation Time"
                  value={this.convertTime(this.state.time)}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    showTotal: !this.state.showTotal
                  });
                }}
              >
                <Statistic
                  precision={1}
                  prefix={<ArrowUpOutlined />}
                  suffix={(() => {
                    if (this.state.showTotal) {
                      return this.mapSizeUnit(this.state.outboundSizeTotal);
                    } else {
                      return this.mapSizeUnit(this.state.outboundSize) + '/s';
                    }
                  })()}
                  title="Outbound"
                  value={(() => {
                    if (this.state.showTotal) {
                      return this.convertSize(this.state.outboundSizeTotal);
                    } else {
                      return this.convertSize(this.state.outboundSize);
                    }
                  })()}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    showTotal: !this.state.showTotal
                  });
                }}
              >
                <Statistic
                  precision={1}
                  prefix={<ArrowDownOutlined />}
                  suffix={(() => {
                    if (this.state.showTotal) {
                      return this.mapSizeUnit(this.state.inboundSizeTotal);
                    } else {
                      return this.mapSizeUnit(this.state.inboundSize) + '/s';
                    }
                  })()}
                  title="Inbound"
                  value={(() => {
                    if (this.state.showTotal) {
                      return this.convertSize(this.state.inboundSizeTotal);
                    } else {
                      return this.convertSize(this.state.inboundSize);
                    }
                  })()}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  prefix={<HourglassOutlined />}
                  suffix={this.state.ping < 0 ? '' : 'ms'}
                  title="Delay"
                  value={(() => {
                    if (this.state.ping === -1) {
                      return 'N/A';
                    } else if (this.state.ping === -2) {
                      return 'Timeout';
                    } else {
                      return this.state.ping;
                    }
                  })()}
                  valueStyle={{
                    color: (() => {
                      if (this.state.ping === -2) {
                        return '#cf1322';
                      } else if (this.state.ping >= 100) {
                        return '#faad14';
                      } else {
                        return '#000';
                      }
                    })()
                  }}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    configure: true
                  });
                }}
              >
                <Statistic prefix={<SettingOutlined />} title="Configure" value={this.convertPath(this.state.path)} />
              </Card>
              <ConfigurationForm
                visible={this.state.configure}
                onOk={(values) => {
                  localStorage.setItem('path', values.path);
                  localStorage.setItem('showTotal', values.showTotal ? 'true' : 'false');
                  this.setState({
                    configure: false,
                    path: values.path,
                    showTotal: values.showTotal,
                    active: this.state.path !== values.path ? false : this.state.active,
                    inactive: this.state.path !== values.path ? false : this.state.inactive
                  });
                }}
                onCancel={() => {
                  this.setState({
                    configure: false
                  });
                }}
                initialValues={{ path: this.state.path, showTotal: this.state.showTotal }}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="content-col-table" sm={24} md={24} lg={12}>
              <Table dataSource={this.mapNodes(this.state.local)} pagination={false} size="middle">
                <Column title="Source" key="source" align="left" render={this.showNode} />
                <Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
                <Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
              </Table>
            </Col>
            <Col className="content-col-table" sm={24} md={24} lg={12}>
              <Table dataSource={this.mapNodes(this.state.remote)} pagination={false} size="middle">
                <Column title="Destination" key="source" align="left" render={this.showNode} />
                <Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
                <Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
              </Table>
            </Col>
          </Row>
        </Content>
      </Layout>
    );
  }

Step2 = props => {
  const { form, data, dispatch, submitting } = props;

  if (!data) {
    return null;
  }

  const { getFieldDecorator, validateFields, getFieldsValue } = form;

  const onPrev = () => {
    if (dispatch) {
      const values = getFieldsValue();
      dispatch({
        type: 'formAndstepForm/saveStepFormData',
        payload: { ...data, ...values },
      });
      dispatch({
        type: 'formAndstepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const onValidateForm = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        if (dispatch) {
          dispatch({
            type: 'formAndstepForm/submitStepForm',
            payload: { ...data, ...values },
          });
        }
      }
    });
  };

  const { payAccount, receiverAccount, receiverName, amount } = data;
  return (
    <Form layout="horizontal" className={styles.stepForm}>
      <Alert
        closable
        showIcon
        message="确认转账后，资金将直接打入对方账户，无法退回。"
        style={{
          marginBottom: 24,
        }}
      />
      <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>
      <Divider
        style={{
          margin: '24px 0',
        }}
      />
      <Form.Item {...formItemLayout} label="支付密码" required={false}>
        {getFieldDecorator('password', {
          initialValue: '123456',
          rules: [
            {
              required: true,
              message: '需要支付密码才能进行支付',
            },
          ],
        })(
          <Input
            type="password"
            autoComplete="off"
            style={{
              width: '80%',
            }}
          />,
        )}
      </Form.Item>
      <Form.Item
        style={{
          marginBottom: 8,
        }}
        wrapperCol={{
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: formItemLayout.wrapperCol.span,
            offset: formItemLayout.labelCol.span,
          },
        }}
        label=""
      >
        <Button type="primary" onClick={onValidateForm} loading={submitting}>
          提交
        </Button>
        <Button
          onClick={onPrev}
          style={{
            marginLeft: 8,
          }}
        >
          上一步
        </Button>
      </Form.Item>
    </Form>
  );
}

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

render() {
    const { dashboardAndmonitor, loading } = this.props;
    const { tags } = dashboardAndmonitor;
    return (
      <GridContent>
        <React.Fragment>
          <Row gutter={24}>
            <Col
              xl={18}
              lg={24}
              md={24}
              sm={24}
              xs={24}
              style={{
                marginBottom: 24,
              }}
            >
              <Card title="活动实时交易情况" bordered={false}>
                <Row>
                  <Col md={6} sm={12} xs={24}>
                    <Statistic
                      title="今日交易总额"
                      suffix="元"
                      value={numeral(124543233).format('0,0')}
                    />
                  </Col>
                  <Col md={6} sm={12} xs={24}>
                    <Statistic title="销售目标完成率" value="92%" />
                  </Col>
                  <Col md={6} sm={12} xs={24}>
                    <Countdown title="活动剩余时间" value={deadline} format="HH:mm:ss:SSS" />
                  </Col>
                  <Col md={6} sm={12} xs={24}>
                    <Statistic
                      title="每秒交易总额"
                      suffix="元"
                      value={numeral(234).format('0,0')}
                    />
                  </Col>
                </Row>
                <div className={styles.mapChart}>
                  <Map></Map>
                </div>
              </Card>
            </Col>
            <Col xl={6} lg={24} md={24} sm={24} xs={24}>
              <Card
                title="活动情况预测"
                style={{
                  marginBottom: 24,
                }}
                bordered={false}
              >
                <ActiveChart />
              </Card>
              <Card
                title="券核效率"
                style={{
                  marginBottom: 24,
                }}
                bodyStyle={{
                  textAlign: 'center',
                }}
                bordered={false}
              >
                <Gauge title="跳出率" height={180} percent={87} />
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col
              xl={12}
              lg={24}
              sm={24}
              xs={24}
              style={{
                marginBottom: 24,
              }}
            >
              <Card title="各品类占比" bordered={false} className={styles.pieCard}>
                <Row
                  style={{
                    padding: '16px 0',
                  }}
                >
                  <Col span={8}>
                    <Pie
                      animate={false}
                      percent={28}
                      title="中式快餐"
                      total="28%"
                      height={128}
                      lineWidth={2}
                    />
                  </Col>
                  <Col span={8}>
                    <Pie
                      animate={false}
                      color="#5DDECF"
                      percent={22}
                      title="西餐"
                      total="22%"
                      height={128}
                      lineWidth={2}
                    />
                  </Col>
                  <Col span={8}>
                    <Pie
                      animate={false}
                      color="#2FC25B"
                      percent={32}
                      title="火锅"
                      total="32%"
                      height={128}
                      lineWidth={2}
                    />
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col
              xl={6}
              lg={12}
              sm={24}
              xs={24}
              style={{
                marginBottom: 24,
              }}
            >
              <Card
                title="热门搜索"
                loading={loading}
                bordered={false}
                bodyStyle={{
                  overflow: 'hidden',
                }}
              >
                <TagCloud data={tags || []} height={161} />
              </Card>
            </Col>
            <Col
              xl={6}
              lg={12}
              sm={24}
              xs={24}
              style={{
                marginBottom: 24,
              }}
            >
              <Card
                title="资源剩余"
                bodyStyle={{
                  textAlign: 'center',
                  fontSize: 0,
                }}
                bordered={false}
              >
                <WaterWave height={161} title="补贴资金剩余" percent={34} />
              </Card>
            </Col>
          </Row>
        </React.Fragment>
      </GridContent>
    );
  }