diff options
author | Galen Guyer <galen@galenguyer.com> | 2022-04-13 19:10:44 -0400 |
---|---|---|
committer | Galen Guyer <galen@galenguyer.com> | 2022-04-13 19:44:24 -0400 |
commit | 264e571b0ca34d24f4997c5864a43d4f475e14dc (patch) | |
tree | 3ddfb30dbd97dc5c5c3da91a8e1cba4916348190 /src/History.js | |
parent | 290e1694efacc8bfea62b78538cb9d40003f62f6 (diff) |
full version 2 re-write
Diffstat (limited to 'src/History.js')
-rw-r--r-- | src/History.js | 89 |
1 files changed, 0 insertions, 89 deletions
diff --git a/src/History.js b/src/History.js deleted file mode 100644 index 58085ac..0000000 --- a/src/History.js +++ /dev/null @@ -1,89 +0,0 @@ -import { React, PureComponent } from "react"; -import { DateTime } from "luxon"; -import { - BarChart, - Bar, - LineChart, - Line, - CartesianGrid, - XAxis, - YAxis, - Tooltip, - ReferenceLine, - 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(); - const data = props.data.map((d) => { - return { - value: d.value, - date: DateTime.fromSQL(d.date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(), - }; - }); - - if (process.env.NODE_ENV == "development") { - console.log(data); - } - - return ( - <> - <h3 className="text-3xl">{props.name}</h3> - <LineChart - style={{ marginLeft: "auto", marginRight: "auto" }} - width={730} - height={500} - margin={{ top: 15, right: 30, left: 20, bottom: 5 }} - data={data} - > - <Line type="monotone" dataKey="value" stroke="#CD8508" dot={false} /> - {/* <ReferenceLine x={1644594525} label={{ value: "Visitor Policy adjusted", angle: -90, position: 'center' }} /> */} - <ReferenceLine x={1647550274} label={{ value: "Mask Mandate dropped", angle: -90, position: 'left' }} /> - <CartesianGrid strokeDasharray="3 3" /> - <XAxis - dataKey="date" - type="number" - tickCount={14} - domain={["dataMin", "dataMax"]} - tick={<CustomizedAxisTick />} - height={90} - /> - <YAxis dataKey="value" type="number"></YAxis> - <Tooltip content={CustomTooltip} /> - </LineChart> - <GoatCounter /> - </> - ); -}; - -class CustomizedAxisTick extends PureComponent { - render() { - const { x, y, payload } = this.props; - - return ( - <g transform={`translate(${x},${y})`}> - <text className="Graph-Label" x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-40)"> - {DateTime.fromSeconds(payload.value).toLocaleString()} - </text> - </g> - ); - } -} - -const CustomTooltip = ({ active, payload, label }) => { - if (active) { - return ( - <div className="custom-tooltip bg-white border-orange-300 border-2 rounded-lg p-2"> - <p className="label"> - {DateTime.fromSeconds(label).toLocaleString({ weekday: "long", month: "long", day: "2-digit" })} - </p> - <p className="desc">{payload[0].value}</p> - </div> - ); - } - return null; -}; - -export default History; |