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
12 changed files with 511 additions and 707 deletions
--- a/README.md
+++ b/README.md
@@ -2,8 +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 CodePipeline, built via CodeBuild, and to S3.
+This project gets picked up by CodePipeline, built via CodeBuild, and deployed.

-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)
+![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
--- a/buildspec.yml
+++ b/buildspec.yml
@@ -3,7 +3,7 @@ version: 0.2
 phases:
  install:
    runtime-versions:
-      nodejs: 18
+      nodejs: 16
    commands:
      - echo Installing dependencies...
      - npm install
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
-    "chart.js": "^4.4.5",
-    "chartjs-adapter-dayjs-4": "^1.0.4",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "dayjs": "^1.11.13"
+    "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/fetchCurrent.js
+++ b/src/fetchCurrent.js
@@ -1,4 +1,4 @@
 export default async function fetchCurrent() {
-    const resp = await fetch("https://data.wowtoken.app/v2/current/classic.json");
+    const resp = await fetch("https://data.wowtoken.app/token/current.json");
    return await resp.json();
 }
--- a/src/fetchData.js
+++ b/src/fetchData.js
@@ -6,7 +6,7 @@ export default async function fetchData(currentRegionSelection, currentTimeSelec
    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]);
+        let datum = new Datum(Date.parse(respData[i]['time']), respData[i]['value']);
        data.push(datum);
    }
    return data;
--- a/src/index.html
+++ b/src/index.html
@@ -1,22 +1,22 @@
 <!doctype html>
 <html lang="en">
    <head>
-        <title>WoW Classic Historical Token Prices Tracker</title>
+        <title>WoW Historical Token Prices Tracker</title>
        <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) Classic 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.">
+        <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="preconnect" href="https://data.wowtoken.app">
 	    <link rel="dns-prefetch" href="https://data.wowtoken.app">
-        <link rel="preload" href="https://data.wowtoken.app/v2/current/classic.json" as="fetch" type="application/json" crossorigin="anonymous">
-        <link rel="preload" href="https://data.wowtoken.app/v2/relative/classic/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
+        <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">
    </head>
    <body>
        <div class="flex-container">
            <div class="data-header">
-                <h1>1 Classic Token = <u id="token">0</u> Gold</h1>
+                <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>
+                    <p>Lowest in last <em id="low-time">3 days</em>: <u id="low-val">0</u></p>
                </div>
            </div>
            <div id="chart-frame">
@@ -43,6 +43,8 @@
                                <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>
@@ -57,15 +59,9 @@
                            <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>
+                                <option id='agg_davg' value="daily_mean">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"/>
@@ -78,17 +74,13 @@
                            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 retail WoW Token price? Find it <a href="https://wowtoken.app">here!</a></em></p>
+                    <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="about">
                    <summary>About this Site</summary>
-                    This is a site developed to track the value of the World of Warcraft Classic Token from various
+                    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
@@ -96,10 +88,10 @@
                </details>
                <details id="what-is">
                    <summary>What is the WoW Token</summary>
-                    The World of Warcraft Classic Token is a first-party system developed by Blizzard to allow you
+                    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 classic World of Warcraft, or use gold to buy game time.
-                    To find out more, visit the support article on Blizzard's website
+                    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">
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,15 @@
-import 'chartjs-adapter-dayjs-4';
+import {
+    Chart,
+    Legend,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    TimeSeriesScale,
+    Title,
+    Tooltip
+} from 'chart.js';
+import 'chartjs-adapter-dayjs-3';
 import "./style.css"

 import fetchCurrent from "./fetchCurrent";
@@ -6,7 +17,6 @@ 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";

@@ -16,7 +26,6 @@ let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
 let startYAtZero = false;
