Update ElectricityTariffCard.vue - fix: PriceChart last entry ends midnight regardless of price data resolution (#807)

* Update ElectricityTariffCard.vue - fix: PriceChart last entry ends midnight regardless of price data resolution

* Update ElectricityTariffCard.vue - timstamp of last entry

use diff of timestamps

* Enhance tick label formatting to show "morgen"

Add callback to format tick labels based on date.

* Fix indentation and formatting in ElectricityTariffCard.vue

* Update src/components/status/ElectricityTariffCard.vue use backticks

Co-authored-by: benderl <[email protected]>

* Refactor date comparison for tomorrow check

* Update src/components/status/ElectricityTariffCard.vue

Co-authored-by: benderl <[email protected]>

* restructure changes

* fix locale

always use `undefined` as locale to use client time format

---------

Co-authored-by: benderl <[email protected]>
Co-authored-by: Lutz Bender <[email protected]>

Author: tpd-opitz

src/components/status/ElectricityTariffCard.vue

@@ -137,6 +137,7 @@ export default {
               font: {
                 size: 12,
               },
+              callback: this.formatTickLabel,
               // color: tickColor,
               maxTicksLimit: 0,
             },
@@ -198,10 +199,17 @@ export default {
             price: value * 100000,
           });
         }
-        // repeat last dataset with 59min 59sec offset
+        // repeat last dataset
         const lastData = myData.slice(-1)[0];
+        // midnight as default
+        let nextTimestamp = this.endOfToday;
+        if (myData.length > 1) {
+          // same offset minus 1ms as the last one
+          const previousData = myData.slice(-2, -1)[0];
+          nextTimestamp = lastData.timestamp + lastData.timestamp - previousData.timestamp - 1;
+        }
         myData.push({
-          timestamp: lastData.timestamp + (60 * 60 - 1) * 1000,
+          timestamp: nextTimestamp,
           price: lastData.price,
         });
       }
@@ -215,12 +223,24 @@ export default {
       }
       return this.formatNumber(this.chartDataObject.datasets[0].data[0].price || 0, 2);
     },
+    endOfToday() {
+      return new Date().setHours(23, 59, 59, 999).valueOf();
+    },
     baseTopic: {
       get() {
         return "openWB/optional/et";
       },
     },
   },
+  methods: {
+    formatTickLabel(timeValue) {
+      const date = new Date(timeValue);
+      // Prüfe ob das Datum zum nächsten Tag gehört
+      const isTomorrow = this.endOfToday < date;
+      // Zeige nur den Zeitwert, wenn es nicht morgen ist
+      return `${isTomorrow ? date.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit" }) + " " : ""}${date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`;
+    },
+  },
 };
 </script>