antd#Statistic JavaScript Examples
The following examples show how to use
antd#Statistic.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From prometheusPro with MIT License | 6 votes |
|
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>
)
Example #2
| Source File: unit.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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></>) } });
Example #3
| Source File: card.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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></>) } });
Example #4
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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></>) } });
Example #5
| Source File: responsive.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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>
)
Example #6
| Source File: statistics.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Statistic title={this.state.title} value={this.state.value}/>
</div>
)
}
Example #7
| Source File: countDown.js From acy-dex-interface with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #8
| Source File: github_rate_limit_status_bar_countdown.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
{Countdown} = Statistic
Example #9
| Source File: statistics_components.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Statistic title={this.props.title} value={this.props.value}/>
</div>
)
}
Example #10
| Source File: settings.js From hashcat.launcher with MIT License | 5 votes |
|
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>
</>
)
}
Example #11
| Source File: UserDashboard.js From credit with Apache License 2.0 | 5 votes |
|
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>
)
}
Example #12
| Source File: Game.js From crypto-mind with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #13
| Source File: actions.jsx From virtuoso-design-system with MIT License | 5 votes |
|
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></>) } });
Example #14
| Source File: countdown.jsx From virtuoso-design-system with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #15
| Source File: index.js From one_month_code with Apache License 2.0 | 5 votes |
|
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>
)
}
Example #16
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
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>
);
}
Example #17
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #18
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
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>
);
}
Example #19
| Source File: UserCheck.js From aircon with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #20
| Source File: CountDown.js From acy-dex-interface with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #21
| Source File: Capacitors.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #22
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
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>
);
}
Example #23
| Source File: GovernanceItem.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #24
| Source File: Dash.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #25
| Source File: StabilityFund.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
{ Countdown } = Statistic
Example #26
| Source File: MainWindow.js From ikago-web with MIT License | 4 votes |
|
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>
);
}
Example #27
| Source File: index.jsx From prometheusPro with MIT License | 4 votes |
|
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>
);
}
Example #28
| Source File: run.js From QiskitFlow with Apache License 2.0 | 4 votes |
|
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>
)
}
Example #29
| Source File: index.jsx From prometheusPro with MIT License | 4 votes |
|
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>
);
}
