1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
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;
|
