diff --git a/src/highTime.js b/src/highTime.js new file mode 100644 index 0000000..e0dc9fe --- /dev/null +++ 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 index 49424b8..4cfafa5 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,13 @@
-

1 Token = 0 Gold

+
+

1 Token = 0 Gold

+
+

Highest in last 3 days: 0

+

Lowest in last 3 days: 0

+
+
@@ -54,7 +60,6 @@
diff --git a/src/index.js b/src/index.js index 2b0ec45..d4464fb 100644 --- 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 new file mode 100644 index 0000000..39243bc --- /dev/null +++ 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 index 49f91e3..fbac5cf 100644 --- 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 index a5f4a29..f8d80a2 100644 --- 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; } - 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(),