fix: pass translate function from the component

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -1473,6 +1473,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
                   supportsEstimation.value && !isEndDateOnPeriodEnd.value && !isZoomed.value,
                 granularity: displayedGranularity.value,
                 copy,
+                $t,
               },
             }),
         },

app/composables/useCharts.ts

@@ -627,7 +627,6 @@ export function useCharts() {
     dataset,
     config,
   }: AltCopyArgs<TrendLineDataset, TrendLineConfig>): string {
-    const { t } = useI18n()
     if (!dataset) return ''
 
     const analysis = dataset.lines.map(({ name, series }) => ({
@@ -637,15 +636,17 @@ export function useCharts() {
       hasEstimation: config.hasEstimation,
     }))
 
-    const granularity = t(`package.trends.granularity_${config.granularity}`).toLocaleLowerCase()
+    const granularity = config
+      .$t(`package.trends.granularity_${config.granularity}`)
+      .toLocaleLowerCase()
 
     const packages_analysis = analysis
       .map((pkg, i) =>
-        t(`package.trends.copy_alt.analysis`, {
+        config.$t(`package.trends.copy_alt.analysis`, {
           package_name: pkg.name,
           start_value: config.formattedDatasetValues[i]?.[0] ?? 0,
           end_value: config.formattedDatasetValues[i]?.at(-1) ?? 0,
-          trend: t(`package.trends.copy_alt.trend_${pkg.interpretation.trend}`),
+          trend: config.$t(`package.trends.copy_alt.trend_${pkg.interpretation.trend}`),
           downloads_slope: compactNumberFormatter.value.format(pkg.slope),
           growth_percentage: `${pkg.progressionPercent?.toFixed(1)}%`,
         }),
@@ -655,18 +656,18 @@ export function useCharts() {
     const isSinglePackage = analysis.length === 1
 
     const estimation_notice = config.hasEstimation
-      ? ` ${isSinglePackage ? t('package.trends.copy_alt.estimation') : t('package.trends.copy_alt.estimations')}`
+      ? ` ${isSinglePackage ? config.$t('package.trends.copy_alt.estimation') : config.$t('package.trends.copy_alt.estimations')}`
       : ''
 
     // Packages comparison
-    const compareText = `${t('package.trends.copy_alt.compare', { packages: analysis.map(a => a.name).join(', ') })} `
-    const singlePackageText = `${t('package.trends.copy_alt.single_package', { package: analysis?.[0]?.name ?? '' })} `
-    const generalAnalysis = t(`package.trends.copy_alt.general_description`, {
+    const compareText = `${config.$t('package.trends.copy_alt.compare', { packages: analysis.map(a => a.name).join(', ') })} `
+    const singlePackageText = `${config.$t('package.trends.copy_alt.single_package', { package: analysis?.[0]?.name ?? '' })} `
+    const generalAnalysis = config.$t(`package.trends.copy_alt.general_description`, {
       start_date: analysis?.[0]?.dates[0]?.text,
       end_date: analysis?.[0]?.dates.at(-1)?.text,
       granularity,
       packages_analysis,
-      watermark: t('package.trends.copy_alt.watermark'),
+      watermark: config.$t('package.trends.copy_alt.watermark'),
       estimation_notice,
     })
 

app/utils/charts.ts

@@ -487,4 +487,5 @@ export type TrendLineConfig = VueUiXyConfig & {
   formattedDatasetValues: Array<string[]>
   granularity: ChartTimeGranularity // from the TrendsChart component
   copy: (text: string) => Promise<void>
+  $t: TrendTranslateFunction
 }