Make time and cost delineation more apparent

Enabled the option to start Y at zero
Change the timescale legend to be more readable instead of dense
2024-04-25 00:17:09 -07:00 · 2024-04-24 23:54:03 -07:00 · 2024-04-12 05:27:41 -07:00 · 2024-04-12 05:06:41 -07:00 · 2024-04-12 05:04:33 -07:00 · 2023-10-15 01:16:38 -07:00
7 changed files with 2227 additions and 1540 deletions
--- a/README.md
+++ b/README.md
@@ -2,6 +2,6 @@

 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 CodePipline, built via CodeBuild, and deployed.
+This project gets picked up by CodePipeline, built via CodeBuild, and deployed.

 ![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,17 +4,20 @@
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --mode production && mkdir -p dist && cp src/robots.txt src/index.html src/style.css src/favicon.ico dist/",
-    "build-dev": "webpack --mode development && mkdir -p dist && cp src/robots.txt src/index.html src/style.css src/favicon.ico dist/"
+    "build": "webpack --mode production && mkdir -p dist && cp src/robots.txt src/style.css src/favicon.ico dist/",
+    "build-dev": "webpack --mode development && mkdir -p dist && cp src/robots.txt src/style.css src/favicon.ico dist/"
  },
  "devDependencies": {
+    "css-loader": "^6.7.4",
+    "html-webpack-plugin": "^5.5.1",
+    "mini-css-extract-plugin": "^2.7.6",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
-    "cash-dom": "^8.1.2",
-    "chart.js": "^4.0.1",
+    "chart.js": "^4.4.0",
    "chartjs-adapter-dayjs-3": "^1.2.3",
-    "dayjs": "^1.11.6"
+    "css-minimizer-webpack-plugin": "^5.0.0",
+    "dayjs": "^1.11.7"
  }
 }
--- a/src/index.html
+++ b/src/index.html
@@ -5,12 +5,10 @@
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) 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="stylesheet" href="style.css">
        <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/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
        <link rel="preload" href="https://data.wowtoken.app/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
-        <script src="bundle.js"></script>
    </head>
    <body>
        <div class="flex-container">
@@ -19,41 +17,72 @@
                <div class="lds-ripple" id="loader"><div></div><div></div></div>
                <canvas id="token-chart"></canvas>
                <div id="option_select">
-                    <p>
-                        <label for="region">Region:</label>
-                        <select name="region" id="region">
-                            <option value="us">US</option>
-                            <option value="eu">EU</option>
-                            <option value="kr">KR</option>
-                            <option value="tw">TW</option>
-                        </select>
-                    </p>
-                    <p>
-                        <label for="time">Time Selection:</label>
-                        <select name="time" id="time">
-                            <option value="72h">3 Days</option>
-                            <option value="168h">7 Days</option>
-                            <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="1y">1 Year</option>
-                            <option value="2y">2 Years</option>
-                            <option value="all">All Available</option>
-                        </select>
-                    </p>
-                    <p>
-                        <label for="aggregate">Aggregate Function:</label>
-                        <select name="aggregate" id="aggregate">
-                            <option id='agg_none' value="none">None</option>
-                            <option id='agg_dmax' value="daily_max">Daily Maximum</option>
-                            <option id='agg_dmin' value="daily_min">Daily Minimum</option>
-                            <option id='agg_davg' value="daily_mean">Daily Average</option>
-                            <option id='agg_wmax' value="weekly_max" disabled>Weekly Maximum</option>
-                            <option id='agg_wmin' value="weekly_min" disabled>Weekly Minimum</option>
-                            <option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
-                        </select>
-                    </p>
+                    <fieldset id="basic-options">
+                        <legend>Basic chart options</legend>
+                        <div>
+                            <label for="region">Region:</label>
+                            <select name="region" id="region">
+                                <option value="us">US</option>
+                                <option value="eu">EU</option>
+                                <option value="kr">KR</option>
+                                <option value="tw">TW</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="time">Time Selection:</label>
+                            <select name="time" id="time">
+                                <option value="72h">3 Days</option>
+                                <option value="168h">7 Days</option>
+                                <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="1y">1 Year</option>
+                                <option value="2y">2 Years</option>
+                                <option value="all">All Available</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="enable-advanced">Enable advanced charting options:</label>
+                            <input type="checkbox" id="enable-advanced" name="enable-advanced" />
+                        </div>
+                    </fieldset>
+                    <fieldset id="advanced-options">
+                        <legend>Advanced chart options</legend>
+                        <fieldset id="advanced-region-options">
+                            <legend>Multi-Region Selection</legend>
+                            <label for="adv-r-us">US:</label>
+                            <input type="checkbox" id="adv-r-us" name="adv-r-us" value="enable" disabled />
+                            <label for="adv-r-eu">EU:</label>
+                            <input type="checkbox" id="adv-r-eu" name="adv-r-eu" value="enable" disabled />
+                            <label for="adv-r-kr">KR:</label>
+                            <input type="checkbox" id="adv-r-kr" name="adv-r-kr" value="enable" disabled />
+                            <label for="adv-r-tw">TW:</label>
+                            <input type="checkbox" id="adv-r-tw" name="adv-r-tw" value="enable" disabled/>
+                        </fieldset>
+                        <fieldset id="basic-smoothing">
+                            <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_wavg' value="weekly_mean" disabled>Weekly Average</option>
+                            </select>
+                        </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"/>
+                        </fieldset>
+
+                    </fieldset>
+                    <div class="tooltip">
+                        <button id="copyURLButton">
+                            <span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
+                            Copy URL to this Chart
+                        </button>
+                    </div>
+                    <div>
+                        <p><em>Looking for the classic WoW Token price? Find it <a href="https://classic.wowtoken.app">here!</a></em></p>
+                    </div>
                </div>
                <details id="about">
                    <summary>About this Site</summary>
