feat: improve responsive chart

Author: graphieros

app/components/ChartModal.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
+function close() {
+  open.value = false
+}
+
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
-    open.value = false
+    close()
   }
 }
 </script>
@@ -53,6 +57,8 @@ function handleKeydown(event: KeyboardEvent) {
               <slot />
             </div>
           </div>
+
+          <slot name="after" v-bind="{ close }" />
         </div>
       </div>
     </Transition>

app/components/PackageDownloadAnalytics.vue

@@ -50,6 +50,35 @@ const accent = computed(() => {
   return id ? (oklchToHex(accentColorValueById.value[id]!) ?? '#8A8A8A') : '#8A8A8A'
 })
 
+const mobileBreakpointWidth = 640
+const isMobile = ref(false)
+
+let resizeObserver: ResizeObserver | null = null
+
+function updateIsMobileFromWidth(width: number) {
+  isMobile.value = width < mobileBreakpointWidth
+}
+
+onMounted(() => {
+  if (!import.meta.client) return
+
+  updateIsMobileFromWidth(window.innerWidth)
+
+  resizeObserver = new ResizeObserver(entries => {
+    const entry = entries[0]
+    if (!entry) return
+    updateIsMobileFromWidth(entry.contentRect.width)
+  })
+
+  resizeObserver.observe(document.documentElement)
+})
+
+onBeforeUnmount(() => {
+  if (!resizeObserver) return
+  resizeObserver.disconnect()
+  resizeObserver = null
+})
+
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
   | DailyDownloadPoint[]
@@ -417,6 +446,7 @@ const formatter = ({ value }: { value: number }) => formatCompactNumber(value, {
 const config = computed(() => ({
   theme: isDarkMode.value ? 'dark' : 'default',
   chart: {
+    height: isMobile.value ? 850 : 600,
     userOptions: {
       buttons: {
         pdf: false,

app/components/PackageWeeklyDownloadStats.vue

@@ -202,6 +202,19 @@ const config = computed(() => {
       :packageName="packageName"
       :createdIso="createdIso"
     />
+
+    <template #after="{ close }">
+      <div class="sm:hidden flex justify-center">
+        <button
+          type="button"
+          @click="close"
+          class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+          :aria-label="$t('common.close')"
+        >
+          <span class="w-5 h-5 i-carbon-close" />
+        </button>
+      </div>
+    </template>
   </ChartModal>
 </template>