# HG changeset patch
# User Paul Fisher <paul@pfish.zone>
# Date 1570928522 14400
# Node ID 9d07dc5c33408593efeee3cce002ed6b15da9376
# Parent  fdb874e0b2707b497c40ece78f78fc95d3be6bf3
Make graph look nicer.

diff -r fdb874e0b270 -r 9d07dc5c3340 weather_server/templates/location.html
--- 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>
diff -r fdb874e0b270 -r 9d07dc5c3340 weather_server/typescript/app/graph.ts
--- 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;