fix: various

Author: graphieros

app/components/Package/TimelineChart.vue

@@ -28,6 +28,7 @@ const props = defineProps<{
   selectedVersion: string | null
 }>()
 
+const { settings } = useSettings()
 const route = useRoute('timeline')
 
 const activeVersion = computed(() => route.params.version)
@@ -36,43 +37,6 @@ const packageName = computed(() =>
   route.params.org ? `${route.params.org}/${route.params.packageName}` : route.params.packageName,
 )
 
-function addTimelineEntries(
-  entries: ConvertedTimelineSizeCacheEntry[],
-  timelineEntries: TimelineVersion[],
-): EnrichedTimelineSizeCacheEntry[] {
-  const timelineEntryByVersion = new Map(timelineEntries.map(entry => [entry.version, entry]))
-
-  return entries.map(entry => {
-    const version = entry.name.split('@')[1] ?? ''
-    const timelineEntry = timelineEntryByVersion.get(version)
-
-    return {
-      ...entry,
-      version,
-      time: timelineEntry?.time,
-      license: timelineEntry?.license,
-      type: timelineEntry?.type,
-      hasTypes: timelineEntry?.hasTypes,
-      hasTrustedPublisher: timelineEntry?.hasTrustedPublisher,
-      hasProvenance: timelineEntry?.hasProvenance,
-      tags: timelineEntry?.tags ?? [],
-      events: [],
-      hasPositive: false,
-      hasNegative: false,
-    }
-  })
-}
-
-function convertMapEntries(
-  entries: Array<{ key: string; value: TimelineSizeCacheValue }>,
-): ConvertedTimelineSizeCacheEntry[] {
-  return entries.map(({ key, value }) => ({
-    name: key,
-    totalSize: value.totalSize,
-    dependencyCount: value.dependencyCount,
-  }))
-}
-
 function addEvaluationFlags(
   entries: EnrichedTimelineSizeCacheEntry[],
   versionSubEvents: Map<string, SubEvent[]>,
@@ -90,9 +54,33 @@ function addEvaluationFlags(
 }
 
 const convertedData = computed(() => {
-  const base = convertMapEntries(Array.from(props.sizeCache, ([key, value]) => ({ key, value })))
-  const withTimelineEntries = addTimelineEntries(base, props.timelineEntries)
-  return addEvaluationFlags(withTimelineEntries, props.versionSubEvents).toReversed()
+  const entries = props.timelineEntries.flatMap(timelineEntry => {
+    const key = `${packageName.value}@${timelineEntry.version}`
+    const value = props.sizeCache.get(key)
+
+    if (!value) {
+      return []
+    }
+
+    return {
+      name: key,
+      totalSize: value.totalSize,
+      dependencyCount: value.dependencyCount,
+      version: timelineEntry.version,
+      time: timelineEntry.time,
+      license: timelineEntry.license,
+      type: timelineEntry.type,
+      hasTypes: timelineEntry.hasTypes,
+      hasTrustedPublisher: timelineEntry.hasTrustedPublisher,
+      hasProvenance: timelineEntry.hasProvenance,
+      tags: timelineEntry.tags ?? [],
+      events: [],
+      hasPositive: false,
+      hasNegative: false,
+    }
+  })
+
+  return addEvaluationFlags(entries, props.versionSubEvents).toReversed()
 })
 
 const versions = computed(() => convertedData.value.map(d => d.name.split('@')[1] ?? ''))
@@ -230,7 +218,7 @@ const watermarkColors = computed(() => ({
 
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
-const isZeroBase = shallowRef(false)
+
 const commonScaleSteps = computed(() => {
   if (activeTab.value === 'totalSize') {
     return seriesTotalSize.value.max - seriesTotalSize.value.min > 5 ? 6 : 3
@@ -283,7 +271,7 @@ const config = computed<VueUiXyConfig>(() => {
             formatter: ({ value }) => {
               return formatter.value.format(value ?? 0)
             },
-            scaleMin: isZeroBase.value
+            scaleMin: settings.value.timelineChart.isZeroBased
               ? 0
               : activeTab.value === 'totalSize'
                 ? seriesTotalSize.value.min
@@ -478,7 +466,10 @@ const indexSelection = computed(() => {
         </TabList>
       </TabRoot>
 
-      <SettingsToggle v-model="isZeroBase" :label="$t('package.timeline.chart.base_scale')" />
+      <SettingsToggle
+        v-model="settings.timelineChart.isZeroBased"
+        :label="$t('package.timeline.chart.base_scale')"
+      />
     </div>
     <ClientOnly>
       <VueUiXy :dataset="datasets[activeTab]" :config :selected-x-index="indexSelection">

app/composables/useSettings.ts

@@ -50,6 +50,9 @@ export interface AppSettings {
     anomaliesFixed: boolean
     predictionPoints: number
   }
+  timelineChart: {
+    isZeroBased: boolean
+  }
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
@@ -77,6 +80,9 @@ const DEFAULT_SETTINGS: AppSettings = {
     anomaliesFixed: true,
     predictionPoints: 4,
   },
+  timelineChart: {
+    isZeroBased: false,
+  },
 }
 
 const STORAGE_KEY = 'npmx-settings'

app/utils/charts.ts

@@ -750,6 +750,9 @@ export function createAltTextForTimelineChart({
   const withEvents = dataset.filter(d => d.events.length)
   const first = dataset[0]
   const last = dataset.at(-1)
+
+  if (!first || !last) return ''
+
   const firstValue = config.metric === 'totalSize' ? first?.totalSize : first?.dependencyCount
   const lastValue = config.metric === 'totalSize' ? last?.totalSize : last?.dependencyCount
   const overall_progress_percentage = Math.round(((lastValue ?? 0) / (firstValue ?? 1) - 1) * 100)

i18n/locales/fr-FR.json

@@ -581,7 +581,7 @@
         "copy_alt": {
           "key_changes": "Principaux changements: {version_events}",
           "version_events": "version {version}: {events}",
-          "general_description": "Graphique en ligne montrant la métrique {metric} pour le paquet {package}, depuis la version {first} à {last}. La valeur de la métrique {metric} pour la version {first} est {first_value}, et {last_value} pour la version {last} ({overall_progress_percentage}% overall). {key_changes} {watermark}."
+          "general_description": "Graphique en ligne montrant la métrique {metric} pour le paquet {package}, depuis la version {first} à {last}. La valeur de la métrique {metric} pour la version {first} est {first_value}, et {last_value} pour la version {last} ({overall_progress_percentage}% dans l'ensemble). {key_changes} {watermark}."
         }
       }
     },