Skip to content

Commit 9f5aa2e

Browse files
jycouetjycouet
committed
tooltip info
1 parent f5303d6 commit 9f5aa2e

6 files changed

Lines changed: 117 additions & 15 deletions

File tree

‎app/components/Package/TrendsChart.vue‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
} from '~/types/chart'
2020
import { DATE_INPUT_MAX } from '~/utils/input'
2121
import { applyDataCorrection } from '~/utils/chart-data-correction'
22-
import { applyBlocklistCorrection } from '~/utils/download-anomalies'
22+
import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
2323
import { copyAltTextForTrendLineChart } from '~/utils/charts'
2424
2525
const props = withDefaults(
@@ -1633,6 +1633,17 @@ const chartConfig = computed<VueUiXyConfig>(() => {
16331633
const isDownloadsMetric = computed(() => selectedMetric.value === 'downloads')
16341634
const showCorrectionControls = shallowRef(false)
16351635
1636+
const packageAnomalies = computed(() => getAnomaliesForPackages(effectivePackageNames.value))
1637+
const hasAnomalies = computed(() => packageAnomalies.value.length > 0)
1638+
1639+
function formatAnomalyDate(dateStr: string) {
1640+
return new Date(dateStr).toLocaleDateString(locale.value, {
1641+
year: 'numeric',
1642+
month: 'short',
1643+
day: 'numeric',
1644+
})
1645+
}
1646+
16361647
// Trigger data loading when the metric is switched
16371648
watch(selectedMetric, value => {
16381649
if (!isMounted.value) return
@@ -1764,16 +1775,61 @@ watch(selectedMetric, value => {
17641775
class="accent-[var(--accent-color,var(--fg-subtle))]"
17651776
/>
17661777
</label>
1767-
<label
1768-
class="flex items-center gap-1.5 text-2xs font-mono text-fg-subtle tracking-wide uppercase cursor-pointer shrink-0 -mb-0.5"
1769-
>
1770-
<input
1771-
v-model="settings.chartFilter.anomaliesFixed"
1772-
type="checkbox"
1773-
class="accent-[var(--accent-color,var(--fg-subtle))]"
1774-
/>
1775-
{{ $t('package.trends.anomalies_fixed') }}
1776-
</label>
1778+
<div class="flex flex-col gap-1 shrink-0">
1779+
<span
1780+
class="text-2xs font-mono text-fg-subtle tracking-wide uppercase flex items-center justify-between"
1781+
>
1782+
{{ $t('package.trends.known_anomalies') }}
1783+
<TooltipApp interactive :to="inModal ? '#chart-modal' : undefined">
1784+
<span class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help" tabindex="0" />
1785+
<template #content>
1786+
<div class="flex flex-col gap-3">
1787+
<p class="text-xs text-fg-muted">
1788+
{{ $t('package.trends.known_anomalies_description') }}
1789+
</p>
1790+
<div v-if="hasAnomalies">
1791+
<p class="text-xs text-fg-subtle font-medium">
1792+
{{ $t('package.trends.known_anomalies_ranges') }}
1793+
</p>
1794+
<ul class="text-xs text-fg-subtle list-disc list-inside">
1795+
<li v-for="a in packageAnomalies" :key="`${a.packageName}-${a.start}`">
1796+
{{
1797+
$t('package.trends.known_anomalies_range', {
1798+
start: formatAnomalyDate(a.start),
1799+
end: formatAnomalyDate(a.end),
1800+
})
1801+
}}
1802+
</li>
1803+
</ul>
1804+
</div>
1805+
<p v-else class="text-xs text-fg-muted">
1806+
{{ $t('package.trends.known_anomalies_none') }}
1807+
</p>
1808+
<div class="flex justify-end">
1809+
<LinkBase
1810+
to="https://github.com/npmx-dev/npmx.dev/edit/main/app/utils/download-anomalies.data.ts"
1811+
class="text-xs text-accent"
1812+
>
1813+
{{ $t('package.trends.known_anomalies_contribute') }}
1814+
</LinkBase>
1815+
</div>
1816+
</div>
1817+
</template>
1818+
</TooltipApp>
1819+
</span>
1820+
<label
1821+
class="flex items-center gap-1.5 text-2xs font-mono text-fg-subtle cursor-pointer"
1822+
:class="{ 'opacity-50 pointer-events-none': !hasAnomalies }"
1823+
>
1824+
<input
1825+
v-model="settings.chartFilter.anomaliesFixed"
1826+
type="checkbox"
1827+
:disabled="!hasAnomalies"
1828+
class="accent-[var(--accent-color,var(--fg-subtle))]"
1829+
/>
1830+
{{ $t('package.trends.apply_correction') }}
1831+
</label>
1832+
</div>
17771833
</div>
17781834
</div>
17791835

‎app/utils/download-anomalies.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ function scaleWeeklyValue(weeklyValue: number, granularity: ChartTimeGranularity
6565
}
6666
}
6767

68+
export function getAnomaliesForPackages(
69+
packageNames: string[],
70+
): { packageName: string; start: string; end: string }[] {
71+
return DOWNLOAD_ANOMALIES.filter(a => packageNames.includes(a.packageName)).map(a => ({
72+
packageName: a.packageName,
73+
start: a.start.date,
74+
end: a.end.date,
75+
}))
76+
}
77+
6878
export function applyBlocklistCorrection(opts: {
6979
data: EvolutionData
7080
packageName: string

‎i18n/locales/en.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,13 @@
389389
"data_correction": "Data correction",
390390
"average_window": "Average window",
391391
"smoothing": "Smoothing",
392-
"anomalies_fixed": "Anomalies fixed",
392+
"known_anomalies": "Known anomalies",
393+
"known_anomalies_description": "Interpolates over known download spikes caused by bots or CI issues.",
394+
"known_anomalies_ranges": "Anomaly ranges",
395+
"known_anomalies_range": "From {start} to {end}",
396+
"known_anomalies_none": "No known anomalies for this package.",
397+
"known_anomalies_contribute": "Contribute anomaly data",
398+
"apply_correction": "Apply correction",
393399
"copy_alt": {
394400
"trend_none": "mostly flat",
395401
"trend_strong": "strong",

‎i18n/schema.json‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1171,7 +1171,25 @@
11711171
"smoothing": {
11721172
"type": "string"
11731173
},
1174-
"anomalies_fixed": {
1174+
"known_anomalies": {
1175+
"type": "string"
1176+
},
1177+
"known_anomalies_description": {
1178+
"type": "string"
1179+
},
1180+
"known_anomalies_ranges": {
1181+
"type": "string"
1182+
},
1183+
"known_anomalies_range": {
1184+
"type": "string"
1185+
},
1186+
"known_anomalies_none": {
1187+
"type": "string"
1188+
},
1189+
"known_anomalies_contribute": {
1190+
"type": "string"
1191+
},
1192+
"apply_correction": {
11751193
"type": "string"
11761194
},
11771195
"copy_alt": {

‎lunaria/files/en-GB.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,13 @@
388388
"data_correction": "Data correction",
389389
"average_window": "Average window",
390390
"smoothing": "Smoothing",
391-
"anomalies_fixed": "Anomalies fixed",
391+
"known_anomalies": "Known anomalies",
392+
"known_anomalies_description": "Interpolates over known download spikes caused by bots or CI issues.",
393+
"known_anomalies_ranges": "Anomaly ranges",
394+
"known_anomalies_range": "From {start} to {end}",
395+
"known_anomalies_none": "No known anomalies for this package.",
396+
"known_anomalies_contribute": "Contribute anomaly data",
397+
"apply_correction": "Apply correction",
392398
"copy_alt": {
393399
"trend_none": "mostly flat",
394400
"trend_strong": "strong",

‎lunaria/files/en-US.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,13 @@
388388
"data_correction": "Data correction",
389389
"average_window": "Average window",
390390
"smoothing": "Smoothing",
391-
"anomalies_fixed": "Anomalies fixed",
391+
"known_anomalies": "Known anomalies",
392+
"known_anomalies_description": "Interpolates over known download spikes caused by bots or CI issues.",
393+
"known_anomalies_ranges": "Anomaly ranges",
394+
"known_anomalies_range": "From {start} to {end}",
395+
"known_anomalies_none": "No known anomalies for this package.",
396+
"known_anomalies_contribute": "Contribute anomaly data",
397+
"apply_correction": "Apply correction",
392398
"copy_alt": {
393399
"trend_none": "mostly flat",
394400
"trend_strong": "strong",

0 commit comments

Comments
 (0)