feat: add permalink to downloads modal

Author: MatteoGabriele

app/components/Package/DownloadAnalytics.vue

@@ -5,6 +5,15 @@ import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import type {
+  ChartTimeGranularity,
+  DailyDownloadPoint,
+  DateRangeFields,
+  EvolutionData,
+  MonthlyDownloadPoint,
+  WeeklyDownloadPoint,
+  YearlyDownloadPoint,
+} from '~/types/chart'
 
 const props = defineProps<{
   // For single package downloads history
@@ -100,18 +109,6 @@ const accent = computed(() => {
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
-type EvolutionData =
-  | DailyDownloadPoint[]
-  | WeeklyDownloadPoint[]
-  | MonthlyDownloadPoint[]
-  | YearlyDownloadPoint[]
-
-type DateRangeFields = {
-  startDate?: string
-  endDate?: string
-}
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
 }
@@ -314,7 +311,10 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>('weekly')
+const selectedGranularity = defineModel<ChartTimeGranularity>('granularity', {
+  default: 'weekly',
+})
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>('weekly')
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -344,8 +344,8 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = shallowRef<string>('') // YYYY-MM-DD
-const endDate = shallowRef<string>('') // YYYY-MM-DD
+const startDate = defineModel<string>('startDate', { default: '' })
+const endDate = defineModel<string>('endDate', { default: '' })
 const hasUserEditedDates = shallowRef(false)
 
 /**

app/components/Package/WeeklyDownloadStats.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
+import type { ChartTimeGranularity, WeeklyDownloadPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
@@ -10,10 +11,19 @@ const props = defineProps<{
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
-const isChartModalOpen = shallowRef(false)
+
+const modal = useRouteQuery<'downloads' | undefined>('modal')
+const granularity = useRouteQuery<ChartTimeGranularity | undefined>('granularity')
+const startDate = useRouteQuery<string | undefined>('start')
+const endDate = useRouteQuery<string | undefined>('end')
+
+const isChartModalOpen = computed<boolean>(() => modal.value === 'downloads')
 
 function handleModalClose() {
-  isChartModalOpen.value = false
+  modal.value = undefined
+  granularity.value = undefined
+  startDate.value = undefined
+  endDate.value = undefined
   hasChartModalTransitioned.value = false
 }
 
@@ -93,7 +103,7 @@ const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 async function openChartModal() {
   if (!hasWeeklyDownloads.value) return
 
-  isChartModalOpen.value = true
+  modal.value = 'downloads'
   hasChartModalTransitioned.value = false
   // ensure the component renders before opening the dialog
   await nextTick()
@@ -119,8 +129,11 @@ async function loadWeeklyDownloads() {
   }
 }
 
-onMounted(() => {
-  loadWeeklyDownloads()
+onMounted(async () => {
+  await loadWeeklyDownloads()
+  if (isChartModalOpen.value && hasWeeklyDownloads.value) {
+    openChartModal()
+  }
 })
 
 watch(
@@ -287,6 +300,9 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
+        v-model:granularity="granularity"
+        v-model:startDate="startDate"
+        v-model:endDate="endDate"
       />
     </Transition>
 

app/composables/useCharts.ts

@@ -1,23 +1,17 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
+import type {
+  DailyDownloadPoint,
+  MonthlyDownloadPoint,
+  WeeklyDownloadPoint,
+  YearlyDownloadPoint,
+} from '~/types/chart'
 import { fetchNpmDownloadsRange } from '~/utils/npm/api'
 
 export type PackumentLikeForTime = {
   time?: Record<string, string>
 }
 
-export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
-export type WeeklyDownloadPoint = {
-  downloads: number
-  weekKey: string
-  weekStart: string
-  weekEnd: string
-  timestampStart: number
-  timestampEnd: number
-}
-export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
-export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
-
 type PackageDownloadEvolutionOptionsBase = {
   startDate?: string
   endDate?: string

app/types/chart.ts

@@ -0,0 +1,24 @@
+export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
+export type WeeklyDownloadPoint = {
+  downloads: number
+  weekKey: string
+  weekStart: string
+  weekEnd: string
+  timestampStart: number
+  timestampEnd: number
+}
+export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
+export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
+
+export type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
+
+export type EvolutionData =
+  | DailyDownloadPoint[]
+  | WeeklyDownloadPoint[]
+  | MonthlyDownloadPoint[]
+  | YearlyDownloadPoint[]
+
+export type DateRangeFields = {
+  startDate?: string
+  endDate?: string
+}