diff options
| -rw-r--r-- | css/style.css | 4 | ||||
| -rw-r--r-- | js/index.js | 17 |
2 files changed, 18 insertions, 3 deletions
diff --git a/css/style.css b/css/style.css index f7b9eaa..2f9945d 100644 --- a/css/style.css +++ b/css/style.css @@ -59,6 +59,10 @@ footer{ font-size: 8px; text-anchor: middle; } +.time-label{ + font-size: 6px; + text-anchor: middle; +} .graph-line{ stroke: lightgrey; } diff --git a/js/index.js b/js/index.js index 415518f..2e6345b 100644 --- a/js/index.js +++ b/js/index.js @@ -114,7 +114,6 @@ function weather2description(weather){ } function processDaily( response_obj ) { - console.log(response_obj); let data = response_obj.daily; // Our variables are here: @@ -173,8 +172,8 @@ function processHourly(data){ let xsize = 300; let xmargin = 15; - let ysize = 90; - let ymargin = 10; + let ysize = 120; + let ymargin = 30; for( let i in temperature ){ points.push( [project(i, 0, temperature.length, xmargin, xsize-xmargin), @@ -200,6 +199,17 @@ function processHourly(data){ `${WEATHER2ICON[WMO_CONVERTER[weathercode[i]]]}</text>`; } + let times = "" + for( let i in points){ + let t = new Date(time[i]); + let hours = t.getHours(); + let mins = t.getMinutes(); + if (hours < 10) { hours = `0${hours}` } else { hours = `${hours}` } + if (mins < 10) { mins = `0${mins}` } else { mins = `${mins}` } + labels += `<text transform="translate(${points[i][0]}, ${ysize-ymargin/2}) rotate(-90)" + class="time-label" dy="0.4em">${hours}:${mins}</text>`; + } + let hourly_element = document.createElement("article"); hourly_element.setAttribute("class", "hourly-forecast"); @@ -209,6 +219,7 @@ function processHourly(data){ ${dots} ${labels} ${icons} + ${times} </svg> `; return hourly_element; |