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

Compare commits

base: wowtoken-app:13ed6dfdcedc21dc6ba5920f0f72b95ba64a40a4
Branches Tags
wowtoken-app:main
wowtoken-app:classic
wowtoken-app:feature/candlestick
...
compare: wowtoken-app:bc44d4fe355929acebc6207da24b838ee59e5831
Branches Tags
wowtoken-app:classic
wowtoken-app:main
wowtoken-app:feature/candlestick

9 Commits
13ed6dfdce ... bc44d4fe35

Author SHA1 Message Date
Emily Doherty
bc44d4fe35 Some cherry pick damage fixes I didnt notice in merge conflicts 2024-12-02 04:24:24 -08:00
Emily Doherty
b6b30df542 Add option to generate overlay URL 
This is going to be expanded upon in future releases, for now it's hardcoded to use just the previous time overlay

(cherry picked from commit 14b80dfea6)
 2024-12-01 18:27:42 -08:00
Emily Doherty
69b6409699 Fix live token price updates 
(cherry picked from commit 24928c10fa)
 2024-12-01 18:27:40 -08:00
Emily Doherty
1b026d0757 Update README to link to backend lambda src 
(cherry picked from commit df7e5c0e97)
 2024-12-01 18:27:38 -08:00
Emily Doherty
a38a118473 Initial implementation of overlay functionality 
(cherry picked from commit d25334d35f)
 2024-12-01 18:27:31 -08:00
Emily Doherty
9f7ab723a9 Add backwards compatibility for average changes 
(cherry picked from commit 8c8499fb1c)
 2024-12-01 18:27:20 -08:00
Emily Doherty
fa009b48b5 Swap to v2 of the historical api 
(cherry picked from commit 0180e8a3b5)
 2024-12-01 18:27:15 -08:00
Emily Doherty
7eaedf0f9a Swap to v2 of current API 
(cherry picked from commit fa058cc64e)
 2024-12-01 18:23:30 -08:00
Emily Doherty
5f9e3462ae Fix live prices being added to the chart with incorrect price 
(cherry picked from commit ef95388185)
 2024-12-01 18:19:04 -08:00
8 changed files with 266 additions and 39 deletions
Show Stats Expand all files Collapse all files

6
README.md
View File

