Skip to content

Commit 9c57ce2

Browse files
graphierosgraphieros
committed
fix: move alt copy methods to utils
1 parent 7da1e34 commit 9c57ce2

3 files changed

Lines changed: 95 additions & 102 deletions

File tree

‎app/components/Package/TrendsChart.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import type {
1818
YearlyDataPoint,
1919
} from '~/types/chart'
2020
import { DATE_INPUT_MAX } from '~/utils/input'
21+
import { copyAltTextForTrendLineChart } from '~/utils/charts'
2122
2223
const props = withDefaults(
2324
defineProps<{
@@ -323,7 +324,6 @@ const {
323324
fetchPackageLikesEvolution,
324325
fetchRepoContributorsEvolution,
325326
fetchRepoRefsForPackages,
326-
copyAltTextForTrendLineChart,
327327
} = useCharts()
328328
329329
const repoRefsByPackage = shallowRef<Record<string, RepoRef | null>>({})
@@ -1474,6 +1474,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
14741474
granularity: displayedGranularity.value,
14751475
copy,
14761476
$t,
1477+
numberFormatter: compactNumberFormatter.value.format,
14771478
},
14781479
}),
14791480
},

‎app/composables/useCharts.ts‎

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,6 @@ import { parseRepoUrl } from '#shared/utils/git-providers'
1313
import type { PackageMetaResponse } from '#shared/types'
1414
import { encodePackageName } from '#shared/utils/npm'
1515
import { fetchNpmDownloadsRange } from '~/utils/npm/api'
16-
import type { AltCopyArgs } from 'vue-data-ui'
17-
import {
18-
computeLineChartAnalysis,
19-
type TrendLineConfig,
20-
type TrendLineDataset,
21-
} from '../utils/charts'
2216

2317
export type PackumentLikeForTime = {
2418
time?: Record<string, string>
@@ -411,8 +405,6 @@ export function getNpmPackageCreationDate(packument: PackumentLikeForTime): stri
411405
}
412406

