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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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 <div></div>;
}
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 (
<div>
<div className="Title">{name}</div>
<LineChart
style={{ marginLeft: "auto", marginRight: "auto" }}
width={window.innerWidth > 600 ? 750 : window.innerWidth * 0.9}
height={500}
margin={{ top: 15, right: 30, left: 0, bottom: 5 }}
data={parsed}
>
<Line type="monotone" dataKey="value" stroke="#CD8508" dot={false} />
<ReferenceLine
x={1644594525}
label={{ value: "Visitor Policy adjusted", angle: -90, style: eventStyle, position: "left" }}
/>
<ReferenceLine
x={1647550274}
label={{ value: "Mask Mandate dropped", angle: -90, style: eventStyle, position: "left" }}
/>
{}
<CartesianGrid strokeDasharray="3 3" />
{toTheMoon ? (
<ReferenceDot
x={latest["date"]}
y={latest["value"]}
r={0}
label={<Label className="ToTheMoon">🚀</Label>}
/>
) : null}
<XAxis
dataKey="date"
type="number"
tickCount={14}
domain={["dataMin", "dataMax"]}
tick={<CustomizedAxisTick />}
height={90}
/>
<YAxis dataKey="value" type="number"></YAxis>
<Tooltip content={CustomTooltip} />
</LineChart>
</div>
);
};
const CustomizedAxisTick = ({ x, y, payload }) => {
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 Graph;
|
