Implemented fahrenheit support for temperatures.

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

@@ -3,7 +3,7 @@ import classNames from "classnames"
 import { Styles } from "./Styles"
 import { ISize } from "@m2Types/generic/size"
 import { ValueWithUnit } from "@m2Types/data/value-with-units"
-import { Battery as BatteryType } from "@victronenergy/mfd-modules"
+import { Battery as BatteryType, useAppStore } from "@victronenergy/mfd-modules"
 import { applyStyles, StylesType } from "app/Marine2/utils/media"
 import Box from "../../ui/Box"
 import ValueBar from "../../ui/ValueBar"
@@ -13,6 +13,7 @@ import { batteryIconFor } from "../../../utils/formatters/devices/battery/batter
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 import { colorFor } from "../../../utils/formatters/generic"
 import BatteryIcon from "../../../images/icons/battery.svg"
+import { temperatureValueFor } from "../../../utils/formatters/temperature/temperature-value-for"
 
 interface Props {
   battery: BatteryType
@@ -21,6 +22,7 @@ interface Props {
 const Battery = ({ battery }: Props) => {
   const isSimpleBattery = !(battery.state || battery.state === 0)
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
+  const { temperatureUnitToHumanReadable, temperatureUnit } = useAppStore()
 
   if (isSimpleBattery) {
     return (
@@ -63,8 +65,10 @@ const Battery = ({ battery }: Props) => {
             <p>{batteryNameFor(battery.state, battery.timetogo ?? null)}</p>
             {battery.temperature && (
               <p>
-                {Math.round(battery.temperature)}
-                <span className="text-victron-gray-300 dark:text-victron-gray-400">°C</span>
+                {temperatureValueFor(battery.temperature, temperatureUnit)}
+                <span className="text-victron-gray-300 dark:text-victron-gray-400">
+                  {temperatureUnitToHumanReadable}
+                </span>
               </p>
             )}
           </div>

src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite"
-import { useTemperature } from "@victronenergy/mfd-modules"
+import { useAppStore, useTemperature } from "@victronenergy/mfd-modules"
 import ValueOverview from "../../ui/ValueOverview"
 import ThermometerIcon from "../../../images/icons/thermometer.svg"
 import ValueBox from "../../ui/ValueBox"
@@ -8,6 +8,7 @@ import { useCallback, useContext, useEffect } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { ISize } from "@m2Types/generic/size"
+import { temperatureValueFor } from "../../../utils/formatters/temperature/temperature-value-for"
 
 interface Props {
   dataId: number
@@ -18,6 +19,7 @@ interface Props {
 const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => {
   const { temperature, customName } = useTemperature(dataId)
   const { passVisibility } = useContext(VisibleComponentsContext)
+  const { temperatureUnitToHumanReadable, temperatureUnit } = useAppStore()
 
   const handlePassVisibility = useCallback(
     (id: number, isVisible: boolean) => {
@@ -43,9 +45,9 @@ const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => {
       <ValueOverview
         Icon={ThermometerIcon}
         title={customName || translate("boxes.temperature")}
-        value={temperature}
+        value={temperatureValueFor(temperature, temperatureUnit)}
         boxSize={boxSize}
-        unit="°C"
+        unit={temperatureUnitToHumanReadable}
         valueType="environment"
       />
     )
@@ -55,9 +57,9 @@ const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => {
     <ValueBox
       title={translate("boxes.temperature") + " " + customName}
       icon={<ThermometerIcon className="w-5" />}
-      value={temperature}
+      value={temperatureValueFor(temperature, temperatureUnit)}
       bottomValues={[]}
-      unit="°C"
+      unit={temperatureUnitToHumanReadable}
     />
   )
 }

src/app/Marine2/types/data/unit.ts

@@ -1 +1 @@
-export type unit = "W" | "kW" | "V" | "A" | "Hz" | "hPa" | "°C" | "%"
+export type unit = "W" | "kW" | "V" | "A" | "Hz" | "hPa" | "°C" | "°F" | "%"

src/app/Marine2/utils/formatters/temperature/celcius-to-fahrenheit.ts

@@ -0,0 +1 @@
+export const celsiusToFahrenheit = (degrees: number) => 1.8 * degrees + 32

src/app/Marine2/utils/formatters/temperature/temperature-value-for.ts

@@ -0,0 +1,11 @@
+import { TemperatureUnit } from "@victronenergy/mfd-modules"
+import { celsiusToFahrenheit } from "./celcius-to-fahrenheit"
+
+export const temperatureValueFor = (temperature: number, unit: TemperatureUnit) => {
+  if (unit === "fahrenheit") {
+    const fahrenheitValue = celsiusToFahrenheit(temperature)
+    return Math.round(fahrenheitValue * 10) / 10
+  }
+
+  return Math.round(temperature * 10) / 10
+}