413407
export function useCharts() {
414-
const compactNumberFormatter = useCompactNumberFormatter()
415-
416408
function resolveDateRange(
417409
evolutionOptions: EvolutionOptions,
418410
packageCreatedIso: string | null,
@@ -623,103 +615,11 @@ export function useCharts() {
623615
return next
624616
}
625617

626-
function createAltTextForTrendLineChart({
627-
dataset,
628-
config,
629-
}: AltCopyArgs<TrendLineDataset, TrendLineConfig>): string {
630-
if (!dataset) return ''
631-
632-
const analysis = dataset.lines.map(({ name, series }) => ({
633-
name,
634-
...computeLineChartAnalysis(series),
635-
dates: config.formattedDates,
636-
hasEstimation: config.hasEstimation,
637-
}))
638-
639-
const granularityKeyByGranularity: Record<string, string> = {
640-
daily: 'package.trends.granularity_dayly',
641-
weekly: 'package.trends.granularity_weekly',
642-
monthly: 'package.trends.granularity_monthly',
643-
yearly: 'package.trends.granularity_yearly',
644-
}
645-
646-
const granularityKey =
647-
granularityKeyByGranularity[config.granularity as unknown as string] ??
648-
'package.trends.granularity_day'
649-
650-
const granularity = String(config.$t(granularityKey)).toLocaleLowerCase()
651-
652-
const packages_analysis = analysis
653-
.map((pkg, i) => {
654-
const trendText = (() => {
655-
switch (pkg.interpretation.trend) {
656-
case 'none':
657-
return config.$t('package.trends.copy_alt.trend_none')
658-
case 'weak':
659-
return config.$t('package.trends.copy_alt.trend_weak')
660-
case 'strong':
661-
return config.$t('package.trends.copy_alt.trend_strong')
662-
case 'undefined':
663-
default:
664-
return config.$t('package.trends.copy_alt.trend_undefined')
665-
}
666-
})()
667-
668-
return config.$t('package.trends.copy_alt.analysis', {
669-
package_name: pkg.name,
670-
start_value: config.formattedDatasetValues[i]?.[0] ?? 0,
671-
end_value: config.formattedDatasetValues[i]?.at(-1) ?? 0,
672-
trend: trendText,
673-
downloads_slope: compactNumberFormatter.value.format(pkg.slope),
674-
growth_percentage: `${pkg.progressionPercent?.toFixed(1)}%`,
675-
})
676-
})
677-
.join(', ')
678-
679-
const isSinglePackage = analysis.length === 1
680-
681-
const estimation_notice = config.hasEstimation
682-
? ` ${
683-
isSinglePackage
684-
? config.$t('package.trends.copy_alt.estimation')
685-
: config.$t('package.trends.copy_alt.estimations')
686-
}`
687-
: ''
688-
689-
const compareText = `${config.$t('package.trends.copy_alt.compare', {
690-
packages: analysis.map(a => a.name).join(', '),
691-
})} `
692-
693-
const singlePackageText = `${config.$t('package.trends.copy_alt.single_package', {
694-
package: analysis?.[0]?.name ?? '',
695-
})} `
696-
697-
const generalAnalysis = config.$t('package.trends.copy_alt.general_description', {
698-
start_date: analysis?.[0]?.dates[0]?.text,
699-
end_date: analysis?.[0]?.dates.at(-1)?.text,
700-
granularity,
701-
packages_analysis,
702-
watermark: config.$t('package.trends.copy_alt.watermark'),
703-
estimation_notice,
704-
})
705-
706-
return (isSinglePackage ? singlePackageText : compareText) + generalAnalysis
707-
}
708-
709-
async function copyAltTextForTrendLineChart({
710-
dataset,
711-
config,
712-
}: AltCopyArgs<TrendLineDataset, TrendLineConfig>) {
713-
const altText = createAltTextForTrendLineChart({ dataset, config })
714-
await config.copy(altText)
715-
}
716-
717618
return {
718619
fetchPackageDownloadEvolution,
719620
fetchPackageLikesEvolution,
720621
fetchRepoContributorsEvolution,
721622
fetchRepoRefsForPackages,
722623
getNpmPackageCreationDate,
723-
copyAltTextForTrendLineChart,
724624
}
725625
}

‎app/utils/charts.ts‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { VueUiXyConfig, VueUiXyDatasetLineItem } from 'vue-data-ui'
1+
import type { AltCopyArgs, VueUiXyConfig, VueUiXyDatasetLineItem } from 'vue-data-ui'
22
import type { ChartTimeGranularity } from '~/types/chart'
33

44
export function sum(numbers: number[]): number {
@@ -488,4 +488,96 @@ export type TrendLineConfig = VueUiXyConfig & {
488488
granularity: ChartTimeGranularity // from the TrendsChart component
489489
copy: (text: string) => Promise<void>
490490
$t: TrendTranslateFunction
491+
numberFormatter: (value: number) => string
492+
}
493+
494+
export function createAltTextForTrendLineChart({
495+
dataset,
496+
config,
497+
}: AltCopyArgs<TrendLineDataset, TrendLineConfig>): string {
498+
if (!dataset) return ''
499+
500+
const analysis = dataset.lines.map(({ name, series }) => ({
501+
name,
502+
...computeLineChartAnalysis(series),
503+
dates: config.formattedDates,
504+
hasEstimation: config.hasEstimation,
505+
}))
506+
507+
const granularityKeyByGranularity: Record<string, string> = {
508+
daily: 'package.trends.granularity_dayly',
509+
weekly: 'package.trends.granularity_weekly',
510+
monthly: 'package.trends.granularity_monthly',
511+
yearly: 'package.trends.granularity_yearly',
512+
}
513+
514+
const granularityKey =
515+
granularityKeyByGranularity[config.granularity as unknown as string] ??
516+
'package.trends.granularity_weekly'
517+
518+
const granularity = String(config.$t(granularityKey)).toLocaleLowerCase()
519+
520+
const packages_analysis = analysis
521+
.map((pkg, i) => {
522+
const trendText = (() => {
523+
switch (pkg.interpretation.trend) {
524+
case 'none':
525+
return config.$t('package.trends.copy_alt.trend_none')
526+
case 'weak':
527+
return config.$t('package.trends.copy_alt.trend_weak')
528+
case 'strong':
529+
return config.$t('package.trends.copy_alt.trend_strong')
530+
case 'undefined':
531+
default:
532+
return config.$t('package.trends.copy_alt.trend_undefined')
533+
}
534+
})()
535+
536+
return config.$t('package.trends.copy_alt.analysis', {
537+
package_name: pkg.name,
538+
start_value: config.formattedDatasetValues[i]?.[0] ?? 0,
539+
end_value: config.formattedDatasetValues[i]?.at(-1) ?? 0,
540+
trend: trendText,
541+
downloads_slope: config.numberFormatter(pkg.slope),
542+
growth_percentage: `${pkg.progressionPercent?.toFixed(1)}%`,
543+
})
544+
})
545+
.join(', ')
546+
547+
const isSinglePackage = analysis.length === 1
548+
549+
const estimation_notice = config.hasEstimation
550+
? ` ${
551+
isSinglePackage
552+
? config.$t('package.trends.copy_alt.estimation')
553+
: config.$t('package.trends.copy_alt.estimations')
554+
}`
555+
: ''
556+
557+
const compareText = `${config.$t('package.trends.copy_alt.compare', {
558+
packages: analysis.map(a => a.name).join(', '),
559+
})} `
560+
561+
const singlePackageText = `${config.$t('package.trends.copy_alt.single_package', {
562+
package: analysis?.[0]?.name ?? '',
563+
})} `
564+
565+
const generalAnalysis = config.$t('package.trends.copy_alt.general_description', {
566+
start_date: analysis?.[0]?.dates[0]?.text,
567+
end_date: analysis?.[0]?.dates.at(-1)?.text,
568+
granularity,
569+
packages_analysis,
570+
watermark: config.$t('package.trends.copy_alt.watermark'),
571+
estimation_notice,
572+
})
573+
574+
return (isSinglePackage ? singlePackageText : compareText) + generalAnalysis
575+
}
576+
577+
export async function copyAltTextForTrendLineChart({
578+
dataset,
579+
config,
580+
}: AltCopyArgs<TrendLineDataset, TrendLineConfig>) {
581+
const altText = createAltTextForTrendLineChart({ dataset, config })
582+
await config.copy(altText)
491583
}

0 commit comments

Comments
 (0)