323 lines
10 KiB
JavaScript
323 lines
10 KiB
JavaScript
import {
|
|
Chart,
|
|
Legend,
|
|
LinearScale,
|
|
LineController,
|
|
LineElement,
|
|
PointElement,
|
|
TimeSeriesScale,
|
|
Title,
|
|
Tooltip
|
|
} from 'chart.js';
|
|
import 'chartjs-adapter-dayjs-3';
|
|
import "./style.css"
|
|
|
|
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";
|
|
|
|
// TODO: This file should be seperated into multiple with better ownership
|
|
|
|
let currentRegionSelection = '';
|
|
let currentTimeSelection = '';
|
|
let currentAggregateSelection = '';
|
|
let startYAtZero = false;
|
|
let chart;
|
|
const currentPriceHash = {
|
|
us: 0,
|
|
eu: 0,
|
|
kr: 0,
|
|
tw: 0
|
|
};
|
|
const chartData = {
|
|
us: [],
|
|
eu: [],
|
|
kr: [],
|
|
tw: []
|
|
}
|
|
|
|
async function callUpdateURL() {
|
|
await updateTokens(await fetchCurrent());
|
|
}
|
|
|
|
async function updateTokens(data) {
|
|
await Promise.all([
|
|
updateRegionalToken('us', data),
|
|
updateRegionalToken('eu', data),
|
|
updateRegionalToken('kr', data),
|
|
updateRegionalToken('tw', data)
|
|
]);
|
|
}
|
|
|
|
async function updateRegionalToken(region, data) {
|
|
if (currentPriceHash[region] !== data['price_data'][region]) {
|
|
currentPriceHash[region] = data['price_data'][region];
|
|
if (region === currentRegionSelection) {
|
|
formatToken();
|
|
const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
|
|
if (currentAggregateSelection === 'none' && chart.active()) {
|
|
await chart.addDataToChart(datum);
|
|
}
|
|
else if (currentAggregateSelection === 'none' && !chart.active()) {
|
|
await chart.lateUpdate(datum);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function updateRegionPreference(newRegion) {
|
|
if (newRegion !== currentRegionSelection) {
|
|
await chart.destroyChart();
|
|
addLoader();
|
|
currentRegionSelection = newRegion;
|
|
}
|
|
formatToken();
|
|
chart = new TokenChart();
|
|
await pullChartData();
|
|
}
|
|
|
|
async function updateTimePreference(newTime) {
|
|
if (newTime !== currentTimeSelection) {
|
|
await chart.destroyChart();
|
|
addLoader();
|
|
currentTimeSelection = newTime;
|
|
await aggregateFunctionToggle();
|
|
}
|
|
chart = new TokenChart();
|
|
await pullChartData();
|
|
updateHighTime();
|
|
updateLowTime();
|
|
}
|
|
|
|
async function updateAggregatePreference(newAggregate) {
|
|
if (newAggregate !== currentAggregateSelection) {
|
|
await chart.destroyChart();
|
|
addLoader();
|
|
currentAggregateSelection = newAggregate;
|
|
}
|
|
chart = new TokenChart();
|
|
await pullChartData();
|
|
}
|
|
|
|
function toggleAdvancedSetting() {
|
|
let element = document.getElementById('advanced-options')
|
|
if (document.getElementById('enable-advanced').checked)
|
|
{
|
|
element.style.display = 'flex';
|
|
}
|
|
else
|
|
{
|
|
element.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function toggleStartYAtZero(){
|
|
startYAtZero = document.getElementById('y-start').checked;
|
|
chart.toggleYStart(startYAtZero);
|
|
}
|
|
|
|
async function pullChartData() {
|
|
chartData[currentRegionSelection] = await fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection);
|
|
if (!chart.active()) {
|
|
await chart.createChart(currentRegionSelection, currentTimeSelection, startYAtZero, chartData[currentRegionSelection]);
|
|
}
|
|
else {
|
|
for (let i = 0; i < chartData[currentRegionSelection].length; i++) {
|
|
await chart.addDataToChart(chartData[currentRegionSelection][i]);
|
|
console.warn("This should never hit, and should be okay to remove");
|
|
}
|
|
}
|
|
removeLoader();
|
|
}
|
|
|
|
function formatToken() {
|
|
document.getElementById("token").innerText = currentPriceHash[currentRegionSelection].toLocaleString();
|
|
}
|
|
|
|
// TODO: These maybe able to be collapsed into a single function with params or a lambda
|
|
|
|
function detectRegionQuery(urlSearchParams) {
|
|
const validRegions = ['us', 'eu', 'tw', 'kr'];
|
|
if (validRegions.includes(urlSearchParams.get('region').toLowerCase())) {
|
|
currentRegionSelection = urlSearchParams.get('region').toLowerCase();
|
|
let regionDDL = document.getElementById('region');
|
|
for (let i = 0; i < regionDDL.options.length; i++) {
|
|
if (regionDDL.options[i].value === currentRegionSelection) {
|
|
regionDDL.options[i].selected = true;
|
|
}
|
|
}
|
|
} else {
|
|
console.warn("An incorrect or malformed region selection was made in the query string");
|
|
}
|
|
}
|
|
|
|
function detectTimeQuery(urlSearchParams) {
|
|
// In the future, we will allow all the times to be selected,
|
|
// once I come up with a good reduction algorithm.
|
|
// For larger time selections, it's currently hardcoded into the backend
|
|
const validTimes = ['72h', '168h', '336h', '720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
|
|
if (validTimes.includes(urlSearchParams.get('time').toLowerCase())) {
|
|
currentTimeSelection = urlSearchParams.get('time').toLowerCase();
|
|
let timeDDL = document.getElementById('time');
|
|
for (let i = 0; i < timeDDL.options.length; i++) {
|
|
if (timeDDL.options[i].value === currentTimeSelection) {
|
|
timeDDL.options[i].selected = true;
|
|
}
|
|
}
|
|
updateHighTime();
|
|
updateLowTime();
|
|
} else {
|
|
console.warn("An incorrect or malformed time selection was made in the query string");
|
|
}
|
|
}
|
|
|
|
function detectAggregateQuery(urlSearchParams) {
|
|
const validOperations = ['none', 'daily_mean', 'weekly_mean'];
|
|
if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
|
|
currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
|
|
let aggregateDDL = document.getElementById('aggregate');
|
|
for (let i = 0; i < aggregateDDL.options.length; i++) {
|
|
if (aggregateDDL.options[i].value === currentAggregateSelection) {
|
|
aggregateDDL.options[i].selected = true;
|
|
}
|
|
}
|
|
aggregateFunctionToggle();
|
|
} else {
|
|
console.warn("An incorrect or malformed aggregate selection was made in the query string");
|
|
}
|
|
}
|
|
|
|
function detectZeroQuery(urlSearchParams) {
|
|
startYAtZero = urlSearchParams.get('startAtZero') === 'true';
|
|
let advOptions = document.getElementById('enable-advanced');
|
|
let startAtZeroOption = document.getElementById('y-start');
|
|
advOptions.checked = startYAtZero;
|
|
startAtZeroOption.checked = startYAtZero;
|
|
toggleAdvancedSetting();
|
|
toggleStartYAtZero();
|
|
}
|
|
|
|
function detectURLQuery() {
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
if (urlSearchParams.has('region')) {
|
|
detectRegionQuery(urlSearchParams);
|
|
}
|
|
if (urlSearchParams.has('time')) {
|
|
detectTimeQuery(urlSearchParams);
|
|
}
|
|
if (urlSearchParams.has('aggregate')) {
|
|
detectAggregateQuery(urlSearchParams);
|
|
}
|
|
if (urlSearchParams.has('startAtZero')) {
|
|
detectZeroQuery(urlSearchParams)
|
|
}
|
|
}
|
|
|
|
function buildDeepLinksURL() {
|
|
let url = "https://wowtoken.app/?"
|
|
if (currentTimeSelection !== '72h'){
|
|
url += `time=${currentTimeSelection}&`
|
|
}
|
|
if (currentRegionSelection !== 'us'){
|
|
url += `region=${currentRegionSelection}&`
|
|
}
|
|
if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
|
|
url += `aggregate=${currentAggregateSelection}&`
|
|
}
|
|
if (startYAtZero !== false){
|
|
url += `startAtZero=${startYAtZero}&`
|
|
}
|
|
return url
|
|
}
|
|
|
|
function copyURL() {
|
|
let toolTip = document.getElementById('urlTooltip');
|
|
navigator.clipboard.writeText(buildDeepLinksURL()).then(
|
|
() => {
|
|
toolTip.innerHTML= "Copied the URL";
|
|
},
|
|
() => {
|
|
toolTip.innerHTML = "Unable to copy URL to clipboard";
|
|
}
|
|
);
|
|
}
|
|
|
|
function toolTipMouseOut() {
|
|
let tooltip = document.getElementById("urlTooltip");
|
|
tooltip.innerHTML = "Copy to clipboard";
|
|
}
|
|
|
|
function registerEventHandles() {
|
|
registerCopyHandlers();
|
|
registerOptionHandlers();
|
|
registerAdvancedHandlers();
|
|
}
|
|
|
|
function registerAdvancedHandlers() {
|
|
document.getElementById('enable-advanced').addEventListener('change', () => {
|
|
toggleAdvancedSetting();
|
|
})
|
|
document.getElementById('y-start').addEventListener('change', () => {
|
|
toggleStartYAtZero();
|
|
})
|
|
}
|
|
|
|
function registerCopyHandlers() {
|
|
document.getElementById('copyURLButton').addEventListener('click', function () {
|
|
copyURL();
|
|
})
|
|
document.getElementById('copyURLButton').addEventListener('mouseout', function () {
|
|
toolTipMouseOut();
|
|
})
|
|
}
|
|
|
|
function registerOptionHandlers() {
|
|
document.getElementById('region').addEventListener('change', function() {
|
|
updateRegionPreference(this.value);
|
|
});
|
|
currentRegionSelection = document.getElementById('region').value;
|
|
document.getElementById('time').addEventListener('change', function() {
|
|
updateTimePreference(this.value);
|
|
});
|
|
currentTimeSelection = document.getElementById('time').value;
|
|
document.getElementById('aggregate').addEventListener('change', function () {
|
|
updateAggregatePreference(this.value);
|
|
})
|
|
currentAggregateSelection = document.getElementById('aggregate').value;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
registerEventHandles();
|
|
detectURLQuery();
|
|
chart = new TokenChart();
|
|
Promise.all([
|
|
callUpdateURL(),
|
|
]).then(pullChartData);
|
|
|
|
setInterval(callUpdateURL, 60*1000);
|
|
}, false);
|
|
|