Mercurial > personal > weather-server

comparison weather_server/static/graph.js @ 19:47987502bf4c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add graph, make it public, and bump the version. This checks in the tsc-compiled JS files because idklol.
author Paul Fisher <paul@pfish.zone>
date Sun, 13 Oct 2019 18:22:06 -0400
parents
children f817fa785c93
comparison
equal deleted inserted replaced
18:9d07dc5c3340 19:47987502bf4c
1 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2 return new (P || (P = Promise))(function (resolve, reject) {
3 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
4 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
5 function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
6 step((generator = generator.apply(thisArg, _arguments || [])).next());
7 });
8 };
9 define("math", ["require", "exports"], function (require, exports) {
10 "use strict";
11 Object.defineProperty(exports, "__esModule", { value: true });
12 /** Converts Celsius to Fahrenheit. */
13 function cToF(tempC) {
14 return tempC * 9 / 5 + 32;
15 }
16 exports.cToF = cToF;
17 const MAGNUS_B = 17.62;
18 const MAGNUS_C = 243.12;
19 /** The gamma function to calculate dew point. */
20 function gammaFn(tempC, rhPct) {
21 return Math.log(rhPct / 100) + MAGNUS_B * tempC / (MAGNUS_C + tempC);
22 }
23 /** Calculates the dew point. */
24 function dewPointC(tempC, rhPct) {
25 const gamma = gammaFn(tempC, rhPct);
26 return MAGNUS_C * gamma / (MAGNUS_B - gamma);
27 }
28 exports.dewPointC = dewPointC;
29 });
30 define("graph", ["require", "exports", "math"], function (require, exports, math_1) {
31 "use strict";
32 Object.defineProperty(exports, "__esModule", { value: true });
33 /** The amount of time we will draw on the graph. */
34 const HISTORY_SECONDS = 60 * 60 * 4;
35 /** The amount of buffer room we will request before HISTORY_SECONDS. */
36 const BUFFER_SECONDS = 300;
37 /**
38 * Sets up everything.
39 * @param tempElement The element where temperature data is.
40 * @param dewPointElement The element where the dew point is.
41 */
42 function setUp(root, tempElement, dewPointElement) {
43 return __awaiter(this, void 0, void 0, function* () {
44 const nowTS = new Date().getTime() / 1000;
45 const startTS = nowTS - HISTORY_SECONDS;
46 const query = new URL('?', location.href);
47 query.pathname = query.pathname + '/recent';
48 query.searchParams.set('seconds', String(HISTORY_SECONDS + BUFFER_SECONDS));
49 const results = yield fetch(query.href);
50 if (!results.ok)
51 return;
52 const data = yield results.json();
53 const readings = data.readings;
54 if (readings.length === 0)
55 return;
56 root.classList.remove('plain');
57 root.classList.add('fancy');
58 const tempsF = readings.map(s => [s.sample_time, math_1.cToF(s.temp_c)]);
59 const dewPointsF = readings.map(s => [s.sample_time, math_1.cToF(math_1.dewPointC(s.temp_c, s.rh_pct))]);
60 setUpElement(tempElement, [startTS, nowTS], tempsF);
61 setUpElement(dewPointElement, [startTS, nowTS], dewPointsF);
62 });
63 }
64 exports.setUp = setUp;
65 /**
66 * Sets up charting for this element.
67 * @param element The element to put a graph in.
68 * @param timeRange The `[start, end]` of the time range.
69 * @param data The data to chart.
70 */
71 function setUpElement(element, timeRange, data) {
72 if (data.length === 0)
73 return;
74 const chart = new Chart(element, timeRange, data);
75 chart.resize();
76 addEventListener('resize', () => chart.resize());
77 }
78 /** The number of degrees that the graph shows vertically. */
79 const Y_DEGREE_RANGE = 10;
80 const LINE_WIDTH_PX = 2;
81 const FONT_SIZE = '40px';
82 class Chart {
83 /**
84 * Creates a new chart.
85 * @param element The parent element to create `<canvas>`-based chart in.
86 * @param timeRange `[start, end]` of the range to chart as Unix timestamps.
87 * @param data The data to chart.
88 */
89 constructor(element, timeRange, data) {
90 this.element = element;
91 this.timeRange = timeRange;
92 this.data = data;
93 this.canvas = document.createElement('canvas');
94 this.element.insertBefore(this.canvas, element.firstChild);
95 const unit = element.getElementsByClassName('unit')[0];
96 this.unit = unit && unit.textContent || '';
97 }
98 resize() {
99 const dpr = self.devicePixelRatio || 1;
100 const [w, h] = this.size();
101 const pxSize = [w * dpr, h * dpr];
102 this.canvas.width = pxSize[0];
103 this.canvas.height = pxSize[1];
104 const ctx = this.canvas.getContext('2d');
105 ctx.clearRect(0, 0, pxSize[0], pxSize[1]);
106 ctx.scale(dpr, dpr);
107 this.redraw(ctx);
108 }
109 redraw(ctx) {
110 const stroke = getComputedStyle(this.element).color;
111 const family = getComputedStyle(this.element).fontFamily;
112 ctx.strokeStyle = stroke;
113 ctx.lineJoin = 'round';
114 ctx.lineWidth = LINE_WIDTH_PX;
115 ctx.font = `bold ${FONT_SIZE} ${family}`;
116 const yRange = calculateYRange(this.data.map(d => d[1]));
117 const [fullW, fullH] = this.size();
118 const [xPad, yMargin] = this.measureMargin(ctx);
119 const graphSize = [fullW - xPad, fullH];
120 ctx.beginPath();
121 for (const pt of this.data) {
122 const projected = project(pt, graphSize, this.timeRange, yRange);
123 ctx.lineTo(...projected);
124 }
125 ctx.stroke();
126 ctx.beginPath();
127 const lastPt = this.data[this.data.length - 1];
128 const center = project(lastPt, graphSize, this.timeRange, yRange);
129 ctx.ellipse(center[0], center[1], 1.5 * LINE_WIDTH_PX, 1.5 * LINE_WIDTH_PX, 0, 0, 2 * Math.PI);
130 ctx.fillStyle = getComputedStyle(this.element).backgroundColor;
131 ctx.fill();
132 ctx.stroke();
133 ctx.fillStyle = stroke;
134 ctx.textAlign = 'left';
135 ctx.textBaseline = 'top';
136 ctx.fillText(`${niceNumber(lastPt[1])} ${this.unit}`, center[0] + 5 * LINE_WIDTH_PX, center[1] + yMargin);
137 }
138 measureMargin(ctx) {
139 const bbox = ctx.measureText(`−99 ${this.unit}`);
140 const margin = 5 * LINE_WIDTH_PX + // margin to text
141 bbox.width + // max (?) width of text
142 16; // Pixel margin to wall.
143 return [margin, -31.5 / 2];
144 }
145 size() {
146 const cssSize = this.element.getBoundingClientRect();
147 return [cssSize.width, cssSize.height];
148 }
149 }
150 function niceNumber(n) {
151 return Math.round(n).toLocaleString('en-us').replace('-', '−');
152 }
153 /** The closest that the last point will be allowed to get to the edge. */
154 const EDGE_FRACTION = 0.125;
155 /**
156 * Determines what the Y range of the chart should be.
157 * @param ys The Y values of the chart.
158 * @return The lowest and highest values of the range.
159 */
160 function calculateYRange(ys) {
161 const yMax = Math.max(...ys);
162 const yMin = Math.min(...ys);
163 const yMid = (yMin + yMax) / 2;
164 const lastY = ys[ys.length - 1];
165 const yLo = yMid - Y_DEGREE_RANGE / 2;
166 const yProportion = Math.max(Math.min((lastY - yLo) / Y_DEGREE_RANGE, 1 - EDGE_FRACTION), EDGE_FRACTION);
167 const rangeLo = lastY - yProportion * Y_DEGREE_RANGE;
168 return [rangeLo, rangeLo + Y_DEGREE_RANGE];
169 }
170 /**
171 * Projects a Cartesian coordinate into Canvas space.
172 *
173 * @param coord The `[x, y]` coordinate to project.
174 * @param size The `[width, height]` of the context.
175 * @param xRange The range of X values in the context.
176 * @param yRange The range of Y values in the context.
177 * @return The `[x, y]` coordinate in Canvas space.
178 */
179 function project(coord, size, xRange, yRange) {
180 const [x, y] = coord;
181 const [xMin, xMax] = xRange;
182 const xSpan = xMax - xMin;
183 const [yMin, yMax] = yRange;
184 const ySpan = yMax - yMin;
185 const [xSize, ySize] = size;
186 return [
187 (x - xMin) / xSpan * xSize,
188 (yMax - y) / ySpan * ySize,
189 ];
190 }
191 });
192 //# sourceMappingURL=graph.js.map