feat: improve charts (npmx-dev#214)

Co-authored-by: Daniel Roe <daniel@roe.dev>

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

@@ -2,7 +2,7 @@
 import { ref, computed, shallowRef, watch } from 'vue'
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useElementSize } from '@vueuse/core'
 
 const {
   weeklyDownloads,
@@ -18,8 +18,10 @@ const {
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const colorMode = useColorMode()
-
 const resolvedMode = ref<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+
+const { width } = useElementSize(rootEl)
 
 onMounted(() => {
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
@@ -50,6 +52,16 @@ const accent = computed(() => {
   return id ? (oklchToHex(accentColorValueById.value[id]!) ?? '#8A8A8A') : '#8A8A8A'
 })
 
+const mobileBreakpointWidth = 640
+
+const isMobile = computed(() => {
+  return width.value > 0 && width.value < mobileBreakpointWidth
+})
+
+onMounted(() => {
+  rootEl.value = document.documentElement
+})
+
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
   | DailyDownloadPoint[]
@@ -417,6 +429,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,
@@ -474,6 +487,7 @@ const config = computed(() => ({
       },
     },
     zoom: {
+      maxWidth: 500,
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,
@@ -699,9 +713,4 @@ const config = computed(() => ({
   background: var(--bg-elevated) !important;
   box-shadow: none !important;
 }
-
-.vue-data-ui-zoom {
-  max-width: 500px;
-  margin: 0 auto;
-}
 </style>

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>
 

package.json

@@ -53,7 +53,7 @@
     "validate-npm-package-name": "^7.0.2",
     "virtua": "^0.48.3",
     "vue": "3.5.27",
-    "vue-data-ui": "^3.13.2"
+    "vue-data-ui": "^3.13.4"
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",