diff options
| -rw-r--r-- | src/pages/Graph.css | 31 | ||||
| -rw-r--r-- | src/pages/Graph.jsx | 12 |
2 files changed, 42 insertions, 1 deletions
diff --git a/src/pages/Graph.css b/src/pages/Graph.css index c28c8bd..8cb98ee 100644 --- a/src/pages/Graph.css +++ b/src/pages/Graph.css @@ -1,4 +1,33 @@ .Title { - font-size: 2.0em; + font-size: 2em; margin-top: 24px; } + +.ToTheMoon { + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/pages/Graph.jsx b/src/pages/Graph.jsx index 6754905..6f19304 100644 --- a/src/pages/Graph.jsx +++ b/src/pages/Graph.jsx @@ -9,6 +9,7 @@ import { YAxis, Tooltip, ReferenceLine, + ReferenceDot, ResponsiveContainer, Label, } from "recharts"; @@ -32,6 +33,9 @@ const Graph = (props) => { }; }); + const latest = parsed[parsed.length - 1]; + const toTheMoon = true; + return ( <div> <div className="Title">{name}</div> @@ -53,6 +57,14 @@ const Graph = (props) => { /> {} <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" |