refactor: generalize i18n keys for download trends

I've been working on a PR to add "likes" as a new facet that can be visualized
in what I'm calling "trends" charts (e.g. downloads over time, likes over time).
That PR generalizes the existing "downloads" chart to support one or more given facets.

I've had a half dozen painful merge conflicts across 37 locale files, so I've pulled
out just this i18n key rename into its own PR to make this all easier.

Author: serhalp

app/components/Package/DownloadAnalytics.vue

@@ -261,16 +261,28 @@ function extractSeriesPoints(
   dataset: EvolutionData,
 ): Array<{ timestamp: number; downloads: number }> {
   if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
-    return dataset.map(d => ({ timestamp: d.timestampEnd, downloads: d.downloads }))
+    return dataset.map(d => ({
+      timestamp: d.timestampEnd,
+      downloads: d.downloads,
+    }))
   }
   if (selectedGranularity === 'daily' && isDailyDataset(dataset)) {
-    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+    return dataset.map(d => ({
+      timestamp: d.timestamp,
+      downloads: d.downloads,
+    }))
   }
   if (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) {
-    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+    return dataset.map(d => ({
+      timestamp: d.timestamp,
+      downloads: d.downloads,
+    }))
   }
   if (selectedGranularity === 'yearly' && isYearlyDataset(dataset)) {
-    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+    return dataset.map(d => ({
+      timestamp: d.timestamp,
+      downloads: d.downloads,
+    }))
   }
   return []
 }
