fix: rtl issues on large downloads chart (#424)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: 3 people

app/components/PackageDownloadAnalytics.vue

@@ -138,7 +138,12 @@ function formatXyDataset(
           color: accent.value,
         },
       ],
-      dates: dataset.map(d => `${d.weekStart}\nto ${d.weekEnd}`),
+      dates: dataset.map(d =>
+        $t('package.downloads.date_range_multiline', {
+          start: d.weekStart,
+          end: d.weekEnd,
+        }),
+      ),
     }
   }
   if (selectedGranularity === 'daily' && isDailyDataset(dataset)) {
@@ -199,14 +204,16 @@ function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
-function extractDates(dateLabel: string) {
-  if (typeof dateLabel !== 'string') return []
+function extractDates(dateLabel: string): [string, string] | null {
+  const matches = dateLabel.match(/\b(\d{4}(?:-\d{2}-\d{2})?)\b/g) // either yyyy or yyyy-mm-dd
+  if (!matches) return null
 
-  const parts = dateLabel.trim().split(/\s+/).filter(Boolean)
+  const first = matches.at(0)
+  const last = matches.at(-1)
 
-  if (parts.length < 2) return []
+  if (!first || !last || first === last) return null
 
-  return [parts[0], parts[parts.length - 1]]
+  return [first, last]
 }
 
 /**
@@ -553,7 +560,8 @@ const config = computed(() => {
             ? undefined
             : ({ absoluteIndex, side }: { absoluteIndex: number; side: 'left' | 'right' }) => {
                 const parts = extractDates(chartData.value.dates[absoluteIndex] ?? '')
-                return side === 'left' ? parts[0] : parts.at(-1)
+                if (!parts) return ''
+                return side === 'left' ? parts[0] : parts[1]
               },
         highlightColor: colors.value.bgElevated,
         minimap: {
@@ -670,7 +678,7 @@ const config = computed(() => {
     </div>
 
     <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy :dataset="chartData.dataset" :config="config">
+      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
         <template #menuIcon="{ isOpen }">
           <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
           <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />

i18n/locales/ar.json

@@ -213,6 +213,7 @@
     "downloads": {
       "title": "التنزيلات الأسبوعية",
       "date_range": "من {start} إلى {end}",
+      "date_range_multiline": "من {start}\nإلى {end}",
       "analyze": "تحليل التنزيلات",
       "modal_title": "التنزيلات",
       "granularity": "مستوى التفصيل",

i18n/locales/de-DE.json

@@ -226,6 +226,7 @@
     "downloads": {
       "title": "Wöchentliche Downloads",
       "date_range": "{start} bis {end}",
+      "date_range_multiline": "{start}\nbis {end}",
       "analyze": "Downloads analysieren",
       "modal_title": "Downloads",
       "granularity": "Granularität",

i18n/locales/en.json

@@ -226,6 +226,7 @@
     "downloads": {
       "title": "Weekly Downloads",
       "date_range": "{start} to {end}",
+      "date_range_multiline": "{start}\nto {end}",
       "analyze": "Analyze downloads",
       "modal_title": "Downloads",
       "granularity": "Granularity",

i18n/locales/es.json

@@ -213,6 +213,7 @@
     "downloads": {
       "title": "Descargas Semanales",
       "date_range": "{start} a {end}",
+      "date_range_multiline": "{start}\na {end}",
       "analyze": "Analizar descargas",
       "modal_title": "Descargas",
       "granularity": "Granularidad",

i18n/locales/fr-FR.json

@@ -213,6 +213,7 @@
     "downloads": {
       "title": "Téléchargements hebdomadaires",
       "date_range": "{start} au {end}",
+      "date_range_multiline": "{start}\nau {end}",
       "analyze": "Analyser les téléchargements",
       "modal_title": "Téléchargements",
       "granularity": "Granularité",

i18n/locales/it-IT.json

@@ -213,6 +213,7 @@
     "downloads": {
       "title": "Downloads settimanali",
       "date_range": "{start} a {end}",
+      "date_range_multiline": "{start}\na {end}",
       "analyze": "Analizza downloads",
       "modal_title": "Downloads",
       "granularity": "Granularità",

i18n/locales/ja-JP.json

@@ -213,6 +213,7 @@
     "downloads": {
       "title": "週間ダウンロード数",
       "date_range": "{start} から {end}",
+      "date_range_multiline": "{start}\nから {end}",
       "analyze": "ダウンロード数を分析",
       "modal_title": "ダウンロード数",
       "granularity": "粒度",

i18n/locales/ru-RU.json

@@ -222,6 +222,7 @@
     "downloads": {
       "title": "Загрузки за неделю",
       "date_range": "С {start} по {end}",
+      "date_range_multiline": "С {start}\nпо {end}",
       "analyze": "Анализировать загрузки",
       "modal_title": "Загрузки",
       "granularity": "Детализация",

i18n/locales/zh-CN.json

@@ -226,6 +226,7 @@
     "downloads": {
       "title": "每周下载量",
       "date_range": "{start} 到 {end}",
+      "date_range_multiline": "{start}\n到 {end}",
       "analyze": "分析下载量",
       "modal_title": "下载量",
       "granularity": "周期",