diff options
| -rw-r--r-- | public/index.html | 2 | ||||
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/GoatCounter.js | 26 | ||||
| -rw-r--r-- | src/History.js | 2 | ||||
| -rw-r--r-- | src/MainPage.js | 2 |
5 files changed, 32 insertions, 4 deletions
diff --git a/public/index.html b/public/index.html index 84daf94..61d9edc 100644 --- a/public/index.html +++ b/public/index.html @@ -30,8 +30,6 @@ <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> - <script data-goatcounter="https://rcd.goatcounter.com/count" - async src="//gc.zgo.at/count.js"></script> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. @@ -63,7 +63,7 @@ function App() { <button onClick={() => setTimeDifference(timeDifference == 1 ? 5 : 1)} - class="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300" + className="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300" > Use one {timeDifference == 1 ? "week" : "day"} ago </button> @@ -159,7 +159,7 @@ function App() { By Galen Guyer. Source available on{" "} <a className="text-blue-700" href="https://github.com/galenguyer/rit-covid-dashboard"> GitHub - </a> + </a> (<a href="https://github.com/galenguyer/rit-covid-dashboard/issues">Report Issue</a>) </p> </div> </BrowserRouter> diff --git a/src/GoatCounter.js b/src/GoatCounter.js new file mode 100644 index 0000000..15ec5ef --- /dev/null +++ b/src/GoatCounter.js @@ -0,0 +1,26 @@ +import React from 'react' + +class GoatCounter extends React.Component { + componentDidMount () { + window.counter = 'https://rcd.goatcounter.com/count'; + const script = window.document.createElement('script'); + script.async = 1; + script.src = 'https://gc.zgo.at/count.js'; + script.id = 'goatcounter'; + script.setAttribute('data-goatcounter', "https://rcd.goatcounter.com/count"); + (window.document.head || window.document.body).appendChild(script); + } + + componentWillUnmount () { + const script = window.document.getElementById('goatcounter') + if (script) { + script.parentNode.removeChild(script) + } + } + + render () { + return null + } +} + +export default GoatCounter
\ No newline at end of file diff --git a/src/History.js b/src/History.js index df5398b..2e710de 100644 --- a/src/History.js +++ b/src/History.js @@ -12,6 +12,7 @@ import { ResponsiveContainer, Label, } from "recharts"; +import GoatCounter from './GoatCounter'; const History = (props) => { const offset = DateTime.fromSQL(props.data[0].date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(); @@ -45,6 +46,7 @@ const History = (props) => { <YAxis dataKey="value" type="number"></YAxis> <Tooltip content={CustomTooltip} /> </LineChart> + <GoatCounter /> </> ); }; diff --git a/src/MainPage.js b/src/MainPage.js index ade335e..7c316c4 100644 --- a/src/MainPage.js +++ b/src/MainPage.js @@ -1,5 +1,6 @@ import React from "react"; import Card from "./Card"; +import GoatCounter from "./GoatCounter"; const MainPage = (props) => { const latest = props.latest; @@ -102,6 +103,7 @@ const MainPage = (props) => { /> </div> </div> + <GoatCounter /> </> ); }; |