feat: Display Watts or Amps based on GUI-v2 setting (#437)

src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx

@@ -27,6 +27,7 @@ interface Props {
 }
 
 const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { batteries } = useBattery()
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
@@ -84,7 +85,12 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
             {range(pages).map((page) => (
               <div key={page} className="flex gap-4 w-full h-full items-center justify-around">
                 {batteriesFor(page).map((b) => (
-                  <BatterySummary key={b.id} battery={b} boxSize={size} />
+                  <BatterySummary
+                    key={b.id}
+                    battery={b}
+                    boxSize={size}
+                    electricalPowerIndicator={electricalPowerIndicator}
+                  />
                 ))}
               </div>
             ))}

src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx

@@ -1,4 +1,4 @@
-import { useAcLoads } from "@victronenergy/mfd-modules"
+import { useAcLoads, useAppStore } from "@victronenergy/mfd-modules"
 import ACIcon from "../../../images/icons/ac.svg"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
@@ -16,6 +16,7 @@ interface Props {
 }
 
 const EnergyAC = ({ componentMode = "compact", compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { current, power, phases, voltage } = useAcLoads()
   const phasesData = usePhasesData(phases, voltage, current, power)
 
@@ -24,8 +25,8 @@ const EnergyAC = ({ componentMode = "compact", compactBoxSize }: Props) => {
       <ValueOverview
         Icon={ACIcon}
         title={translate("boxes.acLoads")}
-        value={phaseValueFor(phases, current, power)}
-        unit={phaseUnitFor(phases)}
+        value={phaseValueFor(phases, current, power, electricalPowerIndicator)}
+        unit={phaseUnitFor(phases, electricalPowerIndicator)}
         boxSize={compactBoxSize}
       />
     )
@@ -35,8 +36,8 @@ const EnergyAC = ({ componentMode = "compact", compactBoxSize }: Props) => {
     <ValueBox
       title={translate("boxes.acLoads")}
       icon={<ACIcon className={responsiveBoxIcon} />}
-      value={phaseValueFor(phases, current, power)}
-      unit={phaseUnitFor(phases)}
+      value={phaseValueFor(phases, current, power, electricalPowerIndicator)}
+      unit={phaseUnitFor(phases, electricalPowerIndicator)}
       bottomValues={phasesData}
     />
   )

src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx

@@ -1,11 +1,13 @@
 import AlternatorIcon from "../../../images/icons/alternator.svg"
-import { useAlternator } from "@victronenergy/mfd-modules"
+import { useAlternator, useAppStore } from "@victronenergy/mfd-modules"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 import { ISize } from "@m2Types/generic/size"
+import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
+import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
 
 interface Props {
   alternator: number
@@ -15,6 +17,7 @@ interface Props {
 }
 
 const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { current, voltage, customName } = useAlternator(alternator)
   const instance = showInstance ? ` [${alternator}]` : ""
   const power = current * voltage
@@ -24,8 +27,8 @@ const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance,
       <ValueOverview
         Icon={AlternatorIcon}
         title={customName || translate("boxes.alternator")}
-        value={current}
-        unit="A"
+        value={valueFor(current, power, electricalPowerIndicator)}
+        unit={unitFor(electricalPowerIndicator)}
         boxSize={compactBoxSize}
       />
     )
@@ -35,9 +38,15 @@ const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance,
     <ValueBox
       title={customName || translate("boxes.alternator") + instance}
       icon={<AlternatorIcon className={responsiveBoxIcon} />}
-      value={current}
-      unit="A"
-      bottomValues={[[{ value: power, unit: "W" }]]}
+      value={valueFor(current, power, electricalPowerIndicator)}
+      unit={unitFor(electricalPowerIndicator)}
+      bottomValues={[
+        [
+          { value: voltage, unit: "V", hideDecimal: true },
+          { value: current, unit: "A", hideDecimal: true },
+          { value: power, unit: "W", hideDecimal: true },
+        ],
+      ]}
     />
   )
 }

src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx

@@ -1,11 +1,13 @@
 import { translate } from "react-i18nify"
-import { DcLoadsState } from "@victronenergy/mfd-modules"
+import { DcLoadsState, useAppStore } from "@victronenergy/mfd-modules"
 import DCIcon from "../../../images/icons/dc.svg"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 import { ISize } from "@m2Types/generic/size"
+import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
+import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
 
 interface Props {
   dcLoads: DcLoadsState
@@ -14,6 +16,7 @@ interface Props {
 }
 
 const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { power, voltage, current } = dcLoads
 
   if (isNaN(power) || isNaN(voltage)) {
@@ -25,8 +28,8 @@ const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props)
       <ValueOverview
         Icon={DCIcon}
         title={translate("boxes.dcLoads")}
-        value={current}
-        unit="A"
+        value={valueFor(current, power, electricalPowerIndicator)}
+        unit={unitFor(electricalPowerIndicator)}
         boxSize={compactBoxSize}
       />
     )
@@ -36,9 +39,15 @@ const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props)
     <ValueBox
       title={translate("boxes.dcLoads")}
       icon={<DCIcon className={responsiveBoxIcon} />}
