Changes to advanced options and styling in prep for future work
This commit is contained in:
parent
214910aa25
commit
354381936d
@ -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
|
||||
|
||||
49
src/index.js
49
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/classic/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();
|
||||
})
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user