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)

src/index.html

@@ -70,7 +70,7 @@
                         </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" value="enable" disabled/>
+                            <input type="checkbox" id="y-start" name="y-start"/>
                         </fieldset>
 
                     </fieldset>

src/index.js

@@ -28,6 +28,7 @@ Chart.register(
 let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
+let startYAtZero = false;
 const currentPriceHash = {
     us: 0,
     eu: 0,
@@ -80,14 +81,24 @@ function populateChart() {
             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: {
@@ -100,6 +111,17 @@ function populateChart() {
     });
 }
 
+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");
@@ -217,6 +239,14 @@ 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') {
@@ -258,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");
     }
 }
 
@@ -276,7 +306,7 @@ 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");
     }
 }
 
@@ -292,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')) {
@@ -307,6 +347,9 @@ function detectURLQuery() {
     if (urlSearchParams.has('aggregate')) {
         detectAggregateQuery(urlSearchParams);
     }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
 }
 
 function buildDeepLinksURL() {
@@ -318,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
 }
@@ -350,6 +396,9 @@ function registerAdvancedHandlers() {
     document.getElementById('enable-advanced').addEventListener('change', () => {
         toggleAdvancedSetting();
     })
+    document.getElementById('y-start').addEventListener('change', () => {
+        toggleStartYAtZero();
+    })
 }
 
 function registerCopyHandlers() {