Changes to advanced options and styling in prep for future work

Remove Cash dependency, refactor event registration
(cherry picked from commit 8cd9a2ddeb)
2023-10-15 01:27:40 -07:00 · 2023-10-15 01:19:47 -07:00 · 2023-10-15 01:18:30 -07:00
5 changed files with 523 additions and 439 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -15,8 +15,7 @@
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
-    "cash-dom": "^8.1.5",
-    "chart.js": "^4.3.0",
+    "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/index.html
+++ b/src/index.html
@ -17,25 +17,60 @@
                <div class="lds-ripple" id="loader"><div></div><div></div></div>
                <canvas id="token-chart"></canvas>
                <div id="option_select">
-                    <p>
-                        <label for="region">Region:</label>
-                        <select name="region" id="region">
-                            <option value="us">US</option>
-                            <option value="eu">EU</option>
-                            <option value="kr">KR</option>
-                            <option value="tw">TW</option>
-                        </select>
-                    </p>
-                    <p>
-                        <label for="time">Time Selection:</label>
-                        <select name="time" id="time">
-                            <option value="72h">3 Days</option>
-                            <option value="168h">7 Days</option>
-                            <option value="336h">14 Days</option>
-                            <option value="720h">1 Month</option>
-                            <option value="all">All Available</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>
+                                <option value="eu">EU</option>
+                                <option value="kr">KR</option>
+                                <option value="tw">TW</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="time">Time Selection:</label>
+                            <select name="time" id="time">
+                                <option value="72h">3 Days</option>
+                                <option value="168h">7 Days</option>
+                                <option value="336h">14 Days</option>
+                                <option value="720h">1 Month</option>
+                                <option value="90d">3 Months</option>
+                                <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>
@ -43,22 +78,9 @@
                        </button>
                    </div>
                    <div>
-                        <p><em>Looking for the retail WoW Token price? Find it <a href="https://wowtoken.app">here!</a></em></p>
+                        <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>
-                        </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 Classic Token from various
--- a/src/index.js
+++ b/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,
@ -33,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;
@ -106,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);
@ -170,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/classic/token/history/";
    if (currentAggregateSelection !== 'none') {
@ -195,7 +228,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
@ -234,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');
@ -293,7 +326,28 @@ function toolTipMouseOut() {
    tooltip.innerHTML = "Copy to clipboard";
 }

-$(document).ready(function() {
+function registerEventHandles() {
+    registerCopyHandlers();
+    registerOptionHandlers();
+    registerAdvancedHandlers();
+}
+
+function registerAdvancedHandlers() {
+    document.getElementById('enable-advanced').addEventListener('change', () => {
+        toggleAdvancedSetting();
+    })
+}
+
+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 +359,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);

--- a/src/style.css
+++ b/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;
-    padding: 0px;
+    margin: 0;
+    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;
-        left: 0px;
+        top: 0;
+        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
Author	SHA1	Message	Date
Emily Doherty	354381936d	Changes to advanced options and styling in prep for future work	2023-10-15 01:27:40 -07:00
Emily Doherty	214910aa25	Remove Cash dependency, refactor event registration (cherry picked from commit `8cd9a2ddeb`)	2023-10-15 01:19:47 -07:00
Emily Doherty	ac12a9c55d	Update dependencies (cherry picked from commit `702ca8c4d3`)	2023-10-15 01:18:30 -07:00