From 55bdf46afacbced883d54e5fc1a711dc80312e59 Mon Sep 17 00:00:00 2001 From: Juan Narvaez Date: Sun, 22 Aug 2021 11:04:28 -0500 Subject: [PATCH] Use visibility sensor --- package-lock.json | 132 +---------------------- package.json | 3 +- src/components/Map/Counties/Counties.jsx | 106 +++++++++--------- 3 files changed, 61 insertions(+), 180 deletions(-) diff --git a/package-lock.json b/package-lock.json index 50aedd6..1e11537 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "covid-visualizer", - "version": "0.0.2-SNAPSHOT", + "version": "0.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1247,14 +1247,6 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, - "@koale/useworker": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@koale/useworker/-/useworker-4.0.2.tgz", - "integrity": "sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg==", - "requires": { - "dequal": "^1.0.0" - } - }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1804,76 +1796,6 @@ "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==" }, - "@turf/bbox": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz", - "integrity": "sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw==", - "requires": { - "@turf/helpers": "^6.5.0", - "@turf/meta": "^6.5.0" - } - }, - "@turf/boolean-contains": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-6.5.0.tgz", - "integrity": "sha512-4m8cJpbw+YQcKVGi8y0cHhBUnYT+QRfx6wzM4GI1IdtYH3p4oh/DOBJKrepQyiDzFDaNIjxuWXBh0ai1zVwOQQ==", - "requires": { - "@turf/bbox": "^6.5.0", - "@turf/boolean-point-in-polygon": "^6.5.0", - "@turf/boolean-point-on-line": "^6.5.0", - "@turf/helpers": "^6.5.0", - "@turf/invariant": "^6.5.0" - } - }, - "@turf/boolean-point-in-polygon": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz", - "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==", - "requires": { - "@turf/helpers": "^6.5.0", - "@turf/invariant": "^6.5.0" - } - }, - "@turf/boolean-point-on-line": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-6.5.0.tgz", - "integrity": "sha512-A1BbuQ0LceLHvq7F/P7w3QvfpmZqbmViIUPHdNLvZimFNLo4e6IQunmzbe+8aSStH9QRZm3VOflyvNeXvvpZEQ==", - "requires": { - "@turf/helpers": "^6.5.0", - "@turf/invariant": "^6.5.0" - } - }, - "@turf/helpers": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz", - "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==" - }, - "@turf/intersect": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-6.5.0.tgz", - "integrity": "sha512-2legGJeKrfFkzntcd4GouPugoqPUjexPZnOvfez+3SfIMrHvulw8qV8u7pfVyn2Yqs53yoVCEjS5sEpvQ5YRQg==", - "requires": { - "@turf/helpers": "^6.5.0", - "@turf/invariant": "^6.5.0", - "polygon-clipping": "^0.15.3" - } - }, - "@turf/invariant": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz", - "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==", - "requires": { - "@turf/helpers": "^6.5.0" - } - }, - "@turf/meta": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz", - "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==", - "requires": { - "@turf/helpers": "^6.5.0" - } - }, "@types/d3-color": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz", @@ -5683,11 +5605,6 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, - "dequal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-1.0.1.tgz", - "integrity": "sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ==" - }, "des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -8712,11 +8629,6 @@ } } }, - "http-https": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/http-https/-/http-https-1.0.0.tgz", - "integrity": "sha1-L5CN1fHbQGjAWM1ubUzjkskTOJs=" - }, "http-parser-js": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz", @@ -11480,14 +11392,6 @@ "es-abstract": "^1.18.2" } }, - "oboe": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/oboe/-/oboe-2.1.5.tgz", - "integrity": "sha1-VVQoTFQ6ImbXo48X4HOCH73jk80=", - "requires": { - "http-https": "^1.0.0" - } - }, "obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -11845,14 +11749,6 @@ "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.1.0.tgz", "integrity": "sha512-CPCdcFxx7fEcDMWTDjXe2Wypt4JuMt4q5Q2UrpTcyBBkLiCIyPEh/mCGmUWIcNkKGyXwQ9Y2wVhlKm6ketiBNQ==" }, - "polygon-clipping": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.3.tgz", - "integrity": "sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==", - "requires": { - "splaytree": "^3.1.0" - } - }, "popmotion": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.1.tgz", @@ -15823,14 +15719,6 @@ "scheduler": "^0.19.1" } }, - "react-dropdown": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.9.2.tgz", - "integrity": "sha512-g4eufErTi5P5T5bGK+VmLl//qvAHy79jm6KKx8G2Tl3mG90bpigb+Aw85P+C2JUdAnIIQdv8kP/oHN314GvAfw==", - "requires": { - "classnames": "^2.2.3" - } - }, "react-error-overlay": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz", @@ -16661,19 +16549,6 @@ "transformation-matrix": "^2.6.0" } }, - "react-tiny-crossfade": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/react-tiny-crossfade/-/react-tiny-crossfade-2.0.0.tgz", - "integrity": "sha512-B2HH1mZdwHcS/R0k/qzwKV9zBHJiVU4M1o7TG7m7JAShgCYlqvC+2IofmgJe+DAo0gNAkKet7iaD4dsx9142AA==", - "requires": { - "react-tiny-transition": "^2.1.8" - } - }, - "react-tiny-transition": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/react-tiny-transition/-/react-tiny-transition-2.4.0.tgz", - "integrity": "sha512-QhRlbTSV+cJUL2DjtOc8BHhp9iwo57WEmC/Thj3zqifhV8MViyC0XupM2aPqCODrVkBk8ImKzZZhRstlnsRUAg==" - }, "react-tooltip": { "version": "4.2.21", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", @@ -18242,11 +18117,6 @@ } } }, - "splaytree": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.0.tgz", - "integrity": "sha512-gvUGR7xnOy0fLKTCxDeUZYgU/I1Tdf8M/lM1Qrf8L2TIOR5ipZjGk02uYcdv0o2x7WjVRgpm3iS2clLyuVAt0Q==" - }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", diff --git a/package.json b/package.json index bcc53b0..c63e44f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "covid-visualizer", - "version": "0.0.3", + "version": "0.0.4", "dependencies": { "@types/react": "16.4.16", "@visx/xychart": "v2.0.0-alpha.0", @@ -25,6 +25,7 @@ "react-svg-pan-zoom": "^3.10.0", "react-tooltip": "^4.2.21", "react-use-gesture": "^9.1.3", + "react-visibility-sensor": "^5.1.1", "reactour": "^1.18.6", "styled-components": "^5.3.0", "topojson-client": "^3.1.0", diff --git a/src/components/Map/Counties/Counties.jsx b/src/components/Map/Counties/Counties.jsx index 7cfb9b8..c8076ae 100644 --- a/src/components/Map/Counties/Counties.jsx +++ b/src/components/Map/Counties/Counties.jsx @@ -1,53 +1,63 @@ -import React, { memo, forwardRef } from 'react'; +import React, { memo, forwardRef, useRef } from 'react'; +import VisibilitySensor from 'react-visibility-sensor'; -export const Counties = memo(forwardRef(({ mapLayer, counties }, ref) => { - const fillColor = (county, mapLayer) => { - let fill; - - switch (mapLayer) { - case 'cfr': - fill = county.fill && county.fill.cfr; - break; - case 'cdc': - fill = county.fill && county.fill.cdc; - break; - case 'risk': - fill = county.fill && county.fill.riskLevels.overall; - break; - case 'deaths': - fill = county.fill && county.fill.deaths; - break; - case 'vaccinated': - fill = county.fill && county.fill.vaccinated; - break; - case 'cases': - fill = county.fill && county.fill.cases; - break; - case 'caseDensity': - fill = county.fill && county.fill.caseDensity; - break; - case 'infectionRate': - fill = county.fill && county.fill.infectionRate; - break; - case 'testPositivityRatio': - fill = county.fill && county.fill.testPositivityRatio; - break; - } +const fillColor = (county, mapLayer) => { + let fill; - return fill ? fill : 'rgba(255, 255, 255, 0)'; + switch (mapLayer) { + case 'cfr': + fill = county.fill && county.fill.cfr; + break; + case 'cdc': + fill = county.fill && county.fill.cdc; + break; + case 'risk': + fill = county.fill && county.fill.riskLevels.overall; + break; + case 'deaths': + fill = county.fill && county.fill.deaths; + break; + case 'vaccinated': + fill = county.fill && county.fill.vaccinated; + break; + case 'cases': + fill = county.fill && county.fill.cases; + break; + case 'caseDensity': + fill = county.fill && county.fill.caseDensity; + break; + case 'infectionRate': + fill = county.fill && county.fill.infectionRate; + break; + case 'testPositivityRatio': + fill = county.fill && county.fill.testPositivityRatio; + break; } - return counties ? {counties.map(county => - )} : null; + return fill ? fill : 'rgba(255, 255, 255, 0)'; +} + +const County = memo(({ county, mapLayer }) => { + return ( + + {({isVisible}) => + + } + + ) +}) + +export const Counties = memo(forwardRef(({ mapLayer, counties }, ref) => { + return counties ? {counties.map(county => )} : null; }))