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

Compare commits

base: wowtoken-app:9ac97425c7fb5bf7d2193aacc922e4c1baa1ac2f
Branches Tags
wowtoken-app:main
wowtoken-app:classic
wowtoken-app:feature/candlestick
..
compare: wowtoken-app:13ed6dfdcedc21dc6ba5920f0f72b95ba64a40a4
Branches Tags
wowtoken-app:classic
wowtoken-app:main
wowtoken-app:feature/candlestick

7 Commits
9ac97425c7 ... 13ed6dfdce

Author SHA1 Message Date
Emily Doherty
13ed6dfdce Dependency updates 
(cherry picked from commit ad069cb7bf)
 2024-10-21 19:59:39 -07:00
Emily Doherty
b8d11b3815 Remove unused aggregate function toggle 
(cherry picked from commit 367b767f52)
 2024-10-21 19:59:34 -07:00
Emily Doherty
2e020633b5 Flip high and low sections 
This is more in line with how English reads, left to right, low to high

(cherry picked from commit c9e14e265f)
 2024-10-21 19:59:29 -07:00
Emily Doherty
d07eec1cf0 Adds a high and low price data callout 
(cherry picked from commit 5abf6fe132)
 2024-10-21 19:59:14 -07:00
Emily Doherty
de6621e81c Fix late updates to chart 
(cherry picked from commit 487bb86a29)
 2024-10-21 19:56:51 -07:00
Emily Doherty
7a17bb8821 Start the process of splitting JS files 
I am a JS noob so this is probably poorly thought out. But it is a wip and I dont really care about the quality, just more the learning experience.

(cherry picked from commit a51d3f8d7b)
 2024-10-21 19:53:52 -07:00
Emily Doherty
f207e36ccd Remove advanced region options for now. 
It may come back later, but it's kinda confusing just being disabled

(cherry picked from commit 27eb2ccb45)
 2024-10-21 19:48:19 -07:00
13 changed files with 771 additions and 630 deletions
Show Stats Expand all files Collapse all files

812
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -15,9 +15,9 @@
"webpack-cli": "^4.7.2" "webpack-cli": "^4.7.2"
}, },
"dependencies": { "dependencies": {
"chart.js": "^4.4.0", "chart.js": "^4.4.5",
"chartjs-adapter-dayjs-3": "^1.2.3", "chartjs-adapter-dayjs-4": "^1.0.4",
"css-minimizer-webpack-plugin": "^5.0.0", "css-minimizer-webpack-plugin": "^7.0.0",
"dayjs": "^1.11.7" "dayjs": "^1.11.13"
} }
} }

22
src/datum.js Normal file
View File

@ -0,0 +1,22 @@
export default class Datum {
constructor(time, price) {
this._time = time;
this._price = price;
}
getTime() {
return this._time;
}
getPrice() {
return this._price;
}
getX() {
return this.getTime();
}
getY() {
return this.getPrice();
}
}

4
src/fetchCurrent.js Normal file
View File

@ -0,0 +1,4 @@
export default async function fetchCurrent() {
const resp = await fetch("https://data.wowtoken.app/classic/token/current.json");
return await resp.json();
}

13
src/fetchData.js Normal file
View File

@ -0,0 +1,13 @@
import Datum from "./datum";
import urlBuilder from "./urlBuilder";
export default async function fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
const data = [];
const resp = await fetch(urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection));
const respData = await resp.json();
for (let i = 0, l = respData.length; i < l; i++) {
let datum = new Datum(Date.parse(respData[i]['time']), respData[i]['value']);
data.push(datum);
}
return data;
}

18
src/highTime.js Normal file
View File

@ -0,0 +1,18 @@
import Datum from "./datum";
function updateHighTime() {
const highTime= document.getElementById("high-time");
const currentTime = document.getElementById("time").selectedOptions[0].innerText;
if (currentTime.toLowerCase() !== highTime.innerText) {
highTime.innerText = currentTime.toLowerCase();
}
}
function updateHighVal(datum) {
const highVal = document.getElementById("high-val");
highVal.innerHTML = datum.getPrice().toLocaleString();
}
export {updateHighTime, updateHighVal};

20
src/index.html
View File

