Make time and cost delineation more apparent

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)

package.json

@@ -15,8 +15,7 @@
     "webpack-cli": "^4.7.2"
   },
   "dependencies": {
-    "cash-dom": "^8.1.5",
+    "chart.js": "^4.4.0",
-    "chart.js": "^4.3.0",
     "chartjs-adapter-dayjs-3": "^1.2.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "dayjs": "^1.11.7"

src/index.html

@@ -17,7 +17,9 @@
                 <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 +27,8 @@
                                 <option value="kr">KR</option>
                                 <option value="tw">TW</option>
                             </select>
-                    </p>
+                        </div>
-                    <p>
+                        <div>
                             <label for="time">Time Selection:</label>
                             <select name="time" id="time">
                                 <option value="72h">3 Days</option>
@@ -39,30 +41,49 @@
                                 <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="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">
+                            <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

src/index.js

@@ -9,10 +9,11 @@ import {
     Title,
     Tooltip
 } from 'chart.js';
-import $ from 'cash-dom';
 import 'chartjs-adapter-dayjs-3';
 import "./style.css"
 
+// TODO: This file should be seperated into multiple with better ownership
+
 Chart.register(
     LineElement,
     PointElement,
@@ -27,12 +28,33 @@ Chart.register(
 let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
+let startYAtZero = false;
 const currentPriceHash = {
     us: 0,
     eu: 0,
     kr: 0,
     tw: 0
 };
+let 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;
@@ -58,13 +80,48 @@ function populateChart() {
             },
             scales: {
                 x: {
-                    type: 'time'
+                    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");
@@ -106,7 +163,7 @@ async function aggregateFunctionToggle() {
     //  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);
@@ -170,6 +227,26 @@ function updateAggregatePreference(newAggregate) {
     pullChartData().then(populateChart);
 }
 
+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;
+    if (tokenChart){
+        tokenChart.options.scales.y.beginAtZero = startYAtZero;
+        tokenChart.update();
+    }
+}
+
 function urlBuilder() {
     let url = "https://data.wowtoken.app/token/history/";
     if (currentAggregateSelection !== 'none') {
@@ -195,7 +272,7 @@ async function pullChartData() {
 }
 
 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 +288,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");
     }
 }
 
@@ -229,12 +306,12 @@ function detectTimeQuery(urlSearchParams) {
             }
         }
     } 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 +322,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 +347,9 @@ function detectURLQuery() {
     if (urlSearchParams.has('aggregate')) {
         detectAggregateQuery(urlSearchParams);
     }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
 }
 
 function buildDeepLinksURL() {
@@ -271,7 +361,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 +386,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 +422,13 @@ $(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;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    registerEventHandles();
     detectURLQuery();
     Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
     setInterval(callUpdateURL, 60*1000);
-});
+}, false);
 

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;
+    margin: 0;
-    padding: 0px;
+    padding: 0;
     line-height: 3em;
 }
 
@@ -353,6 +369,20 @@ details[open] summary {
 
 #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 +408,17 @@ details[open] summary {
     flex-direction: column;
 }
 
+#advanced-options {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#advanced-options > fieldset {
+    margin: 10px;
+}
+
 .lds-ripple {
     position: relative;
     align-self: center;
@@ -456,8 +497,8 @@ details[open] summary {
         opacity: 1;
     }
     100% {
-        top: 0px;
+        top: 0;
-        left: 0px;
+        left: 0;
         width: 72px;
         height: 72px;
         opacity: 0;