commit 66ab04299568ef14c97f82b16e779e8f69903e90
parent 8cd9a2ddebc073833ad4aa1fa32e2318d837acd1
Author: Emily Doherty <git@emily.sh>
Date: Sun, 15 Oct 2023 01:16:38 -0700
Changes to advanced options and styling in prep for future work
Diffstat:
| M | src/index.html | | | 96 | +++++++++++++++++++++++++++++++++++++++++++++++-------------------------------- |
| M | src/index.js | | | 49 | +++++++++++++++++++++++++++++++++++++++++++++---- |
| M | src/style.css | | | 55 | ++++++++++++++++++++++++++++++++++++++++++++++++------- |
3 files changed, 150 insertions(+), 50 deletions(-)
diff --git a/src/index.html b/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>
- <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="90d">3 Months</option>
- <option value="6m">6 Months</option>
- <option value="1y">1 Year</option>
- <option value="2y">2 Years</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="6m">6 Months</option>
+ <option value="1y">1 Year</option>
+ <option value="2y">2 Years</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>
@@ -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
diff --git a/src/index.js b/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();
})
}
diff --git 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;