--- a/src/index.js
+++ b/src/index.js
@@ -9,9 +9,10 @@ import {
    Title,
    Tooltip
 } from 'chart.js';
-import $ from 'cash-dom';
 import 'chartjs-adapter-dayjs-3';
+import "./style.css"

+// TODO: This file should be seperated into multiple with better ownership

 Chart.register(
    LineElement,
@@ -27,12 +28,33 @@ Chart.register(
 let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
+let startYAtZero = false;
 const currentPriceHash = {
    us: 0,
    eu: 0,
    kr: 0,
    tw: 0
 };
+let chartData = {
+    us: [],
+    eu: [],
+    kr: [],
+    tw: []
+}
+let chartOptions = {
+    us: {
+        color: 'gold'
+    },
+    eu: {
+        color: 'red'
+    },
+    kr: {
+        color: 'white'
+    },
+    tw: {
+        color: 'pink'
+    }
+}
 let chartJsData;
 let ctx;
 let tokenChart;
@@ -58,13 +80,48 @@ function populateChart() {
            },
            scales: {
                x: {
-                    type: 'time'
+                    type: 'time',
+                    grid: {
+                        color: '#625f62',
+                    },
+                    ticks: {
+                        color: '#a7a4ab',
+                        font: {
+                            size: 18,
+                        }
+                    },
+                    time: {
+                        unit: lookupTimeUnit(currentTimeSelection)
+                    }
+                },
+                y: {
+                    beginAtZero: startYAtZero,
+                    grid: {
+                        color: '#2f2c2f',
+                    },
+                    ticks: {
+                        color: '#a7a4ab',
+                        font: {
+                            size: 18,
+                        }
+                    }
                }
            },
        }
    });
 }

