From c2442ca62e5d4b32f1a913336f51282b9490b1f2 Mon Sep 17 00:00:00 2001 From: Galen Guyer Date: Wed, 13 Apr 2022 20:16:57 -0400 Subject: To the Moon!!! --- src/pages/Graph.css | 31 ++++++++++++++++++++++++++++++- src/pages/Graph.jsx | 12 ++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) 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 (
{name}
@@ -53,6 +57,14 @@ const Graph = (props) => { /> {} + {toTheMoon ? ( + 🚀} + /> + ) : null}