Changes to advanced options and styling in prep for future work

src/index.html

@@ -17,29 +17,63 @@
                 <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">
-                        <label for="region">Region:</label>
+                        <legend>Basic chart options</legend>
-                        <select name="region" id="region">
+                        <div>
-                            <option value="us">US</option>
+                            <label for="region">Region:</label>
-                            <option value="eu">EU</option>
+                            <select name="region" id="region">
-                            <option value="kr">KR</option>
+                                <option value="us">US</option>
-                            <option value="tw">TW</option>
+                                <option value="eu">EU</option>
-                        </select>
+                                <option value="kr">KR</option>
-                    </p>
+                                <option value="tw">TW</option>
-                    <p>
+                            </select>
-                        <label for="time">Time Selection:</label>
+                        </div>
-                        <select name="time" id="time">
+                        <div>
-                            <option value="72h">3 Days</option>
+                            <label for="time">Time Selection:</label>
-                            <option value="168h">7 Days</option>
+                            <select name="time" id="time">
-                            <option value="336h">14 Days</option>
+                                <option value="72h">3 Days</option>
-                            <option value="720h">1 Month</option>
+                                <option value="168h">7 Days</option>
-                            <option value="90d">3 Months</option>
+                                <option value="336h">14 Days</option>
-                            <option value="6m">6 Months</option>
+                                <option value="720h">1 Month</option>
-                            <option value="1y">1 Year</option>
+                                <option value="90d">3 Months</option>
-                            <option value="2y">2 Years</option>
+                                <option value="6m">6 Months</option>
-                            <option value="all">All Available</option>
+                                <option value="1y">1 Year</option>
-                        </select>
+                                <option value="2y">2 Years</option>
-                    </p>
+                                <option value="all">All Available</option>
+                            </select>
+                        </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" value="enable" disabled/>
+                        </fieldset>
+
+                    </fieldset>
                     <div class="tooltip">
                         <button id="copyURLButton">
                             <span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
@@ -50,22 +84,6 @@
                         <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

@@ -12,6 +12,8 @@ import {
 import 'chartjs-adapter-dayjs-3';
 import "./style.css"
 
+// TODO: This file should be seperated into multiple with better ownership
+
 Chart.register(
     LineElement,
     PointElement,
@@ -32,6 +34,26 @@ const currentPriceHash = {
     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;
@@ -105,7 +127,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);
@@ -169,6 +191,18 @@ 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 urlBuilder() {
     let url = "https://data.wowtoken.app/token/history/";
     if (currentAggregateSelection !== 'none') {
@@ -233,7 +267,7 @@ function detectTimeQuery(urlSearchParams) {
 }
 
 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');
@@ -295,13 +329,20 @@ function toolTipMouseOut() {
 function registerEventHandles() {
     registerCopyHandlers();
     registerOptionHandlers();
+    registerAdvancedHandlers();
+}
+
+function registerAdvancedHandlers() {
+    document.getElementById('enable-advanced').addEventListener('change', () => {
+        toggleAdvancedSetting();
+    })
 }
 
 function registerCopyHandlers() {
-    document.getElementById('copyURLButton').addEventListener('click', function (event) {
+    document.getElementById('copyURLButton').addEventListener('click', function () {
         copyURL();
     })
-    document.getElementById('copyURLButton').addEventListener('mouseout', function (event) {
+    document.getElementById('copyURLButton').addEventListener('mouseout', function () {
         toolTipMouseOut();
     })
 }

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;