To the Moon!!!

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"