Mercurial > personal > weather-server

annotate weather_server/static/graph.js @ 33:beedfa8eaa3f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add grid lines to the graph. - Adds time gridlines on the hour and 15 minutes. - Adds temperature gridlines on 10, 5, and 1 degree intervals. - Increases chart range. - Changes from rounding temperature to floor()ing it.
author Paul Fisher <paul@pfish.zone>
date Sat, 12 Jun 2021 20:22:46 +0000
parents f817fa785c93
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
1 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
28
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
2 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
3 return new (P || (P = Promise))(function (resolve, reject) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
4 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
5 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
28
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
6 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
7 step((generator = generator.apply(thisArg, _arguments || [])).next());
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
8 });
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
9 };
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
10 define("math", ["require", "exports"], function (require, exports) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
11 "use strict";
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
12 Object.defineProperty(exports, "__esModule", { value: true });
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
13 exports.dewPointC = exports.cToF = void 0;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
14 function cToF(tempC) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
15 return tempC * 9 / 5 + 32;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
16 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
17 exports.cToF = cToF;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
18 const MAGNUS_B = 17.62;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
19 const MAGNUS_C = 243.12;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
20 function gammaFn(tempC, rhPct) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
21 return Math.log(rhPct / 100) + MAGNUS_B * tempC / (MAGNUS_C + tempC);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
22 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
23 function dewPointC(tempC, rhPct) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
24 const gamma = gammaFn(tempC, rhPct);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
25 return MAGNUS_C * gamma / (MAGNUS_B - gamma);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
26 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
27 exports.dewPointC = dewPointC;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
28 });
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
29 define("graph", ["require", "exports", "math"], function (require, exports, math_1) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
30 "use strict";
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
31 Object.defineProperty(exports, "__esModule", { value: true });
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
32 exports.setUp = void 0;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
33 const HISTORY_SECONDS = 60 * 60 * 4;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
34 const BUFFER_SECONDS = 300;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
35 function setUp(root, tempElement, dewPointElement) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
36 return __awaiter(this, void 0, void 0, function* () {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
37 const nowTS = new Date().getTime() / 1000;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
38 const startTS = nowTS - HISTORY_SECONDS;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
39 const query = new URL('?', location.href);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
40 query.pathname = query.pathname + '/recent';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
41 query.searchParams.set('seconds', String(HISTORY_SECONDS + BUFFER_SECONDS));
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
42 const results = yield fetch(query.href);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
43 if (!results.ok)
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
44 return;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
45 const data = yield results.json();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
46 const readings = data.readings;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
47 if (readings.length === 0)
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
48 return;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
49 root.classList.remove('plain');
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
50 root.classList.add('fancy');
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
51 const tempsF = readings.map(s => [s.sample_time, math_1.cToF(s.temp_c)]);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
52 const dewPointsF = readings.map(s => [s.sample_time, math_1.cToF(math_1.dewPointC(s.temp_c, s.rh_pct))]);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
53 setUpElement(tempElement, [startTS, nowTS], tempsF);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
54 setUpElement(dewPointElement, [startTS, nowTS], dewPointsF);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
55 });
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
56 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
57 exports.setUp = setUp;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
58 function setUpElement(element, timeRange, data) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
59 if (data.length === 0)
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
60 return;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
61 const chart = new Chart(element, timeRange, data);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
62 chart.resize();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
63 addEventListener('resize', () => chart.resize());
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
64 }
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
65 const Y_DEGREE_RANGE = 12;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
66 const LINE_WIDTH_PX = 2;
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
67 const GRID_WIDTH_PX = 0.5;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
68 const FONT_SIZE = '40px';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
69 class Chart {
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
70 constructor(element, timeRange, data, timezone) {
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
71 this.element = element;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
72 this.timeRange = timeRange;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
73 this.data = data;
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
74 this.timezone = timezone;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
75 this.canvas = document.createElement('canvas');
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
76 this.element.insertBefore(this.canvas, element.firstChild);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
77 const unit = element.getElementsByClassName('unit')[0];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
78 this.unit = unit && unit.textContent || '';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
79 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
80 resize() {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
81 const dpr = self.devicePixelRatio || 1;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
82 const [w, h] = this.size();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
83 const pxSize = [w * dpr, h * dpr];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
84 this.canvas.width = pxSize[0];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
85 this.canvas.height = pxSize[1];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
86 const ctx = this.canvas.getContext('2d');
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
87 ctx.clearRect(0, 0, pxSize[0], pxSize[1]);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
88 ctx.scale(dpr, dpr);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
89 this.redraw(ctx);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
90 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
91 redraw(ctx) {
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
92 ctx.strokeStyle = this.stroke();
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
93 ctx.lineJoin = 'round';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
94 ctx.lineWidth = LINE_WIDTH_PX;
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
95 ctx.font = `bold ${FONT_SIZE} ${this.font()}`;
28
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
96 const onScreenData = this.data.filter(([time, _]) => this.timeRange[0] <= time);
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
97 const yRange = calculateYRange(onScreenData.map(d => d[1]));
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
98 const [fullW, fullH] = this.size();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
99 const [xPad, yMargin] = this.measureMargin(ctx);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
100 const graphSize = [fullW - xPad, fullH];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
101 ctx.beginPath();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
102 for (const pt of this.data) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
103 const projected = project(pt, graphSize, this.timeRange, yRange);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
104 ctx.lineTo(...projected);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
105 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
106 ctx.stroke();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
107 ctx.beginPath();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
108 const lastPt = this.data[this.data.length - 1];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
109 const center = project(lastPt, graphSize, this.timeRange, yRange);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
110 ctx.ellipse(center[0], center[1], 1.5 * LINE_WIDTH_PX, 1.5 * LINE_WIDTH_PX, 0, 0, 2 * Math.PI);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
111 ctx.fillStyle = getComputedStyle(this.element).backgroundColor;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
112 ctx.fill();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
113 ctx.stroke();
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
114 this.drawGrid(ctx, graphSize, yRange);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
115 ctx.fillStyle = this.stroke();
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
116 ctx.textAlign = 'left';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
117 ctx.textBaseline = 'top';
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
118 ctx.fillText(`${niceNumber(lastPt[1])} ${this.unit}`, center[0] + 5 * LINE_WIDTH_PX, center[1] + yMargin);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
119 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
120 measureMargin(ctx) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
121 const bbox = ctx.measureText(`−99 ${this.unit}`);
28
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
122 const margin = 5 * LINE_WIDTH_PX +
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
123 bbox.width +
f817fa785c93 Make graph only consider visible points when setting range.
Paul Fisher <paul@pfish.zone>
parents: 19
diff changeset
124 16;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
125 return [margin, -31.5 / 2];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
126 }
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
127 drawGrid(ctx, size, yRange) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
128 ctx.save();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
129 ctx.lineCap = 'butt';
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
130 ctx.lineWidth = GRID_WIDTH_PX;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
131 this.drawTime(ctx, size);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
132 this.drawTemps(ctx, size, yRange);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
133 ctx.restore();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
134 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
135 drawTime(ctx, [w, h]) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
136 const minutes = minutesOf(this.timeRange, this.timezone);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
137 for (const [ts, hhmm] of minutes) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
138 const mins = Number(hhmm.split(':')[1]);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
139 let opacity;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
140 if (mins === 0) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
141 opacity = 1;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
142 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
143 else if (mins % 15 === 0) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
144 opacity = 0.5;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
145 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
146 else {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
147 continue;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
148 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
149 const x = project1D(ts, w, this.timeRange);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
150 ctx.save();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
151 ctx.globalAlpha = opacity;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
152 ctx.beginPath();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
153 ctx.moveTo(x, 0);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
154 ctx.lineTo(x, h);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
155 ctx.stroke();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
156 ctx.restore();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
157 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
158 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
159 drawTemps(ctx, [w, h], [yLo, yHi]) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
160 const lo = Math.floor(yLo);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
161 for (let deg = lo; deg < yHi; deg++) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
162 const ones = deg % 10;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
163 let opacity;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
164 if (ones === 0) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
165 opacity = 1;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
166 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
167 else if (ones === 5) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
168 opacity = 0.5;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
169 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
170 else {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
171 opacity = 0.15;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
172 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
173 const y = project1D(deg, h, [yHi, yLo]);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
174 ctx.save();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
175 ctx.globalAlpha = opacity;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
176 ctx.beginPath();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
177 ctx.moveTo(0, y);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
178 ctx.lineTo(w, y);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
179 ctx.stroke();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
180 ctx.restore();
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
181 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
182 }
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
183 size() {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
184 const cssSize = this.element.getBoundingClientRect();
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
185 return [cssSize.width, cssSize.height];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
186 }
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
187 stroke() {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
188 return getComputedStyle(this.element).color;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
189 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
190 font() {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
191 return getComputedStyle(this.element).fontFamily;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
192 }
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
193 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
194 function niceNumber(n) {
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
195 return Math.floor(n).toLocaleString('en-us').replace('-', '−');
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
196 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
197 const EDGE_FRACTION = 0.125;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
198 function calculateYRange(ys) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
199 const yMax = Math.max(...ys);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
200 const yMin = Math.min(...ys);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
201 const yMid = (yMin + yMax) / 2;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
202 const lastY = ys[ys.length - 1];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
203 const yLo = yMid - Y_DEGREE_RANGE / 2;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
204 const yProportion = Math.max(Math.min((lastY - yLo) / Y_DEGREE_RANGE, 1 - EDGE_FRACTION), EDGE_FRACTION);
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
205 const rangeLo = lastY - yProportion * Y_DEGREE_RANGE;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
206 return [rangeLo, rangeLo + Y_DEGREE_RANGE];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
207 }
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
208 function project(coord, size, xRange, yRange) {
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
209 const [x, y] = coord;
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
210 const [yMax, yMin] = yRange;
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
211 const [xSize, ySize] = size;
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
212 return [
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
213 project1D(x, xSize, xRange),
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
214 project1D(y, ySize, [yMin, yMax]),
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
215 ];
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
216 }
33
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
217 function project1D(coord, size, range) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
218 const [min, max] = range;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
219 const span = max - min;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
220 return (coord - min) / span * size;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
221 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
222 const MINUTE = 60;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
223 function minutesOf([start, end], zone) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
224 const formatter = new Intl.DateTimeFormat('sv', { timeZone: zone, hour: '2-digit', minute: '2-digit' });
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
225 const startSeconds = MINUTE * Math.floor(start / MINUTE);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
226 const result = [];
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
227 for (let t = startSeconds; t <= end; t += MINUTE) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
228 result.push([t, goodBitsOnly(formatter.format(new Date(t * 1000)))]);
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
229 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
230 return result;
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
231 }
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
232 function goodBitsOnly(s) {
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
233 return s.replace(/[^0-9 :-]/, '');
beedfa8eaa3f Add grid lines to the graph.
Paul Fisher <paul@pfish.zone>
parents: 28
diff changeset
234 }
19
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
235 });
47987502bf4c Add graph, make it public, and bump the version.
Paul Fisher <paul@pfish.zone>
parents:
diff changeset
236 //# sourceMappingURL=graph.js.map