From 4b51a3014bacd9217fe97a5ba9b00f7d59825b90 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 29 Oct 2024 23:00:50 +0100
Subject: [PATCH] Session UI: fix day/year labels (#16919)

---
 assets/js/components/Sessions/CostHistoryChart.vue   | 12 ++++++++----
 assets/js/components/Sessions/EnergyHistoryChart.vue | 12 ++++++++----
 assets/js/views/Sessions.vue                         |  1 +
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
index b09dbe06c..b7586afcc 100644
--- a/assets/js/components/Sessions/CostHistoryChart.vue
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -208,6 +208,9 @@ export default {
 			});
 		},
 		options() {
+			// capture vue component this to be used in chartjs callbacks
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			const vThis = this;
 			return {
 				...commonOptions,
 				locale: this.$i18n?.locale,
@@ -285,10 +288,11 @@ export default {
 						grid: { display: false },
 						ticks: {
 							color: colors.muted,
-							callback: (value) =>
-								this.period === PERIODS.YEAR
-									? this.fmtMonth(new Date(this.year, value, 1), true)
-									: value,
+							callback: function (value) {
+								return vThis.period === PERIODS.YEAR
+									? vThis.fmtMonth(new Date(vThis.year, value, 1), true)
+									: this.getLabelForValue(value);
+							},
 						},
 					},
 					y: {
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index cf69f2eeb..20814479d 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -145,6 +145,9 @@ export default {
 			}));
 		},
 		options() {
+			// capture vue component this to be used in chartjs callbacks
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			const vThis = this;
 			return {
 				...commonOptions,
 				locale: this.$i18n?.locale,
@@ -209,10 +212,11 @@ export default {
 						grid: { display: false },
 						ticks: {
 							color: colors.muted,
-							callback: (value) =>
-								this.period === PERIODS.YEAR
-									? this.fmtMonth(new Date(this.year, value, 1), true)
-									: value,
+							callback: function (value) {
+								return vThis.period === PERIODS.YEAR
+									? vThis.fmtMonth(new Date(vThis.year, value, 1), true)
+									: this.getLabelForValue(value);
+							},
 						},
 					},
 					y: {
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 5e8c66208..6b74a777b 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -192,6 +192,7 @@
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/cablecharge";
 import "@h2d2/shopicons/es/regular/car3";
+import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/sun";
 import formatter, { POWER_UNIT } from "../mixins/formatter";
 import api from "../api";