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`