fix: compare scatter chart scale labels overlapping on first load

Author: graphieros

app/components/Compare/FacetScatterChart.vue

@@ -11,6 +11,7 @@ import('vue-data-ui/style.css')
 const props = defineProps<{
   packagesData: ReadonlyArray<PackageComparisonData | null>
   packages: string[]
+  isActiveTab: boolean
 }>()
 
 const colorMode = useColorMode()
@@ -288,6 +289,17 @@ onMounted(async () => {
   await nextTick()
   readyTeleport.value = true
 })
+
+// When he tab contents are hidden through v-show on load, the chart is mounted, but its internal autosizing feature trigger on an empty size, which leads to overlapping between scale labels and axis label on Y. This triggers a re-render of the chart when the tab is active.
+watch(
+  () => props.isActiveTab,
+  isActive => {
+    if (isActive) {
+      step.value += 1
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>

app/pages/compare.vue

@@ -455,6 +455,7 @@ useSeoMeta({
                   v-if="packages.length"
                   :packages-data="packagesData"
                   :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
+                  :is-active-tab="comparisonView === 'charts'"
                 />
               </div>
             </TabPanel>