fix: chart improvements (#230)

Author: graphieros

app/components/PackageDownloadAnalytics.vue

@@ -191,6 +191,16 @@ function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
+function extractDates(dateLabel: string) {
+  if (typeof dateLabel !== 'string') return []
+
+  const parts = dateLabel.trim().split(/\s+/).filter(Boolean)
+
+  if (parts.length < 2) return []
+
+  return [parts[0], parts[parts.length - 1]]
+}
+
 /**
  * Two-phase state:
  * - selectedGranularity: immediate UI
@@ -448,17 +458,26 @@ const config = computed(() => ({
       },
       callbacks: {
         img: ({ imageUri }: { imageUri: string }) => {
-          loadFile(imageUri, `${packageName}-${selectedGranularity.value}.png`)
+          loadFile(
+            imageUri,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
+          )
         },
         csv: (csvStr: string) => {
           const blob = new Blob([csvStr.replace('data:text/csv;charset=utf-8,', '')])
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.csv`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+          )
           URL.revokeObjectURL(url)
         },
         svg: ({ blob }: { blob: Blob }) => {
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.svg`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+          )
           URL.revokeObjectURL(url)
         },
       },
@@ -512,6 +531,13 @@ const config = computed(() => ({
     },
     zoom: {
       maxWidth: 500,
+      customFormat:
+        displayedGranularity.value !== 'weekly'
+          ? undefined
+          : ({ absoluteIndex, side }: { absoluteIndex: number; side: 'left' | 'right' }) => {
+              const parts = extractDates(chartData.value.dates[absoluteIndex] ?? '')
+              return side === 'left' ? parts[0] : parts.at(-1)
+            },
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,

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.4"
+    "vue-data-ui": "^3.13.5"
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",