@ant-design/icons#ArrowUpOutlined JavaScript Examples

OverallIndicator = ({ className, metrics }) => {
  return (
    <div className={'overall-indicator ' + className}>
      {metrics.map(
        ({ label, value, arrow = { direction: 'up', type: 'success ' } }) => (
          <OverallItem
            key={JSON.stringify({ label, value })}
            arrow={arrow}
            className='overall-indicator__item'
          >
            <p className='value'>
              {format(value)}{' '}
              {arrow.direction === 'up' ? (
                <ArrowUpOutlined />
              ) : (
                <ArrowDownOutlined />
              )}
            </p>
            <h3 className='title'>{label}</h3>
          </OverallItem>
        )
      )}
    </div>
  );
}

aiAction = {
  left: {
    icon: <ArrowLeftOutlined />,
    name: "左转弯",
    action: { speed: 1, direction: 1 },
    label: 0,
  },
  right: {
    icon: <ArrowRightOutlined />,
    name: "右转弯",
    action: { speed: 1, direction: -1 },
    label: 1,
  },
  forward: {
    icon: <ArrowUpOutlined />,
    name: "前进",
    action: { speed: 1, direction: 0 },
    label: 2,
  },
  back: {
    icon: <ArrowDownOutlined />,
    action: { speed: -1, direction: 0 },
    name: "后退",
    label: 3,
  },
  stop: {
    icon: <PauseOutlined />,
    action: { speed: 0, direction: 0 },
    name: "停止",
    label: 4,
  },
}

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

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

