From 31d9feedd11aaeea3235135327c3cd8c301bc989 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Tue, 9 Apr 2024 10:48:18 +0200
Subject: Add the hour of the day

---
 css/style.css |  4 ++++
 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;
-- 
cgit v1.2.3