From 6da12e14227c3d698e61db3d3d0162221a5e1a21 Mon Sep 17 00:00:00 2001 From: Nathan Bergey Date: Sun, 20 Jan 2019 23:45:25 -0500 Subject: [PATCH] Print sunrise and sunset times --- src/render.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/render.js b/src/render.js index cc82b18..1863904 100644 --- a/src/render.js +++ b/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