-      value={current}
-      unit="A"
-      bottomValues={[[{ value: power, unit: "W", hideDecimal: true }]]}
+      value={valueFor(current, power, electricalPowerIndicator)}
+      unit={unitFor(electricalPowerIndicator)}
+      bottomValues={[
+        [
+          { value: voltage, unit: "V", hideDecimal: true },
+          { value: current, unit: "A", hideDecimal: true },
+          { value: power, unit: "W", hideDecimal: true },
+        ],
+      ]}
     />
   )
 }

src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { useActiveInValues, useActiveSource } from "@victronenergy/mfd-modules"
+import { useActiveInValues, useActiveSource, useAppStore } from "@victronenergy/mfd-modules"
 import { observer } from "mobx-react-lite"
 import ShorePowerIcon from "../../../images/icons/shore-power.svg"
 import { translate } from "react-i18nify"
@@ -13,6 +13,7 @@ import { ISize } from "@m2Types/generic/size"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 
 const EnergyShore = ({ componentMode = "compact", inputId, compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { current, power, voltage } = useActiveInValues()
   const { activeInput, phases } = useActiveSource()
   const unplugged = activeInput + 1 !== inputId // Active in = 0 -> AC1 is active
@@ -25,8 +26,8 @@ const EnergyShore = ({ componentMode = "compact", inputId, compactBoxSize }: Pro
         Icon={ShorePowerIcon}
         title={translate("boxes.shorePower")}
         subtitle={unplugged ? translate("common.unplugged") : undefined}
-        value={phaseValueFor(phases, current, power)}
-        unit={phaseUnitFor(phases)}
+        value={phaseValueFor(phases, current, power, electricalPowerIndicator)}
+        unit={phaseUnitFor(phases, electricalPowerIndicator)}
         boxSize={compactBoxSize}
         status={status}
       />
@@ -37,8 +38,8 @@ const EnergyShore = ({ componentMode = "compact", inputId, compactBoxSize }: Pro
     <ValueBox
       icon={<ShorePowerIcon className={responsiveBoxIcon} />}
       title={translate("boxes.shorePower")}
-      value={phaseValueFor(phases, current, power)}
-      unit={phaseUnitFor(phases)}
+      value={phaseValueFor(phases, current, power, electricalPowerIndicator)}
+      unit={phaseUnitFor(phases, electricalPowerIndicator)}
       bottomValues={phasesData}
       status={status}
     />

src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx

@@ -1,23 +1,26 @@
 import React from "react"
-import { PvChargerState } from "@victronenergy/mfd-modules"
+import { PvChargerState, useAppStore } from "@victronenergy/mfd-modules"
 import SolarIcon from "../../../images/icons/solar.svg"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 import { ISize } from "@m2Types/generic/size"
+import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
+import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
 
 const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { current, power } = pvCharger
 
   if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         Icon={SolarIcon}
         title={translate("boxes.solar")}
-        value={current}
-        unit="A"
+        value={valueFor(current, power, electricalPowerIndicator)}
+        unit={unitFor(electricalPowerIndicator)}
         boxSize={compactBoxSize}
       />
     )
@@ -27,9 +30,14 @@ const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: P
     <ValueBox
       title={translate("boxes.solar")}
       icon={<SolarIcon className={responsiveBoxIcon} />}
-      bottomValues={[[{ value: power, unit: "W", hideDecimal: true }]]}
-      value={current}
-      unit="A"
+      bottomValues={[
+        [
+          { value: current, unit: "A", hideDecimal: true },
+          { value: power, unit: "W", hideDecimal: true },
+        ],
+      ]}
+      value={valueFor(current, power, electricalPowerIndicator)}
+      unit={unitFor(electricalPowerIndicator)}
     />
   )
 }

src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx

@@ -1,13 +1,15 @@
 import React from "react"
 import WindIcon from "../../../images/icons/wind.svg"
-import { useWindGenerator } from "@victronenergy/mfd-modules"
+import { useAppStore, useWindGenerator } from "@victronenergy/mfd-modules"
 import { observer } from "mobx-react-lite"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 import { ISize } from "@m2Types/generic/size"
+import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
+import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
 
 interface Props {
   windGenerator: number
@@ -17,30 +19,37 @@ interface Props {
 }
 
 const EnergyWind = ({ componentMode = "compact", windGenerator, showInstance, compactBoxSize }: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
   const { current, voltage } = useWindGenerator(windGenerator)
 
+  const power = current * voltage
+  const instance = showInstance ? ` [${windGenerator}]` : ""
+
   if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         Icon={WindIcon}
         title={translate("boxes.windGenerator")}
-        value={current}
-        unit="A"
+        value={valueFor(current, power, electricalPowerIndicator)}
+        unit={unitFor(electricalPowerIndicator)}
         boxSize={compactBoxSize}
       />
     )
   }
 
-  const power = current * voltage
-  const instance = showInstance ? ` [${windGenerator}]` : ""
-
   return (
     <ValueBox
       title={translate("boxes.windGenerator") + instance}
       icon={<WindIcon className={responsiveBoxIcon} />}
-      value={current}
-      unit="A"
-      bottomValues={[[{ value: power, unit: "W", hideDecimal: true }]]}
+      value={valueFor(current, power, electricalPowerIndicator)}
+      unit={unitFor(electricalPowerIndicator)}
+      bottomValues={[
+        [
+          { value: voltage, unit: "V", hideDecimal: true },
+          { value: current, unit: "A", hideDecimal: true },
+          { value: power, unit: "W", hideDecimal: true },
+        ],
+      ]}
     />
   )
 }

