Forecast UI: first step

assets/css/app.css

@@ -47,6 +47,8 @@
 	--evcc-pv: var(--evcc-dark-green);
 	--evcc-battery: var(--evcc-darker-green);
 	--evcc-export: var(--evcc-yellow);
+	--evcc-price: #ff912fff;
+	--evcc-co2: #00916eff;
 	--evcc-background: var(--bs-gray-bright);
 	--evcc-box: var(--bs-white);
 	--evcc-box-border: var(--bs-gray-brighter);
@@ -165,6 +167,14 @@ h5 {
 	color: var(--bs-primary) !important;
 }
 
+.text-price {
+	color: var(--evcc-price) !important;
+}
+
+.text-co2 {
+	color: var(--evcc-co2) !important;
+}
+
 a {
 	color: var(--bs-primary);
 }

assets/js/colors.js

@@ -15,9 +15,10 @@ const colors = reactive({
   grid: null,
   co2PerKWh: null,
   pricePerKWh: null,
-  price: "#FF912FFF",
-  co2: "#00916EFF",
+  price: null,
+  co2: null,
   background: null,
+  light: null,
   selfPalette: ["#0FDE41FF", "#FFBD2FFF", "#FD6158FF", "#03C1EFFF", "#0F662DFF", "#FF922EFF"],
   palette: [
     "#03C1EFFF",
@@ -35,29 +36,38 @@ const colors = reactive({
   ],
 });
 
+export const dimColor = (color) => {
+  return color.toLowerCase().replace(/ff$/, "20");
+};
+
+export const lighterColor = (color) => {
+  return color.toLowerCase().replace(/ff$/, "aa");
+};
+
+export const fullColor = (color) => {
+  return color.toLowerCase().replace(/20$/, "ff");
+};
+
 function updateCssColors() {
   const style = window.getComputedStyle(document.documentElement);
   colors.text = style.getPropertyValue("--evcc-default-text");
   colors.muted = style.getPropertyValue("--bs-gray-medium");
   colors.border = style.getPropertyValue("--bs-border-color-translucent");
   colors.self = style.getPropertyValue("--evcc-self");
   colors.grid = style.getPropertyValue("--evcc-grid");
+  colors.price = style.getPropertyValue("--evcc-price");
+  colors.co2 = style.getPropertyValue("--evcc-co2");
   colors.background = style.getPropertyValue("--evcc-background");
   colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium");
   colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium");
+  colors.light = style.getPropertyValue("--bs-gray-light");
 }
 
 // update colors on theme change
 const darkModeMatcher = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
 darkModeMatcher?.addEventListener("change", updateCssColors);
+// initialize colors
 updateCssColors();
-
-export const dimColor = (color) => {
-  return color.toLowerCase().replace(/ff$/, "20");
-};
-
-export const fullColor = (color) => {
-  return color.toLowerCase().replace(/20$/, "ff");
-};
+window.requestAnimationFrame(updateCssColors);
 
 export default colors;

assets/js/components/Energyflow/Energyflow.vue

@@ -83,8 +83,15 @@
 							icon="sun"
 							:power="pvProduction"
 							:powerTooltip="pvTooltip"
+							:details="solarForecast"
+							:detailsFmt="forecastFmt"
+							:detailsTooltip="forecastTooltip(solarForecast)"
+							:detailsInactive="solarForecast === 0"
+							:detailsIcon="solarForecast !== undefined ? 'forecast' : undefined"
+							:detailsClickable="solarForecast !== undefined"
 							:powerUnit="powerUnit"
 							data-testid="energyflow-entry-production"
+							@details-clicked="openForecastModal"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
@@ -229,7 +236,7 @@ import AnimatedNumber from "../AnimatedNumber.vue";
 import settings from "../../settings";
 import { CO2_TYPE } from "../../units";
 import collector from "../../mixins/collector";
-
+import { energyByDay } from "../../utils/forecast";
 export default {
 	name: "Energyflow",
 	components: {
@@ -266,6 +273,7 @@ export default {
 		prioritySoc: { type: Number },
 		bufferSoc: { type: Number },
 		bufferStartSoc: { type: Number },
+		forecast: { type: Object, default: () => ({}) },
 	},
 	data: () => {
 		return { detailsOpen: false, detailsCompleteHeight: null, ready: false };
@@ -381,6 +389,11 @@ export default {
 			}
 			return this.fmtPricePerKWh(this.batteryGridChargeLimit, this.currency, true);
 		},
+		solarForecast() {
+			const slots = this.forecast.solar || [];
+			if (slots.length === 0) return undefined;
+			return energyByDay(slots, 0);
+		},
 	},
 	watch: {
 		pvConfigured() {
@@ -418,6 +431,12 @@ export default {
 			}
 			return result;
 		},
+		forecastTooltip(value) {
+			if (value !== null) {
+				return [this.$t("main.energyflow.forecastTooltip")];
+			}
+			return [];
+		},
 		detailsValue(price, co2) {
 			if (this.co2Available) {
 				return co2;
@@ -430,6 +449,12 @@ export default {
 			}
 			return this.fmtPricePerKWh(value, this.currency, true);
 		},
+		forecastFmt(value) {
+			if (value === null) {
+				return "";
+			}
+			return `${this.fmtWh(value, POWER_UNIT.KW)}`;
+		},
 		kw: function (watt) {
 			return this.fmtW(watt, this.powerUnit);
 		},
@@ -447,6 +472,10 @@ export default {
 			);
 			modal.show();
 		},
+		openForecastModal() {
+			const modal = Modal.getOrCreateInstance(document.getElementById("forecastModal"));
+			modal.show();
+		},
 		dischargePower(power) {
 			return Math.abs(Math.max(0, power));
 		},

assets/js/components/Energyflow/EnergyflowEntry.vue

@@ -13,12 +13,19 @@
 				<div
 					ref="details"
 					class="fw-normal"
-					:class="{ 'text-decoration-underline': detailsClickable }"
+					:class="{
+						'text-decoration-underline': detailsClickable,
+						'evcc-gray': detailsInactive,
+					}"
 					data-testid="energyflow-entry-details"
 					data-bs-toggle="tooltip"
 					:tabindex="detailsClickable ? 0 : undefined"
 					@click="detailsClicked"
 				>
+					<ForecastIcon
+						v-if="detailsIcon === 'forecast'"
+						class="ms-2 me-1 d-inline-block"
+					/>
 					<AnimatedNumber v-if="!isNaN(details)" :to="details" :format="detailsFmt" />
 				</div>
 				<div ref="power" class="power" data-bs-toggle="tooltip" @click="powerClicked">
@@ -41,10 +48,11 @@ import BatteryIcon from "./BatteryIcon.vue";
 import formatter from "../../mixins/formatter";
 import AnimatedNumber from "../AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
+import ForecastIcon from "../MaterialIcon/Forecast.vue";
 
 export default {
 	name: "EnergyflowEntry",
-	components: { BatteryIcon, AnimatedNumber, VehicleIcon },
+	components: { BatteryIcon, AnimatedNumber, VehicleIcon, ForecastIcon },
 	mixins: [formatter],
 	props: {
 		name: { type: String },
@@ -54,9 +62,11 @@ export default {
 		powerTooltip: { type: Array },
 		powerUnit: { type: String },
 		details: { type: Number },
+		detailsIcon: { type: String },
 		detailsFmt: { type: Function },
 		detailsTooltip: { type: Array },
 		detailsClickable: { type: Boolean },
+		detailsInactive: { type: Boolean },
 	},
 	emits: ["details-clicked"],
 	data() {
@@ -107,9 +117,6 @@ export default {
 			);
 		},
 		updateDetailsTooltip() {
-			if (this.detailsClickable) {
-				return;
-			}
 			this.detailsTooltipInstance = this.updateTooltip(
 				this.detailsTooltipInstance,
 				this.detailsTooltip,
@@ -143,6 +150,8 @@ export default {
 			if (this.detailsClickable) {
 				this.$emit("details-clicked");
 			}
+			// hide tooltip, chrome needs a timeout
+			setTimeout(() => this.detailsTooltipInstance?.hide(), 10);
 		},
 	},
 };

assets/js/components/ForecastActiveSlot.vue

@@ -0,0 +1,35 @@
+<template>
+	<div v-if="activeSlot" class="text-end">
+		<span class="text-nowrap">{{ day }} {{ start }}</span
+		>{{ " " }}<span class="text-nowrap">– {{ end }}</span>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import type { PropType } from "vue";
+import { type PriceSlot } from "../utils/forecast";
+import formatter from "../mixins/formatter";
+
+export default defineComponent({
+	name: "ForecastActiveSlot",
+	mixins: [formatter],
+	props: {
+		activeSlot: { type: Object as PropType<PriceSlot | null> },
+	},
+	computed: {
+		day() {
+			const startDate = new Date(this.activeSlot!.start);
+			return this.weekdayShort(startDate);
+		},
+		start() {
+			const startDate = new Date(this.activeSlot!.start);
+			return this.hourShort(startDate);
+		},
+		end() {
+			const endDate = new Date(this.activeSlot!.end);
+			return this.hourShort(endDate);
+		},
+	},
+});
+</script>