+function lookupTimeUnit(query){
+    const lookup = {
+        'h': 'day',
+        'd': 'week',
+        'm': 'month',
+        'y': 'month',
+        'l': 'year'
+    }
+    return lookup[query.charAt(query.length - 1)]
+}
+

 async function callUpdateURL() {
    let resp = await fetch("https://data.wowtoken.app/token/current.json");
@@ -106,7 +163,7 @@ async function aggregateFunctionToggle() {
    //  so if the need to be updated in the future we can do so easily
    const smallTimes = ['72h', '168h', '336h'];
    const longTimes = ['720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
-    const idsToModify = ['agg_wmax', 'agg_wmin', 'agg_wavg']
+    const idsToModify = ['agg_wavg']
    if (smallTimes.includes(currentTimeSelection)) {
        for (const id of idsToModify) {
            let ele = document.getElementById(id);
@@ -170,6 +227,26 @@ function updateAggregatePreference(newAggregate) {
    pullChartData().then(populateChart);
 }

+function toggleAdvancedSetting() {
+    let element = document.getElementById('advanced-options')
+    if (document.getElementById('enable-advanced').checked)
+    {
+        element.style.display = 'flex';
+    }
+    else
+    {
+        element.style.display = 'none';
+    }
+}
+
+function toggleStartYAtZero(){
+    startYAtZero = document.getElementById('y-start').checked;
+    if (tokenChart){
+        tokenChart.options.scales.y.beginAtZero = startYAtZero;
+        tokenChart.update();
+    }
+}
+
 function urlBuilder() {
    let url = "https://data.wowtoken.app/token/history/";
    if (currentAggregateSelection !== 'none') {
@@ -195,7 +272,7 @@ async function pullChartData() {
 }

 function formatToken() {
-    $("#token").html(currentPriceHash[currentRegionSelection].toLocaleString());
+    document.getElementById("token").innerText = currentPriceHash[currentRegionSelection].toLocaleString();
 }

 // TODO: These maybe able to be collapsed into a single function with params or a lambda
@@ -203,6 +280,7 @@ function formatToken() {
 function detectRegionQuery(urlSearchParams) {
    const validRegions = ['us', 'eu', 'tw', 'kr'];
    if (validRegions.includes(urlSearchParams.get('region').toLowerCase())) {
+        currentRegionSelection = urlSearchParams.get('region').toLowerCase();
        let regionDDL = document.getElementById('region');
        for (let i = 0; i < regionDDL.options.length; i++) {
            if (regionDDL.options[i].value === currentRegionSelection) {
@@ -210,7 +288,7 @@ function detectRegionQuery(urlSearchParams) {
            }
        }
    } else {
-        console.log("An incorrect or malformed region selection was made in the query string");
+        console.warn("An incorrect or malformed region selection was made in the query string");
    }
 }

@@ -228,12 +306,12 @@ function detectTimeQuery(urlSearchParams) {
            }
        }
    } else {
-        console.log("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");
    }
 }

 function detectAggregateQuery(urlSearchParams) {
-    const validOperations = ['none', 'daily_max', 'daily_min', 'daily_mean', 'weekly_max', 'weekly_min', 'weekly_mean'];
+    const validOperations = ['none', 'daily_mean', 'weekly_mean'];
    if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
        currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
        let aggregateDDL = document.getElementById('aggregate');
@@ -244,10 +322,20 @@ function detectAggregateQuery(urlSearchParams) {
        }
        aggregateFunctionToggle();
    } else {
-        console.log("An incorrect or malformed aggregate selection was made in the query string");
+        console.warn("An incorrect or malformed aggregate selection was made in the query string");
    }
 }

+function detectZeroQuery(urlSearchParams) {
+    startYAtZero = urlSearchParams.get('startAtZero') === 'true';
+    let advOptions = document.getElementById('enable-advanced');
+    let startAtZeroOption = document.getElementById('y-start');
+    advOptions.checked = startYAtZero;
+    startAtZeroOption.checked = startYAtZero;
+    toggleAdvancedSetting();
+    toggleStartYAtZero();
+}
+
 function detectURLQuery() {
    const urlSearchParams = new URLSearchParams(window.location.search);
    if (urlSearchParams.has('region')) {
@@ -259,9 +347,70 @@ function detectURLQuery() {
    if (urlSearchParams.has('aggregate')) {
        detectAggregateQuery(urlSearchParams);
    }
+    if (urlSearchParams.has('startAtZero')) {
+        detectZeroQuery(urlSearchParams)
+    }
 }

-$(document).ready(function() {
+function buildDeepLinksURL() {
+    let url = "https://wowtoken.app/?"
+    if (currentTimeSelection !== '72h'){
+        url += `time=${currentTimeSelection}&`
+    }
+    if (currentRegionSelection !== 'us'){
+        url += `region=${currentRegionSelection}&`
+    }
+    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
+        url += `aggregate=${currentAggregateSelection}&`
+    }
+    if (startYAtZero !== false){
+        url += `startAtZero=${startYAtZero}&`
+    }
+    return url
+}
+
+function copyURL() {
+    let toolTip = document.getElementById('urlTooltip');
+    navigator.clipboard.writeText(buildDeepLinksURL()).then(
+        () => {
+            toolTip.innerHTML= "Copied the URL";
+        },
+        () => {
+            toolTip.innerHTML = "Unable to copy URL to clipboard";
+        }
+    );
+}
+
+function toolTipMouseOut() {
+    let tooltip = document.getElementById("urlTooltip");
+    tooltip.innerHTML = "Copy to clipboard";
+}
+
+function registerEventHandles() {
+    registerCopyHandlers();
+    registerOptionHandlers();
+    registerAdvancedHandlers();
+}
+
+function registerAdvancedHandlers() {
+    document.getElementById('enable-advanced').addEventListener('change', () => {
+        toggleAdvancedSetting();
+    })
+    document.getElementById('y-start').addEventListener('change', () => {
+        toggleStartYAtZero();
+    })
+}
+
+function registerCopyHandlers() {
+    document.getElementById('copyURLButton').addEventListener('click', function () {
+        copyURL();
+    })
+    document.getElementById('copyURLButton').addEventListener('mouseout', function () {
+        toolTipMouseOut();
+    })
+}
+
+function registerOptionHandlers() {
    document.getElementById('region').addEventListener('change', function() {
        updateRegionPreference(this.value);
    });
@@ -274,8 +423,12 @@ $(document).ready(function() {
        updateAggregatePreference(this.value);
    })
    currentAggregateSelection = document.getElementById('aggregate').value;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    registerEventHandles();
    detectURLQuery();
    Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
    setInterval(callUpdateURL, 60*1000);
-});
+}, false);

--- a/src/style.css
+++ b/src/style.css
@@ -137,9 +137,6 @@ input[type="radio"] {
    padding: 0;
 }
 input[type="search"] {
-    -webkit-appearance: textfield;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
    box-sizing: content-box;
 }
 input[type="search"]::-webkit-search-cancel-button,
@@ -318,9 +315,28 @@ h6 {
    line-height: 75px;
    font-size: 30px;
 }
+.adv-options-container {
+    display: flex;
+    padding: 20px;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-around;
+}
+.box > div {
+    border: solid #bfbdbf;
+    border-radius: 40px;
+    padding: 20px;
+    margin: 20px;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
 p {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
    line-height: 3em;
 }

@@ -353,6 +369,20 @@ details[open] summary {

 #option_select {
    font-size: 20px;
+    line-height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#option_select > div {
+    padding: 10px;
+}
+
+#option_select > fieldset {
+    padding-bottom: 20px;
+    max-width: fit-content;
 }

 #token {
@@ -378,6 +408,17 @@ details[open] summary {
    flex-direction: column;
 }

+#advanced-options {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+
+#advanced-options > fieldset {
+    margin: 10px;
+}
+
 .lds-ripple {
    position: relative;
    align-self: center;
@@ -395,6 +436,44 @@ details[open] summary {
 .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
 }
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 280px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 80%;
+    left: -15%;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
@keyframes lds-ripple {
    0% {
        top: 36px;
@@ -418,8 +497,8 @@ details[open] summary {
        opacity: 1;
    }
    100% {
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,38 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+

 module.exports = {
  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /.s?css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin(),
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css'
+    }),
+    new HtmlWebpackPlugin({
+      template: "src/index.html"
+    }),
+  ],
  output: {
-    filename: 'bundle.js',
+    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'window',
+    clean: true,
  },
 };
Author	SHA1	Message	Date
Emily Doherty	1e0b4a0a1f	Make time and cost delineation more apparent	2024-04-25 00:17:09 -07:00
Emily Doherty	17ffbc3db1	Enabled the option to start Y at zero	2024-04-24 23:54:03 -07:00
Emily Doherty	0c9e7ed183	Change the timescale legend to be more readable instead of dense	2024-04-12 05:27:41 -07:00
Emily Doherty	4a7c03307d	Change logs to warnings, since that's what they really are	2024-04-12 05:06:41 -07:00
Emily Doherty	0e40f403e4	Increase font size and brightness for better contrast	2024-04-12 05:04:33 -07:00
Emily Doherty	66ab042995	Changes to advanced options and styling in prep for future work	2023-10-15 01:16:38 -07:00
Emily Doherty	8cd9a2ddeb	Remove Cash dependency, refactor event registration	2023-09-10 13:00:47 -07:00
Emily Doherty	702ca8c4d3	Update dependencies	2023-09-10 12:53:12 -07:00
Emily Doherty	c1b05851a4	Add link to classic token	2023-05-23 19:33:41 -07:00
Emily Doherty	86555f5983	Fix non-minimized JS	2023-05-21 06:54:25 -07:00
Emily Doherty	aab8a9cd12	Move to using hashed CSS files too	2023-05-20 03:02:08 -07:00
Emily Doherty	7df594f22a	Add ability to generate deeplinks URL for chart	2023-05-06 16:50:55 -07:00
Emily Doherty	be4678eab1	Use hashed bundle name for better caching and invalidation	2023-05-06 15:43:36 -07:00
Emily Doherty	5c80316d89	Version bump packages	2023-05-06 14:43:31 -07:00