-let datum;
 let chart;
 const currentPriceHash = {
    us: 0,
@@ -45,11 +54,11 @@ async function updateTokens(data) {
 }

 async function updateRegionalToken(region, data) {
-    if (currentPriceHash[region] !== data[region][1]) {
-        currentPriceHash[region] = data[region][1];
+    if (currentPriceHash[region] !== data['price_data'][region]) {
+        currentPriceHash[region] = data['price_data'][region];
        if (region === currentRegionSelection) {
            formatToken();
-            datum = new Datum(Date.parse(data[region][0]), data[region][1]);
+            const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
            if (currentAggregateSelection === 'none' && chart.active()) {
                await chart.addDataToChart(datum);
            }
@@ -60,6 +69,25 @@ async function updateRegionalToken(region, data) {
    }
 }

+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_wavg']
+    if (smallTimes.includes(currentTimeSelection)) {
+        for (const id of idsToModify) {
+            let ele = document.getElementById(id);
+            ele.disabled = true;
+        }
+    } else if (longTimes.includes(currentTimeSelection)) {
+        for (const id of idsToModify) {
+            let ele = document.getElementById(id);
+            ele.disabled = false;
+        }
+    }
+}
+
 async function updateRegionPreference(newRegion) {
    if (newRegion !== currentRegionSelection) {
        await chart.destroyChart();
@@ -67,6 +95,7 @@ async function updateRegionPreference(newRegion) {
        currentRegionSelection = newRegion;
    }
    formatToken();
+    chart = new TokenChart();
    await pullChartData();
 }

@@ -75,13 +104,9 @@ async function updateTimePreference(newTime) {
        await chart.destroyChart();
        addLoader();
        currentTimeSelection = newTime;
+        await aggregateFunctionToggle();
    }
-    if (newTime === "all") {
-        forceOverlayOff();
-    }
-    else {
-        allowOverlay();
-    }
+    chart = new TokenChart();
    await pullChartData();
    updateHighTime();
    updateLowTime();
@@ -93,6 +118,7 @@ async function updateAggregatePreference(newAggregate) {
        addLoader();
        currentAggregateSelection = newAggregate;
    }
+    chart = new TokenChart();
    await pullChartData();
 }

@@ -113,28 +139,16 @@ function toggleStartYAtZero(){
    chart.toggleYStart(startYAtZero);
 }

-async function toggleOverlay() {
-    await chart.destroyChart();
-    addLoader();
-    await pullChartData();
-}
-
 async function pullChartData() {
-    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);
+    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");
        }
-        console.warn("This should never hit, and should be okay to remove");
    }
    removeLoader();
 }
@@ -167,9 +181,6 @@ function detectTimeQuery(urlSearchParams) {
    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) {
@@ -184,19 +195,16 @@ function detectTimeQuery(urlSearchParams) {
 }

 function detectAggregateQuery(urlSearchParams) {
-    const validOperations = ['none', 'daily_mean', 'avg'];
+    const validOperations = ['none', 'daily_mean', 'weekly_mean'];
    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;
            }
        }
+        aggregateFunctionToggle();
    } else {
        console.warn("An incorrect or malformed aggregate selection was made in the query string");
    }
@@ -212,15 +220,6 @@ function detectZeroQuery(urlSearchParams) {
    toggleStartYAtZero();
 }

