From c9fa5ab7eb91c3cdf6d6cf36b2c6813b31afabda Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sun, 10 Sep 2023 20:44:53 +0200
Subject: [PATCH] Visualization: fix label width on mobile (#9829)

---
 assets/js/components/Energyflow/Energyflow.story.vue | 7 ++++++-
 assets/js/components/Energyflow/Visualization.vue    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/Energyflow/Energyflow.story.vue b/assets/js/components/Energyflow/Energyflow.story.vue
index 7201a6d87..794ed82bb 100644
--- a/assets/js/components/Energyflow/Energyflow.story.vue
+++ b/assets/js/components/Energyflow/Energyflow.story.vue
@@ -115,7 +115,12 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="0"
 				:gridPower="6500"
 				:homePower="1000"
-				:loadpointsCompact="[{ power: 5500, icon: 'car', charging: true }]"
+				:loadpointsCompact="[
+					{ power: 5500, icon: 'car', charging: true },
+					{ power: 0, icon: 'car', charging: false },
+					{ power: 0, icon: 'car', charging: false },
+					{ power: 0, icon: 'car', charging: false },
+				]"
 				:batteryPower="0"
 				:batterySoc="0"
 				siteTitle="Home"
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 9529ff947..07a250d5b 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -146,7 +146,7 @@ export default {
 	},
 	methods: {
 		widthTotal: function (power) {
-			if (this.totalAdjusted === 0) return "0%";
+			if (this.totalAdjusted === 0 || power === 0) return "0";
 			return (100 / this.totalAdjusted) * power + "%";
 		},
 		fmtBarValue: function (watt) {