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

- - -

-

- - -

+
+ Basic chart options +
+ + +
+
+ + +
+
+ + +
+
+
+ Advanced chart options +
+ Multi-Region Selection + + + + + + + + +
+
+ + +
+
+ + +
+ +
-
- 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;