Enabled the option to start Y at zero

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,
@@ -91,6 +92,7 @@ function populateChart() {
                     }
                 },
                 y: {
+                    beginAtZero: startYAtZero,
                     ticks: {
                         color: '#a7a4ab',
                         font: {
@@ -231,6 +233,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') {
@@ -310,6 +320,16 @@ function detectAggregateQuery(urlSearchParams) {
     }
 }
 
+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')) {
@@ -321,6 +341,9 @@ function detectURLQuery() {
     if (urlSearchParams.has('aggregate')) {
         detectAggregateQuery(urlSearchParams);
     }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
 }
 
 function buildDeepLinksURL() {
@@ -332,7 +355,10 @@ function buildDeepLinksURL() {
         url += `region=${currentRegionSelection}&`
     }
     if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
-        url += `aggregate=${currentAggregateSelection}`
+        url += `aggregate=${currentAggregateSelection}&`
+    }
+    if (startYAtZero !== false){
+        url += `startAtZero=${startYAtZero}&`
     }
     return url
 }
@@ -364,6 +390,9 @@ function registerAdvancedHandlers() {
     document.getElementById('enable-advanced').addEventListener('change', () => {
         toggleAdvancedSetting();
     })
+    document.getElementById('y-start').addEventListener('change', () => {
+        toggleStartYAtZero();
+    })
 }
 
 function registerCopyHandlers() {