aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGalen Guyer <galen@galenguyer.com>2020-11-15 13:38:09 -0500
committerGalen Guyer <galen@galenguyer.com>2020-11-15 13:38:09 -0500
commit668f0ee2dcc2bea3647e43db019ec3d9ee61e00e (patch)
treea47aee13dd8f9f638cbe3f83ce4dd27bc873a9dd
parent80355db079489fc4a14d38e3d1f733ac40a65141 (diff)
add goatcounter as page element to hopefully catch routing
-rw-r--r--public/index.html2
-rw-r--r--src/App.js4
-rw-r--r--src/GoatCounter.js26
-rw-r--r--src/History.js2
-rw-r--r--src/MainPage.js2
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.
diff --git a/src/App.js b/src/App.js
index 68d7f08..e01dbdf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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 />
</>
);
};