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

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

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	4af79d69b12e

comparison

equal deleted inserted replaced

-:2faf3499a226
+:beedfa8eaa3f
 });
 };
 define("math", ["require", "exports"], function (require, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dewPointC = exports.cToF = void 0;
 function cToF(tempC) {
 return tempC * 9 / 5 + 32;
 }
 exports.cToF = cToF;
 const MAGNUS_B = 17.62;
 exports.dewPointC = dewPointC;
 });
 define("graph", ["require", "exports", "math"], function (require, exports, math_1) {
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setUp = void 0;
 const HISTORY_SECONDS = 60 * 60 * 4;
 const BUFFER_SECONDS = 300;
 function setUp(root, tempElement, dewPointElement) {
 return __awaiter(this, void 0, void 0, function* () {
 const nowTS = new Date().getTime() / 1000;
 return;
 const chart = new Chart(element, timeRange, data);
 chart.resize();
 addEventListener('resize', () => chart.resize());
 }
-const Y_DEGREE_RANGE = 10;
+const Y_DEGREE_RANGE = 12;
 const LINE_WIDTH_PX = 2;
+const GRID_WIDTH_PX = 0.5;
 const FONT_SIZE = '40px';
 class Chart {
-constructor(element, timeRange, data) {
+constructor(element, timeRange, data, timezone) {
 this.element = element;
 this.timeRange = timeRange;
 this.data = data;
+this.timezone = timezone;
 this.canvas = document.createElement('canvas');
 this.element.insertBefore(this.canvas, element.firstChild);
 const unit = element.getElementsByClassName('unit')[0];
 this.unit = unit && unit.textContent || '';
 }
 ctx.clearRect(0, 0, pxSize[0], pxSize[1]);
 ctx.scale(dpr, dpr);
 this.redraw(ctx);
 }
 redraw(ctx) {
-const stroke = getComputedStyle(this.element).color;
+ctx.strokeStyle = this.stroke();
-const family = getComputedStyle(this.element).fontFamily;
-ctx.strokeStyle = stroke;
 ctx.lineJoin = 'round';
 ctx.lineWidth = LINE_WIDTH_PX;
-ctx.font = `bold ${FONT_SIZE} ${family}`;
+ctx.font = `bold ${FONT_SIZE} ${this.font()}`;
 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];
 const center = project(lastPt, graphSize, this.timeRange, yRange);
 ctx.ellipse(center[0], center[1], 1.5 * LINE_WIDTH_PX, 1.5 * LINE_WIDTH_PX, 0, 0, 2 * Math.PI);
 ctx.fillStyle = getComputedStyle(this.element).backgroundColor;
 ctx.fill();
 ctx.stroke();
-ctx.fillStyle = stroke;
+this.drawGrid(ctx, graphSize, yRange);
+ctx.fillStyle = this.stroke();
 ctx.textAlign = 'left';
 ctx.textBaseline = 'top';
 ctx.fillText(`${niceNumber(lastPt[1])} ${this.unit}`, center[0] + 5 * LINE_WIDTH_PX, center[1] + yMargin);
 }
 measureMargin(ctx) {
 const margin = 5 * LINE_WIDTH_PX +
 bbox.width +
 16;
 return [margin, -31.5 / 2];
 }
+drawGrid(ctx, size, yRange) {
+ctx.save();
+ctx.lineCap = 'butt';
+ctx.lineWidth = GRID_WIDTH_PX;
+this.drawTime(ctx, size);
+this.drawTemps(ctx, size, yRange);
+ctx.restore();
+}
+drawTime(ctx, [w, h]) {
+const minutes = minutesOf(this.timeRange, this.timezone);
+for (const [ts, hhmm] of minutes) {
+const mins = Number(hhmm.split(':')[1]);
+let opacity;
+if (mins === 0) {
+opacity = 1;
+}
+else if (mins % 15 === 0) {
+opacity = 0.5;
+}
+else {
+continue;
+}
+const x = project1D(ts, w, this.timeRange);
+ctx.save();
+ctx.globalAlpha = opacity;
+ctx.beginPath();
+ctx.moveTo(x, 0);
+ctx.lineTo(x, h);
+ctx.stroke();
+ctx.restore();
+}
+}
+drawTemps(ctx, [w, h], [yLo, yHi]) {
+const lo = Math.floor(yLo);
+for (let deg = lo; deg < yHi; deg++) {
+const ones = deg % 10;
+let opacity;
+if (ones === 0) {
+opacity = 1;
+}
+else if (ones === 5) {
+opacity = 0.5;
+}
+else {
+opacity = 0.15;
+}
+const y = project1D(deg, h, [yHi, yLo]);
+ctx.save();
+ctx.globalAlpha = opacity;
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(w, y);
+ctx.stroke();
+ctx.restore();
+}
+}
 size() {
 const cssSize = this.element.getBoundingClientRect();
 return [cssSize.width, cssSize.height];
 }
+stroke() {
+return getComputedStyle(this.element).color;
+}
+font() {
+return getComputedStyle(this.element).fontFamily;
+}
 }
 function niceNumber(n) {
-return Math.round(n).toLocaleString('en-us').replace('-', '−');
+return Math.floor(n).toLocaleString('en-us').replace('-', '−');
 }
 const EDGE_FRACTION = 0.125;
 function calculateYRange(ys) {
 const yMax = Math.max(...ys);
 const yMin = Math.min(...ys);
 const rangeLo = lastY - yProportion * Y_DEGREE_RANGE;
 return [rangeLo, rangeLo + Y_DEGREE_RANGE];
 }
 function project(coord, size, xRange, yRange) {
 const [x, y] = coord;
-const [xMin, xMax] = xRange;
+const [yMax, yMin] = yRange;
-const xSpan = xMax - xMin;
-const [yMin, yMax] = yRange;
-const ySpan = yMax - yMin;
 const [xSize, ySize] = size;
 return [
-(x - xMin) / xSpan * xSize,
+project1D(x, xSize, xRange),
-(yMax - y) / ySpan * ySize,
+project1D(y, ySize, [yMin, yMax]),
 ];
+}
+function project1D(coord, size, range) {
+const [min, max] = range;
+const span = max - min;
+return (coord - min) / span * size;
+}
+const MINUTE = 60;
+function minutesOf([start, end], zone) {
+const formatter = new Intl.DateTimeFormat('sv', { timeZone: zone, hour: '2-digit', minute: '2-digit' });
+const startSeconds = MINUTE * Math.floor(start / MINUTE);
+const result = [];
+for (let t = startSeconds; t <= end; t += MINUTE) {
+result.push([t, goodBitsOnly(formatter.format(new Date(t * 1000)))]);
+}
+return result;
+}
+function goodBitsOnly(s) {
+return s.replace(/[^0-9 :-]/, '');
 }
 });
 //# sourceMappingURL=graph.js.map