diff --git a/app/components/ChartModal.vue b/app/components/ChartModal.vue index b5dfa6c07c..e4d5763e0d 100644 --- a/app/components/ChartModal.vue +++ b/app/components/ChartModal.vue @@ -1,9 +1,13 @@ @@ -53,6 +57,8 @@ function handleKeydown(event: KeyboardEvent) { + + diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue index 45b7c3ab4d..12e0a2bf03 100644 --- a/app/components/PackageDownloadAnalytics.vue +++ b/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(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; -} diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue index d01b0b49e9..67e3622e52 100644 --- a/app/components/PackageWeeklyDownloadStats.vue +++ b/app/components/PackageWeeklyDownloadStats.vue @@ -202,6 +202,19 @@ const config = computed(() => { :packageName="packageName" :createdIso="createdIso" /> + + diff --git a/package.json b/package.json index 95a711f69f..d95d4d6622 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c3d66bbdf..b6bf8b6f88 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -99,7 +99,7 @@ importers: specifier: 3.5.27 version: 3.5.27(typescript@5.9.3) vue-data-ui: - specifier: ^3.13.2 + specifier: ^3.13.4 version: 3.13.4(vue@3.5.27(typescript@5.9.3)) devDependencies: '@iconify-json/carbon': @@ -3743,6 +3743,63 @@ packages: '@vitest/utils@4.0.18': resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==} + '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171': + resolution: {integrity: sha512-tNNx5L88Wzd5ABY/fggYsu1h4iK8u9zqSAby9DH/p6dP+FgFD/WgI3Uxnqymik1Zg7I/7x+pQ+819fUkG0EpyQ==} + engines: {node: ^20.19.0 || >=22.12.0} + peerDependencies: + '@arethetypeswrong/core': ^0.18.1 + '@types/node': ^20.19.0 || >=22.12.0 + '@vitejs/devtools': '*' + esbuild: ^0.27.0 + jiti: '>=1.21.0' + less: ^4.0.0 + publint: ^0.3.0 + sass: ^1.70.0 + sass-embedded: ^1.70.0 + stylus: '>=0.54.8' + sugarss: ^5.0.0 + terser: ^5.16.0 + tsx: ^4.8.1 + typescript: ^5.0.0 + unplugin-lightningcss: ^0.4.0 + unplugin-unused: ^0.5.0 + yaml: ^2.4.2 + peerDependenciesMeta: + '@arethetypeswrong/core': + optional: true + '@types/node': + optional: true + '@vitejs/devtools': + optional: true + esbuild: + optional: true + jiti: + optional: true + less: + optional: true + publint: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + typescript: + optional: true + unplugin-lightningcss: + optional: true + unplugin-unused: + optional: true + yaml: + optional: true + '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb': resolution: {integrity: sha512-CaBCsFuLcUtOwvG5PW6yK6E7GcapQzTQcyGDBmVTIJPRMDCCnaX/76DrfVoF4FU/Lku7IUd33vqows0/VO05jQ==} engines: {node: ^20.19.0 || >=22.12.0} @@ -11024,8 +11081,8 @@ snapshots: dependencies: '@nuxt/kit': 4.3.0(magicast@0.5.1) '@rollup/plugin-replace': 6.0.3(rollup@4.57.0) - '@vitejs/plugin-vue': 6.0.3(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) - '@vitejs/plugin-vue-jsx': 5.1.3(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) + '@vitejs/plugin-vue': 6.0.3(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) + '@vitejs/plugin-vue-jsx': 5.1.3(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) autoprefixer: 10.4.23(postcss@8.5.6) consola: 3.4.2 cssnano: 7.1.2(postcss@8.5.6) @@ -11048,9 +11105,9 @@ snapshots: std-env: 3.10.0 ufo: 1.6.3 unenv: 2.0.0-rc.24 - vite: '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' + vite: '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' vite-node: 5.3.0(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2) - vite-plugin-checker: 0.12.0(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.2))(typescript@5.9.3)(vue-tsc@3.2.2(typescript@5.9.3)) + vite-plugin-checker: 0.12.0(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.2))(typescript@5.9.3)(vue-tsc@3.2.2(typescript@5.9.3)) vue: 3.5.27(typescript@5.9.3) vue-bundle-renderer: 2.2.0 optionalDependencies: @@ -12763,22 +12820,22 @@ snapshots: - workbox-build - workbox-window - '@vitejs/plugin-vue-jsx@5.1.3(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))': + '@vitejs/plugin-vue-jsx@5.1.3(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))': dependencies: '@babel/core': 7.28.6 '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.28.6) '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.28.6) '@rolldown/pluginutils': 1.0.0-rc.1 '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.6) - vite: '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' + vite: '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' vue: 3.5.27(typescript@5.9.3) transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue@6.0.3(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))': + '@vitejs/plugin-vue@6.0.3(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))': dependencies: '@rolldown/pluginutils': 1.0.0-beta.53 - vite: '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' + vite: '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' vue: 3.5.27(typescript@5.9.3) '@vitest/browser-playwright@4.0.18(@voidzero-dev/vite-plus-test@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(happy-dom@20.3.5)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(playwright@1.57.0)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))': @@ -12846,6 +12903,21 @@ snapshots: '@vitest/pretty-format': 4.0.18 tinyrainbow: 3.0.3 + '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)': + dependencies: + '@oxc-project/runtime': 0.110.0 + '@oxc-project/types': 0.110.0 + lightningcss: 1.31.1 + postcss: 8.5.6 + optionalDependencies: + '@types/node': 24.10.9 + esbuild: 0.27.2 + fsevents: 2.3.3 + jiti: 2.6.1 + terser: 5.46.0 + typescript: 5.9.3 + yaml: 2.8.2 + '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)': dependencies: '@oxc-project/runtime': 0.110.0 @@ -18768,7 +18840,7 @@ snapshots: es-module-lexer: 2.0.0 obug: 2.1.1 pathe: 2.0.3 - vite: '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' + vite: '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' transitivePeerDependencies: - '@arethetypeswrong/core' - '@types/node' @@ -18788,7 +18860,7 @@ snapshots: - unplugin-unused - yaml - vite-plugin-checker@0.12.0(@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.2))(typescript@5.9.3)(vue-tsc@3.2.2(typescript@5.9.3)): + vite-plugin-checker@0.12.0(@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.2))(typescript@5.9.3)(vue-tsc@3.2.2(typescript@5.9.3)): dependencies: '@babel/code-frame': 7.28.6 chokidar: 4.0.3 @@ -18797,7 +18869,7 @@ snapshots: picomatch: 4.0.3 tiny-invariant: 1.3.3 tinyglobby: 0.2.15 - vite: '@voidzero-dev/vite-plus-core@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' + vite: '@voidzero-dev/vite-plus-core@0.0.0-dfd5c99899261c54d5b19dceaa831fab310d6171(@types/node@24.10.9)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)' vscode-uri: 3.1.0 optionalDependencies: eslint: 9.39.2(jiti@2.6.1)