feat: add permalink to downloads modal

app/components/Package/TrendsChart.vue

@@ -5,6 +5,16 @@ 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,
+  DailyDataPoint,
+  DateRangeFields,
+  EvolutionData,
+  EvolutionOptions,
+  MonthlyDataPoint,
+  WeeklyDataPoint,
+  YearlyDataPoint,
+} from '~/types/chart'
 
 const props = defineProps<{
   // For single package downloads history
@@ -103,14 +113,7 @@ const accent = computed(() => {
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 const DEFAULT_GRANULARITY: ChartTimeGranularity = 'weekly'
-type EvolutionData = DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]
-
-type DateRangeFields = {
-  startDate?: string
-  endDate?: string
-}
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
@@ -315,7 +318,9 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const selectedGranularity = defineModel<ChartTimeGranularity>('granularity', {
+  default: DEFAULT_GRANULARITY,
+})
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -345,8 +350,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, WeeklyDataPoint } 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(
@@ -283,6 +296,9 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
+        v-model:granularity="granularity"
+        v-model:startDate="startDate"
+        v-model:endDate="endDate"
         show-facet-selector
       />
     </Transition>

app/composables/useCharts.ts

@@ -1,51 +1,19 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
+import type {
+  DailyDataPoint,
+  DailyRawPoint,
+  EvolutionOptions,
+  MonthlyDataPoint,
+  WeeklyDataPoint,
+  YearlyDataPoint,
+} from '~/types/chart'
 import { fetchNpmDownloadsRange } from '~/utils/npm/api'
 
 export type PackumentLikeForTime = {
   time?: Record<string, string>
 }
 
-export type DailyDataPoint = { value: number; day: string; timestamp: number }
-export type WeeklyDataPoint = {
-  value: number
-  weekKey: string
-  weekStart: string
-  weekEnd: string
-  timestampStart: number
-  timestampEnd: number
-}
-export type MonthlyDataPoint = { value: number; month: string; timestamp: number }
-export type YearlyDataPoint = { value: number; year: string; timestamp: number }
-
-type EvolutionOptionsBase = {
-  startDate?: string
-  endDate?: string
-}
-
-export type EvolutionOptionsDay = EvolutionOptionsBase & {
-  granularity: 'day'
-}
-export type EvolutionOptionsWeek = EvolutionOptionsBase & {
-  granularity: 'week'
-  weeks?: number
-}
-export type EvolutionOptionsMonth = EvolutionOptionsBase & {
-  granularity: 'month'
-  months?: number
-}
-export type EvolutionOptionsYear = EvolutionOptionsBase & {
-  granularity: 'year'
-}
-
-export type EvolutionOptions =
-  | EvolutionOptionsDay
-  | EvolutionOptionsWeek
-  | EvolutionOptionsMonth
-  | EvolutionOptionsYear
-
-type DailyRawPoint = { day: string; value: number }
-
 function toIsoDateString(date: Date): string {
   return date.toISOString().slice(0, 10)
 }

app/types/chart.ts

@@ -0,0 +1,52 @@
+export type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
+
+export type DateRangeFields = {
+  startDate?: string
+  endDate?: string
+}
+
+export type DailyDataPoint = { value: number; day: string; timestamp: number }
+export type WeeklyDataPoint = {
+  value: number
+  weekKey: string
+  weekStart: string
+  weekEnd: string
+  timestampStart: number
+  timestampEnd: number
+}
+export type MonthlyDataPoint = { value: number; month: string; timestamp: number }
+export type YearlyDataPoint = { value: number; year: string; timestamp: number }
+
+export type EvolutionData =
+  | DailyDataPoint[]
+  | WeeklyDataPoint[]
+  | MonthlyDataPoint[]
+  | YearlyDataPoint[]
+
+export type EvolutionOptionsBase = {
+  startDate?: string
+  endDate?: string
+}
+
+export type EvolutionOptionsDay = EvolutionOptionsBase & {
+  granularity: 'day'
+}
+export type EvolutionOptionsWeek = EvolutionOptionsBase & {
+  granularity: 'week'
+  weeks?: number
+}
+export type EvolutionOptionsMonth = EvolutionOptionsBase & {
+  granularity: 'month'
+  months?: number
+}
+export type EvolutionOptionsYear = EvolutionOptionsBase & {
+  granularity: 'year'
+}
+
+export type EvolutionOptions =
+  | EvolutionOptionsDay
+  | EvolutionOptionsWeek
+  | EvolutionOptionsMonth
+  | EvolutionOptionsYear
+
+export type DailyRawPoint = { day: string; value: number }