fix: ensure graph uses up-to-date data

Author: danielroe

app/components/PackageDownloadAnalytics.vue

@@ -5,12 +5,7 @@ import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '../composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '../utils/colors'
 
-const {
-  weeklyDownloads,
-  inModal = false,
-  packageName,
-  createdIso,
-} = defineProps<{
+const props = defineProps<{
   weeklyDownloads: WeeklyDownloadPoint[]
   inModal?: boolean
   packageName: string
@@ -131,7 +126,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -149,7 +144,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -162,7 +157,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -175,7 +170,7 @@ function formatXyDataset(
     return {
       dataset: [
         {
-          name: packageName,
+          name: props.packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
@@ -235,10 +230,10 @@ const hasUserEditedDates = shallowRef(false)
 
 function initDateRangeFromWeekly() {
   if (hasUserEditedDates.value) return
-  if (!weeklyDownloads?.length) return
+  if (!props.weeklyDownloads?.length) return
 
-  const first = weeklyDownloads[0]
-  const last = weeklyDownloads[weeklyDownloads.length - 1]
+  const first = props.weeklyDownloads[0]
+  const last = props.weeklyDownloads[props.weeklyDownloads.length - 1]
   const start = first?.weekStart ? toIsoDateOnly(first.weekStart) : ''
   const end = last?.weekEnd ? toIsoDateOnly(last.weekEnd) : ''
   if (isValidIsoDateOnly(start)) startDate.value = start
@@ -265,7 +260,7 @@ function initDateRangeFallbackClient() {
 }
 
 watch(
-  () => weeklyDownloads?.length,
+  () => props.weeklyDownloads?.length,
   () => {
     initDateRangeFromWeekly()
     initDateRangeFallbackClient()
@@ -342,7 +337,7 @@ watch(
 
 const { fetchPackageDownloadEvolution } = useCharts()
 
-const evolution = shallowRef<EvolutionData>(weeklyDownloads)
+const evolution = shallowRef<EvolutionData>(props.weeklyDownloads)
 const pending = shallowRef(false)
 
 let lastRequestKey = ''
@@ -354,7 +349,7 @@ const debouncedLoad = useDebounceFn(() => {
 
 async function load() {
   if (!import.meta.client) return
-  if (!inModal) return
+  if (!props.inModal) return
 
   const o = options.value
   const extraBase =
@@ -366,14 +361,14 @@ async function load() {
 
   const startKey = (o as any).startDate ?? ''
   const endKey = (o as any).endDate ?? ''
-  const requestKey = `${packageName}|${createdIso ?? ''}|${o.granularity}|${extraBase}|${startKey}|${endKey}`
+  const requestKey = `${props.packageName}|${props.createdIso ?? ''}|${o.granularity}|${extraBase}|${startKey}|${endKey}`
 
   if (requestKey === lastRequestKey) return
   lastRequestKey = requestKey
 
   const hasExplicitRange = Boolean((o as any).startDate || (o as any).endDate)
-  if (o.granularity === 'week' && weeklyDownloads?.length && !hasExplicitRange) {
-    evolution.value = weeklyDownloads
+  if (o.granularity === 'week' && props.weeklyDownloads?.length && !hasExplicitRange) {
+    evolution.value = props.weeklyDownloads
     pending.value = false
     displayedGranularity.value = 'weekly'
     return
@@ -384,8 +379,8 @@ async function load() {
 
   try {
     const result = await fetchPackageDownloadEvolution(
-      () => packageName,
-      () => createdIso,
+      () => props.packageName,
+      () => props.createdIso,
       () => o as any, // FIXME: any
     )
 
@@ -404,7 +399,7 @@ async function load() {
 }
 
 watch(
-  () => inModal,
+  () => props.inModal,
   () => {
     // modal open/close should be immediate
     load()
@@ -414,8 +409,8 @@ watch(
 
 watch(
   () => [
-    packageName,
-    createdIso,
+    props.packageName,
+    props.createdIso,
     options.value.granularity,
     (options.value as any).weeks,
     (options.value as any).months,
@@ -437,9 +432,9 @@ watch(
 )
 
 const effectiveData = computed<EvolutionData>(() => {
-  if (displayedGranularity.value === 'weekly' && weeklyDownloads?.length) {
+  if (displayedGranularity.value === 'weekly' && props.weeklyDownloads?.length) {
     if (isWeeklyDataset(evolution.value) && evolution.value.length) return evolution.value
-    return weeklyDownloads
+    return props.weeklyDownloads
   }
   return evolution.value
 })
@@ -481,7 +476,7 @@ const config = computed(() => {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(
               imageUri,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
             )
           },
           csv: (csvStr: string) => {
@@ -502,15 +497,15 @@ const config = computed(() => {
             const url = URL.createObjectURL(blob)
             loadFile(
               url,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
             )
             URL.revokeObjectURL(url)
           },
           svg: ({ blob }: { blob: Blob }) => {
             const url = URL.createObjectURL(blob)
             loadFile(
               url,
-              `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
             )
             URL.revokeObjectURL(url)
           },
@@ -525,7 +520,7 @@ const config = computed(() => {
             yLabel: $t('package.downloads.y_axis_label', {
               granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
             }),
-            xLabel: packageName,
+            xLabel: props.packageName,
             yLabelOffsetX: 12,
             fontSize: isMobile.value ? 32 : 24,
           },

app/components/PackageWeeklyDownloadStats.vue

@@ -9,6 +9,13 @@ const props = defineProps<{
 
 const chartModal = useModal('chart-modal')
 
+const isChartModalOpen = shallowRef(false)
+function openChartModal() {
+  isChartModalOpen.value = true
+  // ensure the component renders before opening the dialog
+  nextTick(() => chartModal.open())
+}
+
 const { data: packument } = usePackage(() => props.packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
 
@@ -194,7 +201,7 @@ const config = computed(() => {
       <template #actions>
         <button
           type="button"
-          @click="chartModal.open()"
+          @click="openChartModal"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
@@ -241,11 +248,11 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <ChartModal>
+  <ChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
     <PackageDownloadAnalytics
       :weeklyDownloads="weeklyDownloads"
       :inModal="true"
-      :packageName="packageName"
+      :packageName="props.packageName"
       :createdIso="createdIso"
     />
   </ChartModal>