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

@@ -895,10 +895,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) {
@@ -1321,18 +1321,18 @@ const chartConfig = computed(() => {
       userOptions: {
         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 +1360,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 +1479,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 +1491,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 +1513,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 +1531,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 +1665,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 +1754,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 +1767,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": {

i18n/locales/de-DE.json

@@ -285,23 +285,9 @@
     },
     "downloads": {
       "title": "Wöchentliche Downloads",
-      "date_range": "{start} bis {end}",
-      "date_range_multiline": "{start}\nbis {end}",
       "analyze": "Downloads analysieren",
       "community_distribution": "Community-Adoptionsverteilung ansehen",
-      "modal_title": "Downloads",
-      "granularity": "Granularität",
-      "granularity_daily": "Täglich",
-      "granularity_weekly": "Wöchentlich",
-      "granularity_monthly": "Monatlich",
-      "granularity_yearly": "Jährlich",
-      "start_date": "Start",
-      "end_date": "Ende",
-      "no_data": "Keine Download-Daten verfügbar",
-      "loading": "Lädt...",
-      "y_axis_label": "{granularity} Downloads",
-      "download_file": "{fileType} herunterladen",
-      "toggle_annotator": "Annotation umschalten"
+      "modal_title": "Downloads"
     },
     "install_scripts": {
       "title": "Installationsskripte",
@@ -385,6 +371,20 @@
       "published": "Zuletzt veröffentlicht",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "trends": {
+      "granularity": "Granularität",
+      "granularity_daily": "Täglich",
+      "granularity_weekly": "Wöchentlich",
+      "granularity_monthly": "Monatlich",
+      "granularity_yearly": "Jährlich",
+      "start_date": "Start",
+      "end_date": "Ende",
+      "loading": "Lädt...",
+      "date_range": "{start} bis {end}",
+      "date_range_multiline": "{start}\nbis {end}",
+      "download_file": "{fileType} herunterladen",
+      "toggle_annotator": "Annotation umschalten"
     }
   },
   "connector": {

i18n/locales/en.json

@@ -283,26 +283,32 @@
       "show_more": "(show {count} more)",
       "show_less": "(show fewer)"
     },
-    "downloads": {
-      "title": "Weekly Downloads",
-      "date_range": "{start} to {end}",
-      "date_range_multiline": "{start}\nto {end}",
-      "analyze": "Analyze downloads",
-      "community_distribution": "View community adoption distribution",
-      "modal_title": "Downloads",
+    "trends": {
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
       "granularity_monthly": "Monthly",
       "granularity_yearly": "Yearly",
       "start_date": "Start",
       "end_date": "End",
-      "no_data": "No download data available",
       "loading": "Loading...",
-      "y_axis_label": "{granularity} downloads",
+      "date_range": "{start} to {end}",
+      "date_range_multiline": "{start}\nto {end}",
       "download_file": "Download {fileType}",
       "toggle_annotator": "Toggle annotator",
-      "legend_estimation": "Estimation"
+      "legend_estimation": "Estimation",
+      "no_data": "No {facet} data available",
+      "y_axis_label": "{granularity} {facet}",
+      "items": {
+        "downloads": "Downloads",
+        "likes": "Likes"
+      }
+    },
+    "downloads": {
+      "title": "Weekly Downloads",
+      "analyze": "Analyze downloads",
+      "community_distribution": "View community adoption distribution",
+      "modal_title": "Downloads"
     },
     "install_scripts": {
       "title": "Install Scripts",
@@ -853,6 +859,7 @@
       "add_column": "Add no dependency column to comparison"
     },
     "facets": {
+      "facet": "Facet",
       "group_label": "Comparison facets",
       "all": "all",
       "none": "none",
@@ -932,6 +939,9 @@
         "types_none": "None",
         "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
         "up_to_you": "Up to you!"
+      },
+      "trends": {
+        "title": "Compare Trends"
       }
     }
   },