diff --git a/website/src/components/IndexPage/OrganismCard.astro b/website/src/components/IndexPage/OrganismCard.astro index 4a99cf5b3..a16c50f07 100644 --- a/website/src/components/IndexPage/OrganismCard.astro +++ b/website/src/components/IndexPage/OrganismCard.astro @@ -1,7 +1,7 @@ --- import type { OrganismStatistics } from './getOrganismStatistics'; import { routes } from '../../routes/routes'; -import { DEFAULT_LOCALE } from '../../settings'; +import { formatNumberWithDefaultLocale } from '../../utils/formatNumber'; interface Props { key: string; @@ -13,7 +13,6 @@ interface Props { const { key, image, displayName, organismStatistics, numberDaysAgoStatistics } = Astro.props; -const formatNumber = (num: number) => new Intl.NumberFormat(DEFAULT_LOCALE).format(num); --- new Intl.NumberFormat(DEFAULT_LOCALE).form {image !== undefined && {displayName}}

{displayName}

- {formatNumber(organismStatistics.totalSequences)} sequences
- (+{formatNumber(organismStatistics.recentSequences)} in last {numberDaysAgoStatistics} days)
+ {formatNumberWithDefaultLocale(organismStatistics.totalSequences)} sequences
+ (+{formatNumberWithDefaultLocale(organismStatistics.recentSequences)} in last {numberDaysAgoStatistics} days)

- Search returned{' '} - {totalSequences !== undefined - ? totalSequences.toLocaleString(DEFAULT_LOCALE) - : oldCount !== null - ? oldCount.toLocaleString(DEFAULT_LOCALE) - : initialCount.toLocaleString(DEFAULT_LOCALE)}{' '} - sequence - {totalSequences === 1 ? '' : 's'} + {buildSequenceCountText(totalSequences, oldCount, initialCount)} {detailsHook.isLoading || aggregatedHook.isLoading || !firstClientSideLoadOfCountCompleted || diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx index 66e8c3f9d..9dd312097 100644 --- a/website/src/components/SearchPage/Table.tsx +++ b/website/src/components/SearchPage/Table.tsx @@ -3,9 +3,9 @@ import type { FC, ReactElement } from 'react'; import { Tooltip } from 'react-tooltip'; import { routes } from '../../routes/routes.ts'; -import { DEFAULT_LOCALE } from '../../settings.ts'; import type { Schema } from '../../types/config.ts'; import type { Metadatum, OrderBy } from '../../types/lapis.ts'; +import { formatNumberWithDefaultLocale } from '../../utils/formatNumber.tsx'; import MdiTriangle from '~icons/mdi/triangle'; import MdiTriangleDown from '~icons/mdi/triangle-down'; @@ -20,7 +20,7 @@ function formatField(value: any, maxLength: number, type: string): string { if (type === 'timestamp') { return new Date(value * 1000).toISOString().slice(0, 10); } - return value.toLocaleString(DEFAULT_LOCALE); + return formatNumberWithDefaultLocale(value); } else if (typeof value === 'boolean') { return value ? 'True' : 'False'; } else { diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.tsx index 8e489cb78..abb1adc8f 100644 --- a/website/src/components/SearchPage/fields/AutoCompleteField.tsx +++ b/website/src/components/SearchPage/fields/AutoCompleteField.tsx @@ -4,8 +4,8 @@ import { useEffect, useMemo, useState, useRef, forwardRef } from 'react'; import { TextField } from './TextField.tsx'; import { getClientLogger } from '../../../clientLogger.ts'; import { lapisClientHooks } from '../../../services/serviceHooks.ts'; -import { DEFAULT_LOCALE } from '../../../settings.ts'; import { type GroupedMetadataFilter, type MetadataFilter, type SetAFieldValue } from '../../../types/config.ts'; +import { formatNumberWithDefaultLocale } from '../../../utils/formatNumber.tsx'; type AutoCompleteFieldProps = { field: MetadataFilter | GroupedMetadataFilter; @@ -158,7 +158,7 @@ export const AutoCompleteField = ({ {option.option} - ({option.count.toLocaleString(DEFAULT_LOCALE)}) + ({formatNumberWithDefaultLocale(option.count)}) {selected && ( new Intl.NumberFormat(DEFAULT_LOCALE).format(num);