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 CodePipline, built via CodeBuild, and deployed.
+This project gets picked up by CodePipeline, built via CodeBuild, and to S3.
 
-![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
+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)

buildspec.yml

@@ -3,7 +3,7 @@ version: 0.2
 phases:
   install:
     runtime-versions:
-      nodejs: 14
+      nodejs: 16
     commands:
       - echo Installing dependencies...
       - npm install

package.json

@@ -4,16 +4,20 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack && mkdir -p dist && cp src/robots.txt src/index.html src/style.css src/favicon.ico dist/"
+    "build": "webpack --mode production && mkdir -p dist && cp src/robots.txt src/style.css src/favicon.ico dist/",
+    "build-dev": "webpack --mode development && mkdir -p dist && cp src/robots.txt src/style.css src/favicon.ico dist/"
   },
   "devDependencies": {
+    "css-loader": "^6.7.4",
+    "html-webpack-plugin": "^5.5.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.7.2"
   },
   "dependencies": {
-    "cash-dom": "^8.1.2",
-    "chart.js": "^4.0.1",
-    "chartjs-adapter-dayjs-3": "^1.2.3",
-    "dayjs": "^1.11.6"
+    "chart.js": "^4.4.5",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "dayjs": "^1.11.13"
   }
 }

src/datum.js

@@ -0,0 +1,22 @@
+export default class Datum {
+    constructor(time, price) {
+        this._time = time;
+        this._price = price;
+    }
+
+    getTime() {
+        return this._time;
+    }
+
+    getPrice() {
+        return this._price;
+    }
+
+    getX() {
+        return this.getTime();
+    }
+
+    getY() {
+        return this.getPrice();
+    }
+}

src/fetchCurrent.js

@@ -0,0 +1,4 @@
+export default async function fetchCurrent() {
+    const resp = await fetch("https://data.wowtoken.app/v2/current/retail.json");
+    return await resp.json();
+}

src/fetchData.js

@@ -0,0 +1,13 @@
+import Datum from "./datum";
+import urlBuilder from "./urlBuilder";
+
+export default async function fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
+    const data = [];
+    const resp = await fetch(urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection));
+    const respData = await resp.json();
+    for (let i = 0, l = respData.length; i < l; i++) {
+        const datum = new Datum(new Date(respData[i][0]), respData[i][1]);
+        data.push(datum);
+    }
+    return data;
+}

src/highTime.js

@@ -0,0 +1,18 @@
+import Datum from "./datum";
+
+
+function updateHighTime() {
+    const highTime= document.getElementById("high-time");
+
+    const currentTime = document.getElementById("time").selectedOptions[0].innerText;
+    if (currentTime.toLowerCase() !== highTime.innerText) {
+        highTime.innerText = currentTime.toLowerCase();
+    }
+}
+
+function updateHighVal(datum) {
+    const highVal = document.getElementById("high-val");
+    highVal.innerHTML = datum.getPrice().toLocaleString();
+}
+
+export {updateHighTime, updateHighVal};

src/index.html

@@ -5,46 +5,108 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
-        <link rel="stylesheet" href="style.css">
         <link rel="preconnect" href="https://data.wowtoken.app">
 	    <link rel="dns-prefetch" href="https://data.wowtoken.app">
-        <link rel="preload" href="https://data.wowtoken.app/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
-        <link rel="preload" href="https://data.wowtoken.app/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
-        <script src="bundle.js"></script>
+        <link rel="preload" href="https://data.wowtoken.app/v2/current/retail.json" as="fetch" type="application/json" crossorigin="anonymous">
+        <link rel="preload" href="https://data.wowtoken.app/v2/relative/retail/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
     </head>
     <body>
         <div class="flex-container">
-            <div><h1>1 Token = <u id="token">0</u> Gold</h1></div>
+            <div class="data-header">
+                <h1>1 Token = <u id="token">0</u> Gold</h1>
+                <div class="high-low">
+                    <p>Lowest in last <em id="low-time">3 days</em>: <u id="low-val">0</u></p>
+                    <p>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
+                </div>
+            </div>
             <div id="chart-frame">
                 <div class="lds-ripple" id="loader"><div></div><div></div></div>
                 <canvas id="token-chart"></canvas>
                 <div id="option_select">
