Shade sun, night, and twilight

src/render.js

@@ -82,6 +82,15 @@ class Chart {
         .attr('x1', this.margin.left).attr('y1', this.yRange(value))
         .attr('x2',  this.width).attr('y2', this.yRange(value))
     }
+
+    draw_box(x1, x2, style) {
+        const x = this.xRange(x1)
+        const width = this.xRange(x2) - x
+        this.canvas.append('rect').attr('class', style)
+        .attr('x', x).attr('y', this.offset)
+        .attr('width', width)
+        .attr('height', this.height - this.offset - this.margin.bottom)
+    }
 }
 
 
@@ -99,7 +108,7 @@ export function render_astronomy(canvas, height, offset, data) {
 
     chart.draw_yAxisTitle('Altitude')
     chart.set_yAxisTic( 0,  '0°')
-    chart.set_yAxisTic(45 * (Math.PI/180), '45°')
+    chart.set_yAxisTic(26.6 * (Math.PI/180), '27°')
     chart.set_yAxisTic(75 * (Math.PI/180), '75°')
 
     const year = chart.beginTime.getFullYear()
@@ -110,18 +119,24 @@ export function render_astronomy(canvas, height, offset, data) {
     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()) {
-            const midnight = new Date(year, month, day, 0, 0, 0)
             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

src/style.sass

@@ -49,7 +49,8 @@ path.data
     stroke-width: 2px
 
 path.sun
-    stroke: #ff0
+    fill: #ffffce
+    stroke: #ffff64
     stroke-width: 1px
 
 path.moon
@@ -67,7 +68,7 @@ line.midnight
 line.noon
     stroke: #ddd
     stroke-width: 1px
-    stroke-dasharray: 4,8
+    stroke-dasharray: 3,5
 
 line.zero
     stroke: #25f
@@ -86,5 +87,11 @@ line.axis
     stroke: #000
     stroke-width: 1px
 
+rect.night
+    fill: #ddddeb
+
+rect.twilight
+    fill: #ebebf7
+
 text.axis-label
     font: normal 10px sans-serif