@ -12,7 +12,13 @@
</head> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div><h1>1 Classic Token = <u id="token">0</u> Gold</h1></div> <div class="data-header">
<h1>1 Classic Token = <u id="token">0</u> Gold</h1>
<div class="high-low">
<p>Lowest in last <em id="low-time">3 days</em>: <u id="low-val">0</u></p>
<p>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
</div>
</div>
<div id="chart-frame"> <div id="chart-frame">
<div class="lds-ripple" id="loader"><div></div><div></div></div> <div class="lds-ripple" id="loader"><div></div><div></div></div>
<canvas id="token-chart"></canvas> <canvas id="token-chart"></canvas>
@ -46,23 +52,11 @@
</fieldset> </fieldset>
<fieldset id="advanced-options"> <fieldset id="advanced-options">
<legend>Advanced chart options</legend> <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"> <fieldset id="basic-smoothing">
<label for="aggregate">Smoothing Function:</label> <label for="aggregate">Smoothing Function:</label>
<select name="aggregate" id="aggregate"> <select name="aggregate" id="aggregate">
<option id='agg_none' value="none">None</option> <option id='agg_none' value="none">None</option>
<option id='agg_davg' value="daily_mean">Daily Average</option> <option id='agg_davg' value="daily_mean">Daily Average</option>
<option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
</select> </select>
</fieldset> </fieldset>
<fieldset id="y-start-options"> <fieldset id="y-start-options">

260
src/index.js
View File

