Adds a high and low price data callout

Fix late updates to chart
Start the process of splitting JS files
2024-10-16 23:53:53 -07:00 · 2024-10-14 00:18:07 -07:00 · 2024-10-13 23:23:31 -07:00 · 2024-10-12 22:31:26 -07:00 · 2024-05-26 22:47:18 -07:00 · 2024-05-26 11:38:51 -07:00
14 changed files with 892 additions and 563 deletions
--- a/README.md
+++ b/README.md
@@ -2,6 +2,6 @@

 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 deployed.

 ![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
-    "cash-dom": "^8.1.5",
-    "chart.js": "^4.3.0",
+    "chart.js": "^4.4.0",
    "chartjs-adapter-dayjs-3": "^1.2.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "dayjs": "^1.11.7"
--- a/src/datum.js
+++ b/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();
+    }
+}
--- a/src/fetchCurrent.js
+++ b/src/fetchCurrent.js
@@ -0,0 +1,4 @@
+export default async function fetchCurrent() {
+    const resp = await fetch("https://data.wowtoken.app/token/current.json");
+    return await resp.json();
+}
--- a/src/fetchData.js
+++ b/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++) {
+        let datum = new Datum(Date.parse(respData[i]['time']), respData[i]['value']);
+        data.push(datum);
+    }
+    return data;
+}
--- a/src/highTime.js
+++ b/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};
--- a/src/index.html
+++ b/src/index.html
@@ -12,12 +12,20 @@
    </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>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
+                    <p>Lowest in last <em id="low-time">3 days</em>: <u id="low-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">
-                    <p>
+                    <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>
@@ -25,8 +33,8 @@
                                <option value="kr">KR</option>
                                <option value="tw">TW</option>
                            </select>
-                    </p>
-                    <p>
+                        </div>
+                        <div>
                            <label for="time">Time Selection:</label>
                            <select name="time" id="time">
                                <option value="72h">3 Days</option>
@@ -39,30 +47,37 @@
                                <option value="2y">2 Years</option>
                                <option value="all">All Available</option>
                            </select>
-                    </p>
+                        </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="daily_mean">Daily Average</option>
+                            </select>
+                        </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>
+                        <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="advanced">
-                    <summary>Advanced Options</summary>
-                    <p>
-                        <label for="aggregate">Aggregate Function:</label>
-                        <select name="aggregate" id="aggregate">
-                            <option id='agg_none' value="none">None</option>
-                            <option id='agg_dmax' value="daily_max">Daily Maximum</option>
-                            <option id='agg_dmin' value="daily_min">Daily Minimum</option>
-                            <option id='agg_davg' value="daily_mean">Daily Average</option>
-                            <option id='agg_wmax' value="weekly_max" disabled>Weekly Maximum</option>
-                            <option id='agg_wmin' value="weekly_min" disabled>Weekly Minimum</option>
-                            <option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
-                        </select>
-                    </p>
-                    <em>More coming soon™</em>
-                </details>
                <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
--- a/src/index.js
+++ b/src/index.js
@@ -9,104 +9,72 @@ import {
    Title,
    Tooltip
 } from 'chart.js';
-import $ from 'cash-dom';
 import 'chartjs-adapter-dayjs-3';
 import "./style.css"

-Chart.register(
-    LineElement,
-    PointElement,
-    LineController,
-    LinearScale,
-    TimeSeriesScale,
-    Legend,
-    Title,
-    Tooltip
-)
+import fetchCurrent from "./fetchCurrent";
+import fetchData from "./fetchData";
+import {updateHighTime} from "./highTime";
+import {updateLowTime} from "./lowTime";
+import {addLoader, removeLoader} from "./loader";
+import TokenChart from "./tokenChart";
+import Datum from "./datum";
+
+// TODO: This file should be seperated into multiple with better ownership

 let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
+let startYAtZero = false;
+let chart;
 const currentPriceHash = {
    us: 0,
    eu: 0,
    kr: 0,
    tw: 0
 };
