From e9b9cd2cd88e453a3a35cf3f672ba965660b9ff2 Mon Sep 17 00:00:00 2001 From: Galen Guyer Date: Wed, 31 Aug 2022 12:31:25 -0400 Subject: Update the dashboard with a message about the lack of any dashboards --- package.json | 1 + pnpm-lock.yaml | 24 +++++---- src/App.css | 8 --- src/App.jsx | 140 ++---------------------------------------------- src/components/Card.css | 45 ---------------- src/components/Card.jsx | 25 --------- src/index.css | 18 +++---- src/logo.svg | 7 --- src/pages/Graph.css | 33 ------------ src/pages/Graph.jsx | 107 ------------------------------------ src/pages/Index.css | 24 --------- src/pages/Index.jsx | 106 ++++++++++++++++++------------------ src/useFetch.js | 17 ------ 13 files changed, 77 insertions(+), 478 deletions(-) delete mode 100644 src/components/Card.css delete mode 100644 src/components/Card.jsx delete mode 100644 src/logo.svg delete mode 100644 src/pages/Graph.css delete mode 100644 src/pages/Graph.jsx delete mode 100644 src/useFetch.js diff --git a/package.json b/package.json index 567b9f0..0465a49 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "private": true, "version": "0.0.0", "scripts": { + "start": "vite", "dev": "vite", "build": "vite build", "preview": "vite preview" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55a3c44..972f223 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.3 +lockfileVersion: 5.4 specifiers: '@types/react': ^18.0.0 @@ -17,8 +17,8 @@ dependencies: prop-types: 15.8.1 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-router-dom: 6.3.0_react-dom@18.0.0+react@18.0.0 - recharts: 2.1.9_bdb4aea89f170aaa1ddb585ff4b9f19e + react-router-dom: 6.3.0_zpnidt7m3osuk7shl3s4oenomq + recharts: 2.1.9_xw2k5ke7c4fkuho3lbp7joprty devDependencies: '@types/react': 18.0.4 @@ -197,6 +197,8 @@ packages: resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==} engines: {node: '>=6.0.0'} hasBin: true + dependencies: + '@babel/types': 7.17.0 dev: true /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.9: @@ -926,7 +928,7 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-resize-detector/6.7.8_react-dom@18.0.0+react@18.0.0: + /react-resize-detector/6.7.8_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-0FaEcUBAbn+pq3PT5a9hHRebUfuS1SRLGLpIw8LydU7zX429I6XJgKerKAMPsJH0qWAl6o5bVKNqFJqr6tGPYw==} peerDependencies: react: ^16.0.0 || ^17.0.0 @@ -939,7 +941,7 @@ packages: resize-observer-polyfill: 1.5.1 dev: false - /react-router-dom/6.3.0_react-dom@18.0.0+react@18.0.0: + /react-router-dom/6.3.0_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==} peerDependencies: react: '>=16.8' @@ -960,7 +962,7 @@ packages: react: 18.0.0 dev: false - /react-smooth/2.0.0_bdb4aea89f170aaa1ddb585ff4b9f19e: + /react-smooth/2.0.0_xw2k5ke7c4fkuho3lbp7joprty: resolution: {integrity: sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==} peerDependencies: prop-types: ^15.6.0 @@ -972,10 +974,10 @@ packages: raf: 3.4.1 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-transition-group: 2.9.0_react-dom@18.0.0+react@18.0.0 + react-transition-group: 2.9.0_zpnidt7m3osuk7shl3s4oenomq dev: false - /react-transition-group/2.9.0_react-dom@18.0.0+react@18.0.0: + /react-transition-group/2.9.0_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==} peerDependencies: react: '>=15.0.0' @@ -1002,7 +1004,7 @@ packages: decimal.js-light: 2.5.1 dev: false - /recharts/2.1.9_bdb4aea89f170aaa1ddb585ff4b9f19e: + /recharts/2.1.9_xw2k5ke7c4fkuho3lbp7joprty: resolution: {integrity: sha512-VozH5uznUvGqD7n224FGj7cmMAenlS0HPCs+7r2HeeHiQK6un6z0CTZfWVAB860xbcr4m+BN/EGMPZmYWd34Rg==} engines: {node: '>=12'} peerDependencies: @@ -1021,8 +1023,8 @@ packages: react: 18.0.0 react-dom: 18.0.0_react@18.0.0 react-is: 16.13.1 - react-resize-detector: 6.7.8_react-dom@18.0.0+react@18.0.0 - react-smooth: 2.0.0_bdb4aea89f170aaa1ddb585ff4b9f19e + react-resize-detector: 6.7.8_zpnidt7m3osuk7shl3s4oenomq + react-smooth: 2.0.0_xw2k5ke7c4fkuho3lbp7joprty recharts-scale: 0.4.5 reduce-css-calc: 2.1.8 transitivePeerDependencies: diff --git a/src/App.css b/src/App.css index f4846a6..f964ebb 100644 --- a/src/App.css +++ b/src/App.css @@ -13,14 +13,6 @@ font-size: 2.4em; margin: 18px 0px 8px 0px; } -.Updated .Latest { - font-size: 1.3em; - margin: 0px; -} -.Updated .Prior { - margin: 6px; - color: #666; -} .App a { text-decoration: none; diff --git a/src/App.jsx b/src/App.jsx index 5afcb03..ff72a91 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,112 +1,16 @@ -import { useLocation, Routes, Route, Link } from "react-router-dom"; -import { useState, lazy, Suspense } from "react"; -import useFetch from "./useFetch"; -import { DateTime } from "luxon"; +import { Link } from "react-router-dom"; import "./App.css"; -const Index = lazy(() => import("./pages/Index")); -const Graph = lazy(() => import("./pages/Graph")); -import { useEffect } from "react"; +import Index from "./pages/Index"; const App = () => { - const url = localStorage.getItem("url") ?? "https://ritcoviddashboard.com/api/v0/history"; - - let routerLocation = useLocation(); - useEffect(() => { - !window.goatcounter ?? - window.goatcounter.count({ - path: location.pathname + location.search + location.hash, - }); - }, [routerLocation]); - - const response = useFetch(url); - - const [timeDifference, setTimeDifference] = useState(1); - const local = DateTime.local().zoneName; - - let data = response.data ?? []; - - const latest = response.loading ? null : data[data.length - 1]; - const prior = response.loading ? null : data[data.length - (1 + timeDifference)]; - - const lastUpdate = response.loading ? null : DateTime.fromSQL(latest.last_updated).setZone(local); - const priorUpdate = response.loading ? null : DateTime.fromSQL(prior.last_updated).setZone(local); - return (

RIT COVID Dashboard

-
- - - - - } - > - - - - } - > - - - - } - > - - - - } - > - - - - } - /> - +
); }; -const Updated = (props) => { - const { loading, lastUpdate, priorUpdate, timeDifference } = props; - if (loading) { - return
; - } - - return ( -
-
- Last Updated:{" "} - {lastUpdate.toLocaleString({ - weekday: "long", - month: "long", - day: "2-digit", - hour: "2-digit", - minute: "2-digit", - })} -
-
- Prior Update:{" "} - {priorUpdate.toLocaleString({ - weekday: "long", - month: "long", - day: "2-digit", - hour: "2-digit", - minute: "2-digit", - })}{" "} - ({timeDifference == 1 ? "one weekday ago" : timeDifference == 5 ? "one week ago" : "two weeks ago"}) -
-
- ); -}; - export default App; diff --git a/src/components/Card.css b/src/components/Card.css deleted file mode 100644 index 273e106..0000000 --- a/src/components/Card.css +++ /dev/null @@ -1,45 +0,0 @@ -.cardLink { - text-decoration: none; - color: black; - margin: 12px 24px; - flex-basis: 100%; - max-width: 200px; -} - -.Card { - text-decoration: none; - color: #000; - border: 2px solid #fbd38d; - border-radius: 12px; - padding: 0px 40px; -} - -@media screen and (max-width: 600px) { - .Card { - padding: 0px 16px; - margin: 10px 0px; - } -} - -.Latest { - font-size: 1.8em; -} - -.Diff { - color: #666; -} - -.Card:hover { - background-color: #ffc869; - color: #fff; -} -.Card:hover .Diff { - color: #fff; -} - -.animate { - -moz-transition: color,background-color 0.3s; - -webkit-transition: color,background-color 0.3s; - -ms-transition: color,background-color 0.3s; - transition: color,background-color 0.3s; -} diff --git a/src/components/Card.jsx b/src/components/Card.jsx deleted file mode 100644 index 95bd583..0000000 --- a/src/components/Card.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import "./Card.css"; - -const Card = (props) => { - let diff = props.diff.toString(); - if (diff.charAt(0) != "-") { - diff = "+" + diff; - } - - return ( - -
-

- {props.latest} ({diff}) -

-

- {props.name} -

-
- - ); -}; - -export default Card; diff --git a/src/index.css b/src/index.css index c4c1ceb..a7ae2da 100644 --- a/src/index.css +++ b/src/index.css @@ -1,17 +1,15 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } * { - font-weight: 400; -} \ No newline at end of file + font-weight: 400; +} diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/pages/Graph.css b/src/pages/Graph.css deleted file mode 100644 index 8cb98ee..0000000 --- a/src/pages/Graph.css +++ /dev/null @@ -1,33 +0,0 @@ -.Title { - font-size: 2em; - margin-top: 24px; -} - -.ToTheMoon { - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/src/pages/Graph.jsx b/src/pages/Graph.jsx deleted file mode 100644 index 0d18fab..0000000 --- a/src/pages/Graph.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { DateTime } from "luxon"; -import { - BarChart, - Bar, - LineChart, - Line, - CartesianGrid, - XAxis, - YAxis, - Tooltip, - ReferenceLine, - ReferenceDot, - ResponsiveContainer, - Label, -} from "recharts"; -import "./Graph.css"; - -const Graph = (props) => { - const { name, response, dataKey, timeDifference } = props; - const { data, loading, error } = response; - - if (loading) { - return
; - } - - const eventStyle = { fill: "#767676" }; - - const parsed = data.map((d) => { - return { - date: DateTime.fromSQL(d["last_updated"], { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(), - value: d[dataKey], - }; - }); - - const latest = parsed[parsed.length - 1]; - const prior = parsed[parsed.length - 2] - const toTheMoon = latest.value > prior.value + 1; - - return ( -
-
{name}
- 600 ? 750 : window.innerWidth * 0.9} - height={500} - margin={{ top: 15, right: 30, left: 0, bottom: 5 }} - data={parsed} - > - - - - {} - - {toTheMoon ? ( - 🚀} - /> - ) : null} - } - height={90} - /> - - - -
- ); -}; - -const CustomizedAxisTick = ({ x, y, payload }) => { - return ( - - - {DateTime.fromSeconds(payload.value).toLocaleString()} - - - ); -}; - -const CustomTooltip = ({ active, payload, label }) => { - if (active) { - return ( -
-

- {DateTime.fromSeconds(label).toLocaleString({ weekday: "long", month: "long", day: "2-digit" })} -

-

{payload[0].value}

-
- ); - } - return null; -}; - -export default Graph; diff --git a/src/pages/Index.css b/src/pages/Index.css index c134449..128a71b 100644 --- a/src/pages/Index.css +++ b/src/pages/Index.css @@ -2,27 +2,3 @@ margin-top: 24px; font-size: 1.4em; } - -@media screen and (max-width: 600px) { - .Message { - display: none; - } -} - -.Section .Title { - text-align: center; - font-size: 1.6em; - flex-basis: 100%; - margin-top: 48px; -} - -@media screen and (max-width: 600px) { - .Section .Title { - margin-top: 12px; - } -} - -.Cards { - display: flex; - justify-content: center; -} diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx index 7f196e0..5e4c788 100644 --- a/src/pages/Index.jsx +++ b/src/pages/Index.jsx @@ -1,62 +1,60 @@ -import Card from "../components/Card"; import "./Index.css"; -const Index = (props) => { - const response = props.response; - if (response.loading) { - return
Loading...
; - } - - const data = response.data; +const Index = () => { + return ( +
+

2022-2023 Dashboard

+

+ RIT is not providing a COVID dashboard for the 2022-2023 semester. As such, I have no source for any + data to update this dashboard. +

+

+ At the beginning of the semester, rit.edu/ready claimed that a new + dashboard would be published, as visible in{" "} + + this snapshot taken August 2nd on archive.org + + . However, that was removed sometime between August 15th and August 31st, as seen in{" "} + + this snapshot taken August 31st. + {" "} + The updated site did claim "The level of COVID RNA found in this week’s wastewater samples is slightly + higher than last spring". +

- const latest = data[data.length - 1]; - const prior = data[data.length - (1 + props.timeDifference)]; +

+ There is a{" "} + + PawPrints petition to restore the COVID dashboard + {" "} + so students can see the current level of risk. If you're concerned about RIT's handling of the pandemic, + you should sign this! Unless RIT gives us the dashboard back, we have no visiblity into how many cases + there are on campus. +

- return ( -
-
-
- This dashboard has been refreshed for the new semester. Historical data from the 2020-2021 school - year is available at 2020.ritcoviddashboard.com. Data - from the Fall 2021 semester is available at{" "} - 2021.ritcoviddashboard.com. -
-
-
-
Total Positive Cases Since January 10 (First Day of Classes)
-
- - -
-
+
-
-
New Positive Cases From Past 14 Days
-
- - -
-
+

Prior Dashboards

+

+ The dashboards from the last two years are still online. I'll be keeping them up indefinitely so + everyone can see RIT's handling of the pandemic. +

+

+ The dashboard for the 2020-2021 school year is available at{" "} + + 2020.ritcoviddashboard.com + +

+

+ The dashboard for the 2021-2022 school year is available at{" "} + + 2021.ritcoviddashboard.com + +

+

+ If you would like the raw data I've collected, or have any questions, concerns, or comments, please + reach out to me at gkg1648@rit.edu +

); }; diff --git a/src/useFetch.js b/src/useFetch.js deleted file mode 100644 index d098e2f..0000000 --- a/src/useFetch.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect, useState } from "react"; - -export default function useFetch(url, options) { - const [data, setData] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - fetch(url, options) - .then((resp) => resp.json()) - .then((resp) => setData(resp)) - .catch((err) => setError(err)) - .finally(() => setLoading(false)); - }, []); - - return { data, loading, error }; -} -- cgit v1.2.3