diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx index a3f67684c..593a378e6 100644 --- a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx +++ b/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({ width: 0, height: 0 }) @@ -84,7 +85,12 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: {range(pages).map((page) => (
{batteriesFor(page).map((b) => ( - + ))}
))} diff --git a/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx b/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx index 9d78650dc..e80db5c35 100644 --- a/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx +++ b/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) => { ) @@ -35,8 +36,8 @@ const EnergyAC = ({ componentMode = "compact", compactBoxSize }: Props) => { } - value={phaseValueFor(phases, current, power)} - unit={phaseUnitFor(phases)} + value={phaseValueFor(phases, current, power, electricalPowerIndicator)} + unit={phaseUnitFor(phases, electricalPowerIndicator)} bottomValues={phasesData} /> ) diff --git a/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx b/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx index 95a8455b7..29024a64e 100644 --- a/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx +++ b/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, ) @@ -35,9 +38,15 @@ const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance, } - 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 }, + ], + ]} /> ) } diff --git a/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx b/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx index caa11cfa2..a790715da 100644 --- a/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx +++ b/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) ) @@ -36,9 +39,15 @@ const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props) } - 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 }, + ], + ]} /> ) } diff --git a/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx b/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx index 38031b3a1..c71b59482 100644 --- a/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx +++ b/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 } 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} /> diff --git a/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx b/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx index 6eba21707..2c5e63685 100644 --- a/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx +++ b/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx @@ -1,5 +1,5 @@ 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" @@ -7,8 +7,11 @@ 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) { @@ -16,8 +19,8 @@ const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: P ) @@ -27,9 +30,14 @@ const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: P } - 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)} /> ) } diff --git a/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx b/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx index 9a6e961b0..5e8c9e91e 100644 --- a/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx +++ b/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx @@ -1,6 +1,6 @@ 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" @@ -8,6 +8,8 @@ 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 ( ) } - const power = current * voltage - const instance = showInstance ? ` [${windGenerator}]` : "" - return ( } - 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 }, + ], + ]} /> ) } diff --git a/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx b/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx index 6f29efbd7..42b930ea0 100644 --- a/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx +++ b/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} /> diff --git a/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx b/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx index 636fbcd97..9fe2bc3cc 100644 --- a/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx +++ b/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} /> diff --git a/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx b/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx index 154d84ea5..9ff54836f 100644 --- a/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx +++ b/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 = ({ battery, boxSize }) => { +export const BatterySummary: FC = ({ battery, boxSize, electricalPowerIndicator }) => { const size = { width: boxSize.width - 32, height: boxSize.height - 32, @@ -19,7 +20,7 @@ export const BatterySummary: FC = ({ battery, boxSize }) => { return (
- +
diff --git a/src/app/Marine2/components/ui/BatterySummary/BatteryValues/BatteryValues.tsx b/src/app/Marine2/components/ui/BatterySummary/BatteryValues/BatteryValues.tsx index 7463d7319..aed16116c 100644 --- a/src/app/Marine2/components/ui/BatterySummary/BatteryValues/BatteryValues.tsx +++ b/src/app/Marine2/components/ui/BatterySummary/BatteryValues/BatteryValues.tsx @@ -2,36 +2,42 @@ import { FC } from "react" import classNames from "classnames" import { Battery } from "@victronenergy/mfd-modules" import { ISize } from "@m2Types/generic/size" -import { formatValue } from "../../../../utils/formatters/generic" import { batteryStateFor } from "../../../../utils/formatters/devices/battery/battery-state-for" import { applyStyles } from "../../../../utils/media" import { BatteryPercentage } from "./BatteryPercentage/BatteryPercentage" import { Styles } from "./Styles" +import { ValueWithUnit } from "../../ValueWithUnit/ValueWithUnit" interface Props { battery: Battery boxSize: ISize + electricalPowerIndicator: number } -export const BatteryValues: FC = ({ battery, boxSize }) => { +export const BatteryValues: FC = ({ battery, boxSize, electricalPowerIndicator }) => { const activeStyles = applyStyles(boxSize, Styles) + const showWatts = electricalPowerIndicator === 0 + return (
- {(battery.voltage || battery.voltage === 0) && ( + {!showWatts && (battery.voltage || battery.voltage === 0) && (
- {formatValue(battery.voltage)} - V + +
+ )} + {!showWatts && (battery.current || battery.current === 0) && ( +
+
)} - {(battery.current || battery.current === 0) && ( + {showWatts && (battery.power || battery.power === 0) && (
- {formatValue(battery.current)} - A +
)}
diff --git a/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx b/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx index b164841e3..a606e5711 100644 --- a/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx +++ b/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite" import classnames from "classnames" import { translate, Translate } from "react-i18nify" import useSize from "@react-hook/size" -import { useApp } from "@victronenergy/mfd-modules" +import { useAppStore } from "@victronenergy/mfd-modules" import { QRCode } from "react-qrcode-logo" const RemoteConsole = ({ host, width, height }: Props) => { @@ -14,7 +14,7 @@ const RemoteConsole = ({ host, width, height }: Props) => { const loading = !iframeLoaded const protocol = (typeof window !== "undefined" && window.location.protocol) || "http:" const url = protocol + "//" + host - const app = useApp() + const app = useAppStore() useEffect(() => { iframeRef.current?.focus() diff --git a/src/app/Marine2/utils/formatters/phase/phase-unit-for.ts b/src/app/Marine2/utils/formatters/phase/phase-unit-for.ts index 265a7c730..f6ae7455a 100644 --- a/src/app/Marine2/utils/formatters/phase/phase-unit-for.ts +++ b/src/app/Marine2/utils/formatters/phase/phase-unit-for.ts @@ -1,3 +1,12 @@ import { isSinglePhaseFor } from "../../helpers/is-single-phase-for" -export const phaseUnitFor = (value: number) => (isSinglePhaseFor(value) ? "A" : "W") +export const unitFor = (preferredElectricalPowerIndicator: number) => { + return preferredElectricalPowerIndicator === 0 ? "W" : "A" +} + +export const phaseUnitFor = (value: number, preferredElectricalPowerIndicator: number) => { + if (preferredElectricalPowerIndicator === 0) { + return "W" + } + return isSinglePhaseFor(value) ? "A" : "W" +} diff --git a/src/app/Marine2/utils/formatters/phase/phase-value-for.ts b/src/app/Marine2/utils/formatters/phase/phase-value-for.ts index cd8c8ad20..fd79fffc3 100644 --- a/src/app/Marine2/utils/formatters/phase/phase-value-for.ts +++ b/src/app/Marine2/utils/formatters/phase/phase-value-for.ts @@ -1,8 +1,21 @@ import { isSinglePhaseFor } from "../../helpers/is-single-phase-for" import { totalPowerFor } from "../../helpers/total-power-for" -export const phaseValueFor = (phases: number, current: number[], power: number[]) => { - if (isSinglePhaseFor(phases)) { +export const valueFor = (current: number, power: number, preferredElectricalPowerIndicator: number) => { + if (preferredElectricalPowerIndicator === 1) { + return current + } + + return power +} + +export const phaseValueFor = ( + phases: number, + current: number[], + power: number[], + preferredElectricalPowerIndicator: number +) => { + if (isSinglePhaseFor(phases) && preferredElectricalPowerIndicator === 1) { return current[0] }