diff --git a/src/render.js b/src/render.js index 2ab2b76..2c5679f 100644 --- a/src/render.js +++ b/src/render.js @@ -1,33 +1,110 @@ var d3 = require('d3') + export function render(canvas, data) { - let xWidth = canvas.node().getBoundingClientRect().width - let yHeight = canvas.node().getBoundingClientRect().height - let xMargin = 50 - let yMargin = 25 - let nElements = data.startTimes.length + const xWidth = canvas.node().getBoundingClientRect().width + const yHeight = canvas.node().getBoundingClientRect().height + const xMargin = 50 + const yMargin = 25 + const nElements = data.startTimes.length - let beginTime = new Date( + const beginTime = new Date( data.startTimes[0].getFullYear(), data.startTimes[0].getMonth(), data.startTimes[0].getDate(), 0,0,0 ) - let xRange = d3.scaleTime() + const xRange = d3.scaleTime() .domain([beginTime, data.endTimes[nElements - 1]]) .range([xMargin, xWidth]) - let yRange = d3.scaleLinear() + const yRange = d3.scaleLinear() .domain([-15, 45]) .range([yHeight - yMargin, 0]) - let line = d3.line() + const xLine = function (location, style) { + canvas.append('line') + .attr('class', style) + .attr('x1', xMargin) + .attr('x2', xWidth) + .attr('y1', yRange(location)) + .attr('y2', yRange(location)) + } + const yLine = function (date, style) { + canvas.append('line') + .attr('class', style) + .attr('x1', xRange(date)) + .attr('x2', xRange(date)) + .attr('y1', 0) + .attr('y2', yHeight - yMargin) + } + const xAxisLabel = function (date) { + canvas.append('text') + .attr('class', 'axis-label') + .attr('text-anchor', 'middle') + .attr('dominant-baseline', 'alphabetic') + .attr('x', xRange(date)) + .attr('y', yHeight - yMargin + 12) + .text(date.toLocaleDateString('en-US', {weekday: 'long'})) + } + const yAxisLabel = function (value) { + canvas.append('text') + .attr('class', 'axis-label') + .attr('text-anchor', 'end') + .attr('dominant-baseline', 'middle') + .attr('x', xMargin - 5) + .attr('y', yRange(value)) + .text(value + ' °C') + } + + const line = d3.line() .x(function(d) { return xRange(d.date) }) .y(function(d) { return yRange(d.temp) }) .curve(d3.curveBasis) + //////////////////////////////////////////////////////////////////////////////////////////////// + // Paint + + yLine(Date.now(), 'now') + for (let time of data.startTimes) { + if (time.getHours() === 0) { + yLine(time, 'midnight') + } + if (time.getHours() === 12) { + yLine(time, 'noon') + xAxisLabel(time) + } + } + + xLine(-10, 'guide') + xLine( 0, 'zero') + xLine( 12, 'guide') + xLine( 22, 'guide') + xLine( 30, 'hot') + xLine( 40, 'guide') + yAxisLabel(-10) + yAxisLabel(0) + yAxisLabel(12) + yAxisLabel(22) + yAxisLabel(30) + yAxisLabel(40) + canvas.append('path') .data([data.temperature]) .attr('class', 'data') .attr('d', line) + + // Axis Lines + canvas.append('line') + .attr('class', 'axis') + .attr('x1', xMargin) + .attr('x2', xMargin) + .attr('y1', 0) + .attr('y2', yHeight - yMargin) + canvas.append('line') + .attr('class', 'axis') + .attr('x1', xMargin) + .attr('x2', xWidth) + .attr('y1', yHeight - yMargin) + .attr('y2', yHeight - yMargin) } diff --git a/src/style.sass b/src/style.sass index 4cc1283..397c9fa 100644 --- a/src/style.sass +++ b/src/style.sass @@ -47,3 +47,36 @@ path, line path.data stroke: #f00 stroke-width: 2px + +line.now + stroke: #f5f + stroke-width: 1px + +line.midnight + stroke: #ccc + stroke-width: 1px + +line.noon + stroke: #ddd + stroke-width: 1px + stroke-dasharray: 4,8 + +line.zero + stroke: #25f + stroke-width: 0.7px + +line.hot + stroke: #f52 + stroke-width: 0.7px + +line.guide + stroke: #ccc + stroke-width: 0.5px + stroke-dasharray: 4,8 + +line.axis + stroke: #000 + stroke-width: 1px + +text.axis-label + font: normal 10px sans-serif