feat: add show low usage versions

Author: vinnymac

app/components/Package/VersionDistribution.vue

@@ -68,8 +68,15 @@ const { width } = useElementSize(rootEl)
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-const { groupingMode, hideSmallVersions, pending, error, chartDataset, hasData } =
-  useVersionDistribution(() => props.packageName)
+const {
+  groupingMode,
+  hideSmallVersions,
+  showLowUsageVersions,
+  pending,
+  error,
+  chartDataset,
+  hasData,
+} = useVersionDistribution(() => props.packageName)
 
 const compactNumberFormatter = useCompactNumberFormatter()
 
@@ -296,6 +303,7 @@ const endDate = computed(() => {
             :text="$t('package.versions.date_range_tooltip')"
             position="bottom"
             :teleportTo="inModal ? '#chart-modal' : undefined"
+            :offset="8"
             class="w-full"
           >
             <div class="flex flex-col gap-1 w-full">
@@ -326,6 +334,7 @@ const endDate = computed(() => {
             :text="$t('package.versions.date_range_tooltip')"
             position="bottom"
             :teleportTo="inModal ? '#chart-modal' : undefined"
+            :offset="8"
             class="w-full"
           >
             <div class="flex flex-col gap-1 w-full">
@@ -354,15 +363,29 @@ const endDate = computed(() => {
         </div>
       </div>
 
-      <SettingsToggle
-        v-model="hideSmallVersions"
-        :label="$t('package.versions.hide_old_versions')"
-        :tooltip="$t('package.versions.hide_old_versions_tooltip')"
-        tooltip-position="bottom"
-        :tooltip-teleport-to="inModal ? '#chart-modal' : undefined"
-        justify="start"
-        :class="pending ? 'opacity-50 pointer-events-none' : ''"
-      />
+      <div class="flex flex-col gap-4 w-full max-w-1/2">
+        <SettingsToggle
+          v-model="hideSmallVersions"
+          :label="$t('package.versions.hide_old_versions')"
+          :tooltip="$t('package.versions.hide_old_versions_tooltip')"
+          tooltip-position="bottom"
+          :tooltip-teleport-to="inModal ? '#chart-modal' : undefined"
+          :tooltip-offset="8"
+          justify="between"
+          :class="pending ? 'opacity-50 pointer-events-none' : ''"
+        />
+
+        <SettingsToggle
+          v-model="showLowUsageVersions"
+          :label="$t('package.versions.show_low_usage')"
+          :tooltip="$t('package.versions.show_low_usage_tooltip')"
+          tooltip-position="bottom"
+          :tooltip-teleport-to="inModal ? '#chart-modal' : undefined"
+          :tooltip-offset="8"
+          justify="between"
+          :class="pending ? 'opacity-50 pointer-events-none' : ''"
+        />
+      </div>
     </div>
 
     <h2 id="version-distribution-title" class="sr-only">

app/components/Settings/Toggle.client.vue

@@ -10,6 +10,7 @@ withDefaults(
     tooltip?: string
     tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
     tooltipTeleportTo?: string
+    tooltipOffset?: number
   }>(),
   {
     justify: 'between',
@@ -35,6 +36,7 @@ const checked = defineModel<boolean>({
       :text="tooltip"
       :position="tooltipPosition ?? 'top'"
       :teleportTo="tooltipTeleportTo"
+      :offset="tooltipOffset"
     >
       <span class="text-sm text-fg font-medium text-start">
         {{ label }}

app/components/Tooltip/App.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
   interactive?: boolean
   /** Teleport target selector (defaults to 'body') */
   teleportTo?: string
+  /** Offset distance in pixels (default: 4) */
+  offset?: number
 }>()
 
 const isVisible = shallowRef(false)
@@ -50,6 +52,7 @@ const tooltipAttrs = computed(() => {
     :position
     :interactive
     :teleportTo
+    :offset
     :tooltip-attr="tooltipAttrs"
     @mouseenter="show"
     @mouseleave="hide"

app/components/Tooltip/Base.vue

@@ -3,20 +3,27 @@ import type { HTMLAttributes } from 'vue'
 import type { Placement } from '@floating-ui/vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 
-const props = defineProps<{
-  /** Tooltip text (optional when using content slot) */
-  text?: string
-  /** Position: 'top' | 'bottom' | 'left' | 'right' */
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  /** is tooltip visible */
-  isVisible: boolean
-  /** Allow pointer events on tooltip (for interactive content like links) */
-  interactive?: boolean
-  /** attributes for tooltip element */
-  tooltipAttr?: HTMLAttributes
-  /** Teleport target selector (defaults to 'body') */
-  teleportTo?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    /** Tooltip text (optional when using content slot) */
+    text?: string
+    /** Position: 'top' | 'bottom' | 'left' | 'right' */
+    position?: 'top' | 'bottom' | 'left' | 'right'
+    /** is tooltip visible */
+    isVisible: boolean
+    /** Allow pointer events on tooltip (for interactive content like links) */
+    interactive?: boolean
+    /** attributes for tooltip element */
+    tooltipAttr?: HTMLAttributes
+    /** Teleport target selector (defaults to 'body') */
+    teleportTo?: string
+    /** Offset distance in pixels (default: 4) */
+    offset?: number
+  }>(),
+  {
+    offset: 4,
+  },
+)
 
 const triggerRef = useTemplateRef('triggerRef')
 const tooltipRef = useTemplateRef('tooltipRef')
@@ -26,7 +33,7 @@ const placement = computed<Placement>(() => props.position || 'bottom')
 const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
   placement,
   whileElementsMounted: autoUpdate,
-  middleware: [offset(4), flip(), shift({ padding: 8 })],
+  middleware: [offset(props.offset), flip(), shift({ padding: 8 })],
 })
 </script>
 

app/composables/useVersionDistribution.ts

@@ -23,6 +23,7 @@ interface ChartDataItem {
 export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
   const groupingMode = ref<VersionGroupingMode>('major')
   const hideSmallVersions = ref(false)
+  const showLowUsageVersions = ref(false)
   const pending = ref(false)
   const error = ref<Error | null>(null)
   const data = ref<VersionDistributionResponse | null>(null)
@@ -48,6 +49,7 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
           query: {
             mode,
             filterOldVersions: hideSmallVersions.value ? 'true' : 'false',
+            filterThreshold: showLowUsageVersions.value ? '0' : '1',
           },
         },
       )
@@ -132,6 +134,10 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
     fetchDistribution()
   })
 
+  watch(showLowUsageVersions, () => {
+    fetchDistribution()
+  })
+
   // Refetch when grouping mode changes - immediate to load initial data
   watch(
     groupingMode,
@@ -154,6 +160,7 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
     // State
     groupingMode,
     hideSmallVersions,
+    showLowUsageVersions,
     pending,
     error,
     // Computed

i18n/locales/en.json

@@ -283,6 +283,8 @@
       "grouping_minor": "Minor",
       "hide_old_versions": "Hide old versions",
       "hide_old_versions_tooltip": "Hide versions older than 1 year",
+      "show_low_usage": "Show low usage versions",
+      "show_low_usage_tooltip": "Include version groups with less than 1% of total downloads",
       "date_range_tooltip": "Last week of version distributions only"
     },
     "dependencies": {

lunaria/files/en-GB.json

@@ -283,6 +283,8 @@
       "grouping_minor": "Minor",
       "hide_old_versions": "Hide old versions",
       "hide_old_versions_tooltip": "Hide versions older than 1 year",
+      "show_low_usage": "Show low usage versions",
+      "show_low_usage_tooltip": "Include version groups with less than 1% of total downloads",
       "date_range_tooltip": "Last week of version distributions only"
     },
     "dependencies": {

lunaria/files/en-US.json

@@ -283,6 +283,8 @@
       "grouping_minor": "Minor",
       "hide_old_versions": "Hide old versions",
       "hide_old_versions_tooltip": "Hide versions older than 1 year",
+      "show_low_usage": "Show low usage versions",
+      "show_low_usage_tooltip": "Include version groups with less than 1% of total downloads",
       "date_range_tooltip": "Last week of version distributions only"
     },
     "dependencies": {