-
{fetched && (
{
+ useEffect(() => {
setData(props.data);
parseData();
});
@@ -33,10 +33,17 @@ function Level(props) {
return (
-
@@ -49,16 +56,31 @@ function Level(props) {
-
);
}
diff --git a/src/components/links.js b/src/components/links.js
index 995c550d44..cc0838d078 100644
--- a/src/components/links.js
+++ b/src/components/links.js
@@ -1,34 +1,40 @@
-import React, {useState, useEffect} from 'react';
+import React from 'react';
function Links(props) {
return (
Confirmed
-[{props.deltas ? props.deltas.confirmeddelta>=0 ? '+'+props.deltas.confirmeddelta : '+0' : ''}]
++ [ + {props.deltas + ? props.deltas.confirmeddelta >= 0 + ? '+' + props.deltas.confirmeddelta + : '+0' + : ''} + ] +
{confirmed}
Recovered
-[{props.deltas ? props.deltas.recovereddelta>=0 ? '+'+props.deltas.recovereddelta : '+0' : ''}]
++ [ + {props.deltas + ? props.deltas.recovereddelta >= 0 + ? '+' + props.deltas.recovereddelta + : '+0' + : ''} + ] +
{recoveries}
Deceased
-[{props.deltas ? props.deltas.deceaseddelta>=0 ? '+'+props.deltas.deceaseddelta : '+0' : ''}]
++ [ + {props.deltas + ? props.deltas.deceaseddelta >= 0 + ? '+' + props.deltas.deceaseddelta + : '+0' + : ''} + ] +
{deaths}
-
-
HELPLINE NUMBERS [by State]
- https://www.mohfw.gov.in/coronvavirushelplinenumber.pdf + + https://www.mohfw.gov.in/coronvavirushelplinenumber.pdf +
+
-
);
}
diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js
index 297832a2da..de3c6f0247 100644
--- a/src/components/mapexplorer.js
+++ b/src/components/mapexplorer.js
@@ -3,7 +3,7 @@ import ChoroplethMap, {highlightRegionInMap} from './choropleth';
import {MAP_TYPES, MAPS_DIR} from '../constants';
const mapMeta = {
- 'India': {
+ India: {
name: 'India',
geoDataFile: `${MAPS_DIR}/india.json`,
mapType: MAP_TYPES.COUNTRY,
@@ -36,7 +36,7 @@ const mapMeta = {
scale: 3200,
},
- 'Assam': {
+ Assam: {
name: 'Assam',
geoDataFile: `${MAPS_DIR}/assam.json`,
mapType: MAP_TYPES.STATE,
@@ -44,7 +44,7 @@ const mapMeta = {
center: [92, 26],
scale: 4500,
},
- 'Bihar': {
+ Bihar: {
name: 'Bihar',
geoDataFile: `${MAPS_DIR}/bihar.json`,
mapType: MAP_TYPES.STATE,
@@ -52,7 +52,7 @@ const mapMeta = {
center: [85, 25],
scale: 6000,
},
- 'Chhattisgarh': {
+ Chhattisgarh: {
name: 'Chhattisgarh',
geoDataFile: `${MAPS_DIR}/chhattisgarh.json`,
mapType: MAP_TYPES.STATE,
@@ -60,7 +60,7 @@ const mapMeta = {
center: [82, 21],
scale: 4500,
},
- 'Delhi': {
+ Delhi: {
name: 'Delhi',
geoDataFile: `${MAPS_DIR}/delhi.json`,
mapType: MAP_TYPES.STATE,
@@ -68,7 +68,7 @@ const mapMeta = {
center: [77, 28.5],
scale: 30000,
},
- 'Karnataka': {
+ Karnataka: {
name: 'Karnataka',
geoDataFile: `${MAPS_DIR}/karnataka.json`,
mapType: MAP_TYPES.STATE,
@@ -76,7 +76,7 @@ const mapMeta = {
center: [76, 15.05],
scale: 4900,
},
- 'Kerala': {
+ Kerala: {
name: 'Kerala',
geoDataFile: `${MAPS_DIR}/kerala.json`,
mapType: MAP_TYPES.STATE,
@@ -84,7 +84,7 @@ const mapMeta = {
center: [76, 10.5],
scale: 5000,
},
- 'Goa': {
+ Goa: {
name: 'Goa',
geoDataFile: `${MAPS_DIR}/goa.json`,
mapType: MAP_TYPES.STATE,
@@ -92,7 +92,7 @@ const mapMeta = {
center: [74, 15],
scale: 20000,
},
- 'Gujarat': {
+ Gujarat: {
name: 'Gujarat',
geoDataFile: `${MAPS_DIR}/gujarat.json`,
mapType: MAP_TYPES.STATE,
@@ -100,7 +100,7 @@ const mapMeta = {
center: [70.5, 22],
scale: 4000,
},
- 'Haryana': {
+ Haryana: {
name: 'Haryana',
geoDataFile: `${MAPS_DIR}/haryana.json`,
mapType: MAP_TYPES.STATE,
@@ -124,7 +124,7 @@ const mapMeta = {
center: [75, 34],
scale: 5000,
},
- 'Jharkhand': {
+ Jharkhand: {
name: 'Jharkhand',
geoDataFile: `${MAPS_DIR}/jharkhand.json`,
mapType: MAP_TYPES.STATE,
@@ -132,7 +132,7 @@ const mapMeta = {
center: [85, 23],
scale: 4500,
},
- 'Ladakh': {
+ Ladakh: {
name: 'Ladakh',
geoDataFile: `${MAPS_DIR}/ladakh.json`,
mapType: MAP_TYPES.STATE,
@@ -148,7 +148,7 @@ const mapMeta = {
center: [77, 23],
scale: 3000,
},
- 'Maharashtra': {
+ Maharashtra: {
name: 'Maharashtra',
geoDataFile: `${MAPS_DIR}/maharashtra.json`,
mapType: MAP_TYPES.STATE,
@@ -156,7 +156,7 @@ const mapMeta = {
center: [75, 18],
scale: 3000,
},
- 'Manipur': {
+ Manipur: {
name: 'Manipur',
geoDataFile: `${MAPS_DIR}/manipur.json`,
mapType: MAP_TYPES.STATE,
@@ -164,7 +164,7 @@ const mapMeta = {
center: [93.5, 24],
scale: 9000,
},
- 'Meghalaya': {
+ Meghalaya: {
name: 'Meghalaya',
geoDataFile: `${MAPS_DIR}/meghalaya.json`,
mapType: MAP_TYPES.STATE,
@@ -172,7 +172,7 @@ const mapMeta = {
center: [91, 24],
scale: 6500,
},
- 'Mizoram': {
+ Mizoram: {
name: 'Mizoram',
geoDataFile: `${MAPS_DIR}/mizoram.json`,
mapType: MAP_TYPES.STATE,
@@ -180,7 +180,7 @@ const mapMeta = {
center: [92.5, 23],
scale: 10000,
},
- 'Nagaland': {
+ Nagaland: {
name: 'Nagaland',
geoDataFile: `${MAPS_DIR}/nagaland.json`,
mapType: MAP_TYPES.STATE,
@@ -188,7 +188,7 @@ const mapMeta = {
center: [94, 25],
scale: 7500,
},
- 'Odisha': {
+ Odisha: {
name: 'Odisha',
geoDataFile: `${MAPS_DIR}/odisha.json`,
mapType: MAP_TYPES.STATE,
@@ -196,7 +196,7 @@ const mapMeta = {
center: [84, 20],
scale: 4000,
},
- 'Punjab': {
+ Punjab: {
name: 'Punjab',
geoDataFile: `${MAPS_DIR}/punjab.json`,
mapType: MAP_TYPES.STATE,
@@ -204,7 +204,7 @@ const mapMeta = {
center: [75, 30.7],
scale: 8000,
},
- 'Rajasthan': {
+ Rajasthan: {
name: 'Rajasthan',
geoDataFile: `${MAPS_DIR}/rajasthan.json`,
mapType: MAP_TYPES.STATE,
@@ -212,7 +212,7 @@ const mapMeta = {
center: [73, 25],
scale: 3000,
},
- 'Sikkim': {
+ Sikkim: {
name: 'Sikkim',
geoDataFile: `${MAPS_DIR}/sikkim.json`,
mapType: MAP_TYPES.STATE,
@@ -228,7 +228,7 @@ const mapMeta = {
center: [83, 18],
scale: 1500,
},
- 'Telangana': {
+ Telangana: {
name: 'Telangana',
geoDataFile: `${MAPS_DIR}/telugana.json`,
mapType: MAP_TYPES.STATE,
@@ -236,7 +236,7 @@ const mapMeta = {
center: [79, 17],
scale: 5000,
},
- 'Tripura': {
+ Tripura: {
name: 'Tripura',
geoDataFile: `${MAPS_DIR}/tripura.json`,
mapType: MAP_TYPES.STATE,
@@ -244,7 +244,7 @@ const mapMeta = {
center: [91.5, 23],
scale: 10000,
},
- 'Uttarakhand': {
+ Uttarakhand: {
name: 'Uttarakhand',
geoDataFile: `${MAPS_DIR}/uttarakhand.json`,
mapType: MAP_TYPES.STATE,
@@ -271,7 +271,7 @@ const mapMeta = {
},
};
-export default function({states, stateDistrictWiseData, stateHighlighted}) {
+export default function ({states, stateDistrictWiseData, stateHighlighted}) {
// const [states, setStates] = useState(props.states);
const [currentHoveredRegion, setCurrentHoveredRegion] = useState({});
const [currentMap, setCurrentMap] = useState(mapMeta.India);
@@ -295,7 +295,7 @@ export default function({states, stateDistrictWiseData, stateHighlighted}) {
highlightRegionInMap(null, currentMap.mapType);
} else {
if (stateHighlighted !== undefined) {
- let regionHighlighted = getRegionFromState(stateHighlighted.state);
+ const regionHighlighted = getRegionFromState(stateHighlighted.state);
setCurrentHoveredRegion(regionHighlighted);
highlightRegionInMap(regionHighlighted.name, currentMap.mapType);
}
@@ -344,7 +344,7 @@ export default function({states, stateDistrictWiseData, stateHighlighted}) {
const setHoveredRegion = (name, currentMap) => {
if (currentMap.mapType === MAP_TYPES.COUNTRY) {
setCurrentHoveredRegion(
- getRegionFromState(states.filter((state) => name === state.state)[0]),
+ getRegionFromState(states.filter((state) => name === state.state)[0])
);
} else if (currentMap.mapType === MAP_TYPES.STATE) {
const state = stateDistrictWiseData[currentMap.name] || {
@@ -395,19 +395,18 @@ export default function({states, stateDistrictWiseData, stateHighlighted}) {
setHoveredRegion(states[1].state, newMap);
} else if (newMap.mapType === MAP_TYPES.STATE) {
const districtData = (stateDistrictWiseData[name] || {districtData: {}})
- .districtData;
+ .districtData;
const topDistrict = Object.keys(districtData)
- .filter((name) => name !== 'Unknown')
- .sort((a, b) => {
- return districtData[b].confirmed - districtData[a].confirmed;
- })[0];
+ .filter((name) => name !== 'Unknown')
+ .sort((a, b) => {
+ return districtData[b].confirmed - districtData[a].confirmed;
+ })[0];
setHoveredRegion(topDistrict, newMap);
}
};
return (
Ministry of Health and Family Welfare, Gov. of India
https://www.mohfw.gov.in/WHO : COVID-19 Home Page
- https://www.who.int/emergencies/diseases/novel-coronavirus-2019 + + https://www.who.int/emergencies/diseases/novel-coronavirus-2019 +CDC
- https://www.cdc.gov/coronavirus/2019-ncov/faq.html + + https://www.cdc.gov/coronavirus/2019-ncov/faq.html +COVID-19 Global Tracker
- https://coronavirus.thebaselab.com/ + + https://coronavirus.thebaselab.com/ +
-
@@ -453,15 +452,21 @@ export default function({states, stateDistrictWiseData, stateHighlighted}) {
{currentMap.name} Map
@@ -453,15 +452,21 @@ export default function({states, stateDistrictWiseData, stateHighlighted}) {
{currentHoveredRegion.name}
- {currentMap.mapType === MAP_TYPES.STATE && currentMapData.Unknown > 0 ? (
- Districts unknown for {currentMapData.Unknown} people
- ) : null}
+ {currentMap.mapType === MAP_TYPES.STATE &&
+ currentMapData.Unknown > 0 ? (
+
+ Districts unknown for {currentMapData.Unknown} people
+
+ ) : null}
{currentMap.mapType === MAP_TYPES.STATE ? (
- switchMapToState('India')}>
+ switchMapToState('India')}
+ >
Back
- ) : null}
+ ) : null}
setHoveredRegion(region, currentMap)}
changeMap={switchMapToState}
/>
-
);
}
diff --git a/src/components/minigraph.js b/src/components/minigraph.js
index 26d862ddf2..87d4b4f958 100644
--- a/src/components/minigraph.js
+++ b/src/components/minigraph.js
@@ -1,23 +1,21 @@
import React, {useState, useEffect, useRef} from 'react';
-import axios from 'axios';
import * as d3 from 'd3';
function Minigraph(props) {
const [timeseries, setTimeseries] = useState([]);
- const [datapoint, setDatapoint] = useState({});
const graphElement1 = useRef(null);
const graphElement2 = useRef(null);
const graphElement3 = useRef(null);
const graphElement4 = useRef(null);
- useEffect(()=>{
- if (props.timeseries.length>1) {
- setTimeseries(props.timeseries.slice(props.timeseries.length-10));
+ useEffect(() => {
+ if (props.timeseries.length > 1) {
+ setTimeseries(props.timeseries.slice(props.timeseries.length - 10));
}
}, [props.timeseries]);
- useEffect(()=>{
- if (timeseries.length>1) {
+ useEffect(() => {
+ if (timeseries.length > 1) {
graphData(timeseries);
}
}, [timeseries.length]);
@@ -33,285 +31,324 @@ function Minigraph(props) {
function graphData(timeseries) {
const data = timeseries;
- setDatapoint(data[data.length-1]);
- const x = d3.scaleTime()
- .domain(d3.extent(data, function(d) {
- return new Date(d['date']+'2020');
- }))
- .range([0, width]);
-
- const y1 = d3.scaleLinear()
- .domain([0, d3.max(data, function(d) {
- return +d['dailyconfirmed'];
- })])
- .range([height, 0]);
-
- const y2 = d3.scaleLinear()
- .domain([0, d3.max(data, function(d) {
+ const x = d3
+ .scaleTime()
+ .domain(
+ d3.extent(data, function (d) {
+ return new Date(d['date'] + '2020');
+ })
+ )
+ .range([0, width]);
+
+ const y1 = d3
+ .scaleLinear()
+ .domain([
+ 0,
+ d3.max(data, function (d) {
return +d['dailyconfirmed'];
- })])
- .range([height, 0]);
-
- const y3 = d3.scaleLinear()
- .domain([0, d3.max(data, function(d) {
- return +d['dailyrecovered'];
- })])
- .range([height, 0]);
-
-
- const y4 = d3.scaleLinear()
- .domain([0, d3.max(data, function(d) {
- return +d['dailydeceased'];
- })])
- .range([height, 0]);
-
- const path1 = svg1.append('path')
- .datum(data)
- .attr('fill', 'none')
- .attr('stroke', '#ff073a99')
- .attr('stroke-width', 3)
- .attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x(function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .y(function(d, i) {
- if (i===0) {
- {/* console.log(data[data.length-9]['dailyconfirmed']-data[data.length-10]['dailyconfirmed']);*/}
- return y1(d['dailyconfirmed']);
- } else {
- {/* console.log(data[data.length-9+i]['dailyconfirmed']-data[data.length-10+i]['dailyconfirmed']);*/}
- return y1(d['dailyconfirmed']);
- }
- })
- .curve(d3.curveCardinal),
- );
+ }),
+ ])
+ .range([height, 0]);
+
+ const path1 = svg1
+ .append('path')
+ .datum(data)
+ .attr('fill', 'none')
+ .attr('stroke', '#ff073a99')
+ .attr('stroke-width', 3)
+ .attr('cursor', 'pointer')
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x(function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y(function (d, i) {
+ return y1(d['dailyconfirmed']);
+ })
+ .curve(d3.curveCardinal)
+ );
const totalLength1 = path1.node().getTotalLength();
- path1.attr('stroke-dasharray', totalLength1 + ' ' + totalLength1)
- .attr('stroke-dashoffset', totalLength1)
- .transition()
- .duration(props.animate ? 2000 : 0)
- .attr('stroke-dashoffset', 0);
-
- svg1.selectAll('.dot')
- .data(data.slice(data.length-1))
- .enter()
- .append('circle')
- .attr('fill', '#ff073a')
- .attr('stroke', '#ff073a')
- .attr('r', 2)
- .attr('cursor', 'pointer')
- .attr('cx', function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .attr('cy', function(d) {
- return y1(d['dailyconfirmed']);
- })
- .on('mouseover', (d) => {
- d3.select(d3.event.target).attr('r', '5');
- setDatapoint(d);
- })
- .on('mouseout', (d) => {
- d3.select(d3.event.target).attr('r', '2');
- setDatapoint(d);
- })
- .style('opacity', 0)
- .transition()
- .duration(props.animate ? 3000 : 0)
- .style('opacity', 1);
-
- const path2 = svg2.append('path')
- .datum(data)
- .attr('fill', 'none')
- .attr('cursor', 'pointer')
- .attr('stroke', '#007bff99')
- .attr('stroke-width', 3)
- .attr('cursor', 'pointer')
- .attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x(function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .y(function(d, i) {
- if (i===0) {
- return y1(d['dailyconfirmed']-d['dailyrecovered']-d['dailydeceased']);
- } else {
- return y1(d['dailyconfirmed']-d['dailyrecovered']-d['dailydeceased']);
- }
- })
- .curve(d3.curveCardinal),
- );
+ path1
+ .attr('stroke-dasharray', totalLength1 + ' ' + totalLength1)
+ .attr('stroke-dashoffset', totalLength1)
+ .transition()
+ .duration(props.animate ? 2000 : 0)
+ .attr('stroke-dashoffset', 0);
+
+ svg1
+ .selectAll('.dot')
+ .data(data.slice(data.length - 1))
+ .enter()
+ .append('circle')
+ .attr('fill', '#ff073a')
+ .attr('stroke', '#ff073a')
+ .attr('r', 2)
+ .attr('cursor', 'pointer')
+ .attr('cx', function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .attr('cy', function (d) {
+ return y1(d['dailyconfirmed']);
+ })
+ .on('mouseover', (d) => {
+ d3.select(d3.event.target).attr('r', '5');
+ })
+ .on('mouseout', (d) => {
+ d3.select(d3.event.target).attr('r', '2');
+ })
+ .style('opacity', 0)
+ .transition()
+ .duration(props.animate ? 3000 : 0)
+ .style('opacity', 1);
+
+ const path2 = svg2
+ .append('path')
+ .datum(data)
+ .attr('fill', 'none')
+ .attr('cursor', 'pointer')
+ .attr('stroke', '#007bff99')
+ .attr('stroke-width', 3)
+ .attr('cursor', 'pointer')
+ .attr('cursor', 'pointer')
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x(function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y(function (d, i) {
+ if (i === 0) {
+ return y1(
+ d['dailyconfirmed'] - d['dailyrecovered'] - d['dailydeceased']
+ );
+ } else {
+ return y1(
+ d['dailyconfirmed'] - d['dailyrecovered'] - d['dailydeceased']
+ );
+ }
+ })
+ .curve(d3.curveCardinal)
+ );
const totalLength2 = path2.node().getTotalLength();
- path2.attr('stroke-dasharray', totalLength2 + ' ' + totalLength2)
- .attr('stroke-dashoffset', totalLength2)
- .transition()
- .duration(props.animate ? 2000 : 0)
- .attr('stroke-dashoffset', 0);
-
- svg2.selectAll('.dot')
- .data(data.slice(data.length-1))
- .enter()
- .append('circle')
- .attr('fill', '#007bff')
- .attr('stroke', '#007bff')
- .attr('r', 2)
- .attr('cursor', 'pointer')
- .attr('cx', function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .attr('cy', function(d) {
- const today = data[data.length-1]['dailyconfirmed']-data[data.length-1]['dailyrecovered']-data[data.length-1]['dailydeceased'];
- const yesterday = data[data.length-2]['dailyconfirmed']-data[data.length-2]['dailyrecovered']-data[data.length-2]['dailydeceased'];
- return y1(d['dailyconfirmed']-d['dailyrecovered']-d['dailydeceased']);
- })
- .on('mouseover', (d) => {
- d3.select(d3.event.target).attr('r', '5');
- setDatapoint(d);
- })
- .on('mouseout', (d) => {
- d3.select(d3.event.target).attr('r', '2');
- setDatapoint(d);
- })
- .style('opacity', 0)
- .transition()
- .duration(props.animate ? 3000 : 0)
- .style('opacity', 1);
-
- const path3 = svg3.append('path')
- .datum(data)
- .attr('fill', 'none')
- .attr('stroke', '#28a74599')
- .attr('stroke-width', 3)
- .attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x(function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .y(function(d, i) {
- if (i===0) {
- return y1(d['dailyrecovered']);
- } else {
- return y1(d['dailyrecovered']);
- }
- })
- .curve(d3.curveCardinal),
+ path2
+ .attr('stroke-dasharray', totalLength2 + ' ' + totalLength2)
+ .attr('stroke-dashoffset', totalLength2)
+ .transition()
+ .duration(props.animate ? 2000 : 0)
+ .attr('stroke-dashoffset', 0);
+
+ svg2
+ .selectAll('.dot')
+ .data(data.slice(data.length - 1))
+ .enter()
+ .append('circle')
+ .attr('fill', '#007bff')
+ .attr('stroke', '#007bff')
+ .attr('r', 2)
+ .attr('cursor', 'pointer')
+ .attr('cx', function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .attr('cy', function (d) {
+ /* const today =
+ data[data.length - 1]['dailyconfirmed'] -
+ data[data.length - 1]['dailyrecovered'] -
+ data[data.length - 1]['dailydeceased'];
+ const yesterday =
+ data[data.length - 2]['dailyconfirmed'] -
+ data[data.length - 2]['dailyrecovered'] -
+ data[data.length - 2]['dailydeceased'];*/
+ return y1(
+ d['dailyconfirmed'] - d['dailyrecovered'] - d['dailydeceased']
);
+ })
+ .on('mouseover', (d) => {
+ d3.select(d3.event.target).attr('r', '5');
+ })
+ .on('mouseout', (d) => {
+ d3.select(d3.event.target).attr('r', '2');
+ })
+ .style('opacity', 0)
+ .transition()
+ .duration(props.animate ? 3000 : 0)
+ .style('opacity', 1);
+
+ const path3 = svg3
+ .append('path')
+ .datum(data)
+ .attr('fill', 'none')
+ .attr('stroke', '#28a74599')
+ .attr('stroke-width', 3)
+ .attr('cursor', 'pointer')
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x(function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y(function (d, i) {
+ if (i === 0) {
+ return y1(d['dailyrecovered']);
+ } else {
+ return y1(d['dailyrecovered']);
+ }
+ })
+ .curve(d3.curveCardinal)
+ );
const totalLength3 = path1.node().getTotalLength();
- path3.attr('stroke-dasharray', totalLength3 + ' ' + totalLength3)
- .attr('stroke-dashoffset', totalLength3)
- .transition()
- .duration(props.animate ? 2000 : 0)
- .attr('stroke-dashoffset', 0);
-
- svg3.selectAll('.dot')
- .data(data.slice(data.length-1))
- .enter()
- .append('circle')
- .attr('fill', '#28a745')
- .attr('stroke', '#28a745')
- .attr('r', 2)
- .attr('cursor', 'pointer')
- .attr('cx', function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .attr('cy', function(d) {
- return y1(d['dailyrecovered']);
- })
- .on('mouseover', (d) => {
- d3.select(d3.event.target).attr('r', '5');
- setDatapoint(d);
- })
- .on('mouseout', (d) => {
- d3.select(d3.event.target).attr('r', '2');
- setDatapoint(d);
- })
- .style('opacity', 0)
- .transition()
- .duration(props.animate ? 3000 : 0)
- .style('opacity', 1);
-
- const path4 = svg4.append('path')
- .datum(data)
- .attr('fill', 'none')
- .attr('cursor', 'pointer')
- .attr('stroke', '#6c757d99')
- .attr('stroke-width', 3)
- .attr('cursor', 'pointer')
- .attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x(function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .y(function(d, i) {
- if (i===0) {
- return y1(d['dailydeceased']);
- } else {
- return y1(d['dailydeceased']);
- }
- })
- .curve(d3.curveCardinal),
- );
+ path3
+ .attr('stroke-dasharray', totalLength3 + ' ' + totalLength3)
+ .attr('stroke-dashoffset', totalLength3)
+ .transition()
+ .duration(props.animate ? 2000 : 0)
+ .attr('stroke-dashoffset', 0);
+
+ svg3
+ .selectAll('.dot')
+ .data(data.slice(data.length - 1))
+ .enter()
+ .append('circle')
+ .attr('fill', '#28a745')
+ .attr('stroke', '#28a745')
+ .attr('r', 2)
+ .attr('cursor', 'pointer')
+ .attr('cx', function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .attr('cy', function (d) {
+ return y1(d['dailyrecovered']);
+ })
+ .on('mouseover', (d) => {
+ d3.select(d3.event.target).attr('r', '5');
+ })
+ .on('mouseout', (d) => {
+ d3.select(d3.event.target).attr('r', '2');
+ })
+ .style('opacity', 0)
+ .transition()
+ .duration(props.animate ? 3000 : 0)
+ .style('opacity', 1);
+
+ const path4 = svg4
+ .append('path')
+ .datum(data)
+ .attr('fill', 'none')
+ .attr('cursor', 'pointer')
+ .attr('stroke', '#6c757d99')
+ .attr('stroke-width', 3)
+ .attr('cursor', 'pointer')
+ .attr('cursor', 'pointer')
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x(function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y(function (d, i) {
+ if (i === 0) {
+ return y1(d['dailydeceased']);
+ } else {
+ return y1(d['dailydeceased']);
+ }
+ })
+ .curve(d3.curveCardinal)
+ );
const totalLength4 = path4.node().getTotalLength();
- path4.attr('stroke-dasharray', totalLength4 + ' ' + totalLength4)
- .attr('stroke-dashoffset', totalLength4)
- .transition()
- .duration(props.animate ? 2000 : 0)
- .attr('stroke-dashoffset', 0);
-
- svg4.selectAll('.dot')
- .data(data.slice(data.length-1))
- .enter()
- .append('circle')
- .attr('fill', '#6c757d')
- .attr('stroke', '#6c757d')
- .attr('r', 2)
- .attr('cursor', 'pointer')
- .attr('cx', function(d) {
- return x(new Date(d['date']+'2020'));
- })
- .attr('cy', function(d) {
- return y1(d['dailydeceased']);
- })
- .on('mouseover', (d) => {
- d3.select(d3.event.target).attr('r', '5');
- setDatapoint(d);
- })
- .on('mouseout', (d) => {
- d3.select(d3.event.target).attr('r', '2');
- setDatapoint(d);
- })
- .style('opacity', 0)
- .transition()
- .duration(props.animate ? 3000 : 0)
- .style('opacity', 1);
- };
+ path4
+ .attr('stroke-dasharray', totalLength4 + ' ' + totalLength4)
+ .attr('stroke-dashoffset', totalLength4)
+ .transition()
+ .duration(props.animate ? 2000 : 0)
+ .attr('stroke-dashoffset', 0);
+
+ svg4
+ .selectAll('.dot')
+ .data(data.slice(data.length - 1))
+ .enter()
+ .append('circle')
+ .attr('fill', '#6c757d')
+ .attr('stroke', '#6c757d')
+ .attr('r', 2)
+ .attr('cursor', 'pointer')
+ .attr('cx', function (d) {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .attr('cy', function (d) {
+ return y1(d['dailydeceased']);
+ })
+ .on('mouseover', (d) => {
+ d3.select(d3.event.target).attr('r', '5');
+ })
+ .on('mouseout', (d) => {
+ d3.select(d3.event.target).attr('r', '2');
+ })
+ .style('opacity', 0)
+ .transition()
+ .duration(props.animate ? 3000 : 0)
+ .style('opacity', 1);
+ }
return (
-
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
);
}
diff --git a/src/components/navbar.js b/src/components/navbar.js
index 35435b0359..f1101227ec 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -1,37 +1,36 @@
-import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import React, {useState} from 'react';
+import {Link} from 'react-router-dom';
function Navbar(props) {
- const [view, setView] = useState("Home");
+ const [view, setView] = useState('Home');
// HTML Properties for each of the links in UI
const navLinkProps = (path, animationDelay) => ({
- className: `fadeInUp ${window.location.pathname === path ? "focused": ""}`,
+ className: `fadeInUp ${window.location.pathname === path ? 'focused' : ''}`,
style: {
- animationDelay: `${animationDelay}s`
- }
+ animationDelay: `${animationDelay}s`,
+ },
});
- if (window.location.pathname !== "/summary") {
+ if (window.location.pathname !== '/summary') {
return (
@@ -39,12 +38,10 @@ function Navbar(props) {
{
- setView("Home");
+ setView('Home');
}}
>
-
- Home
-
+ Home
{/* {
@@ -56,34 +53,28 @@ function Navbar(props) {
{
- setView("Clusters");
+ setView('Clusters');
}}
>
-
- Clusters
-
+ Clusters
{
- setView("Helpful Links");
+ setView('Helpful Links');
}}
>
-
- Helpful Links
-
+ Helpful Links
{
- setView("FAQs");
+ setView('FAQs');
}}
>
-
- FAQ
-
+ FAQ
diff --git a/src/components/row.js b/src/components/row.js
index 9aa2c351a2..7c5fcab1c1 100644
--- a/src/components/row.js
+++ b/src/components/row.js
@@ -5,48 +5,68 @@ function Row(props) {
const [state, setState] = useState(props.state);
const [districts, setDistricts] = useState(props.districts);
const [sortData, setSortData] = useState({
- sortColumn: localStorage.getItem('district.sortColumn')? localStorage.getItem('district.sortColumn') : 'confirmed',
- isAscending: localStorage.getItem('district.isAscending')? localStorage.getItem('district.isAscending') == 'true' : false,
+ sortColumn: localStorage.getItem('district.sortColumn')
+ ? localStorage.getItem('district.sortColumn')
+ : 'confirmed',
+ isAscending: localStorage.getItem('district.isAscending')
+ ? localStorage.getItem('district.isAscending') === 'true'
+ : false,
});
let sortedDistricts = {};
- useEffect(()=>{
+ useEffect(() => {
setState(props.state);
}, [props.state]);
- useEffect(()=>{
+ useEffect(() => {
setDistricts(props.districts);
}, [props.districts]);
- useEffect(()=>{
+ useEffect(() => {
sort(districts);
}, [districts]);
const handleReveal = () => {
props.handleReveal(props.state.state);
};
-
+
const sort = (aDistricts) => {
sortedDistricts = {};
- if(aDistricts) {
- Object.keys(aDistricts).sort((district1, district2) => {
- const sortColumn = sortData.sortColumn;
- let value1 = sortColumn === 'district' ? district1 : parseInt(aDistricts[district1].confirmed);
- let value2 = sortColumn === 'district' ? district2 : parseInt(aDistricts[district2].confirmed);
- let comparisonValue = value1 > value2 ? 1 : (value1 == value2) && district1 > district2 ? 1 : -1;
- return sortData.isAscending? comparisonValue : (comparisonValue * -1)
- }).forEach(key => {
- sortedDistricts[key] = aDistricts[key];
- });
+ if (aDistricts) {
+ Object.keys(aDistricts)
+ .sort((district1, district2) => {
+ const sortColumn = sortData.sortColumn;
+ const value1 =
+ sortColumn === 'district'
+ ? district1
+ : parseInt(aDistricts[district1].confirmed);
+ const value2 =
+ sortColumn === 'district'
+ ? district2
+ : parseInt(aDistricts[district2].confirmed);
+ const comparisonValue =
+ value1 > value2
+ ? 1
+ : value1 === value2 && district1 > district2
+ ? 1
+ : -1;
+ return sortData.isAscending ? comparisonValue : comparisonValue * -1;
+ })
+ .forEach((key) => {
+ sortedDistricts[key] = aDistricts[key];
+ });
}
};
const handleSort = (column) => {
- const isAscending = sortData.sortColumn == column? !sortData.isAscending : sortData.sortColumn === 'district';
+ const isAscending =
+ sortData.sortColumn === column
+ ? !sortData.isAscending
+ : sortData.sortColumn === 'district';
setSortData({
sortColumn: column,
- isAscending: isAscending ,
+ isAscending: isAscending,
});
localStorage.setItem('district.sortColumn', column);
localStorage.setItem('district.isAscending', isAscending);
@@ -56,93 +76,144 @@ function Row(props) {
return (
- {
- handleReveal();
- }}>
- props.onHighlightState?.(state, props.index)}
onMouseLeave={() => props.onHighlightState?.()}
touchstart={() => props.onHighlightState?.(state, props.index)}
- onClick={()=>{
+ onClick={() => {
handleReveal();
- }}>
+ }}
+ >
{state.state}
- {!state.delta.confirmed==0 &&
-
- {/*
+
+ {/*
{!state.delta.active==0 &&
-
- {/*
+
+ {/*
{!state.delta.recovered==0 &&
-
- {/*
+
+ {/*
{!state.delta.deaths==0 &&
-
+
-
- handleSort('district')} >
-
-
- District
-
- {sortData.isAscending ?
+ handleSort('district')}>
+
+ District
+
+ {sortData.isAscending ?
handleSort('confirmed')}>
-
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'C' : 'Cnfmd' : 'Confirmed'}
- {sortData.isAscending ?
- {
- Object.keys(sortedDistricts).map((district, index) => {
- if (district.toLowerCase()!=='unknown') {
- return (
-
- {district}
- {sortedDistricts[district].confirmed}
-
- );
- }
- })
- }
+ {Object.keys(sortedDistricts).map((district, index) => {
+ if (district.toLowerCase() !== 'unknown') {
+ return (
+
+ {district}
+ {sortedDistricts[district].confirmed}
+
+ );
+ }
+ })}
- {sortedDistricts?.Unknown &&
-
- Unknown
+ {sortedDistricts?.Unknown && (
+
+ Unknown
{sortedDistricts['Unknown'].confirmed}
- }
+ )}
-
+
India COVID-19 Tracker
-
-
-
+
- 
+
We stand with everyone fighting on the frontlines
-
);
}
diff --git a/src/components/table.js b/src/components/table.js
index b729451703..21135e20c2 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -1,6 +1,5 @@
import React, {useState, useEffect} from 'react';
import * as Icon from 'react-feather';
-import axios from 'axios';
import Row from './row';
@@ -10,12 +9,16 @@ function Table(props) {
const [districts, setDistricts] = useState({});
const [count, setCount] = useState(0);
const [sortData, setSortData] = useState({
- sortColumn: localStorage.getItem('state.sortColumn')? localStorage.getItem('state.sortColumn') : 'confirmed',
- isAscending: localStorage.getItem('state.isAscending')? localStorage.getItem('state.isAscending') == 'true' : false,
+ sortColumn: localStorage.getItem('state.sortColumn')
+ ? localStorage.getItem('state.sortColumn')
+ : 'confirmed',
+ isAscending: localStorage.getItem('state.isAscending')
+ ? localStorage.getItem('state.isAscending') === 'true'
+ : false,
});
- useEffect(()=>{
- if (props.summary===true) {
+ useEffect(() => {
+ if (props.summary === true) {
setStates(props.states.slice(0, 9));
} else {
setStates(props.states);
@@ -24,66 +27,67 @@ function Table(props) {
useEffect(() => {
if (props.states[0]) {
- setRevealedStates(props.states.reduce((a, state) => {
- return ({...a, [state.state]: false});
- }, {}));
+ setRevealedStates(
+ props.states.reduce((a, state) => {
+ return {...a, [state.state]: false};
+ }, {})
+ );
}
}, [props.states]);
- useEffect(()=>{
- if (states.length>0) {
+ useEffect(() => {
+ if (states.length > 0) {
let length = 0;
props.states.map((state, i) => {
- if (i!==0 && state.confirmed>0) length+=1;
- if (i===props.states.length-1) setCount(length);
+ if (i !== 0 && state.confirmed > 0) length += 1;
+ if (i === props.states.length - 1) setCount(length);
});
}
}, [states.length]);
- useEffect(()=>{
- getDistricts();
- }, [1]);
-
-
- const getDistricts = () => {
- axios.get('https://api.covid19india.org/state_district_wise.json')
- .then((response)=>{
- setDistricts(response.data);
- })
- .catch((err)=>{
- console.log(err);
- });
- };
- // make a axios call every 10minutes
- setInterval(getDistricts, 600000);
+ useEffect(() => {
+ setDistricts(props.stateDistrictWiseData);
+ }, [props.stateDistrictWiseData]);
const doSort = (e, props) => {
const totalRow = states.splice(0, 1);
- {/* console.log(totalRow);*/}
states.sort((StateData1, StateData2) => {
const sortColumn = sortData.sortColumn;
let value1 = StateData1[sortColumn];
let value2 = StateData2[sortColumn];
- if (sortColumn != 'state') {
+ if (sortColumn !== 'state') {
value1 = parseInt(StateData1[sortColumn]);
value2 = parseInt(StateData2[sortColumn]);
}
if (sortData.isAscending) {
- return value1 > value2 ? 1 : (value1 == value2) && StateData1['state'] > StateData2['state'] ? 1 : -1;
+ return value1 > value2
+ ? 1
+ : value1 === value2 && StateData1['state'] > StateData2['state']
+ ? 1
+ : -1;
} else {
- return value1 < value2 ? 1 : (value1 == value2) && StateData1['state'] > StateData2['state'] ? 1 : -1;
+ return value1 < value2
+ ? 1
+ : value1 === value2 && StateData1['state'] > StateData2['state']
+ ? 1
+ : -1;
}
});
- {/* console.log(states);*/}
states.unshift(totalRow[0]);
};
const handleSort = (e, props) => {
- const currentsortColumn = e.currentTarget.querySelector('abbr').getAttribute('title').toLowerCase();
- const isAscending = sortData.sortColumn == currentsortColumn? !sortData.isAscending : sortData.sortColumn === 'state';
+ const currentsortColumn = e.currentTarget
+ .querySelector('abbr')
+ .getAttribute('title')
+ .toLowerCase();
+ const isAscending =
+ sortData.sortColumn === currentsortColumn
+ ? !sortData.isAscending
+ : sortData.sortColumn === 'state';
setSortData({
sortColumn: currentsortColumn,
isAscending: isAscending,
@@ -103,72 +107,152 @@ function Table(props) {
return (
<>
- {count} States/UTS Affected
+
+ {count} States/UTS Affected
+
- handleSort(e, props)} >
-
-
- State/UT
-
-
- {sortData.isAscending ? handleSort(e, props)}
+ >
+
+ State/UT
+
+ {sortData.isAscending ?
handleSort(e, props)}>
-
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'C' : 'Cnfmd' : 'Confirmed'}
-
- {sortData.isAscending ?
handleSort(e, props)}>
-
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'A' : 'Actv' : 'Active'}
-
- {sortData.isAscending ?
handleSort(e, props)}>
-
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'R' : 'Rcvrd' : 'Recovered'}
-
-
- {sortData.isAscending ?
handleSort(e, props)}>
-
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'D' : 'Dcsd' : 'Deceased'}
-
- {sortData.isAscending ?
- {
- states.map((state, index) => {
- if (index!==0 && state.confirmed>0) {
- return (
-
- 0 ? districts[state.state].districtData : []} onHighlightState={props.onHighlightState} handleReveal={handleReveal} />
-
- );
- }
- })
- }
+ {states.map((state, index) => {
+ if (index !== 0 && state.confirmed > 0) {
+ return (
+
+ 0
+ ? districts[state.state].districtData
+ : []
+ }
+ onHighlightState={props.onHighlightState}
+ handleReveal={handleReveal}
+ />
+
+ );
+ }
+ })}
- {states.length > 1 && props.summary===false && }
+ {states.length > 1 && props.summary === false && (
+ |
+ )}
-
);
diff --git a/src/components/timeseries.js b/src/components/timeseries.js
index d59d489e0b..eb8f4be4ed 100644
--- a/src/components/timeseries.js
+++ b/src/components/timeseries.js
@@ -1,5 +1,4 @@
import React, {useState, useEffect, useRef} from 'react';
-import axios from 'axios';
import * as d3 from 'd3';
function TimeSeries(props) {
@@ -16,33 +15,40 @@ function TimeSeries(props) {
const graphElement5 = useRef(null);
const graphElement6 = useRef(null);
- useEffect(()=>{
- if (props.timeseries.length>1) {
+ useEffect(() => {
+ if (props.timeseries.length > 1) {
setTimeseries(props.timeseries);
}
}, [props.timeseries.length]);
- useEffect(()=>{
- if (timeseries.length>1) {
+ useEffect(() => {
+ if (timeseries.length > 1) {
graphData(timeseries);
}
}, [timeseries.length]);
- useEffect(()=>{
+ useEffect(() => {
setMode(props.mode);
- setUpdate(update+1);
+ setUpdate(update + 1);
}, [props.mode]);
- useEffect(()=>{
- if (update>0) {
+ useEffect(() => {
+ if (update > 0) {
refreshGraphs(graphData);
}
}, [update]);
const refreshGraphs = () => {
- const graphs = [graphElement1, graphElement2, graphElement3, graphElement4, graphElement5, graphElement6];
- for (let i=0; i<=graphs.length; i++) {
- if (i===graphs.length) {
+ const graphs = [
+ graphElement1,
+ graphElement2,
+ graphElement3,
+ graphElement4,
+ graphElement5,
+ graphElement6,
+ ];
+ for (let i = 0; i <= graphs.length; i++) {
+ if (i === graphs.length) {
graphData(timeseries);
return;
} else d3.select(graphs[i].current).selectAll('*').remove();
@@ -51,8 +57,8 @@ function TimeSeries(props) {
const graphData = (timeseries) => {
const data = timeseries;
- setDatapoint(timeseries[timeseries.length-1]);
- setIndex(timeseries.length-1);
+ setDatapoint(timeseries[timeseries.length - 1]);
+ setIndex(timeseries.length - 1);
const svg1 = d3.select(graphElement1.current);
const svg2 = d3.select(graphElement2.current);
@@ -68,41 +74,60 @@ function TimeSeries(props) {
const dateMin = new Date(data[0]['date'] + '2020');
dateMin.setDate(dateMin.getDate() - 1);
- const dateMax = new Date(data[timeseries.length-1]['date'] + '2020');
+ const dateMax = new Date(data[timeseries.length - 1]['date'] + '2020');
dateMax.setDate(dateMax.getDate() + 1);
- const x = d3.scaleTime()
- .domain([dateMin, dateMax])
- .range([margin.left, width]);
+ const x = d3
+ .scaleTime()
+ .domain([dateMin, dateMax])
+ .range([margin.left, width]);
- const indexScale = d3.scaleLinear()
- .domain([0, timeseries.length])
- .range([margin.left, width]);
+ const indexScale = d3
+ .scaleLinear()
+ .domain([0, timeseries.length])
+ .range([margin.left, width]);
// Arrays of objects
const svgArray = [svg1, svg2, svg3, svg4, svg5, svg6];
- const dataTypes = ['totalconfirmed', 'totalrecovered', 'totaldeceased',
- 'dailyconfirmed', 'dailyrecovered', 'dailydeceased'];
- const colors = ['#ff073a', '#28a745', '#6c757d', '#ff073a', '#28a745', '#6c757d'];
- const maxDataTypes = Array.from({ length: svgArray.length }, (_, i) => {
- return d3.max(data, (d) => { return +d[dataTypes[i]]; })
- })
+ const dataTypes = [
+ 'totalconfirmed',
+ 'totalrecovered',
+ 'totaldeceased',
+ 'dailyconfirmed',
+ 'dailyrecovered',
+ 'dailydeceased',
+ ];
+ const colors = [
+ '#ff073a',
+ '#28a745',
+ '#6c757d',
+ '#ff073a',
+ '#28a745',
+ '#6c757d',
+ ];
+ const maxDataTypes = Array.from({length: svgArray.length}, (_, i) => {
+ return d3.max(data, (d) => {
+ return +d[dataTypes[i]];
+ });
+ });
const yScales = maxDataTypes.map((d) => {
- return d3.scaleLinear()
- .domain([-d/10, d])
- .range([height, margin.top]);
+ return d3
+ .scaleLinear()
+ .domain([-d / 10, d])
+ .range([height, margin.top]);
});
/* Focus dots */
const focus = svgArray.map((d, i) => {
const y = mode ? yScales[0] : yScales[i];
- return d.append('g')
- .append('circle')
- .attr('fill', colors[i])
- .attr('stroke', colors[i])
- .attr('r', 5)
- .attr('cx', x(new Date(data[timeseries.length-1]['date'] + '2020')))
- .attr('cy', y(data[timeseries.length-1][dataTypes[i]]));
+ return d
+ .append('g')
+ .append('circle')
+ .attr('fill', colors[i])
+ .attr('stroke', colors[i])
+ .attr('r', 5)
+ .attr('cx', x(new Date(data[timeseries.length - 1]['date'] + '2020')))
+ .attr('cy', y(data[timeseries.length - 1][dataTypes[i]]));
});
function mouseout() {
@@ -110,10 +135,12 @@ function TimeSeries(props) {
setIndex(timeseries.length - 1);
focus.forEach((d, i) => {
const y = mode ? yScales[0] : yScales[i];
- d.attr('cx', x(new Date(data[timeseries.length-1]['date'] + '2020')))
- .attr('cy', y(data[timeseries.length-1][dataTypes[i]]));
+ d.attr(
+ 'cx',
+ x(new Date(data[timeseries.length - 1]['date'] + '2020'))
+ ).attr('cy', y(data[timeseries.length - 1][dataTypes[i]]));
});
- };
+ }
function mousemove() {
const xm = d3.mouse(this)[0];
@@ -124,11 +151,13 @@ function TimeSeries(props) {
setIndex(i);
focus.forEach((f, j) => {
const y = mode ? yScales[0] : yScales[j];
- f.attr('cx', x(new Date(d['date'] + '2020')))
- .attr('cy', y(d[dataTypes[j]]));
+ f.attr('cx', x(new Date(d['date'] + '2020'))).attr(
+ 'cy',
+ y(d[dataTypes[j]])
+ );
});
}
- };
+ }
/* Begin drawing charts */
svgArray.forEach((s, i) => {
@@ -142,20 +171,25 @@ function TimeSeries(props) {
s.append('g')
.attr('transform', `translate(${width}, ${0})`)
.attr('class', 'axis')
- .call(d3.axisRight(mode ? yScales[0] : yScales[i])
- .ticks(5)
- .tickPadding(5)
- .tickFormat((tick) => {
- if (Math.floor(tick) === tick) return tick;
- })
+ .call(
+ d3
+ .axisRight(mode ? yScales[0] : yScales[i])
+ .ticks(5)
+ .tickPadding(5)
+ .tickFormat((tick) => {
+ if (Math.floor(tick) === tick) return tick;
+ })
);
/* Focus dots */
- s.on('mousemove', mousemove).on('touchmove', mousemove)
- .on('mouseout', mouseout).on('touchend', mouseout);
+ s.on('mousemove', mousemove)
+ .on('touchmove', mousemove)
+ .on('mouseout', mouseout)
+ .on('touchend', mouseout);
/* Path dots */
- const dots = s.selectAll('.dot')
+ const dots = s
+ .selectAll('.dot')
.data(data)
.enter()
.append('circle')
@@ -163,7 +197,7 @@ function TimeSeries(props) {
.attr('stroke', colors[i])
.attr('cursor', 'pointer')
.attr('cx', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('cy', (d) => {
if (mode) return yScales[0](d[dataTypes[i]]);
@@ -178,32 +212,36 @@ function TimeSeries(props) {
.attr('stroke', colors[i] + '99')
.attr('stroke-width', 5)
.attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x((d) => {
- return x(new Date(d['date']+'2020'));
- })
- .y((d) => {
- if (mode) return yScales[0](d[dataTypes[i]]);
- return yScales[i](d[dataTypes[i]]);
- })
- .curve(d3.curveCardinal),
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x((d) => {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y((d) => {
+ if (mode) return yScales[0](d[dataTypes[i]]);
+ return yScales[i](d[dataTypes[i]]);
+ })
+ .curve(d3.curveCardinal)
);
dots.attr('r', 3);
- }
- else {
+ } else {
s.selectAll('stem-line')
.data(data)
.enter()
.append('line')
.attr('x1', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('y1', height)
.attr('x2', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('y2', (d) => {
- return mode ? yScales[0](d[dataTypes[i]]) : yScales[i](d[dataTypes[i]]);
+ return mode
+ ? yScales[0](d[dataTypes[i]])
+ : yScales[i](d[dataTypes[i]]);
})
.style('stroke', colors[i] + '99')
.style('stroke-width', 4);
@@ -213,18 +251,40 @@ function TimeSeries(props) {
};
return (
-
-
-
+
+
Confirmed {datapoint['date']}
{datapoint['totalconfirmed']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']>=0 ? '+'+(timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']) : (timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['totalconfirmed'] -
+ timeseries[index - 1]['totalconfirmed'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['totalconfirmed'] -
+ timeseries[index - 1]['totalconfirmed'])
+ : timeseries[index]['totalconfirmed'] -
+ timeseries[index - 1]['totalconfirmed']
+ : ''}
+
-
+
@@ -232,36 +292,91 @@ function TimeSeries(props) {
Recovered {datapoint['date']}
{datapoint['totalrecovered']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']>=0 ? '+'+(timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']) : (timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['totalrecovered'] -
+ timeseries[index - 1]['totalrecovered'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['totalrecovered'] -
+ timeseries[index - 1]['totalrecovered'])
+ : timeseries[index]['totalrecovered'] -
+ timeseries[index - 1]['totalrecovered']
+ : ''}
+
-
+
- Deceased
{datapoint['date']}
+
+ Deceased
+ {datapoint['date']}
+
{datapoint['totaldeceased']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']>=0 ? '+'+(timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']) : (timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['totaldeceased'] -
+ timeseries[index - 1]['totaldeceased'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['totaldeceased'] -
+ timeseries[index - 1]['totaldeceased'])
+ : timeseries[index]['totaldeceased'] -
+ timeseries[index - 1]['totaldeceased']
+ : ''}
+
-
+
-
-
-
+
Confirmed {datapoint['date']}
{datapoint['dailyconfirmed']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']>=0 ? '+'+(timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']) : (timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['dailyconfirmed'] -
+ timeseries[index - 1]['dailyconfirmed'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['dailyconfirmed'] -
+ timeseries[index - 1]['dailyconfirmed'])
+ : timeseries[index]['dailyconfirmed'] -
+ timeseries[index - 1]['dailyconfirmed']
+ : ''}
+
-
+
@@ -269,23 +384,59 @@ function TimeSeries(props) {
Recovered {datapoint['date']}
{datapoint['dailyrecovered']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']>=0 ? '+'+(timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']) : (timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['dailyrecovered'] -
+ timeseries[index - 1]['dailyrecovered'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['dailyrecovered'] -
+ timeseries[index - 1]['dailyrecovered'])
+ : timeseries[index]['dailyrecovered'] -
+ timeseries[index - 1]['dailyrecovered']
+ : ''}
+
-
+
- Deceased
{datapoint['date']}
+
+ Deceased
+ {datapoint['date']}
+
{datapoint['dailydeceased']}
- {timeseries.length>0 && index!==0 ? timeseries[index]['dailydeceased'] - timeseries[index-1]['dailydeceased']>=0 ? '+'+(timeseries[index]['dailydeceased'] - timeseries[index-1]['dailydeceased']) : (timeseries[index]['dailydeceased'] - timeseries[index-1]['dailydeceased']) : ''}
+
+ {timeseries.length > 0 && index !== 0
+ ? timeseries[index]['dailydeceased'] -
+ timeseries[index - 1]['dailydeceased'] >=
+ 0
+ ? '+' +
+ (timeseries[index]['dailydeceased'] -
+ timeseries[index - 1]['dailydeceased'])
+ : timeseries[index]['dailydeceased'] -
+ timeseries[index - 1]['dailydeceased']
+ : ''}
+
-
+
-
);
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index c4838eb55f..7a16d089fb 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -57,7 +57,7 @@ export function register(config) {
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
- .then(registration => {
+ .then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
};
};
})
- .catch(error => {
+ .catch((error) => {
console.error('Error during service worker registration:', error);
});
}
@@ -101,9 +101,9 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
- headers: { 'Service-Worker': 'script' }
+ headers: {'Service-Worker': 'script'},
})
- .then(response => {
+ .then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
@@ -111,7 +111,7 @@ function checkValidServiceWorker(swUrl, config) {
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
+ navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
@@ -131,10 +131,10 @@ function checkValidServiceWorker(swUrl, config) {
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
- .then(registration => {
+ .then((registration) => {
registration.unregister();
})
- .catch(error => {
+ .catch((error) => {
console.error(error.message);
});
}
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 74b1a275a0..0000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
{currentHoveredRegion.name}
- {currentMap.mapType === MAP_TYPES.STATE && currentMapData.Unknown > 0 ? ( -Districts unknown for {currentMapData.Unknown} people
- ) : null} + {currentMap.mapType === MAP_TYPES.STATE && + currentMapData.Unknown > 0 ? ( ++ Districts unknown for {currentMapData.Unknown} people +
+ ) : null} {currentMap.mapType === MAP_TYPES.STATE ? ( - switchMapToState('India')}>
+
switchMapToState('India')}
+ >
Back
- ) : null}
+ ) : null}
-
+
-
-
+
+
-
-
+
@@ -39,12 +38,10 @@ function Navbar(props) {
{
- setView("Home");
+ setView('Home');
}}
>
-
- Home
-
+ Home
{/* {
@@ -56,34 +53,28 @@ function Navbar(props) {
{
- setView("Clusters");
+ setView('Clusters');
}}
>
-
- Clusters
-
+ Clusters
{
- setView("Helpful Links");
+ setView('Helpful Links');
}}
>
-
- Helpful Links
-
+ Helpful Links
{
- setView("FAQs");
+ setView('FAQs');
}}
>
-
- FAQ
-
+ FAQ
diff --git a/src/components/row.js b/src/components/row.js
index 9aa2c351a2..7c5fcab1c1 100644
--- a/src/components/row.js
+++ b/src/components/row.js
@@ -5,48 +5,68 @@ function Row(props) {
const [state, setState] = useState(props.state);
const [districts, setDistricts] = useState(props.districts);
const [sortData, setSortData] = useState({
- sortColumn: localStorage.getItem('district.sortColumn')? localStorage.getItem('district.sortColumn') : 'confirmed',
- isAscending: localStorage.getItem('district.isAscending')? localStorage.getItem('district.isAscending') == 'true' : false,
+ sortColumn: localStorage.getItem('district.sortColumn')
+ ? localStorage.getItem('district.sortColumn')
+ : 'confirmed',
+ isAscending: localStorage.getItem('district.isAscending')
+ ? localStorage.getItem('district.isAscending') === 'true'
+ : false,
});
let sortedDistricts = {};
- useEffect(()=>{
+ useEffect(() => {
setState(props.state);
}, [props.state]);
- useEffect(()=>{
+ useEffect(() => {
setDistricts(props.districts);
}, [props.districts]);
- useEffect(()=>{
+ useEffect(() => {
sort(districts);
}, [districts]);
const handleReveal = () => {
props.handleReveal(props.state.state);
};
-
+
const sort = (aDistricts) => {
sortedDistricts = {};
- if(aDistricts) {
- Object.keys(aDistricts).sort((district1, district2) => {
- const sortColumn = sortData.sortColumn;
- let value1 = sortColumn === 'district' ? district1 : parseInt(aDistricts[district1].confirmed);
- let value2 = sortColumn === 'district' ? district2 : parseInt(aDistricts[district2].confirmed);
- let comparisonValue = value1 > value2 ? 1 : (value1 == value2) && district1 > district2 ? 1 : -1;
- return sortData.isAscending? comparisonValue : (comparisonValue * -1)
- }).forEach(key => {
- sortedDistricts[key] = aDistricts[key];
- });
+ if (aDistricts) {
+ Object.keys(aDistricts)
+ .sort((district1, district2) => {
+ const sortColumn = sortData.sortColumn;
+ const value1 =
+ sortColumn === 'district'
+ ? district1
+ : parseInt(aDistricts[district1].confirmed);
+ const value2 =
+ sortColumn === 'district'
+ ? district2
+ : parseInt(aDistricts[district2].confirmed);
+ const comparisonValue =
+ value1 > value2
+ ? 1
+ : value1 === value2 && district1 > district2
+ ? 1
+ : -1;
+ return sortData.isAscending ? comparisonValue : comparisonValue * -1;
+ })
+ .forEach((key) => {
+ sortedDistricts[key] = aDistricts[key];
+ });
}
};
const handleSort = (column) => {
- const isAscending = sortData.sortColumn == column? !sortData.isAscending : sortData.sortColumn === 'district';
+ const isAscending =
+ sortData.sortColumn === column
+ ? !sortData.isAscending
+ : sortData.sortColumn === 'district';
setSortData({
sortColumn: column,
- isAscending: isAscending ,
+ isAscending: isAscending,
});
localStorage.setItem('district.sortColumn', column);
localStorage.setItem('district.isAscending', isAscending);
@@ -56,93 +76,144 @@ function Row(props) {
return (
- {
- handleReveal();
- }}>
- props.onHighlightState?.(state, props.index)}
onMouseLeave={() => props.onHighlightState?.()}
touchstart={() => props.onHighlightState?.(state, props.index)}
- onClick={()=>{
+ onClick={() => {
handleReveal();
- }}>
+ }}
+ >
{state.state}
- {!state.delta.confirmed==0 &&
-
- {/*
+
+ {/*
{!state.delta.active==0 &&
-
- {/*
+
+ {/*
{!state.delta.recovered==0 &&
-
- {/*
+
+ {/*
{!state.delta.deaths==0 &&
-
+
-
- handleSort('district')} >
-
+
-
-
+
-
);
}
diff --git a/src/components/navbar.js b/src/components/navbar.js
index 35435b0359..f1101227ec 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -1,37 +1,36 @@
-import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import React, {useState} from 'react';
+import {Link} from 'react-router-dom';
function Navbar(props) {
- const [view, setView] = useState("Home");
+ const [view, setView] = useState('Home');
// HTML Properties for each of the links in UI
const navLinkProps = (path, animationDelay) => ({
- className: `fadeInUp ${window.location.pathname === path ? "focused": ""}`,
+ className: `fadeInUp ${window.location.pathname === path ? 'focused' : ''}`,
style: {
- animationDelay: `${animationDelay}s`
- }
+ animationDelay: `${animationDelay}s`,
+ },
});
- if (window.location.pathname !== "/summary") {
+ if (window.location.pathname !== '/summary') {
return (
+
-
@@ -39,12 +38,10 @@ function Navbar(props) {
{
- setView("Home");
+ setView('Home');
}}
>
-
- Home
-
+ Home
{/* {
@@ -56,34 +53,28 @@ function Navbar(props) {
{
- setView("Clusters");
+ setView('Clusters');
}}
>
-
- Clusters
-
+ Clusters
{
- setView("Helpful Links");
+ setView('Helpful Links');
}}
>
-
- Helpful Links
-
+ Helpful Links
{
- setView("FAQs");
+ setView('FAQs');
}}
>
-
- FAQ
-
+ FAQ
-
- District
-
-
+ handleSort('district')}>
+
handleSort('confirmed')}>
-
- {
- Object.keys(sortedDistricts).map((district, index) => {
- if (district.toLowerCase()!=='unknown') {
- return (
-
- {district}
- {sortedDistricts[district].confirmed}
-
- );
- }
- })
- }
+ {Object.keys(sortedDistricts).map((district, index) => {
+ if (district.toLowerCase() !== 'unknown') {
+ return (
+
+ {district}
+ {sortedDistricts[district].confirmed}
+
+ );
+ }
+ })}
- {sortedDistricts?.Unknown &&
-
- Unknown
+ {sortedDistricts?.Unknown && (
+
+ Unknown
{sortedDistricts['Unknown'].confirmed}
- }
+ )}
-
+
-
-
+
-
);
}
diff --git a/src/components/table.js b/src/components/table.js
index b729451703..21135e20c2 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -1,6 +1,5 @@
import React, {useState, useEffect} from 'react';
import * as Icon from 'react-feather';
-import axios from 'axios';
import Row from './row';
@@ -10,12 +9,16 @@ function Table(props) {
const [districts, setDistricts] = useState({});
const [count, setCount] = useState(0);
const [sortData, setSortData] = useState({
- sortColumn: localStorage.getItem('state.sortColumn')? localStorage.getItem('state.sortColumn') : 'confirmed',
- isAscending: localStorage.getItem('state.isAscending')? localStorage.getItem('state.isAscending') == 'true' : false,
+ sortColumn: localStorage.getItem('state.sortColumn')
+ ? localStorage.getItem('state.sortColumn')
+ : 'confirmed',
+ isAscending: localStorage.getItem('state.isAscending')
+ ? localStorage.getItem('state.isAscending') === 'true'
+ : false,
});
- useEffect(()=>{
- if (props.summary===true) {
+ useEffect(() => {
+ if (props.summary === true) {
setStates(props.states.slice(0, 9));
} else {
setStates(props.states);
@@ -24,66 +27,67 @@ function Table(props) {
useEffect(() => {
if (props.states[0]) {
- setRevealedStates(props.states.reduce((a, state) => {
- return ({...a, [state.state]: false});
- }, {}));
+ setRevealedStates(
+ props.states.reduce((a, state) => {
+ return {...a, [state.state]: false};
+ }, {})
+ );
}
}, [props.states]);
- useEffect(()=>{
- if (states.length>0) {
+ useEffect(() => {
+ if (states.length > 0) {
let length = 0;
props.states.map((state, i) => {
- if (i!==0 && state.confirmed>0) length+=1;
- if (i===props.states.length-1) setCount(length);
+ if (i !== 0 && state.confirmed > 0) length += 1;
+ if (i === props.states.length - 1) setCount(length);
});
}
}, [states.length]);
- useEffect(()=>{
- getDistricts();
- }, [1]);
-
-
- const getDistricts = () => {
- axios.get('https://api.covid19india.org/state_district_wise.json')
- .then((response)=>{
- setDistricts(response.data);
- })
- .catch((err)=>{
- console.log(err);
- });
- };
- // make a axios call every 10minutes
- setInterval(getDistricts, 600000);
+ useEffect(() => {
+ setDistricts(props.stateDistrictWiseData);
+ }, [props.stateDistrictWiseData]);
const doSort = (e, props) => {
const totalRow = states.splice(0, 1);
- {/* console.log(totalRow);*/}
states.sort((StateData1, StateData2) => {
const sortColumn = sortData.sortColumn;
let value1 = StateData1[sortColumn];
let value2 = StateData2[sortColumn];
- if (sortColumn != 'state') {
+ if (sortColumn !== 'state') {
value1 = parseInt(StateData1[sortColumn]);
value2 = parseInt(StateData2[sortColumn]);
}
if (sortData.isAscending) {
- return value1 > value2 ? 1 : (value1 == value2) && StateData1['state'] > StateData2['state'] ? 1 : -1;
+ return value1 > value2
+ ? 1
+ : value1 === value2 && StateData1['state'] > StateData2['state']
+ ? 1
+ : -1;
} else {
- return value1 < value2 ? 1 : (value1 == value2) && StateData1['state'] > StateData2['state'] ? 1 : -1;
+ return value1 < value2
+ ? 1
+ : value1 === value2 && StateData1['state'] > StateData2['state']
+ ? 1
+ : -1;
}
});
- {/* console.log(states);*/}
states.unshift(totalRow[0]);
};
const handleSort = (e, props) => {
- const currentsortColumn = e.currentTarget.querySelector('abbr').getAttribute('title').toLowerCase();
- const isAscending = sortData.sortColumn == currentsortColumn? !sortData.isAscending : sortData.sortColumn === 'state';
+ const currentsortColumn = e.currentTarget
+ .querySelector('abbr')
+ .getAttribute('title')
+ .toLowerCase();
+ const isAscending =
+ sortData.sortColumn === currentsortColumn
+ ? !sortData.isAscending
+ : sortData.sortColumn === 'state';
setSortData({
sortColumn: currentsortColumn,
isAscending: isAscending,
@@ -103,72 +107,152 @@ function Table(props) {
return (
<>
-
);
diff --git a/src/components/timeseries.js b/src/components/timeseries.js
index d59d489e0b..eb8f4be4ed 100644
--- a/src/components/timeseries.js
+++ b/src/components/timeseries.js
@@ -1,5 +1,4 @@
import React, {useState, useEffect, useRef} from 'react';
-import axios from 'axios';
import * as d3 from 'd3';
function TimeSeries(props) {
@@ -16,33 +15,40 @@ function TimeSeries(props) {
const graphElement5 = useRef(null);
const graphElement6 = useRef(null);
- useEffect(()=>{
- if (props.timeseries.length>1) {
+ useEffect(() => {
+ if (props.timeseries.length > 1) {
setTimeseries(props.timeseries);
}
}, [props.timeseries.length]);
- useEffect(()=>{
- if (timeseries.length>1) {
+ useEffect(() => {
+ if (timeseries.length > 1) {
graphData(timeseries);
}
}, [timeseries.length]);
- useEffect(()=>{
+ useEffect(() => {
setMode(props.mode);
- setUpdate(update+1);
+ setUpdate(update + 1);
}, [props.mode]);
- useEffect(()=>{
- if (update>0) {
+ useEffect(() => {
+ if (update > 0) {
refreshGraphs(graphData);
}
}, [update]);
const refreshGraphs = () => {
- const graphs = [graphElement1, graphElement2, graphElement3, graphElement4, graphElement5, graphElement6];
- for (let i=0; i<=graphs.length; i++) {
- if (i===graphs.length) {
+ const graphs = [
+ graphElement1,
+ graphElement2,
+ graphElement3,
+ graphElement4,
+ graphElement5,
+ graphElement6,
+ ];
+ for (let i = 0; i <= graphs.length; i++) {
+ if (i === graphs.length) {
graphData(timeseries);
return;
} else d3.select(graphs[i].current).selectAll('*').remove();
@@ -51,8 +57,8 @@ function TimeSeries(props) {
const graphData = (timeseries) => {
const data = timeseries;
- setDatapoint(timeseries[timeseries.length-1]);
- setIndex(timeseries.length-1);
+ setDatapoint(timeseries[timeseries.length - 1]);
+ setIndex(timeseries.length - 1);
const svg1 = d3.select(graphElement1.current);
const svg2 = d3.select(graphElement2.current);
@@ -68,41 +74,60 @@ function TimeSeries(props) {
const dateMin = new Date(data[0]['date'] + '2020');
dateMin.setDate(dateMin.getDate() - 1);
- const dateMax = new Date(data[timeseries.length-1]['date'] + '2020');
+ const dateMax = new Date(data[timeseries.length - 1]['date'] + '2020');
dateMax.setDate(dateMax.getDate() + 1);
- const x = d3.scaleTime()
- .domain([dateMin, dateMax])
- .range([margin.left, width]);
+ const x = d3
+ .scaleTime()
+ .domain([dateMin, dateMax])
+ .range([margin.left, width]);
- const indexScale = d3.scaleLinear()
- .domain([0, timeseries.length])
- .range([margin.left, width]);
+ const indexScale = d3
+ .scaleLinear()
+ .domain([0, timeseries.length])
+ .range([margin.left, width]);
// Arrays of objects
const svgArray = [svg1, svg2, svg3, svg4, svg5, svg6];
- const dataTypes = ['totalconfirmed', 'totalrecovered', 'totaldeceased',
- 'dailyconfirmed', 'dailyrecovered', 'dailydeceased'];
- const colors = ['#ff073a', '#28a745', '#6c757d', '#ff073a', '#28a745', '#6c757d'];
- const maxDataTypes = Array.from({ length: svgArray.length }, (_, i) => {
- return d3.max(data, (d) => { return +d[dataTypes[i]]; })
- })
+ const dataTypes = [
+ 'totalconfirmed',
+ 'totalrecovered',
+ 'totaldeceased',
+ 'dailyconfirmed',
+ 'dailyrecovered',
+ 'dailydeceased',
+ ];
+ const colors = [
+ '#ff073a',
+ '#28a745',
+ '#6c757d',
+ '#ff073a',
+ '#28a745',
+ '#6c757d',
+ ];
+ const maxDataTypes = Array.from({length: svgArray.length}, (_, i) => {
+ return d3.max(data, (d) => {
+ return +d[dataTypes[i]];
+ });
+ });
const yScales = maxDataTypes.map((d) => {
- return d3.scaleLinear()
- .domain([-d/10, d])
- .range([height, margin.top]);
+ return d3
+ .scaleLinear()
+ .domain([-d / 10, d])
+ .range([height, margin.top]);
});
/* Focus dots */
const focus = svgArray.map((d, i) => {
const y = mode ? yScales[0] : yScales[i];
- return d.append('g')
- .append('circle')
- .attr('fill', colors[i])
- .attr('stroke', colors[i])
- .attr('r', 5)
- .attr('cx', x(new Date(data[timeseries.length-1]['date'] + '2020')))
- .attr('cy', y(data[timeseries.length-1][dataTypes[i]]));
+ return d
+ .append('g')
+ .append('circle')
+ .attr('fill', colors[i])
+ .attr('stroke', colors[i])
+ .attr('r', 5)
+ .attr('cx', x(new Date(data[timeseries.length - 1]['date'] + '2020')))
+ .attr('cy', y(data[timeseries.length - 1][dataTypes[i]]));
});
function mouseout() {
@@ -110,10 +135,12 @@ function TimeSeries(props) {
setIndex(timeseries.length - 1);
focus.forEach((d, i) => {
const y = mode ? yScales[0] : yScales[i];
- d.attr('cx', x(new Date(data[timeseries.length-1]['date'] + '2020')))
- .attr('cy', y(data[timeseries.length-1][dataTypes[i]]));
+ d.attr(
+ 'cx',
+ x(new Date(data[timeseries.length - 1]['date'] + '2020'))
+ ).attr('cy', y(data[timeseries.length - 1][dataTypes[i]]));
});
- };
+ }
function mousemove() {
const xm = d3.mouse(this)[0];
@@ -124,11 +151,13 @@ function TimeSeries(props) {
setIndex(i);
focus.forEach((f, j) => {
const y = mode ? yScales[0] : yScales[j];
- f.attr('cx', x(new Date(d['date'] + '2020')))
- .attr('cy', y(d[dataTypes[j]]));
+ f.attr('cx', x(new Date(d['date'] + '2020'))).attr(
+ 'cy',
+ y(d[dataTypes[j]])
+ );
});
}
- };
+ }
/* Begin drawing charts */
svgArray.forEach((s, i) => {
@@ -142,20 +171,25 @@ function TimeSeries(props) {
s.append('g')
.attr('transform', `translate(${width}, ${0})`)
.attr('class', 'axis')
- .call(d3.axisRight(mode ? yScales[0] : yScales[i])
- .ticks(5)
- .tickPadding(5)
- .tickFormat((tick) => {
- if (Math.floor(tick) === tick) return tick;
- })
+ .call(
+ d3
+ .axisRight(mode ? yScales[0] : yScales[i])
+ .ticks(5)
+ .tickPadding(5)
+ .tickFormat((tick) => {
+ if (Math.floor(tick) === tick) return tick;
+ })
);
/* Focus dots */
- s.on('mousemove', mousemove).on('touchmove', mousemove)
- .on('mouseout', mouseout).on('touchend', mouseout);
+ s.on('mousemove', mousemove)
+ .on('touchmove', mousemove)
+ .on('mouseout', mouseout)
+ .on('touchend', mouseout);
/* Path dots */
- const dots = s.selectAll('.dot')
+ const dots = s
+ .selectAll('.dot')
.data(data)
.enter()
.append('circle')
@@ -163,7 +197,7 @@ function TimeSeries(props) {
.attr('stroke', colors[i])
.attr('cursor', 'pointer')
.attr('cx', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('cy', (d) => {
if (mode) return yScales[0](d[dataTypes[i]]);
@@ -178,32 +212,36 @@ function TimeSeries(props) {
.attr('stroke', colors[i] + '99')
.attr('stroke-width', 5)
.attr('cursor', 'pointer')
- .attr('d', d3.line()
- .x((d) => {
- return x(new Date(d['date']+'2020'));
- })
- .y((d) => {
- if (mode) return yScales[0](d[dataTypes[i]]);
- return yScales[i](d[dataTypes[i]]);
- })
- .curve(d3.curveCardinal),
+ .attr(
+ 'd',
+ d3
+ .line()
+ .x((d) => {
+ return x(new Date(d['date'] + '2020'));
+ })
+ .y((d) => {
+ if (mode) return yScales[0](d[dataTypes[i]]);
+ return yScales[i](d[dataTypes[i]]);
+ })
+ .curve(d3.curveCardinal)
);
dots.attr('r', 3);
- }
- else {
+ } else {
s.selectAll('stem-line')
.data(data)
.enter()
.append('line')
.attr('x1', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('y1', height)
.attr('x2', (d) => {
- return x(new Date(d['date']+'2020'));
+ return x(new Date(d['date'] + '2020'));
})
.attr('y2', (d) => {
- return mode ? yScales[0](d[dataTypes[i]]) : yScales[i](d[dataTypes[i]]);
+ return mode
+ ? yScales[0](d[dataTypes[i]])
+ : yScales[i](d[dataTypes[i]]);
})
.style('stroke', colors[i] + '99')
.style('stroke-width', 4);
@@ -213,18 +251,40 @@ function TimeSeries(props) {
};
return (
-
{sortData.isAscending ?
+
+ District
+
+ {sortData.isAscending ?
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'C' : 'Cnfmd' : 'Confirmed'}
-
{sortData.isAscending ?
+
+
+ {window.innerWidth <= 769
+ ? window.innerWidth <= 375
+ ? 'C'
+ : 'Cnfmd'
+ : 'Confirmed'}
+
+
+ {sortData.isAscending ?
India COVID-19 Tracker
-
-
+
+
We stand with everyone fighting on the frontlines
{count} States/UTS Affected
++ {count} States/UTS Affected +
| handleSort(e, props)} >
-
-
- State/UT
-
-
- {sortData.isAscending ? handleSort(e, props)}
+ >
+ |
+ State/UT
+
+ {sortData.isAscending ?
handleSort(e, props)}>
- |
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'C' : 'Cnfmd' : 'Confirmed'}
-
- {sortData.isAscending ?
+
+ {window.innerWidth <= 769
+ ? window.innerWidth <= 375
+ ? 'C'
+ : 'Cnfmd'
+ : 'Confirmed'}
+
+
+ {sortData.isAscending ?
handleSort(e, props)}>
- |
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'A' : 'Actv' : 'Active'}
-
- {sortData.isAscending ?
+
+ {window.innerWidth <= 769
+ ? window.innerWidth <= 375
+ ? 'A'
+ : 'Actv'
+ : 'Active'}
+
+
+ {sortData.isAscending ?
handleSort(e, props)}>
- |
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'R' : 'Rcvrd' : 'Recovered'}
-
-
- {sortData.isAscending ?
+
+ {window.innerWidth <= 769
+ ? window.innerWidth <= 375
+ ? 'R'
+ : 'Rcvrd'
+ : 'Recovered'}
+
+
+
+ {sortData.isAscending ?
handleSort(e, props)}>
- |
- {window.innerWidth <=769 ? window.innerWidth <=375 ? 'D' : 'Dcsd' : 'Deceased'}
-
- {sortData.isAscending ?
+
+ {window.innerWidth <= 769
+ ? window.innerWidth <= 375
+ ? 'D'
+ : 'Dcsd'
+ : 'Deceased'}
+
+
+ {sortData.isAscending ?
|
|---|
-
-
+
);
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index c4838eb55f..7a16d089fb 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -57,7 +57,7 @@ export function register(config) {
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
- .then(registration => {
+ .then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
};
};
})
- .catch(error => {
+ .catch((error) => {
console.error('Error during service worker registration:', error);
});
}
@@ -101,9 +101,9 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
- headers: { 'Service-Worker': 'script' }
+ headers: {'Service-Worker': 'script'},
})
- .then(response => {
+ .then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
@@ -111,7 +111,7 @@ function checkValidServiceWorker(swUrl, config) {
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
+ navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
@@ -131,10 +131,10 @@ function checkValidServiceWorker(swUrl, config) {
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
- .then(registration => {
+ .then((registration) => {
registration.unregister();
})
- .catch(error => {
+ .catch((error) => {
console.error(error.message);
});
}
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 74b1a275a0..0000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+
-
+
-
- Confirmed {datapoint['date']}
{datapoint['totalconfirmed']}
-{timeseries.length>0 && index!==0 ? timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']>=0 ? '+'+(timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']) : (timeseries[index]['totalconfirmed'] - timeseries[index-1]['totalconfirmed']) : ''}
++ {timeseries.length > 0 && index !== 0 + ? timeseries[index]['totalconfirmed'] - + timeseries[index - 1]['totalconfirmed'] >= + 0 + ? '+' + + (timeseries[index]['totalconfirmed'] - + timeseries[index - 1]['totalconfirmed']) + : timeseries[index]['totalconfirmed'] - + timeseries[index - 1]['totalconfirmed'] + : ''} +
@@ -232,36 +292,91 @@ function TimeSeries(props) {
-
+
Recovered {datapoint['date']}
{datapoint['totalrecovered']}
-{timeseries.length>0 && index!==0 ? timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']>=0 ? '+'+(timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']) : (timeseries[index]['totalrecovered'] - timeseries[index-1]['totalrecovered']) : ''}
++ {timeseries.length > 0 && index !== 0 + ? timeseries[index]['totalrecovered'] - + timeseries[index - 1]['totalrecovered'] >= + 0 + ? '+' + + (timeseries[index]['totalrecovered'] - + timeseries[index - 1]['totalrecovered']) + : timeseries[index]['totalrecovered'] - + timeseries[index - 1]['totalrecovered'] + : ''} +
- Deceased
+
+ Deceased
-
+
Deceased
{datapoint['date']}
+
+ Deceased
+ {datapoint['date']}
+
{datapoint['totaldeceased']}
-{timeseries.length>0 && index!==0 ? timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']>=0 ? '+'+(timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']) : (timeseries[index]['totaldeceased'] - timeseries[index-1]['totaldeceased']) : ''}
++ {timeseries.length > 0 && index !== 0 + ? timeseries[index]['totaldeceased'] - + timeseries[index - 1]['totaldeceased'] >= + 0 + ? '+' + + (timeseries[index]['totaldeceased'] - + timeseries[index - 1]['totaldeceased']) + : timeseries[index]['totaldeceased'] - + timeseries[index - 1]['totaldeceased'] + : ''} +
-
+
-
+
-
Confirmed {datapoint['date']}
{datapoint['dailyconfirmed']}
-{timeseries.length>0 && index!==0 ? timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']>=0 ? '+'+(timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']) : (timeseries[index]['dailyconfirmed'] - timeseries[index-1]['dailyconfirmed']) : ''}
++ {timeseries.length > 0 && index !== 0 + ? timeseries[index]['dailyconfirmed'] - + timeseries[index - 1]['dailyconfirmed'] >= + 0 + ? '+' + + (timeseries[index]['dailyconfirmed'] - + timeseries[index - 1]['dailyconfirmed']) + : timeseries[index]['dailyconfirmed'] - + timeseries[index - 1]['dailyconfirmed'] + : ''} +
@@ -269,23 +384,59 @@ function TimeSeries(props) {
-
+
Recovered {datapoint['date']}
{datapoint['dailyrecovered']}
-{timeseries.length>0 && index!==0 ? timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']>=0 ? '+'+(timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']) : (timeseries[index]['dailyrecovered'] - timeseries[index-1]['dailyrecovered']) : ''}
++ {timeseries.length > 0 && index !== 0 + ? timeseries[index]['dailyrecovered'] - + timeseries[index - 1]['dailyrecovered'] >= + 0 + ? '+' + + (timeseries[index]['dailyrecovered'] - + timeseries[index - 1]['dailyrecovered']) + : timeseries[index]['dailyrecovered'] - + timeseries[index - 1]['dailyrecovered'] + : ''} +
- Deceased
+
+ Deceased
-
+