Ignore low currents in phase UI (#5437)

assets/js/components/Phases.story.vue

@@ -31,14 +31,14 @@ const state = reactive({
 			/>
 		</Variant>
 		<Variant title="one phase, more available">
-			<Phases v-bind="state" :chargeCurrent="12" :chargeCurrents="[6, 0, 0]" />
+			<Phases v-bind="state" :chargeCurrent="12" :chargeCurrents="[6, 0.2, 0]" />
 		</Variant>
 		<Variant title="two phases active">
 			<Phases
 				v-bind="state"
 				:phasesActive="2"
 				:chargeCurrent="16"
-				:chargeCurrents="[16, 16, 0]"
+				:chargeCurrents="[16, 16, 0.3]"
 			/>
 		</Variant>
 		<Variant title="asymetric phases">
@@ -49,5 +49,13 @@ const state = reactive({
 				:chargeCurrents="[8, 0.9, 14]"
 			/>
 		</Variant>
+		<Variant title="only second phase">
+			<Phases
+				v-bind="state"
+				:phasesActive="1"
+				:chargeCurrent="13"
+				:chargeCurrents="[0, 13, 0]"
+			/>
+		</Variant>
 	</Story>
 </template>

assets/js/components/Phases.vue

@@ -1,11 +1,6 @@
 <template>
-	<div class="phases d-flex justify-content-between">
-		<div
-			v-for="num in [1, 2, 3]"
-			:key="num"
-			class="phase me-1"
-			:class="{ inactive: inactive(num) }"
-		>
+	<div :class="`phases phases--${numberOfVisiblePhases}p d-flex justify-content-between`">
+		<div v-for="num in [1, 2, 3]" :key="num" :class="`phase phase--${num} me-1`">
 			<div class="target" :style="{ width: `${targetWidth()}%` }"></div>
 			<div class="real" :style="{ width: `${realWidth(num)}%` }"></div>
 		</div>
@@ -13,6 +8,8 @@
 </template>
 
 <script>
+const MIN_ACTIVE_CURRENT = 1;
+
 export default {
 	name: "Phases",
 	props: {
@@ -23,17 +20,17 @@ export default {
 		maxCurrent: { type: Number },
 	},
 	computed: {
-		highestActivePhase() {
-			if (this.chargeCurrents) {
-				return this.chargeCurrents.findLastIndex((current) => current > 0) + 1;
+		numberOfVisiblePhases() {
+			if (!this.chargeCurrents) {
+				return this.phasesActive;
 			}
-			return this.phasesActive;
+			const [L1, L2, L3] = this.chargeCurrents.map((c) => c >= MIN_ACTIVE_CURRENT);
+			if (L1 && !L2 && !L3) return 1;
+			if (L1 && L2 && !L3) return 2;
+			return 3;
 		},
 	},
 	methods: {
-		inactive(num) {
-			return num > this.highestActivePhase;
-		},
 		targetWidth() {
 			let current = Math.min(Math.max(this.minCurrent, this.chargeCurrent), this.maxCurrent);
 			return (100 / this.maxCurrent) * current;
@@ -69,7 +66,10 @@ export default {
 html.dark .phase {
 	background-color: var(--bs-gray-bright);
 }
-.phase.inactive {
+
+.phases--1p .phase--2,
+.phases--1p .phase--3,
+.phases--2p .phase--3 {
 	flex-basis: 0;
 	margin-right: 0 !important;
 	opacity: 0;

dist/index.html

@@ -20,8 +20,8 @@
     <meta name="theme-color" content="#020318" />
 
     <title>evcc</title>
-    <script type="module" crossorigin src="./assets/index.934b89d2.js"></script>
-    <link rel="stylesheet" href="./assets/index.9a693c12.css">
+    <script type="module" crossorigin src="./assets/index.d57198f2.js"></script>
+    <link rel="stylesheet" href="./assets/index.e1c11e42.css">
   </head>
 
   <body>