increase bar graph width
- change card info texts - add fixed faction digits to 2 - add map marker css
This commit is contained in:
Pritimay Sarkar
@@ -10,7 +10,7 @@ function Locations({ show }) {
|
||||
return (
|
||||
<div className='locations-card'>
|
||||
<div className='locations-card-title'>Locations<span className='locations-info-icon' onClick={() => { setShowCardInfo(!showCardInfo) }}><FaInfoCircle /></span>
|
||||
{showCardInfo && <div className='locations-info-card'>Test colcations</div>}
|
||||
{showCardInfo && <div className='locations-info-card'>Test locations are shown in map. For example, Nagpur has conducted tests</div>}
|
||||
</div>
|
||||
<WorldMap show={show} />
|
||||
</div>
|
||||
|
||||
@@ -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 {
|
||||
<div>
|
||||
<div className='resultratio-graph-card'>
|
||||
<div className='resultratio-card-title'>Result ratio<span className='resultratio-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
|
||||
{this.state.showCardInfo && <div className='resultratio-info-card'>Based on all tests</div>}
|
||||
{this.state.showCardInfo && <div className='resultratio-info-card'>Based on all tests data the ratio of results are shown corresponding to ages</div>}
|
||||
</div>
|
||||
<div id="resultratio-diagram" style={{ margin: '1em' }}>
|
||||
</div>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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")
|
||||
|
||||
29
src/components/WorldMap.css
Normal file
29
src/components/WorldMap.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 },
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user