forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: wait more before re-rendering the chart (#623)
authored by
Alec Lloyd Probert
and committed by
GitHub
f3e22f2f
5ec03c09
+12
-5
+12
-5
app/components/PackageDownloadAnalytics.vue
+12
-5
app/components/PackageDownloadAnalytics.vue
···
21
21
22
22
const chartKey = ref(0)
23
23
24
+
function nextAnimationFrame(): Promise<void> {
25
+
return new Promise(resolve => {
26
+
requestAnimationFrame(() => resolve())
27
+
})
28
+
}
29
+
24
30
onMounted(async () => {
25
31
rootEl.value = document.documentElement
26
32
resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
27
-
requestAnimationFrame(() => {
28
-
requestAnimationFrame(() => {
29
-
chartKey.value += 1
30
-
})
31
-
})
33
+
34
+
// If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
35
+
await nextAnimationFrame()
36
+
await nextAnimationFrame()
37
+
await nextAnimationFrame()
38
+
chartKey.value += 1
32
39
})
33
40
34
41
const { colors } = useCssVariables(