Print sunrise and sunset times

src/render.js

@@ -66,13 +66,24 @@ class Chart {
             .text(label)
     }
 
-    set_xAxisTic(value, label) {
+    set_weekday(value, label) {
         this.canvas.append('text').attr('class', 'axis-label')
             .attr('text-anchor', 'middle').attr('dominant-baseline', 'alphabetic')
             .attr('x', this.xRange(value)).attr('y', this.offset - 5)
             .text(label)
     }
 
+    set_xAxisTic(value, label, anchor) {
+        const x = this.xRange(value)
+        this.canvas.append('line').attr('class', 'axis')
+            .attr('x1', x).attr('y1', this.height - this.margin.bottom)
+            .attr('x2', x).attr('y2', this.height - this.margin.bottom + 2)
+        this.canvas.append('text').attr('class', 'axis-label')
+            .attr('text-anchor', anchor).attr('dominant-baseline', 'hanging')
+            .attr('x', x).attr('y', this.height - this.margin.bottom + 1)
+            .text(label)
+    }
+
     draw_yGrid(value, style) {
         this.canvas.append('line').attr('class', style)
         .attr('x1', this.xRange(value)).attr('y1', this.offset)
@@ -141,6 +152,16 @@ export function render_astronomy(canvas, height, offset, data) {
             'date': sunEphem.sunrise,
             'alt': 0
         })
+        chart.set_xAxisTic(
+            sunEphem.sunrise,
+            sunEphem.sunrise.toLocaleTimeString('en-US', {hour12: true, hour: 'numeric', minute: '2-digit'}).replace('AM',''),
+            'end'
+        )
+        chart.set_xAxisTic(
+            sunEphem.sunset,
+            sunEphem.sunset.toLocaleTimeString('en-US', {hour12: true, hour: 'numeric', minute: '2-digit'}).replace('PM',''),
+            'begining'
+        )
         for (var hour = 0; hour < 24; hour++) {
             const datetime = new Date(year, month, day, hour, 0, 0)
             const sun = SunCalc.getPosition(datetime, lat, lon)
@@ -173,7 +194,7 @@ export function render_astronomy(canvas, height, offset, data) {
     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.set_weekday(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