diff --git a/src/main.js b/src/main.js index 77152ed9..69dd267f 100644 --- a/src/main.js +++ b/src/main.js @@ -538,11 +538,63 @@ class MiniGraphCard extends LitElement { return svg`${items}`; } + renderTimeLines() { + const { height, hours_to_show, show } = this.config; + + if (!show.time_line) return; + const graphWidth = 500; + const minutesInGraph = hours_to_show * 60; + + const timeRegex = /^\d{1,2}:\d{2}$/; + const lines = []; + const endTime = new Date(); + show.time_line.forEach((time) => { + if (timeRegex.test(time)) { + const [hour, minutes] = time.split(':'); + let diffInMinutes = 0; + let day = 0; + while (diffInMinutes < minutesInGraph) { + const startTime = this.createStartTime(day, hour, minutes); + diffInMinutes = Math.floor((endTime - startTime) / 1000 / 60); + if (diffInMinutes > 0 && diffInMinutes < minutesInGraph) { + const startDate = new Date(startTime); + const x = graphWidth - graphWidth / minutesInGraph * diffInMinutes; + lines.push(svg` + + ${this.isMidnight(hour, minutes) + ? `${this.zeroPad(startDate.getDate())}-${this.zeroPad(startDate.getMonth() + 1)}` + : time}`); + } + day += 1; + } + } + }); + + return svg`${lines}`; + } + + zeroPad(value) { + return String(value).padStart(2, '0'); + } + + isMidnight(hour, minutes) { + return (hour === '0' || hour === '00') && minutes === '00'; + } + + createStartTime(day, hour, minute) { + const userTime = new Date(); + userTime.setDate(userTime.getDate() - day); + return userTime.setHours(hour, minute); + } + renderSvg() { const { height } = this.config; return svg` e.stopPropagation()}> + ${this.renderTimeLines()} ${this.renderSvgGradient(this.gradient)}