-                    <label for="region">Region:</label>
-                    <select name="region" id="region">
-                        <option value="us">US</option>
-                        <option value="eu">EU</option>
-                        <option value="kr">KR</option>
-                        <option value="tw">TW</option>
-                    </select>
-                    <br />
-                    <label for="time">Time Selection:</label>
-                    <select name="time" id="time">
-                        <option value="72h">3 Days</option>
-                        <option value="168h">7 Days</option>
-                        <option value="336h">14 Days</option>
-                        <option value="720h">1 Month</option>
-                        <option value="90d">3 Months</option>
-                        <option value="6m">6 Months</option>
-                        <option value="1y">1 Year</option>
-                        <option value="2y">2 Years</option>
-                        <option value="all">All Available</option>
-                    </select>
+                    <fieldset id="basic-options">
+                        <legend>Basic chart options</legend>
+                        <div>
+                            <label for="region">Region:</label>
+                            <select name="region" id="region">
+                                <option value="us">US</option>
+                                <option value="eu">EU</option>
+                                <option value="kr">KR</option>
+                                <option value="tw">TW</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="time">Time Selection:</label>
+                            <select name="time" id="time">
+                                <option value="72h">3 Days</option>
+                                <option value="168h">7 Days</option>
+                                <option value="336h">14 Days</option>
+                                <option value="720h">1 Month</option>
+                                <option value="90d">3 Months</option>
+                                <option value="6m">6 Months</option>
+                                <option value="1y">1 Year</option>
+                                <option value="2y">2 Years</option>
+                                <option value="all">All Available</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="enable-advanced">Enable advanced charting options:</label>
+                            <input type="checkbox" id="enable-advanced" name="enable-advanced" />
+                        </div>
+                    </fieldset>
+                    <fieldset id="advanced-options">
+                        <legend>Advanced chart options</legend>
+                        <fieldset id="basic-smoothing">
+                            <label for="aggregate">Smoothing Function:</label>
+                            <select name="aggregate" id="aggregate">
+                                <option id='agg_none' value="none">None</option>
+                                <option id='agg_davg' value="avg">Daily Average</option>
+                            </select>
+                        </fieldset>
+                        <fieldset id="period-overlay-options">
+                            <label for="period-overlay" id="period-overlay-label">
+                                Overlay previous <em id="period-time">0 hours</em> on current period:
+                            </label>
+                            <input type="checkbox" id="period-overlay" name="period-overlay">
+                        </fieldset>
+                        <fieldset id="y-start-options">
+                            <label for="y-start">Start y-axis at 0:</label>
+                            <input type="checkbox" id="y-start" name="y-start"/>
+                        </fieldset>
+
+                    </fieldset>
+                    <div class="tooltip">
+                        <button id="copyURLButton">
+                            <span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
+                            Copy URL to this Chart
+                        </button>
+                    </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>
+                <details id="about">
+                    <summary>About this Site</summary>
+                    This is a site developed to track the value of the World of Warcraft Token from various
+                    regions over time. I developed it because I wanted a quick and simple way to track the
+                    cost without being advertised to or tracked, and to play around with various "serverless"
+                    technologies. As such, my promise to you is never to use any tracking Javascript, and the
+                    only logging is for debugging purposes of the backend - which does not get IPs.
+                </details>
+                <details id="what-is">
+                    <summary>What is the WoW Token</summary>
+                    The World of Warcraft Token is a first-party system developed by Blizzard to allow you
+                    to either spend currency (local denomination or Blizzard Balance) and convert it to gold
+                    in retail World of Warcraft, or use gold to buy game time or Blizzard Balance. To find out
+                    more, visit the support article on Blizzard's website
+                    <a href="https://us.battle.net/support/en/article/31218">here</a>.
+                </details>
                 <div id="source">
                     <p>
-                        <a href="https://github.com/sneaky-emily/wowtoken.app">Source</a>
-                        |
-                        <a href="https://blog.emily.sh/2021/04/developing-a-simple-wow-token-tracker/">About</a>
+                        <a href="https://blog.emily.sh/wowtoken-app/">Source</a>
                     </p>
                 </div>
             </div>

src/index.js

@@ -1,215 +1,334 @@
-import {
-    Chart,
-    LineElement,
-    PointElement,
-    LineController,
-    LinearScale,
-    TimeSeriesScale,
-    Legend,
-    Title,
-    Tooltip
-} from 'chart.js';
-import $ from 'cash-dom';
-import 'chartjs-adapter-dayjs-3';
+import 'chartjs-adapter-dayjs-4';
+import "./style.css"
 
+import fetchCurrent from "./fetchCurrent";
+import fetchData from "./fetchData";
+import {updateHighTime} from "./highTime";
+import {updateLowTime} from "./lowTime";
+import {addLoader, removeLoader} from "./loader";
+import {allowOverlay, forceOverlayOff, forceOverlayOn, isOverlayAllowed, isOverlaySelected} from "./overlay";
+import TokenChart from "./tokenChart";
+import Datum from "./datum";
 
