covid19-tracker-reactJS/src/components/CountryData.js at master · lanru2001/covid19-tracker-reactJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { Component } from 'react';
import {
  Container,
  Row,
  Col,
  Card,
  CardBody,
  Button,
  CardDeck,
} from 'reactstrap';
import Chart from 'react-google-charts';

export class CountryData extends Component {
  componentDidMount() {
    this.props.getCountryData(this.props.match.params.country);
  }

  render() {
    return (
      <div style={{ marginTop: '70px' }}>
        <Container>
          <Row>
            <Col xs='8'>
              <Card inverse body outline color='primary'>
                <CardBody>
                  <h2 style={{ color: 'black' }}>
                    {this.props.country.country} - Covid-19 Overview
                  </h2>
                  <CardDeck style={{ marginTop: '20px', marginLeft: '50px' }}>
                    <Card body inverse color='info' className='text-center'>
                      <h3>{this.props.country.cases}</h3>
                      <h4>Confirmed</h4>
                    </Card>
                    <Card body inverse color='danger' className='text-center'>
                      <h3>{this.props.country.deaths}</h3>
                      <h4>Deaths</h4>
                    </Card>
                    <Card body inverse color='success' className='text-center'>
                      <h3>{this.props.country.recovered}</h3>
                      <h4>Recovered</h4>
                    </Card>
                    <div>
                      <Chart
                        width={'500px'}
                        height={'300px'}
                        style={{ marginLeft: '50px' }}
                        chartType='PieChart'
                        loader={<div>Loading....</div>}
                        data={[
                          ['Task', 'Hours per Day'],
                          ['', ''],
                          ['Deaths', this.props.country.deaths],
                          ['Active', this.props.country.active],
                          ['Recovered', this.props.country.recovered],
                        ]}
                        options={{
                          title: 'Overview in Percentage',
                        }}
                      />
                    </div>
                  </CardDeck>
                </CardBody>
              </Card>
            </Col>
            <Col xs='4'>
              <Card style={{}} inverse body outline color='primary'>
                <CardBody>
                  <div
                    style={{
                      color: 'black',
                      textAlign: 'center',
                      marginTop: '-20px',
                    }}
                  >
                    <h2>{this.props.country.critical} </h2>{' '}
                    <h3>Critical Cases treated in ICU</h3>
                    <hr></hr>
                  </div>
                  <Card>
                    <Button disabled color='primary'>
                      <h4>Today</h4>
                    </Button>
                    <CardBody>
                      <Card
                        body
                        inverse
                        color='warning'
                        className='text-center'
                      >
                        <h3>{this.props.country.todayCases}</h3>
                        <h4>New Cases</h4>
                      </Card>
                      <Card
                        body
                        inverse
                        color='danger'
                        className='text-center'
                        style={{ marginTop: '20px' }}
                      >
                        <h3>{this.props.country.todayDeaths}</h3>
                        <h4>New Deaths</h4>
                      </Card>
                    </CardBody>
                  </Card>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Container>
        <h1></h1>
      </div>
    );
  }
}

export default CountryData;