fix(review): address PR #2079 review feedback

Address review comments from @joanagmaia, copilot-pull-request-reviewer:

- geographical-distribution.vue: mount the all-countries drawer with
  v-if instead of client-only so its useQuery observer stops running
  once the drawer is closed (per copilot-pull-request-reviewer)
- geo-map.helper.ts: extract the shared "hide Unknown" filter used by
  the widget, the drawer, and the shared view (previously duplicated)
- geographical-distribution-drawer.vue: compute isEmpty over the
  known-countries filter so a response containing only "Unknown" shows
  "No data available" instead of an empty map/list (per
  copilot-pull-request-reviewer and @joanagmaia)
- geographical-distribution-drawer.vue: add pb-5 to the scrollable
  section for spacing below the last row (per @joanagmaia)
- geo-distribution-view.vue: format percentage with formatNumber,
  showing 2 decimals only below 1% (per @joanagmaia)

Resolves 4 review threads.

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Author: emlimlf

frontend/app/components/modules/widget/config/contributor/geographical-distribution/fragments/geo-distribution-view.vue

@@ -26,7 +26,8 @@ SPDX-License-Identifier: MIT
         </span>
       </div>
       <span>
-        {{ formatNumber(item.count) }} {{ pluralize(props.label.toLowerCase(), item.count) }} ・ {{ item.percentage }}%
+        {{ formatNumber(item.count) }} {{ pluralize(props.label.toLowerCase(), item.count) }} ・
+        {{ formatNumber(item.percentage, item.percentage < 1 ? 2 : 0) }}%
       </span>
     </div>
   </div>
@@ -35,6 +36,7 @@ SPDX-License-Identifier: MIT
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
+import { filterKnownCountries } from '../geo-map.helper';
 import LfxChart from '~/components/uikit/chart/chart.vue';
 import { convertToChartData, getMaxValue } from '~/components/uikit/chart/helpers/chart-helpers';
 import type { ChartData, RawChartData, ChartSeries } from '~/components/uikit/chart/types/ChartTypes';
@@ -56,8 +58,7 @@ const props = withDefaults(
   },
 );
 
-// "Unknown" location is intentionally hidden from the list and chart (see IN-1225 / #2062).
-const knownGeoMapData = computed(() => props.geoMapData.filter((item) => item.name !== 'Unknown'));
+const knownGeoMapData = computed(() => filterKnownCountries(props.geoMapData));
 
 const listData = computed(() => (props.limit ? knownGeoMapData.value.slice(0, props.limit) : knownGeoMapData.value));
 

frontend/app/components/modules/widget/config/contributor/geographical-distribution/fragments/geographical-distribution-drawer.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: MIT
 
         <hr />
       </div>
-      <section class="mt-5 flex flex-col flex-grow overflow-auto">
+      <section class="mt-5 flex flex-col flex-grow overflow-auto pb-5">
         <div class="flex flex-wrap gap-4 items-center justify-between mb-6 px-4 sm:px-6 pt-[1px]">
           <lfx-tabs
             :tabs="tabs"
@@ -66,6 +66,7 @@ SPDX-License-Identifier: MIT
 import { useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { filterKnownCountries } from '../geo-map.helper';
 import LfxGeoDistributionView from './geo-distribution-view.vue';
 import LfxDrawer from '~/components/uikit/drawer/drawer.vue';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
@@ -129,7 +130,9 @@ const { data, status, error } = CONTRIBUTORS_API_SERVICE.fetchGeographicalDistri
 
 const geoMapData = computed<GeoMapData[] | undefined>(() => (data.value as GeoMapResponse)?.data);
 
-const isEmpty = computed(() => isEmptyData(geoMapData.value as unknown as Record<string, unknown>[]));
+const isEmpty = computed(() =>
+  isEmptyData(filterKnownCountries(geoMapData.value) as unknown as Record<string, unknown>[]),
+);
 
 const tabs = [
   {

frontend/app/components/modules/widget/config/contributor/geographical-distribution/geo-map.helper.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import type { GeoMapData } from '~/components/modules/widget/components/contributors/types/geo-map.types';
+
+// "Unknown" location is intentionally hidden from the list and chart (see IN-1225 / #2062).
+export const filterKnownCountries = (data?: GeoMapData[]): GeoMapData[] =>
+  data?.filter((item) => item.name !== 'Unknown') ?? [];

frontend/app/components/modules/widget/config/contributor/geographical-distribution/geographical-distribution.vue

@@ -56,14 +56,13 @@ SPDX-License-Identifier: MIT
       </div>
     </lfx-project-load-state>
   </section>
-  <client-only>
-    <lfx-geographical-distribution-drawer
-      v-model="isDrawerOpened"
-      :selected-tab="model.activeTab"
-      :selected-metric="model.metric"
-      :model="model"
-    />
-  </client-only>
+  <lfx-geographical-distribution-drawer
+    v-if="isDrawerOpened"
+    v-model="isDrawerOpened"
+    :selected-tab="model.activeTab"
+    :selected-metric="model.metric"
+    :model="model"
+  />
 </template>
 
 <script setup lang="ts">
@@ -72,6 +71,7 @@ import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import LfxGeoDistributionView from './fragments/geo-distribution-view.vue';
 import LfxGeographicalDistributionDrawer from './fragments/geographical-distribution-drawer.vue';
+import { filterKnownCountries } from './geo-map.helper';
 import LfxTabs from '~/components/uikit/tabs/tabs.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 import { useProjectStore } from '~/components/modules/project/store/project.store';
@@ -131,7 +131,7 @@ const { data, status, error } = CONTRIBUTORS_API_SERVICE.fetchGeographicalDistri
 const isDrawerOpened = ref(false);
 
 const geoMapData = computed<GeoMapData[] | undefined>(() => (data.value as GeoMapResponse)?.data);
-const knownGeoMapData = computed(() => geoMapData.value?.filter((item) => item.name !== 'Unknown') ?? []);
+const knownGeoMapData = computed(() => filterKnownCountries(geoMapData.value));
 const showAllCountriesButton = computed(() => knownGeoMapData.value.length > 5);
 
 const isEmpty = computed(() => isEmptyData(knownGeoMapData.value as unknown as Record<string, unknown>[]));