diff --git a/src/index.html b/src/index.html
index 6d389e8..fd117f3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,29 +17,63 @@
-
- Advanced Options
-
-
-
-
- More coming soon™
-
About this Site
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
index 2d90678..89445f9 100644
--- 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
index 6aa87da..49f91e3 100644
--- 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;