-function detectOverlayQuery(urlSearchParams) {
-    const enableOverlay = urlSearchParams.get('overlay') === 'previous_time';
-    if (enableOverlay) {
-        forceOverlayOn();
-    } else {
-        forceOverlayOff();
-    }
-}
-
 function detectURLQuery() {
    const urlSearchParams = new URLSearchParams(window.location.search);
    if (urlSearchParams.has('region')) {
@@ -235,13 +234,10 @@ function detectURLQuery() {
    if (urlSearchParams.has('startAtZero')) {
        detectZeroQuery(urlSearchParams)
    }
-    if (urlSearchParams.has('overlay')) {
-        detectOverlayQuery(urlSearchParams);
-    }
 }

 function buildDeepLinksURL() {
-    let url = "https://classic.wowtoken.app/?"
+    let url = "https://wowtoken.app/?"
    if (currentTimeSelection !== '72h'){
        url += `time=${currentTimeSelection}&`
    }
@@ -254,9 +250,6 @@ function buildDeepLinksURL() {
    if (startYAtZero !== false){
        url += `startAtZero=${startYAtZero}&`
    }
-    if (isOverlaySelected()){
-        url += `overlay=previous_time&`
-    }
    return url
 }

@@ -283,8 +276,6 @@ function registerEventHandles() {
    registerAdvancedHandlers();
 }

-// TODO: These need to be moved out into probably tokenChart if not other files
-
 function registerAdvancedHandlers() {
    document.getElementById('enable-advanced').addEventListener('change', () => {
        toggleAdvancedSetting();
@@ -292,9 +283,6 @@ function registerAdvancedHandlers() {
    document.getElementById('y-start').addEventListener('change', () => {
        toggleStartYAtZero();
    })
-    document.getElementById('period-overlay').addEventListener('change', () => {
-        toggleOverlay();
-    })
 }

 function registerCopyHandlers() {
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -1,40 +0,0 @@
-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};
--- a/src/style.css
+++ b/src/style.css
@@ -173,8 +173,8 @@ h6 {
    font-weight: 700;
 }
 html {
-    background-color: #6b4233;
-    color: #b7b7b7;
+    background-color: #073642;
+    color: #839496;
    margin: 1em;
 }
 /*body {
@@ -194,7 +194,7 @@ a:hover {
    color: #cb4b16;
 }
 h1 {
-    color: #ffd5e9;
+    color: #d33682;
 }
 h2,
 h3,
@@ -206,7 +206,7 @@ h6 {
 pre {
    background-color: #002b36;
    color: #839496;
-    border: 1pt solid #000000;
+    border: 1pt solid #586e75;
    padding: 1em;
    box-shadow: 5pt 5pt 8pt #073642;
 }
@@ -301,10 +301,10 @@ h6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
-    background-color: #2f201e;
+    background-color: #002b36;
    margin: 0 auto;
    max-width: 85%;
-    border: 1pt solid #000000;
+    border: 1pt solid #586e75;
    padding: 1em;
 }

@@ -341,8 +341,8 @@ p {
 }

 details {
-    background-color: #6b4233;
-    border: 1px solid #000000;
+    background-color: #073642;
+    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
    font-size: 17px;
@@ -363,7 +363,7 @@ details[open] {
 }

 details[open] summary {
-    border-bottom: 1px solid #000000;
+    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
 }

@@ -420,16 +420,6 @@ details[open] summary {
    margin: 10px;
 }

-.other-projects {
-    border: 1px solid silver;
-    margin-bottom: 10px;
-    font-size: 15px;
-}
-
-.other-projects > p {
-    line-height: 1em;
-}
-
 .data-header h1 {
    margin-top: 24px;
    margin-bottom: 24px;
--- a/src/tokenChart.js
+++ b/src/tokenChart.js
@@ -9,7 +9,7 @@ import {
    Title,
    Tooltip
 } from 'chart.js';
-import 'chartjs-adapter-dayjs-4';
+import 'chartjs-adapter-dayjs-3';

 Chart.register(
    LineElement,
@@ -24,8 +24,6 @@ Chart.register(

 import {updateHighVal} from "./highTime";
 import {updateLowVal} from "./lowTime";
-import {isOverlaySelected, getOverlayTime, setOverlayLabelTime} from "./overlay";
-import Datum from "./datum";

 function lookupTimeUnit(query){
    const lookup = {
@@ -38,24 +36,6 @@ function lookupTimeUnit(query){
    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');
@@ -74,116 +54,19 @@ export default class TokenChart {
        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){
+    async createChart(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 = [];
-
+        let lateUpdateData = this._lastDatum;

        for (let i = 0; i < data.length; i++) {
            this._lastDatum = data[i];
-            await this.#updateHighLow(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(),
@@ -191,7 +74,10 @@ export default class TokenChart {
            })
        }

-        const chartConfig = {
+        updateHighVal(this.highDatum);
+        updateLowVal(this.lowDatum);
+
+        this._chart = new Chart(this._context, {
            type: 'line',
            data: {
                datasets: [{
@@ -237,25 +123,7 @@ export default class TokenChart {
                    }
                },
            }
-        }
-
-        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() &&
@@ -292,9 +160,11 @@ export default class TokenChart {
            this._lowDatum = datum;
            updateLowVal(this.lowDatum);
        }
-        this._chart.data.datasets[0].data.push({
-            x: datum.getX(),
-            y: datum.getY(),
+        this._chart.data.datasets.forEach((dataset) => {
+            dataset.data.push({
+                x: datum.getX(),
+                y: datum.getY(),
+            })
        });
        this._chart.update();
    }
--- a/src/urlBuilder.js
+++ b/src/urlBuilder.js
@@ -1,12 +1,8 @@
 export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
-    let url = "https://data.wowtoken.app/v2/";
-    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
-        url += `math/${currentAggregateSelection}/classic/`
+    let url = "https://data.wowtoken.app/token/history/";
+    if (currentAggregateSelection !== 'none') {
+        url += `${currentAggregateSelection}/`
    }
-    else {
-        url += `relative/classic/`
-    }
-
-    url += `${currentRegionSelection}/${currentTimeSelection}.json`;
+    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