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

Adds a high and low price data callout

Browse Source 
(cherry picked from commit 5abf6fe132)
This commit is contained in:
Emily Doherty 2024-10-16 23:53:53 -07:00
parent de6621e81c
commit d07eec1cf0
6 changed files with 126 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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};

9
src/index.html
View File

@ -12,7 +12,13 @@
</head>
<body>
<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>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
<p>Lowest in last <em id="low-time">3 days</em>: <u id="low-val">0</u></p>
</div>
</div>
<div id="chart-frame">
<div class="lds-ripple" id="loader"><div></div><div></div></div>
<canvas id="token-chart"></canvas>
@ -51,7 +57,6 @@
<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">

21
src/index.js
View File

@ -14,23 +14,14 @@ 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
Chart.register(
LineElement,
PointElement,
LineController,
LinearScale,
TimeSeriesScale,
Legend,
Title,
Tooltip
)
let currentRegionSelection = '';
let currentTimeSelection = '';
let currentAggregateSelection = '';
@ -104,6 +95,7 @@ async function updateRegionPreference(newRegion) {
currentRegionSelection = newRegion;
}
formatToken();
chart = new TokenChart();
await pullChartData();
}
@ -114,7 +106,10 @@ async function updateTimePreference(newTime) {
currentTimeSelection = newTime;
await aggregateFunctionToggle();
}
chart = new TokenChart();
await pullChartData();
updateHighTime();
updateLowTime();
}
async function updateAggregatePreference(newAggregate) {
@ -123,6 +118,7 @@ async function updateAggregatePreference(newAggregate) {
addLoader();
currentAggregateSelection = newAggregate;
}
chart = new TokenChart();
await pullChartData();
}
@ -151,6 +147,7 @@ async function pullChartData() {
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();
@ -190,6 +187,8 @@ function detectTimeQuery(urlSearchParams) {
timeDDL.options[i].selected = true;
}
}
updateHighTime();
updateLowTime();
} else {
console.warn("An incorrect or malformed time selection was made in the query string");
}

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;
}
#option_select {
font-size: 20px;
line-height: 40px;
@ -419,6 +420,21 @@ details[open] summary {
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 {
position: relative;
align-self: center;

70
src/tokenChart.js
View File

@ -11,6 +11,20 @@ import {
} from 'chart.js';
import 'chartjs-adapter-dayjs-3';
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',
@ -27,31 +41,41 @@ export default class TokenChart {
this._context = document.getElementById("token-chart").getContext('2d');
this._chartActive = false;
this._lastDatum = null;
this._lateUpdate = true
this._highDatum = null;
this._lowDatum = null;
this._lateUpdate = false;
}
async createChart(region, time, yLevel, data = []) {
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(),
})
}
if (this._lateUpdate) {
if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() &&
this._lastDatum.getTime() < lateUpdateData.getTime()) {
chartData.push({
x: lateUpdateData.getX(),
y: lateUpdateData.getY(),
})
}
this._lateUpdate = false
}
updateHighVal(this.highDatum);
updateLowVal(this.lowDatum);
this._chart = new Chart(this._context, {
type: 'line',
@ -100,12 +124,25 @@ export default class TokenChart {
},
}
});
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){
@ -114,6 +151,15 @@ export default class TokenChart {
}
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(),