@ -1,230 +1,94 @@
import { import 'chartjs-adapter-dayjs-4';
Chart,
Legend,
LinearScale,
LineController,
LineElement,
PointElement,
TimeSeriesScale,
Title,
Tooltip
} from 'chart.js';
import 'chartjs-adapter-dayjs-3';
import "./style.css" import "./style.css"
// TODO: This file should be seperated into multiple with better ownership import fetchCurrent from "./fetchCurrent";
import fetchData from "./fetchData";
import {updateHighTime} from "./highTime";
import {updateLowTime} from "./lowTime";
import {addLoader, removeLoader} from "./loader";
import TokenChart from "./tokenChart";
import Datum from "./datum";
Chart.register( // TODO: This file should be seperated into multiple with better ownership
LineElement,
PointElement,
LineController,
LinearScale,
TimeSeriesScale,
Legend,
Title,
Tooltip
)
let currentRegionSelection = ''; let currentRegionSelection = '';
let currentTimeSelection = ''; let currentTimeSelection = '';
let currentAggregateSelection = ''; let currentAggregateSelection = '';
let startYAtZero = false; let startYAtZero = false;
let chart;
const currentPriceHash = { const currentPriceHash = {
us: 0, us: 0,
eu: 0, eu: 0,
kr: 0, kr: 0,
tw: 0 tw: 0
}; };
let chartData = { const chartData = {
us: [], us: [],
eu: [], eu: [],
kr: [], kr: [],
tw: [] tw: []
} }
let chartOptions = {
us: {
color: 'gold'
},
eu: {
color: 'red'
},
kr: {
color: 'white'
},
tw: {
color: 'pink'
}
}
let chartJsData;
let ctx;
let tokenChart;
function populateChart() {
ctx = document.getElementById("token-chart").getContext('2d');
tokenChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
borderColor: 'gold',
label: currentRegionSelection.toUpperCase() + " WoW Classic Token Price",
data: chartJsData,
cubicInterpolationMode: 'monotone',
pointRadius: 0
}]
},
options: {
interaction: {
intersect: false,
mode: "index"
},
scales: {
x: {
type: 'time',
grid: {
color: '#625f62',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
},
time: {
unit: lookupTimeUnit(currentTimeSelection)
}
},
y: {
beginAtZero: startYAtZero,
grid: {
color: '#2f2c2f',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
}
}
},
}
});
}
function lookupTimeUnit(query){
const lookup = {
'h': 'day',
'd': 'week',
'm': 'month',
'y': 'month',
'l': 'month'
}
return lookup[query.charAt(query.length - 1)]
}
async function callUpdateURL() { async function callUpdateURL() {
let resp = await fetch("https://data.wowtoken.app/classic/token/current.json"); await updateTokens(await fetchCurrent());
let data = await resp.json();
updateTokens(data);
} }
function updateTokens(data) { async function updateTokens(data) {
updateRegionalToken('us', data); await Promise.all([
updateRegionalToken('eu', data); updateRegionalToken('us', data),
updateRegionalToken('kr', data); updateRegionalToken('eu', data),
updateRegionalToken('tw', data); updateRegionalToken('kr', data),
updateRegionalToken('tw', data)
]);
} }
function updateRegionalToken(region, data) { async function updateRegionalToken(region, data) {
if (currentPriceHash[region] !== data['price_data'][region]) { if (currentPriceHash[region] !== data['price_data'][region]) {
currentPriceHash[region] = data['price_data'][region]; currentPriceHash[region] = data['price_data'][region];
if (region === currentRegionSelection) { if (region === currentRegionSelection) {
formatToken(); formatToken();
if (currentAggregateSelection === 'none') { const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
addDataToChart(region, data); if (currentAggregateSelection === 'none' && chart.active()) {
await chart.addDataToChart(datum);
}
else if (currentAggregateSelection === 'none' && !chart.active()) {
await chart.lateUpdate(datum);
} }
} }
} }
} }
function addDataToChart(region, data) { async function updateRegionPreference(newRegion) {
if (tokenChart) {
const datum = {x: data['current_time'], y: data['price_data'][region]}
tokenChart.data.datasets.forEach((dataset) => {
dataset.data.push(datum);
})
tokenChart.update();
}
}
async function aggregateFunctionToggle() {
// TODO: We should probably make these global or something
// 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_wavg']
if (smallTimes.includes(currentTimeSelection)) {
for (const id of idsToModify) {
let ele = document.getElementById(id);
ele.disabled = true;
}
} else if (longTimes.includes(currentTimeSelection)) {
for (const id of idsToModify) {
let ele = document.getElementById(id);
ele.disabled = false;
}
}
}
function addLoader() {
let loader = document.getElementById('loader');
if (!loader) {
const blank_div = document.createElement('div');
let loaderNode = blank_div.cloneNode();
loaderNode.id = 'loader';
loaderNode.className = 'lds-ripple';
loaderNode.appendChild(blank_div.cloneNode());
loaderNode.appendChild(blank_div.cloneNode());
let chartNode = document.getElementById('token-chart');
chartNode.before(loaderNode);
}
}
function removeLoader () {
let loader = document.getElementById('loader');
if (loader) {
loader.remove();
}
}
function updateRegionPreference(newRegion) {
if (newRegion !== currentRegionSelection) { if (newRegion !== currentRegionSelection) {
tokenChart.destroy(); await chart.destroyChart();
addLoader(); addLoader();
currentRegionSelection = newRegion; currentRegionSelection = newRegion;
} }
formatToken(); formatToken();
pullChartData().then(populateChart); chart = new TokenChart();
await pullChartData();
} }
function updateTimePreference(newTime) { async function updateTimePreference(newTime) {
if (newTime !== currentTimeSelection) { if (newTime !== currentTimeSelection) {
tokenChart.destroy(); await chart.destroyChart();
addLoader(); addLoader();
currentTimeSelection = newTime; currentTimeSelection = newTime;
aggregateFunctionToggle();
} }
pullChartData().then(populateChart); chart = new TokenChart();
await pullChartData();
updateHighTime();
updateLowTime();
} }
function updateAggregatePreference(newAggregate) { async function updateAggregatePreference(newAggregate) {
if (newAggregate !== currentAggregateSelection) { if (newAggregate !== currentAggregateSelection) {
tokenChart.destroy(); await chart.destroyChart();
addLoader(); addLoader();
currentAggregateSelection = newAggregate; currentAggregateSelection = newAggregate;
} }
pullChartData().then(populateChart); chart = new TokenChart();
await pullChartData();
} }
function toggleAdvancedSetting() { function toggleAdvancedSetting() {
@ -241,33 +105,20 @@ function toggleAdvancedSetting() {
function toggleStartYAtZero(){ function toggleStartYAtZero(){
startYAtZero = document.getElementById('y-start').checked; startYAtZero = document.getElementById('y-start').checked;
if (tokenChart){ chart.toggleYStart(startYAtZero);
tokenChart.options.scales.y.beginAtZero = startYAtZero;
tokenChart.update();
}
}
function urlBuilder() {
let url = "https://data.wowtoken.app/classic/token/history/";
if (currentAggregateSelection !== 'none') {
url += `${currentAggregateSelection}/`
}
url += `${currentRegionSelection}/${currentTimeSelection}.json`
return url;
} }
async function pullChartData() { async function pullChartData() {
let resp = await fetch(urlBuilder()); chartData[currentRegionSelection] = await fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection);
let chartData = await resp.json(); if (!chart.active()) {
let newChartJSData = []; await chart.createChart(currentRegionSelection, currentTimeSelection, startYAtZero, chartData[currentRegionSelection]);
for (let i = 0; i < chartData.length; i++) { }
let datum = { else {
x: chartData[i]['time'], for (let i = 0; i < chartData[currentRegionSelection].length; i++) {
y: chartData[i]['value'] await chart.addDataToChart(chartData[currentRegionSelection][i]);
}; console.warn("This should never hit, and should be okay to remove");
newChartJSData.push(datum); }
} }
chartJsData = newChartJSData;
removeLoader(); removeLoader();
} }
@ -305,13 +156,15 @@ function detectTimeQuery(urlSearchParams) {
timeDDL.options[i].selected = true; timeDDL.options[i].selected = true;
} }
} }
updateHighTime();
updateLowTime();
} else { } else {
console.warn("An incorrect or malformed time selection was made in the query string"); console.warn("An incorrect or malformed time selection was made in the query string");
} }
} }
function detectAggregateQuery(urlSearchParams) { function detectAggregateQuery(urlSearchParams) {
const validOperations = ['none', 'daily_mean', 'weekly_mean']; const validOperations = ['none', 'daily_mean'];
if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) { if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase(); currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
let aggregateDDL = document.getElementById('aggregate'); let aggregateDDL = document.getElementById('aggregate');
@ -320,7 +173,6 @@ function detectAggregateQuery(urlSearchParams) {
aggregateDDL.options[i].selected = true; aggregateDDL.options[i].selected = true;
} }
} }
aggregateFunctionToggle();
} else { } else {
console.warn("An incorrect or malformed aggregate selection was made in the query string"); console.warn("An incorrect or malformed aggregate selection was made in the query string");
} }
@ -428,7 +280,11 @@ function registerOptionHandlers() {
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
registerEventHandles(); registerEventHandles();
detectURLQuery(); detectURLQuery();
Promise.all([callUpdateURL(), pullChartData()]).then(populateChart) chart = new TokenChart();
Promise.all([
callUpdateURL(),
]).then(pullChartData);
setInterval(callUpdateURL, 60*1000); setInterval(callUpdateURL, 60*1000);
}, false); }, false);

