Sessions UI: visualization, month/year charts

.eslintrc.cjs

@@ -18,6 +18,7 @@ module.exports = {
 		"vue/attribute-hyphenation": "off",
 		"vue/multi-word-component-names": "off",
 		"vue/no-reserved-component-names": "off",
+		"vue/no-undef-properties": "warn",
 		"no-param-reassign": "error",
 	},
 };

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;
@@ -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);
@@ -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);

assets/js/colors.js

@@ -0,0 +1,68 @@
+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,
+  pricePerKWh: "#FFB900FF",
+  price: "#FF912FFF",
+  co2PerKWh: "#00C997FF",
+  co2: "#00916EFF",
+  background: null,
+  selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
+  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.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.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");
+};
+
+export default colors;

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') },

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')">

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">

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>

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>

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>

assets/js/components/SelectGroup.vue

@@ -6,7 +6,7 @@
 			:key="option.value"
 			type="button"
 			class="btn btn-sm flex-grow-1 flex-shrink-1"
-			:class="{ active: option.value === modelValue }"
+			: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"],
 };
@@ -32,11 +33,10 @@ export default {
 	border: 2px solid var(--evcc-default-text);
 	border-radius: 17px;
 	padding: 4px;
+	background: var(--evcc-background);
 }
 
 .btn {
-	/* equal width buttons */
-	flex-basis: 0;
 	white-space: nowrap;
 	border-radius: 12px;
 	padding: 0.1em 0.8em;
@@ -45,6 +45,9 @@ export default {
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 }
+.btn--equal {
+	flex-basis: 0;
+}
 .btn:hover {
 	color: var(--evcc-gray);
 }