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
@@ -26,7 +36,9 @@ const props = defineProps<{
 
   /** When true, shows facet selector (e.g. Downloads / Likes). */
   showFacetSelector?: boolean
+  permalink?: boolean
 }>()
+const emit = defineEmits(['update:startDate', 'update:endDate'])
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -103,14 +115,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 +320,14 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const selectedGranularity = usePermalinkValue<ChartTimeGranularity>(
+  'granularity',
+  DEFAULT_GRANULARITY,
+  {
+    permanent: props.permalink,
+  },
+)
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -345,8 +357,13 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = shallowRef<string>('') // YYYY-MM-DD
-const endDate = shallowRef<string>('') // YYYY-MM-DD
+const startDate = usePermalinkValue<string>('start', '', {
+  permanent: props.permalink,
+})
+const endDate = usePermalinkValue<string>('end', '', {
+  permanent: props.permalink,
+})
+
 const hasUserEditedDates = shallowRef(false)
 
 /**
@@ -571,7 +588,9 @@ const METRICS = computed<MetricDef[]>(() => [
   },
 ])
 
-const selectedMetric = shallowRef<MetricId>(DEFAULT_METRIC_ID)
+const selectedMetric = usePermalinkValue<MetricId>('facet', DEFAULT_METRIC_ID, {
+  permanent: props.permalink,
+})
 
 // Per-metric state keyed by metric id
 const metricStates = reactive<

app/components/Package/WeeklyDownloadStats.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
+import type { WeeklyDataPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
   packageName: string
   createdIso: string | null
 }>()
 
+const router = useRouter()
+const route = useRoute()
+
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
-const isChartModalOpen = shallowRef(false)
+
+const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
   isChartModalOpen.value = false
   hasChartModalTransitioned.value = false
+
+  router.replace({
+    query: {
+      ...route.query,
+      modal: undefined,
+      granularity: undefined,
+      end: undefined,
+      start: undefined,
+      facet: undefined,
+    },
+  })
 }
 
 function handleModalTransitioned() {
@@ -95,6 +111,14 @@ async function openChartModal() {
 
   isChartModalOpen.value = true
   hasChartModalTransitioned.value = false
+
+  await router.replace({
+    query: {
+      ...route.query,
+      modal: 'chart',
+    },
+  })
+
   // ensure the component renders before opening the dialog
   await nextTick()
   await nextTick()
@@ -119,8 +143,16 @@ async function loadWeeklyDownloads() {
   }
 }
 
-onMounted(() => {
-  loadWeeklyDownloads()
+onMounted(async () => {
+  await loadWeeklyDownloads()
+
+  if (route.query.modal === 'chart') {
+    isChartModalOpen.value = true
+  }
+
+  if (isChartModalOpen.value && hasWeeklyDownloads.value) {
+    openChartModal()
+  }
 })
 
 watch(
@@ -283,6 +315,7 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
+        permalink
         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/composables/usePermalinkValue.ts

@@ -0,0 +1,26 @@
+/**
+ * Creates a computed property that uses route query parameters by default,
+ * with an option to use local state instead.
+ */
+export function usePermalinkValue<T extends string | number = string>(
+  queryKey: string,
+  defaultValue: T = '' as T,
+  options: { permanent?: boolean } = {},
+): WritableComputedRef<T> {
+  const { permanent = true } = options
+  const localValue = shallowRef<T>(defaultValue)
+  const routeValue = useRouteQuery<T>(queryKey, defaultValue)
+
+  const parmalinkValue = computed({
+    get: () => (permanent ? routeValue.value : localValue.value),
+    set: (value: T) => {
+      if (permanent) {
+        routeValue.value = value
+      } else {
+        localValue.value = value
+      }
+    },
+  })
+
+  return parmalinkValue
+}

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[]
+
+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 }