From 2b8f69080db9546e0b1ef9714807024a81333cde Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 4 Sep 2024 10:00:34 +0200
Subject: [PATCH 01/19] refactor: extract table

---
 assets/js/components/ChargingSessionTable.vue | 482 ++++++++++++++++++
 assets/js/views/ChargingSessions.vue          | 476 +----------------
 2 files changed, 492 insertions(+), 466 deletions(-)
 create mode 100644 assets/js/components/ChargingSessionTable.vue

diff --git a/assets/js/components/ChargingSessionTable.vue b/assets/js/components/ChargingSessionTable.vue
new file mode 100644
index 0000000000..3cb4d315b5
--- /dev/null
+++ b/assets/js/components/ChargingSessionTable.vue
@@ -0,0 +1,482 @@
+<template>
+	<div v-if="sessions.length === 0" data-testid="sessions-nodata" class="my-5">
+		<p>{{ $t("sessions.noData") }}</p>
+	</div>
+	<div v-else class="my-3 my-md-5 table-outer">
+		<table class="table text-nowrap">
+			<thead class="sticky-top">
+				<tr data-testid="sessions-head">
+					<th scope="col" class="align-top ps-0">
+						{{ $t("sessions.date") }}
+					</th>
+					<th
+						scope="col"
+						class="align-top d-none d-md-table-cell"
+						data-testid="loadpoint"
+					>
+						{{ $t("sessions.loadpoint") }}
+						<CustomSelect
+							:selected="loadpointFilter"
+							:options="loadpointFilterOptions"
+							data-testid="filter-loadpoint"
+							@change="changeLoadpointFilter"
+						>
+							<span
+								class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
+							>
+								{{ loadpointFilter || $t("sessions.filter.filter") }}
+							</span>
+						</CustomSelect>
+					</th>
+					<th scope="col" class="align-top d-none d-md-table-cell" data-testid="vehicle">
+						{{ $t("sessions.vehicle") }}
+						<CustomSelect
+							:selected="vehicleFilter"
+							:options="vehicleFilterOptions"
+							data-testid="filter-vehicle"
+							@change="changeVehicleFilter"
+						>
+							<span
+								class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
+							>
+								{{ vehicleFilter || $t("sessions.filter.filter") }}
+							</span>
+						</CustomSelect>
+					</th>
+					<th scope="col" class="align-top d-md-none text-truncate">
+						<div class="d-flex flex-wrap text-truncate">
+							<div class="me-2 text-truncate">
+								{{ $t("sessions.loadpoint") }}
+							</div>
+							<CustomSelect
+								:selected="loadpointFilter"
+								:options="loadpointFilterOptions"
+								data-testid="filter-loadpoint"
+								@change="changeLoadpointFilter"
+							>
+								<span
+									class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
+								>
+									{{ loadpointFilter || $t("sessions.filter.filter") }}
+								</span>
+							</CustomSelect>
+						</div>
+						<div class="text-truncate d-flex flex-wrap">
+							<div class="me-2 text-truncate">
+								{{ $t("sessions.vehicle") }}
+							</div>
+							<CustomSelect
+								:selected="vehicleFilter"
+								:options="vehicleFilterOptions"
+								data-testid="filter-vehicle"
+								@change="changeVehicleFilter"
+							>
+								<span
+									class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
+								>
+									{{ vehicleFilter || $t("sessions.filter.filter") }}
+								</span>
+							</CustomSelect>
+						</div>
+					</th>
+					<th
+						v-for="(column, index) in columnsPerBreakpoint"
+						:key="column.name"
+						scope="col"
+						:data-testid="`sessions-head-${column.name}`"
+						class="align-top text-end"
+					>
+						<CustomSelect
+							v-if="tooMuchColumns"
+							:selected="column.name"
+							:options="columnOptions"
+							data-testid="column"
+							@change="selectColumnPosition(index, $event.target.value)"
+						>
+							<span class="text-decoration-underline">
+								{{ $t(`sessions.${column.name}`) }}
+							</span>
+						</CustomSelect>
+						<span v-else>
+							{{ $t(`sessions.${column.name}`) }}
+						</span>
+						<div class="text-gray fw-normal">{{ column.unit }}</div>
+					</th>
+				</tr>
+			</thead>
+			<tfoot class="sticky-bottom">
+				<tr data-testid="sessions-foot">
+					<th scope="col" class="align-top ps-0">
+						{{ $t("sessions.total") }}
+					</th>
+					<th scope="col" class="d-none d-md-table-cell"></th>
+					<th scope="col" class="d-none d-md-table-cell"></th>
+					<th scope="col" class="d-md-none"></th>
+					<th
+						v-for="column in columnsPerBreakpoint"
+						:key="column.name"
+						:data-testid="`sessions-foot-${column.name}`"
+						scope="col"
+						class="align-top text-end"
+					>
+						{{ column.format(column.total) }}
+					</th>
+				</tr>
+			</tfoot>
+			<tbody>
+				<tr
+					v-for="(session, id) in filteredSessions"
+					:key="id"
+					role="button"
+					data-testid="sessions-entry"
+					@click="showDetails(session.id)"
+				>
+					<td class="ps-0">
+						{{ fmtFullDateTime(new Date(session.created), true) }}
+					</td>
+					<td class="d-none d-md-table-cell">
+						{{ session.loadpoint }}
+					</td>
+					<td class="d-none d-md-table-cell">
+						{{ session.vehicle }}
+					</td>
+					<td class="d-md-none text-truncate">
+						<div>{{ session.loadpoint }}</div>
+						<div>{{ session.vehicle }}</div>
+					</td>
+					<td v-for="column in columnsPerBreakpoint" :key="column.name" class="text-end">
+						<span v-if="column.value(session) === null" class="text-gray"> - </span>
+						<span v-else>{{ column.format(column.value(session)) }}</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+import formatter from "../mixins/formatter";
+import CustomSelect from "../components/CustomSelect.vue";
+import breakpoint from "../mixins/breakpoint";
+import settings from "../settings";
+
+const COLUMNS_PER_BREAKPOINT = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 4,
+	xl: 5,
+	xxl: 6,
+};
+
+export default {
+	name: "ChargingSessions",
+	components: { CustomSelect },
+	mixins: [formatter, breakpoint],
+	props: {
+		sessions: { type: Array, default: () => [] },
+		loadpointFilter: { type: String, default: "" },
+		vehicleFilter: { type: String, default: "" },
+		currency: { type: String },
+	},
+	data() {
+		return {
+			selectedColumns: settings.sessionColumns,
+		};
+	},
+	computed: {
+		filteredSessions() {
+			return this.sessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
+		},
+		maxColumns() {
+			return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;
+		},
+		columns() {
+			const columns = [
+				{
+					name: "energy",
+					unit: "kWh",
+					total: this.chargedEnergy,
+					value: (session) => session.chargedEnergy,
+					format: (value) => this.fmtKWh(value * 1e3, true, false),
+				},
+				{
+					name: "solar",
+					unit: "%",
+					total: this.solarPercentage,
+					value: (session) => session.solarPercentage,
+					format: (value) => this.fmtNumber(value, 1),
+				},
+				{
+					name: "price",
+					unit: this.fmtCurrencySymbol(this.currency),
+					total: this.price,
+					value: (session) => session.price,
+					format: (value) => this.fmtMoney(value, this.currency),
+				},
+				{
+					name: "avgPrice",
+					unit: this.pricePerKWhUnit(this.currency),
+					total: this.pricePerKWh,
+					value: (session) => session.pricePerKWh,
+					format: (value) => this.fmtPricePerKWh(value, this.currency, false, false),
+				},
+				{
+					name: "co2",
+					unit: "g/kWh",
+					total: this.co2PerKWh,
+					value: (session) => session.co2PerKWh,
+					format: (value) => this.fmtNumber(value, 0),
+				},
+				{
+					name: "chargeDuration",
+					unit: "h:mm",
+					total: this.chargeDuration,
+					value: (session) => session.chargeDuration,
+					format: (value) => this.fmtDurationNs(value, false, "h"),
+				},
+				{
+					name: "avgPower",
+					unit: "kW",
+					total: this.avgPower,
+					value: (session) => {
+						if (session.chargedEnergy && session.chargeDuration) {
+							return session.chargedEnergy / this.nsToHours(session.chargeDuration);
+						}
+						return null;
+					},
+					format: (value) =>
+						value ? this.fmtKw(value * 1e3, true, false, 1) : undefined,
+				},
+			];
+			// only columns with values are shown
+			return columns.filter((column) => {
+				if (column.name === "energy") return true;
+				return this.sessions.some((s) => column.value(s));
+			});
+		},
+		tooMuchColumns() {
+			return this.columns.length > this.maxColumns;
+		},
+		sortedColumns() {
+			const columns = [...this.columns];
+			let sorted = [];
+			for (let name of this.selectedColumns) {
+				if (!name && columns.length) {
+					sorted.push(columns.shift());
+				} else if (columns.some((c) => c.name === name)) {
+					const column = columns.find((c) => c.name === name);
+					sorted.push(column);
+					let index = columns.indexOf(column);
+					columns.splice(index, 1);
+				}
+			}
+			return sorted.concat(columns);
+		},
+		columnsPerBreakpoint() {
+			return this.sortedColumns.slice(0, this.maxColumns);
+		},
+		columnOptions() {
+			return this.columns.map((column) => {
+				return {
+					name: this.$t(`sessions.${column.name}`),
+					value: column.name,
+					disabled: this.columnsPerBreakpoint.find((c) => c.name === column.name),
+				};
+			});
+		},
+		vehicleFilterOptions() {
+			const options = [
+				{
+					name: this.$t("sessions.filter.allVehicles"),
+					value: "",
+					count: this.filterCountForVehicle(),
+				},
+			];
+			this.vehicles.forEach((name) => {
+				const count = this.filterCountForVehicle(name);
+				options.push({ name, value: name, count });
+			});
+			return options;
+		},
+		loadpointFilterOptions() {
+			const options = [
+				{
+					name: this.$t("sessions.filter.allLoadpoints"),
+					value: "",
+					count: this.filterCountForLoadpoint(),
+				},
+			];
+			this.loadpoints.forEach((name) => {
+				const count = this.filterCountForLoadpoint(name);
+				options.push({ name, value: name, count });
+			});
+			return options;
+		},
+		chargedEnergy() {
+			return this.filteredSessions.reduce((total, s) => total + s.chargedEnergy, 0);
+		},
+		chargeDuration() {
+			return this.filteredSessions.reduce((total, s) => total + s.chargeDuration, 0);
+		},
+		price() {
+			return this.filteredSessions.reduce((total, s) => total + s.price, 0);
+		},
+		avgPower() {
+			const { energy, hours } = this.filteredSessions
+				.filter((s) => s.chargedEnergy && s.chargeDuration)
+				.reduce(
+					(total, s) => {
+						total.energy += s.chargedEnergy;
+						total.hours += this.nsToHours(s.chargeDuration);
+						return total;
+					},
+					{ energy: 0, hours: 0 }
+				);
+			if (energy && hours) {
+				return energy / hours;
+			}
+			return null;
+		},
+		pricePerKWh() {
+			const total = this.filteredSessions
+				.filter((s) => s.price !== null)
+				.reduce(
+					(total, s) => ({
+						price: total.price + s.price,
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ price: 0, chargedEnergy: 0 }
+				);
+			return total.price / total.chargedEnergy;
+		},
+		co2PerKWh() {
+			const total = this.filteredSessions
+				.filter((s) => s.co2PerKWh !== null)
+				.reduce(
+					(total, s) => ({
+						emittedCo2: total.emittedCo2 + s.chargedEnergy * s.co2PerKWh,
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ emittedCo2: 0, chargedEnergy: 0 }
+				);
+			if (total.chargedEnergy && total.emittedCo2) {
+				return total.emittedCo2 / total.chargedEnergy;
+			}
+			return null;
+		},
+		solarPercentage() {
+			const total = this.filteredSessions
+				.filter((s) => s.solarPercentage !== null)
+				.reduce(
+					(total, s) => ({
+						chargedSolarEnergy:
+							total.chargedSolarEnergy + s.chargedEnergy * (s.solarPercentage / 100),
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ chargedSolarEnergy: 0, chargedEnergy: 0 }
+				);
+
+			return (100 / total.chargedEnergy) * total.chargedSolarEnergy;
+		},
+		loadpoints() {
+			return [...new Set(this.sessions.map((s) => s.loadpoint))];
+		},
+		vehicles() {
+			return [...new Set(this.sessions.map((s) => s.vehicle))];
+		},
+	},
+	methods: {
+		nsToHours(ns) {
+			return ns / 1e9 / 3600;
+		},
+		filterByLoadpoint(session) {
+			return !this.loadpointFilter || session.loadpoint === this.loadpointFilter;
+		},
+		filterByVehicle(session) {
+			return !this.vehicleFilter || session.vehicle === this.vehicleFilter;
+		},
+		filterCountForVehicle(vehicle) {
+			return this.sessions
+				.filter(this.filterByLoadpoint)
+				.filter((s) => !vehicle || s.vehicle === vehicle).length;
+		},
+		filterCountForLoadpoint(loadpoint) {
+			return this.sessions
+				.filter(this.filterByVehicle)
+				.filter((s) => !loadpoint || s.loadpoint === loadpoint).length;
+		},
+		selectColumnPosition(index, value) {
+			this.selectedColumns[index] = value;
+			settings.sessionColumns = [...this.selectedColumns];
+		},
+		changeLoadpointFilter(event) {
+			const loadpoint = event.target.value || undefined;
+			this.$router.push({ query: { ...this.$route.query, loadpoint } });
+		},
+		changeVehicleFilter(event) {
+			const vehicle = event.target.value || undefined;
+			this.$router.push({ query: { ...this.$route.query, vehicle } });
+		},
+		showDetails(sessionId) {
+			this.$emit("show-session", sessionId);
+		},
+	},
+};
+</script>
+<style scoped>
+.table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+.table thead,
+.table tfoot {
+	background: var(--evcc-background);
+}
+.table tfoot th {
+	border-top-width: 2px;
+}
+.table thead th {
+	border-bottom-width: 2px;
+}
+.table tbody tr:last-child td {
+	border-bottom-width: 0;
+}
+
+.sticky-top,
+.sticky-bottom {
+	z-index: 1;
+}
+.sticky-top th {
+	padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+.table-outer {
+	position: relative;
+	top: calc(max(0.5rem, env(safe-area-inset-top)) * -1);
+}
+.month-header {
+	position: relative;
+	z-index: 2;
+}
+.sticky-bottom th {
+	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+	border-bottom: none;
+}
+@media (max-width: 576px) {
+	.table td,
+	.table th {
+		width: 50%;
+	}
+	.table td:first-child,
+	.table th:first-child,
+	.table td:last-child,
+	.table th:last-child {
+		width: 25%;
+	}
+
+	.table td.text-truncate,
+	.table th.text-truncate {
+		max-width: 1px;
+	}
+}
+</style>
diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/ChargingSessions.vue
index c842193755..a7f2ad28c1 100644
--- a/assets/js/views/ChargingSessions.vue
+++ b/assets/js/views/ChargingSessions.vue
@@ -32,171 +32,13 @@
 						></shopicon-regular-angledoublerightsmall>
 					</router-link>
 				</div>
-				<div v-if="currentSessions.length === 0" data-testid="sessions-nodata" class="my-5">
-					<p>{{ $t("sessions.noData") }}</p>
-				</div>
-				<div v-else class="my-3 my-md-5 table-outer">
-					<table class="table text-nowrap">
-						<thead class="sticky-top">
-							<tr data-testid="sessions-head">
-								<th scope="col" class="align-top ps-0">
-									{{ $t("sessions.date") }}
-								</th>
-								<th
-									scope="col"
-									class="align-top d-none d-md-table-cell"
-									data-testid="loadpoint"
-								>
-									{{ $t("sessions.loadpoint") }}
-									<CustomSelect
-										:selected="loadpointFilter"
-										:options="loadpointFilterOptions"
-										data-testid="filter-loadpoint"
-										@change="changeLoadpointFilter"
-									>
-										<span
-											class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
-										>
-											{{ loadpointFilter || $t("sessions.filter.filter") }}
-										</span>
-									</CustomSelect>
-								</th>
-								<th
-									scope="col"
-									class="align-top d-none d-md-table-cell"
-									data-testid="vehicle"
-								>
-									{{ $t("sessions.vehicle") }}
-									<CustomSelect
-										:selected="vehicleFilter"
-										:options="vehicleFilterOptions"
-										data-testid="filter-vehicle"
-										@change="changeVehicleFilter"
-									>
-										<span
-											class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
-										>
-											{{ vehicleFilter || $t("sessions.filter.filter") }}
-										</span>
-									</CustomSelect>
-								</th>
-								<th scope="col" class="align-top d-md-none text-truncate">
-									<div class="d-flex flex-wrap text-truncate">
-										<div class="me-2 text-truncate">
-											{{ $t("sessions.loadpoint") }}
-										</div>
-										<CustomSelect
-											:selected="loadpointFilter"
-											:options="loadpointFilterOptions"
-											data-testid="filter-loadpoint"
-											@change="changeLoadpointFilter"
-										>
-											<span
-												class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
-											>
-												{{
-													loadpointFilter || $t("sessions.filter.filter")
-												}}
-											</span>
-										</CustomSelect>
-									</div>
-									<div class="text-truncate d-flex flex-wrap">
-										<div class="me-2 text-truncate">
-											{{ $t("sessions.vehicle") }}
-										</div>
-										<CustomSelect
-											:selected="vehicleFilter"
-											:options="vehicleFilterOptions"
-											data-testid="filter-vehicle"
-											@change="changeVehicleFilter"
-										>
-											<span
-												class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
-											>
-												{{ vehicleFilter || $t("sessions.filter.filter") }}
-											</span>
-										</CustomSelect>
-									</div>
-								</th>
-								<th
-									v-for="(column, index) in columnsPerBreakpoint"
-									:key="column.name"
-									scope="col"
-									:data-testid="`sessions-head-${column.name}`"
-									class="align-top text-end"
-								>
-									<CustomSelect
-										v-if="tooMuchColumns"
-										:selected="column.name"
-										:options="columnOptions"
-										data-testid="column"
-										@change="selectColumnPosition(index, $event.target.value)"
-									>
-										<span class="text-decoration-underline">
-											{{ $t(`sessions.${column.name}`) }}
-										</span>
-									</CustomSelect>
-									<span v-else>
-										{{ $t(`sessions.${column.name}`) }}
-									</span>
-									<div class="text-gray fw-normal">{{ column.unit }}</div>
-								</th>
-							</tr>
-						</thead>
-						<tfoot class="sticky-bottom">
-							<tr data-testid="sessions-foot">
-								<th scope="col" class="align-top ps-0">
-									{{ $t("sessions.total") }}
-								</th>
-								<th scope="col" class="d-none d-md-table-cell"></th>
-								<th scope="col" class="d-none d-md-table-cell"></th>
-								<th scope="col" class="d-md-none"></th>
-								<th
-									v-for="column in columnsPerBreakpoint"
-									:key="column.name"
-									:data-testid="`sessions-foot-${column.name}`"
-									scope="col"
-									class="align-top text-end"
-								>
-									{{ column.format(column.total) }}
-								</th>
-							</tr>
-						</tfoot>
-						<tbody>
-							<tr
-								v-for="(session, id) in filteredSessions"
-								:key="id"
-								role="button"
-								data-testid="sessions-entry"
-								@click="showDetails(session.id)"
-							>
-								<td class="ps-0">
-									{{ fmtFullDateTime(new Date(session.created), true) }}
-								</td>
-								<td class="d-none d-md-table-cell">
-									{{ session.loadpoint }}
-								</td>
-								<td class="d-none d-md-table-cell">
-									{{ session.vehicle }}
-								</td>
-								<td class="d-md-none text-truncate">
-									<div>{{ session.loadpoint }}</div>
-									<div>{{ session.vehicle }}</div>
-								</td>
-								<td
-									v-for="column in columnsPerBreakpoint"
-									:key="column.name"
-									class="text-end"
-								>
-									<span v-if="column.value(session) === null" class="text-gray">
-										-
-									</span>
-									<span v-else>{{ column.format(column.value(session)) }}</span>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
+				<ChargingSessionTable
+					:sessions="currentSessions"
+					:vehicleFilter="vehicleFilter"
+					:loadpointFilter="loadpointFilter"
+					:currency="currency"
+					@show-session="showDetails"
+				/>
 				<div class="d-grid gap-2 d-md-block mt-3 mb-5">
 					<a
 						v-if="currentSessions.length"
@@ -233,25 +75,15 @@ import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import formatter from "../mixins/formatter";
 import api from "../api";
 import store from "../store";
-import CustomSelect from "../components/CustomSelect.vue";
 import ChargingSessionModal from "../components/ChargingSessionModal.vue";
-import breakpoint from "../mixins/breakpoint";
+import ChargingSessionTable from "../components/ChargingSessionTable.vue";
 import settings from "../settings";
 import TopHeader from "../components/TopHeader.vue";
 
-const COLUMNS_PER_BREAKPOINT = {
-	xs: 1,
-	sm: 2,
-	md: 3,
-	lg: 4,
-	xl: 5,
-	xxl: 6,
-};
-
 export default {
 	name: "ChargingSessions",
-	components: { ChargingSessionModal, CustomSelect, TopHeader },
-	mixins: [formatter, breakpoint],
+	components: { ChargingSessionModal, ChargingSessionTable, TopHeader },
+	mixins: [formatter],
 	props: {
 		notifications: Array,
 		month: { type: Number, default: () => new Date().getMonth() + 1 },
@@ -263,7 +95,6 @@ export default {
 		return {
 			sessions: [],
 			selectedSessionId: undefined,
-			selectedColumns: settings.sessionColumns,
 		};
 	},
 	head() {
@@ -286,206 +117,6 @@ export default {
 				return date.getFullYear() === this.year && date.getMonth() + 1 === this.month;
 			});
 		},
-		filteredSessions() {
-			return this.currentSessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
-		},
-		maxColumns() {
-			return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;
-		},
-		columns() {
-			const columns = [
-				{
-					name: "energy",
-					unit: "kWh",
-					total: this.chargedEnergy,
-					value: (session) => session.chargedEnergy,
-					format: (value) => this.fmtKWh(value * 1e3, true, false),
-				},
-				{
-					name: "solar",
-					unit: "%",
-					total: this.solarPercentage,
-					value: (session) => session.solarPercentage,
-					format: (value) => this.fmtNumber(value, 1),
-				},
-				{
-					name: "price",
-					unit: this.fmtCurrencySymbol(this.currency),
-					total: this.price,
-					value: (session) => session.price,
-					format: (value) => this.fmtMoney(value, this.currency),
-				},
-				{
-					name: "avgPrice",
-					unit: this.pricePerKWhUnit(this.currency),
-					total: this.pricePerKWh,
-					value: (session) => session.pricePerKWh,
-					format: (value) => this.fmtPricePerKWh(value, this.currency, false, false),
-				},
-				{
-					name: "co2",
-					unit: "g/kWh",
-					total: this.co2PerKWh,
-					value: (session) => session.co2PerKWh,
-					format: (value) => this.fmtNumber(value, 0),
-				},
-				{
-					name: "chargeDuration",
-					unit: "h:mm",
-					total: this.chargeDuration,
-					value: (session) => session.chargeDuration,
-					format: (value) => this.fmtDurationNs(value, false, "h"),
-				},
-				{
-					name: "avgPower",
-					unit: "kW",
-					total: this.avgPower,
-					value: (session) => {
-						if (session.chargedEnergy && session.chargeDuration) {
-							return session.chargedEnergy / this.nsToHours(session.chargeDuration);
-						}
-						return null;
-					},
-					format: (value) =>
-						value ? this.fmtKw(value * 1e3, true, false, 1) : undefined,
-				},
-			];
-			// only columns with values are shown
-			return columns.filter((column) => {
-				if (column.name === "energy") return true;
-				return this.currentSessions.some((s) => column.value(s));
-			});
-		},
-		tooMuchColumns() {
-			return this.columns.length > this.maxColumns;
-		},
-		sortedColumns() {
-			const columns = [...this.columns];
-			let sorted = [];
-			for (let name of this.selectedColumns) {
-				if (!name && columns.length) {
-					sorted.push(columns.shift());
-				} else if (columns.some((c) => c.name === name)) {
-					const column = columns.find((c) => c.name === name);
-					sorted.push(column);
-					let index = columns.indexOf(column);
-					columns.splice(index, 1);
-				}
-			}
-			return sorted.concat(columns);
-		},
-		columnsPerBreakpoint() {
-			return this.sortedColumns.slice(0, this.maxColumns);
-		},
-		columnOptions() {
-			return this.columns.map((column) => {
-				return {
-					name: this.$t(`sessions.${column.name}`),
-					value: column.name,
-					disabled: this.columnsPerBreakpoint.find((c) => c.name === column.name),
-				};
-			});
-		},
-		vehicleFilterOptions() {
-			const options = [
-				{
-					name: this.$t("sessions.filter.allVehicles"),
-					value: "",
-					count: this.filterCountForVehicle(),
-				},
-			];
-			this.vehicles.forEach((name) => {
-				const count = this.filterCountForVehicle(name);
-				options.push({ name, value: name, count });
-			});
-			return options;
-		},
-		loadpointFilterOptions() {
-			const options = [
-				{
-					name: this.$t("sessions.filter.allLoadpoints"),
-					value: "",
-					count: this.filterCountForLoadpoint(),
-				},
-			];
-			this.loadpoints.forEach((name) => {
-				const count = this.filterCountForLoadpoint(name);
-				options.push({ name, value: name, count });
-			});
-			return options;
-		},
-		chargedEnergy() {
-			return this.filteredSessions.reduce((total, s) => total + s.chargedEnergy, 0);
-		},
-		chargeDuration() {
-			return this.filteredSessions.reduce((total, s) => total + s.chargeDuration, 0);
-		},
-		price() {
-			return this.filteredSessions.reduce((total, s) => total + s.price, 0);
-		},
-		avgPower() {
-			const { energy, hours } = this.filteredSessions
-				.filter((s) => s.chargedEnergy && s.chargeDuration)
-				.reduce(
-					(total, s) => {
-						total.energy += s.chargedEnergy;
-						total.hours += this.nsToHours(s.chargeDuration);
-						return total;
-					},
-					{ energy: 0, hours: 0 }
-				);
-			if (energy && hours) {
-				return energy / hours;
-			}
-			return null;
-		},
-		pricePerKWh() {
-			const total = this.filteredSessions
-				.filter((s) => s.price !== null)
-				.reduce(
-					(total, s) => ({
-						price: total.price + s.price,
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ price: 0, chargedEnergy: 0 }
-				);
-			return total.price / total.chargedEnergy;
-		},
-		co2PerKWh() {
-			const total = this.filteredSessions
-				.filter((s) => s.co2PerKWh !== null)
-				.reduce(
-					(total, s) => ({
-						emittedCo2: total.emittedCo2 + s.chargedEnergy * s.co2PerKWh,
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ emittedCo2: 0, chargedEnergy: 0 }
-				);
-			if (total.chargedEnergy && total.emittedCo2) {
-				return total.emittedCo2 / total.chargedEnergy;
-			}
-			return null;
-		},
-		solarPercentage() {
-			const total = this.filteredSessions
-				.filter((s) => s.solarPercentage !== null)
-				.reduce(
-					(total, s) => ({
-						chargedSolarEnergy:
-							total.chargedSolarEnergy + s.chargedEnergy * (s.solarPercentage / 100),
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ chargedSolarEnergy: 0, chargedEnergy: 0 }
-				);
-
-			return (100 / total.chargedEnergy) * total.chargedSolarEnergy;
-		},
-		loadpoints() {
-			return [...new Set(this.currentSessions.map((s) => s.loadpoint))];
-		},
-		vehicles() {
-			return [...new Set(this.currentSessions.map((s) => s.vehicle))];
-		},
 		vehicleList() {
 			const vehicles = store.state.vehicles || {};
 			return Object.entries(vehicles).map(([name, vehicle]) => ({ name, ...vehicle }));
@@ -555,37 +186,6 @@ export default {
 		this.loadSessions();
 	},
 	methods: {
-		nsToHours(ns) {
-			return ns / 1e9 / 3600;
-		},
-		filterByLoadpoint(session) {
-			return !this.loadpointFilter || session.loadpoint === this.loadpointFilter;
-		},
-		filterByVehicle(session) {
-			return !this.vehicleFilter || session.vehicle === this.vehicleFilter;
-		},
-		filterCountForVehicle(vehicle) {
-			return this.currentSessions
-				.filter(this.filterByLoadpoint)
-				.filter((s) => !vehicle || s.vehicle === vehicle).length;
-		},
-		filterCountForLoadpoint(loadpoint) {
-			return this.currentSessions
-				.filter(this.filterByVehicle)
-				.filter((s) => !loadpoint || s.loadpoint === loadpoint).length;
-		},
-		selectColumnPosition(index, value) {
-			this.selectedColumns[index] = value;
-			settings.sessionColumns = [...this.selectedColumns];
-		},
-		changeLoadpointFilter(event) {
-			const loadpoint = event.target.value || undefined;
-			this.$router.push({ query: { ...this.$route.query, loadpoint } });
-		},
-		changeVehicleFilter(event) {
-			const vehicle = event.target.value || undefined;
-			this.$router.push({ query: { ...this.$route.query, vehicle } });
-		},
 		async loadSessions() {
 			const response = await api.get("sessions");
 			this.sessions = response.data?.result;
@@ -609,59 +209,3 @@ export default {
 	},
 };
 </script>
-<style scoped>
-.table {
-	border-collapse: separate;
-	border-spacing: 0;
-}
-.table thead,
-.table tfoot {
-	background: var(--evcc-background);
-}
-.table tfoot th {
-	border-top-width: 2px;
-}
-.table thead th {
-	border-bottom-width: 2px;
-}
-.table tbody tr:last-child td {
-	border-bottom-width: 0;
-}
-
-.sticky-top,
-.sticky-bottom {
-	z-index: 1;
-}
-.sticky-top th {
-	padding-top: max(0.5rem, env(safe-area-inset-top));
-}
-.table-outer {
-	position: relative;
-	top: calc(max(0.5rem, env(safe-area-inset-top)) * -1);
-}
-.month-header {
-	position: relative;
-	z-index: 2;
-}
-.sticky-bottom th {
-	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
-	border-bottom: none;
-}
-@media (max-width: 576px) {
-	.table td,
-	.table th {
-		width: 50%;
-	}
-	.table td:first-child,
-	.table th:first-child,
-	.table td:last-child,
-	.table th:last-child {
-		width: 25%;
-	}
-
-	.table td.text-truncate,
-	.table th.text-truncate {
-		max-width: 1px;
-	}
-}
-</style>

From 525cbd5e4e471ebf294462637011dd4202e03d70 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 4 Sep 2024 20:07:12 +0200
Subject: [PATCH 02/19] chart.js

---
 .eslintrc.cjs                                 |  1 +
 assets/js/components/Sessions/Chart.vue       | 88 +++++++++++++++++++
 .../SessionDetailsModal.vue}                  | 15 ++--
 .../SessionTable.vue}                         | 11 +--
 assets/js/router.js                           |  2 +-
 assets/js/types/shopicons.d.ts                |  2 +
 .../{ChargingSessions.vue => Sessions.vue}    | 15 ++--
 package-lock.json                             | 30 +++++++
 package.json                                  |  2 +
 9 files changed, 145 insertions(+), 21 deletions(-)
 create mode 100644 assets/js/components/Sessions/Chart.vue
 rename assets/js/components/{ChargingSessionModal.vue => Sessions/SessionDetailsModal.vue} (95%)
 rename assets/js/components/{ChargingSessionTable.vue => Sessions/SessionTable.vue} (98%)
 create mode 100644 assets/js/types/shopicons.d.ts
 rename assets/js/views/{ChargingSessions.vue => Sessions.vue} (94%)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c61e314578..d2b3f29d30 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -18,5 +18,6 @@ module.exports = {
 		"vue/attribute-hyphenation": "off",
 		"vue/multi-word-component-names": "off",
 		"vue/no-reserved-component-names": "off",
+		"vue/no-undef-properties": "warn",
 	},
 };
diff --git a/assets/js/components/Sessions/Chart.vue b/assets/js/components/Sessions/Chart.vue
new file mode 100644
index 0000000000..0a96c4c25c
--- /dev/null
+++ b/assets/js/components/Sessions/Chart.vue
@@ -0,0 +1,88 @@
+<template>
+	<div>
+		<Bar :data="chartData" :options="options" />
+	</div>
+</template>
+
+<script>
+import { Bar } from "vue-chartjs";
+import {
+	Chart,
+	BarController,
+	BarElement,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Colors,
+} from "chart.js";
+import formatter from "../../mixins/formatter";
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Colors);
+
+export default {
+	name: "Chart",
+	components: { Bar },
+	props: {
+		sessions: { type: Array, default: () => [] },
+	},
+	mixins: [formatter],
+	computed: {
+		chartData() {
+			console.log("update chart data");
+			const result = {};
+			const loadpoints = new Set();
+
+			if (this.sessions.length > 0) {
+				const firstDay = new Date(this.sessions[0].created);
+				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
+				const daysInMonth = lastDay.getDate();
+
+				for (let i = 1; i <= daysInMonth; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					const date = new Date(session.created);
+					const day = date.getDate();
+					const loadpoint = session.loadpoint || "Unknown";
+					loadpoints.add(loadpoint);
+
+					if (!result[day][loadpoint]) {
+						result[day][loadpoint] = 0;
+					}
+					result[day][loadpoint] += session.chargedEnergy;
+				});
+			}
+
+			const datasets = Array.from(loadpoints).map((loadpoint) => ({
+				label: loadpoint,
+				data: Object.values(result).map((day) => day[loadpoint] || 0),
+			}));
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		options() {
+			return {
+				animations: false,
+				locale: this.$i18n?.locale,
+				scales: {
+					x: {
+						stacked: true,
+					},
+					y: {
+						stacked: true,
+						ticks: {
+							callback: (value) => this.fmtKWh(value * 1e3, true, true, 0),
+						},
+						position: "right",
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/ChargingSessionModal.vue b/assets/js/components/Sessions/SessionDetailsModal.vue
similarity index 95%
rename from assets/js/components/ChargingSessionModal.vue
rename to assets/js/components/Sessions/SessionDetailsModal.vue
index a712cb765f..c5c21b37fb 100644
--- a/assets/js/components/ChargingSessionModal.vue
+++ b/assets/js/components/Sessions/SessionDetailsModal.vue
@@ -122,10 +122,10 @@
 							</tbody>
 						</table>
 					</div>
-					<div class="modal-footer d-flex justify-content-right">
+					<div class="modal-footer d-flex justify-content-start">
 						<button
 							type="button"
-							class="btn btn-outline-danger"
+							class="btn btn-link text-danger"
 							data-bs-dismiss="modal"
 							@click="openRemoveConfirmationModal"
 						>
@@ -175,15 +175,14 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/checkmark";
-import { distanceUnit, distanceValue } from "../units";
-import formatter from "../mixins/formatter";
 import Modal from "bootstrap/js/dist/modal";
-import api from "../api";
-
-import VehicleOptions from "./VehicleOptions.vue";
+import formatter from "../../mixins/formatter";
+import VehicleOptions from "../VehicleOptions.vue";
+import { distanceUnit, distanceValue } from "../../units";
+import api from "../../api";
 
 export default {
-	name: "ChargingSessionModal",
+	name: "SessionDetailsModal",
 	components: { VehicleOptions },
 	mixins: [formatter],
 	props: {
diff --git a/assets/js/components/ChargingSessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
similarity index 98%
rename from assets/js/components/ChargingSessionTable.vue
rename to assets/js/components/Sessions/SessionTable.vue
index 3cb4d315b5..9aa74988c6 100644
--- a/assets/js/components/ChargingSessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -155,10 +155,10 @@
 </template>
 
 <script>
-import formatter from "../mixins/formatter";
-import CustomSelect from "../components/CustomSelect.vue";
-import breakpoint from "../mixins/breakpoint";
-import settings from "../settings";
+import CustomSelect from "../CustomSelect.vue";
+import formatter from "../../mixins/formatter";
+import breakpoint from "../../mixins/breakpoint";
+import settings from "../../settings";
 
 const COLUMNS_PER_BREAKPOINT = {
 	xs: 1,
@@ -170,7 +170,7 @@ const COLUMNS_PER_BREAKPOINT = {
 };
 
 export default {
-	name: "ChargingSessions",
+	name: "SessionTable",
 	components: { CustomSelect },
 	mixins: [formatter, breakpoint],
 	props: {
@@ -184,6 +184,7 @@ export default {
 			selectedColumns: settings.sessionColumns,
 		};
 	},
+	emits: ["show-session"],
 	computed: {
 		filteredSessions() {
 			return this.sessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
diff --git a/assets/js/router.js b/assets/js/router.js
index 2bdaaab6e1..90e824639f 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -41,7 +41,7 @@ export default function setupRouter(i18n) {
       },
       {
         path: "/sessions",
-        component: () => import("./views/ChargingSessions.vue"),
+        component: () => import("./views/Sessions.vue"),
         props: (route) => {
           const { month, year, loadpoint, vehicle } = route.query;
           return {
diff --git a/assets/js/types/shopicons.d.ts b/assets/js/types/shopicons.d.ts
new file mode 100644
index 0000000000..1d4d8e5d86
--- /dev/null
+++ b/assets/js/types/shopicons.d.ts
@@ -0,0 +1,2 @@
+declare module "@h2d2/shopicons/es/regular/*";
+declare module "@h2d2/shopicons/es/filled/*";
diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/Sessions.vue
similarity index 94%
rename from assets/js/views/ChargingSessions.vue
rename to assets/js/views/Sessions.vue
index a7f2ad28c1..c3a08a07d6 100644
--- a/assets/js/views/ChargingSessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -32,7 +32,8 @@
 						></shopicon-regular-angledoublerightsmall>
 					</router-link>
 				</div>
-				<ChargingSessionTable
+				<Chart :sessions="currentSessions" />
+				<SessionTable
 					:sessions="currentSessions"
 					:vehicleFilter="vehicleFilter"
 					:loadpointFilter="loadpointFilter"
@@ -58,7 +59,7 @@
 					</a>
 				</div>
 			</main>
-			<ChargingSessionModal
+			<SessionDetailsModal
 				:session="selectedSession"
 				:vehicles="vehicleList"
 				:currency="currency"
@@ -75,14 +76,14 @@ import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import formatter from "../mixins/formatter";
 import api from "../api";
 import store from "../store";
-import ChargingSessionModal from "../components/ChargingSessionModal.vue";
-import ChargingSessionTable from "../components/ChargingSessionTable.vue";
-import settings from "../settings";
+import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue";
+import SessionTable from "../components/Sessions/SessionTable.vue";
+import Chart from "../components/Sessions/Chart.vue";
 import TopHeader from "../components/TopHeader.vue";
 
 export default {
-	name: "ChargingSessions",
-	components: { ChargingSessionModal, ChargingSessionTable, TopHeader },
+	name: "Sessions",
+	components: { SessionDetailsModal, SessionTable, TopHeader, Chart },
 	mixins: [formatter],
 	props: {
 		notifications: Array,
diff --git a/package-lock.json b/package-lock.json
index 8e8bbb6bd0..d6ee366e99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "body-parser": "^1.20.2",
         "bootstrap": "^5.2.2",
         "canvas-confetti": "^1.4.0",
+        "chart.js": "^4.4.4",
         "countup.js": "^2.3.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.0.0",
@@ -46,6 +47,7 @@
         "vite-plugin-toml": "^0.7.0",
         "vitest": "^2.0.5",
         "vue": "^3.2.29",
+        "vue-chartjs": "^5.3.1",
         "vue-eslint-parser": "^9.1.0",
         "vue-hot-reload-api": "^2.3.4",
         "vue-i18n": "^9.2.2",
@@ -2620,6 +2622,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
     "node_modules/@lezer/common": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
@@ -4317,6 +4325,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -9816,6 +9836,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz",
+      "integrity": "sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-component-type-helpers": {
       "version": "2.0.29",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.29.tgz",
diff --git a/package.json b/package.json
index b04865ddad..5c01677a03 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "body-parser": "^1.20.2",
     "bootstrap": "^5.2.2",
     "canvas-confetti": "^1.4.0",
+    "chart.js": "^4.4.4",
     "countup.js": "^2.3.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
@@ -53,6 +54,7 @@
     "vite-plugin-toml": "^0.7.0",
     "vitest": "^2.0.5",
     "vue": "^3.2.29",
+    "vue-chartjs": "^5.3.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-hot-reload-api": "^2.3.4",
     "vue-i18n": "^9.2.2",

From 57f594d47e79f8b3cca396e7578fec69cac38933 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 9 Sep 2024 21:20:55 +0200
Subject: [PATCH 03/19] wip

---
 assets/css/app.css                            |   2 +-
 assets/js/components/Config/PropertyField.vue |   1 +
 .../Config/UserInterfaceSettings.vue          |   2 +
 assets/js/components/Config/VehicleModal.vue  |   1 +
 assets/js/components/IconSelectGroup.vue      |  18 ++
 assets/js/components/IconSelectItem.vue       |  39 ++++
 assets/js/components/SelectGroup.vue          |  10 +-
 assets/js/components/Sessions/Chart.vue       |  88 -------
 .../js/components/Sessions/EnergyBarChart.vue | 214 ++++++++++++++++++
 .../js/components/Sessions/SessionTable.vue   |   4 +-
 .../components/Sessions/SolarPolarChart.vue   | 201 ++++++++++++++++
 assets/js/views/Sessions.vue                  | 130 ++++++++---
 12 files changed, 584 insertions(+), 126 deletions(-)
 create mode 100644 assets/js/components/IconSelectGroup.vue
 create mode 100644 assets/js/components/IconSelectItem.vue
 delete mode 100644 assets/js/components/Sessions/Chart.vue
 create mode 100644 assets/js/components/Sessions/EnergyBarChart.vue
 create mode 100644 assets/js/components/Sessions/SolarPolarChart.vue

diff --git a/assets/css/app.css b/assets/css/app.css
index 4c7a526532..2bd21c4c3d 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -90,7 +90,7 @@
 	--evcc-grid: var(--bs-gray-medium);
 	--evcc-background: var(--bs-gray-deep);
 	--evcc-box: var(--bs-gray-dark);
-	--evcc-box-border: var(--vs-gray-darker);
+	--evcc-box-border: var(--bs-gray-darker);
 	--evcc-default-text: var(--bs-white);
 	--evcc-gray: var(--bs-gray-light);
 	--evcc-accent1: var(--evcc-yellow);
diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue
index 66c0d3858d..35148c1ccf 100644
--- a/assets/js/components/Config/PropertyField.vue
+++ b/assets/js/components/Config/PropertyField.vue
@@ -48,6 +48,7 @@
 		:id="id"
 		class="w-50"
 		v-model="value"
+		equal-width
 		:options="[
 			{ value: false, name: $t('config.options.boolean.no') },
 			{ value: true, name: $t('config.options.boolean.yes') },
diff --git a/assets/js/components/Config/UserInterfaceSettings.vue b/assets/js/components/Config/UserInterfaceSettings.vue
index 815021a3b6..74bec4f1dc 100644
--- a/assets/js/components/Config/UserInterfaceSettings.vue
+++ b/assets/js/components/Config/UserInterfaceSettings.vue
@@ -11,6 +11,7 @@
 						name: $t(`settings.theme.${value}`),
 					}))
 				"
+				equal-width
 			/>
 		</FormRow>
 		<FormRow id="settingsLanguage" :label="$t('settings.language.label')">
@@ -36,6 +37,7 @@
 						name: $t(`settings.unit.${value}`),
 					}))
 				"
+				equal-width
 			/>
 		</FormRow>
 		<FormRow id="telemetryEnabled" :label="$t('settings.telemetry.label')">
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index 342916d3d9..b9e670ed3c 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -120,6 +120,7 @@
 												{ name: '2-phases', value: '2' },
 												{ name: '3-phases', value: undefined },
 											]"
+											equal-width
 										/>
 									</FormRow>
 									<div class="row mb-3">
diff --git a/assets/js/components/IconSelectGroup.vue b/assets/js/components/IconSelectGroup.vue
new file mode 100644
index 0000000000..46b51b7560
--- /dev/null
+++ b/assets/js/components/IconSelectGroup.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="root border d-flex gap-1" role="group">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "IconSelectGroup",
+};
+</script>
+
+<style scoped>
+.root {
+	border-radius: 20px;
+	padding: 4px;
+}
+</style>
diff --git a/assets/js/components/IconSelectItem.vue b/assets/js/components/IconSelectItem.vue
new file mode 100644
index 0000000000..04ddb770ff
--- /dev/null
+++ b/assets/js/components/IconSelectItem.vue
@@ -0,0 +1,39 @@
+<template>
+	<div>
+		<button type="button" class="btn" :class="{ active }" @click="$emit('click', value)">
+			<slot></slot>
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "IconSelectItem",
+	emits: ["click"],
+	props: {
+		value: String,
+		active: Boolean,
+	},
+};
+</script>
+
+<style scoped>
+.btn {
+	width: 32px;
+	height: 32px;
+	border-radius: 2rem;
+	color: var(--evcc-default-text);
+	padding: 0;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.btn:hover {
+	color: var(--evcc-gray);
+}
+.btn.active {
+	color: var(--evcc-background);
+	background: var(--evcc-default-text);
+}
+</style>
diff --git a/assets/js/components/SelectGroup.vue b/assets/js/components/SelectGroup.vue
index 7c07fcdb1e..de7dd4ecc7 100644
--- a/assets/js/components/SelectGroup.vue
+++ b/assets/js/components/SelectGroup.vue
@@ -5,8 +5,8 @@
 			:id="i === 0 ? id : null"
 			:key="option.value"
 			type="button"
-			class="btn btn-sm flex-grow-1 flex-shrink-1"
-			:class="{ active: option.value === modelValue }"
+			class="btn btn-lg flex-grow-1 flex-shrink-1"
+			:class="{ active: option.value === modelValue, 'btn--equal': equalWidth }"
 			:disabled="option.disabled"
 			@click="$emit('update:modelValue', option.value)"
 		>
@@ -22,6 +22,7 @@ export default {
 		id: String,
 		options: Array,
 		modelValue: [Number, String],
+		equalWidth: Boolean,
 	},
 	emits: ["update:modelValue"],
 };
@@ -35,8 +36,6 @@ export default {
 }
 
 .btn {
-	/* equal width buttons */
-	flex-basis: 0;
 	white-space: nowrap;
 	border-radius: 12px;
 	padding: 0.1em 0.8em;
@@ -45,6 +44,9 @@ export default {
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 }
+.btn--equal {
+	flex-basis: 0;
+}
 .btn:hover {
 	color: var(--evcc-gray);
 }
diff --git a/assets/js/components/Sessions/Chart.vue b/assets/js/components/Sessions/Chart.vue
deleted file mode 100644
index 0a96c4c25c..0000000000
--- a/assets/js/components/Sessions/Chart.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-	<div>
-		<Bar :data="chartData" :options="options" />
-	</div>
-</template>
-
-<script>
-import { Bar } from "vue-chartjs";
-import {
-	Chart,
-	BarController,
-	BarElement,
-	CategoryScale,
-	LinearScale,
-	Legend,
-	Colors,
-} from "chart.js";
-import formatter from "../../mixins/formatter";
-
-Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Colors);
-
-export default {
-	name: "Chart",
-	components: { Bar },
-	props: {
-		sessions: { type: Array, default: () => [] },
-	},
-	mixins: [formatter],
-	computed: {
-		chartData() {
-			console.log("update chart data");
-			const result = {};
-			const loadpoints = new Set();
-
-			if (this.sessions.length > 0) {
-				const firstDay = new Date(this.sessions[0].created);
-				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
-				const daysInMonth = lastDay.getDate();
-
-				for (let i = 1; i <= daysInMonth; i++) {
-					result[i] = {};
-				}
-
-				// Populate with actual data
-				this.sessions.forEach((session) => {
-					const date = new Date(session.created);
-					const day = date.getDate();
-					const loadpoint = session.loadpoint || "Unknown";
-					loadpoints.add(loadpoint);
-
-					if (!result[day][loadpoint]) {
-						result[day][loadpoint] = 0;
-					}
-					result[day][loadpoint] += session.chargedEnergy;
-				});
-			}
-
-			const datasets = Array.from(loadpoints).map((loadpoint) => ({
-				label: loadpoint,
-				data: Object.values(result).map((day) => day[loadpoint] || 0),
-			}));
-
-			return {
-				labels: Object.keys(result),
-				datasets: datasets,
-			};
-		},
-		options() {
-			return {
-				animations: false,
-				locale: this.$i18n?.locale,
-				scales: {
-					x: {
-						stacked: true,
-					},
-					y: {
-						stacked: true,
-						ticks: {
-							callback: (value) => this.fmtKWh(value * 1e3, true, true, 0),
-						},
-						position: "right",
-					},
-				},
-			};
-		},
-	},
-};
-</script>
diff --git a/assets/js/components/Sessions/EnergyBarChart.vue b/assets/js/components/Sessions/EnergyBarChart.vue
new file mode 100644
index 0000000000..e1c4d6e004
--- /dev/null
+++ b/assets/js/components/Sessions/EnergyBarChart.vue
@@ -0,0 +1,214 @@
+<template>
+	<div style="position: relative; height: 300px">
+		<Bar :data="chartData" :options="options" />
+	</div>
+</template>
+
+<script>
+import { Bar } from "vue-chartjs";
+import {
+	Chart,
+	BarController,
+	BarElement,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Tooltip,
+} from "chart.js";
+import formatter from "../../mixins/formatter";
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+Chart.defaults.animation = false;
+
+// const colors = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
+// const colors = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
+// const colors = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
+// const colors = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
+
+const loadpointColors = [
+	"#0077B6FF",
+	"#00B4D8FF",
+	"#90E0EFFF",
+	"#006769FF",
+	"#40A578FF",
+	"#9DDE8BFF",
+	"#F8961EFF",
+	"#F9C74FFF",
+	"#E6FF94FF",
+];
+
+export default {
+	name: "EnergyBarChart",
+	components: { Bar },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+	},
+	data() {
+		return {
+			textColor: null,
+			mutedColor: null,
+			gridColor: null,
+		};
+	},
+	mixins: [formatter],
+	mounted() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", this.updateColors);
+		this.updateColors();
+	},
+	beforeUnmount() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.removeEventListener("change", this.updateColors);
+	},
+	methods: {
+		updateColors() {
+			const style = window.getComputedStyle(document.documentElement);
+			this.textColor = style.getPropertyValue("--evcc-default-text");
+			this.mutedColor = style.getPropertyValue("--bs-gray-medium");
+			this.gridColor = style.getPropertyValue("--bs-border-color-translucent");
+		},
+	},
+	computed: {
+		chartData() {
+			console.log("update chart data");
+			const result = {};
+			const groups = new Set();
+
+			if (this.sessions.length > 0) {
+				const firstDay = new Date(this.sessions[0].created);
+				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
+				const daysInMonth = lastDay.getDate();
+
+				for (let i = 1; i <= daysInMonth; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					const date = new Date(session.created);
+					const day = date.getDate();
+					const groupKey =
+						this.groupBy === "vehicle"
+							? session.vehicle || "Unknown"
+							: session.loadpoint || "Unknown";
+					groups.add(groupKey);
+
+					if (!result[day][groupKey]) {
+						result[day][groupKey] = 0;
+					}
+					result[day][groupKey] += session.chargedEnergy;
+				});
+			}
+
+			const datasets = Array.from(groups).map((group, i) => ({
+				backgroundColor: loadpointColors[i],
+				label: group,
+				data: Object.values(result).map((day) => day[group] || 0),
+			}));
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		options() {
+			return {
+				animations: false,
+				locale: this.$i18n?.locale,
+				responsive: true,
+				maintainAspectRatio: false,
+				borderRadius: 5,
+				color: this.textColor,
+				plugins: {
+					legend: {
+						position: "bottom",
+						align: "center",
+						labels: {
+							usePointStyle: true,
+							pointStyle: "circle",
+							padding: 20,
+						},
+						onClick: function (e, legendItem) {
+							const chartInstance = e.chart; // Get the chart instance from the event
+							const index = legendItem.datasetIndex;
+							const meta = chartInstance.getDatasetMeta(index);
+
+							const highlightAll = meta.highlight === true;
+							meta.highlight = !meta.highlight;
+
+							const dimColor = (color) => {
+								return color.replace(/FF$/, "20");
+							};
+							const fullColor = (color) => {
+								return color.replace(/20$/, "FF");
+							};
+
+							// Loop through all datasets
+							chartInstance.data.datasets.forEach((dataset, i) => {
+								const datasetMeta = chartInstance.getDatasetMeta(i);
+								datasetMeta.hidden = false;
+								if (i === index || highlightAll) {
+									datasetMeta.highlight = i === index && !highlightAll;
+									dataset.backgroundColor = fullColor(dataset.backgroundColor);
+								} else {
+									datasetMeta.highlight = false;
+									dataset.backgroundColor = dimColor(dataset.backgroundColor);
+								}
+							});
+
+							chartInstance.update();
+						},
+					},
+					tooltip: {
+						mode: "index",
+						intersect: false,
+						callbacks: {
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw;
+								return value
+									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
+									: null;
+							},
+						},
+						backgroundColor: "#000",
+					},
+				},
+				scales: {
+					x: {
+						stacked: true,
+						border: { display: false },
+						grid: { display: false },
+						ticks: { color: this.mutedColor },
+					},
+					y: {
+						stacked: true,
+						border: { display: false },
+						grid: { color: this.gridColor },
+						title: {
+							text: "kWh",
+							display: true,
+							color: this.mutedColor,
+						},
+						ticks: {
+							callback: (value, index) =>
+								index % 2 === 0 ? this.fmtKWh(value * 1e3, true, false, 0) : null,
+							color: this.mutedColor,
+						},
+						position: "right",
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index 9aa74988c6..4f381c9fd1 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -1,8 +1,8 @@
 <template>
-	<div v-if="sessions.length === 0" data-testid="sessions-nodata" class="my-5">
+	<div v-if="sessions.length === 0" data-testid="sessions-nodata" class="mt-3 mb-5">
 		<p>{{ $t("sessions.noData") }}</p>
 	</div>
-	<div v-else class="my-3 my-md-5 table-outer">
+	<div v-else class="my-5 table-outer">
 		<table class="table text-nowrap">
 			<thead class="sticky-top">
 				<tr data-testid="sessions-head">
diff --git a/assets/js/components/Sessions/SolarPolarChart.vue b/assets/js/components/Sessions/SolarPolarChart.vue
new file mode 100644
index 0000000000..36e1bc8090
--- /dev/null
+++ b/assets/js/components/Sessions/SolarPolarChart.vue
@@ -0,0 +1,201 @@
+<template>
+	<div style="position: relative; height: 300px">
+		<PolarArea :data="chartData" :options="options" />
+	</div>
+</template>
+
+<script>
+import { PolarArea } from "vue-chartjs";
+import { Chart, PolarAreaController, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import formatter from "../../mixins/formatter";
+
+Chart.register(PolarAreaController, CategoryScale, LinearScale, Legend, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+Chart.defaults.animation = false;
+
+const loadpointColors = [
+	"#0077B6FF",
+	"#00B4D8FF",
+	"#90E0EFFF",
+	"#006769FF",
+	"#40A578FF",
+	"#9DDE8BFF",
+	"#F8961EFF",
+	"#F9C74FFF",
+	"#E6FF94FF",
+];
+
+export default {
+	name: "SolarPolarChart",
+	components: { PolarArea },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+	},
+	data() {
+		return {
+			textColor: null,
+			mutedColor: null,
+			gridColor: null,
+		};
+	},
+	mixins: [formatter],
+	mounted() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", this.updateColors);
+		this.updateColors();
+	},
+	beforeUnmount() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.removeEventListener("change", this.updateColors);
+	},
+	methods: {
+		updateColors() {
+			const style = window.getComputedStyle(document.documentElement);
+			this.textColor = style.getPropertyValue("--evcc-default-text");
+			this.mutedColor = style.getPropertyValue("--bs-gray-medium");
+			this.gridColor = style.getPropertyValue("--bs-border-color-translucent");
+		},
+	},
+	computed: {
+		chartData() {
+			console.log("update chart data");
+			const result = {};
+			const groups = new Set();
+
+			if (this.sessions.length > 0) {
+				const firstDay = new Date(this.sessions[0].created);
+				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
+				const daysInMonth = lastDay.getDate();
+
+				for (let i = 1; i <= daysInMonth; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					const date = new Date(session.created);
+					const day = date.getDate();
+					const groupKey =
+						this.groupBy === "vehicle"
+							? session.vehicle || "Unknown"
+							: session.loadpoint || "Unknown";
+					groups.add(groupKey);
+
+					if (!result[day][groupKey]) {
+						result[day][groupKey] = 0;
+					}
+					result[day][groupKey] += session.chargedEnergy;
+				});
+			}
+
+			const datasets = Array.from(groups).map((group, i) => ({
+				backgroundColor: loadpointColors[i],
+				label: group,
+				data: Object.values(result).map((day) => day[group] || 0),
+			}));
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		options() {
+			return {
+				animations: false,
+				locale: this.$i18n?.locale,
+				responsive: true,
+				maintainAspectRatio: false,
+				borderRadius: 5,
+				color: this.textColor,
+				plugins: {
+					legend: {
+						position: "bottom",
+						align: "center",
+						labels: {
+							usePointStyle: true,
+							pointStyle: "circle",
+							padding: 20,
+						},
+						onClick: function (e, legendItem) {
+							const chartInstance = e.chart; // Get the chart instance from the event
+							const index = legendItem.datasetIndex;
+							const meta = chartInstance.getDatasetMeta(index);
+
+							const highlightAll = meta.highlight === true;
+							meta.highlight = !meta.highlight;
+
+							const dimColor = (color) => {
+								return color.replace(/FF$/, "20");
+							};
+							const fullColor = (color) => {
+								return color.replace(/20$/, "FF");
+							};
+
+							// Loop through all datasets
+							chartInstance.data.datasets.forEach((dataset, i) => {
+								const datasetMeta = chartInstance.getDatasetMeta(i);
+								datasetMeta.hidden = false;
+								if (i === index || highlightAll) {
+									datasetMeta.highlight = i === index && !highlightAll;
+									dataset.backgroundColor = fullColor(dataset.backgroundColor);
+								} else {
+									datasetMeta.highlight = false;
+									dataset.backgroundColor = dimColor(dataset.backgroundColor);
+								}
+							});
+
+							chartInstance.update();
+						},
+					},
+					tooltip: {
+						mode: "index",
+						intersect: false,
+						callbacks: {
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw;
+								return value
+									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
+									: null;
+							},
+						},
+						backgroundColor: "#000",
+					},
+				},
+				scales: {
+					x: {
+						stacked: true,
+						border: { display: false },
+						grid: { display: false },
+						ticks: { color: this.mutedColor },
+					},
+					y: {
+						stacked: true,
+						border: { display: false },
+						grid: { color: this.gridColor },
+						title: {
+							text: "kWh",
+							display: true,
+							color: this.mutedColor,
+						},
+						ticks: {
+							callback: (value, index) =>
+								index % 2 === 0 ? this.fmtKWh(value * 1e3, true, false, 0) : null,
+							color: this.mutedColor,
+						},
+						position: "right",
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index c3a08a07d6..aec4d5ed85 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,36 +3,85 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
-				<div
-					class="d-flex align-items-baseline justify-content-between my-3 my-md-5 month-header"
-				>
-					<router-link
-						class="d-flex text-decoration-none align-items-center"
-						:class="{ 'pe-none': !hasPrev, 'text-muted': !hasPrev }"
-						:to="{ query: { ...$route.query, ...prevYearMonth } }"
-					>
-						<shopicon-regular-angledoubleleftsmall
-							size="s"
-							class="me-1"
-						></shopicon-regular-angledoubleleftsmall>
-						<span class="d-none d-sm-block">{{ prevMonthName }}</span>
-						<span class="d-block d-sm-none">{{ prevMonthNameShort }}</span>
-					</router-link>
-					<h2 class="text-center">{{ headline }}</h2>
-					<router-link
-						class="d-flex text-decoration-none align-items-center"
-						:class="{ 'pe-none': !hasNext, 'text-muted': !hasNext }"
-						:to="{ query: { ...$route.query, ...nextYearMonth } }"
-					>
-						<span class="d-none d-sm-block">{{ nextMonthName }}</span>
-						<span class="d-block d-sm-none">{{ nextMonthNameShort }}</span>
-						<shopicon-regular-angledoublerightsmall
-							size="s"
-							class="ms-1"
-						></shopicon-regular-angledoublerightsmall>
-					</router-link>
+				<div class="row my-3 my-md-5 mb-4 month-header">
+					<div class="col-4 d-flex justify-content-start align-items-center">
+						<router-link
+							class="d-flex text-decoration-none align-items-center"
+							:class="{ 'pe-none': !hasPrev, 'text-muted': !hasPrev }"
+							:to="{ query: { ...$route.query, ...prevYearMonth } }"
+						>
+							<shopicon-regular-angledoubleleftsmall
+								size="s"
+								class="me-1"
+							></shopicon-regular-angledoubleleftsmall>
+							<span class="d-none d-sm-block">{{ prevMonthName }}</span>
+							<span class="d-block d-sm-none">{{ prevMonthNameShort }}</span>
+						</router-link>
+					</div>
+					<h2 class="col-4 text-center">{{ headline }}</h2>
+					<div class="col-4 d-flex justify-content-end align-items-center">
+						<router-link
+							class="d-flex text-decoration-none"
+							:class="{ 'pe-none': !hasNext, 'text-muted': !hasNext }"
+							:to="{ query: { ...$route.query, ...nextYearMonth } }"
+						>
+							<span class="d-none d-sm-block">{{ nextMonthName }}</span>
+							<span class="d-block d-sm-none">{{ nextMonthNameShort }}</span>
+							<shopicon-regular-angledoublerightsmall
+								size="s"
+								class="ms-1"
+							></shopicon-regular-angledoublerightsmall>
+						</router-link>
+					</div>
+				</div>
+				<div class="d-flex justify-content-between align-items-center">
+					<h3 class="fw-normal my-0">{{ energyTitle }}</h3>
+
+					<IconSelectGroup>
+						<IconSelectItem
+							:active="selectedGroup === 'loadpoint'"
+							@click="selectedGroup = 'loadpoint'"
+						>
+							<shopicon-regular-cablecharge></shopicon-regular-cablecharge>
+						</IconSelectItem>
+						<IconSelectItem
+							:active="selectedGroup === 'vehicle'"
+							@click="selectedGroup = 'vehicle'"
+						>
+							<shopicon-regular-car3></shopicon-regular-car3>
+						</IconSelectItem>
+					</IconSelectGroup>
 				</div>
-				<Chart :sessions="currentSessions" />
+				<EnergyBarChart
+					:sessions="currentSessions"
+					class="mb-5"
+					:group-by="selectedGroup"
+				/>
+
+				<div class="d-flex justify-content-between align-items-center">
+					<h3 class="fw-normal my-0">Anteil Sonnenenergie</h3>
+
+					<IconSelectGroup>
+						<IconSelectItem
+							:active="selectedGroup === 'loadpoint'"
+							@click="selectedGroup = 'loadpoint'"
+						>
+							<shopicon-regular-cablecharge></shopicon-regular-cablecharge>
+						</IconSelectItem>
+						<IconSelectItem
+							:active="selectedGroup === 'vehicle'"
+							@click="selectedGroup = 'vehicle'"
+						>
+							<shopicon-regular-car3></shopicon-regular-car3>
+						</IconSelectItem>
+					</IconSelectGroup>
+				</div>
+				<SolarPolarChart
+					:sessions="currentSessions"
+					class="mb-5"
+					:group-by="selectedGroup"
+				/>
+				<h3>Übersicht</h3>
 				<SessionTable
 					:sessions="currentSessions"
 					:vehicleFilter="vehicleFilter"
@@ -73,17 +122,30 @@
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
 import "@h2d2/shopicons/es/regular/angledoublerightsmall";
+import "@h2d2/shopicons/es/regular/cablecharge";
+import "@h2d2/shopicons/es/regular/car3";
 import formatter from "../mixins/formatter";
 import api from "../api";
 import store from "../store";
 import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue";
 import SessionTable from "../components/Sessions/SessionTable.vue";
-import Chart from "../components/Sessions/Chart.vue";
+import EnergyBarChart from "../components/Sessions/EnergyBarChart.vue";
+import SolarPolarChart from "../components/Sessions/SolarPolarChart.vue";
 import TopHeader from "../components/TopHeader.vue";
+import IconSelectGroup from "../components/IconSelectGroup.vue";
+import IconSelectItem from "../components/IconSelectItem.vue";
 
 export default {
 	name: "Sessions",
-	components: { SessionDetailsModal, SessionTable, TopHeader, Chart },
+	components: {
+		SessionDetailsModal,
+		SessionTable,
+		TopHeader,
+		EnergyBarChart,
+		SolarPolarChart,
+		IconSelectGroup,
+		IconSelectItem,
+	},
 	mixins: [formatter],
 	props: {
 		notifications: Array,
@@ -95,6 +157,7 @@ export default {
 	data() {
 		return {
 			sessions: [],
+			selectedGroup: "loadpoint",
 			selectedSessionId: undefined,
 		};
 	},
@@ -102,6 +165,11 @@ export default {
 		return { title: `${this.$t("sessions.title")} | evcc` };
 	},
 	computed: {
+		energyTitle() {
+			const energy =
+				this.currentSessions.reduce((acc, session) => acc + session.chargedEnergy, 0) * 1e3;
+			return `Geladene Energie: ${this.fmtKWh(energy)}`;
+		},
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
 			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };

From d50369ddacc7a2f2fb6a4d994f202c63f0b566b3 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 13 Sep 2024 16:10:42 +0200
Subject: [PATCH 04/19] wip

---
 .../Sessions/EnergyAggregateChart.vue         | 109 ++++++++++
 .../Sessions/EnergyAggregateEntries.vue       |  62 ++++++
 ...rgyBarChart.vue => EnergyHistoryChart.vue} |  55 +++--
 .../js/components/Sessions/SessionTable.vue   |   2 +-
 .../components/Sessions/SolarPolarChart.vue   | 201 ------------------
 assets/js/mixins/formatter.js                 |   6 +
 assets/js/views/Sessions.vue                  | 134 +++++++++---
 7 files changed, 302 insertions(+), 267 deletions(-)
 create mode 100644 assets/js/components/Sessions/EnergyAggregateChart.vue
 create mode 100644 assets/js/components/Sessions/EnergyAggregateEntries.vue
 rename assets/js/components/Sessions/{EnergyBarChart.vue => EnergyHistoryChart.vue} (80%)
 delete mode 100644 assets/js/components/Sessions/SolarPolarChart.vue

diff --git a/assets/js/components/Sessions/EnergyAggregateChart.vue b/assets/js/components/Sessions/EnergyAggregateChart.vue
new file mode 100644
index 0000000000..1dedb151b4
--- /dev/null
+++ b/assets/js/components/Sessions/EnergyAggregateChart.vue
@@ -0,0 +1,109 @@
+<template>
+	<div style="position: relative; height: 200px">
+		<Doughnut :data="chartData" :options="options" />
+	</div>
+</template>
+
+<script>
+import { Doughnut } from "vue-chartjs";
+import { Chart, DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
+import formatter from "../../mixins/formatter";
+
+Chart.register(DoughnutController, ArcElement, LinearScale, Legend, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+Chart.defaults.animation = false;
+
+export default {
+	name: "EnergyAggregateChart",
+	components: { Doughnut },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	data() {
+		return {
+			borderColor: null,
+		};
+	},
+	mixins: [formatter],
+	mounted() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", this.updateColors);
+		this.updateColors();
+	},
+	beforeUnmount() {
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.removeEventListener("change", this.updateColors);
+	},
+	methods: {
+		updateColors() {
+			const style = window.getComputedStyle(document.documentElement);
+			this.borderColor = style.getPropertyValue("--evcc-background");
+		},
+	},
+	computed: {
+		chartData() {
+			console.log("update energy aggregate data");
+			const aggregatedData = {};
+
+			this.sessions.forEach((session) => {
+				const groupKey = session[this.groupBy];
+				if (!aggregatedData[groupKey]) {
+					aggregatedData[groupKey] = 0;
+				}
+				aggregatedData[groupKey] += session.chargedEnergy;
+			});
+
+			// Sort the data by energy in descending order
+			const sortedEntries = Object.entries(aggregatedData).sort((a, b) => b[1] - a[1]);
+
+			const labels = sortedEntries.map(([label]) => label);
+			const data = sortedEntries.map(([, value]) => value);
+			const backgroundColor = labels.map((label) => this.colorMappings[this.groupBy][label]);
+
+			return {
+				labels: labels,
+				datasets: [{ data, backgroundColor }],
+			};
+		},
+		options() {
+			return {
+				animations: true,
+				locale: this.$i18n?.locale,
+				responsive: true,
+				maintainAspectRatio: false,
+				borderRadius: 6,
+				plugins: {
+					legend: { display: false },
+					tooltip: {
+						mode: "index",
+						intersect: false,
+						callbacks: {
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw;
+								return value
+									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
+									: null;
+							},
+						},
+						backgroundColor: "#000",
+					},
+				},
+				borderWidth: 3,
+				borderColor: this.borderColor,
+				cutout: "70%",
+				radius: "100%",
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/EnergyAggregateEntries.vue b/assets/js/components/Sessions/EnergyAggregateEntries.vue
new file mode 100644
index 0000000000..8567352467
--- /dev/null
+++ b/assets/js/components/Sessions/EnergyAggregateEntries.vue
@@ -0,0 +1,62 @@
+<template>
+	<div class="root">
+		<div
+			v-for="entry in entries"
+			:key="entry.name"
+			:style="{ borderLeft: `8px solid ${entry.color}` }"
+			class="ps-3"
+		>
+			<strong :style="{ color: entry.color }" class="fs-6">{{ entry.name }}</strong>
+			<div class="fs-6">{{ fmtPercentage(entry.percent) }}</div>
+			<div class="fs-6">{{ fmtKWh(entry.energy * 1e3) }}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import formatter from "../../mixins/formatter";
+
+export default {
+	name: "EnergyAggregateEntries",
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		entries() {
+			const aggregatedData = {};
+			let totalEnergy = 0;
+
+			this.sessions.forEach((session) => {
+				const groupKey = session[this.groupBy];
+				if (!aggregatedData[groupKey]) {
+					aggregatedData[groupKey] = 0;
+				}
+				aggregatedData[groupKey] += session.chargedEnergy;
+				totalEnergy += session.chargedEnergy;
+			});
+
+			const entries = Object.entries(aggregatedData)
+				.map(([key, value]) => ({
+					name: key,
+					energy: value,
+					percent: (100 / totalEnergy) * value,
+					color: this.colorMappings[this.groupBy][key],
+				}))
+				.sort((a, b) => b.energy - a.energy);
+
+			return entries;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 2rem;
+}
+</style>
diff --git a/assets/js/components/Sessions/EnergyBarChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
similarity index 80%
rename from assets/js/components/Sessions/EnergyBarChart.vue
rename to assets/js/components/Sessions/EnergyHistoryChart.vue
index e1c4d6e004..2800a1e4d0 100644
--- a/assets/js/components/Sessions/EnergyBarChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -26,29 +26,13 @@ Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 Chart.defaults.animation = false;
 
-// const colors = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
-// const colors = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
-// const colors = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
-// const colors = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
-
-const loadpointColors = [
-	"#0077B6FF",
-	"#00B4D8FF",
-	"#90E0EFFF",
-	"#006769FF",
-	"#40A578FF",
-	"#9DDE8BFF",
-	"#F8961EFF",
-	"#F9C74FFF",
-	"#E6FF94FF",
-];
-
 export default {
-	name: "EnergyBarChart",
+	name: "EnergyHistoryChart",
 	components: { Bar },
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: "loadpoint" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
 	},
 	data() {
 		return {
@@ -78,30 +62,35 @@ export default {
 		},
 	},
 	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		month() {
+			return this.firstDay?.getMonth() + 1;
+		},
+		year() {
+			return this.firstDay?.getFullYear();
+		},
 		chartData() {
 			console.log("update chart data");
 			const result = {};
 			const groups = new Set();
 
 			if (this.sessions.length > 0) {
-				const firstDay = new Date(this.sessions[0].created);
-				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
+				const lastDay = new Date(this.year, this.month, 0);
 				const daysInMonth = lastDay.getDate();
 
 				for (let i = 1; i <= daysInMonth; i++) {
 					result[i] = {};
 				}
-
 				// Populate with actual data
 				this.sessions.forEach((session) => {
-					const date = new Date(session.created);
-					const day = date.getDate();
-					const groupKey =
-						this.groupBy === "vehicle"
-							? session.vehicle || "Unknown"
-							: session.loadpoint || "Unknown";
+					const day = new Date(session.created).getDate();
+					const groupKey = session[this.groupBy];
 					groups.add(groupKey);
-
 					if (!result[day][groupKey]) {
 						result[day][groupKey] = 0;
 					}
@@ -109,8 +98,8 @@ export default {
 				});
 			}
 
-			const datasets = Array.from(groups).map((group, i) => ({
-				backgroundColor: loadpointColors[i],
+			const datasets = Array.from(groups).map((group) => ({
+				backgroundColor: this.colorMappings[this.groupBy][group],
 				label: group,
 				data: Object.values(result).map((day) => day[group] || 0),
 			}));
@@ -126,7 +115,7 @@ export default {
 				locale: this.$i18n?.locale,
 				responsive: true,
 				maintainAspectRatio: false,
-				borderRadius: 5,
+				borderRadius: 6,
 				color: this.textColor,
 				plugins: {
 					legend: {
@@ -172,6 +161,10 @@ export default {
 						mode: "index",
 						intersect: false,
 						callbacks: {
+							title: (tooltipItem) => {
+								const date = new Date(this.year, this.month, tooltipItem[0].label);
+								return this.fmtDayMonth(date);
+							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
 								const value = tooltipItem.raw;
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index 4f381c9fd1..20f0221ef0 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -4,7 +4,7 @@
 	</div>
 	<div v-else class="my-5 table-outer">
 		<table class="table text-nowrap">
-			<thead class="sticky-top">
+			<thead class="sticky-top" style="top: 3rem">
 				<tr data-testid="sessions-head">
 					<th scope="col" class="align-top ps-0">
 						{{ $t("sessions.date") }}
diff --git a/assets/js/components/Sessions/SolarPolarChart.vue b/assets/js/components/Sessions/SolarPolarChart.vue
deleted file mode 100644
index 36e1bc8090..0000000000
--- a/assets/js/components/Sessions/SolarPolarChart.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-	<div style="position: relative; height: 300px">
-		<PolarArea :data="chartData" :options="options" />
-	</div>
-</template>
-
-<script>
-import { PolarArea } from "vue-chartjs";
-import { Chart, PolarAreaController, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
-import formatter from "../../mixins/formatter";
-
-Chart.register(PolarAreaController, CategoryScale, LinearScale, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-Chart.defaults.animation = false;
-
-const loadpointColors = [
-	"#0077B6FF",
-	"#00B4D8FF",
-	"#90E0EFFF",
-	"#006769FF",
-	"#40A578FF",
-	"#9DDE8BFF",
-	"#F8961EFF",
-	"#F9C74FFF",
-	"#E6FF94FF",
-];
-
-export default {
-	name: "SolarPolarChart",
-	components: { PolarArea },
-	props: {
-		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: "loadpoint" },
-	},
-	data() {
-		return {
-			textColor: null,
-			mutedColor: null,
-			gridColor: null,
-		};
-	},
-	mixins: [formatter],
-	mounted() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.addEventListener("change", this.updateColors);
-		this.updateColors();
-	},
-	beforeUnmount() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.removeEventListener("change", this.updateColors);
-	},
-	methods: {
-		updateColors() {
-			const style = window.getComputedStyle(document.documentElement);
-			this.textColor = style.getPropertyValue("--evcc-default-text");
-			this.mutedColor = style.getPropertyValue("--bs-gray-medium");
-			this.gridColor = style.getPropertyValue("--bs-border-color-translucent");
-		},
-	},
-	computed: {
-		chartData() {
-			console.log("update chart data");
-			const result = {};
-			const groups = new Set();
-
-			if (this.sessions.length > 0) {
-				const firstDay = new Date(this.sessions[0].created);
-				const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
-				const daysInMonth = lastDay.getDate();
-
-				for (let i = 1; i <= daysInMonth; i++) {
-					result[i] = {};
-				}
-
-				// Populate with actual data
-				this.sessions.forEach((session) => {
-					const date = new Date(session.created);
-					const day = date.getDate();
-					const groupKey =
-						this.groupBy === "vehicle"
-							? session.vehicle || "Unknown"
-							: session.loadpoint || "Unknown";
-					groups.add(groupKey);
-
-					if (!result[day][groupKey]) {
-						result[day][groupKey] = 0;
-					}
-					result[day][groupKey] += session.chargedEnergy;
-				});
-			}
-
-			const datasets = Array.from(groups).map((group, i) => ({
-				backgroundColor: loadpointColors[i],
-				label: group,
-				data: Object.values(result).map((day) => day[group] || 0),
-			}));
-
-			return {
-				labels: Object.keys(result),
-				datasets: datasets,
-			};
-		},
-		options() {
-			return {
-				animations: false,
-				locale: this.$i18n?.locale,
-				responsive: true,
-				maintainAspectRatio: false,
-				borderRadius: 5,
-				color: this.textColor,
-				plugins: {
-					legend: {
-						position: "bottom",
-						align: "center",
-						labels: {
-							usePointStyle: true,
-							pointStyle: "circle",
-							padding: 20,
-						},
-						onClick: function (e, legendItem) {
-							const chartInstance = e.chart; // Get the chart instance from the event
-							const index = legendItem.datasetIndex;
-							const meta = chartInstance.getDatasetMeta(index);
-
-							const highlightAll = meta.highlight === true;
-							meta.highlight = !meta.highlight;
-
-							const dimColor = (color) => {
-								return color.replace(/FF$/, "20");
-							};
-							const fullColor = (color) => {
-								return color.replace(/20$/, "FF");
-							};
-
-							// Loop through all datasets
-							chartInstance.data.datasets.forEach((dataset, i) => {
-								const datasetMeta = chartInstance.getDatasetMeta(i);
-								datasetMeta.hidden = false;
-								if (i === index || highlightAll) {
-									datasetMeta.highlight = i === index && !highlightAll;
-									dataset.backgroundColor = fullColor(dataset.backgroundColor);
-								} else {
-									datasetMeta.highlight = false;
-									dataset.backgroundColor = dimColor(dataset.backgroundColor);
-								}
-							});
-
-							chartInstance.update();
-						},
-					},
-					tooltip: {
-						mode: "index",
-						intersect: false,
-						callbacks: {
-							label: (tooltipItem) => {
-								const datasetLabel = tooltipItem.dataset.label || "";
-								const value = tooltipItem.raw;
-								return value
-									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
-									: null;
-							},
-						},
-						backgroundColor: "#000",
-					},
-				},
-				scales: {
-					x: {
-						stacked: true,
-						border: { display: false },
-						grid: { display: false },
-						ticks: { color: this.mutedColor },
-					},
-					y: {
-						stacked: true,
-						border: { display: false },
-						grid: { color: this.gridColor },
-						title: {
-							text: "kWh",
-							display: true,
-							color: this.mutedColor,
-						},
-						ticks: {
-							callback: (value, index) =>
-								index % 2 === 0 ? this.fmtKWh(value * 1e3, true, false, 0) : null,
-							color: this.mutedColor,
-						},
-						position: "right",
-					},
-				},
-			};
-		},
-	},
-};
-</script>
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index 1c57dfdcd4..0d5234beb9 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -188,6 +188,12 @@ export default {
         year: "numeric",
       }).format(date);
     },
+    fmtDayMonth: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        day: "numeric",
+        month: "short",
+      }).format(date);
+    },
     fmtMoney: function (amout = 0, currency = "EUR", decimals = true) {
       return new Intl.NumberFormat(this.$i18n?.locale, {
         style: "currency",
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index aec4d5ed85..dc74d4bd56 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,7 +3,7 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
-				<div class="row my-3 my-md-5 mb-4 month-header">
+				<div class="row mt-2 mt-md-3 mb-5 month-header pt-3 pb-2 sticky-top">
 					<div class="col-4 d-flex justify-content-start align-items-center">
 						<router-link
 							class="d-flex text-decoration-none align-items-center"
@@ -52,35 +52,26 @@
 						</IconSelectItem>
 					</IconSelectGroup>
 				</div>
-				<EnergyBarChart
-					:sessions="currentSessions"
+				<EnergyHistoryChart
 					class="mb-5"
-					:group-by="selectedGroup"
-				/>
-
-				<div class="d-flex justify-content-between align-items-center">
-					<h3 class="fw-normal my-0">Anteil Sonnenenergie</h3>
-
-					<IconSelectGroup>
-						<IconSelectItem
-							:active="selectedGroup === 'loadpoint'"
-							@click="selectedGroup = 'loadpoint'"
-						>
-							<shopicon-regular-cablecharge></shopicon-regular-cablecharge>
-						</IconSelectItem>
-						<IconSelectItem
-							:active="selectedGroup === 'vehicle'"
-							@click="selectedGroup = 'vehicle'"
-						>
-							<shopicon-regular-car3></shopicon-regular-car3>
-						</IconSelectItem>
-					</IconSelectGroup>
-				</div>
-				<SolarPolarChart
 					:sessions="currentSessions"
-					class="mb-5"
+					:color-mappings="colorMappings"
 					:group-by="selectedGroup"
 				/>
+				<div class="row align-items-start">
+					<EnergyAggregateEntries
+						class="col-12 col-md-8 mb-5"
+						:sessions="currentSessions"
+						:color-mappings="colorMappings"
+						:group-by="selectedGroup"
+					/>
+					<EnergyAggregateChart
+						class="col-12 col-md-4 mb-5"
+						:sessions="currentSessions"
+						:color-mappings="colorMappings"
+						:group-by="selectedGroup"
+					/>
+				</div>
 				<h3>Übersicht</h3>
 				<SessionTable
 					:sessions="currentSessions"
@@ -129,20 +120,39 @@ import api from "../api";
 import store from "../store";
 import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue";
 import SessionTable from "../components/Sessions/SessionTable.vue";
-import EnergyBarChart from "../components/Sessions/EnergyBarChart.vue";
-import SolarPolarChart from "../components/Sessions/SolarPolarChart.vue";
+import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
+import EnergyAggregateChart from "../components/Sessions/EnergyAggregateChart.vue";
+import EnergyAggregateEntries from "../components/Sessions/EnergyAggregateEntries.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
 
+// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
+// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
+// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
+// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
+
+const COLORS = [
+	"#0077B6FF",
+	"#00B4D8FF",
+	"#90E0EFFF",
+	"#006769FF",
+	"#40A578FF",
+	"#9DDE8BFF",
+	"#F8961EFF",
+	"#F9C74FFF",
+	"#E6FF94FF",
+];
+
 export default {
 	name: "Sessions",
 	components: {
 		SessionDetailsModal,
 		SessionTable,
 		TopHeader,
-		EnergyBarChart,
-		SolarPolarChart,
+		EnergyHistoryChart,
+		EnergyAggregateChart,
+		EnergyAggregateEntries,
 		IconSelectGroup,
 		IconSelectItem,
 	},
@@ -174,14 +184,15 @@ export default {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
 			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
 		},
-		currentSessions() {
-			const sessionsWithDefaults = this.sessions.map((session) => {
+		sessionsWithDefaults() {
+			return this.sessions.map((session) => {
 				const loadpoint = session.loadpoint || this.$t("main.loadpoint.fallbackName");
 				const vehicle = session.vehicle || this.$t("main.vehicle.unknown");
 				return { ...session, loadpoint, vehicle };
 			});
-
-			return sessionsWithDefaults.filter((session) => {
+		},
+		currentSessions() {
+			return this.sessionsWithDefaults.filter((session) => {
 				const date = new Date(session.created);
 				return date.getFullYear() === this.year && date.getMonth() + 1 === this.month;
 			});
@@ -250,6 +261,55 @@ export default {
 			const first = new Date(this.sessions[length - 1].created);
 			return this.year > first.getFullYear() || this.month > first.getMonth() + 1;
 		},
+		colorMappings() {
+			const lastThreeMonths = new Date();
+			lastThreeMonths.setMonth(lastThreeMonths.getMonth() - 3);
+
+			// Aggregate energy to get sorted list of loadpoints/vehicles for coloring
+			const aggregateEnergy = (group) => {
+				return this.sessionsWithDefaults.reduce((acc, session) => {
+					if (new Date(session.created) >= lastThreeMonths) {
+						const key = session[group];
+						acc[key] = (acc[key] || 0) + session.chargedEnergy;
+					}
+					return acc;
+				}, {});
+			};
+
+			// Assign colors based on energy usage
+			const assignColors = (energyAggregation, colorType) => {
+				const result = {};
+				let colorIndex = 0;
+
+				// Assign colors by used energy in the last three months
+				const sortedEntries = Object.entries(energyAggregation).sort((a, b) => b[1] - a[1]);
+				sortedEntries.forEach(([key]) => {
+					if (!result[key]) {
+						result[key] = COLORS[colorIndex % COLORS.length];
+						colorIndex++;
+					}
+				});
+
+				// Assign colors to remaining entries
+				this.sessionsWithDefaults.forEach((session) => {
+					const key = session[colorType];
+					if (!result[key]) {
+						result[key] = COLORS[colorIndex % COLORS.length];
+						colorIndex++;
+					}
+				});
+
+				return result;
+			};
+
+			const loadpointEnergy = aggregateEnergy("loadpoint");
+			const loadpointColors = assignColors(loadpointEnergy, "loadpoint");
+
+			const vehicleEnergy = aggregateEnergy("vehicle");
+			const vehicleColors = assignColors(vehicleEnergy, "vehicle");
+
+			return { loadpoint: loadpointColors, vehicle: vehicleColors };
+		},
 	},
 	mounted() {
 		this.loadSessions();
@@ -278,3 +338,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.month-header {
+	background-color: var(--evcc-background);
+}
+</style>

From 5755eff5fa6c04058c9726c3578d0156448fd640 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 18 Sep 2024 20:30:24 +0200
Subject: [PATCH 05/19] work in progress

---
 assets/js/colors.js                           |  56 +++++
 assets/js/components/MaterialIcon/Total.vue   |  17 ++
 .../Sessions/EnergyAggregateChart.vue         |  66 +++---
 .../Sessions/EnergyAggregateEntries.vue       |   2 +-
 .../Sessions/EnergyHistoryChart.vue           | 201 ++++++++++++------
 assets/js/components/Sessions/SolarChart.vue  | 123 +++++++++++
 assets/js/mixins/formatter.js                 |   1 +
 assets/js/settings.js                         |   4 +-
 assets/js/views/Sessions.vue                  | 198 ++++++++++-------
 i18n/de.toml                                  |   4 +
 i18n/en.toml                                  |   4 +
 11 files changed, 508 insertions(+), 168 deletions(-)
 create mode 100644 assets/js/colors.js
 create mode 100644 assets/js/components/MaterialIcon/Total.vue
 create mode 100644 assets/js/components/Sessions/SolarChart.vue

diff --git a/assets/js/colors.js b/assets/js/colors.js
new file mode 100644
index 0000000000..2880f3f70f
--- /dev/null
+++ b/assets/js/colors.js
@@ -0,0 +1,56 @@
+import { reactive } from "vue";
+
+// alternatives
+// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
+// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
+// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
+// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
+// const COLORS = [ "#0077B6FF", "#00B4D8FF", "#90E0EFFF", "#40A578FF", "#9DDE8BFF", "#F8961EFF", "#F9C74FFF", "#E6FF94FF"];
+
+const colors = reactive({
+  text: null,
+  muted: null,
+  border: null,
+  self: null,
+  grid: null,
+  price: null,
+  background: null,
+  palette: [
+    "#03C1EFFF",
+    "#FD6158FF",
+    "#31AB4AFF",
+    "#0AAFBFFF",
+    "#FF922EFF",
+    "#0F662DFF",
+    "#0470D4FF",
+    "#FFBD2FFF",
+    "#77C93EFF",
+    "#41517AFF",
+    "#4E1D10FF",
+    "#813504FF",
+  ],
+});
+
+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-accent1");
+  colors.background = style.getPropertyValue("--evcc-background");
+}
+
+// update colors on theme change
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCssColors);
+updateCssColors();
+
+export const dimColor = (color) => {
+  return color.replace(/FF$/, "20");
+};
+export const fullColor = (color) => {
+  return color.replace(/20$/, "FF");
+};
+
+export default colors;
diff --git a/assets/js/components/MaterialIcon/Total.vue b/assets/js/components/MaterialIcon/Total.vue
new file mode 100644
index 0000000000..a3d30ef82d
--- /dev/null
+++ b/assets/js/components/MaterialIcon/Total.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg :style="svgStyle" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M4.83 4.61A1 1 0 0 1 5.75 4h12.5a1 1 0 1 1 0 2H8.11l4.95 5.115a1 1 0 0 1 .04 1.346L7.924 18.5H18.25a1 1 0 1 1 0 2H5.75a1 1 0 0 1-.76-1.65l5.999-6.999L5.03 5.695a1 1 0 0 1-.2-1.085"
+		/>
+	</svg>
+</template>
+
+<script>
+import icon from "../../mixins/icon";
+
+export default {
+	name: "Total",
+	mixins: [icon],
+};
+</script>
diff --git a/assets/js/components/Sessions/EnergyAggregateChart.vue b/assets/js/components/Sessions/EnergyAggregateChart.vue
index 1dedb151b4..02721e9002 100644
--- a/assets/js/components/Sessions/EnergyAggregateChart.vue
+++ b/assets/js/components/Sessions/EnergyAggregateChart.vue
@@ -1,5 +1,5 @@
 <template>
-	<div style="position: relative; height: 200px">
+	<div v-if="chartData.labels.length > 1">
 		<Doughnut :data="chartData" :options="options" />
 	</div>
 </template>
@@ -8,6 +8,7 @@
 import { Doughnut } from "vue-chartjs";
 import { Chart, DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
 import formatter from "../../mixins/formatter";
+import colors from "../../colors";
 
 Chart.register(DoughnutController, ArcElement, LinearScale, Legend, Tooltip);
 Chart.defaults.font.family = window
@@ -16,7 +17,8 @@ Chart.defaults.font.family = window
 
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
-Chart.defaults.animation = false;
+
+const { generateLabels } = Chart.overrides.pie.plugins.legend.labels;
 
 export default {
 	name: "EnergyAggregateChart",
@@ -26,29 +28,7 @@ export default {
 		groupBy: { type: String, default: "loadpoint" },
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
 	},
-	data() {
-		return {
-			borderColor: null,
-		};
-	},
 	mixins: [formatter],
-	mounted() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.addEventListener("change", this.updateColors);
-		this.updateColors();
-	},
-	beforeUnmount() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.removeEventListener("change", this.updateColors);
-	},
-	methods: {
-		updateColors() {
-			const style = window.getComputedStyle(document.documentElement);
-			this.borderColor = style.getPropertyValue("--evcc-background");
-		},
-	},
 	computed: {
 		chartData() {
 			console.log("update energy aggregate data");
@@ -76,32 +56,54 @@ export default {
 		},
 		options() {
 			return {
-				animations: true,
 				locale: this.$i18n?.locale,
 				responsive: true,
 				maintainAspectRatio: false,
 				borderRadius: 6,
+				color: colors.text,
 				plugins: {
-					legend: { display: false },
+					legend: {
+						position: "right",
+						align: "start",
+						labels: {
+							usePointStyle: true,
+							pointStyle: "circle",
+							padding: 20,
+							generateLabels: (chart) => {
+								const labels = generateLabels(chart);
+								const total = chart.data.datasets[0].data.reduce(
+									(acc, curr) => acc + curr,
+									0
+								);
+								labels.forEach((label, dataIndex) => {
+									const value = chart.data.datasets[0].data[dataIndex];
+									const percentage = (100 / total) * value;
+									label.text = `${label.text} ${this.fmtPercentage(percentage, 1)}`;
+								});
+								return labels;
+							},
+						},
+						onClick: () => {},
+					},
 					tooltip: {
 						mode: "index",
 						intersect: false,
 						callbacks: {
 							label: (tooltipItem) => {
-								const datasetLabel = tooltipItem.dataset.label || "";
-								const value = tooltipItem.raw;
-								return value
-									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
-									: null;
+								const value = tooltipItem.raw || 0;
+								return this.fmtKWh(value * 1e3);
 							},
 						},
 						backgroundColor: "#000",
 					},
 				},
 				borderWidth: 3,
-				borderColor: this.borderColor,
+				borderColor: colors.background,
 				cutout: "70%",
 				radius: "100%",
+				animation: {
+					duration: 250,
+				},
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/EnergyAggregateEntries.vue b/assets/js/components/Sessions/EnergyAggregateEntries.vue
index 8567352467..57f4c356fa 100644
--- a/assets/js/components/Sessions/EnergyAggregateEntries.vue
+++ b/assets/js/components/Sessions/EnergyAggregateEntries.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="root">
+	<div class="root" v-if="entries.length > 1">
 		<div
 			v-for="entry in entries"
 			:key="entry.name"
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index 2800a1e4d0..97e8776b33 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -16,51 +16,32 @@ import {
 	Tooltip,
 } from "chart.js";
 import formatter from "../../mixins/formatter";
+import colors, { dimColor, fullColor } from "../../colors";
 
 Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
 Chart.defaults.font.family = window
 	.getComputedStyle(document.documentElement)
 	.getPropertyValue("--bs-font-sans-serif");
-
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
-Chart.defaults.animation = false;
+const { generateLabels } = Chart.defaults.plugins.legend.labels;
+
+const GROUPS = {
+	SOLAR: "solar",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
 
 export default {
 	name: "EnergyHistoryChart",
 	components: { Bar },
 	props: {
 		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: "loadpoint" },
+		groupBy: { type: String, default: GROUPS.SOLAR },
+		period: { type: String, default: "total" },
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
 	},
-	data() {
-		return {
-			textColor: null,
-			mutedColor: null,
-			gridColor: null,
-		};
-	},
 	mixins: [formatter],
-	mounted() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.addEventListener("change", this.updateColors);
-		this.updateColors();
-	},
-	beforeUnmount() {
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.removeEventListener("change", this.updateColors);
-	},
-	methods: {
-		updateColors() {
-			const style = window.getComputedStyle(document.documentElement);
-			this.textColor = style.getPropertyValue("--evcc-default-text");
-			this.mutedColor = style.getPropertyValue("--bs-gray-medium");
-			this.gridColor = style.getPropertyValue("--bs-border-color-translucent");
-		},
-	},
 	computed: {
 		firstDay() {
 			if (this.sessions.length === 0) {
@@ -74,35 +55,95 @@ export default {
 		year() {
 			return this.firstDay?.getFullYear();
 		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
 		chartData() {
-			console.log("update chart data");
+			console.log("update history data");
 			const result = {};
 			const groups = new Set();
 
 			if (this.sessions.length > 0) {
-				const lastDay = new Date(this.year, this.month, 0);
-				const daysInMonth = lastDay.getDate();
+				//const lastDay = new Date(this.year, this.month, 0);
+				//const daysInMonth = this.lastDay.getDate();
+				let xFrom, xTo;
+				if (this.period === "total") {
+					xFrom = this.firstDay.getFullYear();
+					xTo = this.lastDay.getFullYear();
+				} else if (this.period === "year") {
+					xFrom = 1;
+					xTo = 12;
+				} else {
+					xFrom = 1;
+					xTo = new Date(
+						this.lastDay.getFullYear(),
+						this.lastDay.getMonth() + 1,
+						0
+					).getDate();
+				}
 
-				for (let i = 1; i <= daysInMonth; i++) {
+				// initialize result with empty arrays
+				for (let i = xFrom; i <= xTo; i++) {
 					result[i] = {};
 				}
+
 				// Populate with actual data
 				this.sessions.forEach((session) => {
-					const day = new Date(session.created).getDate();
-					const groupKey = session[this.groupBy];
-					groups.add(groupKey);
-					if (!result[day][groupKey]) {
-						result[day][groupKey] = 0;
+					let index;
+					const date = new Date(session.created);
+					if (this.period === "month") {
+						index = date.getDate();
+					} else if (this.period === "year") {
+						index = date.getMonth() + 1;
+					} else {
+						index = date.getFullYear();
+					}
+
+					if (this.groupBy === GROUPS.SOLAR) {
+						groups.add("grid");
+						groups.add("self");
+						const charged = session.chargedEnergy;
+						const self = (charged / 100) * session.solarPercentage;
+						const grid = charged - self;
+						result[index].self = (result[index].self || 0) + self;
+						result[index].grid = (result[index].grid || 0) + grid;
+					} else {
+						const groupKey = session[this.groupBy];
+						groups.add(groupKey);
+						result[index][groupKey] =
+							(result[index][groupKey] || 0) + session.chargedEnergy;
 					}
-					result[day][groupKey] += session.chargedEnergy;
 				});
 			}
 
-			const datasets = Array.from(groups).map((group) => ({
-				backgroundColor: this.colorMappings[this.groupBy][group],
-				label: group,
-				data: Object.values(result).map((day) => day[group] || 0),
-			}));
+			const datasets = Array.from(groups).map((group) => {
+				const backgroundColor =
+					this.groupBy === GROUPS.SOLAR
+						? colors[group]
+						: this.colorMappings[this.groupBy][group];
+				const label =
+					this.groupBy === GROUPS.SOLAR ? this.$t(`sessions.group.${group}`) : group;
+
+				return {
+					backgroundColor,
+					label,
+					data: Object.values(result).map((day) => day[group] || 0),
+					borderRadius: (context) => {
+						const threshold = 0.04; // 400 Wh
+						const { dataIndex, datasetIndex } = context;
+						const currentValue = context.dataset.data[dataIndex];
+						const previousValuesExist = context.chart.data.datasets
+							.slice(datasetIndex + 1)
+							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
+						return currentValue > threshold && !previousValuesExist
+							? { topLeft: 10, topRight: 10 }
+							: { topLeft: 0, topRight: 0 };
+					},
+				};
+			});
 
 			return {
 				labels: Object.keys(result),
@@ -111,12 +152,11 @@ export default {
 		},
 		options() {
 			return {
-				animations: false,
 				locale: this.$i18n?.locale,
 				responsive: true,
 				maintainAspectRatio: false,
-				borderRadius: 6,
-				color: this.textColor,
+				color: colors.text,
+				borderSkipped: false,
 				plugins: {
 					legend: {
 						position: "bottom",
@@ -125,6 +165,17 @@ export default {
 							usePointStyle: true,
 							pointStyle: "circle",
 							padding: 20,
+							generateLabels: (chart) => {
+								const labels = generateLabels(chart);
+								labels.forEach((label, datasetIndex) => {
+									const sum = chart.data.datasets[datasetIndex].data.reduce(
+										(acc, curr) => acc + curr,
+										0
+									);
+									label.text = `${label.text} ${this.fmtKWh(sum * 1e3)}`;
+								});
+								return labels;
+							},
 						},
 						onClick: function (e, legendItem) {
 							const chartInstance = e.chart; // Get the chart instance from the event
@@ -134,13 +185,6 @@ export default {
 							const highlightAll = meta.highlight === true;
 							meta.highlight = !meta.highlight;
 
-							const dimColor = (color) => {
-								return color.replace(/FF$/, "20");
-							};
-							const fullColor = (color) => {
-								return color.replace(/20$/, "FF");
-							};
-
 							// Loop through all datasets
 							chartInstance.data.datasets.forEach((dataset, i) => {
 								const datasetMeta = chartInstance.getDatasetMeta(i);
@@ -160,6 +204,26 @@ export default {
 					tooltip: {
 						mode: "index",
 						intersect: false,
+						positioner: (context) => {
+							const tooltip = context.chart.tooltip;
+							const tooltipHeight = tooltip.height;
+							const tooltipWidth = tooltip.width;
+							const windowWidth = window.innerWidth;
+							const windowHeight = window.innerHeight;
+							const tooltipX = context.tooltipPosition().x;
+							const tooltipY = context.tooltipPosition().y;
+							const position = {
+								x:
+									tooltipX + tooltipWidth > windowWidth
+										? windowWidth - tooltipWidth
+										: tooltipX,
+								y:
+									tooltipY + tooltipHeight > windowHeight
+										? windowHeight - tooltipHeight
+										: tooltipY,
+							};
+							return position;
+						},
 						callbacks: {
 							title: (tooltipItem) => {
 								const date = new Date(this.year, this.month, tooltipItem[0].label);
@@ -167,13 +231,25 @@ export default {
 							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
-								const value = tooltipItem.raw;
-								return value
-									? datasetLabel + ": " + this.fmtKWh(value * 1e3)
-									: null;
+								const value = tooltipItem.raw || 0;
+								return datasetLabel + ": " + this.fmtKWh(value * 1e3);
+							},
+							labelColor: (item) => {
+								const { backgroundColor } = item.element.options;
+								const white = "#fff";
+								return {
+									borderColor: !item.raw ? colors.muted : white,
+									backgroundColor,
+								};
+							},
+							labelTextColor: (item) => {
+								return !item.raw ? colors.muted : "#fff";
 							},
 						},
 						backgroundColor: "#000",
+						itemSort: function (a, b) {
+							return b.datasetIndex - a.datasetIndex;
+						},
 					},
 				},
 				scales: {
@@ -181,25 +257,26 @@ export default {
 						stacked: true,
 						border: { display: false },
 						grid: { display: false },
-						ticks: { color: this.mutedColor },
+						ticks: { color: colors.muted },
 					},
 					y: {
 						stacked: true,
 						border: { display: false },
-						grid: { color: this.gridColor },
+						grid: { color: colors.border },
 						title: {
 							text: "kWh",
 							display: true,
-							color: this.mutedColor,
+							color: colors.muted,
 						},
 						ticks: {
 							callback: (value, index) =>
 								index % 2 === 0 ? this.fmtKWh(value * 1e3, true, false, 0) : null,
-							color: this.mutedColor,
+							color: colors.muted,
 						},
 						position: "right",
 					},
 				},
+				animation: false,
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/SolarChart.vue b/assets/js/components/Sessions/SolarChart.vue
new file mode 100644
index 0000000000..5676e8ba41
--- /dev/null
+++ b/assets/js/components/Sessions/SolarChart.vue
@@ -0,0 +1,123 @@
+<template>
+	<div v-if="chartData.labels.length > 1">
+		<PolarArea :data="chartData" :options="options" />
+	</div>
+</template>
+
+<script>
+import { PolarArea } from "vue-chartjs";
+import { Chart, RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor } from "../../colors";
+
+Chart.register(RadialLinearScale, ArcElement, Legend, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+const { generateLabels } = Chart.overrides.pie.plugins.legend.labels;
+
+export default {
+	name: "SolarChart",
+	components: { PolarArea },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		chartData() {
+			console.log("update energy aggregate data");
+			const aggregatedData = {};
+
+			this.sessions.forEach((session) => {
+				const groupKey = session[this.groupBy];
+				if (!aggregatedData[groupKey]) {
+					aggregatedData[groupKey] = { grid: 0, self: 0 };
+				}
+				const charged = session.chargedEnergy;
+				const self = (charged / 100) * session.solarPercentage;
+				const grid = charged - self;
+				aggregatedData[groupKey].self += self;
+				aggregatedData[groupKey].grid += grid;
+			});
+
+			// Sort the data by total energy in descending order
+			const sortedEntries = Object.entries(aggregatedData).sort(
+				(a, b) => b[1].grid + b[1].self - (a[1].grid + a[1].self)
+			);
+			const labels = sortedEntries.map(([label]) => label);
+			const data = sortedEntries.map(([, value]) => {
+				const total = value.grid + value.self;
+				const selfPercentage = (value.self / total) * 100;
+				return selfPercentage;
+			});
+
+			const borderColors = labels.map((label) => this.colorMappings[this.groupBy][label]);
+			const backgroundColors = borderColors.map((color) => dimColor(color));
+			return {
+				labels: labels,
+				datasets: [
+					{
+						data: data,
+						borderColor: borderColors,
+						backgroundColor: backgroundColors,
+					},
+				],
+			};
+		},
+		options() {
+			return {
+				locale: this.$i18n?.locale,
+				responsive: true,
+				maintainAspectRatio: false,
+				borderRadius: 8,
+				borderWidth: 3,
+				color: colors.text,
+				spacing: 0,
+				plugins: {
+					legend: {
+						position: "right",
+						align: "start",
+						boxWidth: 300,
+						labels: {
+							usePointStyle: true,
+							pointStyle: "circle",
+							padding: 20,
+							generateLabels: (chart) => {
+								const labels = generateLabels(chart);
+								labels.forEach((label, dataIndex) => {
+									console.log(label);
+									const value = chart.data.datasets[0].data[dataIndex];
+									label.text = `${label.text} ${this.fmtPercentage(value, 1)}`;
+									label.fillStyle = label.strokeStyle;
+									label.strokeStyle = colors.background;
+								});
+								return labels;
+							},
+						},
+						onClick: () => {},
+					},
+				},
+				scales: {
+					r: {
+						min: 0,
+						max: 100,
+						ticks: {
+							stepSize: 25,
+							color: colors.muted,
+							backdropColor: colors.background,
+						},
+						grid: { color: colors.border },
+					},
+				},
+				radius: "100%",
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index 0d5234beb9..eaf7ae3258 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -190,6 +190,7 @@ export default {
     },
     fmtDayMonth: function (date) {
       return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        weekday: "short",
         day: "numeric",
         month: "short",
       }).format(date);
diff --git a/assets/js/settings.js b/assets/js/settings.js
index 7cf9bc41a5..34de4c68c9 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -9,6 +9,7 @@ const SESSION_INFO = "session_info";
 const SESSION_COLUMNS = "session_columns";
 const SAVINGS_PERIOD = "savings_period";
 const SAVINGS_REGION = "savings_region";
+const SESSIONS_GROUP = "sessions_group";
 
 function read(key) {
   return window.localStorage[key];
@@ -60,6 +61,7 @@ const settings = reactive({
   sessionColumns: readArray(SESSION_COLUMNS),
   savingsPeriod: read(SAVINGS_PERIOD),
   savingsRegion: read(SAVINGS_REGION),
+  sessionsGroup: read(SESSIONS_GROUP),
 });
 
 watch(() => settings.locale, save(SETTINGS_LOCALE));
@@ -71,5 +73,5 @@ watch(() => settings.sessionInfo, saveArray(SESSION_INFO));
 watch(() => settings.sessionColumns, saveArray(SESSION_COLUMNS));
 watch(() => settings.savingsPeriod, save(SAVINGS_PERIOD));
 watch(() => settings.savingsRegion, save(SAVINGS_REGION));
-
+watch(() => settings.sessionsGroup, save(SESSIONS_GROUP));
 export default settings;
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index dc74d4bd56..05d2f87c01 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,6 +3,17 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
+				<div class="d-flex justify-content-center">
+					<SelectGroup
+						id="period"
+						:options="[
+							{ name: 'Monat', value: 'month' },
+							{ name: 'Jahr', value: 'year' },
+							{ name: 'Gesamt', value: 'total' },
+						]"
+						v-model="selectedPeriod"
+					/>
+				</div>
 				<div class="row mt-2 mt-md-3 mb-5 month-header pt-3 pb-2 sticky-top">
 					<div class="col-4 d-flex justify-content-start align-items-center">
 						<router-link
@@ -36,19 +47,14 @@
 				</div>
 				<div class="d-flex justify-content-between align-items-center">
 					<h3 class="fw-normal my-0">{{ energyTitle }}</h3>
-
 					<IconSelectGroup>
 						<IconSelectItem
-							:active="selectedGroup === 'loadpoint'"
-							@click="selectedGroup = 'loadpoint'"
+							v-for="group in Object.values(groups)"
+							:key="group"
+							:active="selectedGroup === group"
+							@click="updateGroup(group)"
 						>
-							<shopicon-regular-cablecharge></shopicon-regular-cablecharge>
-						</IconSelectItem>
-						<IconSelectItem
-							:active="selectedGroup === 'vehicle'"
-							@click="selectedGroup = 'vehicle'"
-						>
-							<shopicon-regular-car3></shopicon-regular-car3>
+							<component :is="groupIcons[group]"></component>
 						</IconSelectItem>
 					</IconSelectGroup>
 				</div>
@@ -57,46 +63,53 @@
 					:sessions="currentSessions"
 					:color-mappings="colorMappings"
 					:group-by="selectedGroup"
+					:period="selectedPeriod"
 				/>
-				<div class="row align-items-start">
-					<EnergyAggregateEntries
-						class="col-12 col-md-8 mb-5"
-						:sessions="currentSessions"
-						:color-mappings="colorMappings"
-						:group-by="selectedGroup"
-					/>
-					<EnergyAggregateChart
-						class="col-12 col-md-4 mb-5"
+				<div class="row align-items-start" v-if="selectedGroup !== groups.SOLAR">
+					<div class="col-12 col-md-6 mb-5">
+						<h3 class="fw-normal my-4">Sonnenanteil</h3>
+						<SolarChart
+							:sessions="currentSessions"
+							:color-mappings="colorMappings"
+							:group-by="selectedGroup"
+						/>
+					</div>
+					<div class="col-12 col-md-6 mb-5">
+						<h3 class="fw-normal my-4">Energiemenge</h3>
+						<EnergyAggregateChart
+							:sessions="currentSessions"
+							:color-mappings="colorMappings"
+							:group-by="selectedGroup"
+						/>
+					</div>
+				</div>
+				<div v-if="selectedPeriod === 'month'">
+					<h3>Übersicht</h3>
+					<SessionTable
 						:sessions="currentSessions"
-						:color-mappings="colorMappings"
-						:group-by="selectedGroup"
+						:vehicleFilter="vehicleFilter"
+						:loadpointFilter="loadpointFilter"
+						:currency="currency"
+						@show-session="showDetails"
 					/>
-				</div>
-				<h3>Übersicht</h3>
-				<SessionTable
-					:sessions="currentSessions"
-					:vehicleFilter="vehicleFilter"
-					:loadpointFilter="loadpointFilter"
-					:currency="currency"
-					@show-session="showDetails"
-				/>
-				<div class="d-grid gap-2 d-md-block mt-3 mb-5">
-					<a
-						v-if="currentSessions.length"
-						class="btn btn-outline-secondary text-nowrap me-md-2"
-						:href="csvLink"
-						download
-					>
-						{{ $t("sessions.csvMonth", { month: headline }) }}
-					</a>
-					<a
-						v-if="sessions.length"
-						class="btn btn-outline-secondary text-nowrap"
-						:href="csvTotalLink"
-						download
-					>
-						{{ $t("sessions.csvTotal") }}
-					</a>
+					<div class="d-grid gap-2 d-md-block mt-3 mb-5">
+						<a
+							v-if="currentSessions.length"
+							class="btn btn-outline-secondary text-nowrap me-md-2"
+							:href="csvLink"
+							download
+						>
+							{{ $t("sessions.csvMonth", { month: headline }) }}
+						</a>
+						<a
+							v-if="sessions.length"
+							class="btn btn-outline-secondary text-nowrap"
+							:href="csvTotalLink"
+							download
+						>
+							{{ $t("sessions.csvTotal") }}
+						</a>
+					</div>
 				</div>
 			</main>
 			<SessionDetailsModal
@@ -115,6 +128,7 @@ import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
 import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import "@h2d2/shopicons/es/regular/cablecharge";
 import "@h2d2/shopicons/es/regular/car3";
+import "@h2d2/shopicons/es/regular/sun";
 import formatter from "../mixins/formatter";
 import api from "../api";
 import store from "../store";
@@ -123,26 +137,19 @@ import SessionTable from "../components/Sessions/SessionTable.vue";
 import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
 import EnergyAggregateChart from "../components/Sessions/EnergyAggregateChart.vue";
 import EnergyAggregateEntries from "../components/Sessions/EnergyAggregateEntries.vue";
+import SolarChart from "../components/Sessions/SolarChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
+import SelectGroup from "../components/SelectGroup.vue";
+import colors from "../colors";
+import settings from "../settings";
 
-// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
-// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
-// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
-// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
-
-const COLORS = [
-	"#0077B6FF",
-	"#00B4D8FF",
-	"#90E0EFFF",
-	"#006769FF",
-	"#40A578FF",
-	"#9DDE8BFF",
-	"#F8961EFF",
-	"#F9C74FFF",
-	"#E6FF94FF",
-];
+const GROUPS = {
+	SOLAR: "solar",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
 
 export default {
 	name: "Sessions",
@@ -155,6 +162,8 @@ export default {
 		EnergyAggregateEntries,
 		IconSelectGroup,
 		IconSelectItem,
+		SelectGroup,
+		SolarChart,
 	},
 	mixins: [formatter],
 	props: {
@@ -163,12 +172,15 @@ export default {
 		year: { type: Number, default: () => new Date().getFullYear() },
 		loadpointFilter: { type: String, default: "" },
 		vehicleFilter: { type: String, default: "" },
+		offline: Boolean,
 	},
 	data() {
 		return {
 			sessions: [],
-			selectedGroup: "loadpoint",
+			selectedGroup: settings.sessionsGroup || GROUPS.SOLAR,
 			selectedSessionId: undefined,
+			selectedPeriod: "month",
+			groups: GROUPS,
 		};
 	},
 	head() {
@@ -176,9 +188,20 @@ export default {
 	},
 	computed: {
 		energyTitle() {
-			const energy =
-				this.currentSessions.reduce((acc, session) => acc + session.chargedEnergy, 0) * 1e3;
-			return `Geladene Energie: ${this.fmtKWh(energy)}`;
+			if (this.currentSessions.length === 0) {
+				return "";
+			}
+			const totalEnergy = this.currentSessions.reduce(
+				(acc, session) => acc + session.chargedEnergy,
+				0
+			);
+			const selfEnergy = this.currentSessions.reduce(
+				(acc, session) => acc + (session.chargedEnergy / 100) * session.solarPercentage,
+				0
+			);
+			const solarPercentage = (100 / totalEnergy) * selfEnergy;
+			console.log({ totalEnergy, selfEnergy, solarPercentage });
+			return `${this.fmtKWh(totalEnergy * 1e3)} geladen · ${this.fmtPercentage(solarPercentage)} Sonne`;
 		},
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
@@ -194,7 +217,18 @@ export default {
 		currentSessions() {
 			return this.sessionsWithDefaults.filter((session) => {
 				const date = new Date(session.created);
-				return date.getFullYear() === this.year && date.getMonth() + 1 === this.month;
+				switch (this.selectedPeriod) {
+					case "month":
+						return (
+							date.getFullYear() === this.year && date.getMonth() + 1 === this.month
+						);
+					case "year":
+						return date.getFullYear() === this.year;
+					case "total":
+						return true;
+					default:
+						return false;
+				}
 			});
 		},
 		vehicleList() {
@@ -258,7 +292,7 @@ export default {
 			if (length === 0) {
 				return false;
 			}
-			const first = new Date(this.sessions[length - 1].created);
+			const first = new Date(this.sessions[0].created);
 			return this.year > first.getFullYear() || this.month > first.getMonth() + 1;
 		},
 		colorMappings() {
@@ -285,7 +319,7 @@ export default {
 				const sortedEntries = Object.entries(energyAggregation).sort((a, b) => b[1] - a[1]);
 				sortedEntries.forEach(([key]) => {
 					if (!result[key]) {
-						result[key] = COLORS[colorIndex % COLORS.length];
+						result[key] = colors.palette[colorIndex % colors.palette.length];
 						colorIndex++;
 					}
 				});
@@ -294,7 +328,7 @@ export default {
 				this.sessionsWithDefaults.forEach((session) => {
 					const key = session[colorType];
 					if (!result[key]) {
-						result[key] = COLORS[colorIndex % COLORS.length];
+						result[key] = colors.palette[colorIndex % colors.palette.length];
 						colorIndex++;
 					}
 				});
@@ -310,6 +344,18 @@ export default {
 
 			return { loadpoint: loadpointColors, vehicle: vehicleColors };
 		},
+		groupIcons() {
+			return {
+				[GROUPS.SOLAR]: "shopicon-regular-sun",
+				[GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[GROUPS.VEHICLE]: "shopicon-regular-car3",
+			};
+		},
+	},
+	watch: {
+		offline: function () {
+			this.loadSessions();
+		},
 	},
 	mounted() {
 		this.loadSessions();
@@ -317,7 +363,11 @@ export default {
 	methods: {
 		async loadSessions() {
 			const response = await api.get("sessions");
-			this.sessions = response.data?.result;
+			// ensure sessions are sorted by created date
+			const sortedSessions = response.data?.result.sort((a, b) => {
+				return new Date(a.created) - new Date(b.created);
+			});
+			this.sessions = sortedSessions;
 		},
 		showDetails(sessionId) {
 			this.selectedSessionId = sessionId;
@@ -335,6 +385,10 @@ export default {
 			}
 			return `./api/sessions?${params.toString()}`;
 		},
+		updateGroup(group) {
+			this.selectedGroup = group;
+			settings.sessionsGroup = group;
+		},
 	},
 };
 </script>
diff --git a/i18n/de.toml b/i18n/de.toml
index f4ab3adf19..6760e5d4fd 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -638,6 +638,10 @@ allLoadpoints = "Alle Ladepunkte"
 allVehicles = "Alle Fahrzeuge"
 filter = "Filtern"
 
+[sessions.group]
+grid = "Netz"
+self = "Sonne"
+
 [settings]
 title = "Darstellung"
 
diff --git a/i18n/en.toml b/i18n/en.toml
index 55d170fcca..873689dd42 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -635,6 +635,10 @@ allLoadpoints = "all charging points"
 allVehicles = "all vehicles"
 filter = "Filter"
 
+[sessions.group]
+grid = "Grid"
+self = "Solar"
+
 [settings]
 title = "User Interface"
 

From d01e9c97f9312b80ebb7dd3cd0e628c2650f1ed2 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 23 Sep 2024 17:54:02 +0200
Subject: [PATCH 06/19] top navigation

---
 assets/js/components/SelectGroup.vue |   2 +-
 assets/js/router.js                  |   3 +-
 assets/js/views/Sessions.vue         | 363 +++++++++++++++++++++------
 3 files changed, 289 insertions(+), 79 deletions(-)

diff --git a/assets/js/components/SelectGroup.vue b/assets/js/components/SelectGroup.vue
index de7dd4ecc7..ef127f13f0 100644
--- a/assets/js/components/SelectGroup.vue
+++ b/assets/js/components/SelectGroup.vue
@@ -5,7 +5,7 @@
 			:id="i === 0 ? id : null"
 			:key="option.value"
 			type="button"
-			class="btn btn-lg flex-grow-1 flex-shrink-1"
+			class="btn btn-sm flex-grow-1 flex-shrink-1"
 			:class="{ active: option.value === modelValue, 'btn--equal': equalWidth }"
 			:disabled="option.disabled"
 			@click="$emit('update:modelValue', option.value)"
diff --git a/assets/js/router.js b/assets/js/router.js
index 90e824639f..fdec316e2f 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -43,10 +43,11 @@ export default function setupRouter(i18n) {
         path: "/sessions",
         component: () => import("./views/Sessions.vue"),
         props: (route) => {
-          const { month, year, loadpoint, vehicle } = route.query;
+          const { month, year, loadpoint, vehicle, period } = route.query;
           return {
             month: month ? parseInt(month, 10) : undefined,
             year: year ? parseInt(year, 10) : undefined,
+            period,
             loadpointFilter: loadpoint,
             vehicleFilter: vehicle,
           };
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 7b5646daac..682f438d6e 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,50 +3,146 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
-				<div class="d-flex justify-content-center">
-					<SelectGroup
-						id="period"
-						:options="[
-							{ name: 'Monat', value: 'month' },
-							{ name: 'Jahr', value: 'year' },
-							{ name: 'Gesamt', value: 'total' },
-						]"
-						v-model="selectedPeriod"
-					/>
-				</div>
-				<div class="row mt-2 mt-md-3 mb-5 month-header pt-3 pb-2 sticky-top">
-					<div class="col-4 d-flex justify-content-start align-items-center">
-						<router-link
-							class="d-flex text-decoration-none align-items-center"
-							:class="{ 'pe-none': !hasPrev, 'text-muted': !hasPrev }"
-							:to="{ query: { ...$route.query, ...prevYearMonth } }"
-						>
-							<shopicon-regular-angledoubleleftsmall
-								size="s"
-								class="me-1"
-							></shopicon-regular-angledoubleleftsmall>
-							<span class="d-none d-sm-block">{{ prevMonthName }}</span>
-							<span class="d-block d-sm-none">{{ prevMonthNameShort }}</span>
-						</router-link>
+				<div class="row mt-2 mb-3">
+					<div
+						class="col-lg-5 d-flex"
+						:class="showMonthNavigation || showYearNavigation ? 'mb-3' : 'mb-4'"
+					>
+						<SelectGroup
+							id="sessionsPeriod"
+							class="w-100"
+							:options="[
+								{ name: 'Monat', value: 'month' },
+								{ name: 'Jahr', value: 'year' },
+								{ name: 'Gesamt', value: 'total' },
+							]"
+							:modelValue="period"
+							@update:modelValue="changePeriod"
+						/>
 					</div>
-					<h2 class="col-4 text-center">{{ headline }}</h2>
-					<div class="col-4 d-flex justify-content-end align-items-center">
-						<router-link
-							class="d-flex text-decoration-none"
-							:class="{ 'pe-none': !hasNext, 'text-muted': !hasNext }"
-							:to="{ query: { ...$route.query, ...nextYearMonth } }"
+					<div
+						v-if="showMonthNavigation || showYearNavigation"
+						class="col-lg-6 mb-3 offset-lg-1 d-sm-flex justify-content-lg-end gap-lg-4"
+						:class="
+							showMonthNavigation ? 'justify-content-between' : 'justify-content-end'
+						"
+					>
+						<div
+							v-if="showMonthNavigation"
+							class="d-none d-sm-flex mb-2 mb-lg-0 justify-content-between"
 						>
-							<span class="d-none d-sm-block">{{ nextMonthName }}</span>
-							<span class="d-block d-sm-none">{{ nextMonthNameShort }}</span>
-							<shopicon-regular-angledoublerightsmall
-								size="s"
-								class="ms-1"
-							></shopicon-regular-angledoublerightsmall>
-						</router-link>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasPrevMonth"
+								@click="navigatePrevMonth"
+							>
+								<shopicon-regular-angledoubleleftsmall
+									size="s"
+									class="me-1"
+								></shopicon-regular-angledoubleleftsmall>
+							</button>
+							<CustomSelect
+								id="sessionsMonth"
+								:options="monthOptions"
+								:selected="month"
+								@change="navigateMonth($event.target.value)"
+							>
+								<button
+									class="btn btn-sm border-0 text-truncate h-100"
+									style="width: 8em"
+								>
+									{{ monthName }}
+								</button>
+							</CustomSelect>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasNextMonth"
+								@click="navigateNextMonth"
+							>
+								<shopicon-regular-angledoublerightsmall
+									size="s"
+									class="ms-1"
+								></shopicon-regular-angledoublerightsmall>
+							</button>
+						</div>
+						<div
+							v-if="showMonthNavigation"
+							class="d-flex d-sm-none mb-2 mb-lg-0 justify-content-between"
+						>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasPrevMonth"
+								@click="navigatePrevMonth"
+							>
+								<shopicon-regular-angledoubleleftsmall
+									size="s"
+									class="me-1"
+								></shopicon-regular-angledoubleleftsmall>
+							</button>
+							<CustomSelect
+								id="sessionsMonthYear"
+								:options="monthYearOptions"
+								:selected="month"
+								@change="navigateMonthYear($event.target.value)"
+							>
+								<button class="btn btn-sm border-0 h-100 text-truncate">
+									{{ headline }}
+								</button>
+							</CustomSelect>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasNextMonth"
+								@click="navigateNextMonth"
+							>
+								<shopicon-regular-angledoublerightsmall
+									size="s"
+									class="ms-1"
+								></shopicon-regular-angledoublerightsmall>
+							</button>
+						</div>
+						<div
+							v-if="showYearNavigation"
+							class="mb-2 mb-lg-0 justify-content-between"
+							:class="showMonthNavigation ? 'd-none d-sm-flex' : 'd-flex'"
+						>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasPrevYear"
+								@click="navigatePrevYear"
+							>
+								<shopicon-regular-angledoubleleftsmall
+									size="s"
+									class="me-1"
+								></shopicon-regular-angledoubleleftsmall>
+							</button>
+							<CustomSelect
+								id="sessionsYear"
+								:options="yearOptions"
+								:selected="year"
+								@change="navigateYear($event.target.value)"
+							>
+								<button class="btn btn-sm border-0 h-100" style="width: 4em">
+									{{ year }}
+								</button>
+							</CustomSelect>
+							<button
+								class="btn btn-sm border-0"
+								:disabled="!hasNextYear"
+								@click="navigateNextYear"
+							>
+								<shopicon-regular-angledoublerightsmall
+									size="s"
+									class="ms-1"
+								></shopicon-regular-angledoublerightsmall>
+							</button>
+						</div>
 					</div>
 				</div>
 				<div class="d-flex justify-content-between align-items-center">
-					<h3 class="fw-normal my-0">{{ energyTitle }}</h3>
+					<h3 class="fw-normal my-0 d-flex gap-2 flex-wrap">
+						<span class="d-block no-wrap">{{ energyTitle }}</span>
+						<small class="d-block no-wrap">{{ energySubTitle }}</small>
+					</h3>
 					<IconSelectGroup>
 						<IconSelectItem
 							v-for="group in Object.values(groups)"
@@ -63,7 +159,7 @@
 					:sessions="currentSessions"
 					:color-mappings="colorMappings"
 					:group-by="selectedGroup"
-					:period="selectedPeriod"
+					:period="period"
 				/>
 				<div class="row align-items-start" v-if="selectedGroup !== groups.SOLAR">
 					<div class="col-12 col-md-6 mb-5">
@@ -83,7 +179,7 @@
 						/>
 					</div>
 				</div>
-				<div v-if="selectedPeriod === 'month'">
+				<div v-if="showTable">
 					<h3>Übersicht</h3>
 					<SessionTable
 						:sessions="currentSessions"
@@ -95,7 +191,7 @@
 					<div class="d-grid gap-2 d-md-block mt-3 mb-5">
 						<a
 							v-if="currentSessions.length"
-							class="btn btn-outline-secondary text-nowrap me-md-2"
+							class="btn btn-sm btn-outline-secondary text-nowrap me-md-2"
 							:href="csvLink"
 							download
 						>
@@ -103,7 +199,7 @@
 						</a>
 						<a
 							v-if="sessions.length"
-							class="btn btn-outline-secondary text-nowrap"
+							class="btn btn-sm btn-outline-secondary text-nowrap"
 							:href="csvTotalLink"
 							download
 						>
@@ -142,6 +238,7 @@ import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
 import SelectGroup from "../components/SelectGroup.vue";
+import CustomSelect from "../components/CustomSelect.vue";
 import colors from "../colors";
 import settings from "../settings";
 
@@ -151,6 +248,12 @@ const GROUPS = {
 	VEHICLE: "vehicle",
 };
 
+const PERIODS = {
+	MONTH: "month",
+	YEAR: "year",
+	TOTAL: "total",
+};
+
 export default {
 	name: "Sessions",
 	components: {
@@ -163,6 +266,7 @@ export default {
 		IconSelectGroup,
 		IconSelectItem,
 		SelectGroup,
+		CustomSelect,
 		SolarChart,
 	},
 	mixins: [formatter],
@@ -170,6 +274,7 @@ export default {
 		notifications: Array,
 		month: { type: Number, default: () => new Date().getMonth() + 1 },
 		year: { type: Number, default: () => new Date().getFullYear() },
+		period: { type: String, default: PERIODS.MONTH },
 		loadpointFilter: { type: String, default: "" },
 		vehicleFilter: { type: String, default: "" },
 		offline: Boolean,
@@ -179,7 +284,6 @@ export default {
 			sessions: [],
 			selectedGroup: settings.sessionsGroup || GROUPS.SOLAR,
 			selectedSessionId: undefined,
-			selectedPeriod: "month",
 			groups: GROUPS,
 		};
 	},
@@ -188,20 +292,22 @@ export default {
 	},
 	computed: {
 		energyTitle() {
-			if (this.currentSessions.length === 0) {
-				return "";
-			}
-			const totalEnergy = this.currentSessions.reduce(
-				(acc, session) => acc + session.chargedEnergy,
-				0
-			);
-			const selfEnergy = this.currentSessions.reduce(
+			const totalEnergy = this.totalEnergy;
+			const selfEnergy = this.selfEnergy;
+			const solarPercentage = totalEnergy > 0 ? (100 / totalEnergy) * selfEnergy : 0;
+			return `${this.fmtPercentage(solarPercentage)} Sonne`;
+		},
+		energySubTitle() {
+			return `${this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO)} gesamt`;
+		},
+		totalEnergy() {
+			return this.currentSessions.reduce((acc, session) => acc + session.chargedEnergy, 0);
+		},
+		selfEnergy() {
+			return this.currentSessions.reduce(
 				(acc, session) => acc + (session.chargedEnergy / 100) * session.solarPercentage,
 				0
 			);
-			const solarPercentage = (100 / totalEnergy) * selfEnergy;
-			console.log({ totalEnergy, selfEnergy, solarPercentage });
-			return `${this.fmtWh(totalEnergy * 1e3, POWER_UNIT.AUTO)} geladen · ${this.fmtPercentage(solarPercentage)} Sonne`;
 		},
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
@@ -217,14 +323,14 @@ export default {
 		currentSessions() {
 			return this.sessionsWithDefaults.filter((session) => {
 				const date = new Date(session.created);
-				switch (this.selectedPeriod) {
-					case "month":
+				switch (this.period) {
+					case PERIODS.MONTH:
 						return (
 							date.getFullYear() === this.year && date.getMonth() + 1 === this.month
 						);
-					case "year":
+					case PERIODS.YEAR:
 						return date.getFullYear() === this.year;
-					case "total":
+					case PERIODS.TOTAL:
 						return true;
 					default:
 						return false;
@@ -241,6 +347,11 @@ export default {
 		currency() {
 			return store.state.currency;
 		},
+		monthName() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			return this.fmtMonth(date);
+		},
 		headline() {
 			const date = new Date();
 			date.setMonth(this.month - 1, 1);
@@ -253,48 +364,61 @@ export default {
 		csvTotalLink() {
 			return this.csvHrefLink();
 		},
-		prevDate() {
+		prevMonthDate() {
 			const date = new Date();
 			date.setFullYear(this.year);
 			date.setMonth(this.month - 2, 1);
 			return date;
 		},
 		prevYearMonth() {
-			return { year: this.prevDate.getFullYear(), month: this.prevDate.getMonth() + 1 };
-		},
-		prevMonthName() {
-			return this.fmtMonth(this.prevDate);
-		},
-		prevMonthNameShort() {
-			return this.fmtMonth(this.prevDate, true);
+			return {
+				year: this.prevMonthDate.getFullYear(),
+				month: this.prevMonthDate.getMonth() + 1,
+			};
 		},
-		nextDate() {
+		nextMonthDate() {
 			const date = new Date();
 			date.setFullYear(this.year);
 			date.setMonth(this.month, 1);
 			return date;
 		},
 		nextYearMonth() {
-			return { year: this.nextDate.getFullYear(), month: this.nextDate.getMonth() + 1 };
+			return {
+				year: this.nextMonthDate.getFullYear(),
+				month: this.nextMonthDate.getMonth() + 1,
+			};
 		},
-		nextMonthName() {
-			return this.fmtMonth(this.nextDate);
+		nextYear() {
+			const date = new Date();
+			date.setFullYear(this.year + 1);
+			return date.getFullYear();
 		},
-		nextMonthNameShort() {
-			return this.fmtMonth(this.nextDate, true);
+		prevYear() {
+			const date = new Date();
+			date.setFullYear(this.year - 1);
+			return date.getFullYear();
 		},
-		hasNext() {
+		hasNextMonth() {
 			const now = new Date();
 			return this.year < now.getFullYear() || this.month < now.getMonth() + 1;
 		},
-		hasPrev() {
-			const length = this.sessions.length;
-			if (length === 0) {
+		hasPrevMonth() {
+			if (this.sessions.length === 0) {
 				return false;
 			}
 			const first = new Date(this.sessions[0].created);
 			return this.year > first.getFullYear() || this.month > first.getMonth() + 1;
 		},
+		hasNextYear() {
+			return this.year < new Date().getFullYear();
+		},
+		hasPrevYear() {
+			if (this.sessions.length === 0) {
+				return false;
+			}
+			const last = new Date(this.sessions[0].created);
+			return this.year > last.getFullYear();
+		},
 		colorMappings() {
 			const lastThreeMonths = new Date();
 			lastThreeMonths.setMonth(lastThreeMonths.getMonth() - 3);
@@ -351,6 +475,52 @@ export default {
 				[GROUPS.VEHICLE]: "shopicon-regular-car3",
 			};
 		},
+		showTable() {
+			return this.period === PERIODS.MONTH;
+		},
+		showMonthNavigation() {
+			return this.period === PERIODS.MONTH;
+		},
+		showYearNavigation() {
+			return [PERIODS.MONTH, PERIODS.YEAR].includes(this.period);
+		},
+		yearOptions() {
+			if (this.sessions.length === 0) {
+				return [];
+			}
+			const first = new Date(this.sessions[0].created);
+			const last = new Date();
+			const years = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				years.push({ name: year, value: year });
+			}
+			return years;
+		},
+		monthOptions() {
+			return Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ({
+				name: this.fmtMonth(new Date(this.year, month - 1, 1)),
+				value: month,
+			}));
+		},
+		monthYearOptions() {
+			if (this.sessions.length === 0) {
+				return [];
+			}
+			const first = new Date(this.sessions[0].created);
+			const last = new Date();
+			const yearMonths = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				const startMonth = year === first.getFullYear() ? first.getMonth() + 1 : 1;
+				const endMonth = year === last.getFullYear() ? last.getMonth() + 1 : 12;
+				for (let month = startMonth; month <= endMonth; month++) {
+					yearMonths.push({
+						name: this.fmtMonthYear(new Date(year, month - 1, 1)),
+						value: `${year}-${month}`,
+					});
+				}
+			}
+			return yearMonths;
+		},
 	},
 	watch: {
 		offline: function () {
@@ -361,6 +531,23 @@ export default {
 		this.loadSessions();
 	},
 	methods: {
+		changePeriod(newPeriod) {
+			let month = this.month;
+			let year = this.year;
+			let period = newPeriod;
+			switch (period) {
+				case PERIODS.TOTAL:
+					month = undefined;
+					year = undefined;
+					break;
+				case PERIODS.YEAR:
+					month = undefined;
+					break;
+				default:
+					period = undefined;
+			}
+			this.$router.push({ query: { ...this.$route.query, period, month, year } });
+		},
 		async loadSessions() {
 			const response = await api.get("sessions");
 			// ensure sessions are sorted by created date
@@ -389,6 +576,28 @@ export default {
 			this.selectedGroup = group;
 			settings.sessionsGroup = group;
 		},
+		navigateNextYear() {
+			this.$router.push({ query: { ...this.$route.query, year: this.nextYear } });
+		},
+		navigatePrevYear() {
+			this.$router.push({ query: { ...this.$route.query, year: this.prevYear } });
+		},
+		navigateNextMonth() {
+			this.$router.push({ query: { ...this.$route.query, ...this.nextYearMonth } });
+		},
+		navigatePrevMonth() {
+			this.$router.push({ query: { ...this.$route.query, ...this.prevYearMonth } });
+		},
+		navigateYear(year) {
+			this.$router.push({ query: { ...this.$route.query, year } });
+		},
+		navigateMonth(month) {
+			this.$router.push({ query: { ...this.$route.query, month } });
+		},
+		navigateMonthYear(monthYear) {
+			const [year, month] = monthYear.split("-");
+			this.$router.push({ query: { ...this.$route.query, year, month } });
+		},
 	},
 };
 </script>

From b4cc0576bf3d1514284873e2a31fc852ed0fa6b4 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 27 Sep 2024 14:33:30 +0200
Subject: [PATCH 07/19] use correct label override

---
 assets/js/components/Sessions/EnergyAggregateChart.vue | 2 +-
 assets/js/components/Sessions/SolarChart.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/Sessions/EnergyAggregateChart.vue b/assets/js/components/Sessions/EnergyAggregateChart.vue
index 9d869bfaae..3dd443d8b9 100644
--- a/assets/js/components/Sessions/EnergyAggregateChart.vue
+++ b/assets/js/components/Sessions/EnergyAggregateChart.vue
@@ -18,7 +18,7 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
-const { generateLabels } = Chart.overrides.pie.plugins.legend.labels;
+const { generateLabels } = Chart.overrides.doughnut.plugins.legend.labels;
 
 export default {
 	name: "EnergyAggregateChart",
diff --git a/assets/js/components/Sessions/SolarChart.vue b/assets/js/components/Sessions/SolarChart.vue
index 5676e8ba41..1dfc1ee232 100644
--- a/assets/js/components/Sessions/SolarChart.vue
+++ b/assets/js/components/Sessions/SolarChart.vue
@@ -18,7 +18,7 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
-const { generateLabels } = Chart.overrides.pie.plugins.legend.labels;
+const { generateLabels } = Chart.overrides.polarArea.plugins.legend.labels;
 
 export default {
 	name: "SolarChart",

From 8fd9e419fd667b2c90e2d188472f3a3fe22bbfff Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 27 Sep 2024 16:11:18 +0200
Subject: [PATCH 08/19] sessions header refactor

---
 .../js/components/Sessions/DateNavigator.vue  | 169 ++++++++++++++++
 .../Sessions/DateNavigatorButton.vue          |  33 +++
 .../js/components/Sessions/PeriodSelector.vue |  35 ++++
 assets/js/views/Sessions.vue                  | 188 +++---------------
 i18n/de.toml                                  |   5 +
 i18n/en.toml                                  |   5 +
 6 files changed, 279 insertions(+), 156 deletions(-)
 create mode 100644 assets/js/components/Sessions/DateNavigator.vue
 create mode 100644 assets/js/components/Sessions/DateNavigatorButton.vue
 create mode 100644 assets/js/components/Sessions/PeriodSelector.vue

diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
new file mode 100644
index 0000000000..6842b8f0e0
--- /dev/null
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -0,0 +1,169 @@
+<!-- DateNavigator.vue -->
+<template>
+	<div
+		class="d-sm-flex justify-content-lg-end gap-lg-4"
+		:class="showMonth ? 'justify-content-between' : 'justify-content-end'"
+	>
+		<div v-if="showMonth" class="d-none d-sm-flex mb-2 mb-lg-0 justify-content-between">
+			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
+			<CustomSelect
+				id="sessionsMonth"
+				:options="monthOptions"
+				:selected="month"
+				@change="emitMonth($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 text-truncate h-100" style="width: 8em">
+					{{ monthName }}
+				</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
+		</div>
+		<div v-if="showMonth" class="d-flex d-sm-none mb-2 mb-lg-0 justify-content-between">
+			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
+			<CustomSelect
+				id="sessionsMonthYear"
+				:options="monthYearOptions"
+				:selected="month"
+				@change="emitMonthYear($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 h-100 text-truncate">{{ headline }}</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
+		</div>
+		<div
+			v-if="showYear"
+			class="mb-2 mb-lg-0 justify-content-between"
+			:class="showMonth ? 'd-none d-sm-flex' : 'd-flex'"
+		>
+			<DateNavigatorButton prev :disabled="!hasPrevYear" :onClick="emitPrevYear" />
+			<CustomSelect
+				id="sessionsYear"
+				:options="yearOptions"
+				:selected="year"
+				@change="emitYear($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 h-100" style="width: 4em">{{ year }}</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextYear" :onClick="emitNextYear" />
+		</div>
+	</div>
+</template>
+
+<script>
+import CustomSelect from "../CustomSelect.vue";
+import DateNavigatorButton from "./DateNavigatorButton.vue";
+
+export default {
+	name: "DateNavigator",
+	components: {
+		CustomSelect,
+		DateNavigatorButton,
+	},
+	props: {
+		month: Number,
+		year: Number,
+		startDate: Date,
+		showMonth: Boolean,
+		showYear: Boolean,
+	},
+	emits: ["update-date"],
+	computed: {
+		hasPrevMonth() {
+			return (
+				this.year > this.startDate.getFullYear() ||
+				this.month > this.startDate.getMonth() + 1
+			);
+		},
+		hasNextMonth() {
+			const now = new Date();
+			return this.year < now.getFullYear() || this.month < now.getMonth() + 1;
+		},
+		hasPrevYear() {
+			return this.year > this.startDate.getFullYear();
+		},
+		hasNextYear() {
+			return this.year < new Date().getFullYear();
+		},
+		monthOptions() {
+			return Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ({
+				name: this.fmtMonth(new Date(this.year, month - 1, 1)),
+				value: month,
+			}));
+		},
+		monthYearOptions() {
+			const first = this.startDate;
+			const last = new Date();
+			const yearMonths = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				const startMonth = year === first.getFullYear() ? first.getMonth() + 1 : 1;
+				const endMonth = year === last.getFullYear() ? last.getMonth() + 1 : 12;
+				for (let month = startMonth; month <= endMonth; month++) {
+					yearMonths.push({
+						name: this.fmtMonthYear(new Date(year, month - 1, 1)),
+						value: `${year}-${month}`,
+					});
+				}
+			}
+			return yearMonths;
+		},
+		yearOptions() {
+			const first = this.startDate;
+			const last = new Date();
+			const years = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				years.push({ name: year, value: year });
+			}
+			return years;
+		},
+		monthName() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			return this.fmtMonth(date);
+		},
+		headline() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			date.setFullYear(this.year);
+			return this.fmtMonthYear(date);
+		},
+	},
+	methods: {
+		emitPrevMonth() {
+			const prevMonthDate = new Date(this.year, this.month - 2, 1);
+			this.$emit("update-date", {
+				year: prevMonthDate.getFullYear(),
+				month: prevMonthDate.getMonth() + 1,
+			});
+		},
+		emitNextMonth() {
+			const nextMonthDate = new Date(this.year, this.month, 1);
+			this.$emit("update-date", {
+				year: nextMonthDate.getFullYear(),
+				month: nextMonthDate.getMonth() + 1,
+			});
+		},
+		emitPrevYear() {
+			this.$emit("update-date", { year: this.year - 1, month: undefined });
+		},
+		emitNextYear() {
+			this.$emit("update-date", { year: this.year + 1, month: undefined });
+		},
+		emitMonth(month) {
+			this.$emit("update-date", { year: this.year, month });
+		},
+		emitMonthYear(monthYear) {
+			const [year, month] = monthYear.split("-");
+			this.$emit("update-date", { year: parseInt(year), month: parseInt(month) });
+		},
+		emitYear(year) {
+			this.$emit("update-date", { year, month: undefined });
+		},
+		fmtMonth(date) {
+			return date.toLocaleString("default", { month: "long" });
+		},
+		fmtMonthYear(date) {
+			return `${this.fmtMonth(date)} ${date.getFullYear()}`;
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/DateNavigatorButton.vue b/assets/js/components/Sessions/DateNavigatorButton.vue
new file mode 100644
index 0000000000..2ae7af0a36
--- /dev/null
+++ b/assets/js/components/Sessions/DateNavigatorButton.vue
@@ -0,0 +1,33 @@
+<template>
+	<button class="btn btn-sm border-0" :disabled="disabled" @click="onClick">
+		<component :is="icon" size="s" :class="iconClass"></component>
+	</button>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
+import "@h2d2/shopicons/es/regular/angledoublerightsmall";
+
+export default {
+	name: "DateNavigatorButton",
+	props: {
+		disabled: Boolean,
+		prev: Boolean,
+		next: Boolean,
+		onClick: Function,
+	},
+	computed: {
+		icon() {
+			if (this.prev) {
+				return "shopicon-regular-angledoubleleftsmall";
+			} else if (this.next) {
+				return "shopicon-regular-angledoublerightsmall";
+			}
+			return null;
+		},
+		iconClass() {
+			return this.prev ? "me-1" : this.next ? "ms-1" : "";
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/PeriodSelector.vue b/assets/js/components/Sessions/PeriodSelector.vue
new file mode 100644
index 0000000000..193c9c927d
--- /dev/null
+++ b/assets/js/components/Sessions/PeriodSelector.vue
@@ -0,0 +1,35 @@
+<template>
+	<SelectGroup
+		id="sessionsPeriod"
+		class="w-100"
+		:options="periodOptions"
+		:modelValue="period"
+		@update:modelValue="changePeriod"
+	/>
+</template>
+
+<script>
+import SelectGroup from "../SelectGroup.vue";
+
+export default {
+	name: "PeriodSelector",
+	components: {
+		SelectGroup,
+	},
+	props: {
+		period: {
+			type: String,
+			required: true,
+		},
+		periodOptions: {
+			type: Array,
+			required: true,
+		},
+	},
+	methods: {
+		changePeriod(newPeriod) {
+			this.$emit("update:period", newPeriod);
+		},
+	},
+};
+</script>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 682f438d6e..96ac5b6649 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -5,137 +5,24 @@
 			<main class="col-12">
 				<div class="row mt-2 mb-3">
 					<div
-						class="col-lg-5 d-flex"
-						:class="showMonthNavigation || showYearNavigation ? 'mb-3' : 'mb-4'"
+						class="col-lg-5 d-flex mb-sm-3"
+						:class="showDateNavigator ? 'mb-3' : 'mb-4'"
 					>
-						<SelectGroup
-							id="sessionsPeriod"
-							class="w-100"
-							:options="[
-								{ name: 'Monat', value: 'month' },
-								{ name: 'Jahr', value: 'year' },
-								{ name: 'Gesamt', value: 'total' },
-							]"
-							:modelValue="period"
-							@update:modelValue="changePeriod"
+						<PeriodSelector
+							:period="period"
+							:periodOptions="periodOptions"
+							@update:period="changePeriod"
 						/>
 					</div>
-					<div
-						v-if="showMonthNavigation || showYearNavigation"
-						class="col-lg-6 mb-3 offset-lg-1 d-sm-flex justify-content-lg-end gap-lg-4"
-						:class="
-							showMonthNavigation ? 'justify-content-between' : 'justify-content-end'
-						"
-					>
-						<div
-							v-if="showMonthNavigation"
-							class="d-none d-sm-flex mb-2 mb-lg-0 justify-content-between"
-						>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasPrevMonth"
-								@click="navigatePrevMonth"
-							>
-								<shopicon-regular-angledoubleleftsmall
-									size="s"
-									class="me-1"
-								></shopicon-regular-angledoubleleftsmall>
-							</button>
-							<CustomSelect
-								id="sessionsMonth"
-								:options="monthOptions"
-								:selected="month"
-								@change="navigateMonth($event.target.value)"
-							>
-								<button
-									class="btn btn-sm border-0 text-truncate h-100"
-									style="width: 8em"
-								>
-									{{ monthName }}
-								</button>
-							</CustomSelect>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasNextMonth"
-								@click="navigateNextMonth"
-							>
-								<shopicon-regular-angledoublerightsmall
-									size="s"
-									class="ms-1"
-								></shopicon-regular-angledoublerightsmall>
-							</button>
-						</div>
-						<div
-							v-if="showMonthNavigation"
-							class="d-flex d-sm-none mb-2 mb-lg-0 justify-content-between"
-						>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasPrevMonth"
-								@click="navigatePrevMonth"
-							>
-								<shopicon-regular-angledoubleleftsmall
-									size="s"
-									class="me-1"
-								></shopicon-regular-angledoubleleftsmall>
-							</button>
-							<CustomSelect
-								id="sessionsMonthYear"
-								:options="monthYearOptions"
-								:selected="month"
-								@change="navigateMonthYear($event.target.value)"
-							>
-								<button class="btn btn-sm border-0 h-100 text-truncate">
-									{{ headline }}
-								</button>
-							</CustomSelect>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasNextMonth"
-								@click="navigateNextMonth"
-							>
-								<shopicon-regular-angledoublerightsmall
-									size="s"
-									class="ms-1"
-								></shopicon-regular-angledoublerightsmall>
-							</button>
-						</div>
-						<div
-							v-if="showYearNavigation"
-							class="mb-2 mb-lg-0 justify-content-between"
-							:class="showMonthNavigation ? 'd-none d-sm-flex' : 'd-flex'"
-						>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasPrevYear"
-								@click="navigatePrevYear"
-							>
-								<shopicon-regular-angledoubleleftsmall
-									size="s"
-									class="me-1"
-								></shopicon-regular-angledoubleleftsmall>
-							</button>
-							<CustomSelect
-								id="sessionsYear"
-								:options="yearOptions"
-								:selected="year"
-								@change="navigateYear($event.target.value)"
-							>
-								<button class="btn btn-sm border-0 h-100" style="width: 4em">
-									{{ year }}
-								</button>
-							</CustomSelect>
-							<button
-								class="btn btn-sm border-0"
-								:disabled="!hasNextYear"
-								@click="navigateNextYear"
-							>
-								<shopicon-regular-angledoublerightsmall
-									size="s"
-									class="ms-1"
-								></shopicon-regular-angledoublerightsmall>
-							</button>
-						</div>
+					<div v-if="showDateNavigator" class="col-lg-6 mb-3 offset-lg-1">
+						<DateNavigator
+							:month="month"
+							:year="year"
+							:startDate="startDate"
+							:showMonth="showMonthNavigation"
+							:showYear="showYearNavigation"
+							@update-date="updateDate"
+						/>
 					</div>
 				</div>
 				<div class="d-flex justify-content-between align-items-center">
@@ -220,8 +107,6 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
-import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import "@h2d2/shopicons/es/regular/cablecharge";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/sun";
@@ -241,6 +126,8 @@ import SelectGroup from "../components/SelectGroup.vue";
 import CustomSelect from "../components/CustomSelect.vue";
 import colors from "../colors";
 import settings from "../settings";
+import PeriodSelector from "../components/Sessions/PeriodSelector.vue";
+import DateNavigator from "../components/Sessions/DateNavigator.vue";
 
 const GROUPS = {
 	SOLAR: "solar",
@@ -268,6 +155,8 @@ export default {
 		SelectGroup,
 		CustomSelect,
 		SolarChart,
+		PeriodSelector,
+		DateNavigator,
 	},
 	mixins: [formatter],
 	props: {
@@ -300,6 +189,12 @@ export default {
 		energySubTitle() {
 			return `${this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO)} gesamt`;
 		},
+		periodOptions() {
+			return Object.entries(PERIODS).map(([key, value]) => ({
+				name: this.$t(`sessions.period.${key.toLowerCase()}`),
+				value,
+			}));
+		},
 		totalEnergy() {
 			return this.currentSessions.reduce((acc, session) => acc + session.chargedEnergy, 0);
 		},
@@ -309,6 +204,9 @@ export default {
 				0
 			);
 		},
+		startDate() {
+			return new Date(this.sessions[0]?.created || Date.now());
+		},
 		topNavigation: function () {
 			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
 			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
@@ -484,6 +382,9 @@ export default {
 		showYearNavigation() {
 			return [PERIODS.MONTH, PERIODS.YEAR].includes(this.period);
 		},
+		showDateNavigator() {
+			return this.showMonthNavigation || this.showYearNavigation;
+		},
 		yearOptions() {
 			if (this.sessions.length === 0) {
 				return [];
@@ -576,34 +477,9 @@ export default {
 			this.selectedGroup = group;
 			settings.sessionsGroup = group;
 		},
-		navigateNextYear() {
-			this.$router.push({ query: { ...this.$route.query, year: this.nextYear } });
-		},
-		navigatePrevYear() {
-			this.$router.push({ query: { ...this.$route.query, year: this.prevYear } });
-		},
-		navigateNextMonth() {
-			this.$router.push({ query: { ...this.$route.query, ...this.nextYearMonth } });
-		},
-		navigatePrevMonth() {
-			this.$router.push({ query: { ...this.$route.query, ...this.prevYearMonth } });
-		},
-		navigateYear(year) {
-			this.$router.push({ query: { ...this.$route.query, year } });
-		},
-		navigateMonth(month) {
-			this.$router.push({ query: { ...this.$route.query, month } });
-		},
-		navigateMonthYear(monthYear) {
-			const [year, month] = monthYear.split("-");
+		updateDate({ year, month }) {
 			this.$router.push({ query: { ...this.$route.query, year, month } });
 		},
 	},
 };
 </script>
-
-<style scoped>
-.month-header {
-	background-color: var(--evcc-background);
-}
-</style>
diff --git a/i18n/de.toml b/i18n/de.toml
index 3aa4ec4ac7..79e69d85ea 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -648,6 +648,11 @@ filter = "Filtern"
 grid = "Netz"
 self = "Sonne"
 
+[sessions.period]
+month = "Monat"
+total = "Gesamt"
+year = "Jahr"
+
 [settings]
 title = "Darstellung"
 
diff --git a/i18n/en.toml b/i18n/en.toml
index e446c6cd4d..28c969a23d 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -645,6 +645,11 @@ filter = "Filter"
 grid = "Grid"
 self = "Solar"
 
+[sessions.period]
+month = "Month"
+total = "Total"
+year = "Year"
+
 [settings]
 title = "User Interface"
 

From 7ce708f09f1189df346e797d3e437fcafa625bcc Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 27 Sep 2024 21:05:54 +0200
Subject: [PATCH 09/19] rework title, labels and legends, proper resonsive
 behaviour

---
 .../js/components/Sessions/DateNavigator.vue  | 25 ++++---
 .../Sessions/DateNavigatorButton.vue          |  8 +++
 .../Sessions/EnergyAggregateChart.vue         | 52 +++++++-------
 .../Sessions/EnergyAggregateEntries.vue       | 67 -------------------
 .../Sessions/EnergyHistoryChart.vue           | 65 ++++++------------
 assets/js/components/Sessions/LegendList.vue  | 37 ++++++++++
 assets/js/components/Sessions/SolarChart.vue  | 46 ++++++-------
 assets/js/views/Sessions.vue                  | 31 +++++----
 8 files changed, 140 insertions(+), 191 deletions(-)
 delete mode 100644 assets/js/components/Sessions/EnergyAggregateEntries.vue
 create mode 100644 assets/js/components/Sessions/LegendList.vue

diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
index 6842b8f0e0..fd269a5ebc 100644
--- a/assets/js/components/Sessions/DateNavigator.vue
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -1,4 +1,3 @@
-<!-- DateNavigator.vue -->
 <template>
 	<div
 		class="d-sm-flex justify-content-lg-end gap-lg-4"
@@ -26,7 +25,9 @@
 				:selected="month"
 				@change="emitMonthYear($event.target.value)"
 			>
-				<button class="btn btn-sm border-0 h-100 text-truncate">{{ headline }}</button>
+				<button class="btn btn-sm border-0 h-100 text-truncate">
+					{{ monthYearName }}
+				</button>
 			</CustomSelect>
 			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
 		</div>
@@ -42,7 +43,9 @@
 				:selected="year"
 				@change="emitYear($event.target.value)"
 			>
-				<button class="btn btn-sm border-0 h-100" style="width: 4em">{{ year }}</button>
+				<button class="btn btn-sm border-0 h-100" style="width: 4em">
+					{{ year }}
+				</button>
 			</CustomSelect>
 			<DateNavigatorButton next :disabled="!hasNextYear" :onClick="emitNextYear" />
 		</div>
@@ -52,6 +55,7 @@
 <script>
 import CustomSelect from "../CustomSelect.vue";
 import DateNavigatorButton from "./DateNavigatorButton.vue";
+import formatter from "../../mixins/formatter";
 
 export default {
 	name: "DateNavigator",
@@ -66,6 +70,7 @@ export default {
 		showMonth: Boolean,
 		showYear: Boolean,
 	},
+	mixins: [formatter],
 	emits: ["update-date"],
 	computed: {
 		hasPrevMonth() {
@@ -120,7 +125,7 @@ export default {
 			date.setMonth(this.month - 1, 1);
 			return this.fmtMonth(date);
 		},
-		headline() {
+		monthYearName() {
 			const date = new Date();
 			date.setMonth(this.month - 1, 1);
 			date.setFullYear(this.year);
@@ -158,12 +163,12 @@ export default {
 		emitYear(year) {
 			this.$emit("update-date", { year, month: undefined });
 		},
-		fmtMonth(date) {
-			return date.toLocaleString("default", { month: "long" });
-		},
-		fmtMonthYear(date) {
-			return `${this.fmtMonth(date)} ${date.getFullYear()}`;
-		},
 	},
 };
 </script>
+
+<style scoped>
+.btn {
+	color: inherit;
+}
+</style>
diff --git a/assets/js/components/Sessions/DateNavigatorButton.vue b/assets/js/components/Sessions/DateNavigatorButton.vue
index 2ae7af0a36..923a98bd79 100644
--- a/assets/js/components/Sessions/DateNavigatorButton.vue
+++ b/assets/js/components/Sessions/DateNavigatorButton.vue
@@ -31,3 +31,11 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.btn,
+.btn:active,
+.btn:focus {
+	color: inherit !important;
+}
+</style>
diff --git a/assets/js/components/Sessions/EnergyAggregateChart.vue b/assets/js/components/Sessions/EnergyAggregateChart.vue
index 3dd443d8b9..96c4f4dbd9 100644
--- a/assets/js/components/Sessions/EnergyAggregateChart.vue
+++ b/assets/js/components/Sessions/EnergyAggregateChart.vue
@@ -1,13 +1,19 @@
 <template>
-	<div v-if="chartData.labels.length > 1">
-		<Doughnut :data="chartData" :options="options" />
+	<div class="row" v-if="chartData.labels.length > 1">
+		<div class="col-12 col-md-6 mb-3">
+			<Doughnut :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center">
+			<LegendList :legends="legends" extra-class="flex-md-column" />
+		</div>
 	</div>
 </template>
 
 <script>
 import { Doughnut } from "vue-chartjs";
 import { Chart, DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
-import formatter from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import LegendList from "./LegendList.vue";
 import colors from "../../colors";
 
 Chart.register(DoughnutController, ArcElement, LinearScale, Legend, Tooltip);
@@ -18,11 +24,9 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
-const { generateLabels } = Chart.overrides.doughnut.plugins.legend.labels;
-
 export default {
 	name: "EnergyAggregateChart",
-	components: { Doughnut },
+	components: { Doughnut, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: "loadpoint" },
@@ -54,36 +58,28 @@ export default {
 				datasets: [{ data, backgroundColor }],
 			};
 		},
+		legends() {
+			const total = this.chartData.datasets[0].data.reduce((acc, curr) => acc + curr, 0);
+			return this.chartData.labels.map((label, index) => ({
+				label: label,
+				color: this.chartData.datasets[0].backgroundColor[index],
+				value: this.fmtPercentage(
+					(100 / total) * this.chartData.datasets[0].data[index],
+					1
+				),
+			}));
+		},
 		options() {
 			return {
 				locale: this.$i18n?.locale,
 				responsive: true,
+				aspectRatio: 1,
 				maintainAspectRatio: false,
 				borderRadius: 6,
 				color: colors.text,
 				plugins: {
 					legend: {
-						position: "right",
-						align: "start",
-						labels: {
-							usePointStyle: true,
-							pointStyle: "circle",
-							padding: 20,
-							generateLabels: (chart) => {
-								const labels = generateLabels(chart);
-								const total = chart.data.datasets[0].data.reduce(
-									(acc, curr) => acc + curr,
-									0
-								);
-								labels.forEach((label, dataIndex) => {
-									const value = chart.data.datasets[0].data[dataIndex];
-									const percentage = (100 / total) * value;
-									label.text = `${label.text} ${this.fmtPercentage(percentage, 1)}`;
-								});
-								return labels;
-							},
-						},
-						onClick: () => {},
+						display: false,
 					},
 					tooltip: {
 						mode: "index",
@@ -100,7 +96,7 @@ export default {
 				borderWidth: 3,
 				borderColor: colors.background,
 				cutout: "70%",
-				radius: "100%",
+				radius: "95%",
 				animation: {
 					duration: 250,
 				},
diff --git a/assets/js/components/Sessions/EnergyAggregateEntries.vue b/assets/js/components/Sessions/EnergyAggregateEntries.vue
deleted file mode 100644
index 84bf3b781e..0000000000
--- a/assets/js/components/Sessions/EnergyAggregateEntries.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-	<div class="root" v-if="entries.length > 1">
-		<div
-			v-for="entry in entries"
-			:key="entry.name"
-			:style="{ borderLeft: `8px solid ${entry.color}` }"
-			class="ps-3"
-		>
-			<strong :style="{ color: entry.color }" class="fs-6">{{ entry.name }}</strong>
-			<div class="fs-6">{{ fmtPercentage(entry.percent) }}</div>
-			<div class="fs-6">{{ fmtWh(entry.energy * 1e3, POWER_UNIT.AUTO) }}</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
-
-export default {
-	name: "EnergyAggregateEntries",
-	props: {
-		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: "loadpoint" },
-		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
-	},
-	data() {
-		return {
-			POWER_UNIT,
-		};
-	},
-	mixins: [formatter],
-	computed: {
-		entries() {
-			const aggregatedData = {};
-			let totalEnergy = 0;
-
-			this.sessions.forEach((session) => {
-				const groupKey = session[this.groupBy];
-				if (!aggregatedData[groupKey]) {
-					aggregatedData[groupKey] = 0;
-				}
-				aggregatedData[groupKey] += session.chargedEnergy;
-				totalEnergy += session.chargedEnergy;
-			});
-
-			const entries = Object.entries(aggregatedData)
-				.map(([key, value]) => ({
-					name: key,
-					energy: value,
-					percent: (100 / totalEnergy) * value,
-					color: this.colorMappings[this.groupBy][key],
-				}))
-				.sort((a, b) => b.energy - a.energy);
-
-			return entries;
-		},
-	},
-};
-</script>
-
-<style scoped>
-.root {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 2rem;
-}
-</style>
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index cfc5efccbd..45a1405aa9 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -1,6 +1,9 @@
 <template>
-	<div style="position: relative; height: 300px">
-		<Bar :data="chartData" :options="options" />
+	<div>
+		<div style="position: relative; height: 300px" class="my-3">
+			<Bar :data="chartData" :options="options" />
+		</div>
+		<LegendList :legends="legends" />
 	</div>
 </template>
 
@@ -16,7 +19,8 @@ import {
 	Tooltip,
 } from "chart.js";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import colors, { dimColor, fullColor } from "../../colors";
+import LegendList from "./LegendList.vue"; // Import the new component
+import colors from "../../colors";
 
 Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
 Chart.defaults.font.family = window
@@ -24,7 +28,6 @@ Chart.defaults.font.family = window
 	.getPropertyValue("--bs-font-sans-serif");
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
-const { generateLabels } = Chart.defaults.plugins.legend.labels;
 
 const GROUPS = {
 	SOLAR: "solar",
@@ -34,7 +37,7 @@ const GROUPS = {
 
 export default {
 	name: "EnergyHistoryChart",
-	components: { Bar },
+	components: { Bar, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: GROUPS.SOLAR },
@@ -150,6 +153,16 @@ export default {
 				datasets: datasets,
 			};
 		},
+		legends() {
+			return this.chartData.datasets.map((dataset) => ({
+				label: dataset.label,
+				color: dataset.backgroundColor,
+				value: this.fmtWh(
+					dataset.data.reduce((acc, curr) => acc + curr, 0) * 1e3,
+					POWER_UNIT.AUTO
+				),
+			}));
+		},
 		options() {
 			return {
 				locale: this.$i18n?.locale,
@@ -159,47 +172,7 @@ export default {
 				borderSkipped: false,
 				plugins: {
 					legend: {
-						position: "bottom",
-						align: "center",
-						labels: {
-							usePointStyle: true,
-							pointStyle: "circle",
-							padding: 20,
-							generateLabels: (chart) => {
-								const labels = generateLabels(chart);
-								labels.forEach((label, datasetIndex) => {
-									const sum = chart.data.datasets[datasetIndex].data.reduce(
-										(acc, curr) => acc + curr,
-										0
-									);
-									label.text = `${label.text} ${this.fmtWh(sum * 1e3, POWER_UNIT.AUTO)}`;
-								});
-								return labels;
-							},
-						},
-						onClick: function (e, legendItem) {
-							const chartInstance = e.chart; // Get the chart instance from the event
-							const index = legendItem.datasetIndex;
-							const meta = chartInstance.getDatasetMeta(index);
-
-							const highlightAll = meta.highlight === true;
-							meta.highlight = !meta.highlight;
-
-							// Loop through all datasets
-							chartInstance.data.datasets.forEach((dataset, i) => {
-								const datasetMeta = chartInstance.getDatasetMeta(i);
-								datasetMeta.hidden = false;
-								if (i === index || highlightAll) {
-									datasetMeta.highlight = i === index && !highlightAll;
-									dataset.backgroundColor = fullColor(dataset.backgroundColor);
-								} else {
-									datasetMeta.highlight = false;
-									dataset.backgroundColor = dimColor(dataset.backgroundColor);
-								}
-							});
-
-							chartInstance.update();
-						},
+						display: false,
 					},
 					tooltip: {
 						mode: "index",
diff --git a/assets/js/components/Sessions/LegendList.vue b/assets/js/components/Sessions/LegendList.vue
new file mode 100644
index 0000000000..0c224f330b
--- /dev/null
+++ b/assets/js/components/Sessions/LegendList.vue
@@ -0,0 +1,37 @@
+<template>
+	<ul
+		class="p-0 d-flex flex-wrap column-gap-4 row-gap-2 justify-content-start overflow-hidden"
+		:class="extraClass"
+	>
+		<li
+			class="legend-item d-flex align-items-baseline gap-2 no-wrap overflow-hidden"
+			v-for="legend in legends"
+			:key="legend.label"
+		>
+			<div
+				class="legend-color align-self-center me-1"
+				:style="{ backgroundColor: legend.color }"
+			></div>
+			<div class="text-truncate flex-shrink-1">{{ legend.label }}</div>
+			<div v-if="legend.value" class="text-muted text-nowrap">{{ legend.value }}</div>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	name: "LegendList",
+	props: {
+		legends: Array,
+		extraClass: { type: [String, Array, Object], default: "" },
+	},
+};
+</script>
+
+<style scoped>
+.legend-color {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+}
+</style>
diff --git a/assets/js/components/Sessions/SolarChart.vue b/assets/js/components/Sessions/SolarChart.vue
index 1dfc1ee232..e22053bad0 100644
--- a/assets/js/components/Sessions/SolarChart.vue
+++ b/assets/js/components/Sessions/SolarChart.vue
@@ -1,6 +1,11 @@
 <template>
-	<div v-if="chartData.labels.length > 1">
-		<PolarArea :data="chartData" :options="options" />
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<PolarArea :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList :legends="legends" extra-class="flex-md-column" />
+		</div>
 	</div>
 </template>
 
@@ -9,6 +14,7 @@ import { PolarArea } from "vue-chartjs";
 import { Chart, RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
 import formatter from "../../mixins/formatter";
 import colors, { dimColor } from "../../colors";
+import LegendList from "./LegendList.vue";
 
 Chart.register(RadialLinearScale, ArcElement, Legend, Tooltip);
 Chart.defaults.font.family = window
@@ -18,11 +24,9 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
-const { generateLabels } = Chart.overrides.polarArea.plugins.legend.labels;
-
 export default {
 	name: "SolarChart",
-	components: { PolarArea },
+	components: { PolarArea, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: "loadpoint" },
@@ -70,38 +74,26 @@ export default {
 				],
 			};
 		},
+		legends() {
+			return this.chartData.labels.map((label, index) => ({
+				label: label,
+				color: this.chartData.datasets[0].borderColor[index],
+				value: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
+			}));
+		},
 		options() {
 			return {
 				locale: this.$i18n?.locale,
 				responsive: true,
+				aspectRatio: 1,
 				maintainAspectRatio: false,
 				borderRadius: 8,
 				borderWidth: 3,
 				color: colors.text,
 				spacing: 0,
 				plugins: {
-					legend: {
-						position: "right",
-						align: "start",
-						boxWidth: 300,
-						labels: {
-							usePointStyle: true,
-							pointStyle: "circle",
-							padding: 20,
-							generateLabels: (chart) => {
-								const labels = generateLabels(chart);
-								labels.forEach((label, dataIndex) => {
-									console.log(label);
-									const value = chart.data.datasets[0].data[dataIndex];
-									label.text = `${label.text} ${this.fmtPercentage(value, 1)}`;
-									label.fillStyle = label.strokeStyle;
-									label.strokeStyle = colors.background;
-								});
-								return labels;
-							},
-						},
-						onClick: () => {},
-					},
+					legend: { display: false },
+					tooltip: { enabled: false },
 				},
 				scales: {
 					r: {
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 96ac5b6649..fb99f93fb5 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -25,10 +25,12 @@
 						/>
 					</div>
 				</div>
-				<div class="d-flex justify-content-between align-items-center">
-					<h3 class="fw-normal my-0 d-flex gap-2 flex-wrap">
-						<span class="d-block no-wrap">{{ energyTitle }}</span>
-						<small class="d-block no-wrap">{{ energySubTitle }}</small>
+				<div class="d-flex justify-content-between align-items-center gap-2">
+					<h3
+						class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
+					>
+						<span class="d-block no-wrap text-truncate">{{ energyTitle }}</span>
+						<small class="d-block no-wrap text-truncate">{{ energySubTitle }}</small>
 					</h3>
 					<IconSelectGroup>
 						<IconSelectItem
@@ -49,7 +51,7 @@
 					:period="period"
 				/>
 				<div class="row align-items-start" v-if="selectedGroup !== groups.SOLAR">
-					<div class="col-12 col-md-6 mb-5">
+					<div class="col-12 col-lg-6 mb-5">
 						<h3 class="fw-normal my-4">Sonnenanteil</h3>
 						<SolarChart
 							:sessions="currentSessions"
@@ -57,7 +59,7 @@
 							:group-by="selectedGroup"
 						/>
 					</div>
-					<div class="col-12 col-md-6 mb-5">
+					<div class="col-12 col-lg-6 mb-5">
 						<h3 class="fw-normal my-4">Energiemenge</h3>
 						<EnergyAggregateChart
 							:sessions="currentSessions"
@@ -117,7 +119,6 @@ import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue"
 import SessionTable from "../components/Sessions/SessionTable.vue";
 import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
 import EnergyAggregateChart from "../components/Sessions/EnergyAggregateChart.vue";
-import EnergyAggregateEntries from "../components/Sessions/EnergyAggregateEntries.vue";
 import SolarChart from "../components/Sessions/SolarChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
@@ -149,7 +150,6 @@ export default {
 		TopHeader,
 		EnergyHistoryChart,
 		EnergyAggregateChart,
-		EnergyAggregateEntries,
 		IconSelectGroup,
 		IconSelectItem,
 		SelectGroup,
@@ -181,13 +181,18 @@ export default {
 	},
 	computed: {
 		energyTitle() {
-			const totalEnergy = this.totalEnergy;
-			const selfEnergy = this.selfEnergy;
-			const solarPercentage = totalEnergy > 0 ? (100 / totalEnergy) * selfEnergy : 0;
-			return `${this.fmtPercentage(solarPercentage)} Sonne`;
+			if (this.selectedGroup === GROUPS.VEHICLE) {
+				return "Fahrzeuge";
+			} else if (this.selectedGroup === GROUPS.LOADPOINT) {
+				return "Ladepunkte";
+			} else {
+				const solarPercentage =
+					this.totalEnergy > 0 ? (100 / this.totalEnergy) * this.selfEnergy : 0;
+				return `${this.fmtPercentage(solarPercentage)} Sonne`;
+			}
 		},
 		energySubTitle() {
-			return `${this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO)} gesamt`;
+			return `${this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO)}`;
 		},
 		periodOptions() {
 			return Object.entries(PERIODS).map(([key, value]) => ({

From 0e9a567dda6f278ab70b97110e6db09511a58b6b Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 30 Sep 2024 19:23:10 +0200
Subject: [PATCH 10/19] solar month wip

---
 assets/css/app.css                            |   6 +-
 assets/js/colors.js                           |   4 +-
 assets/js/components/Sessions/LegendList.vue  |   1 +
 .../components/Sessions/SolarMonthChart.vue   | 155 ++++++++++++++++++
 assets/js/views/Sessions.vue                  |  11 +-
 5 files changed, 171 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/components/Sessions/SolarMonthChart.vue

diff --git a/assets/css/app.css b/assets/css/app.css
index bbec8d25c5..dcc83945ce 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -23,9 +23,9 @@
 
 :root {
 	--evcc-green: #baffcb;
-	--evcc-dark-green: #0fde41;
-	--evcc-darker-green: #0ba631;
-	--evcc-darkest-green: #076f20;
+	--evcc-dark-green: #0fde41ff;
+	--evcc-darker-green: #0ba631ff;
+	--evcc-darkest-green: #076f20ff;
 	--evcc-darkest-green-rgb: 11, 166, 49;
 	--evcc-yellow: #faf000;
 	--evcc-dark-yellow: #bbb400;
diff --git a/assets/js/colors.js b/assets/js/colors.js
index 2880f3f70f..fa80c4393a 100644
--- a/assets/js/colors.js
+++ b/assets/js/colors.js
@@ -47,10 +47,10 @@ window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", upd
 updateCssColors();
 
 export const dimColor = (color) => {
-  return color.replace(/FF$/, "20");
+  return color.toLowerCase().replace(/ff$/, "20");
 };
 export const fullColor = (color) => {
-  return color.replace(/20$/, "FF");
+  return color.toLowerCase().replace(/20$/, "ff");
 };
 
 export default colors;
diff --git a/assets/js/components/Sessions/LegendList.vue b/assets/js/components/Sessions/LegendList.vue
index 0c224f330b..225fee6682 100644
--- a/assets/js/components/Sessions/LegendList.vue
+++ b/assets/js/components/Sessions/LegendList.vue
@@ -9,6 +9,7 @@
 			:key="legend.label"
 		>
 			<div
+				v-if="legend.color"
 				class="legend-color align-self-center me-1"
 				:style="{ backgroundColor: legend.color }"
 			></div>
diff --git a/assets/js/components/Sessions/SolarMonthChart.vue b/assets/js/components/Sessions/SolarMonthChart.vue
new file mode 100644
index 0000000000..fa4b740993
--- /dev/null
+++ b/assets/js/components/Sessions/SolarMonthChart.vue
@@ -0,0 +1,155 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<Radar :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList :legends="legends" extra-class="flex-md-column" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { Radar } from "vue-chartjs";
+import { Chart, RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+
+Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+export default {
+	name: "SolarMonthChart",
+	components: { Radar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		period: { type: String, default: "total" },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update solar month data");
+			const result = {};
+
+			if (this.sessions.length > 0) {
+				let xFrom, xTo;
+				if (this.period === "total") {
+					xFrom = this.firstDay.getFullYear();
+					xTo = this.lastDay.getFullYear();
+				} else if (this.period === "year") {
+					xFrom = 1;
+					xTo = 12;
+				} else {
+					xFrom = 1;
+					xTo = new Date(
+						this.lastDay.getFullYear(),
+						this.lastDay.getMonth() + 1,
+						0
+					).getDate();
+				}
+
+				// initialize result with empty arrays
+				for (let i = xFrom; i <= xTo; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					let index;
+					const date = new Date(session.created);
+					if (this.period === "month") {
+						index = date.getDate();
+					} else if (this.period === "year") {
+						index = date.getMonth() + 1;
+					} else {
+						index = date.getFullYear();
+					}
+
+					const charged = session.chargedEnergy;
+					const self = (charged / 100) * session.solarPercentage;
+					const grid = charged - self;
+					result[index].self = (result[index].self || 0) + self;
+					result[index].grid = (result[index].grid || 0) + grid;
+				});
+			}
+
+			const dataset = {
+				backgroundColor: dimColor(colors.self),
+				borderColor: colors.self,
+				label: this.$t("sessions.group.self"),
+				data: Object.values(result).map(({ self = 0, grid = 0 }) => {
+					const total = self + grid;
+					return total === 0 ? null : (self / total) * 100;
+				}),
+			};
+			console.log(dataset);
+
+			return {
+				labels: Object.keys(result).map((key) =>
+					this.fmtMonth(new Date(this.firstDay.getFullYear(), key - 1, 1), true)
+				),
+				datasets: [dataset],
+			};
+		},
+		legends() {
+			return this.chartData.labels.map((label, index) => {
+				const value = this.chartData.datasets[0].data[index];
+				return {
+					label,
+					value:
+						value === null
+							? "- %"
+							: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
+				};
+			});
+		},
+		options() {
+			return {
+				locale: this.$i18n?.locale,
+				responsive: true,
+				aspectRatio: 1,
+				maintainAspectRatio: false,
+				borderRadius: 8,
+				borderWidth: 3,
+				color: colors.text,
+				spacing: 0,
+				plugins: {
+					legend: { display: false },
+					tooltip: { enabled: false },
+				},
+				scales: {
+					r: {
+						min: 0,
+						max: 100,
+						ticks: {
+							stepSize: 25,
+							color: colors.muted,
+							backdropColor: colors.background,
+						},
+						grid: { color: colors.border },
+					},
+				},
+				radius: "100%",
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index fb99f93fb5..8423484f2d 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -50,10 +50,16 @@
 					:group-by="selectedGroup"
 					:period="period"
 				/>
-				<div class="row align-items-start" v-if="selectedGroup !== groups.SOLAR">
+				<div class="row align-items-start">
 					<div class="col-12 col-lg-6 mb-5">
 						<h3 class="fw-normal my-4">Sonnenanteil</h3>
+						<SolarMonthChart
+							v-if="selectedGroup === groups.SOLAR"
+							:period="period"
+							:sessions="currentSessions"
+						/>
 						<SolarChart
+							v-else
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
 							:group-by="selectedGroup"
@@ -62,6 +68,7 @@
 					<div class="col-12 col-lg-6 mb-5">
 						<h3 class="fw-normal my-4">Energiemenge</h3>
 						<EnergyAggregateChart
+							v-if="selectedGroup !== groups.SOLAR"
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
 							:group-by="selectedGroup"
@@ -120,6 +127,7 @@ import SessionTable from "../components/Sessions/SessionTable.vue";
 import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
 import EnergyAggregateChart from "../components/Sessions/EnergyAggregateChart.vue";
 import SolarChart from "../components/Sessions/SolarChart.vue";
+import SolarMonthChart from "../components/Sessions/SolarMonthChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
@@ -155,6 +163,7 @@ export default {
 		SelectGroup,
 		CustomSelect,
 		SolarChart,
+		SolarMonthChart,
 		PeriodSelector,
 		DateNavigator,
 	},

From 4bb9b787e8dc12171bd76285552a9325622f790c Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 2 Oct 2024 19:06:08 +0200
Subject: [PATCH 11/19] year/total details

---
 assets/css/app.css                            |   4 +
 ...regateChart.vue => EnergyGroupedChart.vue} |  39 ++--
 .../Sessions/EnergyHistoryChart.vue           |   2 +
 assets/js/components/Sessions/LegendList.vue  |   6 +
 .../js/components/Sessions/SessionTable.vue   |  10 +-
 .../{SolarChart.vue => SolarGroupedChart.vue} |   7 +-
 .../components/Sessions/SolarMonthChart.vue   | 155 --------------
 .../js/components/Sessions/SolarYearChart.vue | 193 ++++++++++++++++++
 assets/js/views/Sessions.vue                  | 132 ++++++------
 9 files changed, 303 insertions(+), 245 deletions(-)
 rename assets/js/components/Sessions/{EnergyAggregateChart.vue => EnergyGroupedChart.vue} (72%)
 rename assets/js/components/Sessions/{SolarChart.vue => SolarGroupedChart.vue} (94%)
 delete mode 100644 assets/js/components/Sessions/SolarMonthChart.vue
 create mode 100644 assets/js/components/Sessions/SolarYearChart.vue

diff --git a/assets/css/app.css b/assets/css/app.css
index dcc83945ce..b332d05c09 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -195,6 +195,10 @@ a:hover {
 	color: inherit;
 }
 
+.evcc-background {
+	background-color: var(--evcc-background);
+}
+
 .btn-primary,
 .btn-primary:focus {
 	background-color: var(--bs-primary);
diff --git a/assets/js/components/Sessions/EnergyAggregateChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
similarity index 72%
rename from assets/js/components/Sessions/EnergyAggregateChart.vue
rename to assets/js/components/Sessions/EnergyGroupedChart.vue
index 96c4f4dbd9..8084155c65 100644
--- a/assets/js/components/Sessions/EnergyAggregateChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -30,7 +30,7 @@ export default {
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: "loadpoint" },
-		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {}, solar: {} }) },
 	},
 	mixins: [formatter],
 	computed: {
@@ -38,20 +38,34 @@ export default {
 			console.log("update energy aggregate data");
 			const aggregatedData = {};
 
-			this.sessions.forEach((session) => {
-				const groupKey = session[this.groupBy];
-				if (!aggregatedData[groupKey]) {
-					aggregatedData[groupKey] = 0;
-				}
-				aggregatedData[groupKey] += session.chargedEnergy;
-			});
+			if (this.groupBy === "solar") {
+				const total = this.sessions.reduce((acc, s) => acc + s.chargedEnergy, 0);
+				const self = this.sessions.reduce(
+					(acc, s) => acc + (s.chargedEnergy / 100) * s.solarPercentage,
+					0
+				);
+				aggregatedData.self = self;
+				aggregatedData.grid = total - self;
+			} else {
+				this.sessions.forEach((session) => {
+					const groupKey = session[this.groupBy];
+					if (!aggregatedData[groupKey]) {
+						aggregatedData[groupKey] = 0;
+					}
+					aggregatedData[groupKey] += session.chargedEnergy;
+				});
+			}
 
 			// Sort the data by energy in descending order
-			const sortedEntries = Object.entries(aggregatedData).sort((a, b) => b[1] - a[1]);
+			const sortedEntries = Object.entries(aggregatedData); //.sort((a, b) => b[1] - a[1]);
 
-			const labels = sortedEntries.map(([label]) => label);
+			const labels = sortedEntries.map(([label]) =>
+				this.groupBy === "solar" ? this.$t(`sessions.group.${label}`) : label
+			);
 			const data = sortedEntries.map(([, value]) => value);
-			const backgroundColor = labels.map((label) => this.colorMappings[this.groupBy][label]);
+			const backgroundColor = sortedEntries.map(
+				([label]) => this.colorMappings[this.groupBy][label]
+			);
 
 			return {
 				labels: labels,
@@ -75,7 +89,7 @@ export default {
 				responsive: true,
 				aspectRatio: 1,
 				maintainAspectRatio: false,
-				borderRadius: 6,
+				borderRadius: 10,
 				color: colors.text,
 				plugins: {
 					legend: {
@@ -84,6 +98,7 @@ export default {
 					tooltip: {
 						mode: "index",
 						intersect: false,
+						boxPadding: 5,
 						callbacks: {
 							label: (tooltipItem) => {
 								const value = tooltipItem.raw || 0;
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index 45a1405aa9..34aacd2b02 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -170,6 +170,7 @@ export default {
 				maintainAspectRatio: false,
 				color: colors.text,
 				borderSkipped: false,
+				maxBarThickness: 40,
 				plugins: {
 					legend: {
 						display: false,
@@ -177,6 +178,7 @@ export default {
 					tooltip: {
 						mode: "index",
 						intersect: false,
+						boxPadding: 5,
 						positioner: (context) => {
 							const tooltip = context.chart.tooltip;
 							const tooltipHeight = tooltip.height;
diff --git a/assets/js/components/Sessions/LegendList.vue b/assets/js/components/Sessions/LegendList.vue
index 225fee6682..9a1ccdd560 100644
--- a/assets/js/components/Sessions/LegendList.vue
+++ b/assets/js/components/Sessions/LegendList.vue
@@ -5,6 +5,7 @@
 	>
 		<li
 			class="legend-item d-flex align-items-baseline gap-2 no-wrap overflow-hidden"
+			:class="{ 'legend-item---grid': grid }"
 			v-for="legend in legends"
 			:key="legend.label"
 		>
@@ -25,6 +26,7 @@ export default {
 	props: {
 		legends: Array,
 		extraClass: { type: [String, Array, Object], default: "" },
+		grid: Boolean,
 	},
 };
 </script>
@@ -35,4 +37,8 @@ export default {
 	height: 1rem;
 	border-radius: 50%;
 }
+.legend-item---grid {
+	justify-content: space-between;
+	width: 100px;
+}
 </style>
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index 9692dc164b..2ec3b6b485 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -4,7 +4,7 @@
 	</div>
 	<div v-else class="my-5 table-outer">
 		<table class="table text-nowrap">
-			<thead class="sticky-top" style="top: 3rem">
+			<thead class="sticky-top">
 				<tr data-testid="sessions-head">
 					<th scope="col" class="align-top ps-0">
 						{{ $t("sessions.date") }}
@@ -448,6 +448,14 @@ export default {
 .sticky-bottom {
 	z-index: 1;
 }
+.sticky-top {
+	top: 6.5rem;
+}
+@media (min-width: 992px) {
+	.sticky-top {
+		top: 3rem;
+	}
+}
 .sticky-top th {
 	padding-top: max(0.5rem, env(safe-area-inset-top));
 }
diff --git a/assets/js/components/Sessions/SolarChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
similarity index 94%
rename from assets/js/components/Sessions/SolarChart.vue
rename to assets/js/components/Sessions/SolarGroupedChart.vue
index e22053bad0..3f33feea57 100644
--- a/assets/js/components/Sessions/SolarChart.vue
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -25,7 +25,7 @@ Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
 export default {
-	name: "SolarChart",
+	name: "SolarGroupedChart",
 	components: { PolarArea, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
@@ -35,7 +35,7 @@ export default {
 	mixins: [formatter],
 	computed: {
 		chartData() {
-			console.log("update energy aggregate data");
+			console.log("update solar grouped data");
 			const aggregatedData = {};
 
 			this.sessions.forEach((session) => {
@@ -50,6 +50,8 @@ export default {
 				aggregatedData[groupKey].grid += grid;
 			});
 
+			console.log("solar grouped data", aggregatedData);
+
 			// Sort the data by total energy in descending order
 			const sortedEntries = Object.entries(aggregatedData).sort(
 				(a, b) => b[1].grid + b[1].self - (a[1].grid + a[1].self)
@@ -61,6 +63,7 @@ export default {
 				return selfPercentage;
 			});
 
+			console.log("solar grouped data", labels, data);
 			const borderColors = labels.map((label) => this.colorMappings[this.groupBy][label]);
 			const backgroundColors = borderColors.map((color) => dimColor(color));
 			return {
diff --git a/assets/js/components/Sessions/SolarMonthChart.vue b/assets/js/components/Sessions/SolarMonthChart.vue
deleted file mode 100644
index fa4b740993..0000000000
--- a/assets/js/components/Sessions/SolarMonthChart.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-	<div v-if="chartData.labels.length > 1" class="row">
-		<div class="col-12 col-md-6 mb-3">
-			<Radar :data="chartData" :options="options" />
-		</div>
-		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
-			<LegendList :legends="legends" extra-class="flex-md-column" />
-		</div>
-	</div>
-</template>
-
-<script>
-import { Radar } from "vue-chartjs";
-import { Chart, RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
-import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
-import LegendList from "./LegendList.vue";
-
-Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-
-export default {
-	name: "SolarMonthChart",
-	components: { Radar, LegendList },
-	props: {
-		sessions: { type: Array, default: () => [] },
-		period: { type: String, default: "total" },
-	},
-	mixins: [formatter],
-	computed: {
-		firstDay() {
-			if (this.sessions.length === 0) {
-				return null;
-			}
-			return new Date(this.sessions[0].created);
-		},
-		lastDay() {
-			if (this.sessions.length === 0) {
-				return null;
-			}
-			return new Date(this.sessions[this.sessions.length - 1].created);
-		},
-		chartData() {
-			console.log("update solar month data");
-			const result = {};
-
-			if (this.sessions.length > 0) {
-				let xFrom, xTo;
-				if (this.period === "total") {
-					xFrom = this.firstDay.getFullYear();
-					xTo = this.lastDay.getFullYear();
-				} else if (this.period === "year") {
-					xFrom = 1;
-					xTo = 12;
-				} else {
-					xFrom = 1;
-					xTo = new Date(
-						this.lastDay.getFullYear(),
-						this.lastDay.getMonth() + 1,
-						0
-					).getDate();
-				}
-
-				// initialize result with empty arrays
-				for (let i = xFrom; i <= xTo; i++) {
-					result[i] = {};
-				}
-
-				// Populate with actual data
-				this.sessions.forEach((session) => {
-					let index;
-					const date = new Date(session.created);
-					if (this.period === "month") {
-						index = date.getDate();
-					} else if (this.period === "year") {
-						index = date.getMonth() + 1;
-					} else {
-						index = date.getFullYear();
-					}
-
-					const charged = session.chargedEnergy;
-					const self = (charged / 100) * session.solarPercentage;
-					const grid = charged - self;
-					result[index].self = (result[index].self || 0) + self;
-					result[index].grid = (result[index].grid || 0) + grid;
-				});
-			}
-
-			const dataset = {
-				backgroundColor: dimColor(colors.self),
-				borderColor: colors.self,
-				label: this.$t("sessions.group.self"),
-				data: Object.values(result).map(({ self = 0, grid = 0 }) => {
-					const total = self + grid;
-					return total === 0 ? null : (self / total) * 100;
-				}),
-			};
-			console.log(dataset);
-
-			return {
-				labels: Object.keys(result).map((key) =>
-					this.fmtMonth(new Date(this.firstDay.getFullYear(), key - 1, 1), true)
-				),
-				datasets: [dataset],
-			};
-		},
-		legends() {
-			return this.chartData.labels.map((label, index) => {
-				const value = this.chartData.datasets[0].data[index];
-				return {
-					label,
-					value:
-						value === null
-							? "- %"
-							: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
-				};
-			});
-		},
-		options() {
-			return {
-				locale: this.$i18n?.locale,
-				responsive: true,
-				aspectRatio: 1,
-				maintainAspectRatio: false,
-				borderRadius: 8,
-				borderWidth: 3,
-				color: colors.text,
-				spacing: 0,
-				plugins: {
-					legend: { display: false },
-					tooltip: { enabled: false },
-				},
-				scales: {
-					r: {
-						min: 0,
-						max: 100,
-						ticks: {
-							stepSize: 25,
-							color: colors.muted,
-							backdropColor: colors.background,
-						},
-						grid: { color: colors.border },
-					},
-				},
-				radius: "100%",
-			};
-		},
-	},
-};
-</script>
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
new file mode 100644
index 0000000000..8f5d4b8900
--- /dev/null
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -0,0 +1,193 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<Radar :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList
+				:legends="legends"
+				:grid="period === 'year'"
+				:extra-class="
+					period === 'year'
+						? 'justify-content-around me-3 flex-row'
+						: 'ps-3 flex-md-column'
+				"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Radar } from "vue-chartjs";
+import { Chart, RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+
+Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
+Chart.defaults.font.family = window
+	.getComputedStyle(document.documentElement)
+	.getPropertyValue("--bs-font-sans-serif");
+
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+export default {
+	name: "SolarYearChart",
+	components: { Radar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		period: { type: String, default: "total" },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update solar month data");
+
+			if (!this.sessions.length > 0) return { labels: [], datasets: [] };
+
+			const firstYear = this.firstDay.getFullYear();
+			const lastYear = this.lastDay.getFullYear();
+
+			const result = {};
+
+			const years = [];
+
+			// initialize result for years and months
+			for (let year = lastYear; year >= firstYear; year--) {
+				const yearString = `${year}`;
+				years.push(yearString);
+				result[yearString] = {};
+				console.log("year", yearString);
+
+				for (let month = 1; month <= 12; month++) {
+					result[yearString][month] = {};
+				}
+			}
+
+			// Populate with actual data
+			this.sessions.forEach((session) => {
+				const date = new Date(session.created);
+				const year = `${date.getFullYear()}`;
+				const month = `${date.getMonth() + 1}`;
+
+				const charged = session.chargedEnergy;
+				const self = (charged / 100) * session.solarPercentage;
+				const grid = charged - self;
+				result[year][month].self = (result[year][month].self || 0) + self;
+				result[year][month].grid = (result[year][month].grid || 0) + grid;
+			});
+
+			const datasets = years.map((year) => {
+				const borderColor =
+					years.length === 1 ? colors.self : colors.palette[years.indexOf(year)];
+				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
+				return {
+					backgroundColor,
+					borderColor,
+					label: year,
+					data: Object.values(result[year]).map(({ self = 0, grid = 0 }) => {
+						const total = self + grid;
+						return total === 0 ? null : (self / total) * 100;
+					}),
+					yearData: Object.values(result[year]).reduce(
+						(acc, { self = 0, grid = 0 }) => ({
+							self: acc.self + self,
+							grid: acc.grid + grid,
+						}),
+						{ self: 0, grid: 0 }
+					),
+				};
+			});
+
+			const labels = Object.keys(result[firstYear]).map((month) =>
+				this.fmtMonth(new Date(firstYear, month - 1, 1), true)
+			);
+
+			return {
+				labels,
+				datasets,
+			};
+		},
+		legends() {
+			if (this.period === "total") {
+				return this.chartData.datasets.map((dataset) => {
+					const label = dataset.label;
+					const { self, grid } = dataset.yearData;
+					const total = self + grid;
+					const value = total === 0 ? "- %" : this.fmtPercentage((self / total) * 100, 1);
+					return {
+						label,
+						color: dataset.borderColor,
+						value,
+					};
+				});
+			} else {
+				return this.chartData.labels.map((label, index) => {
+					const value = this.chartData.datasets[0].data[index];
+					return {
+						label,
+						value:
+							value === null
+								? "- %"
+								: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
+					};
+				});
+			}
+		},
+		options() {
+			return {
+				locale: this.$i18n?.locale,
+				responsive: true,
+				aspectRatio: 1,
+				maintainAspectRatio: false,
+				borderRadius: 8,
+				borderWidth: 3,
+				color: colors.text,
+				spacing: 0,
+				plugins: {
+					legend: { display: false },
+					tooltip: {
+						intersect: false,
+						mode: "index",
+						boxPadding: 5,
+						callbacks: {
+							label: (tooltipItem) => {
+								const value = tooltipItem.raw || 0;
+								const datasetLabel = tooltipItem.dataset.label || "";
+								return datasetLabel + ": " + this.fmtPercentage(value, 1);
+							},
+						},
+						backgroundColor: "#000",
+					},
+				},
+				scales: {
+					r: {
+						min: 0,
+						max: 100,
+						ticks: {
+							stepSize: 25,
+							color: colors.muted,
+							backdropColor: colors.background,
+						},
+						grid: { color: colors.border },
+					},
+				},
+				radius: "100%",
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 8423484f2d..875c9ed6b7 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,7 +3,7 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
-				<div class="row mt-2 mb-3">
+				<div class="row pt-2 mb-3 sticky-top evcc-background">
 					<div
 						class="col-lg-5 d-flex mb-sm-3"
 						:class="showDateNavigator ? 'mb-3' : 'mb-4'"
@@ -50,15 +50,15 @@
 					:group-by="selectedGroup"
 					:period="period"
 				/>
-				<div class="row align-items-start">
+				<div v-if="showExtraCharts" class="row align-items-start">
 					<div class="col-12 col-lg-6 mb-5">
-						<h3 class="fw-normal my-4">Sonnenanteil</h3>
-						<SolarMonthChart
-							v-if="selectedGroup === groups.SOLAR"
+						<h3 class="fw-normal my-4">{{ solarTitle }}</h3>
+						<SolarYearChart
+							v-if="showSolarYearChart"
 							:period="period"
 							:sessions="currentSessions"
 						/>
-						<SolarChart
+						<SolarGroupedChart
 							v-else
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
@@ -66,9 +66,8 @@
 						/>
 					</div>
 					<div class="col-12 col-lg-6 mb-5">
-						<h3 class="fw-normal my-4">Energiemenge</h3>
-						<EnergyAggregateChart
-							v-if="selectedGroup !== groups.SOLAR"
+						<h3 class="fw-normal my-4">{{ energyGroupedTitle }}</h3>
+						<EnergyGroupedChart
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
 							:group-by="selectedGroup"
@@ -125,9 +124,9 @@ import store from "../store";
 import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue";
 import SessionTable from "../components/Sessions/SessionTable.vue";
 import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
-import EnergyAggregateChart from "../components/Sessions/EnergyAggregateChart.vue";
-import SolarChart from "../components/Sessions/SolarChart.vue";
-import SolarMonthChart from "../components/Sessions/SolarMonthChart.vue";
+import EnergyGroupedChart from "../components/Sessions/EnergyGroupedChart.vue";
+import SolarGroupedChart from "../components/Sessions/SolarGroupedChart.vue";
+import SolarYearChart from "../components/Sessions/SolarYearChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
@@ -157,13 +156,13 @@ export default {
 		SessionTable,
 		TopHeader,
 		EnergyHistoryChart,
-		EnergyAggregateChart,
+		EnergyGroupedChart,
 		IconSelectGroup,
 		IconSelectItem,
 		SelectGroup,
 		CustomSelect,
-		SolarChart,
-		SolarMonthChart,
+		SolarGroupedChart,
+		SolarYearChart,
 		PeriodSelector,
 		DateNavigator,
 	},
@@ -183,6 +182,7 @@ export default {
 			selectedGroup: settings.sessionsGroup || GROUPS.SOLAR,
 			selectedSessionId: undefined,
 			groups: GROUPS,
+			periods: PERIODS,
 		};
 	},
 	head() {
@@ -195,13 +195,25 @@ export default {
 			} else if (this.selectedGroup === GROUPS.LOADPOINT) {
 				return "Ladepunkte";
 			} else {
-				const solarPercentage =
-					this.totalEnergy > 0 ? (100 / this.totalEnergy) * this.selfEnergy : 0;
-				return `${this.fmtPercentage(solarPercentage)} Sonne`;
+				return `${this.solarPercentageFmt} Sonne`;
 			}
 		},
+		solarPercentageFmt() {
+			return this.fmtPercentage(
+				this.totalEnergy > 0 ? (100 / this.totalEnergy) * this.selfEnergy : 0
+			);
+		},
+		energySumFmt() {
+			return this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO);
+		},
 		energySubTitle() {
-			return `${this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO)}`;
+			return `${this.energySumFmt}`;
+		},
+		solarTitle() {
+			return `${this.solarPercentageFmt} Sonnenanteil`;
+		},
+		energyGroupedTitle() {
+			return `${this.energySumFmt} Energiemenge`;
 		},
 		periodOptions() {
 			return Object.entries(PERIODS).map(([key, value]) => ({
@@ -276,61 +288,6 @@ export default {
 		csvTotalLink() {
 			return this.csvHrefLink();
 		},
-		prevMonthDate() {
-			const date = new Date();
-			date.setFullYear(this.year);
-			date.setMonth(this.month - 2, 1);
-			return date;
-		},
-		prevYearMonth() {
-			return {
-				year: this.prevMonthDate.getFullYear(),
-				month: this.prevMonthDate.getMonth() + 1,
-			};
-		},
-		nextMonthDate() {
-			const date = new Date();
-			date.setFullYear(this.year);
-			date.setMonth(this.month, 1);
-			return date;
-		},
-		nextYearMonth() {
-			return {
-				year: this.nextMonthDate.getFullYear(),
-				month: this.nextMonthDate.getMonth() + 1,
-			};
-		},
-		nextYear() {
-			const date = new Date();
-			date.setFullYear(this.year + 1);
-			return date.getFullYear();
-		},
-		prevYear() {
-			const date = new Date();
-			date.setFullYear(this.year - 1);
-			return date.getFullYear();
-		},
-		hasNextMonth() {
-			const now = new Date();
-			return this.year < now.getFullYear() || this.month < now.getMonth() + 1;
-		},
-		hasPrevMonth() {
-			if (this.sessions.length === 0) {
-				return false;
-			}
-			const first = new Date(this.sessions[0].created);
-			return this.year > first.getFullYear() || this.month > first.getMonth() + 1;
-		},
-		hasNextYear() {
-			return this.year < new Date().getFullYear();
-		},
-		hasPrevYear() {
-			if (this.sessions.length === 0) {
-				return false;
-			}
-			const last = new Date(this.sessions[0].created);
-			return this.year > last.getFullYear();
-		},
 		colorMappings() {
 			const lastThreeMonths = new Date();
 			lastThreeMonths.setMonth(lastThreeMonths.getMonth() - 3);
@@ -378,7 +335,9 @@ export default {
 			const vehicleEnergy = aggregateEnergy("vehicle");
 			const vehicleColors = assignColors(vehicleEnergy, "vehicle");
 
-			return { loadpoint: loadpointColors, vehicle: vehicleColors };
+			const solar = { self: colors.self, grid: colors.grid };
+
+			return { loadpoint: loadpointColors, vehicle: vehicleColors, solar };
 		},
 		groupIcons() {
 			return {
@@ -436,6 +395,29 @@ export default {
 			}
 			return yearMonths;
 		},
+		groupEntriesAvailable() {
+			if (this.selectedGroup === GROUPS.SOLAR || !this.currentSessions.length) return false;
+			return new Set(this.currentSessions.map((s) => s[this.selectedGroup])).size > 1;
+		},
+		showSolarYearChart() {
+			return (
+				this.showExtraCharts &&
+				this.period !== PERIODS.MONTH &&
+				this.selectedGroup === GROUPS.SOLAR
+			);
+		},
+		showExtraCharts() {
+			if (this.period === PERIODS.MONTH && this.selectedGroup === GROUPS.SOLAR) {
+				return false;
+			}
+			if (
+				[GROUPS.LOADPOINT, GROUPS.VEHICLE].includes(this.selectedGroup) &&
+				!this.groupEntriesAvailable
+			) {
+				return false;
+			}
+			return true;
+		},
 	},
 	watch: {
 		offline: function () {

From 229894beed8b99c93433c2c5d7fa71542a459523 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 3 Oct 2024 21:09:18 +0200
Subject: [PATCH 12/19] improve tooltip, new year colors

---
 assets/js/colors.js                           |  1 +
 .../Sessions/EnergyGroupedChart.vue           | 14 ++++++++
 .../js/components/Sessions/SolarYearChart.vue | 33 ++++++++++++++++---
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/assets/js/colors.js b/assets/js/colors.js
index fa80c4393a..191c6e3abe 100644
--- a/assets/js/colors.js
+++ b/assets/js/colors.js
@@ -15,6 +15,7 @@ const colors = reactive({
   grid: null,
   price: null,
   background: null,
+  selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
   palette: [
     "#03C1EFFF",
     "#FD6158FF",
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
index 8084155c65..ae4b2b8b40 100644
--- a/assets/js/components/Sessions/EnergyGroupedChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -24,6 +24,16 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
+Tooltip.positioners.center = function () {
+	const { chart } = this;
+	return {
+		x: chart.width / 2,
+		y: chart.height / 2,
+		xAlign: "center",
+		yAlign: "center",
+	};
+};
+
 export default {
 	name: "EnergyAggregateChart",
 	components: { Doughnut, LegendList },
@@ -97,8 +107,12 @@ export default {
 					},
 					tooltip: {
 						mode: "index",
+						position: "center",
 						intersect: false,
 						boxPadding: 5,
+						usePointStyle: true,
+						borderWidth: 0.00001,
+						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
 								const value = tooltipItem.raw || 0;
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
index 8f5d4b8900..037ecd1a6d 100644
--- a/assets/js/components/Sessions/SolarYearChart.vue
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -32,6 +32,16 @@ Chart.defaults.font.family = window
 Chart.defaults.font.size = 14;
 Chart.defaults.layout.padding = 0;
 
+Tooltip.positioners.topCenter = function () {
+	const { chart } = this;
+	return {
+		x: chart.width / 2,
+		y: chart.height / 10,
+		xAlign: "center",
+		yAlign: "center",
+	};
+};
+
 export default {
 	name: "SolarYearChart",
 	components: { Radar, LegendList },
@@ -91,8 +101,7 @@ export default {
 			});
 
 			const datasets = years.map((year) => {
-				const borderColor =
-					years.length === 1 ? colors.self : colors.palette[years.indexOf(year)];
+				const borderColor = colors.selfPalette[years.indexOf(year)];
 				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
 				return {
 					backgroundColor,
@@ -153,22 +162,32 @@ export default {
 				responsive: true,
 				aspectRatio: 1,
 				maintainAspectRatio: false,
-				borderRadius: 8,
-				borderWidth: 3,
+				borderWidth: 4,
 				color: colors.text,
 				spacing: 0,
+				elements: { line: { tension: 0.05 } },
 				plugins: {
 					legend: { display: false },
 					tooltip: {
 						intersect: false,
 						mode: "index",
+						position: "topCenter",
 						boxPadding: 5,
+						usePointStyle: true,
+						borderWidth: 0.00001,
+						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
 								const value = tooltipItem.raw || 0;
 								const datasetLabel = tooltipItem.dataset.label || "";
 								return datasetLabel + ": " + this.fmtPercentage(value, 1);
 							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
 						},
 						backgroundColor: "#000",
 					},
@@ -177,11 +196,15 @@ export default {
 					r: {
 						min: 0,
 						max: 100,
+						beginAtZero: false,
 						ticks: {
-							stepSize: 25,
+							stepSize: 20,
 							color: colors.muted,
 							backdropColor: colors.background,
+							font: { size: 10 },
+							callback: (value) => this.fmtPercentage(value, 0),
 						},
+						angleLines: { display: false },
 						grid: { color: colors.border },
 					},
 				},

From a443a516de887e0716f134c8cf2e5ccd49a2526f Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 4 Oct 2024 09:14:47 +0200
Subject: [PATCH 13/19] refactor

---
 .../Sessions/EnergyGroupedChart.vue           | 48 ++++-----------
 .../Sessions/EnergyHistoryChart.vue           | 58 ++++++-------------
 .../components/Sessions/SolarGroupedChart.vue | 39 ++++++++-----
 .../js/components/Sessions/SolarYearChart.vue | 35 +++--------
 assets/js/components/Sessions/chartConfig.js  | 53 +++++++++++++++++
 5 files changed, 116 insertions(+), 117 deletions(-)
 create mode 100644 assets/js/components/Sessions/chartConfig.js

diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
index ae4b2b8b40..923cc26387 100644
--- a/assets/js/components/Sessions/EnergyGroupedChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -11,28 +11,13 @@
 
 <script>
 import { Doughnut } from "vue-chartjs";
-import { Chart, DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
 import LegendList from "./LegendList.vue";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import colors from "../../colors";
 
-Chart.register(DoughnutController, ArcElement, LinearScale, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-
-Tooltip.positioners.center = function () {
-	const { chart } = this;
-	return {
-		x: chart.width / 2,
-		y: chart.height / 2,
-		xAlign: "center",
-		yAlign: "center",
-	};
-};
+registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
 
 export default {
 	name: "EnergyAggregateChart",
@@ -95,40 +80,31 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderRadius: 10,
 				color: colors.text,
+				borderWidth: 3,
+				borderColor: colors.background,
+				cutout: "70%",
+				radius: "95%",
+				animation: { duration: 250 },
 				plugins: {
-					legend: {
-						display: false,
-					},
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						mode: "index",
 						position: "center",
 						intersect: false,
-						boxPadding: 5,
-						usePointStyle: true,
-						borderWidth: 0.00001,
-						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
 								const value = tooltipItem.raw || 0;
 								return this.fmtWh(value * 1e3, POWER_UNIT.AUTO);
 							},
 						},
-						backgroundColor: "#000",
 					},
 				},
-				borderWidth: 3,
-				borderColor: colors.background,
-				cutout: "70%",
-				radius: "95%",
-				animation: {
-					duration: 250,
-				},
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index 34aacd2b02..6dd960343d 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -9,25 +9,13 @@
 
 <script>
 import { Bar } from "vue-chartjs";
-import {
-	Chart,
-	BarController,
-	BarElement,
-	CategoryScale,
-	LinearScale,
-	Legend,
-	Tooltip,
-} from "chart.js";
+import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import LegendList from "./LegendList.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import LegendList from "./LegendList.vue"; // Import the new component
 import colors from "../../colors";
 
-Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
+registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
 
 const GROUPS = {
 	SOLAR: "solar",
@@ -165,39 +153,29 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
-				maintainAspectRatio: false,
 				color: colors.text,
 				borderSkipped: false,
 				maxBarThickness: 40,
+				animation: false,
 				plugins: {
-					legend: {
-						display: false,
-					},
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						mode: "index",
 						intersect: false,
-						boxPadding: 5,
 						positioner: (context) => {
-							const tooltip = context.chart.tooltip;
-							const tooltipHeight = tooltip.height;
-							const tooltipWidth = tooltip.width;
-							const windowWidth = window.innerWidth;
-							const windowHeight = window.innerHeight;
-							const tooltipX = context.tooltipPosition().x;
-							const tooltipY = context.tooltipPosition().y;
-							const position = {
-								x:
-									tooltipX + tooltipWidth > windowWidth
-										? windowWidth - tooltipWidth
-										: tooltipX,
-								y:
-									tooltipY + tooltipHeight > windowHeight
-										? windowHeight - tooltipHeight
-										: tooltipY,
+							const { chart, tooltipPosition } = context;
+							const { tooltip } = chart;
+							const { width, height } = tooltip;
+							const { x, y } = tooltipPosition();
+							const { innerWidth, innerHeight } = window;
+
+							return {
+								x: Math.min(x, innerWidth - width),
+								y: Math.min(y, innerHeight - height),
 							};
-							return position;
 						},
 						callbacks: {
 							title: (tooltipItem) => {
@@ -223,7 +201,6 @@ export default {
 								return !item.raw ? colors.muted : "#fff";
 							},
 						},
-						backgroundColor: "#000",
 						itemSort: function (a, b) {
 							return b.datasetIndex - a.datasetIndex;
 						},
@@ -255,7 +232,6 @@ export default {
 						position: "right",
 					},
 				},
-				animation: false,
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
index 3f33feea57..689f642412 100644
--- a/assets/js/components/Sessions/SolarGroupedChart.vue
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -11,18 +11,13 @@
 
 <script>
 import { PolarArea } from "vue-chartjs";
-import { Chart, RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
 import colors, { dimColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 
-Chart.register(RadialLinearScale, ArcElement, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
+registerChartComponents([RadialLinearScale, ArcElement, Legend, Tooltip]);
 
 export default {
 	name: "SolarGroupedChart",
@@ -86,17 +81,36 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderRadius: 8,
 				borderWidth: 3,
 				color: colors.text,
 				spacing: 0,
+				radius: "100%",
 				plugins: {
-					legend: { display: false },
-					tooltip: { enabled: false },
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							title: () => null,
+							label: (tooltipItem) => {
+								const { label, raw = 0 } = tooltipItem;
+								return label + ": " + this.fmtPercentage(raw, 1);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
 				},
 				scales: {
 					r: {
@@ -110,7 +124,6 @@ export default {
 						grid: { color: colors.border },
 					},
 				},
-				radius: "100%",
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
index 037ecd1a6d..7ad852c8ef 100644
--- a/assets/js/components/Sessions/SolarYearChart.vue
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -19,28 +19,13 @@
 
 <script>
 import { Radar } from "vue-chartjs";
-import { Chart, RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
 import colors, { dimColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 
-Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-
-Tooltip.positioners.topCenter = function () {
-	const { chart } = this;
-	return {
-		x: chart.width / 2,
-		y: chart.height / 10,
-		xAlign: "center",
-		yAlign: "center",
-	};
-};
+registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
 
 export default {
 	name: "SolarYearChart",
@@ -158,23 +143,21 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderWidth: 4,
 				color: colors.text,
 				spacing: 0,
+				radius: "100%",
 				elements: { line: { tension: 0.05 } },
 				plugins: {
-					legend: { display: false },
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						intersect: false,
 						mode: "index",
-						position: "topCenter",
-						boxPadding: 5,
-						usePointStyle: true,
-						borderWidth: 0.00001,
+						position: "topBottomCenter",
 						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
@@ -189,7 +172,6 @@ export default {
 								};
 							},
 						},
-						backgroundColor: "#000",
 					},
 				},
 				scales: {
@@ -208,7 +190,6 @@ export default {
 						grid: { color: colors.border },
 					},
 				},
-				radius: "100%",
 			};
 		},
 	},
diff --git a/assets/js/components/Sessions/chartConfig.js b/assets/js/components/Sessions/chartConfig.js
new file mode 100644
index 0000000000..eedac10c69
--- /dev/null
+++ b/assets/js/components/Sessions/chartConfig.js
@@ -0,0 +1,53 @@
+import { Chart, Tooltip } from "chart.js";
+
+// Register common components
+export function registerChartComponents(components) {
+  Chart.register(...components);
+}
+
+// Set default configurations immediately
+Chart.defaults.font.family = window
+  .getComputedStyle(document.documentElement)
+  .getPropertyValue("--bs-font-sans-serif");
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+// Custom tooltip positioners
+Tooltip.positioners.center = function () {
+  const { chart } = this;
+  return {
+    x: chart.width / 2,
+    y: chart.height / 2,
+    xAlign: "center",
+    yAlign: "center",
+  };
+};
+
+Tooltip.positioners.topBottomCenter = function (context, eventPosition) {
+  const { chart } = this;
+  const { height, width } = chart;
+
+  const isTop = eventPosition.y > height / 2;
+  const yPadding = height / 5;
+  const y = isTop ? yPadding : height - yPadding;
+  const x = width / 2;
+
+  return { x, y, xAlign: "center", yAlign: "center" };
+};
+
+export const commonOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      backgroundColor: "#000000cc",
+      boxPadding: 5,
+      usePointStyle: true,
+      borderWidth: 0.00001,
+      labelPointStyle: "circle",
+    },
+  },
+};

From 9759a80ff6ffcbed5bc2e59bc77cb6c97a2c0259 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 4 Oct 2024 14:02:58 +0200
Subject: [PATCH 14/19] cost wip

---
 .../components/Sessions/CostHistoryChart.vue  | 238 ++++++++++++++++++
 .../Sessions/EnergyGroupedChart.vue           |  17 +-
 .../Sessions/EnergyHistoryChart.vue           |  14 +-
 .../components/Sessions/SolarGroupedChart.vue |   9 +-
 assets/js/views/Sessions.vue                  |  68 ++++-
 5 files changed, 323 insertions(+), 23 deletions(-)
 create mode 100644 assets/js/components/Sessions/CostHistoryChart.vue

diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
new file mode 100644
index 0000000000..d0d24e3590
--- /dev/null
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -0,0 +1,238 @@
+<template>
+	<div>
+		<div style="position: relative; height: 300px" class="my-3">
+			<Bar :data="chartData" :options="options" />
+		</div>
+		<LegendList :legends="legends" />
+	</div>
+</template>
+
+<script>
+import { Bar } from "vue-chartjs";
+import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import LegendList from "./LegendList.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors from "../../colors";
+
+registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
+
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+export default {
+	name: "CostHistoryChart",
+	components: { Bar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: GROUPS.NONE },
+		period: { type: String, default: "total" },
+		currency: { type: String, default: "EUR" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		month() {
+			return this.firstDay?.getMonth() + 1;
+		},
+		year() {
+			return this.firstDay?.getFullYear();
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update history data");
+			const result = {};
+			const groups = new Set();
+
+			if (this.sessions.length > 0) {
+				//const lastDay = new Date(this.year, this.month, 0);
+				//const daysInMonth = this.lastDay.getDate();
+				let xFrom, xTo;
+				if (this.period === "total") {
+					xFrom = this.firstDay.getFullYear();
+					xTo = this.lastDay.getFullYear();
+				} else if (this.period === "year") {
+					xFrom = 1;
+					xTo = 12;
+				} else {
+					xFrom = 1;
+					xTo = new Date(
+						this.lastDay.getFullYear(),
+						this.lastDay.getMonth() + 1,
+						0
+					).getDate();
+				}
+
+				// initialize result with empty arrays
+				for (let i = xFrom; i <= xTo; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					let index;
+					const date = new Date(session.created);
+					if (this.period === "month") {
+						index = date.getDate();
+					} else if (this.period === "year") {
+						index = date.getMonth() + 1;
+					} else {
+						index = date.getFullYear();
+					}
+
+					if (this.groupBy === GROUPS.NONE) {
+						groups.add("grid");
+						groups.add("self");
+						const charged = session.chargedEnergy;
+						const self = (charged / 100) * session.solarPercentage;
+						const grid = charged - self;
+						result[index].self = (result[index].self || 0) + self;
+						result[index].grid = (result[index].grid || 0) + grid;
+					} else {
+						const groupKey = session[this.groupBy];
+						groups.add(groupKey);
+						result[index][groupKey] =
+							(result[index][groupKey] || 0) + session.chargedEnergy;
+					}
+				});
+			}
+
+			const datasets = Array.from(groups).map((group) => {
+				const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+				const backgroundColor = this.colorMappings[colorGroup][group];
+				const label =
+					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
+
+				return {
+					backgroundColor,
+					label,
+					data: Object.values(result).map((day) => day[group] || 0),
+					borderRadius: (context) => {
+						const threshold = 0.04; // 400 Wh
+						const { dataIndex, datasetIndex } = context;
+						const currentValue = context.dataset.data[dataIndex];
+						const previousValuesExist = context.chart.data.datasets
+							.slice(datasetIndex + 1)
+							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
+						return currentValue > threshold && !previousValuesExist
+							? { topLeft: 10, topRight: 10 }
+							: { topLeft: 0, topRight: 0 };
+					},
+				};
+			});
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		legends() {
+			return this.chartData.datasets.map((dataset) => ({
+				label: dataset.label,
+				color: dataset.backgroundColor,
+				value: this.fmtWh(
+					dataset.data.reduce((acc, curr) => acc + curr, 0) * 1e3,
+					POWER_UNIT.AUTO
+				),
+			}));
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				color: colors.text,
+				borderSkipped: false,
+				maxBarThickness: 40,
+				animation: false,
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						mode: "index",
+						intersect: false,
+						positioner: (context) => {
+							const { chart, tooltipPosition } = context;
+							const { tooltip } = chart;
+							const { width, height } = tooltip;
+							const { x, y } = tooltipPosition();
+							const { innerWidth, innerHeight } = window;
+
+							return {
+								x: Math.min(x, innerWidth - width),
+								y: Math.min(y, innerHeight - height),
+							};
+						},
+						callbacks: {
+							title: (tooltipItem) => {
+								const date = new Date(this.year, this.month, tooltipItem[0].label);
+								return this.fmtDayMonth(date);
+							},
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw || 0;
+								return (
+									datasetLabel + ": " + this.fmtWh(value * 1e3, POWER_UNIT.AUTO)
+								);
+							},
+							labelColor: (item) => {
+								const { backgroundColor } = item.element.options;
+								const white = "#fff";
+								return {
+									borderColor: !item.raw ? colors.muted : white,
+									backgroundColor,
+								};
+							},
+							labelTextColor: (item) => {
+								return !item.raw ? colors.muted : "#fff";
+							},
+						},
+						itemSort: function (a, b) {
+							return b.datasetIndex - a.datasetIndex;
+						},
+					},
+				},
+				scales: {
+					x: {
+						stacked: true,
+						border: { display: false },
+						grid: { display: false },
+						ticks: { color: colors.muted },
+					},
+					y: {
+						stacked: true,
+						border: { display: false },
+						grid: { color: colors.border },
+						title: {
+							text: this.fmtCurrencySymbol(this.currency),
+							display: true,
+							color: colors.muted,
+						},
+						ticks: {
+							callback: (value, index) =>
+								index % 2 === 0
+									? this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0)
+									: null,
+							color: colors.muted,
+						},
+						position: "right",
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
index 923cc26387..8ca33cf63c 100644
--- a/assets/js/components/Sessions/EnergyGroupedChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -19,12 +19,18 @@ import colors from "../../colors";
 
 registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
 
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
 export default {
-	name: "EnergyAggregateChart",
+	name: "EnergyGroupedChart",
 	components: { Doughnut, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: "loadpoint" },
+		groupBy: { type: String, default: GROUPS.NONE },
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {}, solar: {} }) },
 	},
 	mixins: [formatter],
@@ -33,7 +39,7 @@ export default {
 			console.log("update energy aggregate data");
 			const aggregatedData = {};
 
-			if (this.groupBy === "solar") {
+			if (this.groupBy === GROUPS.NONE) {
 				const total = this.sessions.reduce((acc, s) => acc + s.chargedEnergy, 0);
 				const self = this.sessions.reduce(
 					(acc, s) => acc + (s.chargedEnergy / 100) * s.solarPercentage,
@@ -55,11 +61,12 @@ export default {
 			const sortedEntries = Object.entries(aggregatedData); //.sort((a, b) => b[1] - a[1]);
 
 			const labels = sortedEntries.map(([label]) =>
-				this.groupBy === "solar" ? this.$t(`sessions.group.${label}`) : label
+				this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${label}`) : label
 			);
 			const data = sortedEntries.map(([, value]) => value);
+			const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
 			const backgroundColor = sortedEntries.map(
-				([label]) => this.colorMappings[this.groupBy][label]
+				([label]) => this.colorMappings[colorGroup][label]
 			);
 
 			return {
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index 6dd960343d..ff45613c74 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -18,7 +18,7 @@ import colors from "../../colors";
 registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
 
 const GROUPS = {
-	SOLAR: "solar",
+	NONE: "none",
 	LOADPOINT: "loadpoint",
 	VEHICLE: "vehicle",
 };
@@ -28,7 +28,7 @@ export default {
 	components: { Bar, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: GROUPS.SOLAR },
+		groupBy: { type: String, default: GROUPS.NONE },
 		period: { type: String, default: "total" },
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
 	},
@@ -93,7 +93,7 @@ export default {
 						index = date.getFullYear();
 					}
 
-					if (this.groupBy === GROUPS.SOLAR) {
+					if (this.groupBy === GROUPS.NONE) {
 						groups.add("grid");
 						groups.add("self");
 						const charged = session.chargedEnergy;
@@ -111,12 +111,10 @@ export default {
 			}
 
 			const datasets = Array.from(groups).map((group) => {
-				const backgroundColor =
-					this.groupBy === GROUPS.SOLAR
-						? colors[group]
-						: this.colorMappings[this.groupBy][group];
+				const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+				const backgroundColor = this.colorMappings[colorGroup][group];
 				const label =
-					this.groupBy === GROUPS.SOLAR ? this.$t(`sessions.group.${group}`) : group;
+					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
 
 				return {
 					backgroundColor,
diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
index 689f642412..9c452ab358 100644
--- a/assets/js/components/Sessions/SolarGroupedChart.vue
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -19,6 +19,12 @@ import LegendList from "./LegendList.vue";
 
 registerChartComponents([RadialLinearScale, ArcElement, Legend, Tooltip]);
 
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
 export default {
 	name: "SolarGroupedChart",
 	components: { PolarArea, LegendList },
@@ -59,7 +65,8 @@ export default {
 			});
 
 			console.log("solar grouped data", labels, data);
-			const borderColors = labels.map((label) => this.colorMappings[this.groupBy][label]);
+			const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+			const borderColors = labels.map((label) => this.colorMappings[colorGroup][label]);
 			const backgroundColors = borderColors.map((color) => dimColor(color));
 			return {
 				labels: labels,
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 875c9ed6b7..bb97643a1f 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -39,7 +39,7 @@
 							:active="selectedGroup === group"
 							@click="updateGroup(group)"
 						>
-							<component :is="groupIcons[group]"></component>
+							<component :is="solarGroupIcons[group]"></component>
 						</IconSelectItem>
 					</IconSelectGroup>
 				</div>
@@ -74,6 +74,41 @@
 						/>
 					</div>
 				</div>
+				<div class="d-flex justify-content-between align-items-center gap-2">
+					<h3
+						class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
+					>
+						<span class="d-block no-wrap text-truncate">{{ energyTitle }}</span>
+						<small class="d-block no-wrap text-truncate">{{ energySubTitle }}</small>
+					</h3>
+					<div class="d-flex gap-2">
+						<IconSelectGroup>
+							<IconSelectItem active>
+								<DynamicPriceIcon />
+							</IconSelectItem>
+							<IconSelectItem>
+								<shopicon-regular-eco1></shopicon-regular-eco1>
+							</IconSelectItem>
+						</IconSelectGroup>
+						<IconSelectGroup>
+							<IconSelectItem
+								v-for="group in Object.values(groups)"
+								:key="group"
+								:active="selectedGroup === group"
+								@click="updateGroup(group)"
+							>
+								<component :is="costGroupIcons[group]"></component>
+							</IconSelectItem>
+						</IconSelectGroup>
+					</div>
+				</div>
+				<EnergyHistoryChart
+					class="mb-5"
+					:sessions="currentSessions"
+					:color-mappings="colorMappings"
+					:group-by="selectedGroup"
+					:period="period"
+				/>
 				<div v-if="showTable">
 					<h3>Übersicht</h3>
 					<SessionTable
@@ -136,9 +171,10 @@ import colors from "../colors";
 import settings from "../settings";
 import PeriodSelector from "../components/Sessions/PeriodSelector.vue";
 import DateNavigator from "../components/Sessions/DateNavigator.vue";
-
+import DynamicPriceIcon from "../components/MaterialIcon/DynamicPrice.vue";
+import TotalIcon from "../components/MaterialIcon/Total.vue";
 const GROUPS = {
-	SOLAR: "solar",
+	NONE: "none",
 	LOADPOINT: "loadpoint",
 	VEHICLE: "vehicle",
 };
@@ -165,6 +201,7 @@ export default {
 		SolarYearChart,
 		PeriodSelector,
 		DateNavigator,
+		DynamicPriceIcon,
 	},
 	mixins: [formatter],
 	props: {
@@ -179,7 +216,7 @@ export default {
 	data() {
 		return {
 			sessions: [],
-			selectedGroup: settings.sessionsGroup || GROUPS.SOLAR,
+			selectedGroup: settings.sessionsGroup || GROUPS.NONE,
 			selectedSessionId: undefined,
 			groups: GROUPS,
 			periods: PERIODS,
@@ -339,9 +376,22 @@ export default {
 
 			return { loadpoint: loadpointColors, vehicle: vehicleColors, solar };
 		},
-		groupIcons() {
+		solarGroupIcons() {
+			return {
+				[GROUPS.NONE]: "shopicon-regular-sun",
+				[GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[GROUPS.VEHICLE]: "shopicon-regular-car3",
+			};
+		},
+		costTypeIcons() {
+			return {
+				[GROUPS.PRICE]: DynamicPriceIcon,
+				[GROUPS.CO2]: "shopicon-regular-eco1",
+			};
+		},
+		costGroupIcons() {
 			return {
-				[GROUPS.SOLAR]: "shopicon-regular-sun",
+				[GROUPS.NONE]: TotalIcon,
 				[GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
 				[GROUPS.VEHICLE]: "shopicon-regular-car3",
 			};
@@ -396,18 +446,18 @@ export default {
 			return yearMonths;
 		},
 		groupEntriesAvailable() {
-			if (this.selectedGroup === GROUPS.SOLAR || !this.currentSessions.length) return false;
+			if (this.selectedGroup === GROUPS.NONE || !this.currentSessions.length) return false;
 			return new Set(this.currentSessions.map((s) => s[this.selectedGroup])).size > 1;
 		},
 		showSolarYearChart() {
 			return (
 				this.showExtraCharts &&
 				this.period !== PERIODS.MONTH &&
-				this.selectedGroup === GROUPS.SOLAR
+				this.selectedGroup === GROUPS.NONE
 			);
 		},
 		showExtraCharts() {
-			if (this.period === PERIODS.MONTH && this.selectedGroup === GROUPS.SOLAR) {
+			if (this.period === PERIODS.MONTH && this.selectedGroup === GROUPS.NONE) {
 				return false;
 			}
 			if (

From db29a9f50a65ce9e7223bd435018e4afe3da8042 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 4 Oct 2024 16:54:37 +0200
Subject: [PATCH 15/19] add price (wip)

---
 assets/js/colors.js                           |   2 +
 .../components/Sessions/CostHistoryChart.vue  |  67 +++--
 assets/js/mixins/formatter.js                 |  32 ++-
 assets/js/settings.js                         |  12 +-
 assets/js/views/Sessions.vue                  | 234 +++++++++++++-----
 i18n/en.toml                                  |   2 +
 6 files changed, 248 insertions(+), 101 deletions(-)

diff --git a/assets/js/colors.js b/assets/js/colors.js
index 191c6e3abe..893e02df47 100644
--- a/assets/js/colors.js
+++ b/assets/js/colors.js
@@ -14,6 +14,7 @@ const colors = reactive({
   self: null,
   grid: null,
   price: null,
+  co2: null,
   background: null,
   selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
   palette: [
@@ -40,6 +41,7 @@ function updateCssColors() {
   colors.self = style.getPropertyValue("--evcc-self");
   colors.grid = style.getPropertyValue("--evcc-grid");
   colors.price = style.getPropertyValue("--evcc-accent1");
+  colors.co2 = style.getPropertyValue("--evcc-accent2");
   colors.background = style.getPropertyValue("--evcc-background");
 }
 
diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
index d0d24e3590..0e0d4ed46d 100644
--- a/assets/js/components/Sessions/CostHistoryChart.vue
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -23,12 +23,18 @@ const GROUPS = {
 	VEHICLE: "vehicle",
 };
 
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
 export default {
 	name: "CostHistoryChart",
 	components: { Bar, LegendList },
 	props: {
 		sessions: { type: Array, default: () => [] },
 		groupBy: { type: String, default: GROUPS.NONE },
+		costType: { type: String, default: COST_TYPES.PRICE },
 		period: { type: String, default: "total" },
 		currency: { type: String, default: "EUR" },
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
@@ -94,25 +100,21 @@ export default {
 						index = date.getFullYear();
 					}
 
-					if (this.groupBy === GROUPS.NONE) {
-						groups.add("grid");
-						groups.add("self");
-						const charged = session.chargedEnergy;
-						const self = (charged / 100) * session.solarPercentage;
-						const grid = charged - self;
-						result[index].self = (result[index].self || 0) + self;
-						result[index].grid = (result[index].grid || 0) + grid;
-					} else {
-						const groupKey = session[this.groupBy];
-						groups.add(groupKey);
-						result[index][groupKey] =
-							(result[index][groupKey] || 0) + session.chargedEnergy;
-					}
+					const groupKey =
+						this.groupBy === GROUPS.NONE ? this.costType : session[this.groupBy];
+					groups.add(groupKey);
+
+					const value =
+						this.costType === COST_TYPES.PRICE
+							? session.price
+							: session.co2PerKWh * session.chargedEnergy;
+
+					result[index][groupKey] = (result[index][groupKey] || 0) + value;
 				});
 			}
 
 			const datasets = Array.from(groups).map((group) => {
-				const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+				const colorGroup = this.groupBy === GROUPS.NONE ? "cost" : this.groupBy;
 				const backgroundColor = this.colorMappings[colorGroup][group];
 				const label =
 					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
@@ -141,14 +143,18 @@ export default {
 			};
 		},
 		legends() {
-			return this.chartData.datasets.map((dataset) => ({
-				label: dataset.label,
-				color: dataset.backgroundColor,
-				value: this.fmtWh(
-					dataset.data.reduce((acc, curr) => acc + curr, 0) * 1e3,
-					POWER_UNIT.AUTO
-				),
-			}));
+			return this.chartData.datasets.map((dataset) => {
+				const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
+				const value =
+					this.costType === COST_TYPES.PRICE
+						? this.fmtMoney(total, this.currency, true, true)
+						: this.fmtGrams(total);
+				return {
+					label: dataset.label,
+					color: dataset.backgroundColor,
+					value,
+				};
+			});
 		},
 		options() {
 			return {
@@ -184,8 +190,13 @@ export default {
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
 								const value = tooltipItem.raw || 0;
+
 								return (
-									datasetLabel + ": " + this.fmtWh(value * 1e3, POWER_UNIT.AUTO)
+									datasetLabel +
+									": " +
+									(this.costType === COST_TYPES.PRICE
+										? this.fmtMoney(value, this.currency, true, true)
+										: this.fmtGrams(value))
 								);
 							},
 							labelColor: (item) => {
@@ -217,14 +228,16 @@ export default {
 						border: { display: false },
 						grid: { color: colors.border },
 						title: {
-							text: this.fmtCurrencySymbol(this.currency),
-							display: true,
+							text: "kgCO₂e",
+							display: this.costType === COST_TYPES.CO2,
 							color: colors.muted,
 						},
 						ticks: {
 							callback: (value, index) =>
 								index % 2 === 0
-									? this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0)
+									? this.costType === COST_TYPES.PRICE
+										? this.fmtMoney(value, this.currency, false, true)
+										: this.fmtNumber(value / 1e3, 0)
 									: null,
 							color: colors.muted,
 						},
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index 502ce6e741..13d6366533 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -82,6 +82,24 @@ export default {
         maximumFractionDigits: decimals,
       }).format(number);
     },
+    fmtGrams: function (gramms) {
+      // handle gram, kilogram, tonne
+      let unit = "gram";
+      let value = gramms;
+      if (gramms >= 1000000) {
+        unit = "tonne";
+        value = gramms / 1000000;
+      } else if (gramms >= 1000) {
+        unit = "kilogram";
+        value = gramms / 1000;
+      }
+      return new Intl.NumberFormat(this.$i18n?.locale, {
+        style: "unit",
+        unit,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(value);
+    },
     fmtCo2Short: function (gramms) {
       return `${this.fmtNumber(gramms, 0)} g`;
     },
@@ -217,16 +235,16 @@ export default {
         month: "short",
       }).format(date);
     },
-    fmtMoney: function (amout = 0, currency = "EUR", decimals = true) {
-      return new Intl.NumberFormat(this.$i18n?.locale, {
+    fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) {
+      const currencyDisplay = withSymbol ? "narrowSymbol" : "code";
+      const result = new Intl.NumberFormat(this.$i18n?.locale, {
         style: "currency",
         currency,
-        currencyDisplay: "code",
+        currencyDisplay,
         maximumFractionDigits: decimals ? undefined : 0,
-      })
-        .format(amout)
-        .replace(currency, "")
-        .trim();
+      }).format(amout);
+
+      return withSymbol ? result : result.replace(currency, "").trim();
     },
     fmtCurrencySymbol: function (currency = "EUR") {
       const symbols = { EUR: "€", USD: "$" };
diff --git a/assets/js/settings.js b/assets/js/settings.js
index 34de4c68c9..f0d5b37dc7 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -9,7 +9,9 @@ const SESSION_INFO = "session_info";
 const SESSION_COLUMNS = "session_columns";
 const SAVINGS_PERIOD = "savings_period";
 const SAVINGS_REGION = "savings_region";
-const SESSIONS_GROUP = "sessions_group";
+const SESSIONS_SOLAR_GROUP = "sessions_solar_group";
+const SESSIONS_COST_GROUP = "sessions_cost_group";
+const SESSIONS_COST_TYPE = "sessions_cost_type";
 
 function read(key) {
   return window.localStorage[key];
@@ -61,7 +63,9 @@ const settings = reactive({
   sessionColumns: readArray(SESSION_COLUMNS),
   savingsPeriod: read(SAVINGS_PERIOD),
   savingsRegion: read(SAVINGS_REGION),
-  sessionsGroup: read(SESSIONS_GROUP),
+  sessionsSolarGroup: read(SESSIONS_SOLAR_GROUP),
+  sessionsCostGroup: read(SESSIONS_COST_GROUP),
+  sessionsCostType: read(SESSIONS_COST_TYPE),
 });
 
 watch(() => settings.locale, save(SETTINGS_LOCALE));
@@ -73,5 +77,7 @@ watch(() => settings.sessionInfo, saveArray(SESSION_INFO));
 watch(() => settings.sessionColumns, saveArray(SESSION_COLUMNS));
 watch(() => settings.savingsPeriod, save(SAVINGS_PERIOD));
 watch(() => settings.savingsRegion, save(SAVINGS_REGION));
-watch(() => settings.sessionsGroup, save(SESSIONS_GROUP));
+watch(() => settings.sessionsSolarGroup, save(SESSIONS_SOLAR_GROUP));
+watch(() => settings.sessionsCostGroup, save(SESSIONS_COST_GROUP));
+watch(() => settings.sessionsCostType, save(SESSIONS_COST_TYPE));
 export default settings;
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index bb97643a1f..890fd380cf 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -34,10 +34,10 @@
 					</h3>
 					<IconSelectGroup>
 						<IconSelectItem
-							v-for="group in Object.values(groups)"
+							v-for="group in Object.values(solarGroups)"
 							:key="group"
-							:active="selectedGroup === group"
-							@click="updateGroup(group)"
+							:active="selectedSolarGroup === group"
+							@click="updateSolarGroup(group)"
 						>
 							<component :is="solarGroupIcons[group]"></component>
 						</IconSelectItem>
@@ -47,7 +47,7 @@
 					class="mb-5"
 					:sessions="currentSessions"
 					:color-mappings="colorMappings"
-					:group-by="selectedGroup"
+					:group-by="selectedSolarGroup"
 					:period="period"
 				/>
 				<div v-if="showExtraCharts" class="row align-items-start">
@@ -62,7 +62,7 @@
 							v-else
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
-							:group-by="selectedGroup"
+							:group-by="selectedSolarGroup"
 						/>
 					</div>
 					<div class="col-12 col-lg-6 mb-5">
@@ -70,45 +70,54 @@
 						<EnergyGroupedChart
 							:sessions="currentSessions"
 							:color-mappings="colorMappings"
-							:group-by="selectedGroup"
+							:group-by="selectedSolarGroup"
 						/>
 					</div>
 				</div>
-				<div class="d-flex justify-content-between align-items-center gap-2">
-					<h3
-						class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
-					>
-						<span class="d-block no-wrap text-truncate">{{ energyTitle }}</span>
-						<small class="d-block no-wrap text-truncate">{{ energySubTitle }}</small>
-					</h3>
-					<div class="d-flex gap-2">
-						<IconSelectGroup>
-							<IconSelectItem active>
-								<DynamicPriceIcon />
-							</IconSelectItem>
-							<IconSelectItem>
-								<shopicon-regular-eco1></shopicon-regular-eco1>
-							</IconSelectItem>
-						</IconSelectGroup>
-						<IconSelectGroup>
-							<IconSelectItem
-								v-for="group in Object.values(groups)"
-								:key="group"
-								:active="selectedGroup === group"
-								@click="updateGroup(group)"
-							>
-								<component :is="costGroupIcons[group]"></component>
-							</IconSelectItem>
-						</IconSelectGroup>
+				<div v-if="showCostCharts">
+					<div class="d-flex justify-content-between align-items-center gap-2">
+						<h3
+							class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
+						>
+							<span class="d-block no-wrap text-truncate">{{ costTitle }}</span>
+							<small class="d-block no-wrap text-truncate">{{ costSubTitle }}</small>
+						</h3>
+						<div class="d-flex gap-2">
+							<IconSelectGroup v-if="showCostTypeSelector">
+								<IconSelectItem
+									:active="selectedCostType === costTypes.PRICE"
+									@click="updateCostType(costTypes.PRICE)"
+								>
+									<DynamicPriceIcon />
+								</IconSelectItem>
+								<IconSelectItem
+									:active="selectedCostType === costTypes.CO2"
+									@click="updateCostType(costTypes.CO2)"
+								>
+									<shopicon-regular-eco1></shopicon-regular-eco1>
+								</IconSelectItem>
+							</IconSelectGroup>
+							<IconSelectGroup>
+								<IconSelectItem
+									v-for="group in Object.values(costGroups)"
+									:key="group"
+									:active="selectedCostGroup === group"
+									@click="updateCostGroup(group)"
+								>
+									<component :is="costGroupIcons[group]"></component>
+								</IconSelectItem>
+							</IconSelectGroup>
+						</div>
 					</div>
+					<CostHistoryChart
+						class="mb-5"
+						:sessions="currentCostTypeSessions"
+						:color-mappings="colorMappings"
+						:group-by="selectedCostGroup"
+						:cost-type="activeCostType"
+						:period="period"
+					/>
 				</div>
-				<EnergyHistoryChart
-					class="mb-5"
-					:sessions="currentSessions"
-					:color-mappings="colorMappings"
-					:group-by="selectedGroup"
-					:period="period"
-				/>
 				<div v-if="showTable">
 					<h3>Übersicht</h3>
 					<SessionTable
@@ -162,6 +171,7 @@ import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
 import EnergyGroupedChart from "../components/Sessions/EnergyGroupedChart.vue";
 import SolarGroupedChart from "../components/Sessions/SolarGroupedChart.vue";
 import SolarYearChart from "../components/Sessions/SolarYearChart.vue";
+import CostHistoryChart from "../components/Sessions/CostHistoryChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
@@ -173,7 +183,19 @@ import PeriodSelector from "../components/Sessions/PeriodSelector.vue";
 import DateNavigator from "../components/Sessions/DateNavigator.vue";
 import DynamicPriceIcon from "../components/MaterialIcon/DynamicPrice.vue";
 import TotalIcon from "../components/MaterialIcon/Total.vue";
-const GROUPS = {
+
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
+const SOLAR_GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+const COST_GROUPS = {
 	NONE: "none",
 	LOADPOINT: "loadpoint",
 	VEHICLE: "vehicle",
@@ -202,6 +224,7 @@ export default {
 		PeriodSelector,
 		DateNavigator,
 		DynamicPriceIcon,
+		CostHistoryChart,
 	},
 	mixins: [formatter],
 	props: {
@@ -216,20 +239,27 @@ export default {
 	data() {
 		return {
 			sessions: [],
-			selectedGroup: settings.sessionsGroup || GROUPS.NONE,
+			selectedSolarGroup: settings.sessionsSolarGroup || SOLAR_GROUPS.NONE,
+			selectedCostGroup: settings.sessionsCostGroup || COST_GROUPS.NONE,
+			selectedCostType: settings.sessionsCostType || COST_TYPES.PRICE,
 			selectedSessionId: undefined,
-			groups: GROUPS,
 			periods: PERIODS,
+			solarGroups: SOLAR_GROUPS,
+			costGroups: COST_GROUPS,
+			costTypes: COST_TYPES,
 		};
 	},
 	head() {
 		return { title: `${this.$t("sessions.title")} | evcc` };
 	},
 	computed: {
+		currency() {
+			return store.state.currency || "EUR";
+		},
 		energyTitle() {
-			if (this.selectedGroup === GROUPS.VEHICLE) {
+			if (this.selectedSolarGroup === SOLAR_GROUPS.VEHICLE) {
 				return "Fahrzeuge";
-			} else if (this.selectedGroup === GROUPS.LOADPOINT) {
+			} else if (this.selectedSolarGroup === SOLAR_GROUPS.LOADPOINT) {
 				return "Ladepunkte";
 			} else {
 				return `${this.solarPercentageFmt} Sonne`;
@@ -267,6 +297,66 @@ export default {
 				0
 			);
 		},
+		currentSessionsWithPrice() {
+			return this.currentSessions.filter((s) => s.price !== null);
+		},
+		currentCostTypeSessions() {
+			if (this.activeCostType === COST_TYPES.PRICE) {
+				return this.currentSessionsWithPrice;
+			} else {
+				return this.currentSessionsWithCo2;
+			}
+		},
+		totalPrice() {
+			return this.currentSessionsWithPrice.reduce((acc, s) => acc + s.price, 0);
+		},
+		pricePerKWh() {
+			const list = this.currentSessionsWithPrice;
+			const energy = list.reduce((acc, s) => acc + s.chargedEnergy, 0);
+			return energy ? this.totalPrice / energy : null;
+		},
+		currentSessionsWithCo2() {
+			return this.currentSessions.filter((s) => s.co2PerKWh !== null);
+		},
+		totalCo2() {
+			const list = this.currentSessionsWithCo2;
+			return list.reduce((acc, s) => acc + s.co2PerKWh * s.chargedEnergy, 0);
+		},
+		co2PerKWh() {
+			const list = this.currentSessionsWithCo2;
+			const energy = list.reduce((acc, s) => acc + s.chargedEnergy, 0);
+			return energy ? this.totalCo2 / energy : null;
+		},
+		costTitle() {
+			return this.activeCostType === COST_TYPES.PRICE
+				? `${this.fmtPricePerKWh(this.pricePerKWh, this.currency)} Ladepreis`
+				: `${this.fmtCo2Medium(this.co2PerKWh)} CO₂-Emission`;
+		},
+		costSubTitle() {
+			return this.activeCostType === COST_TYPES.PRICE
+				? `${this.fmtMoney(this.totalPrice, this.currency, true, true)}`
+				: `${this.fmtGrams(this.totalCo2)} gesamt`;
+		},
+		activeCostType() {
+			if (this.selectedCostType === COST_TYPES.PRICE && this.costTypePriceAvailable) {
+				return COST_TYPES.PRICE;
+			} else if (this.selectedCostType === COST_TYPES.CO2 && this.costTypeCo2Available) {
+				return COST_TYPES.CO2;
+			}
+			return null;
+		},
+		showCostCharts() {
+			return this.costTypePriceAvailable || this.costTypeCo2Available;
+		},
+		costTypePriceAvailable() {
+			return this.currentSessionsWithPrice.length > 0;
+		},
+		costTypeCo2Available() {
+			return this.currentSessionsWithCo2.length > 0;
+		},
+		showCostTypeSelector() {
+			return this.costTypePriceAvailable && this.costTypeCo2Available;
+		},
 		startDate() {
 			return new Date(this.sessions[0]?.created || Date.now());
 		},
@@ -305,9 +395,6 @@ export default {
 		selectedSession() {
 			return this.sessions.find((s) => s.id == this.selectedSessionId);
 		},
-		currency() {
-			return store.state.currency;
-		},
 		monthName() {
 			const date = new Date();
 			date.setMonth(this.month - 1, 1);
@@ -373,27 +460,37 @@ export default {
 			const vehicleColors = assignColors(vehicleEnergy, "vehicle");
 
 			const solar = { self: colors.self, grid: colors.grid };
+			const cost = { price: colors.price, co2: colors.co2 };
 
-			return { loadpoint: loadpointColors, vehicle: vehicleColors, solar };
+			return {
+				loadpoint: loadpointColors,
+				vehicle: vehicleColors,
+				solar,
+				cost,
+			};
 		},
 		solarGroupIcons() {
 			return {
-				[GROUPS.NONE]: "shopicon-regular-sun",
-				[GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
-				[GROUPS.VEHICLE]: "shopicon-regular-car3",
+				[SOLAR_GROUPS.NONE]: "shopicon-regular-sun",
+				[SOLAR_GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[SOLAR_GROUPS.VEHICLE]: "shopicon-regular-car3",
 			};
 		},
 		costTypeIcons() {
 			return {
-				[GROUPS.PRICE]: DynamicPriceIcon,
-				[GROUPS.CO2]: "shopicon-regular-eco1",
+				[COST_TYPES.PRICE]: DynamicPriceIcon,
+				[COST_TYPES.CO2]: "shopicon-regular-eco1",
 			};
 		},
 		costGroupIcons() {
 			return {
-				[GROUPS.NONE]: TotalIcon,
-				[GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
-				[GROUPS.VEHICLE]: "shopicon-regular-car3",
+				[COST_GROUPS.NONE]: this.showCostTypeSelector
+					? TotalIcon
+					: this.costTypePriceAvailable
+						? DynamicPriceIcon
+						: "shopicon-regular-eco1",
+				[COST_GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[COST_GROUPS.VEHICLE]: "shopicon-regular-car3",
 			};
 		},
 		showTable() {
@@ -446,22 +543,23 @@ export default {
 			return yearMonths;
 		},
 		groupEntriesAvailable() {
-			if (this.selectedGroup === GROUPS.NONE || !this.currentSessions.length) return false;
-			return new Set(this.currentSessions.map((s) => s[this.selectedGroup])).size > 1;
+			if (this.selectedSolarGroup === SOLAR_GROUPS.NONE || !this.currentSessions.length)
+				return false;
+			return new Set(this.currentSessions.map((s) => s[this.selectedSolarGroup])).size > 1;
 		},
 		showSolarYearChart() {
 			return (
 				this.showExtraCharts &&
 				this.period !== PERIODS.MONTH &&
-				this.selectedGroup === GROUPS.NONE
+				this.selectedSolarGroup === SOLAR_GROUPS.NONE
 			);
 		},
 		showExtraCharts() {
-			if (this.period === PERIODS.MONTH && this.selectedGroup === GROUPS.NONE) {
+			if (this.period === PERIODS.MONTH && this.selectedSolarGroup === SOLAR_GROUPS.NONE) {
 				return false;
 			}
 			if (
-				[GROUPS.LOADPOINT, GROUPS.VEHICLE].includes(this.selectedGroup) &&
+				[SOLAR_GROUPS.LOADPOINT, SOLAR_GROUPS.VEHICLE].includes(this.selectedSolarGroup) &&
 				!this.groupEntriesAvailable
 			) {
 				return false;
@@ -519,9 +617,17 @@ export default {
 			}
 			return `./api/sessions?${params.toString()}`;
 		},
-		updateGroup(group) {
-			this.selectedGroup = group;
-			settings.sessionsGroup = group;
+		updateSolarGroup(group) {
+			this.selectedSolarGroup = group;
+			settings.sessionsSolarGroup = group;
+		},
+		updateCostType(costType) {
+			this.selectedCostType = costType;
+			settings.sessionsCostType = costType;
+		},
+		updateCostGroup(group) {
+			this.selectedCostGroup = group;
+			settings.sessionsCostGroup = group;
 		},
 		updateDate({ year, month }) {
 			this.$router.push({ query: { ...this.$route.query, year, month } });
diff --git a/i18n/en.toml b/i18n/en.toml
index 28c969a23d..a9451c941a 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -642,7 +642,9 @@ allVehicles = "all vehicles"
 filter = "Filter"
 
 [sessions.group]
+co2 = "CO₂"
 grid = "Grid"
+price = "Price"
 self = "Solar"
 
 [sessions.period]

From f21927b9150470e0d942646244ea1253695b5d17 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 11 Oct 2024 10:18:00 +0200
Subject: [PATCH 16/19] avg cost

---
 .../components/Sessions/CostHistoryChart.vue  | 47 +++++++++++++++++--
 .../Sessions/EnergyHistoryChart.vue           | 12 ++++-
 assets/js/mixins/formatter.js                 |  5 ++
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
index 0e0d4ed46d..1093c9fcf5 100644
--- a/assets/js/components/Sessions/CostHistoryChart.vue
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -110,6 +110,10 @@ export default {
 							: session.co2PerKWh * session.chargedEnergy;
 
 					result[index][groupKey] = (result[index][groupKey] || 0) + value;
+
+					result[index].totalCost = (result[index].totalCost || 0) + value;
+					result[index].totalKWh = (result[index].totalKWh || 0) + session.chargedEnergy;
+					result[index].avgCost = result[index].totalCost / result[index].totalKWh;
 				});
 			}
 
@@ -120,9 +124,10 @@ export default {
 					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
 
 				return {
+					type: "bar",
 					backgroundColor,
 					label,
-					data: Object.values(result).map((day) => day[group] || 0),
+					data: Object.values(result).map((index) => index[group] || 0),
 					borderRadius: (context) => {
 						const threshold = 0.04; // 400 Wh
 						const { dataIndex, datasetIndex } = context;
@@ -137,6 +142,15 @@ export default {
 				};
 			});
 
+			// add average price line
+			datasets.push({
+				type: "line",
+				backgroundColor: colors.primary,
+				label: this.$t("sessions.avgPrice"),
+				data: Object.values(result).map((index) => index.avgCost || 0),
+				yAxisID: "y1",
+			});
+
 			return {
 				labels: Object.keys(result),
 				datasets: datasets,
@@ -184,8 +198,16 @@ export default {
 						},
 						callbacks: {
 							title: (tooltipItem) => {
-								const date = new Date(this.year, this.month, tooltipItem[0].label);
-								return this.fmtDayMonth(date);
+								const { label } = tooltipItem[0];
+								if (this.period === "total") {
+									return label;
+								} else if (this.period === "year") {
+									const date = new Date(this.year, label - 1, 1);
+									return this.fmtMonth(date);
+								} else {
+									const date = new Date(this.year, this.month, label);
+									return this.fmtDayMonth(date);
+								}
 							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
@@ -225,6 +247,7 @@ export default {
 					},
 					y: {
 						stacked: true,
+						position: "left",
 						border: { display: false },
 						grid: { color: colors.border },
 						title: {
@@ -241,7 +264,25 @@ export default {
 									: null,
 							color: colors.muted,
 						},
+					},
+					y1: {
 						position: "right",
+						border: { display: false },
+						grid: {
+							drawOnChartArea: false,
+						},
+						title: {
+							text: this.pricePerKWhUnit(this.currency, false),
+							display: this.costType === COST_TYPES.PRICE,
+							color: colors.muted,
+						},
+						ticks: {
+							callback: (value, index) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtPricePerKWh(value, this.currency, false, false)
+									: this.fmtNumber(value / 1e3, 0),
+							color: colors.muted,
+						},
 					},
 				},
 			};
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index ff45613c74..d73d778028 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -177,8 +177,16 @@ export default {
 						},
 						callbacks: {
 							title: (tooltipItem) => {
-								const date = new Date(this.year, this.month, tooltipItem[0].label);
-								return this.fmtDayMonth(date);
+								const { label } = tooltipItem[0];
+								if (this.period === "total") {
+									return label;
+								} else if (this.period === "year") {
+									const date = new Date(this.year, label - 1, 1);
+									return this.fmtMonth(date);
+								} else {
+									const date = new Date(this.year, this.month, label);
+									return this.fmtDayMonth(date);
+								}
 							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index 13d6366533..e25815f7c9 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -221,6 +221,11 @@ export default {
         month: short ? "short" : "long",
       }).format(date);
     },
+    fmtYear: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        year: "numeric",
+      }).format(date);
+    },
     fmtDayMonthYear: function (date) {
       return new Intl.DateTimeFormat(this.$i18n?.locale, {
         day: "numeric",

From 2dbf38d155b80689073b90c84d9da5af5bbe2a5c Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 11 Oct 2024 17:12:56 +0200
Subject: [PATCH 17/19] add avg to cost history chart

---
 assets/js/colors.js                           |  8 +-
 .../components/Sessions/CostHistoryChart.vue  | 91 ++++++++++++++-----
 .../Sessions/EnergyHistoryChart.vue           |  7 +-
 assets/js/mixins/formatter.js                 |  4 +-
 i18n/de.toml                                  |  2 +
 i18n/en.toml                                  |  2 +-
 6 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/assets/js/colors.js b/assets/js/colors.js
index 893e02df47..e89600c0f4 100644
--- a/assets/js/colors.js
+++ b/assets/js/colors.js
@@ -13,8 +13,10 @@ const colors = reactive({
   border: null,
   self: null,
   grid: null,
-  price: null,
-  co2: null,
+  pricePerKWh: "#FFB900FF",
+  price: "#FF912FFF",
+  co2PerKWh: "#00C997FF",
+  co2: "#00916EFF",
   background: null,
   selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
   palette: [
@@ -40,8 +42,6 @@ function updateCssColors() {
   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-accent1");
-  colors.co2 = style.getPropertyValue("--evcc-accent2");
   colors.background = style.getPropertyValue("--evcc-background");
 }
 
diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
index 1093c9fcf5..9591ea0b93 100644
--- a/assets/js/components/Sessions/CostHistoryChart.vue
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -133,6 +133,7 @@ export default {
 						const { dataIndex, datasetIndex } = context;
 						const currentValue = context.dataset.data[dataIndex];
 						const previousValuesExist = context.chart.data.datasets
+							.filter((dataset) => dataset.type === "bar")
 							.slice(datasetIndex + 1)
 							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
 						return currentValue > threshold && !previousValuesExist
@@ -143,12 +144,23 @@ export default {
 			});
 
 			// add average price line
+			const costColor =
+				this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
 			datasets.push({
 				type: "line",
-				backgroundColor: colors.primary,
-				label: this.$t("sessions.avgPrice"),
-				data: Object.values(result).map((index) => index.avgCost || 0),
+				label:
+					this.costType === COST_TYPES.PRICE
+						? this.pricePerKWhUnit(this.currency, false)
+						: "gCO₂e/kWh",
+				data: Object.values(result).map((index) => index.avgCost || null),
 				yAxisID: "y1",
+				tension: 0.25,
+				pointRadius: 0,
+				pointHoverRadius: 6,
+				borderColor: costColor,
+				backgroundColor: costColor,
+				borderWidth: 2,
+				spanGaps: true,
 			});
 
 			return {
@@ -158,11 +170,26 @@ export default {
 		},
 		legends() {
 			return this.chartData.datasets.map((dataset) => {
-				const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
-				const value =
-					this.costType === COST_TYPES.PRICE
-						? this.fmtMoney(total, this.currency, true, true)
-						: this.fmtGrams(total);
+				let value = null;
+
+				// line chart handling
+				if (dataset.type === "line") {
+					const items = dataset.data.filter((v) => v !== null);
+					const min = Math.min(...items);
+					const max = Math.max(...items);
+					const format = (value, withUnit) => {
+						return this.costType === COST_TYPES.PRICE
+							? this.fmtPricePerKWh(value, this.currency, true, withUnit)
+							: this.fmtGrams(value, withUnit);
+					};
+					value = `${format(min, false)} – ${format(max, true)}`;
+				} else {
+					const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
+					value =
+						this.costType === COST_TYPES.PRICE
+							? this.fmtMoney(total, this.currency, true, true)
+							: this.fmtGrams(total);
+				}
 				return {
 					label: dataset.label,
 					color: dataset.backgroundColor,
@@ -211,14 +238,28 @@ export default {
 							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
-								const value = tooltipItem.raw || 0;
+								const value = tooltipItem.raw;
+
+								// line datasets have null values
+								if (tooltipItem.dataset.type === "line") {
+									if (value === null) {
+										return null;
+									}
+
+									return (
+										"⌀ " +
+										(this.costType === COST_TYPES.PRICE
+											? this.fmtPricePerKWh(value, this.currency, false)
+											: this.fmtCo2Medium(value))
+									);
+								}
 
 								return (
 									datasetLabel +
 									": " +
 									(this.costType === COST_TYPES.PRICE
-										? this.fmtMoney(value, this.currency, true, true)
-										: this.fmtGrams(value))
+										? this.fmtMoney(value || 0, this.currency, true, true)
+										: this.fmtGrams(value || 0))
 								);
 							},
 							labelColor: (item) => {
@@ -247,7 +288,7 @@ export default {
 					},
 					y: {
 						stacked: true,
-						position: "left",
+						position: "right",
 						border: { display: false },
 						grid: { color: colors.border },
 						title: {
@@ -256,32 +297,36 @@ export default {
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
-								index % 2 === 0
-									? this.costType === COST_TYPES.PRICE
-										? this.fmtMoney(value, this.currency, false, true)
-										: this.fmtNumber(value / 1e3, 0)
-									: null,
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtMoney(value, this.currency, false, true)
+									: this.fmtNumber(value / 1e3, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
+						min: 0,
 					},
 					y1: {
-						position: "right",
+						position: "left",
 						border: { display: false },
 						grid: {
 							drawOnChartArea: false,
 						},
 						title: {
-							text: this.pricePerKWhUnit(this.currency, false),
-							display: this.costType === COST_TYPES.PRICE,
+							text:
+								this.costType === COST_TYPES.CO2
+									? "gCO₂e/kWh"
+									: this.pricePerKWhUnit(this.currency, false),
+							display: true,
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
+							callback: (value) =>
 								this.costType === COST_TYPES.PRICE
 									? this.fmtPricePerKWh(value, this.currency, false, false)
-									: this.fmtNumber(value / 1e3, 0),
+									: this.fmtNumber(value, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
 					},
 				},
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index d73d778028..5d43ab27ef 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -229,13 +229,12 @@ export default {
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
-								index % 2 === 0
-									? this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0)
-									: null,
+							callback: (value) => this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
 						position: "right",
+						min: 0,
 					},
 				},
 			};
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index e25815f7c9..d65dd595e2 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -82,7 +82,7 @@ export default {
         maximumFractionDigits: decimals,
       }).format(number);
     },
-    fmtGrams: function (gramms) {
+    fmtGrams: function (gramms, withUnit = true) {
       // handle gram, kilogram, tonne
       let unit = "gram";
       let value = gramms;
@@ -94,7 +94,7 @@ export default {
         value = gramms / 1000;
       }
       return new Intl.NumberFormat(this.$i18n?.locale, {
-        style: "unit",
+        style: withUnit ? "unit" : "decimal",
         unit,
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,
diff --git a/i18n/de.toml b/i18n/de.toml
index 79e69d85ea..adf0fe418b 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -645,7 +645,9 @@ allVehicles = "Alle Fahrzeuge"
 filter = "Filtern"
 
 [sessions.group]
+co2 = "Emissionen"
 grid = "Netz"
+price = "Preis"
 self = "Sonne"
 
 [sessions.period]
diff --git a/i18n/en.toml b/i18n/en.toml
index a9451c941a..e0c65c61f8 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -642,7 +642,7 @@ allVehicles = "all vehicles"
 filter = "Filter"
 
 [sessions.group]
-co2 = "CO₂"
+co2 = "Emissions"
 grid = "Grid"
 price = "Price"
 self = "Solar"

From 729ae2db1a9b234e79e616d778d514a61b9610b7 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sat, 12 Oct 2024 14:26:44 +0200
Subject: [PATCH 18/19] wip

---
 .../js/components/Sessions/CostYearChart.vue  | 210 ++++++++++++++++++
 assets/js/views/Sessions.vue                  |  21 ++
 2 files changed, 231 insertions(+)
 create mode 100644 assets/js/components/Sessions/CostYearChart.vue

diff --git a/assets/js/components/Sessions/CostYearChart.vue b/assets/js/components/Sessions/CostYearChart.vue
new file mode 100644
index 0000000000..d8d4c408b7
--- /dev/null
+++ b/assets/js/components/Sessions/CostYearChart.vue
@@ -0,0 +1,210 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<Radar :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList
+				:legends="legends"
+				:grid="period === 'year'"
+				:extra-class="
+					period === 'year'
+						? 'justify-content-around me-3 flex-row'
+						: 'ps-3 flex-md-column'
+				"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Radar } from "vue-chartjs";
+import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
+
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
+export default {
+	name: "CostYearChart",
+	components: { Radar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		costType: { type: String, default: COST_TYPES.PRICE },
+		currency: { type: String },
+		period: { type: String, default: "total" },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update cost year data");
+
+			if (!this.sessions.length > 0) return { labels: [], datasets: [] };
+
+			const firstYear = this.firstDay.getFullYear();
+			const lastYear = this.lastDay.getFullYear();
+
+			const result = {};
+
+			const years = [];
+
+			// initialize result for years and months
+			for (let year = lastYear; year >= firstYear; year--) {
+				const yearString = `${year}`;
+				years.push(yearString);
+				result[yearString] = {};
+				console.log("year", yearString);
+
+				for (let month = 1; month <= 12; month++) {
+					result[yearString][month] = { avgCost: null };
+				}
+			}
+
+			// Populate with actual data
+			this.sessions.forEach((session) => {
+				const date = new Date(session.created);
+				const year = `${date.getFullYear()}`;
+				const month = `${date.getMonth() + 1}`;
+
+				const value =
+					this.costType === COST_TYPES.PRICE
+						? session.price
+						: session.co2PerKWh * session.chargedEnergy;
+
+				const data = result[year][month];
+				data.totalCost = (data.totalCost || 0) + value;
+				data.totalKWh = (data.totalKWh || 0) + session.chargedEnergy;
+				data.avgCost = data.totalKWh ? data.totalCost / data.totalKWh : null;
+			});
+			const datasets = years.map((year) => {
+				const borderColor =
+					this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
+				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
+				const { totalCost, totalKWh } = Object.values(result[year]).reduce(
+					(acc, { totalCost = 0, totalKWh = 0 }) => ({
+						totalCost: acc.totalCost + totalCost,
+						totalKWh: acc.totalKWh + totalKWh,
+					}),
+					{ totalCost: 0, totalKWh: 0 }
+				);
+				const yearData = totalKWh ? totalCost / totalKWh : null;
+				return {
+					backgroundColor,
+					borderColor,
+					label: year,
+					tension: 0.25,
+					data: Object.values(result[year]).map(({ avgCost }) => avgCost),
+					yearData,
+				};
+			});
+
+			const labels = Object.keys(result[firstYear]).map((month) =>
+				this.fmtMonth(new Date(firstYear, month - 1, 1), true)
+			);
+
+			return {
+				labels,
+				datasets,
+			};
+		},
+		legends() {
+			if (this.period === "total") {
+				return this.chartData.datasets.map((dataset) => {
+					const label = dataset.label;
+					const value =
+						dataset.yearData === 0 ? "- %" : this.fmtPricePerKWh(dataset.yearData);
+					return {
+						label,
+						color: dataset.borderColor,
+						value,
+					};
+				});
+			} else {
+				return this.chartData.labels.map((label, index) => {
+					const format = (value) =>
+						this.costType === COST_TYPES.PRICE
+							? this.fmtPricePerKWh(value, this.currency, true)
+							: this.fmtCo2Short(value);
+
+					const value = this.chartData.datasets[0].data[index];
+					return {
+						label,
+						value: value === null ? "-" : format(value),
+					};
+				});
+			}
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				aspectRatio: 1,
+				borderWidth: 4,
+				color: colors.text,
+				spacing: 0,
+				radius: "100%",
+				elements: { line: { tension: 0.05 } },
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							label: (tooltipItem) => {
+								const value = tooltipItem.raw || 0;
+								const datasetLabel = tooltipItem.dataset.label || "";
+								return (
+									datasetLabel +
+									": " +
+									this.fmtPricePerKWh(value, this.currency, true)
+								);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
+				},
+				scales: {
+					r: {
+						beginAtZero: false,
+						ticks: {
+							color: colors.muted,
+							backdropColor: colors.background,
+							font: { size: 10 },
+							callback: (value) => this.fmtCo2Short(value),
+							maxTicksLimit: 4,
+						},
+						angleLines: { display: false },
+						grid: { color: colors.border },
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 890fd380cf..de244ef6fa 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -117,6 +117,19 @@
 						:cost-type="activeCostType"
 						:period="period"
 					/>
+					<div v-if="showExtraCharts" class="row align-items-start">
+						<div class="col-12 col-lg-6 mb-5">
+							<h3 class="fw-normal my-4">{{ avgCostTitle }}</h3>
+							<CostYearChart
+								:period="period"
+								:sessions="currentCostTypeSessions"
+								:cost-type="activeCostType"
+							/>
+						</div>
+						<div class="col-12 col-lg-6 mb-5">
+							<h3 class="fw-normal my-4">{{ costGroupedTitle }}</h3>
+						</div>
+					</div>
 				</div>
 				<div v-if="showTable">
 					<h3>Übersicht</h3>
@@ -172,6 +185,7 @@ import EnergyGroupedChart from "../components/Sessions/EnergyGroupedChart.vue";
 import SolarGroupedChart from "../components/Sessions/SolarGroupedChart.vue";
 import SolarYearChart from "../components/Sessions/SolarYearChart.vue";
 import CostHistoryChart from "../components/Sessions/CostHistoryChart.vue";
+import CostYearChart from "../components/Sessions/CostYearChart.vue";
 import TopHeader from "../components/TopHeader.vue";
 import IconSelectGroup from "../components/IconSelectGroup.vue";
 import IconSelectItem from "../components/IconSelectItem.vue";
@@ -225,6 +239,7 @@ export default {
 		DateNavigator,
 		DynamicPriceIcon,
 		CostHistoryChart,
+		CostYearChart,
 	},
 	mixins: [formatter],
 	props: {
@@ -282,6 +297,12 @@ export default {
 		energyGroupedTitle() {
 			return `${this.energySumFmt} Energiemenge`;
 		},
+		avgCostTitle() {
+			return "Ladepreis";
+		},
+		costGroupedTitle() {
+			return "Ladepunkt";
+		},
 		periodOptions() {
 			return Object.entries(PERIODS).map(([key, value]) => ({
 				name: this.$t(`sessions.period.${key.toLowerCase()}`),

From 4d4edd882469c27fddba50d86aa5058f1674bc08 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 16 Oct 2024 22:46:35 +0200
Subject: [PATCH 19/19] sticker header style

---
 assets/js/colors.js                           |  9 ++
 assets/js/components/SelectGroup.vue          |  1 +
 .../js/components/Sessions/CostYearChart.vue  | 10 ++-
 .../js/components/Sessions/DateNavigator.vue  |  6 +-
 .../js/components/Sessions/SolarYearChart.vue |  4 +-
 assets/js/views/Sessions.vue                  | 88 ++++++++++++++-----
 6 files changed, 88 insertions(+), 30 deletions(-)

diff --git a/assets/js/colors.js b/assets/js/colors.js
index e89600c0f4..10bef91930 100644
--- a/assets/js/colors.js
+++ b/assets/js/colors.js
@@ -52,6 +52,15 @@ updateCssColors();
 export const dimColor = (color) => {
   return color.toLowerCase().replace(/ff$/, "20");
 };
+
+export const lightenColor = (color, level = 0) => {
+  if (level === 0) return color.toLowerCase();
+  const alpha = Math.round(255 * Math.pow(0.6, level))
+    .toString(16)
+    .padStart(2, "0");
+  return color.toLowerCase().replace(/ff$/, alpha);
+};
+
 export const fullColor = (color) => {
   return color.toLowerCase().replace(/20$/, "ff");
 };
diff --git a/assets/js/components/SelectGroup.vue b/assets/js/components/SelectGroup.vue
index ef127f13f0..7a76bea4de 100644
--- a/assets/js/components/SelectGroup.vue
+++ b/assets/js/components/SelectGroup.vue
@@ -33,6 +33,7 @@ export default {
 	border: 2px solid var(--evcc-default-text);
 	border-radius: 17px;
 	padding: 4px;
+	background: var(--evcc-background);
 }
 
 .btn {
diff --git a/assets/js/components/Sessions/CostYearChart.vue b/assets/js/components/Sessions/CostYearChart.vue
index d8d4c408b7..c5a0979425 100644
--- a/assets/js/components/Sessions/CostYearChart.vue
+++ b/assets/js/components/Sessions/CostYearChart.vue
@@ -22,7 +22,7 @@ import { Radar } from "vue-chartjs";
 import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
+import colors, { dimColor, lightenColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
 
@@ -95,8 +95,9 @@ export default {
 				data.avgCost = data.totalKWh ? data.totalCost / data.totalKWh : null;
 			});
 			const datasets = years.map((year) => {
-				const borderColor =
+				let borderColor =
 					this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
+				borderColor = lightenColor(borderColor, years.indexOf(year));
 				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
 				const { totalCost, totalKWh } = Object.values(result[year]).reduce(
 					(acc, { totalCost = 0, totalKWh = 0 }) => ({
@@ -196,7 +197,10 @@ export default {
 							color: colors.muted,
 							backdropColor: colors.background,
 							font: { size: 10 },
-							callback: (value) => this.fmtCo2Short(value),
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtPricePerKWh(value, this.currency, true)
+									: this.fmtCo2Short(value),
 							maxTicksLimit: 4,
 						},
 						angleLines: { display: false },
diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
index fd269a5ebc..8d4bec069b 100644
--- a/assets/js/components/Sessions/DateNavigator.vue
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -3,7 +3,7 @@
 		class="d-sm-flex justify-content-lg-end gap-lg-4"
 		:class="showMonth ? 'justify-content-between' : 'justify-content-end'"
 	>
-		<div v-if="showMonth" class="d-none d-sm-flex mb-2 mb-lg-0 justify-content-between">
+		<div v-if="showMonth" class="d-none d-sm-flex justify-content-between">
 			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
 			<CustomSelect
 				id="sessionsMonth"
@@ -17,7 +17,7 @@
 			</CustomSelect>
 			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
 		</div>
-		<div v-if="showMonth" class="d-flex d-sm-none mb-2 mb-lg-0 justify-content-between">
+		<div v-if="showMonth" class="d-flex d-sm-none justify-content-between">
 			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
 			<CustomSelect
 				id="sessionsMonthYear"
@@ -33,7 +33,7 @@
 		</div>
 		<div
 			v-if="showYear"
-			class="mb-2 mb-lg-0 justify-content-between"
+			class="justify-content-between"
 			:class="showMonth ? 'd-none d-sm-flex' : 'd-flex'"
 		>
 			<DateNavigatorButton prev :disabled="!hasPrevYear" :onClick="emitPrevYear" />
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
index 7ad852c8ef..3cc035025a 100644
--- a/assets/js/components/Sessions/SolarYearChart.vue
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -22,7 +22,7 @@ import { Radar } from "vue-chartjs";
 import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
+import colors, { dimColor, lightenColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 
 registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
@@ -86,7 +86,7 @@ export default {
 			});
 
 			const datasets = years.map((year) => {
-				const borderColor = colors.selfPalette[years.indexOf(year)];
+				const borderColor = lightenColor(colors.self, years.indexOf(year));
 				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
 				return {
 					backgroundColor,
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index de244ef6fa..c09a7c41b9 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -3,26 +3,27 @@
 		<TopHeader :title="$t('sessions.title')" />
 		<div class="row">
 			<main class="col-12">
-				<div class="row pt-2 mb-3 sticky-top evcc-background">
-					<div
-						class="col-lg-5 d-flex mb-sm-3"
-						:class="showDateNavigator ? 'mb-3' : 'mb-4'"
-					>
-						<PeriodSelector
-							:period="period"
-							:periodOptions="periodOptions"
-							@update:period="changePeriod"
-						/>
-					</div>
-					<div v-if="showDateNavigator" class="col-lg-6 mb-3 offset-lg-1">
-						<DateNavigator
-							:month="month"
-							:year="year"
-							:startDate="startDate"
-							:showMonth="showMonthNavigation"
-							:showYear="showYearNavigation"
-							@update-date="updateDate"
-						/>
+				<div class="header-outer sticky-top mb-3">
+					<div class="container">
+						<div class="row py-2 py-sm-3 d-flex flex-column flex-sm-row gap-2 gap-lg-0">
+							<div class="col-lg-5 d-flex mb-lg-0">
+								<PeriodSelector
+									:period="period"
+									:periodOptions="periodOptions"
+									@update:period="changePeriod"
+								/>
+							</div>
+							<div v-if="showDateNavigator" class="col-lg-6 offset-lg-1">
+								<DateNavigator
+									:month="month"
+									:year="year"
+									:startDate="startDate"
+									:showMonth="showMonthNavigation"
+									:showYear="showYearNavigation"
+									@update-date="updateDate"
+								/>
+							</div>
+						</div>
 					</div>
 				</div>
 				<div class="d-flex justify-content-between align-items-center gap-2">
@@ -289,7 +290,7 @@ export default {
 			return this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO);
 		},
 		energySubTitle() {
-			return `${this.energySumFmt}`;
+			return `${this.energySumFmt} gesamt`;
 		},
 		solarTitle() {
 			return `${this.solarPercentageFmt} Sonnenanteil`;
@@ -355,7 +356,7 @@ export default {
 		},
 		costSubTitle() {
 			return this.activeCostType === COST_TYPES.PRICE
-				? `${this.fmtMoney(this.totalPrice, this.currency, true, true)}`
+				? `${this.fmtMoney(this.totalPrice, this.currency, true, true)} gesamt`
 				: `${this.fmtGrams(this.totalCo2)} gesamt`;
 		},
 		activeCostType() {
@@ -656,3 +657,46 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.header-outer {
+	--vertical-shift: 0rem;
+	left: 0;
+	right: 0;
+	margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
+	-webkit-backdrop-filter: blur(35px);
+	backdrop-filter: blur(35px);
+	background-color: #0000;
+	box-shadow: 0 1px 8px 0px var(--evcc-background);
+}
+
+@media (min-width: 576px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 540px) / 2);
+	}
+}
+
+@media (min-width: 768px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 720px) / 2);
+	}
+}
+
+@media (min-width: 992px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 960px) / 2);
+	}
+}
+
+@media (min-width: 1200px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 1140px) / 2);
+	}
+}
+
+@media (min-width: 1400px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 1320px) / 2);
+	}
+}
+</style>