From 99dedf407af4cfedc3384552e4e4983883f56816 Mon Sep 17 00:00:00 2001 From: prisar Date: Thu, 27 Jul 2023 10:31:15 +0530 Subject: [PATCH] add map and icons pkg --- .gitignore | 3 +- package-lock.json | 49 ++++++++++++++ package.json | 4 +- src/RegistraionChart.js | 2 +- src/components/AbsorbanceGraph.js | 2 + src/components/TestAnalyticsPie.js | 15 ++++- src/components/WorldMap.js | 103 +++++++++++++++++++++++++++++ src/firebase.js | 2 +- src/index.js | 6 ++ 9 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 src/components/WorldMap.js diff --git a/.gitignore b/.gitignore index 1e163ac..2364368 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,5 @@ yarn-error.log* .firebase -src/components/testData.json \ No newline at end of file +src/components/testData.json +public/world-110m.json diff --git a/package-lock.json b/package-lock.json index a8fdc97..6c9b43a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,9 +22,11 @@ "react-dom": "^18.2.0", "react-dropdown": "^1.11.0", "react-flip-numbers": "^3.0.8", + "react-icons": "^4.10.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", "react-select": "^5.7.4", + "topojson-client": "^3.1.0", "web-vitals": "^2.1.4" } }, @@ -16101,6 +16103,14 @@ "react-simple-animate": "^3.0.1" } }, + "node_modules/react-icons": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17835,6 +17845,24 @@ "node": ">=0.6" } }, + "node_modules/topojson-client": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz", + "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==", + "dependencies": { + "commander": "2" + }, + "bin": { + "topo2geo": "bin/topo2geo", + "topomerge": "bin/topomerge", + "topoquantize": "bin/topoquantize" + } + }, + "node_modules/topojson-client/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, "node_modules/tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", @@ -30629,6 +30657,12 @@ "react-simple-animate": "^3.0.1" } }, + "react-icons": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -31905,6 +31939,21 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "topojson-client": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz", + "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==", + "requires": { + "commander": "2" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + } + } + }, "tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", diff --git a/package.json b/package.json index bbbf304..c511a2e 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "hpos-dashboard", + "name": "hpos-web", "version": "0.1.0", "private": true, "dependencies": { @@ -17,9 +17,11 @@ "react-dom": "^18.2.0", "react-dropdown": "^1.11.0", "react-flip-numbers": "^3.0.8", + "react-icons": "^4.10.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", "react-select": "^5.7.4", + "topojson-client": "^3.1.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/RegistraionChart.js b/src/RegistraionChart.js index 00c76fb..399fe55 100644 --- a/src/RegistraionChart.js +++ b/src/RegistraionChart.js @@ -66,7 +66,7 @@ class RegistraionChart extends Component { } render() { - return
+ return
} } export default RegistraionChart; \ No newline at end of file diff --git a/src/components/AbsorbanceGraph.js b/src/components/AbsorbanceGraph.js index c1402c0..e8df3ba 100644 --- a/src/components/AbsorbanceGraph.js +++ b/src/components/AbsorbanceGraph.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import * as d3 from 'd3'; import { sgg } from 'ml-savitzky-golay-generalized'; import axios from 'axios'; +import { FaBeer, FaInfo } from "react-icons/fa"; import './DeviceGraph.css'; @@ -94,6 +95,7 @@ class AbsorbanceGraph extends Component { return (
+ {/* */}
wavelength vs absorbance
diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js index ab9a842..95726e9 100644 --- a/src/components/TestAnalyticsPie.js +++ b/src/components/TestAnalyticsPie.js @@ -17,7 +17,7 @@ class TestAnalyticsPie extends Component { drawChart(data) { if (!data) return; - + var margin = { top: 60, right: 20, bottom: 30, left: 50 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, @@ -56,12 +56,23 @@ class TestAnalyticsPie extends Component { .enter().append("g") .attr("class", "arc"); + var tooltip = d3.select("#category-diagram") + .append("div") + .style("position", "absolute") + .style("z-index", "10") + .style("visibility", "hidden") + .style("background", "#fff") + .text("a simple tooltip"); + arc.append("path") .attr("d", path) - .attr("fill", function (d) { return color(d.data.category); }); + .attr("fill", function (d) { return color(d.data.category); }) + .on('mouseover', (event, d) => { tooltip.text(`${d.data.category} (${d.data.count})`); console.log(d.data.count); return tooltip.style("visibility", "visible"); }); console.log(arc) + + arc.append("text") .attr("transform", function (d) { return "translate(" + label.centroid(d) + ")"; diff --git a/src/components/WorldMap.js b/src/components/WorldMap.js new file mode 100644 index 0000000..4627498 --- /dev/null +++ b/src/components/WorldMap.js @@ -0,0 +1,103 @@ +import React, { useState, useEffect } from "react" +import { geoEqualEarth, geoPath } from "d3-geo" +import { feature } from "topojson-client" + +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 }, +] + +const projection = geoEqualEarth() + .scale(160) + .translate([ 800 / 2, 450 / 2 ]) + +const WorldMap = () => { + const [geographies, setGeographies] = useState([]) + + useEffect(() => { + fetch("/world-110m.json") + .then(response => { + if (response.status !== 200) { + console.log(`There was a problem: ${response.status}`) + return + } + response.json().then(worlddata => { + setGeographies(feature(worlddata, worlddata.objects.countries).features) + }) + }) + }, []) + + const handleCountryClick = countryIndex => { + console.log("Clicked on country: ", geographies[countryIndex]) + } + + const handleMarkerClick = i => { + console.log("Marker: ", cities[i]) + } + + return ( + + + { + geographies.map((d,i) => ( + handleCountryClick(i) } + /> + )) + } + + + { + cities.map((city, i) => ( + handleMarkerClick(i) } + /> + )) + } + + + ) +} + +export default WorldMap \ No newline at end of file diff --git a/src/firebase.js b/src/firebase.js index aecdba5..636613a 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -1,4 +1,4 @@ -import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore"; +import { getFirestore} from "firebase/firestore"; import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; diff --git a/src/index.js b/src/index.js index 9a3cd56..22e3a57 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,8 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import Devices from './components/Devices'; import TestAnalytics from './components/TestAnalytics'; +import WorldMap from './components/WorldMap'; +import RegistraionChart from './RegistraionChart'; const router = createBrowserRouter([ { @@ -26,6 +28,10 @@ const router = createBrowserRouter([ { path: "/analytics", element: , + }, + { + path: "/map", + element: , } ]);