Add tweakable Hampel filter sliders to chart UI

Expose halfWindow and threshold as sliders on a second row in the
data correction panel so users can tune the filter interactively.

Author: matthewp

app/components/Package/TrendsChart.vue

@@ -977,7 +977,10 @@ const effectiveDataSingle = computed<EvolutionData>(() => {
 
   if (isDownloadsMetric.value && data.length) {
     if (settings.value.chartFilter.anomaliesFixed) {
-      data = applyHampelCorrection(data)
+      data = applyHampelCorrection(data, {
+        halfWindow: settings.value.chartFilter.hampelWindow,
+        threshold: settings.value.chartFilter.hampelThreshold,
+      })
     }
   }
 
@@ -1021,7 +1024,10 @@ const chartData = computed<{
     let data = state.evolutionsByPackage[pkg] ?? []
     if (isDownloadsMetric.value && data.length) {
       if (settings.value.chartFilter.anomaliesFixed) {
-        data = applyHampelCorrection(data)
+        data = applyHampelCorrection(data, {
+          halfWindow: settings.value.chartFilter.hampelWindow,
+          threshold: settings.value.chartFilter.hampelThreshold,
+        })
       }
     }
     const points = extractSeriesPoints(granularity, data)
@@ -1698,6 +1704,36 @@ watch(selectedMetric, value => {
               class="accent-[var(--accent-color,var(--fg-subtle))]"
             />
           </label>
+        </div>
+        <div v-if="showCorrectionControls" class="grid grid-cols-2 sm:flex items-end gap-3">
+          <label class="flex flex-col gap-1 flex-1">
+            <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
+              {{ $t('package.trends.hampel_window') }}
+              <span class="text-fg-muted">({{ settings.chartFilter.hampelWindow }})</span>
+            </span>
+            <input
+              v-model.number="settings.chartFilter.hampelWindow"
+              type="range"
+              min="1"
+              max="10"
+              step="1"
+              class="accent-[var(--accent-color,var(--fg-subtle))]"
+            />
+          </label>
+          <label class="flex flex-col gap-1 flex-1">
+            <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
+              {{ $t('package.trends.hampel_threshold') }}
+              <span class="text-fg-muted">({{ settings.chartFilter.hampelThreshold }})</span>
+            </span>
+            <input
+              v-model.number="settings.chartFilter.hampelThreshold"
+              type="range"
+              min="1"
+              max="10"
+              step="0.5"
+              class="accent-[var(--accent-color,var(--fg-subtle))]"
+            />
+          </label>
           <div class="flex flex-col gap-1 shrink-0">
             <span
               class="text-2xs font-mono text-fg-subtle tracking-wide uppercase flex items-center justify-between"

app/components/Package/WeeklyDownloadStats.vue

@@ -186,7 +186,10 @@ const correctedDownloads = computed<WeeklyDataPoint[]>(() => {
   let data = weeklyDownloads.value as WeeklyDataPoint[]
   if (!data.length) return data
   if (settings.value.chartFilter.anomaliesFixed) {
-    data = applyHampelCorrection(data) as WeeklyDataPoint[]
+    data = applyHampelCorrection(data, {
+      halfWindow: settings.value.chartFilter.hampelWindow,
+      threshold: settings.value.chartFilter.hampelThreshold,
+    }) as WeeklyDataPoint[]
   }
   data = applyDataCorrection(data, settings.value.chartFilter) as WeeklyDataPoint[]
   return data

app/composables/useSettings.ts

@@ -45,6 +45,8 @@ export interface AppSettings {
     averageWindow: number
     smoothingTau: number
     anomaliesFixed: boolean
+    hampelWindow: number
+    hampelThreshold: number
     predictionPoints: number
   }
 }
@@ -69,6 +71,8 @@ const DEFAULT_SETTINGS: AppSettings = {
     averageWindow: 0,
     smoothingTau: 1,
     anomaliesFixed: true,
+    hampelWindow: 3,
+    hampelThreshold: 3,
     predictionPoints: 4,
   },
 }

app/utils/download-anomalies.ts

@@ -31,12 +31,12 @@ export function applyHampelCorrection(
 ): EvolutionData {
   // halfWindow controls how many neighbors on each side to consider.
   // A window of 3 means we look at 7 points total (3 left + current + 3 right).
-  const halfWindow = opts?.halfWindow ?? DEFAULT_HALF_WINDOW
+  const halfWindow = opts?.halfWindow || DEFAULT_HALF_WINDOW
 
   // threshold controls sensitivity. A value of 3 means a point must deviate
   // more than 3 scaled MADs from the local median to be flagged.
   // Higher = less sensitive, lower = more aggressive filtering.
-  const threshold = opts?.threshold ?? DEFAULT_THRESHOLD
+  const threshold = opts?.threshold || DEFAULT_THRESHOLD
 
   // Not enough data to form a full window — return as-is.
   if (data.length < halfWindow * 2 + 1) return data

i18n/locales/en.json

@@ -470,6 +470,8 @@
       "average_window": "Average window",
       "smoothing": "Smoothing",
       "prediction": "Prediction",
+      "hampel_window": "Hampel window",
+      "hampel_threshold": "Hampel threshold",
       "known_anomalies": "Known anomalies",
       "known_anomalies_description": "Interpolates over known download spikes caused by bots or CI issues.",
       "apply_correction": "Apply correction",

i18n/schema.json

@@ -1414,6 +1414,12 @@
             "prediction": {
               "type": "string"
             },
+            "hampel_window": {
+              "type": "string"
+            },
+            "hampel_threshold": {
+              "type": "string"
+            },
             "known_anomalies": {
               "type": "string"
             },