commit 5abf6fe132264c4b26224b95a40c06dbe15783b8
parent 487bb86a29f1f457ddf52db9c338ab399e87aadd
Author: Emily Doherty <git@emily.sh>
Date: Wed, 16 Oct 2024 23:53:53 -0700
Adds a high and low price data callout
Diffstat:
6 files changed, 128 insertions(+), 25 deletions(-)
diff --git a/src/highTime.js b/src/highTime.js
@@ -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};
+\ No newline at end of file
diff --git a/src/index.html b/src/index.html
@@ -12,7 +12,13 @@
</head>
<body>
<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 class="lds-ripple" id="loader"><div></div><div></div></div>
<canvas id="token-chart"></canvas>
@@ -54,7 +60,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">
diff --git a/src/index.js b/src/index.js
@@ -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");
}
diff --git a/src/lowTime.js b/src/lowTime.js
@@ -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};
+\ No newline at end of file
diff --git a/src/style.css b/src/style.css
@@ -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;
diff --git a/src/tokenChart.js b/src/tokenChart.js
@@ -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;
+ }
+
+ get highDatum() {
+ return this._highDatum;
+ }
+
+ get lowDatum() {
+ return this._lowDatum;
}
- async createChart(region, time, yLevel, data = []) {
+ 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(),
