Add option to generate overlay URL

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

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/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 {
-
-                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];
-                }
+                await this.#updateHighLow(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()) {
-                this._highDatum = data[i];
-            }
-
-            if (this._lowDatum === null || this._lowDatum.getPrice() > this._lastDatum.getPrice()) {
-                this._lowDatum = data[i];
-            }
+            await this.#updateHighLow(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();
     }