-Chart.register(
-    LineElement,
-    PointElement,
-    LineController,
-    LinearScale,
-    TimeSeriesScale,
-    Legend,
-    Title,
-    Tooltip
-)
+// TODO: This file should be seperated into multiple with better ownership
 
-let current_region_selection = ''
-let current_time_selection = ''
-const current_price_hash = {
+let currentRegionSelection = '';
+let currentTimeSelection = '';
+let currentAggregateSelection = '';
+let startYAtZero = false;
+let datum;
+let chart;
+const currentPriceHash = {
     us: 0,
     eu: 0,
     kr: 0,
     tw: 0
+};
+const chartData = {
+    us: [],
+    eu: [],
+    kr: [],
+    tw: []
 }
-let chart_js_data;
-let ctx;
-let token_chart;
-
-
-function populateChart() {
-    ctx = document.getElementById("token-chart").getContext('2d');
-    token_chart = new Chart(ctx, {
-        type: 'line',
-        data: { 
-            datasets: [{
-                borderColor: 'gold',
-                label: current_region_selection.toUpperCase() + " WoW Token Price",
-                data: chart_js_data,
-                cubicInterpolationMode: 'monotone',
-                pointRadius: 0
-            }]
-        },
-        options: {
-            interaction: {
-                intersect: false,
-                mode: "index"
-            },
-            scales: {
-                x: {
-                    type: 'time'
-                }
-            },
-        }
-    });
-}
-
 
 async function callUpdateURL() {
-    let resp = await fetch("https://data.wowtoken.app/token/current.json");
-    let data = await resp.json();
-    updateTokens(data);
+    await updateTokens(await fetchCurrent());
 }
 
-function updateTokens(data) {
-    updateRegionalToken('us', data);
-    updateRegionalToken('eu', data);
-    updateRegionalToken('kr', data);
-    updateRegionalToken('tw', data);
+async function updateTokens(data) {
+    await Promise.all([
+        updateRegionalToken('us', data),
+        updateRegionalToken('eu', data),
+        updateRegionalToken('kr', data),
+        updateRegionalToken('tw', data)
+    ]);
 }
 
-function updateRegionalToken(region, data) {
-    if (current_price_hash[region] !== data['price_data'][region]) {
-        current_price_hash[region] = data['price_data'][region];
-        if (region === current_region_selection) {
+async function updateRegionalToken(region, data) {
+    if (currentPriceHash[region] !== data[region][1]) {
+        currentPriceHash[region] = data[region][1];
+        if (region === currentRegionSelection) {
             formatToken();
-            add_data_to_chart(region, data);
+            datum = new Datum(Date.parse(data[region][0]), data[region][1]);
+            if (currentAggregateSelection === 'none' && chart.active()) {
+                await chart.addDataToChart(datum);
+            }
+            else if (currentAggregateSelection === 'none' && !chart.active()) {
+                await chart.lateUpdate(datum);
+            }
         }
     }
 }
 
-function add_data_to_chart(region, data) {
-    if (token_chart) {
-        const datum = {x: data['current_time'], y: data['price_data'][region]}
-        token_chart.data.datasets.forEach((dataset) => {
-            dataset.data.push(datum);
-        })
-        token_chart.update();
-    }
-}
-
-function addLoader() {
-    let loader = document.getElementById('loader');
-    if (!loader) {
-        const blank_div = document.createElement('div');
-        let loaderNode = blank_div.cloneNode();
-        loaderNode.id = 'loader';
-        loaderNode.className = 'lds-ripple';
-        loaderNode.appendChild(blank_div.cloneNode());
-        loaderNode.appendChild(blank_div.cloneNode());
-        let chartNode = document.getElementById('token-chart');
-        chartNode.before(loaderNode);
-    }
-}
-
-function removeLoader () {
-    let loader = document.getElementById('loader');
-    if (loader) {
-        loader.remove();
-    }
-}
-
-export function updateRegionPreference(newRegion) {
-    if (newRegion !== current_region_selection) {
-        token_chart.destroy();
+async function updateRegionPreference(newRegion) {
+    if (newRegion !== currentRegionSelection) {
+        await chart.destroyChart();
         addLoader();
-        current_region_selection = newRegion;
+        currentRegionSelection = newRegion;
     }
     formatToken();
-    pullChartData().then(populateChart);
+    await pullChartData();
 }
 
-export function updateTimePreference(newTime) {
-    if (newTime !== current_time_selection) {
-        token_chart.destroy();
+async function updateTimePreference(newTime) {
+    if (newTime !== currentTimeSelection) {
+        await chart.destroyChart();
         addLoader();
-        current_time_selection = newTime;
+        currentTimeSelection = newTime;
     }
-    pullChartData().then(populateChart);
+    if (newTime === "all") {
+        forceOverlayOff();
+    }
+    else {
+        allowOverlay();
+    }
+    await pullChartData();
+    updateHighTime();
+    updateLowTime();
+}
+
+async function updateAggregatePreference(newAggregate) {
+    if (newAggregate !== currentAggregateSelection) {
+        await chart.destroyChart();
+        addLoader();
+        currentAggregateSelection = newAggregate;
+    }
+    await pullChartData();
+}
+
+function toggleAdvancedSetting() {
+    let element = document.getElementById('advanced-options')
+    if (document.getElementById('enable-advanced').checked)
+    {
+        element.style.display = 'flex';
+    }
+    else
+    {
+        element.style.display = 'none';
+    }
+}
+
+function toggleStartYAtZero(){
+    startYAtZero = document.getElementById('y-start').checked;
+    chart.toggleYStart(startYAtZero);
+}
+
+async function toggleOverlay() {
+    await chart.destroyChart();
+    addLoader();
+    await pullChartData();
 }
 
 async function pullChartData() {
-    let resp = await fetch("https://data.wowtoken.app/token/history/" + current_region_selection + "/" + current_time_selection + ".json");
-    let chart_data = await resp.json();
-    let new_chart_js_data = [];
-    for (let i = 0; i < chart_data.length; i++) {
-        let datum = {
-            x: chart_data[i]['time'],
-            y: chart_data[i]['value']
-        };
-        new_chart_js_data.push(datum);
+    let timeSelection = currentTimeSelection;
+    if (isOverlaySelected()) {
+        let timeDigits = parseInt(timeSelection.slice(0, timeSelection.length - 1)) * 2;
+        let timeUnit = timeSelection.slice(timeSelection.length - 1);
+        timeSelection = `${timeDigits}${timeUnit}`;
+    }
+    chartData[currentRegionSelection] = await fetchData(currentRegionSelection, timeSelection, currentAggregateSelection);
+    if (!chart.active()) {
+        await chart.createChart(currentRegionSelection, currentTimeSelection, startYAtZero, chartData[currentRegionSelection]);
+    }
+    else {
+        for (let i = 0; i < chartData[currentRegionSelection].length; i++) {
+            await chart.addDataToChart(chartData[currentRegionSelection][i]);
+        }
+        console.warn("This should never hit, and should be okay to remove");
     }
-    chart_js_data = new_chart_js_data;
     removeLoader();
 }
 
-async function updateChartData() {
-    token_chart.destroy();
-    pullChartData().then(populateChart);
-}
-
 function formatToken() {
-    $("#token").html(current_price_hash[current_region_selection].toLocaleString());
+    document.getElementById("token").innerText = currentPriceHash[currentRegionSelection].toLocaleString();
 }
 
-function detectURLQuery() {
-    const urlSearchParams = new URLSearchParams(window.location.search)
-    const allowedRegions = ['us', 'eu', 'tw', 'kr']
-    if (urlSearchParams.has('region')) {
-        if (allowedRegions.includes(urlSearchParams.get('region').toLowerCase())) {
-            current_region_selection = urlSearchParams.get('region').toLowerCase()
-            let region_ddl = document.getElementById('region')
-            for (let i = 0; i < region_ddl.options.length; i++){
-                if (region_ddl.options[i].value === current_region_selection) {
-                    region_ddl.options[i].selected = true;
-                }
+// TODO: These maybe able to be collapsed into a single function with params or a lambda
+
+function detectRegionQuery(urlSearchParams) {
+    const validRegions = ['us', 'eu', 'tw', 'kr'];
+    if (validRegions.includes(urlSearchParams.get('region').toLowerCase())) {
+        currentRegionSelection = urlSearchParams.get('region').toLowerCase();
+        let regionDDL = document.getElementById('region');
+        for (let i = 0; i < regionDDL.options.length; i++) {
+            if (regionDDL.options[i].value === currentRegionSelection) {
+                regionDDL.options[i].selected = true;
             }
-        } else {
-            console.log("An incorrect or malformed region selection was made in the query string")
         }
+    } else {
+        console.warn("An incorrect or malformed region selection was made in the query string");
     }
+}
+
+function detectTimeQuery(urlSearchParams) {
     // In the future, we will allow all the times to be selected,
     // once I come up with a good reduction algorithm.
     // For larger time selections, it's currently hardcoded into the backend
-    const validTimes = ['72h', '168h', '336h', '720h', '30d', '90d', '1y', '2y', '6m', 'all'];
-    if (urlSearchParams.has('time')) {
-        if (validTimes.includes(urlSearchParams.get('time').toLowerCase())) {
-            current_time_selection = urlSearchParams.get('time').toLowerCase();
-            let time_ddl = document.getElementById('time')
-            for (let i = 0; i < time_ddl.options.length; i++){
-                if (time_ddl.options[i].value === current_time_selection) {
-                    time_ddl.options[i].selected = true;
-                }
-            }
-        } else {
-            console.log("An incorrect or malformed time selection was made in the query string");
+    const validTimes = ['72h', '168h', '336h', '720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
+    if (validTimes.includes(urlSearchParams.get('time').toLowerCase())) {
+        currentTimeSelection = urlSearchParams.get('time').toLowerCase();
+        if (currentTimeSelection === 'all') {
+            forceOverlayOff();
         }
+        let timeDDL = document.getElementById('time');
+        for (let i = 0; i < timeDDL.options.length; i++) {
+            if (timeDDL.options[i].value === currentTimeSelection) {
+                timeDDL.options[i].selected = true;
+            }
+        }
+        updateHighTime();
+        updateLowTime();
+    } else {
+        console.warn("An incorrect or malformed time selection was made in the query string");
     }
 }
 
+function detectAggregateQuery(urlSearchParams) {
+    const validOperations = ['none', 'daily_mean', 'avg'];
+    if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
+        currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
+        // For backwards compatibility
+        if (currentAggregateSelection === 'daily_mean') {
+            currentAggregateSelection = 'avg';
+        }
+        let aggregateDDL = document.getElementById('aggregate');
+        for (let i = 0; i < aggregateDDL.options.length; i++) {
+            if (aggregateDDL.options[i].value === currentAggregateSelection) {
+                aggregateDDL.options[i].selected = true;
+            }
+        }
+    } else {
+        console.warn("An incorrect or malformed aggregate selection was made in the query string");
+    }
+}
 
-$(document).ready(function() {
+function detectZeroQuery(urlSearchParams) {
+    startYAtZero = urlSearchParams.get('startAtZero') === 'true';
+    let advOptions = document.getElementById('enable-advanced');
+    let startAtZeroOption = document.getElementById('y-start');
+    advOptions.checked = startYAtZero;
+    startAtZeroOption.checked = startYAtZero;
+    toggleAdvancedSetting();
+    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')) {
+        detectRegionQuery(urlSearchParams);
+    }
+    if (urlSearchParams.has('time')) {
+        detectTimeQuery(urlSearchParams);
+    }
+    if (urlSearchParams.has('aggregate')) {
+        detectAggregateQuery(urlSearchParams);
+    }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
+    if (urlSearchParams.has('overlay')) {
+        detectOverlayQuery(urlSearchParams);
+    }
+}
+
+function buildDeepLinksURL() {
+    let url = "https://wowtoken.app/?"
+    if (currentTimeSelection !== '72h'){
+        url += `time=${currentTimeSelection}&`
+    }
+    if (currentRegionSelection !== 'us'){
+        url += `region=${currentRegionSelection}&`
+    }
+    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
+        url += `aggregate=${currentAggregateSelection}&`
+    }
+    if (startYAtZero !== false){
+        url += `startAtZero=${startYAtZero}&`
+    }
+    if (isOverlaySelected()){
+        url += `overlay=previous_time&`
+    }
+    return url
+}
+
+function copyURL() {
+    let toolTip = document.getElementById('urlTooltip');
+    navigator.clipboard.writeText(buildDeepLinksURL()).then(
+        () => {
+            toolTip.innerHTML= "Copied the URL";
+        },
+        () => {
+            toolTip.innerHTML = "Unable to copy URL to clipboard";
+        }
+    );
+}
+
+function toolTipMouseOut() {
+    let tooltip = document.getElementById("urlTooltip");
+    tooltip.innerHTML = "Copy to clipboard";
+}
+
+function registerEventHandles() {
+    registerCopyHandlers();
+    registerOptionHandlers();
+    registerAdvancedHandlers();
+}
+
+// TODO: These need to be moved out into probably tokenChart if not other files
+
+function registerAdvancedHandlers() {
+    document.getElementById('enable-advanced').addEventListener('change', () => {
+        toggleAdvancedSetting();
+    })
+    document.getElementById('y-start').addEventListener('change', () => {
+        toggleStartYAtZero();
+    })
+    document.getElementById('period-overlay').addEventListener('change', () => {
+        toggleOverlay();
+    })
+}
+
+function registerCopyHandlers() {
+    document.getElementById('copyURLButton').addEventListener('click', function () {
+        copyURL();
+    })
+    document.getElementById('copyURLButton').addEventListener('mouseout', function () {
+        toolTipMouseOut();
+    })
+}
+
+function registerOptionHandlers() {
     document.getElementById('region').addEventListener('change', function() {
         updateRegionPreference(this.value);
     });
-    current_region_selection = document.getElementById('region').value;
+    currentRegionSelection = document.getElementById('region').value;
     document.getElementById('time').addEventListener('change', function() {
         updateTimePreference(this.value);
     });
-    current_time_selection = document.getElementById('time').value;
-    detectURLQuery();
-    callUpdateURL();
-    setInterval(callUpdateURL, 60*1000);
-    pullChartData().then(populateChart);
-});
+    currentTimeSelection = document.getElementById('time').value;
+    document.getElementById('aggregate').addEventListener('change', function () {
+        updateAggregatePreference(this.value);
+    })
+    currentAggregateSelection = document.getElementById('aggregate').value;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    registerEventHandles();
+    detectURLQuery();
+    chart = new TokenChart();
+    Promise.all([
+        callUpdateURL(),
+    ]).then(pullChartData);
+
+    setInterval(callUpdateURL, 60*1000);
+}, false);
 

src/loader.js

@@ -0,0 +1,22 @@
+function addLoader() {
+    let loader = document.getElementById('loader');
+    if (!loader) {
+        const blank_div = document.createElement('div');
+        let loaderNode = blank_div.cloneNode();
+        loaderNode.id = 'loader';
+        loaderNode.className = 'lds-ripple';
+        loaderNode.appendChild(blank_div.cloneNode());
+        loaderNode.appendChild(blank_div.cloneNode());
+        let chartNode = document.getElementById('token-chart');
+        chartNode.before(loaderNode);
+    }
+}
+
+function removeLoader () {
+    let loader = document.getElementById('loader');
+    if (loader) {
+        loader.remove();
+    }
+}
+
+export {addLoader, removeLoader};

src/lowTime.js

@@ -0,0 +1,17 @@
+import Datum from "./datum";
+
+function updateLowTime() {
+    const lowTime= document.getElementById("low-time");
+
+    const currentTime = document.getElementById("time").selectedOptions[0].innerText;
+    if (currentTime.toLowerCase() !== lowTime.innerText) {
+        lowTime.innerText = currentTime.toLowerCase();
+    }
+}
+
+function updateLowVal(datum) {
+    const lowVal = document.getElementById("low-val");
+    lowVal.innerHTML = datum.getPrice().toLocaleString();
+}
+
+export {updateLowTime, updateLowVal};

src/overlay.js

@@ -0,0 +1,40 @@
+function isOverlaySelected() {
+    return document.getElementById('period-overlay').checked;
+}
+
+function getOverlayTime() {
+    return document.getElementById("time").selectedOptions[0].innerText;
+}
+
+function setOverlayLabelTime() {
+    const currentTime = document.getElementById("time").selectedOptions[0].innerText;
+    let overlayTimeLabel = document.getElementById("period-time");
+    overlayTimeLabel.innerText = currentTime.toLocaleString();
+}
+
+function forceOverlayOff(){
+    const overlaySetting = document.getElementById("period-overlay");
+    const periodOverlayField = document.getElementById("period-overlay-options");
+    overlaySetting.checked = false;
+    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, forceOverlayOn, isOverlayAllowed, allowOverlay};

src/style.css

@@ -137,9 +137,6 @@ input[type="radio"] {
     padding: 0;
 }
 input[type="search"] {
-    -webkit-appearance: textfield;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
     box-sizing: content-box;
 }
 input[type="search"]::-webkit-search-cancel-button,
@@ -181,7 +178,7 @@ html {
     margin: 1em;
 }
 /*body {
-  
+
 }*/
 code {
     background-color: #073642;
@@ -309,7 +306,7 @@ h6 {
     max-width: 85%;
     border: 1pt solid #586e75;
     padding: 1em;
-}   
+}
 
 .flex-container > div {
     flex: 100%;
@@ -318,15 +315,75 @@ h6 {
     line-height: 75px;
     font-size: 30px;
 }
+.adv-options-container {
+    display: flex;
+    padding: 20px;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-around;
+}
+.box > div {
+    border: solid #bfbdbf;
+    border-radius: 40px;
+    padding: 20px;
+    margin: 20px;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
 p {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     line-height: 3em;
 }
 
+details {
+    background-color: #073642;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0.5em 0.5em 0;
+    font-size: 17px;
+    line-height: 1.5em;
+    margin: .5em 5vw;
+}
+
+details > summary {
+    color: #aaaaaa;
+    cursor: pointer;
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+}
+
+details[open] {
+    padding: 0.5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 0.5em;
+}
+
 
 #option_select {
     font-size: 20px;
+    line-height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#option_select > div {
+    padding: 10px;
+}
+
+#option_select > fieldset {
+    padding-bottom: 20px;
+    max-width: fit-content;
 }
 
 #token {
@@ -352,12 +409,48 @@ p {
     flex-direction: column;
 }
 
+#advanced-options {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#advanced-options > fieldset {
+    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;
+}
+
+.high-low {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.high-low p {
+    line-height: 1em;
+    font-size: 24px;
+}
 
 .lds-ripple {
     position: relative;
     align-self: center;
     width: 80px;
     height: 80px;
+    margin-bottom: -80px;
 }
 .lds-ripple div {
     position: absolute;
@@ -369,6 +462,44 @@ p {
 .lds-ripple div:nth-child(2) {
     animation-delay: -0.5s;
 }
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 280px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 80%;
+    left: -15%;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
 @keyframes lds-ripple {
     0% {
         top: 36px;
@@ -392,8 +523,8 @@ p {
         opacity: 1;
     }
     100% {
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
         width: 72px;
         height: 72px;
         opacity: 0;

src/tokenChart.js

@@ -0,0 +1,311 @@
+import {
+    Chart,
+    Legend,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    TimeSeriesScale,
+    Title,
+    Tooltip
+} from 'chart.js';
+import 'chartjs-adapter-dayjs-4';
+
+Chart.register(
+    LineElement,
+    PointElement,
+    LineController,
+    LinearScale,
+    TimeSeriesScale,
+    Legend,
+    Title,
+    Tooltip
+)
+
+import {updateHighVal} from "./highTime";
+import {updateLowVal} from "./lowTime";
+import {isOverlaySelected, getOverlayTime, setOverlayLabelTime} from "./overlay";
+import Datum from "./datum";
+
+function lookupTimeUnit(query){
+    const lookup = {
+        'h': 'day',
+        'd': 'week',
+        'm': 'month',
+        'y': 'month',
+        'l': 'year'
+    }
+    return lookup[query.charAt(query.length - 1)]
+}
+
+function timeDeltaInMilliseconds(time) {
+    let timeDigits = (parseInt(time.slice(0, time.length - 1))).toFixed(0);
+    let timeUnit = time.slice(time.length - 1);
+
+    switch (timeUnit) {
+        case 'h':
+            return timeDigits * (60 * 60) * 1000;
+        case 'd':
+            return timeDigits * (24 * 60 * 60) * 1000;
+        case 'm':
+            return (timeDigits * (30.437 * 24 * 60 * 60)).toFixed(0) * 1000;
+        case 'y':
+            return (timeDigits * (365.25 * 24 * 60 * 60)).toFixed(0) * 1000;
+        case 'l':
+            console.warn("This path should not happen, this warning is an error in logic")
+    }
+}
+
+export default class TokenChart {
+    constructor() {
+        this._context = document.getElementById("token-chart").getContext('2d');
+        this._chartActive = false;
+        this._lastDatum = null;
+        this._highDatum = null;
+        this._lowDatum = null;
+        this._lateUpdate = false;
+    }
+
+    get highDatum() {
+        return this._highDatum;
+    }
+
+    get lowDatum() {
+        return this._lowDatum;
+    }
+
+    async #newChart(chartConfig) {
+        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 = [];
+        const overlayDelta = timeDeltaInMilliseconds(time);
+
+        for (let i = 0; i < data.length; i++) {
+            const originalDate = data[i].getX();
+            if (i < (data.length / 2)) {
+                overlayData.push({
+                    x: new Date(originalDate.getTime() + overlayDelta),
+                    y: data[i].getY(),
+                });
+            }
+            else {
+                await this.#updateHighLow(data[i]);
+
+                chartData.push({
+                    x: data[i].getX(),
+                    y: data[i].getY(),
+                })
+            }
+        }
+
+        const chartConfig = {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        borderColor: 'gold',
+                        label: region.toUpperCase() + " WoW Token Price",
+                        data: chartData,
+                        cubicInterpolationMode: 'monotone',
+                        pointRadius: 0
+                    },
+                    {
+                        borderColor: 'red',
+                        label: `Previous ${getOverlayTime()} ${region.toUpperCase()} WoW Token Price`,
+                        data: overlayData,
+                        cubicInterpolationMode: 'monotone',
+                        pointRadius: 0
+                    }
+                ]
+            },
+            options: {
+                interaction: {
+                    intersect: false,
+                    mode: "index"
+                },
+                scales: {
+                    x: {
+                        type: 'time',
+                        grid: {
+                            color: '#625f62',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        },
+                        time: {
+                            unit: lookupTimeUnit(time)
+                        }
+                    },
+                    y: {
+                        beginAtZero: yLevel,
+                        grid: {
+                            color: '#2f2c2f',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        }
+                    }
+                },
+            }
+        }
+
+        await this.#newChart(chartConfig)
+    }
+
+    async #createNormalChart(region, time, yLevel, data) {
+        const chartData = [];
+
+
+        for (let i = 0; i < data.length; i++) {
+            this._lastDatum = data[i];
+            await this.#updateHighLow(data[i]);
+
+            chartData.push({
+                x: data[i].getX(),
+                y: data[i].getY(),
+            })
+        }
+
+        const chartConfig = {
+            type: 'line',
+            data: {
+                datasets: [{
+                    borderColor: 'gold',
+                    label: region.toUpperCase() + " WoW Token Price",
+                    data: chartData,
+                    cubicInterpolationMode: 'monotone',
+                    pointRadius: 0
+                }]
+            },
+            options: {
+                interaction: {
+                    intersect: false,
+                    mode: "index"
+                },
+                scales: {
+                    x: {
+                        type: 'time',
+                        grid: {
+                            color: '#625f62',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        },
+                        time: {
+                            unit: lookupTimeUnit(time)
+                        }
+                    },
+                    y: {
+                        beginAtZero: yLevel,
+                        grid: {
+                            color: '#2f2c2f',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        }
+                    }
+                },
+            }
+        }
+
+        await this.#newChart(chartConfig)
+    }
+
+    async createChart(region, time, yLevel, data) {
+        let lateUpdateData = this._lastDatum;
+
+        if (isOverlaySelected()) {
+            await this.#createOverlayChart(region, time, yLevel, data)
+        }
+        else {
+            await this.#createNormalChart(region, time, yLevel, data)
+        }
+
+        setOverlayLabelTime();
+
+        updateHighVal(this.highDatum);
+        updateLowVal(this.lowDatum);
+
+        if (this._lateUpdate) {
+            if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() &&
+                this._lastDatum.getTime() < lateUpdateData.getTime()) {
+                await this.addDataToChart(lateUpdateData);
+            }
+            this._lateUpdate = false
+        }
+
+        this._chartActive = true;
+    }
+
+    async destroyChart() {
+        await this._chart.destroy();
+        this._chartActive = false;
+        this._lastDatum = null;
+        this._highDatum = null;
+        this._lowDatum = null;
+        this._lateUpdate = false;
+    }
+
+    async lateUpdate(datum){
+        this._lastDatum = datum;
+        this._lateUpdate = true;
+    }
+
+    async addDataToChart(datum) {
+        this._lastDatum = datum;
+        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);
+        }
+        this._chart.data.datasets[0].data.push({
+            x: datum.getX(),
+            y: datum.getY(),
+        });
+        this._chart.update();
+    }
+
+    active() {
+        return this._chartActive;
+    }
+
+    toggleYStart(startYAtZero) {
+        this._chart.options.scales.y.beginAtZero = startYAtZero;
+        this._chart.update();
+    }
+
+}

src/urlBuilder.js

@@ -0,0 +1,12 @@
+export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
+    let url = "https://data.wowtoken.app/v2/";
+    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
+        url += `math/${currentAggregateSelection}/retail/`
+    }
+    else {
+        url += `relative/retail/`
+    }
+
+    url += `${currentRegionSelection}/${currentTimeSelection}.json`;
+    return url;
+}

webpack.config.js

@@ -1,10 +1,38 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
 
 module.exports = {
   entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /.s?css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin(),
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css'
+    }),
+    new HtmlWebpackPlugin({
+      template: "src/index.html"
+    }),
+  ],
   output: {
-    filename: 'bundle.js',
+    filename: '[name].[contenthash].js',
     path: path.resolve(__dirname, 'dist'),
     libraryTarget: 'window',
+    clean: true,
   },
 };