@ -2,6 +2,8 @@
These are the public assets for the [wowtoken.app](https://wowtoken.app) website, served off Amazon S3 behind CloudFront.
This project gets picked up by CodePipeline, built via CodeBuild, and deployed.
This project gets picked up by CodePipeline, built via CodeBuild, and to S3.
![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
Backend lambdas can be found at my private git repository [wowtoken.app-backend](https://git.emily.sh/wowtoken-app/wowtoken.app-backend)
![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)

2
src/fetchCurrent.js
View File

@ -1,4 +1,4 @@
export default async function fetchCurrent() {
const resp = await fetch("https://data.wowtoken.app/classic/token/current.json");
const resp = await fetch("https://data.wowtoken.app/v2/current/classic.json");
return await resp.json();
}

2
src/fetchData.js
View File

@ -6,7 +6,7 @@ export default async function fetchData(currentRegionSelection, currentTimeSelec
const resp = await fetch(urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection));
const respData = await resp.json();
for (let i = 0, l = respData.length; i < l; i++) {
let datum = new Datum(Date.parse(respData[i]['time']), respData[i]['value']);
const datum = new Datum(new Date(respData[i][0]), respData[i][1]);
data.push(datum);
}
return data;

13
src/index.html
View File

@ -7,8 +7,8 @@
<meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) Classic in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
<link rel="preconnect" href="https://data.wowtoken.app">
<link rel="dns-prefetch" href="https://data.wowtoken.app">
<link rel="preload" href="https://data.wowtoken.app/classic/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="https://data.wowtoken.app/classic/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="https://data.wowtoken.app/v2/current/classic.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="https://data.wowtoken.app/v2/relative/classic/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
</head>
<body>
<div class="flex-container">
@ -42,6 +42,7 @@
<option value="336h">14 Days</option>
<option value="720h">1 Month</option>
<option value="90d">3 Months</option>
<option value="6m">6 Months</option>
<option value="all">All Available</option>
</select>
</div>
@ -56,9 +57,15 @@
<label for="aggregate">Smoothing Function:</label>
<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_davg' value="avg">Daily Average</option>
</select>
</fieldset>
<fieldset id="period-overlay-options">
<label for="period-overlay" id="period-overlay-label">
Overlay previous <em id="period-time">0 hours</em> on current period:
</label>
<input type="checkbox" id="period-overlay" name="period-overlay">
</fieldset>
<fieldset id="y-start-options">
<label for="y-start">Start y-axis at 0:</label>
<input type="checkbox" id="y-start" name="y-start"/>

62
src/index.js
View File

@ -6,6 +6,7 @@ import fetchData from "./fetchData";
import {updateHighTime} from "./highTime";
import {updateLowTime} from "./lowTime";
import {addLoader, removeLoader} from "./loader";
import {allowOverlay, forceOverlayOff, forceOverlayOn, isOverlayAllowed, isOverlaySelected} from "./overlay";
import TokenChart from "./tokenChart";
import Datum from "./datum";
@ -15,6 +16,7 @@ let currentRegionSelection = '';
let currentTimeSelection = '';
let currentAggregateSelection = '';
let startYAtZero = false;
let datum;
let chart;
const currentPriceHash = {
us: 0,
@ -43,11 +45,11 @@ async function updateTokens(data) {
}
async function updateRegionalToken(region, data) {
if (currentPriceHash[region] !== data['price_data'][region]) {
currentPriceHash[region] = data['price_data'][region];
if (currentPriceHash[region] !== data[region][1]) {
currentPriceHash[region] = data[region][1];
if (region === currentRegionSelection) {
formatToken();
const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
datum = new Datum(Date.parse(data[region][0]), data[region][1]);
if (currentAggregateSelection === 'none' && chart.active()) {
await chart.addDataToChart(datum);
}
@ -65,7 +67,6 @@ async function updateRegionPreference(newRegion) {
currentRegionSelection = newRegion;
}
formatToken();
chart = new TokenChart();
await pullChartData();
}
@ -75,7 +76,12 @@ async function updateTimePreference(newTime) {
addLoader();
currentTimeSelection = newTime;
}
chart = new TokenChart();
if (newTime === "all") {
forceOverlayOff();
}
else {
allowOverlay();
}
await pullChartData();
updateHighTime();
updateLowTime();
@ -87,7 +93,6 @@ async function updateAggregatePreference(newAggregate) {
addLoader();
currentAggregateSelection = newAggregate;
}
chart = new TokenChart();
await pullChartData();
}
@ -108,16 +113,28 @@ function toggleStartYAtZero(){
chart.toggleYStart(startYAtZero);
}
async function toggleOverlay() {
await chart.destroyChart();
addLoader();
await pullChartData();
}
async function pullChartData() {
chartData[currentRegionSelection] = await fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection);
let timeSelection = currentTimeSelection;
if (isOverlaySelected()) {
let timeDigits = parseInt(timeSelection.slice(0, timeSelection.length - 1)) * 2;
let timeUnit = timeSelection.slice(timeSelection.length - 1);
timeSelection = `${timeDigits}${timeUnit}`;
}
chartData[currentRegionSelection] = await fetchData(currentRegionSelection, timeSelection, 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");
}
console.warn("This should never hit, and should be okay to remove");
}
removeLoader();
}
@ -150,6 +167,9 @@ function detectTimeQuery(urlSearchParams) {
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();
if (currentTimeSelection === 'all') {
forceOverlayOff();
}
let timeDDL = document.getElementById('time');
for (let i = 0; i < timeDDL.options.length; i++) {
if (timeDDL.options[i].value === currentTimeSelection) {
@ -164,9 +184,13 @@ function detectTimeQuery(urlSearchParams) {
}
function detectAggregateQuery(urlSearchParams) {
const validOperations = ['none', 'daily_mean'];
const validOperations = ['none', 'daily_mean', 'avg'];
if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
// For backwards compatibility
if (currentAggregateSelection === 'daily_mean') {
currentAggregateSelection = 'avg';
}
let aggregateDDL = document.getElementById('aggregate');
for (let i = 0; i < aggregateDDL.options.length; i++) {
if (aggregateDDL.options[i].value === currentAggregateSelection) {
@ -188,6 +212,15 @@ function detectZeroQuery(urlSearchParams) {
toggleStartYAtZero();
}
function detectOverlayQuery(urlSearchParams) {
const enableOverlay = urlSearchParams.get('overlay') === 'previous_time';
if (enableOverlay) {
forceOverlayOn();
} else {
forceOverlayOff();
}
}
function detectURLQuery() {
const urlSearchParams = new URLSearchParams(window.location.search);
if (urlSearchParams.has('region')) {
@ -202,6 +235,9 @@ function detectURLQuery() {
if (urlSearchParams.has('startAtZero')) {
detectZeroQuery(urlSearchParams)
}
if (urlSearchParams.has('overlay')) {
detectOverlayQuery(urlSearchParams);
}
}
function buildDeepLinksURL() {
@ -218,6 +254,9 @@ function buildDeepLinksURL() {
if (startYAtZero !== false){
url += `startAtZero=${startYAtZero}&`
}
if (isOverlaySelected()){
url += `overlay=previous_time&`
}
return url
}
@ -244,6 +283,8 @@ function registerEventHandles() {
registerAdvancedHandlers();
}
// TODO: These need to be moved out into probably tokenChart if not other files
function registerAdvancedHandlers() {
document.getElementById('enable-advanced').addEventListener('change', () => {
toggleAdvancedSetting();
@ -251,6 +292,9 @@ function registerAdvancedHandlers() {
document.getElementById('y-start').addEventListener('change', () => {
toggleStartYAtZero();
})
document.getElementById('period-overlay').addEventListener('change', () => {
toggleOverlay();
})
}
function registerCopyHandlers() {

40
src/overlay.js Normal file
View File

@ -0,0 +1,40 @@
function isOverlaySelected() {
return document.getElementById('period-overlay').checked;
}
function getOverlayTime() {
return document.getElementById("time").selectedOptions[0].innerText;
}
function setOverlayLabelTime() {
const currentTime = document.getElementById("time").selectedOptions[0].innerText;
let overlayTimeLabel = document.getElementById("period-time");
overlayTimeLabel.innerText = currentTime.toLocaleString();
}
function forceOverlayOff(){
const overlaySetting = document.getElementById("period-overlay");
const periodOverlayField = document.getElementById("period-overlay-options");
overlaySetting.checked = false;
periodOverlayField.style.display = 'none';
}
function forceOverlayOn(){
const overlaySetting = document.getElementById("period-overlay");
const periodOverlayField = document.getElementById("period-overlay-options");
const advancedOptionsField = document.getElementById("advanced-options");
overlaySetting.checked = true;
advancedOptionsField.style.display = 'flex';
periodOverlayField.style.display = 'flex';
}
function isOverlayAllowed(timeSelection) {
return !(timeSelection === "all")
}
function allowOverlay(){
const periodOverlayField = document.getElementById("period-overlay-options");
periodOverlayField.style.display = 'flex';
}
export {isOverlaySelected, getOverlayTime, setOverlayLabelTime, forceOverlayOff, forceOverlayOn, isOverlayAllowed, allowOverlay};

168
src/tokenChart.js
View File

@ -24,6 +24,8 @@ Chart.register(
import {updateHighVal} from "./highTime";
import {updateLowVal} from "./lowTime";
import {isOverlaySelected, getOverlayTime, setOverlayLabelTime} from "./overlay";
import Datum from "./datum";
function lookupTimeUnit(query){
const lookup = {
@ -36,6 +38,24 @@ function lookupTimeUnit(query){
return lookup[query.charAt(query.length - 1)]
}
function timeDeltaInMilliseconds(time) {
let timeDigits = (parseInt(time.slice(0, time.length - 1))).toFixed(0);
let timeUnit = time.slice(time.length - 1);
switch (timeUnit) {
case 'h':
return timeDigits * (60 * 60) * 1000;
case 'd':
return timeDigits * (24 * 60 * 60) * 1000;
case 'm':
return (timeDigits * (30.437 * 24 * 60 * 60)).toFixed(0) * 1000;
case 'y':
return (timeDigits * (365.25 * 24 * 60 * 60)).toFixed(0) * 1000;
case 'l':
console.warn("This path should not happen, this warning is an error in logic")
}
}
export default class TokenChart {
constructor() {
this._context = document.getElementById("token-chart").getContext('2d');
@ -54,19 +74,116 @@ export default class TokenChart {
return this._lowDatum;
}
async createChart(region, time, yLevel, data) {
async #newChart(chartConfig) {
this._chart = new Chart(this._context, chartConfig);
}
async #updateHighLow(datum) {
if (this._highDatum === null) {
this._highDatum = new Datum(datum.getTime(), 0);
this._lowDatum = datum;
return;
}
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);
}
}
async #createOverlayChart(region, time, yLevel, data){
const chartData = [];
let lateUpdateData = this._lastDatum;
const overlayData = [];
const overlayDelta = timeDeltaInMilliseconds(time);
for (let i = 0; i < data.length; i++) {
const originalDate = data[i].getX();
if (i < (data.length / 2)) {
overlayData.push({
x: new Date(originalDate.getTime() + overlayDelta),
y: data[i].getY(),
});
}
else {
await this.#updateHighLow(data[i]);
chartData.push({
x: data[i].getX(),
y: data[i].getY(),
})
}
}
const chartConfig = {
type: 'line',
data: {
datasets: [
{
borderColor: 'gold',
label: region.toUpperCase() + " WoW Token Price",
data: chartData,
cubicInterpolationMode: 'monotone',
pointRadius: 0
},
{
borderColor: 'red',
label: `Previous ${getOverlayTime()} ${region.toUpperCase()} WoW Token Price`,
data: overlayData,
cubicInterpolationMode: 'monotone',
pointRadius: 0
}
]
},
options: {
interaction: {
intersect: false,
mode: "index"
},
scales: {
x: {
type: 'time',
grid: {
color: '#625f62',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
},
time: {
unit: lookupTimeUnit(time)
}
},
y: {
beginAtZero: yLevel,
grid: {
color: '#2f2c2f',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
}
}
},
}
}
await this.#newChart(chartConfig)
}
async #createNormalChart(region, time, yLevel, data) {
const chartData = [];
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];
}
await this.#updateHighLow(data[i]);
chartData.push({
x: data[i].getX(),
@ -74,10 +191,7 @@ export default class TokenChart {
})
}
updateHighVal(this.highDatum);
updateLowVal(this.lowDatum);
this._chart = new Chart(this._context, {
const chartConfig = {
type: 'line',
data: {
datasets: [{
@ -123,7 +237,25 @@ export default class TokenChart {
}
},
}
});
}
await this.#newChart(chartConfig)
}
async createChart(region, time, yLevel, data) {
let lateUpdateData = this._lastDatum;
if (isOverlaySelected()) {
await this.#createOverlayChart(region, time, yLevel, data)
}
else {
await this.#createNormalChart(region, time, yLevel, data)
}
setOverlayLabelTime();
updateHighVal(this.highDatum);
updateLowVal(this.lowDatum);
if (this._lateUpdate) {
if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() &&
@ -160,11 +292,9 @@ export default class TokenChart {
this._lowDatum = datum;
updateLowVal(this.lowDatum);
}
this._chart.data.datasets.forEach((dataset) => {
dataset.data.push({
x: datum.getX(),
y: datum.getY(),
})
this._chart.data.datasets[0].data.push({
x: datum.getX(),
y: datum.getY(),
});
this._chart.update();
}

12
src/urlBuilder.js
View File

@ -1,8 +1,12 @@
export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
let url = "https://data.wowtoken.app/classic/token/history/";
if (currentAggregateSelection !== 'none') {
url += `${currentAggregateSelection}/`
let url = "https://data.wowtoken.app/v2/";
if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
url += `math/${currentAggregateSelection}/classic/`
}
url += `${currentRegionSelection}/${currentTimeSelection}.json`
else {
url += `relative/classic/`
}
url += `${currentRegionSelection}/${currentTimeSelection}.json`;
return url;
}