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