-let chartJsData;
-let ctx;
-let tokenChart;
-
-
-function populateChart() {
-    ctx = document.getElementById("token-chart").getContext('2d');
-    tokenChart = new Chart(ctx, {
-        type: 'line',
-        data: { 
-            datasets: [{
-                borderColor: 'gold',
-                label: currentRegionSelection.toUpperCase() + " WoW Token Price",
-                data: chartJsData,
-                cubicInterpolationMode: 'monotone',
-                pointRadius: 0
-            }]
-        },
-        options: {
-            interaction: {
-                intersect: false,
-                mode: "index"
-            },
-            scales: {
-                x: {
-                    type: 'time'
+const chartData = {
+    us: [],
+    eu: [],
+    kr: [],
+    tw: []
 }
-            },
-        }
-    });
-}
-

 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) {
+async function updateRegionalToken(region, data) {
    if (currentPriceHash[region] !== data['price_data'][region]) {
        currentPriceHash[region] = data['price_data'][region];
        if (region === currentRegionSelection) {
            formatToken();
-            if (currentAggregateSelection === 'none') {
-                addDataToChart(region, data);
+            const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
+            if (currentAggregateSelection === 'none' && chart.active()) {
+                await chart.addDataToChart(datum);
+            }
+            else if (currentAggregateSelection === 'none' && !chart.active()) {
+                await chart.lateUpdate(datum);
            }
        }
    }
 }

-function addDataToChart(region, data) {
-    if (tokenChart) {
-        const datum = {x: data['current_time'], y: data['price_data'][region]}
-        tokenChart.data.datasets.forEach((dataset) => {
-            dataset.data.push(datum);
-        })
-        tokenChart.update();
-    }
-}
-
 async function aggregateFunctionToggle() {
    // TODO: We should probably make these global or something
    //  so if the need to be updated in the future we can do so easily
    const smallTimes = ['72h', '168h', '336h'];
    const longTimes = ['720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
-    const idsToModify = ['agg_wmax', 'agg_wmin', 'agg_wavg']
+    const idsToModify = ['agg_wavg']
    if (smallTimes.includes(currentTimeSelection)) {
        for (const id of idsToModify) {
            let ele = document.getElementById(id);
@@ -120,82 +88,73 @@ async function aggregateFunctionToggle() {
    }
 }

-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();
-    }
-}
-
-function updateRegionPreference(newRegion) {
+async function updateRegionPreference(newRegion) {
    if (newRegion !== currentRegionSelection) {
-        tokenChart.destroy();
+        await chart.destroyChart();
        addLoader();
        currentRegionSelection = newRegion;
    }
    formatToken();
-    pullChartData().then(populateChart);
+    chart = new TokenChart();
+    await pullChartData();
 }

-function updateTimePreference(newTime) {
+async function updateTimePreference(newTime) {
    if (newTime !== currentTimeSelection) {
-        tokenChart.destroy();
+        await chart.destroyChart();
        addLoader();
        currentTimeSelection = newTime;
-        aggregateFunctionToggle();
+        await aggregateFunctionToggle();
    }
-    pullChartData().then(populateChart);
+    chart = new TokenChart();
+    await pullChartData();
+    updateHighTime();
+    updateLowTime();
 }

-function updateAggregatePreference(newAggregate) {
+async function updateAggregatePreference(newAggregate) {
    if (newAggregate !== currentAggregateSelection) {
-        tokenChart.destroy();
+        await chart.destroyChart();
        addLoader();
        currentAggregateSelection = newAggregate;
    }
-    pullChartData().then(populateChart);
+    chart = new TokenChart();
+    await pullChartData();
 }

-function urlBuilder() {
-    let url = "https://data.wowtoken.app/token/history/";
-    if (currentAggregateSelection !== 'none') {
-        url += `${currentAggregateSelection}/`
+function toggleAdvancedSetting() {
+    let element = document.getElementById('advanced-options')
+    if (document.getElementById('enable-advanced').checked)
+    {
+        element.style.display = 'flex';
    }
-    url += `${currentRegionSelection}/${currentTimeSelection}.json`
-    return url;
+    else
+    {
+        element.style.display = 'none';
+    }
+}
+
+function toggleStartYAtZero(){
+    startYAtZero = document.getElementById('y-start').checked;
+    chart.toggleYStart(startYAtZero);
 }

 async function pullChartData() {
-    let resp = await fetch(urlBuilder());
-    let chartData = await resp.json();
-    let newChartJSData = [];
-    for (let i = 0; i < chartData.length; i++) {
-        let datum = {
-            x: chartData[i]['time'],
-            y: chartData[i]['value']
-        };
-        newChartJSData.push(datum);
+    chartData[currentRegionSelection] = await fetchData(currentRegionSelection, currentTimeSelection, 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");
+        }
    }
-    chartJsData = newChartJSData;
    removeLoader();
 }

 function formatToken() {
-    $("#token").html(currentPriceHash[currentRegionSelection].toLocaleString());
+    document.getElementById("token").innerText = currentPriceHash[currentRegionSelection].toLocaleString();
 }

 // TODO: These maybe able to be collapsed into a single function with params or a lambda
@@ -211,7 +170,7 @@ function detectRegionQuery(urlSearchParams) {
            }
        }
    } else {
-        console.log("An incorrect or malformed region selection was made in the query string");
+        console.warn("An incorrect or malformed region selection was made in the query string");
    }
 }

@@ -228,13 +187,15 @@ function detectTimeQuery(urlSearchParams) {
                timeDDL.options[i].selected = true;
            }
        }
+        updateHighTime();
+        updateLowTime();
    } else {
-        console.log("An incorrect or malformed time selection was made in the query string");
+        console.warn("An incorrect or malformed time selection was made in the query string");
    }
 }

 function detectAggregateQuery(urlSearchParams) {
-    const validOperations = ['none', 'daily_max', 'daily_min', 'daily_mean', 'weekly_max', 'weekly_min', 'weekly_mean'];
+    const validOperations = ['none', 'daily_mean', 'weekly_mean'];
    if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
        currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
        let aggregateDDL = document.getElementById('aggregate');
@@ -245,10 +206,20 @@ function detectAggregateQuery(urlSearchParams) {
        }
        aggregateFunctionToggle();
    } else {
-        console.log("An incorrect or malformed aggregate selection was made in the query string");
+        console.warn("An incorrect or malformed aggregate selection was made in the query string");
    }
 }

+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 detectURLQuery() {
    const urlSearchParams = new URLSearchParams(window.location.search);
    if (urlSearchParams.has('region')) {
@@ -260,6 +231,9 @@ function detectURLQuery() {
    if (urlSearchParams.has('aggregate')) {
        detectAggregateQuery(urlSearchParams);
    }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
 }

 function buildDeepLinksURL() {
@@ -271,7 +245,10 @@ function buildDeepLinksURL() {
        url += `region=${currentRegionSelection}&`
    }
    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
-        url += `aggregate=${currentAggregateSelection}`
+        url += `aggregate=${currentAggregateSelection}&`
+    }
+    if (startYAtZero !== false){
+        url += `startAtZero=${startYAtZero}&`
    }
    return url
 }
@@ -293,7 +270,31 @@ function toolTipMouseOut() {
    tooltip.innerHTML = "Copy to clipboard";
 }

-$(document).ready(function() {
+function registerEventHandles() {
+    registerCopyHandlers();
+    registerOptionHandlers();
+    registerAdvancedHandlers();
+}
+
+function registerAdvancedHandlers() {
+    document.getElementById('enable-advanced').addEventListener('change', () => {
+        toggleAdvancedSetting();
+    })
+    document.getElementById('y-start').addEventListener('change', () => {
+        toggleStartYAtZero();
+    })
+}
+
+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);
    });
@@ -305,15 +306,17 @@ $(document).ready(function() {
    document.getElementById('aggregate').addEventListener('change', function () {
        updateAggregatePreference(this.value);
    })
-    document.getElementById('copyURLButton').addEventListener('click', function (event) {
-        copyURL();
-    })
-    document.getElementById('copyURLButton').addEventListener('mouseout', function (event) {
-        toolTipMouseOut();
-    })
    currentAggregateSelection = document.getElementById('aggregate').value;
-    detectURLQuery();
-    Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
-    setInterval(callUpdateURL, 60*1000);
-});
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    registerEventHandles();
+    detectURLQuery();
+    chart = new TokenChart();
+    Promise.all([
+        callUpdateURL(),
+    ]).then(pullChartData);
+
+    setInterval(callUpdateURL, 60*1000);
+}, false);

