forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: remove large downloads chart re-render (#713)
authored by
Alec Lloyd Probert
and committed by
GitHub
e4f19b52
0b157cf2
+16
-34
+6
-26
app/components/Package/DownloadAnalytics.vue
+6
-26
app/components/Package/DownloadAnalytics.vue
···
20
20
21
21
const { width } = useElementSize(rootEl)
22
22
23
-
const chartKey = ref(0)
24
-
25
-
let chartRemountTimeoutId: ReturnType<typeof setTimeout> | null = null
26
-
27
23
onMounted(() => {
28
24
rootEl.value = document.documentElement
29
25
resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
30
-
31
-
// If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
32
-
chartRemountTimeoutId = setTimeout(() => {
33
-
chartKey.value += 1
34
-
chartRemountTimeoutId = null
35
-
}, 1)
36
-
})
37
-
38
-
onBeforeUnmount(() => {
39
-
if (chartRemountTimeoutId !== null) {
40
-
clearTimeout(chartRemountTimeoutId)
41
-
chartRemountTimeoutId = null
42
-
}
43
26
})
44
27
45
28
const { colors } = useCssVariables(
···
718
701
</div>
719
702
720
703
<ClientOnly v-if="inModal && chartData.dataset">
721
-
<VueUiXy
722
-
:dataset="chartData.dataset"
723
-
:config="config"
724
-
class="[direction:ltr]"
725
-
:key="chartKey"
726
-
>
704
+
<VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
727
705
<template #menuIcon="{ isOpen }">
728
706
<span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
729
707
<span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
···
836
814
}
837
815
838
816
/* Override default placement of the refresh button to have it to the minimap's side */
839
-
#download-analytics .vue-data-ui-refresh-button {
840
-
top: -0.6rem !important;
841
-
left: calc(100% + 2rem) !important;
817
+
@media screen and (min-width: 767px) {
818
+
#download-analytics .vue-data-ui-refresh-button {
819
+
top: -0.6rem !important;
820
+
left: calc(100% + 2rem) !important;
821
+
}
842
822
}
843
823
</style>
+4
-2
app/components/Package/WeeklyDownloadStats.vue
+4
-2
app/components/Package/WeeklyDownloadStats.vue
···
11
11
const chartModal = useModal('chart-modal')
12
12
13
13
const isChartModalOpen = shallowRef(false)
14
-
function openChartModal() {
14
+
async function openChartModal() {
15
15
isChartModalOpen.value = true
16
16
// ensure the component renders before opening the dialog
17
-
nextTick(() => chartModal.open())
17
+
await nextTick()
18
+
await nextTick()
19
+
chartModal.open()
18
20
}
19
21
20
22
const { fetchPackageDownloadEvolution } = useCharts()
+1
-1
package.json
+1
-1
package.json
+5
-5
pnpm-lock.yaml
+5
-5
pnpm-lock.yaml
···
186
186
specifier: 3.5.27
187
187
version: 3.5.27(typescript@5.9.3)
188
188
vue-data-ui:
189
-
specifier: 3.14.1
190
-
version: 3.14.1(vue@3.5.27(typescript@5.9.3))
189
+
specifier: 3.14.2
190
+
version: 3.14.2(vue@3.5.27(typescript@5.9.3))
191
191
devDependencies:
192
192
'@npm/types':
193
193
specifier: 2.1.0
···
9253
9253
vue-component-type-helpers@3.2.4:
9254
9254
resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
9255
9255
9256
-
vue-data-ui@3.14.1:
9257
-
resolution: {integrity: sha512-i7GNaNtw39Avy9VuDHGdLdDpH2sRsr2ZFRpiilOvQ0XA5887KCvd7J5IUQRpVNTQSaT7pFSSEMPwcQ7NfPHuVw==}
9256
+
vue-data-ui@3.14.2:
9257
+
resolution: {integrity: sha512-gxMhF0DXMfJ+TgErs0fKsM7Se+txRQSFhy+DWtw5XhD2HnjxnlbBSuyJDyNvLdHtPWOVeoXzc1TSMvLzsheZnQ==}
9258
9258
peerDependencies:
9259
9259
jspdf: '>=3.0.1'
9260
9260
vue: '>=3.3.0'
···
20674
20674
20675
20675
vue-component-type-helpers@3.2.4: {}
20676
20676
20677
-
vue-data-ui@3.14.1(vue@3.5.27(typescript@5.9.3)):
20677
+
vue-data-ui@3.14.2(vue@3.5.27(typescript@5.9.3)):
20678
20678
dependencies:
20679
20679
vue: 3.5.27(typescript@5.9.3)
20680
20680