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
11 changed files with 365 additions and 182 deletions
--- 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,7 +12,13 @@
    </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>
@ -49,23 +55,11 @@
                    </fieldset>
                    <fieldset id="advanced-options">
                        <legend>Advanced chart options</legend>
-                        <fieldset id="advanced-region-options">
-                            <legend>Multi-Region Selection</legend>
-                            <label for="adv-r-us">US:</label>
-                            <input type="checkbox" id="adv-r-us" name="adv-r-us" value="enable" disabled />
-                            <label for="adv-r-eu">EU:</label>
-                            <input type="checkbox" id="adv-r-eu" name="adv-r-eu" value="enable" disabled />
-                            <label for="adv-r-kr">KR:</label>
-                            <input type="checkbox" id="adv-r-kr" name="adv-r-kr" value="enable" disabled />
-                            <label for="adv-r-tw">TW:</label>
-                            <input type="checkbox" id="adv-r-tw" name="adv-r-tw" value="enable" disabled/>
-                        </fieldset>
                        <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>
-                                <option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
                            </select>
                        </fieldset>
                        <fieldset id="y-start-options">
--- a/src/index.js
+++ b/src/index.js
@ -12,152 +12,63 @@ import {
 import 'chartjs-adapter-dayjs-3';
 import "./style.css"

-// TODO: This file should be seperated into multiple with better ownership
+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";

-Chart.register(
-    LineElement,
-    PointElement,
-    LineController,
-    LinearScale,
-    TimeSeriesScale,
-    Legend,
-    Title,
-    Tooltip
-)
+// 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 chartData = {
+const chartData = {
    us: [],
    eu: [],
    kr: [],
    tw: []
 }
-let chartOptions = {
-    us: {
-        color: 'gold'
-    },
-    eu: {
-        color: 'red'
-    },
-    kr: {
-        color: 'white'
-    },
-    tw: {
-        color: 'pink'
-    }
-}
-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',
-                    grid: {
-                        color: '#625f62',
-                    },
-                    ticks: {
-                        color: '#a7a4ab',
-                        font: {
-                            size: 18,
-                        }
-                    },
-                    time: {
-                        unit: lookupTimeUnit(currentTimeSelection)
-                    }
-                },
-                y: {
-                    beginAtZero: startYAtZero,
-                    grid: {
-                        color: '#2f2c2f',
-                    },
-                    ticks: {
-                        color: '#a7a4ab',
-                        font: {
-                            size: 18,
-                        }
-                    }
-                }
-            },
-        }
-    });
-}
-
-function lookupTimeUnit(query){
-    const lookup = {
-        'h': 'day',
-        'd': 'week',
-        'm': 'month',
-        'y': 'month',
-        'l': 'year'
-    }
-    return lookup[query.charAt(query.length - 1)]
-}
-

 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
@ -177,54 +88,38 @@ 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 toggleAdvancedSetting() {
@ -241,33 +136,20 @@ function toggleAdvancedSetting() {

 function toggleStartYAtZero(){
    startYAtZero = document.getElementById('y-start').checked;
-    if (tokenChart){
-        tokenChart.options.scales.y.beginAtZero = startYAtZero;
-        tokenChart.update();
-    }
-}
-
-function urlBuilder() {
-    let url = "https://data.wowtoken.app/token/history/";
-    if (currentAggregateSelection !== 'none') {
-        url += `${currentAggregateSelection}/`
-    }
-    url += `${currentRegionSelection}/${currentTimeSelection}.json`
-    return url;
+    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();
 }

@ -305,6 +187,8 @@ function detectTimeQuery(urlSearchParams) {
                timeDDL.options[i].selected = true;
            }
        }
+        updateHighTime();
+        updateLowTime();
    } else {
        console.warn("An incorrect or malformed time selection was made in the query string");
    }
@ -428,7 +312,11 @@ function registerOptionHandlers() {
 document.addEventListener('DOMContentLoaded', function () {
    registerEventHandles();
    detectURLQuery();
-    Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
+    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
@ -367,6 +367,7 @@ details[open] summary {
    margin-bottom: 0.5em;
 }

+
 #option_select {
    font-size: 20px;
    line-height: 40px;
@ -419,6 +420,21 @@ details[open] summary {
    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;
--- 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