--- a/src/loader.js
+++ b/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};
--- a/src/lowTime.js
+++ b/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};
--- a/src/style.css
+++ b/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,
@@ -318,9 +315,28 @@ 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;
 }

@@ -351,8 +367,23 @@ details[open] summary {
    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 {
@@ -378,6 +409,32 @@ details[open] summary {
    flex-direction: column;
 }

+#advanced-options {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#advanced-options > fieldset {
+    margin: 10px;
+}
+
+.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;
@@ -456,8 +513,8 @@ details[open] summary {
        opacity: 1;
    }
    100% {
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
--- a/src/tokenChart.js
+++ b/src/tokenChart.js
@@ -0,0 +1,181 @@
+import {
+    Chart,
+    Legend,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    TimeSeriesScale,
+    Title,
+    Tooltip
+} from 'chart.js';
+import 'chartjs-adapter-dayjs-3';
+
+Chart.register(
+    LineElement,
+    PointElement,
+    LineController,
+    LinearScale,
+    TimeSeriesScale,
+    Legend,
+    Title,
+    Tooltip
+)
+
+import {updateHighVal} from "./highTime";
+import {updateLowVal} from "./lowTime";
+
+function lookupTimeUnit(query){
+    const lookup = {
+        'h': 'day',
+        'd': 'week',
+        'm': 'month',
+        'y': 'month',
+        'l': 'year'
+    }
+    return lookup[query.charAt(query.length - 1)]
+}
+
+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 createChart(region, time, yLevel, data) {
+        const chartData = [];
+        let lateUpdateData = this._lastDatum;
+
+        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];
+            }
+
+            chartData.push({
+                x: data[i].getX(),
+                y: data[i].getY(),
+            })
+        }
+
+        updateHighVal(this.highDatum);
+        updateLowVal(this.lowDatum);
+
+        this._chart = new Chart(this._context, {
+            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,
+                            }
+                        }
+                    }
+                },
+            }
+        });
+
+        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.forEach((dataset) => {
+            dataset.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();
+    }
+
+}
--- a/src/urlBuilder.js
+++ b/src/urlBuilder.js
@@ -0,0 +1,8 @@
+export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
+    let url = "https://data.wowtoken.app/token/history/";
+    if (currentAggregateSelection !== 'none') {
+        url += `${currentAggregateSelection}/`
+    }
+    url += `${currentRegionSelection}/${currentTimeSelection}.json`
+    return url;
+}
Author	SHA1	Message	Date
Emily Doherty	5abf6fe132	Adds a high and low price data callout	2024-10-16 23:53:53 -07:00
Emily Doherty	487bb86a29	Fix late updates to chart	2024-10-14 00:18:07 -07:00
Emily Doherty	a51d3f8d7b	Start the process of splitting JS files I am a JS noob so this is probably poorly thought out. But it is a wip and I dont really care about the quality, just more the learning experience.	2024-10-13 23:23:31 -07:00
Emily Doherty	27eb2ccb45	Remove advanced region options for now. It may come back later, but it's kinda confusing just being disabled	2024-10-12 22:31:26 -07:00
Emily Doherty	94e08c3657	Revert "Add early reply header to first requests" This reverts commit `fa60c3ea53`.	2024-05-26 22:47:18 -07:00
Emily Doherty	fa60c3ea53	Add early reply header to first requests This lets my CloudFront function know whether to serve a request from the Lambda@edge function with more body, or an early request from the Cloudfront KeyValueStore. This is an A/B test with retail vs classic site at the time of commit	2024-05-26 11:38:51 -07:00
Emily Doherty	1e0b4a0a1f	Make time and cost delineation more apparent	2024-04-25 00:17:09 -07:00
Emily Doherty	17ffbc3db1	Enabled the option to start Y at zero	2024-04-24 23:54:03 -07:00
Emily Doherty	0c9e7ed183	Change the timescale legend to be more readable instead of dense	2024-04-12 05:27:41 -07:00
Emily Doherty	4a7c03307d	Change logs to warnings, since that's what they really are	2024-04-12 05:06:41 -07:00
Emily Doherty	0e40f403e4	Increase font size and brightness for better contrast	2024-04-12 05:04:33 -07:00
Emily Doherty	66ab042995	Changes to advanced options and styling in prep for future work	2023-10-15 01:16:38 -07:00
Emily Doherty	8cd9a2ddeb	Remove Cash dependency, refactor event registration	2023-09-10 13:00:47 -07:00
Emily Doherty	702ca8c4d3	Update dependencies	2023-09-10 12:53:12 -07:00
Emily Doherty	c1b05851a4	Add link to classic token	2023-05-23 19:33:41 -07:00