Update bot project name to be a little less generic

This is going to be expanded upon in future releases, for now it's hardcoded to use just the previous time overlay

README.md

@@ -2,6 +2,8 @@
 
 These are the public assets for the [wowtoken.app](https://wowtoken.app) website, served off Amazon S3 behind CloudFront.
 
-This project gets picked up by CodePipeline, built via CodeBuild, and deployed.
+This project gets picked up by CodePipeline, built via CodeBuild, and to S3.
+
+Backend lambdas can be found at my private git repository [wowtoken.app-backend](https://git.emily.sh/wowtoken-app/wowtoken.app-backend)
 
 ![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)

src/index.html

@@ -80,7 +80,11 @@
                             Copy URL to this Chart
                         </button>
                     </div>
-                    <div>
+                    <div class="other-projects">
+                        <p><em>
+                            Get alerted when the Token hits certain thresholds using GoblinBot, find out more <a href="https://blog.emily.sh/token-bot/">here!</a>
+                        </em></p>
+                        <hr />
                         <p><em>Looking for the classic WoW Token price? Find it <a href="https://classic.wowtoken.app">here!</a></em></p>
                     </div>
                 </div>

src/index.js

@@ -6,7 +6,7 @@ import fetchData from "./fetchData";
 import {updateHighTime} from "./highTime";
 import {updateLowTime} from "./lowTime";
 import {addLoader, removeLoader} from "./loader";
-import {allowOverlay, forceOverlayOff, isOverlaySelected} from "./overlay";
+import {allowOverlay, forceOverlayOff, forceOverlayOn, isOverlayAllowed, isOverlaySelected} from "./overlay";
 import TokenChart from "./tokenChart";
 import Datum from "./datum";
 
@@ -212,6 +212,15 @@ function detectZeroQuery(urlSearchParams) {
     toggleStartYAtZero();
 }
 
+function detectOverlayQuery(urlSearchParams) {
+    const enableOverlay = urlSearchParams.get('overlay') === 'previous_time';
+    if (enableOverlay) {
+        forceOverlayOn();
+    } else {
+        forceOverlayOff();
+    }
+}
+
 function detectURLQuery() {
     const urlSearchParams = new URLSearchParams(window.location.search);
     if (urlSearchParams.has('region')) {
@@ -226,6 +235,9 @@ function detectURLQuery() {
     if (urlSearchParams.has('startAtZero')) {
         detectZeroQuery(urlSearchParams)
     }
+    if (urlSearchParams.has('overlay')) {
+        detectOverlayQuery(urlSearchParams);
+    }
 }
 
 function buildDeepLinksURL() {
@@ -242,6 +254,9 @@ function buildDeepLinksURL() {
     if (startYAtZero !== false){
         url += `startAtZero=${startYAtZero}&`
     }
+    if (isOverlaySelected()){
+        url += `overlay=previous_time&`
+    }
     return url
 }
 

src/overlay.js

@@ -19,9 +19,22 @@ function forceOverlayOff(){
     periodOverlayField.style.display = 'none';
 }
 
+function forceOverlayOn(){
+    const overlaySetting = document.getElementById("period-overlay");
+    const periodOverlayField = document.getElementById("period-overlay-options");
+    const advancedOptionsField = document.getElementById("advanced-options");
+    overlaySetting.checked = true;
+    advancedOptionsField.style.display = 'flex';
+    periodOverlayField.style.display = 'flex';
+}
+
+function isOverlayAllowed(timeSelection) {
+    return !(timeSelection === "all")
+}
+
 function allowOverlay(){
     const periodOverlayField = document.getElementById("period-overlay-options");
     periodOverlayField.style.display = 'flex';
 }
 
-export {isOverlaySelected, getOverlayTime, setOverlayLabelTime, forceOverlayOff, allowOverlay};
+export {isOverlaySelected, getOverlayTime, setOverlayLabelTime, forceOverlayOff, forceOverlayOn, isOverlayAllowed, allowOverlay};

src/style.css

@@ -420,6 +420,16 @@ details[open] summary {
     margin: 10px;
 }
 
+.other-projects {
+    border: 1px solid silver;
+    margin-bottom: 10px;
+    font-size: 15px;
+}
+
+.other-projects > p {
+    line-height: 1em;
+}
+
 .data-header h1 {
     margin-top: 24px;
     margin-bottom: 24px;

src/tokenChart.js

@@ -25,6 +25,7 @@ Chart.register(
 import {updateHighVal} from "./highTime";
 import {updateLowVal} from "./lowTime";
 import {isOverlaySelected, getOverlayTime, setOverlayLabelTime} from "./overlay";
+import Datum from "./datum";
 
 function lookupTimeUnit(query){
     const lookup = {
@@ -77,6 +78,22 @@ export default class TokenChart {
         this._chart = new Chart(this._context, chartConfig);
     }
 
+    async #updateHighLow(datum) {
+        if (this._highDatum === null) {
+            this._highDatum = new Datum(datum.getTime(), 0);
+            this._lowDatum = datum;
+            return;
+        }
+        if (datum.getPrice() > this._highDatum.getPrice()) {
+            this._highDatum = datum;
+            updateHighVal(this.highDatum);
+        }
+        else if (datum.getPrice() < this._lowDatum.getPrice()) {
+            this._lowDatum = datum;
+            updateLowVal(this.lowDatum);
+        }
+    }
+
     async #createOverlayChart(region, time, yLevel, data){
         const chartData = [];
         const overlayData = [];
@@ -91,15 +108,7 @@ export default class TokenChart {
                 });
             }
             else {
-
+                await this.#updateHighLow(data[i]);
-                this._lastDatum = data[i];
-                if (this._highDatum === null || this._lastDatum.getPrice() > this._highDatum.getPrice()) {
-                    this._highDatum = data[i];
-                }
-
-                if (this._lowDatum === null || this._lowDatum.getPrice() > this._lastDatum.getPrice()) {
-                    this._lowDatum = data[i];
-                }
 
                 chartData.push({
                     x: data[i].getX(),
@@ -174,13 +183,7 @@ export default class TokenChart {
 
         for (let i = 0; i < data.length; i++) {
             this._lastDatum = data[i];
-            if (this._highDatum === null || this._lastDatum.getPrice() > this._highDatum.getPrice()) {
+            await this.#updateHighLow(data[i]);
-                this._highDatum = data[i];
-            }
-
-            if (this._lowDatum === null || this._lowDatum.getPrice() > this._lastDatum.getPrice()) {
-                this._lowDatum = data[i];
-            }
 
             chartData.push({
                 x: data[i].getX(),
@@ -289,7 +292,10 @@ export default class TokenChart {
             this._lowDatum = datum;
             updateLowVal(this.lowDatum);
         }
-        this._chart.data.datasets[0].data.push(datum);
+        this._chart.data.datasets[0].data.push({
+            x: datum.getX(),
+            y: datum.getY(),
+        });
         this._chart.update();
     }