2018-11-06 12:03:04 +01:00
|
|
|
import { Col, Row, notification, Card, Tooltip, Icon, Spin } from "antd"
|
2018-11-05 06:49:08 +01:00
|
|
|
import React from "react";
|
2018-11-06 10:44:26 +01:00
|
|
|
import { Chart, Axis, Geom, Tooltip as BizTooltip } from 'bizcharts';
|
2018-11-05 06:49:08 +01:00
|
|
|
|
|
|
|
import * as cs from "./constants"
|
2018-10-25 15:51:47 +02:00
|
|
|
|
2018-11-03 13:23:22 +01:00
|
|
|
class Dashboard extends React.PureComponent {
|
2018-11-05 06:49:08 +01:00
|
|
|
state = {
|
2018-11-06 12:03:04 +01:00
|
|
|
stats: null,
|
|
|
|
loading: true
|
2018-11-05 06:49:08 +01:00
|
|
|
}
|
|
|
|
|
2018-11-06 10:44:26 +01:00
|
|
|
campaignTypes = ["running", "finished", "paused", "draft", "scheduled", "cancelled"]
|
|
|
|
|
2018-11-05 06:49:08 +01:00
|
|
|
componentDidMount = () => {
|
|
|
|
this.props.pageTitle("Dashboard")
|
|
|
|
this.props.request(cs.Routes.GetDashboarcStats, cs.MethodGet).then((resp) => {
|
2018-11-06 12:03:04 +01:00
|
|
|
this.setState({ stats: resp.data.data, loading: false })
|
2018-11-05 06:49:08 +01:00
|
|
|
}).catch(e => {
|
|
|
|
notification["error"]({ message: "Error", description: e.message })
|
2018-11-06 12:03:04 +01:00
|
|
|
this.setState({ loading: false })
|
2018-11-05 06:49:08 +01:00
|
|
|
})
|
|
|
|
}
|
2018-11-06 10:44:26 +01:00
|
|
|
|
|
|
|
orZero(v) {
|
|
|
|
return v ? v : 0
|
|
|
|
}
|
2018-11-05 06:49:08 +01:00
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<section className = "dashboard">
|
|
|
|
<h1>Welcome</h1>
|
2018-11-06 10:44:26 +01:00
|
|
|
<hr />
|
2018-11-06 12:03:04 +01:00
|
|
|
<Spin spinning={ this.state.loading }>
|
2018-11-05 06:49:08 +01:00
|
|
|
{ this.state.stats &&
|
|
|
|
<div className="stats">
|
|
|
|
<Row>
|
2018-11-06 10:44:26 +01:00
|
|
|
<Col span={ 16 }>
|
|
|
|
<Row gutter={ 24 }>
|
|
|
|
<Col span={ 8 }>
|
|
|
|
<Card title="Active subscribers" bordered={ false }>
|
|
|
|
<h1 className="count">{ this.orZero(this.state.stats.subscribers.enabled) }</h1>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col span={ 8 }>
|
|
|
|
<Card title="Blacklisted subscribers" bordered={ false }>
|
|
|
|
<h1 className="count">{ this.orZero(this.state.stats.subscribers.blacklisted) }</h1>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col span={ 8 }>
|
|
|
|
<Card title="Orphaned subscribers" bordered={ false }>
|
|
|
|
<h1 className="count">{ this.orZero(this.state.stats.orphan_subscribers) }</h1>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span={ 6 } offset={ 2 }>
|
|
|
|
<Row gutter={ 24 }>
|
|
|
|
<Col span={ 12 }>
|
|
|
|
<Card title="Public lists" bordered={ false }>
|
|
|
|
<h1 className="count">{ this.orZero(this.state.stats.lists.public) }</h1>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col span={ 12 }>
|
|
|
|
<Card title="Private lists" bordered={ false }>
|
|
|
|
<h1 className="count">{ this.orZero(this.state.stats.lists.private) }</h1>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<hr />
|
|
|
|
<Row>
|
|
|
|
<Col span={ 16 }>
|
|
|
|
<Row gutter={ 24 }>
|
|
|
|
<Col span={ 12 }>
|
|
|
|
<Card title="Campaign views (last 3 months)" bordered={ false }>
|
|
|
|
<h1 className="count">
|
|
|
|
{ this.state.stats.campaign_views.reduce((total, v) => total + v.count, 0) }
|
|
|
|
{' '}
|
|
|
|
views
|
|
|
|
</h1>
|
|
|
|
<Chart height={ 220 } padding={ [0, 0, 0, 0] } data={ this.state.stats.campaign_views } forceFit>
|
|
|
|
<BizTooltip crosshairs={{ type : "y" }} />
|
|
|
|
<Geom type="area" position="date*count" size={ 0 } color="#7f2aff" />
|
|
|
|
<Geom type='point' position="date*count" size={ 0 } />
|
|
|
|
</Chart>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col span={ 12 }>
|
|
|
|
<Card title="Link clicks (last 3 months)" bordered={ false }>
|
|
|
|
<h1 className="count">
|
|
|
|
{ this.state.stats.link_clicks.reduce((total, v) => total + v.count, 0) }
|
|
|
|
{' '}
|
|
|
|
clicks
|
|
|
|
</h1>
|
|
|
|
<Chart height={ 220 } padding={ [0, 0, 0, 0] } data={ this.state.stats.link_clicks } forceFit>
|
|
|
|
<BizTooltip crosshairs={{ type : "y" }} />
|
|
|
|
<Geom type="area" position="date*count" size={ 0 } color="#7f2aff" />
|
|
|
|
<Geom type='point' position="date*count" size={ 0 } />
|
|
|
|
</Chart>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Col span={ 6 } offset={ 2 }>
|
|
|
|
<Card title="Campaigns" bordered={ false } className="campaign-counts">
|
2018-11-06 11:48:52 +01:00
|
|
|
{ this.campaignTypes.map((key) =>
|
2018-11-06 10:44:26 +01:00
|
|
|
<Row key={ `stats-campaigns-${ key }` }>
|
|
|
|
<Col span={ 18 }><h1 className="name">{ key }</h1></Col>
|
2018-11-06 11:48:52 +01:00
|
|
|
<Col span={ 6 }>
|
|
|
|
<h1 className="count">
|
|
|
|
{ this.state.stats.campaigns.hasOwnProperty(key) ?
|
|
|
|
this.state.stats.campaigns[key] : 0 }
|
|
|
|
</h1>
|
|
|
|
</Col>
|
2018-11-06 10:44:26 +01:00
|
|
|
</Row>
|
|
|
|
)}
|
|
|
|
</Card>
|
2018-11-05 06:49:08 +01:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
}
|
2018-11-06 12:03:04 +01:00
|
|
|
</Spin>
|
2018-11-05 06:49:08 +01:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2018-10-25 15:51:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Dashboard;
|