Merge pull request #888 from IQSS/883-large-download-numbers-should-have-commas

Fix: large download numbers should have commas (or dots, depending on current language)

Author: ChengShi-1

public/locales/en/dataset.json

@@ -300,12 +300,12 @@
     },
     "downloads": {
       "count": {
-        "default_zero": "{{count}} Downloads",
-        "default_one": "{{count}} Download",
-        "default_other": "{{count}} Downloads",
-        "preMDC_zero": "{{count}} Downloads pre-MDC",
-        "preMDC_one": "{{count}} Download pre-MDC",
-        "preMDC_other": "{{count}} Downloads pre-MDC"
+        "default_zero": "{{formattedCount}} Downloads",
+        "default_one": "{{formattedCount}} Download",
+        "default_other": "{{formattedCount}} Downloads",
+        "preMDC_zero": "{{formattedCount}} Downloads pre-MDC",
+        "preMDC_one": "{{formattedCount}} Download pre-MDC",
+        "preMDC_other": "{{formattedCount}} Downloads pre-MDC"
       },
       "defaultTip": "Total aggregated downloads of files in this dataset.",
       "preMakeDataCountTip": "Downloads prior to enabling MDC. Counts do not have the same filtering and detail as MDC metrics.",

src/sections/dataset/dataset-metrics/DatasetMetrics.tsx

@@ -11,7 +11,7 @@ interface DatasetMetricsProps {
 }
 
 export const DatasetMetrics = ({ datasetRepository, datasetId }: DatasetMetricsProps) => {
-  const { t } = useTranslation('dataset')
+  const { t, i18n } = useTranslation('dataset')
   const {
     downloadCount: downloadCountIncludingMDC,
     isLoadingDownloadCount: isLoadingDownloadCountIncludingMDC,
@@ -29,6 +29,10 @@ export const DatasetMetrics = ({ datasetRepository, datasetId }: DatasetMetricsP
   }
 
   const isMDCenabled = checkIsMDCenabled(downloadCountIncludingMDC?.MDCStartDate)
+  const classicCount = downloadCountNotIncludingMDC?.downloadCount ?? 0
+  const mdcCount = downloadCountIncludingMDC?.downloadCount ?? 0
+  const formatNumber = (value: number) =>
+    new Intl.NumberFormat(i18n.languages[0] || undefined).format(value)
 
   if (isLoadingDownloadCountIncludingMDC || isLoadingDownloadCountNotIncludingMDC) {
     return <DatasetMetricsSkeleton />
@@ -66,7 +70,8 @@ export const DatasetMetrics = ({ datasetRepository, datasetId }: DatasetMetricsP
         {!isMDCenabled && (
           <span data-testid="classic-download-count">
             {t('metrics.downloads.count.default', {
-              count: downloadCountNotIncludingMDC?.downloadCount
+              count: classicCount,
+              formattedCount: formatNumber(classicCount)
             })}{' '}
             <QuestionMarkTooltip placement="top" message={t('metrics.downloads.defaultTip')} />
           </span>
@@ -77,7 +82,8 @@ export const DatasetMetrics = ({ datasetRepository, datasetId }: DatasetMetricsP
           <div className={styles['mdc-count']} data-testid="mdc-download-count">
             <span>
               {t('metrics.downloads.count.default', {
-                count: downloadCountIncludingMDC.downloadCount
+                count: mdcCount,
+                formattedCount: formatNumber(mdcCount)
               })}{' '}
               <QuestionMarkTooltip
                 placement="top"
@@ -86,10 +92,11 @@ export const DatasetMetrics = ({ datasetRepository, datasetId }: DatasetMetricsP
             </span>
 
             {/* If we have downloads before MDC was enabled, we show them also. */}
-            {downloadCountNotIncludingMDC && downloadCountNotIncludingMDC.downloadCount > 0 && (
+            {classicCount > 0 && (
               <small>
                 {`(+${t('metrics.downloads.count.preMDC', {
-                  count: downloadCountNotIncludingMDC.downloadCount
+                  count: classicCount,
+                  formattedCount: formatNumber(classicCount)
                 })})`}{' '}
                 <QuestionMarkTooltip
                   placement="top"

src/stories/dataset/dataset-metrics/DatasetMetrics.stories.tsx

@@ -32,3 +32,34 @@ export const WithoutMakeDataCountEnabled: Story = {
 export const WithMakeDataCountEnabled: Story = {
   render: () => <DatasetMetrics datasetRepository={new DatasetMockRepository()} datasetId={1} />
 }
+
+export const WithBigNumbersMDCEnabled: Story = {
+  render: () => {
+    const datasetMockRepoWithBigNumbers = new DatasetMockRepository()
+
+    datasetMockRepoWithBigNumbers.getDownloadCount = (
+      _datasetId: number | string,
+      includeMDC: boolean
+    ) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (includeMDC) {
+            resolve(
+              DatasetDownloadCountMother.createWithMDCStartDate({
+                downloadCount: 1495020
+              })
+            )
+          } else {
+            resolve(
+              DatasetDownloadCountMother.createWithoutMDCStartDate({
+                downloadCount: 365900
+              })
+            )
+          }
+        }, FakerHelper.loadingTimout())
+      })
+    }
+
+    return <DatasetMetrics datasetRepository={datasetMockRepoWithBigNumbers} datasetId={1} />
+  }
+}