fix: format numbers using the local users format

src/chart/toChartData.ts

@@ -7,6 +7,7 @@ import {
 	type GainReadings,
 } from '#model/PCA20035-solar/HistoryContext.js'
 import { xAxisForType } from '#chart/xAxisForType.js'
+import { formatFloat } from '#utils/format.js'
 
 export const toChartData = ({
 	battery,
@@ -35,7 +36,7 @@ export const toChartData = ({
 					subMilliseconds(base, base.getTime() - ts),
 				]),
 				color: 'var(--color-nordic-sun)',
-				format: (v) => `${v.toFixed(1)} mA`,
+				format: (v) => `${formatFloat(v)} mA`,
 				helperLines: [
 					{
 						label: '1m',

src/components/BME680.tsx

@@ -1,6 +1,7 @@
 import { LoadingIndicator } from '#components/ValueLoading.js'
 import { useDevice } from '#context/Device.js'
 import { isEnvironment, toEnvironment } from '#proto/lwm2m.js'
+import { formatFloat } from '#utils/format.js'
 import {
 	AngryIcon,
 	AnnoyedIcon,
@@ -57,12 +58,12 @@ export const EnvironmentReadings = () => {
 				<span>
 					{c !== undefined && (
 						<span class="me-2">
-							<ThermometerIcon /> {c.toFixed(1)} °C
+							<ThermometerIcon /> {formatFloat(c)} °C
 						</span>
 					)}
 					{p !== undefined && (
 						<span class="me-2">
-							<DropletsIcon /> {p.toFixed(1)} %
+							<DropletsIcon /> {formatFloat(p)} %
 						</span>
 					)}
 					{mbar !== undefined && (

src/components/DeviceHeader.tsx

@@ -37,6 +37,8 @@ import {
 } from 'lucide-preact'
 import { useState } from 'preact/hooks'
 import './DeviceHeader.css'
+import { CountryFlag } from './CountryFlag.js'
+import { formatFloat } from '#utils/format.js'
 
 export const DeviceHeader = ({ device }: { device: Device }) => {
 	const type = device.model
@@ -156,7 +158,7 @@ const EnvironmentInfo = () => {
 			{c === undefined && <LoadingIndicator width={150} />}
 			{c !== undefined && (
 				<span class="me-2">
-					<ThermometerIcon /> {c.toFixed(1)} °C
+					<ThermometerIcon /> {formatFloat(c)} °C
 				</span>
 			)}
 			{iaq === undefined && <LoadingIndicator width={150} class="mt-1" />}
@@ -179,15 +181,15 @@ const EnvironmentInfo = () => {
 
 const NetworkModeInfo = () => {
 	const { reported } = useDevice()
-	const { networkMode, currentBand, ts } =
+	const { networkMode, currentBand, mccmnc, ts } =
 		Object.values(reported)
 			.filter(isConnectionInformation)
 			.map(toConnectionInformation)[0] ?? {}
 
 	return (
 		<span class="d-flex flex-column">
 			<small class="text-muted">
-				<strong>Network mode</strong>
+				<strong>Network</strong>
 			</small>
 			{(networkMode === undefined || currentBand === undefined) && (
 				<>
@@ -197,23 +199,26 @@ const NetworkModeInfo = () => {
 			)}
 
 			{networkMode !== undefined && currentBand !== undefined && (
-				<abbr title={`Band ${currentBand}`} class="me-2">
-					{networkMode?.includes('LTE-M') ?? false ? (
-						<LTEm
-							style={{
-								height: '25px',
-								width: 'auto',
-							}}
-						/>
-					) : (
-						<NBIot
-							style={{
-								height: '25px',
-								width: 'auto',
-							}}
-						/>
-					)}
-				</abbr>
+				<span>
+					<abbr title={`Band ${currentBand}`} class="me-2">
+						{networkMode?.includes('LTE-M') ?? false ? (
+							<LTEm
+								style={{
+									height: '25px',
+									width: 'auto',
+								}}
+							/>
+						) : (
+							<NBIot
+								style={{
+									height: '25px',
+									width: 'auto',
+								}}
+							/>
+						)}
+					</abbr>
+					{mccmnc !== undefined && <CountryFlag mccmnc={mccmnc} />}
+				</span>
 			)}
 			{ts !== undefined && (
 				<small class="text-muted">

src/components/DeviceModeSelector.tsx

@@ -9,6 +9,7 @@ import { Ban, HistoryIcon, Satellite, Settings2, X } from 'lucide-preact'
 import { useState } from 'preact/hooks'
 import { Problem } from './Problem.js'
 import { isEqual } from 'lodash-es'
+import { formatFloat } from '#utils/format.js'
 
 export const DeviceModeSelector = ({
 	device,
@@ -209,7 +210,8 @@ const DataUsageInfo = ({
 		>
 			<SIMIcon class="me-2 flex-shrink-0" size={18} />
 			<small>
-				This mode uses around {dataUsagePerDayMB.toFixed(2)} MB of data per day.
+				This mode uses around {formatFloat(dataUsagePerDayMB, 2)} MB of data per
+				day.
 			</small>
 		</span>
 	)

src/map/LocationSourceLabels.tsx

@@ -8,8 +8,8 @@ export enum LocationSource {
 // Uses nrfcloud.com wording
 export const LocationSourceLabels = new Map<string, string>([
 	[LocationSource.WIFI, 'Wi-Fi'],
-	[LocationSource.MCELL, 'multi-cell'],
-	[LocationSource.SCELL, 'single-cell'],
+	[LocationSource.MCELL, 'Multi-cell'],
+	[LocationSource.SCELL, 'Single-cell'],
 	[LocationSource.GNSS, 'GNSS'],
 ])
 

src/map/Map.tsx

@@ -38,6 +38,7 @@ import {
 	type GeoLocation,
 } from '#proto/lwm2m.js'
 import { useDeviceLocation, type Locations } from '#context/DeviceLocation.js'
+import { formatFloat, formatInt } from '#utils/format.js'
 
 const trailColor = '#e169a5'
 const defaultColor = '#C7C7C7'
@@ -530,11 +531,10 @@ export const Located = ({ location }: { location: GeoLocation }) => (
 			target="_blank"
 			class="text-light"
 		>
-			{location.lat.toFixed(5).replace(/0+$/, '')},{' '}
-			{location.lng.toFixed(5).replace(/0+$/, '')}
+			{formatFloat(location.lat, 5)}, {formatFloat(location.lng, 5)}
 		</a>{' '}
 		{location.acc !== undefined ? (
-			<>with an accuracy of {Math.round(location.acc)} m</>
+			<>with an accuracy of {formatInt(location.acc)} m</>
 		) : (
 			<>with an unspecified accuary</>
 		)}

src/model/PCA20035-solar/Chart.tsx

@@ -1,7 +1,7 @@
 import { HistoryChart } from '#chart/HistoryChart.js'
 import { Ago } from '#components/Ago.js'
 import { LoadingIndicator } from '#components/ValueLoading.js'
-import { formatFloat } from '#utils/formatFloat.js'
+import { formatFloat } from '#utils/format.js'
 import { BatteryCharging, Sun } from 'lucide-preact'
 import { toChartData } from '#chart/toChartData.js'
 import { DateRangeButton } from '#chart/DateRangeButton.js'

src/utils/format.spec.ts

@@ -0,0 +1,20 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { format } from './format.js'
+
+const { formatFloat, formatInt } = format('en-US')
+
+void describe('formatInt()', () => {
+	void it('should format an integer', () => {
+		assert.equal(formatInt(1234), '1,234')
+	})
+})
+
+void describe('formatFloat()', () => {
+	void it('should format a float', () => {
+		assert.equal(formatFloat(1.234), '1.2')
+	})
+	void it('should format a float with custom number of digits', () => {
+		assert.equal(formatFloat(1.234, 2), '1.23')
+	})
+})

src/utils/format.ts

@@ -0,0 +1,39 @@
+export const format = (
+	locales?: Intl.LocalesArgument,
+): {
+	formatInt: (value: number) => string
+	formatFloat: (value: number, maximumFractionDigits?: number) => string
+} => {
+	const intFormatter = new Intl.NumberFormat(locales, {
+		maximumFractionDigits: 0,
+	})
+	const formatInt = (value: number) => intFormatter.format(value)
+
+	const formatters = new Map<number, Intl.NumberFormat>([
+		[
+			1,
+			new Intl.NumberFormat(locales, {
+				maximumFractionDigits: 1,
+			}),
+		],
+	])
+
+	const formatFloat = (value: number, maximumFractionDigits = 1) => {
+		if (!formatters.has(maximumFractionDigits)) {
+			const f = new Intl.NumberFormat(undefined, {
+				maximumFractionDigits,
+			})
+			formatters.set(maximumFractionDigits, f)
+		}
+		return formatters.get(maximumFractionDigits)!.format(value)
+	}
+
+	return {
+		formatInt,
+		formatFloat,
+	}
+}
+
+const { formatFloat, formatInt } = format()
+
+export { formatFloat, formatInt }