export default function Dashboard() {
  const entity = 'invoice213';
  const dataTableColumns = [
    {
      title: 'N#',
      dataIndex: 'number',
    },
    {
      title: 'Client',
      dataIndex: ['client', 'company'],
    },

    {
      title: 'Total',
      dataIndex: 'total',

      render: (total) => `$ ${total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' '),
    },
    {
      title: 'Status',
      dataIndex: 'status',
      render: (status) => {
        let color = status === 'Draft' ? 'volcano' : 'green';

        return <Tag color={color}>{status.toUpperCase()}</Tag>;
      },
    },
  ];
  const config = { entity, dataTableColumns };

  return (
    <DashboardLayout>
      <Row gutter={[24, 24]}>
        <TopCard
          title={'Invoice'}
          tagColor={'cyan'}
          prefix={'This month'}
          tagContent={'34 000 $'}
        />
        <TopCard
          title={'Quote'}
          tagColor={'purple'}
          prefix={'This month'}
          tagContent={'34 000 $'}
        />
        <TopCard
          title={'Payment'}
          tagColor={'green'}
          prefix={'This month'}
          tagContent={'34 000 $'}
        />
        <TopCard
          title={'Due Balance'}
          tagColor={'red'}
          prefix={'Not Paid'}
          tagContent={'34 000 $'}
        />
      </Row>
      <div className="space30"></div>
      <Row gutter={[24, 24]}>
        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 18 }}
        >
          <div className="whiteBox shadow" style={{ minHeight: '380px' }}>
            <Row className="pad10" gutter={[0, 0]}>
              <Col
                className="gutter-row"
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 8 }}
                lg={{ span: 8 }}
              >
                <div className="pad15">
                  <h3
                    style={{
                      color: '#22075e',
                      marginBottom: 15,
                    }}
                  >
                    Invoice Preview
                  </h3>
                  <PreviewState tag={'Draft'} color={'grey'} value={3} />
                  <PreviewState tag={'Pending'} color={'bleu'} value={5} />
                  <PreviewState tag={'Not Paid'} color={'orange'} value={12} />
                  <PreviewState tag={'Overdue'} color={'red'} value={6} />
                  <PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
                  <PreviewState tag={'Paid'} color={'green'} value={55} />
                </div>
              </Col>
              <Col
                className="gutter-row"
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 8 }}
                lg={{ span: 8 }}
              >
                {' '}
                <div className="pad15">
                  <h3
                    style={{
                      color: '#22075e',
                      marginBottom: 15,
                    }}
                  >
                    Quote Preview
                  </h3>
                  <PreviewState tag={'Draft'} color={'grey'} value={3} />
                  <PreviewState tag={'Pending'} color={'bleu'} value={5} />
                  <PreviewState tag={'Not Paid'} color={'orange'} value={12} />
                  <PreviewState tag={'Overdue'} color={'red'} value={6} />
                  <PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
                  <PreviewState tag={'Paid'} color={'green'} value={55} />
                </div>
              </Col>
              <Col
                className="gutter-row"
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 8 }}
                lg={{ span: 8 }}
              >
                {' '}
                <div className="pad15">
                  <h3
                    style={{
                      color: '#22075e',
                      marginBottom: 15,
                    }}
                  >
                    Offer Preview
                  </h3>
                  <PreviewState tag={'Draft'} color={'grey'} value={3} />
                  <PreviewState tag={'Pending'} color={'bleu'} value={5} />
                  <PreviewState tag={'Not Paid'} color={'orange'} value={12} />
                  <PreviewState tag={'Overdue'} color={'red'} value={6} />
                  <PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
                  <PreviewState tag={'Paid'} color={'green'} value={55} />
                </div>
              </Col>
            </Row>
          </div>
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 0 }}
          sm={{ span: 0 }}
          md={{ span: 0 }}
          lg={{ span: 6 }}
        >
          <div className="whiteBox shadow" style={{ height: '380px' }}>
            <div
              className="pad20"
              style={{
                textAlign: 'center',
                justifyContent: 'center',
              }}
            >
              <h3 style={{ color: '#22075e', marginBottom: 30 }}>Customer Preview</h3>

              <Progress type="dashboard" percent={25} width={148} />
              <p>New Customer this Month</p>
              <Divider />
              <Statistic
                title="Active Customer"
                value={11.28}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </div>
          </div>
        </Col>
      </Row>
      <div className="space30"></div>
      <Row gutter={[24, 24]}>
        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 12 }}
          lg={{ span: 12 }}
        >
          <div className="whiteBox shadow">
            <div className="pad20">
              <h3 style={{ color: '#22075e', marginBottom: 5 }}>Recent Invoices</h3>
            </div>

            <RecentTable entity={'invoice'} dataTableColumns={dataTableColumns} />
          </div>
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 12 }}
          lg={{ span: 12 }}
        >
          <div className="whiteBox shadow">
            <div className="pad20">
              <h3 style={{ color: '#22075e', marginBottom: 5 }}>Recent Quotes</h3>
            </div>
            <RecentTable entity={'quote'} dataTableColumns={dataTableColumns} />
          </div>
        </Col>
      </Row>
    </DashboardLayout>
  );
}

export default function Dashboard() {
  const leadColumns = [
    {
      title: "Client",
      dataIndex: "client",
    },
    {
      title: "phone",
      dataIndex: "phone",
    },
    {
      title: "Status",
      dataIndex: "status",
      render: (status) => {
        let color = status === "pending" ? "volcano" : "green";

        return <Tag color={color}>{status.toUpperCase()}</Tag>;
      },
    },
  ];

  const productColumns = [
    {
      title: "Product Name",
      dataIndex: "productName",
    },

    {
      title: "Price",
      dataIndex: "price",
    },
    {
      title: "Status",
      dataIndex: "status",
      render: (status) => {
        let color = status === "available" ? "green" : "volcano";

        return <Tag color={color}>{status.toUpperCase()}</Tag>;
      },
    },
  ];

  return (
    <DashboardLayout>
      <Row gutter={[24, 24]}>
        <TopCard
          title={"Leads"}
          tagColor={"cyan"}
          prefix={"This month"}
          tagContent={"34 000 $"}
        />
        <TopCard
          title={"Order"}
          tagColor={"purple"}
          prefix={"This month"}
          tagContent={"34 000 $"}
        />
        <TopCard
          title={"Payment"}
          tagColor={"green"}
          prefix={"This month"}
          tagContent={"34 000 $"}
        />
        <TopCard
          title={"Due Balance"}
          tagColor={"red"}
          prefix={"Not Paid"}
          tagContent={"34 000 $"}
        />
      </Row>
      <div className="space30"></div>
      <Row gutter={[24, 24]}>
        <Col className="gutter-row" span={18}>
          <div className="whiteBox shadow" style={{ height: "380px" }}>
            <Row className="pad10" gutter={[0, 0]}>
              <Col className="gutter-row" span={8}>
                <div className="pad15">
                  <h3 style={{ color: "#22075e", marginBottom: 15 }}>
                    Lead Preview
                  </h3>
                  <PreviewState tag={"Draft"} color={"grey"} value={3} />
                  <PreviewState tag={"Pending"} color={"bleu"} value={5} />
                  <PreviewState tag={"Not Paid"} color={"orange"} value={12} />
                  <PreviewState tag={"Overdue"} color={"red"} value={6} />
                  <PreviewState
                    tag={"Partially Paid"}
                    color={"cyan"}
                    value={8}
                  />
                  <PreviewState tag={"Paid"} color={"green"} value={55} />
                </div>
              </Col>
              <Col className="gutter-row" span={8}>
                {" "}
                <div className="pad15">
                  <h3 style={{ color: "#22075e", marginBottom: 15 }}>
                    Quote Preview
                  </h3>
                  <PreviewState tag={"Draft"} color={"grey"} value={3} />
                  <PreviewState tag={"Pending"} color={"bleu"} value={5} />
                  <PreviewState tag={"Not Paid"} color={"orange"} value={12} />
                  <PreviewState tag={"Overdue"} color={"red"} value={6} />
                  <PreviewState
                    tag={"Partially Paid"}
                    color={"cyan"}
                    value={8}
                  />
                  <PreviewState tag={"Paid"} color={"green"} value={55} />
                </div>
              </Col>
              <Col className="gutter-row" span={8}>
                {" "}
                <div className="pad15">
                  <h3 style={{ color: "#22075e", marginBottom: 15 }}>
                    Order Preview
                  </h3>
                  <PreviewState tag={"Draft"} color={"grey"} value={3} />
                  <PreviewState tag={"Pending"} color={"bleu"} value={5} />
                  <PreviewState tag={"Not Paid"} color={"orange"} value={12} />
                  <PreviewState tag={"Overdue"} color={"red"} value={6} />
                  <PreviewState
                    tag={"Partially Paid"}
                    color={"cyan"}
                    value={8}
                  />
                  <PreviewState tag={"Paid"} color={"green"} value={55} />
                </div>
              </Col>
            </Row>
          </div>
        </Col>

        <Col className="gutter-row" span={6}>
          <div className="whiteBox shadow" style={{ height: "380px" }}>
            <div
              className="pad20"
              style={{ textAlign: "center", justifyContent: "center" }}
            >
              <h3 style={{ color: "#22075e", marginBottom: 30 }}>
                Customer Preview
              </h3>

              <Progress type="dashboard" percent={25} width={148} />
              <p>New Customer this Month</p>
              <Divider />
              <Statistic
                title="Active Customer"
                value={11.28}
                precision={2}
                valueStyle={{ color: "#3f8600" }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </div>
          </div>
        </Col>
      </Row>
      <div className="space30"></div>
      <Row gutter={[24, 24]}>
        <Col className="gutter-row" span={12}>
          <div className="whiteBox shadow">
            <div className="pad20">
              <h3 style={{ color: "#22075e", marginBottom: 5 }}>
                Recent Leads
              </h3>
            </div>

            <RecentTable entity={"lead"} dataTableColumns={leadColumns} />
          </div>
        </Col>

        <Col className="gutter-row" span={12}>
          <div className="whiteBox shadow">
            <div className="pad20">
              <h3 style={{ color: "#22075e", marginBottom: 5 }}>
                Recent Products
              </h3>
            </div>
            <RecentTable entity={"product"} dataTableColumns={productColumns} />
          </div>
        </Col>
      </Row>
    </DashboardLayout>
  );
}

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