refactor: consistently use "facet" terminology

Author: serhalp

app/components/compare/ComparisonGrid.vue

@@ -28,7 +28,7 @@ defineProps<{
         </div>
       </div>
 
-      <!-- Metric rows -->
+      <!-- Facet rows -->
       <slot />
     </div>
   </div>

app/components/compare/MetricRow.vue app/components/compare/FacetRow.vueapp/components/compare/MetricRow.vue renamed to app/components/compare/FacetRow.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { MetricValue, DiffResult } from '#shared/types'
+import type { FacetValue, FacetDiffResult } from '#shared/types'
 
 const props = defineProps<{
-  /** Metric label */
+  /** Facet label */
   label: string
-  /** Description/tooltip for the metric */
+  /** Description/tooltip for the facet */
   description?: string
   /** Values for each column */
-  values: (MetricValue | null | undefined)[]
+  values: (FacetValue | null | undefined)[]
   /** Diff results between adjacent columns (for release comparison) */
-  diffs?: (DiffResult | null | undefined)[]
+  diffs?: (FacetDiffResult | null | undefined)[]
   /** Whether this row is loading */
   loading?: boolean
   /** Whether to show the proportional bar (defaults to true for numeric values) */
@@ -33,12 +33,12 @@ const maxValue = computed(() => {
 })
 
 // Calculate bar width percentage for a value
-function getBarWidth(value: MetricValue | null | undefined): number {
+function getBarWidth(value: FacetValue | null | undefined): number {
   if (!isNumeric.value || !maxValue.value || !value || typeof value.raw !== 'number') return 0
   return (value.raw / maxValue.value) * 100
 }
 
-function getStatusClass(status?: MetricValue['status']): string {
+function getStatusClass(status?: FacetValue['status']): string {
   switch (status) {
     case 'good':
       return 'text-emerald-400'
@@ -53,14 +53,14 @@ function getStatusClass(status?: MetricValue['status']): string {
   }
 }
 
-function getDiffClass(diff?: DiffResult | null): string {
+function getDiffClass(diff?: FacetDiffResult | null): string {
   if (!diff) return ''
   if (diff.favorable === true) return 'text-emerald-400'
   if (diff.favorable === false) return 'text-red-400'
   return 'text-fg-muted'
 }
 
-function getDiffIcon(diff?: DiffResult | null): string {
+function getDiffIcon(diff?: FacetDiffResult | null): string {
   if (!diff) return ''
   switch (diff.direction) {
     case 'increase':

app/composables/usePackageComparison.ts

@@ -1,4 +1,4 @@
-import type { MetricValue, ComparisonFacet, ComparisonPackage } from '#shared/types'
+import type { FacetValue, ComparisonFacet, ComparisonPackage } from '#shared/types'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 
 export interface PackageComparisonData {
@@ -176,13 +176,13 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
     )
   }
 
-  // Compute metrics for each facet
-  function getMetricValues(facet: ComparisonFacet): (MetricValue | null)[] {
+  // Compute values for each facet
+  function getFacetValues(facet: ComparisonFacet): (FacetValue | null)[] {
     if (!packagesData.value || packagesData.value.length === 0) return []
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
-      return computeMetricValue(facet, pkg)
+      return computeFacetValue(facet, pkg)
     })
   }
 
@@ -197,7 +197,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
     packagesData: readonly(packagesData),
     status: readonly(status),
     error: readonly(error),
-    getMetricValues,
+    getFacetValues,
     isFacetLoading,
   }
 }
@@ -209,10 +209,7 @@ function encodePackageName(name: string): string {
   return encodeURIComponent(name)
 }
 
-function computeMetricValue(
-  facet: ComparisonFacet,
-  data: PackageComparisonData,
-): MetricValue | null {
+function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData): FacetValue | null {
   switch (facet) {
     case 'downloads':
       if (data.downloads === undefined) return null

app/pages/compare.vue

@@ -29,7 +29,7 @@ const { selectedFacets, selectAll, deselectAll, isAllSelected, isNoneSelected }
   useFacetSelection()
 
 // Fetch comparison data
-const { packagesData, status, getMetricValues, isFacetLoading } = usePackageComparison(packages)
+const { packagesData, status, getFacetValues, isFacetLoading } = usePackageComparison(packages)
 
 // Check if we have enough packages to compare
 const canCompare = computed(() => packages.value.length >= 2)
@@ -116,12 +116,12 @@ useSeoMeta({
 
       <div v-else-if="packagesData && packagesData.length > 0">
         <CompareComparisonGrid :columns="packages.length" :headers="gridHeaders">
-          <CompareMetricRow
+          <CompareFacetRow
             v-for="facet in selectedFacets"
             :key="facet"
             :label="FACET_INFO[facet].label"
             :description="FACET_INFO[facet].description"
-            :values="getMetricValues(facet)"
+            :values="getFacetValues(facet)"
             :loading="isFacetLoading(facet)"
             :bar="facet !== 'lastUpdated'"
           />

shared/types/comparison.ts

@@ -2,7 +2,7 @@
  * Comparison feature types
  */
 
-/** Available comparison facets/metrics */
+/** Available comparison facets */
 export type ComparisonFacet =
   | 'downloads'
   | 'packageSize'
@@ -117,8 +117,8 @@ export const FACETS_BY_CATEGORY: Record<FacetInfo['category'], ComparisonFacet[]
 /** Default facets - all non-comingSoon facets */
 export const DEFAULT_FACETS: ComparisonFacet[] = ALL_FACETS.filter(f => !FACET_INFO[f].comingSoon)
 
-/** Metric value that can be compared */
-export interface MetricValue<T = unknown> {
+/** Facet value that can be compared */
+export interface FacetValue<T = unknown> {
   /** Raw value for comparison logic */
   raw: T
   /** Formatted display string (or ISO date string if type is 'date') */
@@ -129,8 +129,8 @@ export interface MetricValue<T = unknown> {
   type?: 'date'
 }
 
-/** Result of comparing two metric values */
-export interface DiffResult<_T = unknown> {
+/** Result of comparing two facet values */
+export interface FacetDiffResult<_T = unknown> {
   /** Absolute difference (for numeric values) */
   absoluteDiff?: number
   /** Percentage difference (for numeric values) */
@@ -139,7 +139,7 @@ export interface DiffResult<_T = unknown> {
   display: string
   /** Direction of change */
   direction: 'increase' | 'decrease' | 'same' | 'changed'
-  /** Whether the change is favorable (depends on metric semantics) */
+  /** Whether the change is favorable (depends on facet semantics) */
   favorable?: boolean
 }
 

test/nuxt/components.spec.ts

@@ -97,10 +97,8 @@ import PackageDeprecatedTree from '~/components/PackageDeprecatedTree.vue'
 import DependencyPathPopup from '~/components/DependencyPathPopup.vue'
 import CompareFacetSelector from '~/components/compare/FacetSelector.vue'
 import ComparePackageSelector from '~/components/compare/PackageSelector.vue'
-import CompareMetricRow from '~/components/compare/MetricRow.vue'
+import CompareFacetRow from '~/components/compare/FacetRow.vue'
 import CompareComparisonGrid from '~/components/compare/ComparisonGrid.vue'
-import CompareVersionPicker from '~/components/compare/VersionPicker.vue'
-import CompareComingSoonPlaceholder from '~/components/compare/ComingSoonPlaceholder.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -1335,9 +1333,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('CompareMetricRow', () => {
+  describe('CompareFacetRow', () => {
     it('should have no accessibility violations with basic values', async () => {
-      const component = await mountSuspended(CompareMetricRow, {
+      const component = await mountSuspended(CompareFacetRow, {
         props: {
           label: 'Downloads',
           description: 'Weekly download count',
@@ -1352,7 +1350,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations with diffs', async () => {
-      const component = await mountSuspended(CompareMetricRow, {
+      const component = await mountSuspended(CompareFacetRow, {
         props: {
           label: 'Package Size',
           description: 'Size of the package',
@@ -1368,7 +1366,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when loading', async () => {
-      const component = await mountSuspended(CompareMetricRow, {
+      const component = await mountSuspended(CompareFacetRow, {
         props: {
           label: 'Install Size',
           description: 'Total install size',
@@ -1410,56 +1408,4 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
-
-  describe('CompareVersionPicker', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(CompareVersionPicker, {
-        props: {
-          packageName: 'vue',
-          modelValue: '3.5.0',
-          label: 'From version',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with other version context', async () => {
-      const component = await mountSuspended(CompareVersionPicker, {
-        props: {
-          packageName: 'vue',
-          modelValue: '3.5.0',
-          label: 'From version',
-          otherVersion: '3.4.0',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CompareComingSoonPlaceholder', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(CompareComingSoonPlaceholder, {
-        props: {
-          title: 'File Diff',
-          description: 'Compare file changes between versions',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with icon', async () => {
-      const component = await mountSuspended(CompareComingSoonPlaceholder, {
-        props: {
-          title: 'Dependency Diff',
-          description: 'Compare dependency changes',
-          icon: 'i-carbon:flow',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
 })