diff weather_server/static/graph.js @ 28:f817fa785c93

Make graph only consider visible points when setting range.
author Paul Fisher <paul@pfish.zone>
date Sun, 19 Jan 2020 17:05:11 -0500
parents 47987502bf4c
children beedfa8eaa3f
line wrap: on
line diff
--- a/weather_server/static/graph.js	Sun Nov 10 23:48:38 2019 -0500
+++ b/weather_server/static/graph.js	Sun Jan 19 17:05:11 2020 -0500
@@ -1,26 +1,24 @@
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
 define("math", ["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    /** Converts Celsius to Fahrenheit. */
     function cToF(tempC) {
         return tempC * 9 / 5 + 32;
     }
     exports.cToF = cToF;
     const MAGNUS_B = 17.62;
     const MAGNUS_C = 243.12;
-    /** The gamma function to calculate dew point. */
     function gammaFn(tempC, rhPct) {
         return Math.log(rhPct / 100) + MAGNUS_B * tempC / (MAGNUS_C + tempC);
     }
-    /** Calculates the dew point. */
     function dewPointC(tempC, rhPct) {
         const gamma = gammaFn(tempC, rhPct);
         return MAGNUS_C * gamma / (MAGNUS_B - gamma);
@@ -30,15 +28,8 @@
 define("graph", ["require", "exports", "math"], function (require, exports, math_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    /** The amount of time we will draw on the graph. */
     const HISTORY_SECONDS = 60 * 60 * 4;
-    /** The amount of buffer room we will request before HISTORY_SECONDS. */
     const BUFFER_SECONDS = 300;
-    /**
-     * Sets up everything.
-     * @param tempElement The element where temperature data is.
-     * @param dewPointElement The element where the dew point is.
-     */
     function setUp(root, tempElement, dewPointElement) {
         return __awaiter(this, void 0, void 0, function* () {
             const nowTS = new Date().getTime() / 1000;
@@ -62,12 +53,6 @@
         });
     }
     exports.setUp = setUp;
-    /**
-     * Sets up charting for this element.
-     * @param element The element to put a graph in.
-     * @param timeRange The `[start, end]` of the time range.
-     * @param data The data to chart.
-     */
     function setUpElement(element, timeRange, data) {
         if (data.length === 0)
             return;
@@ -75,17 +60,10 @@
         chart.resize();
         addEventListener('resize', () => chart.resize());
     }
-    /** The number of degrees that the graph shows vertically. */
     const Y_DEGREE_RANGE = 10;
     const LINE_WIDTH_PX = 2;
     const FONT_SIZE = '40px';
     class Chart {
-        /**
-         * Creates a new chart.
-         * @param element The parent element to create `<canvas>`-based chart in.
-         * @param timeRange `[start, end]` of the range to chart as Unix timestamps.
-         * @param data The data to chart.
-         */
         constructor(element, timeRange, data) {
             this.element = element;
             this.timeRange = timeRange;
@@ -113,7 +91,8 @@
             ctx.lineJoin = 'round';
             ctx.lineWidth = LINE_WIDTH_PX;
             ctx.font = `bold ${FONT_SIZE} ${family}`;
-            const yRange = calculateYRange(this.data.map(d => d[1]));
+            const onScreenData = this.data.filter(([time, _]) => this.timeRange[0] <= time);
+            const yRange = calculateYRange(onScreenData.map(d => d[1]));
             const [fullW, fullH] = this.size();
             const [xPad, yMargin] = this.measureMargin(ctx);
             const graphSize = [fullW - xPad, fullH];
@@ -137,9 +116,9 @@
         }
         measureMargin(ctx) {
             const bbox = ctx.measureText(`−99 ${this.unit}`);
-            const margin = 5 * LINE_WIDTH_PX + // margin to text
-                bbox.width + // max (?) width of text
-                16; // Pixel margin to wall.
+            const margin = 5 * LINE_WIDTH_PX +
+                bbox.width +
+                16;
             return [margin, -31.5 / 2];
         }
         size() {
@@ -150,13 +129,7 @@
     function niceNumber(n) {
         return Math.round(n).toLocaleString('en-us').replace('-', '−');
     }
-    /** The closest that the last point will be allowed to get to the edge. */
     const EDGE_FRACTION = 0.125;
-    /**
-     * Determines what the Y range of the chart should be.
-     * @param ys The Y values of the chart.
-     * @return The lowest and highest values of the range.
-     */
     function calculateYRange(ys) {
         const yMax = Math.max(...ys);
         const yMin = Math.min(...ys);
@@ -167,15 +140,6 @@
         const rangeLo = lastY - yProportion * Y_DEGREE_RANGE;
         return [rangeLo, rangeLo + Y_DEGREE_RANGE];
     }
-    /**
-     * Projects a Cartesian coordinate into Canvas space.
-     *
-     * @param coord The `[x, y]` coordinate to project.
-     * @param size The `[width, height]` of the context.
-     * @param xRange The range of X values in the context.
-     * @param yRange The range of Y values in the context.
-     * @return The `[x, y]` coordinate in Canvas space.
-     */
     function project(coord, size, xRange, yRange) {
         const [x, y] = coord;
         const [xMin, xMax] = xRange;