diff --git a/src/components/Locations.js b/src/components/Locations.js index 4f73059..265c59b 100644 --- a/src/components/Locations.js +++ b/src/components/Locations.js @@ -10,7 +10,7 @@ function Locations({ show }) { return (
Locations { setShowCardInfo(!showCardInfo) }}> - {showCardInfo &&
Test colcations
} + {showCardInfo &&
Test locations are shown in map. For example, Nagpur has conducted tests
}
diff --git a/src/components/ScatterPlot.js b/src/components/ScatterPlot.js index 6bcf226..c5ca870 100644 --- a/src/components/ScatterPlot.js +++ b/src/components/ScatterPlot.js @@ -1,9 +1,6 @@ import React, { Component } from 'react'; import * as d3 from 'd3'; -import { sgg } from 'ml-savitzky-golay-generalized'; -import axios from 'axios'; -import moment from 'moment'; -import { FaBeer, FaInfoCircle } from "react-icons/fa"; +import { FaInfoCircle } from "react-icons/fa"; import './ScatterPlot.css'; import constants from '../configs/constants'; @@ -126,7 +123,7 @@ class ScatterPlot extends Component {
Result ratio !this.setState({ showCardInfo: !this.state.showCardInfo })}> - {this.state.showCardInfo &&
Based on all tests
} + {this.state.showCardInfo &&
Based on all tests data the ratio of results are shown corresponding to ages
}
diff --git a/src/components/TestAnalyticsGraph.js b/src/components/TestAnalyticsGraph.js index 5a3546c..8b296a7 100644 --- a/src/components/TestAnalyticsGraph.js +++ b/src/components/TestAnalyticsGraph.js @@ -26,8 +26,8 @@ class TestAnalyticsGraph extends Component { data.reverse(); var margin = { top: 60, right: 20, bottom: 30, left: 50 }, - width = 450 - margin.left - margin.right, - height = 200 - margin.top - margin.bottom; + width = 520 - margin.left - margin.right, + height = 220 - margin.top - margin.bottom; var svg = d3.select("#tests-count-graph").append('svg') .attr("width", width + margin.left + margin.right) diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js index 3103794..332cce1 100644 --- a/src/components/TestAnalyticsPie.js +++ b/src/components/TestAnalyticsPie.js @@ -71,7 +71,7 @@ class TestAnalyticsPie extends Component { .attr("d", path) .attr("fill", function (d) { return color(d.data.category); }) .on('mouseover', (event, d) => { - tooltip.text(`${d.data.category}: ${d.data.count}, ${100 * d.data.count / data.reduce((a, c) => a + c.count, 0)}%`); + tooltip.text(`${d.data.category}: ${d.data.count}, ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`); return tooltip .style("visibility", "visible") .style("font-size", "0.65em") diff --git a/src/components/WorldMap.css b/src/components/WorldMap.css new file mode 100644 index 0000000..bb88cca --- /dev/null +++ b/src/components/WorldMap.css @@ -0,0 +1,29 @@ +.markers { + position: absolute; + left: 50%; + top: 50%; + /* transform: translate(-50%, -50%); */ +} +.marker { + background: #fff; + border-radius: 50%; + border: 50px solid #222; + width: 20px; + height: 20px; + animation: load 1.5s ease-out infinite; +} + +@keyframes load { + 0% { + background: #fff; + border: 0px solid #fff; + } + 50% { + background: #fff; + border: 100px solid #222; + } + 100% { + background: #fff; + border: 0px solid #222; + } +} \ No newline at end of file diff --git a/src/components/WorldMap.js b/src/components/WorldMap.js index 827739c..70c7bfc 100644 --- a/src/components/WorldMap.js +++ b/src/components/WorldMap.js @@ -1,38 +1,17 @@ import React, { useState, useEffect } from "react" import { geoEqualEarth, geoPath } from "d3-geo" -import { feature } from "topojson-client" +import { feature } from "topojson-client"; + +import "./WorldMap.css"; const cities = [ - // { name: "Tokyo", coordinates: [139.6917,35.6895], population: 37843000 }, // { name: "Jakarta", coordinates: [106.8650,-6.1751], population: 30539000 }, // { name: "Delhi", coordinates: [77.1025,28.7041], population: 24998000 }, // { name: "Manila", coordinates: [120.9842,14.5995], population: 24123000 }, - // { name: "Seoul", coordinates: [126.9780,37.5665], population: 23480000 }, - // { name: "Shanghai", coordinates: [121.4737,31.2304], population: 23416000 }, // { name: "Karachi", coordinates: [67.0099,24.8615], population: 22123000 }, - // { name: "Beijing", coordinates: [116.4074,39.9042], population: 21009000 }, - // { name: "New York", coordinates: [-74.0059,40.7128], population: 20630000 }, - // { name: "Guangzhou", coordinates: [113.2644,23.1291], population: 20597000 }, - // { name: "Sao Paulo", coordinates: [-46.6333,-23.5505], population: 20365000 }, - // { name: "Mexico City", coordinates: [-99.1332,19.4326], population: 20063000 }, // { name: "Mumbai", coordinates: [72.8777,19.0760], population: 17712000 }, - // { name: "Osaka", coordinates: [135.5022,34.6937], population: 17444000 }, - // { name: "Moscow", coordinates: [37.6173,55.7558], population: 16170000 }, // { name: "Dhaka", coordinates: [90.4125,23.8103], population: 15669000 }, - // { name: "Greater Cairo", coordinates: [31.2357,30.0444], population: 15600000 }, - // { name: "Los Angeles", coordinates: [-118.2437,34.0522], population: 15058000 }, - // { name: "Bangkok", coordinates: [100.5018,13.7563], population: 14998000 }, // { name: "Kolkata", coordinates: [88.3639,22.5726], population: 14667000 }, - // { name: "Buenos Aires", coordinates: [-58.3816,-34.6037], population: 14122000 }, - // { name: "Tehran", coordinates: [51.3890,35.6892], population: 13532000 }, - // { name: "Istanbul", coordinates: [28.9784,41.0082], population: 13287000 }, - // { name: "Lagos", coordinates: [3.3792,6.5244], population: 13123000 }, - // { name: "Shenzhen", coordinates: [114.0579,22.5431], population: 12084000 }, - // { name: "Rio de Janeiro", coordinates: [-43.1729,-22.9068], population: 11727000 }, - // { name: "Kinshasa", coordinates: [15.2663,-4.4419], population: 11587000 }, - // { name: "Tianjin", coordinates: [117.3616,39.3434], population: 10920000 }, - // { name: "Paris", coordinates: [2.3522,48.8566], population: 10858000 }, - // { name: "Lima", coordinates: [-77.0428,-12.0464], population: 10750000 }, { name: "Nagpur", coordinates: [79.088860, 21.146633], population: 24667000 }, ]