Add support for megawatt (#15818)

assets/js/components/BatterySettingsModal.vue

@@ -256,7 +256,7 @@ import "@h2d2/shopicons/es/regular/home";
 import SmartCostLimit from "./SmartCostLimit.vue";
 import CustomSelect from "./CustomSelect.vue";
 import GenericModal from "./GenericModal.vue";
-import formatter from "../mixins/formatter";
+import formatter, { POWER_UNIT } from "../mixins/formatter";
 import collector from "../mixins/collector";
 import api from "../api";
 import smartCostAvailable from "../utils/smartCostAvailable";
@@ -363,13 +363,13 @@ export default {
 				.filter(({ capacity }) => capacity > 0)
 				.map(({ soc, capacity }) => {
 					const multipleBatteries = this.battery.length > 1;
-					const energy = this.fmtKWh(
+					const energy = this.fmtWh(
 						(capacity / 100) * soc * 1e3,
-						true,
+						POWER_UNIT.KW,
 						!multipleBatteries,
 						1
 					);
-					const total = this.fmtKWh(capacity * 1e3, true, true, 1);
+					const total = this.fmtWh(capacity * 1e3, POWER_UNIT.KW, true, 1);
 					const name = multipleBatteries ? "↳ " : "";
 					const formattedSoc = multipleBatteries ? ` (${this.fmtSoc(soc)})` : "";
 					const formattedEnergy = this.$t("batterySettings.capacity", {

assets/js/components/ChargingPlan.vue

@@ -196,7 +196,7 @@ export default {
 			return fmtEnergy(
 				this.planEnergy,
 				optionStep(this.capacity || 100),
-				this.fmtKWh,
+				this.fmtWh,
 				this.$t("main.targetEnergy.noLimit")
 			);
 		},

assets/js/components/ChargingPlanPreview.vue

@@ -69,7 +69,7 @@ export default {
 		},
 		fmtPower() {
 			if (this.duration > 0 && this.power > 0) {
-				return `@ ${this.fmtKw(this.power)}`;
+				return `@ ${this.fmtW(this.power)}`;
 			}
 			return null;
 		},

assets/js/components/ChargingPlanSettingsEntry.vue

@@ -175,7 +175,7 @@ export default {
 				0,
 				this.capacity || 100,
 				this.socPerKwh,
-				this.fmtKWh,
+				this.fmtWh,
 				this.fmtPercentage,
 				"-"
 			);

assets/js/components/ChargingPlanWarnings.vue

@@ -100,13 +100,13 @@ export default {
 			if (this.socBasedPlanning) {
 				return this.fmtSoc(this.effectiveLimitSoc);
 			}
-			return this.fmtKWh(this.limitEnergy * 1e3);
+			return this.fmtWh(this.limitEnergy * 1e3);
 		},
 		goalFmt: function () {
 			if (this.socBasedPlanning) {
 				return this.fmtSoc(this.effectivePlanSoc);
 			}
-			return this.fmtKWh(this.planEnergy * 1e3);
+			return this.fmtWh(this.planEnergy * 1e3);
 		},
 		costLimitExists: function () {
 			return this.smartCostLimit !== 0;

assets/js/components/ChargingSessionModal.vue

@@ -68,10 +68,17 @@
 										{{ $t("sessions.energy") }}
 									</th>
 									<td>
-										{{ fmtKWh(chargedEnergy, chargedEnergy >= 1e3) }}
+										{{
+											fmtWh(
+												chargedEnergy,
+												chargedEnergy >= 1e3
+													? POWER_UNIT.KW
+													: POWER_UNIT.AUTO
+											)
+										}}
 										<div v-if="session.chargeDuration">
 											{{ fmtDurationNs(session.chargeDuration) }}
-											(~{{ fmtKw(avgPower) }})
+											(~{{ fmtW(avgPower) }})
 										</div>
 									</td>
 								</tr>
@@ -81,7 +88,7 @@
 									</th>
 									<td>
 										{{ fmtPercentage(session.solarPercentage, 1) }}
-										({{ fmtKWh(solarEnergy, solarEnergy >= 1e3) }})
+										({{ fmtWh(solarEnergy, POWER_UNIT.AUTO) }})
 									</td>
 								</tr>
 								<tr v-if="session.price != null">
@@ -115,8 +122,8 @@
 										{{ $t("session.meter") }}
 									</th>
 									<td>
-										{{ fmtKWh(session.meterStart * 1e3) }}<br />
-										{{ fmtKWh(session.meterStop * 1e3) }}
+										{{ fmtWh(session.meterStart * 1e3) }}<br />
+										{{ fmtWh(session.meterStop * 1e3) }}
 									</td>
 								</tr>
 							</tbody>

assets/js/components/Config/DeviceTags.vue

@@ -48,11 +48,11 @@ export default {
 			}
 			switch (name) {
 				case "power":
-					return this.fmtKw(value);
+					return this.fmtW(value);
 				case "energy":
 				case "capacity":
 				case "chargedEnergy":
-					return this.fmtKWh(value * 1e3);
+					return this.fmtWh(value * 1e3);
 				case "soc":
 				case "socLimit":
 					return this.fmtPercentage(value, 1);
@@ -66,7 +66,7 @@ export default {
 				case "phaseVoltages":
 					return value.map((v) => this.fmtNumber(v, 0)).join(" ") + " V";
 				case "phasePowers":
-					return value.map((v) => this.fmtKw(v)).join(", ");
+					return value.map((v) => this.fmtW(v)).join(", ");
 				case "chargeStatus":
 					return this.$t(`config.deviceValue.chargeStatus${value}`);
 				case "gridPrice":
@@ -75,7 +75,7 @@ export default {
 				case "co2":
 					return this.fmtCo2Short(value);
 				case "powerRange":
-					return `${this.fmtKw(value[0])} / ${this.fmtKw(value[1])}`;
+					return `${this.fmtW(value[0])} / ${this.fmtW(value[1])}`;
 				case "currentRange":
 					return `${this.fmtNumber(value[0], 1)} A / ${this.fmtNumber(value[1], 1)} A`;
 				case "controllable":

assets/js/components/Energyflow/Energyflow.vue

@@ -18,7 +18,7 @@
 				:pvProduction="pvProduction"
 				:homePower="homePower"
 				:batterySoc="batterySoc"
-				:powerInKw="powerInKw"
+				:powerUnit="powerUnit"
 				:vehicleIcons="vehicleIcons"
 			/>
 		</div>
@@ -79,15 +79,15 @@
 							icon="sun"
 							:power="pvProduction"
 							:powerTooltip="pvTooltip"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							data-testid="energyflow-entry-production"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
 							:name="batteryDischargeLabel"
 							icon="battery"
 							:power="batteryDischarge"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -99,7 +99,7 @@
 							:name="$t('main.energyflow.gridImport')"
 							icon="powersupply"
 							:power="gridImport"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(tariffGrid, tariffCo2)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffGrid, tariffCo2)"
@@ -122,7 +122,7 @@
 							:name="$t('main.energyflow.homePower')"
 							icon="home"
 							:power="homePower"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(tariffPriceHome, tariffCo2Home)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffPriceHome, tariffCo2Home)"
@@ -137,7 +137,7 @@
 							icon="vehicle"
 							:vehicleIcons="vehicleIcons"
 							:power="loadpointsPower"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="
 								activeLoadpointsCount
 									? detailsValue(tariffPriceLoadpoints, tariffCo2Loadpoints)
@@ -154,7 +154,7 @@
 							:name="batteryChargeLabel"
 							icon="battery"
 							:power="batteryCharge"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -176,7 +176,7 @@
 							:name="$t('main.energyflow.pvExport')"
 							icon="powersupply"
 							:power="pvExport"
-							:powerInKw="powerInKw"
+							:powerUnit="powerUnit"
 							:details="detailsValue(-tariffFeedIn)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(-tariffFeedIn)"
@@ -194,7 +194,7 @@ import "@h2d2/shopicons/es/filled/square";
 import Modal from "bootstrap/js/dist/modal";
 import Visualization from "./Visualization.vue";
 import EnergyflowEntry from "./EnergyflowEntry.vue";
-import formatter from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import AnimatedNumber from "../AnimatedNumber.vue";
 import settings from "../../settings";
 import { CO2_TYPE } from "../../units";
@@ -292,8 +292,15 @@ export default {
 		pvExport: function () {
 			return Math.max(0, this.gridPower * -1);
 		},
-		powerInKw: function () {
-			return Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport) >= 1000;
+		powerUnit: function () {
+			const watt = Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport);
+			if (watt >= 1_000_000) {
+				return POWER_UNIT.MW;
+			} else if (watt >= 1000) {
+				return POWER_UNIT.KW;
+			} else {
+				return POWER_UNIT.W;
+			}
 		},
 		inPower: function () {
 			return this.gridImport + this.pvProduction + this.batteryDischarge;
@@ -308,7 +315,7 @@ export default {
 			if (!Array.isArray(this.pv) || this.pv.length <= 1) {
 				return;
 			}
-			return this.pv.map(({ power }) => this.fmtKw(power, this.powerInKw));
+			return this.pv.map(({ power }) => this.fmtW(power, this.powerUnit));
 		},
 		batteryFmt() {
 			return (soc) => this.fmtPercentage(soc, 0);
@@ -386,7 +393,7 @@ export default {
 			return this.fmtPricePerKWh(value, this.currency, true);
 		},
 		kw: function (watt) {
-			return this.fmtKw(watt, this.powerInKw);
+			return this.fmtW(watt, this.powerUnit);
 		},
 		toggleDetails: function () {
 			this.updateHeight();

assets/js/components/Energyflow/EnergyflowEntry.vue

@@ -52,7 +52,7 @@ export default {
 		vehicleIcons: { type: Array },
 		power: { type: Number },
 		powerTooltip: { type: Array },
-		powerInKw: { type: Boolean },
+		powerUnit: { type: String },
 		soc: { type: Number },
 		details: { type: Number },
 		detailsFmt: { type: Function },
@@ -98,7 +98,7 @@ export default {
 	},
 	methods: {
 		kw: function (watt) {
-			return this.fmtKw(watt, this.powerInKw);
+			return this.fmtW(watt, this.powerUnit);
 		},
 		updatePowerTooltip() {
 			this.powerTooltipInstance = this.updateTooltip(

assets/js/components/Energyflow/Visualization.vue

@@ -61,7 +61,7 @@
 				/>
 			</div>
 			<div v-if="totalAdjusted <= 0" class="site-progress-bar w-100 grid-import">
-				<span>{{ fmtKw(0, false, true) }}</span>
+				<span>{{ fmtW(0, POWER_UNIT.AUTO, true) }}</span>
 			</div>
 		</div>
 		<div class="label-scale d-flex">
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import formatter from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
 import AnimatedNumber from "../AnimatedNumber.vue";
@@ -112,7 +112,7 @@ export default {
 		pvProduction: { type: Number, default: 0 },
 		homePower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
-		powerInKw: { type: Boolean, default: false },
+		powerUnit: { type: String, default: POWER_UNIT.KW },
 	},
 	data: function () {
 		return { width: 0 };
@@ -168,7 +168,7 @@ export default {
 				return "";
 			}
 			const withUnit = this.enoughSpaceForUnit(watt);
-			return this.fmtKw(watt, this.powerInKw, withUnit);
+			return this.fmtW(watt, this.powerUnit, withUnit);
 		},
 		powerLabelAvailableSpace(power) {
 			if (this.totalAdjusted === 0) return 0;

assets/js/components/LimitEnergySelect.vue

@@ -56,7 +56,7 @@ export default {
 				this.chargedEnergy,
 				this.capacity || 100,
 				this.socPerKwh,
-				this.fmtKWh,
+				this.fmtWh,
 				this.fmtPercentage,
 				this.$t("main.targetEnergy.noLimit")
 			);
@@ -73,7 +73,7 @@ export default {
 			return this.$emit("limit-energy-updated", parseFloat(e.target.value));
 		},
 		fmtEnergy: function (value) {
-			return fmtEnergy(value, this.step, this.fmtKWh, this.$t("main.targetEnergy.noLimit"));
+			return fmtEnergy(value, this.step, this.fmtWh, this.$t("main.targetEnergy.noLimit"));
 		},
 		fmtSoc: function (value) {
 			return `+${this.fmtPercentage(value)}`;

assets/js/components/Loadpoint.vue

@@ -97,7 +97,7 @@ import Mode from "./Mode.vue";
 import Vehicle from "./Vehicle.vue";
 import Phases from "./Phases.vue";
 import LabelAndValue from "./LabelAndValue.vue";
-import formatter from "../mixins/formatter";
+import formatter, { POWER_UNIT } from "../mixins/formatter";
 import collector from "../mixins/collector";
 import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
 import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
@@ -337,12 +337,10 @@ export default {
 			api.delete(this.apiPath("vehicle"));
 		},
 		fmtPower(value) {
-			const inKw = value == 0 || value >= 1000;
-			return this.fmtKw(value, inKw);
+			return this.fmtW(value, POWER_UNIT.AUTO);
 		},
 		fmtEnergy(value) {
-			const inKw = value == 0 || value >= 1000;
-			return this.fmtKWh(value, inKw);
+			return this.fmtWh(value, POWER_UNIT.AUTO);
 		},
 		openSettingsModal() {
 			const modal = Modal.getOrCreateInstance(

assets/js/components/LoadpointSettingsModal.vue

@@ -220,7 +220,7 @@ export default {
 					return this.maxPowerPhases(this.phasesConfigured);
 				}
 			}
-			return this.fmtKw(this.maxCurrent * V * this.phasesActive);
+			return this.fmtW(this.maxCurrent * V * this.phasesActive);
 		},
 		minPower: function () {
 			if (this.chargerPhases1p3p) {
@@ -231,7 +231,7 @@ export default {
 					return this.minPowerPhases(this.phasesConfigured);
 				}
 			}
-			return this.fmtKw(this.minCurrent * V * this.phasesActive);
+			return this.fmtW(this.minCurrent * V * this.phasesActive);
 		},
 		minCurrentOptions: function () {
 			const opt1 = [...range(Math.floor(this.maxCurrent), 1), 0.5, 0.25, 0.125];
@@ -279,10 +279,10 @@ export default {
 	},
 	methods: {
 		maxPowerPhases: function (phases) {
-			return this.fmtKw(this.maxCurrent * V * phases);
+			return this.fmtW(this.maxCurrent * V * phases);
 		},
 		minPowerPhases: function (phases) {
-			return this.fmtKw(this.minCurrent * V * phases);
+			return this.fmtW(this.minCurrent * V * phases);
 		},
 		formId: function (name) {
 			return `loadpoint_${this.id}_${name}`;