Session UI: small tweaks and fixes (#16867)

Author: naltatis

assets/js/colors.js

@@ -43,8 +43,8 @@ function updateCssColors() {
   colors.self = style.getPropertyValue("--evcc-self");
   colors.grid = style.getPropertyValue("--evcc-grid");
   colors.background = style.getPropertyValue("--evcc-background");
-  colors.pricePerKWh = style.getPropertyValue("--evcc-grid");
-  colors.co2PerKWh = style.getPropertyValue("--evcc-grid");
+  colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium");
+  colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium");
 }
 
 // update colors on theme change

assets/js/components/Config/PropertyField.vue

@@ -49,6 +49,7 @@
 		class="w-50"
 		v-model="value"
 		equal-width
+		transparent
 		:options="[
 			{ value: false, name: $t('config.options.boolean.no') },
 			{ value: true, name: $t('config.options.boolean.yes') },

assets/js/components/Config/UserInterfaceSettings.vue

@@ -5,6 +5,7 @@
 				id="settingsDesign"
 				v-model="theme"
 				class="w-100"
+				transparent
 				:options="
 					THEMES.map((value) => ({
 						value,
@@ -31,6 +32,7 @@
 				id="settingsUnit"
 				v-model="unit"
 				class="w-75"
+				transparent
 				:options="
 					UNITS.map((value) => ({
 						value,

assets/js/components/Config/VehicleModal.vue

@@ -120,6 +120,7 @@
 												{ name: '2-phases', value: '2' },
 												{ name: '3-phases', value: undefined },
 											]"
+											transparent
 											equal-width
 										/>
 									</FormRow>

assets/js/components/SelectGroup.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mode-group border d-inline-flex" :class="{ large }" role="group">
+	<div class="mode-group border d-inline-flex" :class="{ large, transparent }" role="group">
 		<button
 			v-for="(option, i) in options"
 			:id="i === 0 ? id : null"
@@ -24,6 +24,7 @@ export default {
 		modelValue: [Number, String],
 		equalWidth: Boolean,
 		large: Boolean,
+		transparent: Boolean,
 	},
 	emits: ["update:modelValue"],
 };
@@ -34,6 +35,9 @@ export default {
 	border: 2px solid var(--evcc-default-text);
 	border-radius: 17px;
 	padding: 4px;
+}
+
+.mode-group:not(.transparent) {
 	background: var(--evcc-background);
 }
 

assets/js/components/Sessions/CostHistoryChart.vue

@@ -256,27 +256,22 @@ export default {
 										return null;
 									}
 
-									return (
-										datasetLabel +
-										": " +
-										(this.costType === TYPES.PRICE
+									const valueFmt =
+										this.costType === TYPES.PRICE
 											? this.fmtPricePerKWh(value, this.currency, false)
-											: this.fmtCo2Medium(value))
-									);
+											: this.fmtCo2Medium(value);
+									return `${datasetLabel}: ${valueFmt}`;
 								}
 
-								return (
-									datasetLabel +
-									": " +
-									(this.costType === TYPES.PRICE
-										? this.fmtMoney(value || 0, this.currency, true, true)
-										: this.fmtGrams(value || 0))
-								);
+								return value
+									? `${datasetLabel}: ${
+											this.costType === TYPES.PRICE
+												? this.fmtMoney(value, this.currency, true, true)
+												: this.fmtGrams(value)
+										}`
+									: null;
 							},
 							labelColor: tooltipLabelColor(false),
-							labelTextColor: (item) => {
-								return !item.raw ? colors.muted : "#fff";
-							},
 						},
 						itemSort: function (a, b) {
 							return b.datasetIndex - a.datasetIndex;
@@ -288,7 +283,13 @@ export default {
 						stacked: true,
 						border: { display: false },
 						grid: { display: false },
-						ticks: { color: colors.muted },
+						ticks: {
+							color: colors.muted,
+							callback: (value) =>
+								this.period === PERIODS.YEAR
+									? this.fmtMonth(new Date(this.year, value, 1), true)
+									: value,
+						},
 					},
 					y: {
 						stacked: true,

assets/js/components/Sessions/EnergyHistoryChart.vue

@@ -186,19 +186,16 @@ export default {
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
 								const value = tooltipItem.raw || 0;
-								return (
-									datasetLabel + ": " + this.fmtWh(value * 1e3, POWER_UNIT.AUTO)
-								);
+								return value
+									? `${datasetLabel}: ${this.fmtWh(value * 1e3, POWER_UNIT.AUTO)}`
+									: null;
 							},
 							labelColor: tooltipLabelColor(false),
 							labelPointStyle: function () {
 								return {
 									pointStyle: "circle",
 								};
 							},
-							labelTextColor: (item) => {
-								return !item.raw ? colors.muted : "#fff";
-							},
 						},
 						itemSort: function (a, b) {
 							return b.datasetIndex - a.datasetIndex;
@@ -210,7 +207,13 @@ export default {
 						stacked: true,
 						border: { display: false },
 						grid: { display: false },
-						ticks: { color: colors.muted },
+						ticks: {
+							color: colors.muted,
+							callback: (value) =>
+								this.period === PERIODS.YEAR
+									? this.fmtMonth(new Date(this.year, value, 1), true)
+									: value,
+						},
 					},
 					y: {
 						stacked: true,

assets/js/components/Sessions/SessionTable.vue

@@ -189,7 +189,10 @@ export default {
 	emits: ["show-session"],
 	computed: {
 		filteredSessions() {
-			return this.sessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
+			return this.sessions
+				.filter(this.filterByLoadpoint)
+				.filter(this.filterByVehicle)
+				.sort((a, b) => new Date(b.created) - new Date(a.created));
 		},
 		maxColumns() {
 			return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;

assets/js/mixins/formatter.js

@@ -236,6 +236,12 @@ export default {
         month: "short",
       }).format(date);
     },
+    fmtDayOfMonth: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        weekday: "short",
+        day: "numeric",
+      }).format(date);
+    },
     fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) {
       const currencyDisplay = withSymbol ? "narrowSymbol" : "code";
       const result = new Intl.NumberFormat(this.$i18n?.locale, {

assets/js/views/Sessions.vue

@@ -682,6 +682,7 @@ export default {
 	--vertical-shift: 0rem;
 	left: 0;
 	right: 0;
+	top: max(0rem, env(safe-area-inset-top)) !important;
 	margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
 	-webkit-backdrop-filter: blur(35px);
 	backdrop-filter: blur(35px);