Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Parul Sharma authored and Parul Sharma committed Apr 24, 2020
1 parent 95b8db8 commit 99bf392
Show file tree
Hide file tree
Showing 15 changed files with 971 additions and 24 deletions.
392 changes: 392 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 14 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,28 @@
"name": "covid19",
"version": "0.1.0",
"private": true,
"homepage": "http://workaholic7.github.io/covid19visuals",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-device-detect": "^1.11.14",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
"react-scripts": "3.4.1",
"react-search-box": "^2.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -30,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.2.0"
}
}
Binary file added public/coronavirus.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/covid.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/coronavirus.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand All @@ -14,6 +14,7 @@
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.0.0/css/font-awesome.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
Expand All @@ -24,7 +25,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Covid19 Visuals</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
65 changes: 62 additions & 3 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
.App {
text-align: center;
padding: 0 !important;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container-fluid{
padding: 0px !important;
}

.App-logo {
Expand All @@ -15,19 +21,72 @@

.App-header {
background-color: #282c34;
min-height: 100vh;
min-height: 15vh;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
font-size: calc(20px + 2vmin);
color: white;
font-weight: 700;
margin : 0 !important;
}
.App-footer {
background-color: #282c34;
min-height: 5vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 12px;
color: white;
margin : 5 !important;
}
.back {
background-color: #002C57 !important;
border-color: #002C57 !important;
margin-top: 5px;
}
.row{
margin: 0px !important;
}

.country-select {
margin: 1rem 0;
}

.App-link {
color: #61dafb;
}

.today-row>div {
font-weight: 700;
font-family: sans-serif;
border-radius: 10px;
margin:10px;
padding: 10px;
}

.confirmed{
color: #002C57;
background-image: linear-gradient(rgb(165, 201, 253) 0%, rgb(189, 229, 252) 100%);
}

.recovered{
color: #005C25;
background-image: linear-gradient(rgb(155, 232, 156) 0%, rgb(205, 249, 125) 100%);
}

.deaths{
color: #5A0401;
background-image: linear-gradient(rgb(254, 134, 131) 0%, rgb(255, 157, 155) 100%);
}

.active{
color: #582801;
background-image: linear-gradient(rgb(246, 206, 104) 0%, rgb(253, 166, 130) 100%);
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
Expand Down
20 changes: 3 additions & 17 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,11 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import CovidData from './components/CovidData';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<CovidData />
);
}

Expand Down
17 changes: 17 additions & 0 deletions src/components/About.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';

function About() {
return (
<div>
<h1>What is covid19?</h1>
<p>Coronavirus disease (COVID-19) is an infectious disease caused by a newly discovered coronavirus.

Most people infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment. Older people, and those with underlying medical problems like cardiovascular disease, diabetes, chronic respiratory disease, and cancer are more likely to develop serious illness.

</p>

</div>
)
}

export default About;
106 changes: 106 additions & 0 deletions src/components/CaseChart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import Chart from 'chart.js';
import {isEmpty} from "lodash";

export default class CaseChart extends React.Component {
chartRef = React.createRef();
constructor(){
super();
this.myChart ={};
}

componentDidMount(){
this.createChart(this.props);
}

componentDidUpdate(){
this.createChart(this.props);
}

createChart(props) {
if(props.chartData && props.chartData.length!==undefined){
let dailyArr = [];
props.chartData.forEach((element, index) => {
dailyArr.push(element-props.chartData[index-1])
});

const myChartRef = this.chartRef.current.getContext("2d");
if(!isEmpty(this.myChart)) {
this.myChart.data.datasets[0].data = dailyArr.splice(-20);

this.myChart.update();
} else{
this.myChart = new Chart(myChartRef, {
type : "line",
data : {
labels: props.dates.splice(-20),
datasets: [
{
label: "Confirmed",
data : dailyArr.splice(-20),
borderColor : '#4285f4',
fill : false,
pointRadius : 0
}
]
},
options : {
animation : {
duration : 2000,
easing : 'easeInOutQuint'

},
tooltips : {
enabled : true,
mode : "nearest"
},

legend : {
display : false
},
title : {
display : false,
},
scales:{
xAxes: [
{
ticks:{
display : false
},
gridLines: {
display : false
}
}
],
yAxes: [
{
ticks:{
display : false
},
gridLines: {
display : false
}
}
]
}
}
})
}
}
}



render(){

return(
<div>
<canvas id = "myChart" ref={this.chartRef}
/>
</div>

)
}
}


18 changes: 18 additions & 0 deletions src/components/CaseData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import {Col} from 'react-bootstrap';
import CaseChart from './CaseChart'
function CaseData(props) {
var changeInNumberFromPrevDay = props.data[props.data.length-1]-props.data[props.data.length-2];
var sign = changeInNumberFromPrevDay > 0? "+" :
changeInNumberFromPrevDay < 0 ? "-" : "";
return (
<Col md={2} sm={4} xs={4} className={props.class}>
{props.data[props.data.length-1]}<br />
{props.title}
<div>[{sign}{Math.abs(changeInNumberFromPrevDay)}]</div>
<CaseChart chartData={props.data} dates ={props.dates} color="#005C25"/>
</Col>
)
}

export default CaseData;
Loading

0 comments on commit 99bf392

Please sign in to comment.