personal/weather-server: weather_server/static/graph.js comparison

comparison 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

comparison

equal deleted inserted replaced

-:99b0759386b1
+:f817fa785c93
 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);
 }
 exports.dewPointC = dewPointC;
 });
 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;
 const startTS = nowTS - HISTORY_SECONDS;
 const query = new URL('?', location.href);
 setUpElement(tempElement, [startTS, nowTS], tempsF);
 setUpElement(dewPointElement, [startTS, nowTS], dewPointsF);
 });
 }
 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;
 const chart = new Chart(element, timeRange, data);
 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;
 this.data = data;
 this.canvas = document.createElement('canvas');
 const family = getComputedStyle(this.element).fontFamily;
 ctx.strokeStyle = stroke;
 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];
 ctx.beginPath();
 for (const pt of this.data) {
 ctx.textBaseline = 'top';
 ctx.fillText(`${niceNumber(lastPt[1])} ${this.unit}`, center[0] + 5 * LINE_WIDTH_PX, center[1] + yMargin);
 }
 measureMargin(ctx) {
 const bbox = ctx.measureText(`−99 ${this.unit}`);
-const margin = 5 * LINE_WIDTH_PX + // margin to text
+const margin = 5 * LINE_WIDTH_PX +
-bbox.width + // max (?) width of text
+bbox.width +
-16; // Pixel margin to wall.
+16;
 return [margin, -31.5 / 2];
 }
 size() {
 const cssSize = this.element.getBoundingClientRect();
 return [cssSize.width, cssSize.height];
 }
 }
 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);
 const yMid = (yMin + yMax) / 2;
 const lastY = ys[ys.length - 1];
 const yLo = yMid - Y_DEGREE_RANGE / 2;
 const yProportion = Math.max(Math.min((lastY - yLo) / Y_DEGREE_RANGE, 1 - EDGE_FRACTION), EDGE_FRACTION);
 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;
 const xSpan = xMax - xMin;
 const [yMin, yMax] = yRange;