Mercurial > personal > weather-server
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;