@@ -493,7 +505,12 @@ function resetDateRange() {
 const options = shallowRef<
   | { granularity: 'day'; startDate?: string; endDate?: string }
   | { granularity: 'week'; weeks: number; startDate?: string; endDate?: string }
-  | { granularity: 'month'; months: number; startDate?: string; endDate?: string }
+  | {
+      granularity: 'month'
+      months: number
+      startDate?: string
+      endDate?: string
+    }
   | { granularity: 'year'; startDate?: string; endDate?: string }
 >({ granularity: 'week', weeks: 52 })
 
@@ -743,7 +760,10 @@ const effectiveDataSingle = computed<EvolutionData>(() => {
  * Returning `dataset: null` explicitly signals the absence of data and allows
  * the template to handle empty states without ambiguity.
  */
-const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: number[] }>(() => {
+const chartData = computed<{
+  dataset: VueUiXyDatasetItem[] | null
+  dates: number[]
+}>(() => {
   if (!isMultiPackageMode.value) {
     const pkg = effectivePackageNames.value[0] ?? props.packageName ?? ''
     return formatXyDataset(displayedGranularity.value, effectiveDataSingle.value, pkg)
@@ -772,7 +792,11 @@ const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: number
 
     const series = dates.map(t => map.get(t) ?? 0)
 
-    const item: VueUiXyDatasetItem = { name: pkg, type: 'line', series } as VueUiXyDatasetItem
+    const item: VueUiXyDatasetItem = {
+      name: pkg,
+      type: 'line',
+      series,
+    } as VueUiXyDatasetItem
 
     if (isListedFramework(pkg)) {
       item.color = getFrameworkColor(pkg)
@@ -895,10 +919,10 @@ function buildExportFilename(extension: string): string {
 }
 
 const granularityLabels = computed(() => ({
-  daily: $t('package.downloads.granularity_daily'),
-  weekly: $t('package.downloads.granularity_weekly'),
-  monthly: $t('package.downloads.granularity_monthly'),
-  yearly: $t('package.downloads.granularity_yearly'),
+  daily: $t('package.trends.granularity_daily'),
+  weekly: $t('package.trends.granularity_weekly'),
+  monthly: $t('package.trends.granularity_monthly'),
+  yearly: $t('package.trends.granularity_yearly'),
 }))
 
 function getGranularityLabel(granularity: ChartTimeGranularity) {
@@ -1102,7 +1126,11 @@ function extrapolateIncompleteLastPoint(params: {
   const yDelta = params.lastPoint.y - params.previousPoint.y
 
   if (valueDelta === 0)
-    return { ...params.lastPoint, value: extrapolatedValue, comment: 'extrapolated' }
+    return {
+      ...params.lastPoint,
+      value: extrapolatedValue,
+      comment: 'extrapolated',
+    }
 
   const valueToYPixelRatio = yDelta / valueDelta
   const extrapolatedY =
@@ -1319,20 +1347,26 @@ const chartConfig = computed(() => {
       backgroundColor: colors.value.bg,
       padding: { bottom: 36, right: 100 }, // padding right is set to leave space of last datapoint label(s)
       userOptions: {
-        buttons: { pdf: false, labels: false, fullscreen: false, table: false, tooltip: false },
+        buttons: {
+          pdf: false,
+          labels: false,
+          fullscreen: false,
+          table: false,
+          tooltip: false,
+        },
         buttonTitles: {
-          csv: $t('package.downloads.download_file', { fileType: 'CSV' }),
-          img: $t('package.downloads.download_file', { fileType: 'PNG' }),
-          svg: $t('package.downloads.download_file', { fileType: 'SVG' }),
-          annotator: $t('package.downloads.toggle_annotator'),
+          csv: $t('package.trends.download_file', { fileType: 'CSV' }),
+          img: $t('package.trends.download_file', { fileType: 'PNG' }),
+          svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+          annotator: $t('package.trends.toggle_annotator'),
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(imageUri, buildExportFilename('png'))
           },
           csv: (csvStr: string) => {
             const PLACEHOLDER_CHAR = '\0'
-            const multilineDateTemplate = $t('package.downloads.date_range_multiline', {
+            const multilineDateTemplate = $t('package.trends.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
               end: PLACEHOLDER_CHAR,
             })
@@ -1360,8 +1394,9 @@ const chartConfig = computed(() => {
           fontSize: isMobile.value ? 24 : 16,
           color: pending.value ? colors.value.border : colors.value.fgSubtle,
           axis: {
-            yLabel: $t('package.downloads.y_axis_label', {
+            yLabel: $t('package.trends.y_axis_label', {
               granularity: getGranularityLabel(selectedGranularity.value),
+              facet: $t('package.trends.items.downloads'),
             }),
             xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,
@@ -1478,7 +1513,7 @@ const chartConfig = computed(() => {
             for="granularity"
             class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
           >
-            {{ $t('package.downloads.granularity') }}
+            {{ $t('package.trends.granularity') }}
           </label>
 
           <div
@@ -1490,10 +1525,18 @@ const chartConfig = computed(() => {
               :disabled="pending"
               class="w-full px-2.5 py-1.75 bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
             >
-              <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
-              <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
-              <option value="monthly">{{ $t('package.downloads.granularity_monthly') }}</option>
-              <option value="yearly">{{ $t('package.downloads.granularity_yearly') }}</option>
+              <option value="daily">
+                {{ $t('package.trends.granularity_daily') }}
+              </option>
+              <option value="weekly">
+                {{ $t('package.trends.granularity_weekly') }}
+              </option>
+              <option value="monthly">
+                {{ $t('package.trends.granularity_monthly') }}
+              </option>
+              <option value="yearly">
+                {{ $t('package.trends.granularity_yearly') }}
+              </option>
             </select>
           </div>
         </div>
@@ -1504,7 +1547,7 @@ const chartConfig = computed(() => {
               for="startDate"
               class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
             >
-              {{ $t('package.downloads.start_date') }}
+              {{ $t('package.trends.start_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1522,7 +1565,7 @@ const chartConfig = computed(() => {
 
           <div class="flex flex-col gap-1">
             <label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
-              {{ $t('package.downloads.end_date') }}
+              {{ $t('package.trends.end_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1656,9 +1699,7 @@ const chartConfig = computed(() => {
                       stroke-linecap="round"
                     />
                   </svg>
-                  <span class="text-fg-subtle">{{
-                    $t('package.downloads.legend_estimation')
-                  }}</span>
+                  <span class="text-fg-subtle">{{ $t('package.trends.legend_estimation') }}</span>
                 </div>
               </div>
             </template>
@@ -1747,7 +1788,11 @@ const chartConfig = computed(() => {
       v-if="!chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
-      {{ $t('package.downloads.no_data') }}
+      {{
+        $t('package.trends.no_data', {
+          facet: $t('package.trends.items.downloads'),
+        })
+      }}
     </div>
 
     <div
@@ -1756,7 +1801,7 @@ const chartConfig = computed(() => {
       aria-live="polite"
       class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
-      {{ $t('package.downloads.loading') }}
+      {{ $t('package.trends.loading') }}
     </div>
   </div>
 </template>

app/components/Package/WeeklyDownloadStats.vue

@@ -124,7 +124,7 @@ watch(
 const dataset = computed(() =>
   weeklyDownloads.value.map(d => ({
     value: d?.downloads ?? 0,
-    period: $t('package.downloads.date_range', {
+    period: $t('package.trends.date_range', {
       start: d.weekStart ?? '-',
       end: d.weekEnd ?? '-',
     }),

app/pages/compare.vue

@@ -242,7 +242,7 @@ useSeoMeta({
             id="comparison-heading"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-4 mt-10"
           >
-            {{ $t('package.downloads.title') }}
+            {{ $t('compare.facets.trends.title') }}
           </h2>
 
           <CompareLineChart :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)" />

i18n/locales/ar.json

@@ -284,23 +284,9 @@
     },
     "downloads": {
       "title": "التنزيلات الأسبوعية",
-      "date_range": "من {start} إلى {end}",
-      "date_range_multiline": "من {start}\nإلى {end}",
       "analyze": "تحليل التنزيلات",
       "community_distribution": "عرض توزيع تبنّي المجتمع",
-      "modal_title": "التنزيلات",
-      "granularity": "مستوى التفصيل",
-      "granularity_daily": "يومي",
-      "granularity_weekly": "أسبوعي",
-      "granularity_monthly": "شهري",
-      "granularity_yearly": "سنوي",
-      "start_date": "البداية",
-      "end_date": "النهاية",
-      "no_data": "لا تتوفر بيانات تنزيل",
-      "loading": "جارٍ التحميل…",
-      "y_axis_label": "تنزيلات {granularity}ة",
-      "download_file": "تنزيل {fileType}",
-      "toggle_annotator": "إظهار/إخفاء الشروح التوضيحية"
+      "modal_title": "التنزيلات"
     },
     "install_scripts": {
       "title": "سكربتات التثبيت",
@@ -384,6 +370,20 @@
       "published": "الأحدث نشرًا",
       "name_asc": "الاسم (A-Z)",
       "name_desc": "الاسم (Z-A)"
+    },
+    "trends": {
+      "granularity": "مستوى التفصيل",
+      "granularity_daily": "يومي",
+      "granularity_weekly": "أسبوعي",
+      "granularity_monthly": "شهري",
+      "granularity_yearly": "سنوي",
+      "start_date": "البداية",
+      "end_date": "النهاية",
+      "loading": "جارٍ التحميل…",
+      "date_range": "من {start} إلى {end}",
+      "date_range_multiline": "من {start}\nإلى {end}",
+      "download_file": "تنزيل {fileType}",
+      "toggle_annotator": "إظهار/إخفاء الشروح التوضيحية"
     }
   },
   "connector": {

i18n/locales/az-AZ.json

@@ -219,22 +219,8 @@
     },
     "downloads": {
       "title": "Həftəlik Endirmələr",
-      "date_range": "{start} - {end}",
-      "date_range_multiline": "{start}\n- {end}",
       "analyze": "Endirmələri təhlil et",
-      "modal_title": "Endirmələr",
-      "granularity": "Dərəcəlilik",
-      "granularity_daily": "Günlük",
-      "granularity_weekly": "Həftəlik",
-      "granularity_monthly": "Aylıq",
-      "granularity_yearly": "İllik",
-      "start_date": "Başlanğıc",
-      "end_date": "Son",
-      "no_data": "Endirmə məlumatı mövcud deyil",
-      "loading": "Yüklənir...",
-      "y_axis_label": "{granularity} endirmələr",
-      "download_file": "{fileType} endir",
-      "toggle_annotator": "Annotator keçid"
+      "modal_title": "Endirmələr"
     },
     "install_scripts": {
       "title": "Quraşdırma Skriptləri",
@@ -315,6 +301,20 @@
       "downloads": "Ən çox endirilən",
       "name_asc": "Ad (A-Z)",
       "name_desc": "Ad (Z-A)"
+    },
+    "trends": {
+      "granularity": "Dərəcəlilik",
+      "granularity_daily": "Günlük",
+      "granularity_weekly": "Həftəlik",
+      "granularity_monthly": "Aylıq",
+      "granularity_yearly": "İllik",
+      "start_date": "Başlanğıc",
+      "end_date": "Son",
+      "loading": "Yüklənir...",
+      "date_range": "{start} - {end}",
+      "date_range_multiline": "{start}\n- {end}",
+      "download_file": "{fileType} endir",
+      "toggle_annotator": "Annotator keçid"
     }
   },
   "connector": {

i18n/locales/cs-CZ.json

@@ -254,22 +254,8 @@
     },
     "downloads": {
       "title": "Týdenní stažení",
-      "date_range": "od {start} do {end}",
-      "date_range_multiline": "od {start}\ndo {end}",
       "analyze": "Analyzovat stažení",
-      "modal_title": "Stažení",
-      "granularity": "Rozlišení",
-      "granularity_daily": "Denně",
-      "granularity_weekly": "Týdně",
-      "granularity_monthly": "Měsíčně",
-      "granularity_yearly": "Ročně",
-      "start_date": "Od",
-      "end_date": "Do",
-      "no_data": "Žádná data o stažení nejsou k dispozici",
-      "loading": "Načítání...",
-      "y_axis_label": "Stažení {granularity}",
-      "download_file": "Stáhnout {fileType}",
-      "toggle_annotator": "Přepnout popisovač"
+      "modal_title": "Stažení"
     },
     "install_scripts": {
       "title": "Instalační skripty",
@@ -353,6 +339,20 @@
       "published": "Nedávno publikováno",
       "name_asc": "Název (A-Z)",
       "name_desc": "Název (Z-A)"
+    },
+    "trends": {
+      "granularity": "Rozlišení",
+      "granularity_daily": "Denně",
+      "granularity_weekly": "Týdně",
+      "granularity_monthly": "Měsíčně",
+      "granularity_yearly": "Ročně",
+      "start_date": "Od",
+      "end_date": "Do",
+      "loading": "Načítání...",
+      "date_range": "od {start} do {end}",
+      "date_range_multiline": "od {start}\ndo {end}",
+      "download_file": "Stáhnout {fileType}",
+      "toggle_annotator": "Přepnout popisovač"
     }
   },
   "connector": {