Refactor drawing night/twilight boxes

src/render.js

@@ -1,6 +1,8 @@
 var d3 = require('d3')
 var SunCalc = require('suncalc')
 
+const lat = 39.9243509
+const lon = -75.1696126
 
 class Chart {
     constructor(canvas, height, width, margin, offset, data, yrange) {
@@ -94,6 +96,19 @@ class Chart {
 }
 
 
+const drawNights = function (chart) {
+    const year = chart.beginTime.getFullYear()
+    const month = chart.beginTime.getMonth()
+    for (var day = chart.beginTime.getDate(); day <= chart.endTime.getDate(); day++) {
+        const midnight = new Date(year, month, day, 0, 0, 0)
+        const sunEphem = SunCalc.getTimes(new Date(year, month, day, 12, 0, 0), lat, lon)
+        chart.draw_box(midnight, sunEphem.nauticalDawn, 'night')
+        chart.draw_box(sunEphem.nauticalDawn, sunEphem.sunrise, 'twilight')
+        chart.draw_box(sunEphem.sunset, sunEphem.nauticalDusk, 'twilight')
+        chart.draw_box(sunEphem.nauticalDusk, new Date(year, month, day, 24, 0, 0), 'night')
+    }
+}
+
 /**
  * Sun and moon chart
  */
@@ -106,37 +121,22 @@ export function render_astronomy(canvas, height, offset, data) {
     const yrange = [0, 75 * (Math.PI/180)]
     const chart = new Chart(canvas, height, fullWidth, margins, offset, data, yrange)
 
-    chart.draw_yAxisTitle('Altitude')
     chart.set_yAxisTic( 0,  '0°')
     chart.set_yAxisTic(26.6 * (Math.PI/180), '27°')
     chart.set_yAxisTic(75 * (Math.PI/180), '75°')
 
+    drawNights(chart)
+
     const year = chart.beginTime.getFullYear()
     const month = chart.beginTime.getMonth()
 
     let sunData = []
-    const lat = 39.9243509
-    const lon = -75.1696126
     for (var day = chart.beginTime.getDate(); day <= chart.endTime.getDate(); day++) {
-        const noon = new Date(year, month, day, 12, 0, 0)
         const midnight = new Date(year, month, day, 0, 0, 0)
-        chart.set_xAxisTic(noon, noon.toLocaleDateString('en-US', {weekday: 'long'}))
-        chart.draw_yGrid(noon, 'noon')
-
-        // Don't draw the first midnight line because that's also our yAxis line
-        if (day != chart.beginTime.getDate()) {
-            chart.draw_yGrid(midnight, 'midnight')
-        }
 
         // Solar Ephemeris
         let todaysSun = []
         const sunEphem = SunCalc.getTimes(new Date(year, month, day, 1, 0, 0), lat, lon)
-
-        chart.draw_box(midnight, sunEphem.nauticalDawn, 'night')
-        chart.draw_box(sunEphem.nauticalDawn, sunEphem.sunrise, 'twilight')
-        chart.draw_box(sunEphem.sunset, sunEphem.nauticalDusk, 'twilight')
-        chart.draw_box(sunEphem.nauticalDusk, new Date(year, month, day, 24, 0, 0), 'night')
-
         todaysSun.push({
             'date': sunEphem.sunrise,
             'alt': 0
@@ -170,6 +170,18 @@ export function render_astronomy(canvas, height, offset, data) {
         .attr('class', 'sun')
         .attr('d', line)
 
+    for (var day = chart.beginTime.getDate(); day <= chart.endTime.getDate(); day++) {
+        const noon = new Date(year, month, day, 12, 0, 0)
+        const midnight = new Date(year, month, day, 0, 0, 0)
+        chart.set_xAxisTic(noon, noon.toLocaleDateString('en-US', {weekday: 'long'}))
+        chart.draw_yGrid(noon, 'noon')
+
+        // Don't draw the first midnight line because that's also our yAxis line
+        if (day != chart.beginTime.getDate()) {
+            chart.draw_yGrid(midnight, 'midnight')
+        }
+    }
+
     chart.draw_yAxisLine()
     chart.draw_xAxisLineTop()
     chart.draw_xAxisLineBottom()
@@ -193,6 +205,8 @@ export function render_temperature(canvas, height, offset, data) {
         .y(function(d) { return chart.yRange(d.temp) })
         .curve(d3.curveBasis)
 
+    drawNights(chart)
+
     chart.draw_yAxisTitle('Temperature')
     chart.set_yAxisTic(-10, '-10 °C')
     chart.draw_xGrid(  -10, 'guide')

src/style.sass

@@ -65,7 +65,7 @@ line.now
     stroke-width: 1px
 
 line.midnight
-    stroke: #ccc
+    stroke: #72729d
     stroke-width: 1px
 
 line.noon