1import React, { Component } from 'react';
  2
  3// import {card, tx} from '../../kit/lib'
  4import { Card, Button, Timeline, Row, Col, List, Icon } from 'antd';
  5import 'antd/dist/antd.css';
  6
  7
  8import {Line, Doughnut} from 'react-chartjs-2';
  9
 10var chartLineData = {
 11  labels: ['September', 'October', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
 12  datasets: [{
 13    label: 'Balance',
 14    backgroundColor: 'rgba(54, 162, 235, 0)',
 15    borderColor: 'rgba(54, 162, 235, 1)',
 16    borderWidth: 1,
 17    hoverBackgroundColor: 'rgba(54, 162, 235,0.4)',
 18    hoverBorderColor: 'rgba(54, 162, 235,1)',
 19    data: [0, 59, 55, -50, -56, 120, 40, -20, 10, 45]
 20  }]
 21};
 22var chartDoughnutData = {
 23  labels: ['Received', 'Sended'],
 24  datasets: [{
 25    label: 'Identities use',
 26    backgroundColor: ['#36A2EB', '#FF6384'],
 27		hoverBackgroundColor: ['#36A2EB', '#FF6384'],
 28    data: [25, 20]
 29  }]
 30};
 31
 32const listData = [
 33  'New transaction received',
 34  'Sended new transaction'
 35];
 36
 37class dashboard extends Component {
 38  constructor(props) {
 39    super(props);
 40    this.state = {
 41    };
 42
 43  }
 44  render() {
 45    return (
 46      <div>
 47        <Row gutter={16}>
 48          <Col span={8}>
 49            <Line
 50              height={200}
 51              data={chartLineData}
 52            />
 53          </Col>
 54          <Col span={8}>
 55            <Card title="Notifications" extra={<a href="#">More</a>}>
 56              <List>
 57                <List.Item>
 58                  <Icon type="check" /> Transaction received
 59                </List.Item>
 60                <List.Item>
 61                  <Icon type="check" /> Transaction sended
 62                </List.Item>
 63                <List.Item>
 64                  <Icon type="export" /> Backup imported
 65                </List.Item>
 66                <List.Item>
 67                  <Icon type="save" /> Backup exported
 68                </List.Item>
 69              </List>
 70            </Card>
 71          </Col>
 72        </Row>
 73        <br/>
 74          <Row gutter={16}>
 75            <Col span={8}>
 76              <Card title="Last transactions" extra={<a href="#">More</a>}>
 77                <Timeline>
 78                  <Timeline.Item color="green">
 79                    Received 10 credits · <i>2018-08-07</i>
 80                  </Timeline.Item>
 81                  <Timeline.Item color="red">
 82                    Sended 20 credits · <i>2018-08-06</i>
 83                  </Timeline.Item>
 84                  <Timeline.Item color="green">
 85                    Received 15 credits · <i>2018-08-05</i>
 86                  </Timeline.Item>
 87                  <Timeline.Item color="red">
 88                    Sended 20 credits · <i>2018-08-05</i>
 89                  </Timeline.Item>
 90                  <Timeline.Item color="green">
 91                    Received 15 credits · <i>2018-08-04</i>
 92                  </Timeline.Item>
 93                  <Timeline.Item>
 94                    Account created · <i>2018-08-03</i>
 95                  </Timeline.Item>
 96                </Timeline>
 97              </Card>
 98            </Col>
 99
100              <Col span={8}>
101                <Doughnut
102                  height={200}
103                  data={chartDoughnutData}
104                />
105              </Col>
106          </Row>
107
108      </div>
109    );
110  }
111}
112
113export default dashboard;