wowtoken-app/wowtoken.app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to advanced options and styling in prep for future work

Browse Source
This commit is contained in:
Emily Doherty 2023-10-15 01:16:38 -07:00
parent 8cd9a2ddeb
commit 66ab042995
3 changed files with 150 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/index.html
View File

@ -17,7 +17,9 @@
<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">
<legend>Basic chart options</legend>
<div>
<label for="region">Region:</label>
<select name="region" id="region">
<option value="us">US</option>
@ -25,8 +27,8 @@
<option value="kr">KR</option>
<option value="tw">TW</option>
</select>
</p>
<p>
</div>
<div>
<label for="time">Time Selection:</label>
<select name="time" id="time">
<option value="72h">3 Days</option>
@ -39,7 +41,39 @@
<option value="2y">2 Years</option>
<option value="all">All Available</option>
</select>
</p>
</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

49
src/index.js
View File

@ -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();
})
}

55
src/style.css
View File

@ -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;