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
This commit is contained in:
Emily Doherty 2024-10-16 23:53:53 -07:00
parent 487bb86a29
commit 5abf6fe132
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> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div><h1>1 Token = <u id="token">0</u> Gold</h1></div> <div class="data-header">
<h1>1 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 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>
@ -54,7 +60,6 @@
<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">

21
src/index.js
View File

@ -14,23 +14,14 @@ import "./style.css"
import fetchCurrent from "./fetchCurrent"; import fetchCurrent from "./fetchCurrent";
import fetchData from "./fetchData"; import fetchData from "./fetchData";
import {updateHighTime} from "./highTime";
import {updateLowTime} from "./lowTime";
import {addLoader, removeLoader} from "./loader"; import {addLoader, removeLoader} from "./loader";
import TokenChart from "./tokenChart"; import TokenChart from "./tokenChart";
import Datum from "./datum"; import Datum from "./datum";
// TODO: This file should be seperated into multiple with better ownership // TODO: This file should be seperated into multiple with better ownership
Chart.register(
LineElement,
PointElement,
LineController,
LinearScale,
TimeSeriesScale,
Legend,
Title,
Tooltip
)
let currentRegionSelection = ''; let currentRegionSelection = '';
let currentTimeSelection = ''; let currentTimeSelection = '';
let currentAggregateSelection = ''; let currentAggregateSelection = '';
@ -104,6 +95,7 @@ async function updateRegionPreference(newRegion) {
currentRegionSelection = newRegion; currentRegionSelection = newRegion;
} }
formatToken(); formatToken();
chart = new TokenChart();
await pullChartData(); await pullChartData();
} }
@ -114,7 +106,10 @@ async function updateTimePreference(newTime) {
currentTimeSelection = newTime; currentTimeSelection = newTime;
await aggregateFunctionToggle(); await aggregateFunctionToggle();
} }
chart = new TokenChart();
await pullChartData(); await pullChartData();
updateHighTime();
updateLowTime();
} }
async function updateAggregatePreference(newAggregate) { async function updateAggregatePreference(newAggregate) {
@ -123,6 +118,7 @@ async function updateAggregatePreference(newAggregate) {
addLoader(); addLoader();
currentAggregateSelection = newAggregate; currentAggregateSelection = newAggregate;
} }
chart = new TokenChart();
await pullChartData(); await pullChartData();
} }
@ -151,6 +147,7 @@ async function pullChartData() {
else { else {
for (let i = 0; i < chartData[currentRegionSelection].length; i++) { for (let i = 0; i < chartData[currentRegionSelection].length; i++) {
await chart.addDataToChart(chartData[currentRegionSelection][i]); await chart.addDataToChart(chartData[currentRegionSelection][i]);
console.warn("This should never hit, and should be okay to remove");
} }
} }
removeLoader(); removeLoader();
@ -190,6 +187,8 @@ 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");
} }

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;

70
src/tokenChart.js
View File

@ -11,6 +11,20 @@ import {
} from 'chart.js'; } from 'chart.js';
import 'chartjs-adapter-dayjs-3'; 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){ function lookupTimeUnit(query){
const lookup = { const lookup = {
'h': 'day', 'h': 'day',
@ -27,31 +41,41 @@ export default class TokenChart {
this._context = document.getElementById("token-chart").getContext('2d'); this._context = document.getElementById("token-chart").getContext('2d');
this._chartActive = false; this._chartActive = false;
this._lastDatum = null; 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 = []; const chartData = [];
let lateUpdateData = this._lastDatum; let lateUpdateData = this._lastDatum;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
this._lastDatum = data[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({ chartData.push({
x: data[i].getX(), x: data[i].getX(),
y: data[i].getY(), y: data[i].getY(),
}) })
} }
if (this._lateUpdate) { updateHighVal(this.highDatum);
if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() && updateLowVal(this.lowDatum);
this._lastDatum.getTime() < lateUpdateData.getTime()) {
chartData.push({
x: lateUpdateData.getX(),
y: lateUpdateData.getY(),
})
}
this._lateUpdate = false
}
this._chart = new Chart(this._context, { this._chart = new Chart(this._context, {
type: 'line', 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; this._chartActive = true;
} }
async destroyChart() { async destroyChart() {
await this._chart.destroy(); await this._chart.destroy();
this._chartActive = false; this._chartActive = false;
this._lastDatum = null;
this._highDatum = null;
this._lowDatum = null;
this._lateUpdate = false;
} }
async lateUpdate(datum){ async lateUpdate(datum){
@ -114,6 +151,15 @@ export default class TokenChart {
} }
async addDataToChart(datum) { 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) => { this._chart.data.datasets.forEach((dataset) => {
dataset.data.push({ dataset.data.push({
x: datum.getX(), x: datum.getX(),