Fix undefined check and use consistent number formatting function names

src/apps/dashboard/features/metrics/components/MetricCard.tsx

@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import React, { type FC } from 'react';
 
 import { useLocale } from 'hooks/useLocale';
-import { toLocaleString } from 'utils/number';
+import { toDecimalString } from 'utils/number';
 
 interface Metric {
     label: string
@@ -54,8 +54,8 @@ const MetricCard: FC<MetricCardProps> = ({
                             variant='h5'
                             component='div'
                         >
-                            {value ? (
-                                toLocaleString(value, dateTimeLocale)
+                            {typeof value !== 'undefined' ? (
+                                toDecimalString(value, dateTimeLocale)
                             ) : (
                                 <Skeleton />
                             )}

src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx

@@ -9,7 +9,7 @@ import CircularProgress, {
 } from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import { toPercent } from 'utils/number';
+import { toPercentString } from 'utils/number';
 import { getCurrentDateTimeLocale } from 'lib/globalize';
 import type { ItemDto } from 'types/base/models/item-dto';
 
@@ -36,7 +36,7 @@ function CircularProgressWithLabel(
                     component='div'
                     color='text.secondary'
                 >
-                    {toPercent(props.value / 100, getCurrentDateTimeLocale())}
+                    {toPercentString(props.value / 100, getCurrentDateTimeLocale())}
                 </Typography>
             </Box>
         </Box>

src/elements/emby-progressring/emby-progressring.js

@@ -2,7 +2,7 @@ import './emby-progressring.scss';
 import 'webcomponents.js/webcomponents-lite';
 import template from './emby-progressring.template.html';
 import { getCurrentDateTimeLocale } from '../../lib/globalize';
-import { toPercent } from '../../utils/number.ts';
+import { toPercentString } from '../../utils/number.ts';
 
 const EmbyProgressRing = Object.create(HTMLDivElement.prototype);
 
@@ -71,7 +71,7 @@ EmbyProgressRing.setProgress = function (progress) {
         this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)';
     }
 
-    this.querySelector('.progressring-text').innerHTML = toPercent(progress / 100, getCurrentDateTimeLocale());
+    this.querySelector('.progressring-text').innerHTML = toPercentString(progress / 100, getCurrentDateTimeLocale());
 };
 
 EmbyProgressRing.attachedCallback = function () {

src/utils/number.ts

@@ -19,7 +19,7 @@ export function randomInt(min: number, max: number): number {
  * @param {string} locale The locale to use for formatting (i.e. en-us).
  * @returns {string} The value formatted as a string.
  */
-export function toLocaleString(value: number, locale: string): string {
+export function toDecimalString(value: number, locale: string): string {
     if (toLocaleStringSupportsOptions()) {
         return value.toLocaleString(locale);
     }
@@ -33,7 +33,7 @@ export function toLocaleString(value: number, locale: string): string {
  * @param {string} locale The locale to use for formatting (i.e. en-us).
  * @returns {string} The value formatted as a percentage.
  */
-export function toPercent(value: number | null | undefined, locale: string): string {
+export function toPercentString(value: number | null | undefined, locale: string): string {
     if (value == null) {
         return '';
     }