src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite"
 import { translate } from "react-i18nify"
-import { GeneratorFpProvider, useGensetValues } from "@victronenergy/mfd-modules"
+import { GeneratorFpProvider, useAppStore, useGensetValues } from "@victronenergy/mfd-modules"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import GeneratorIcon from "../../../images/icons/generator.svg"
 import AutoStartStopSetter from "../../ui/AutoStartStopSetter"
@@ -36,6 +36,7 @@ const GeneratorFp = ({ componentMode = "compact", generatorFp, compactBoxSize }:
     }
   }
 
+  const { electricalPowerIndicator } = useAppStore()
   const { productName, phases, statusCode, gensetAutoStart, autoStart, updateAutoMode, updateManualMode } = generatorFp
   const gensetValues = useGensetValues()
   const { voltage, current, power, coolant, winding, exhaust } = gensetValues
@@ -53,8 +54,8 @@ const GeneratorFp = ({ componentMode = "compact", generatorFp, compactBoxSize }:
         Icon={GeneratorIcon}
         title={title}
         subtitle={subTitle}
-        value={phaseValueFor(phases, current as number[], power as number[])}
-        unit={phaseUnitFor(phases)}
+        value={phaseValueFor(phases, current as number[], power as number[], electricalPowerIndicator)}
+        unit={phaseUnitFor(phases, electricalPowerIndicator)}
         boxSize={compactBoxSize}
         status={status}
       />

src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite"
 import { translate } from "react-i18nify"
-import { useActiveInValues } from "@victronenergy/mfd-modules"
+import { useActiveInValues, useAppStore } from "@victronenergy/mfd-modules"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import AutoStartStopSetter from "../../ui/AutoStartStopSetter/AutoStartStopSetter"
@@ -40,6 +40,7 @@ const GeneratorRelay = ({
   const title = translate("widgets.generator")
   const subTitle = generatorStateFor(statusCode, active, phases)
 
+  const { electricalPowerIndicator } = useAppStore()
   const { current, voltage, power } = useActiveInValues()
   const phasesData = usePhasesData(phases, voltage, current, power)
   const status = active ? "active" : "inactive"
@@ -50,8 +51,8 @@ const GeneratorRelay = ({
         Icon={GeneratorIcon}
         title={title}
         subtitle={subTitle}
-        value={phaseValueFor(phases, current, power)}
-        unit={phaseUnitFor(phases)}
+        value={phaseValueFor(phases, current, power, electricalPowerIndicator)}
+        unit={phaseUnitFor(phases, electricalPowerIndicator)}
         boxSize={compactBoxSize}
         status={status}
       />

src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx

@@ -8,9 +8,10 @@ import { ProgressCircle } from "../ProgressCircle/ProgressCircle"
 interface Props {
   battery: Battery
   boxSize: ISize
+  electricalPowerIndicator: number
 }
 
-export const BatterySummary: FC<Props> = ({ battery, boxSize }) => {
+export const BatterySummary: FC<Props> = ({ battery, boxSize, electricalPowerIndicator }) => {
   const size = {
     width: boxSize.width - 32,
     height: boxSize.height - 32,
@@ -19,7 +20,7 @@ export const BatterySummary: FC<Props> = ({ battery, boxSize }) => {
   return (
     <div className="flex flex-col min-w-0 justify-center items-center w-full h-full">
       <ProgressCircle percentage={battery.soc ?? null} boxSize={size}>
-        <BatteryValues battery={battery} boxSize={size} />
+        <BatteryValues battery={battery} boxSize={size} electricalPowerIndicator={electricalPowerIndicator} />
       </ProgressCircle>
       <BatteryName battery={battery} boxSize={size} />
     </div>