Mercurial > personal > weather-server
changeset 18:9d07dc5c3340
Make graph look nicer.
author | Paul Fisher <paul@pfish.zone> |
---|---|
date | Sat, 12 Oct 2019 21:02:02 -0400 |
parents | fdb874e0b270 |
children | 47987502bf4c |
files | weather_server/templates/location.html weather_server/typescript/app/graph.ts |
diffstat | 2 files changed, 23 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/weather_server/templates/location.html Sat Oct 12 20:40:11 2019 -0400 +++ b/weather_server/templates/location.html Sat Oct 12 21:02:02 2019 -0400 @@ -39,7 +39,7 @@ {% else %} <p id="big-question-mark">?</p> {% endif %} - <!-- --> + <!-- <script src="{{ url_for('static', filename='amd/mad.js') }}"></script> <script>new MADRegistry().install(self);</script> <script src="{{ url_for('static', filename='graph.js') }}"></script>
--- a/weather_server/typescript/app/graph.ts Sat Oct 12 20:40:11 2019 -0400 +++ b/weather_server/typescript/app/graph.ts Sat Oct 12 21:02:02 2019 -0400 @@ -2,7 +2,7 @@ import { cToF, dewPointC } from './math'; /** The amount of time we will draw on the graph. */ -const HISTORY_SECONDS = 86400; +const HISTORY_SECONDS = 60 * 60 * 4; /** The amount of buffer room we will request before HISTORY_SECONDS. */ const BUFFER_SECONDS = 300; @@ -44,15 +44,17 @@ element: HTMLElement, timeRange: [number, number], data: Point[]) { if (data.length === 0) return; const chart = new Chart(element, timeRange, data); - chart.resize(); - addEventListener('resize', () => chart.resize()); + requestAnimationFrame(() => { + chart.resize(); + addEventListener('resize', () => chart.resize()); + }); } /** The number of degrees that the graph shows vertically. */ -const Y_DEGREE_RANGE = 16; +const Y_DEGREE_RANGE = 10; /** The width of the space on the right side of the graph. */ -const X_PADDING_PX = 40; +const X_PADDING_PX = 80; const LINE_WIDTH_PX = 2; @@ -109,14 +111,23 @@ ctx.ellipse( center[0], center[1], - 2 * LINE_WIDTH_PX, - 2 * LINE_WIDTH_PX, + 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(); + + const family = getComputedStyle(this.element).fontFamily!; + + ctx.fillStyle = stroke; + ctx.textBaseline = 'middle'; + ctx.textAlign = 'left'; + ctx.font = `bold 30px ${family}`; + ctx.fillText( + niceNumber(lastPt[1]), center[0] + 5 * LINE_WIDTH_PX, center[1]); } private size(): Point { @@ -125,6 +136,10 @@ } } +function niceNumber(n: number) { + 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;