22
src/loader.js Normal file
View File

@ -0,0 +1,22 @@
function addLoader() {
let loader = document.getElementById('loader');
if (!loader) {
const blank_div = document.createElement('div');
let loaderNode = blank_div.cloneNode();
loaderNode.id = 'loader';
loaderNode.className = 'lds-ripple';
loaderNode.appendChild(blank_div.cloneNode());
loaderNode.appendChild(blank_div.cloneNode());
let chartNode = document.getElementById('token-chart');
chartNode.before(loaderNode);
}
}
function removeLoader () {
let loader = document.getElementById('loader');
if (loader) {
loader.remove();
}
}
export {addLoader, removeLoader};

17
src/lowTime.js Normal file
View File

@ -0,0 +1,17 @@
import Datum from "./datum";
function updateLowTime() {
const lowTime= document.getElementById("low-time");
const currentTime = document.getElementById("time").selectedOptions[0].innerText;
if (currentTime.toLowerCase() !== lowTime.innerText) {
lowTime.innerText = currentTime.toLowerCase();
}
}
function updateLowVal(datum) {
const lowVal = document.getElementById("low-val");
lowVal.innerHTML = datum.getPrice().toLocaleString();
}
export {updateLowTime, updateLowVal};

16
src/style.css
View File

@ -367,6 +367,7 @@ details[open] summary {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
#option_select { #option_select {
font-size: 20px; font-size: 20px;
line-height: 40px; line-height: 40px;
@ -419,6 +420,21 @@ details[open] summary {
margin: 10px; margin: 10px;
} }
.data-header h1 {
margin-top: 24px;
margin-bottom: 24px;
}
.high-low {
display: flex;
justify-content: space-evenly;
}
.high-low p {
line-height: 1em;
font-size: 24px;
}
.lds-ripple { .lds-ripple {
position: relative; position: relative;
align-self: center; align-self: center;

181
src/tokenChart.js Normal file
View File

@ -0,0 +1,181 @@
import {
Chart,
Legend,
LinearScale,
LineController,
LineElement,
PointElement,
TimeSeriesScale,
Title,
Tooltip
} from 'chart.js';
import 'chartjs-adapter-dayjs-4';
Chart.register(
LineElement,
PointElement,
LineController,
LinearScale,
TimeSeriesScale,
Legend,
Title,
Tooltip
)
import {updateHighVal} from "./highTime";
import {updateLowVal} from "./lowTime";
function lookupTimeUnit(query){
const lookup = {
'h': 'day',
'd': 'week',
'm': 'month',
'y': 'month',
'l': 'year'
}
return lookup[query.charAt(query.length - 1)]
}
export default class TokenChart {
constructor() {
this._context = document.getElementById("token-chart").getContext('2d');
this._chartActive = false;
this._lastDatum = null;
this._highDatum = null;
this._lowDatum = null;
this._lateUpdate = false;
}
get highDatum() {
return this._highDatum;
}
get lowDatum() {
return this._lowDatum;
}
async createChart(region, time, yLevel, data) {
const chartData = [];
let lateUpdateData = this._lastDatum;
for (let i = 0; i < data.length; i++) {
this._lastDatum = data[i];
if (this._highDatum === null || this._lastDatum.getPrice() > this._highDatum.getPrice()) {
this._highDatum = data[i];
}
if (this._lowDatum === null || this._lowDatum.getPrice() > this._lastDatum.getPrice()) {
this._lowDatum = data[i];
}
chartData.push({
x: data[i].getX(),
y: data[i].getY(),
})
}
updateHighVal(this.highDatum);
updateLowVal(this.lowDatum);
this._chart = new Chart(this._context, {
type: 'line',
data: {
datasets: [{
borderColor: 'gold',
label: region.toUpperCase() + " WoW Token Price",
data: chartData,
cubicInterpolationMode: 'monotone',
pointRadius: 0
}]
},
options: {
interaction: {
intersect: false,
mode: "index"
},
scales: {
x: {
type: 'time',
grid: {
color: '#625f62',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
},
time: {
unit: lookupTimeUnit(time)
}
},
y: {
beginAtZero: yLevel,
grid: {
color: '#2f2c2f',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
}
}
},
}
});
if (this._lateUpdate) {
if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() &&
this._lastDatum.getTime() < lateUpdateData.getTime()) {
await this.addDataToChart(lateUpdateData);
}
this._lateUpdate = false
}
this._chartActive = true;
}
async destroyChart() {
await this._chart.destroy();
this._chartActive = false;
this._lastDatum = null;
this._highDatum = null;
this._lowDatum = null;
this._lateUpdate = false;
}
async lateUpdate(datum){
this._lastDatum = datum;
this._lateUpdate = true;
}
async addDataToChart(datum) {
this._lastDatum = datum;
if (datum.getPrice() > this._highDatum.getPrice()) {
this._highDatum = datum;
updateHighVal(this.highDatum);
}
else if (datum.getPrice() < this._lowDatum.getPrice()) {
this._lowDatum = datum;
updateLowVal(this.lowDatum);
}
this._chart.data.datasets.forEach((dataset) => {
dataset.data.push({
x: datum.getX(),
y: datum.getY(),
})
});
this._chart.update();
}
active() {
return this._chartActive;
}
toggleYStart(startYAtZero) {
this._chart.options.scales.y.beginAtZero = startYAtZero;
this._chart.update();
}
}

8
src/urlBuilder.js Normal file
View File

@ -0,0 +1,8 @@
export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
let url = "https://data.wowtoken.app/classic/token/history/";
if (currentAggregateSelection !== 'none') {
url += `${currentAggregateSelection}/`
}
url += `${currentRegionSelection}/${currentTimeSelection}.json`
return url;
}