chore: organization page UI, terminology and time range improvements (IN-1204) (#2015)

Signed-off-by: Your Name <jmaia@contractor.linuxfoundation.org>

Author: joanagmaia

frontend/app/components/modules/leaderboards/components/minimize-row-displays/organization-row.vue

@@ -4,29 +4,23 @@ SPDX-License-Identifier: MIT
 -->
 
 <template>
-  <div
-    class="flex items-center w-full"
-    :class="item.slug ? 'cursor-pointer' : ''"
-  >
+  <div class="flex items-center w-full">
     <!-- Organization info -->
-    <component
-      :is="item.slug ? nuxtLink : 'div'"
-      :to="item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
-      class="flex-1 min-w-0 flex gap-3 items-center text-inherit no-underline"
-      :class="item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
-    >
+    <div class="flex-1 min-w-0 flex gap-3 items-center">
       <lfx-avatar
         :src="item.logoUrl"
         type="organization"
         :aria-label="item.logoUrl && item.name"
       />
       <p
         :title="item.name"
-        class="font-medium overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"
+        class="font-medium text-neutral-900 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"
+        :class="item.slug ? 'hover:underline cursor-pointer' : ''"
+        @click.prevent.stop="navigateToOrganization(item.slug)"
       >
         {{ item.name }}
       </p>
-    </component>
+    </div>
 
     <!-- Stats -->
     <div class="w-1/4 shrink-0">
@@ -38,19 +32,26 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
-import { resolveComponent } from 'vue';
+import { useRouter } from 'vue-router';
 import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
 import NumericDataDisplay from '../data-displays/numeric.vue';
 import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
 import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
 
+const router = useRouter();
+
 defineProps<{
   item: Leaderboard;
   leaderboardConfig: LeaderboardConfig;
 }>();
 
-const nuxtLink = resolveComponent('NuxtLink');
+const navigateToOrganization = (slug: string) => {
+  if (!slug) {
+    return;
+  }
+  router.push({ name: LfxRoutes.ORGANIZATION, params: { orgSlug: slug } });
+};
 </script>
 
 <script lang="ts">

frontend/app/components/modules/leaderboards/components/row-displays/organization-row.vue

@@ -17,8 +17,8 @@ SPDX-License-Identifier: MIT
     <component
       :is="item.slug ? nuxtLink : 'div'"
       :to="item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
-      class="flex-1 min-w-0 flex gap-3 items-center text-inherit no-underline"
-      :class="item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
+      class="flex-1 min-w-0 flex gap-3 items-center"
+      :class="item.slug ? 'cursor-pointer' : ''"
     >
       <lfx-avatar
         :src="item.logoUrl"
@@ -27,7 +27,8 @@ SPDX-License-Identifier: MIT
       />
       <p
         :title="item.name"
-        class="text-base leading-5 font-medium overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
+        class="text-base leading-5 font-medium text-neutral-900 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
+        :class="item.slug ? 'hover:underline cursor-pointer' : ''"
       >
         {{ item.name }}
       </p>

frontend/app/components/modules/leaderboards/components/sections/leaderboard-card.vue

@@ -121,7 +121,7 @@ const handleCardClick = (event: MouseEvent) => {
   if (window.innerWidth >= 640) {
     // Don't navigate if clicking on the share button
     const target = event.target as HTMLElement;
-    if (target.closest('button')) {
+    if (target.closest('button') || target.closest('a')) {
       return;
     }
     navigateToLeaderboard();

frontend/app/components/modules/organization/components/overview/activity-chart.vue

@@ -15,8 +15,8 @@ SPDX-License-Identifier: MIT
           />
         </div>
         <div>
-          <h2 class="text-heading-5 font-bold font-secondary">Activities</h2>
-          <p class="org-chart-description">by {{ orgDisplayName }} contributors over the years</p>
+          <h2 class="text-heading-5 font-bold font-secondary">Contributions</h2>
+          <p class="org-chart-description">by {{ orgDisplayName }} contributors (last 10 years)</p>
         </div>
       </div>
       <div
@@ -40,7 +40,7 @@ SPDX-License-Identifier: MIT
         v-else
         class="org-chart-area org-chart-empty"
       >
-        No activity data available.
+        No contribution data available.
       </div>
     </div>
   </lfx-card>
@@ -87,7 +87,7 @@ const chartData = computed<ChartData[]>(() => {
 
 const chartSeries = computed<ChartSeries[]>(() => [
   {
-    name: 'Activities',
+    name: 'Contributions',
     type: 'bar',
     yAxisIndex: 0,
     dataIndex: 0,

frontend/app/components/modules/organization/components/overview/contributors-chart.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
         </div>
         <div>
           <h2 class="text-heading-5 font-bold font-secondary">Active Contributors</h2>
-          <p class="org-chart-description">by {{ orgDisplayName }} contributors over the years</p>
+          <p class="org-chart-description">by {{ orgDisplayName }} (last 10 years)</p>
         </div>
       </div>
       <div

frontend/app/components/modules/organization/components/overview/kpi-row.vue

@@ -81,23 +81,23 @@ const kpis = computed(() => [
     trend: data.value?.activeContributorsTrend,
     trendAbsolute: data.value?.activeContributorsTrendAbsolute,
     trendPrevious: data.value?.activeContributorsTrendPrevious,
-    label: `Active ${orgDisplayName.value} contributors (last 365d)`,
+    label: `Active ${orgDisplayName.value} contributors (last 2 years)`,
   },
   {
     icon: 'user-shield',
     value: data.value?.maintainerRoles ?? 0,
     trend: undefined,
     trendAbsolute: undefined,
     trendPrevious: undefined,
-    label: `Maintainer roles held by ${orgDisplayName.value} contributors`,
+    label: `Maintainer roles held by ${orgDisplayName.value} contributors (last 2 years)`,
   },
   {
     icon: 'laptop-code',
     value: data.value?.criticalProjects ?? 0,
     trend: undefined,
     trendAbsolute: undefined,
     trendPrevious: undefined,
-    label: `Critical projects ${orgDisplayName.value} employees contributed to`,
+    label: `Critical projects ${orgDisplayName.value} employees contributed to (last 2 years)`,
   },
 ]);
 </script>

frontend/app/components/modules/organization/components/overview/projects-section.vue

@@ -17,29 +17,16 @@ SPDX-License-Identifier: MIT
         </div>
         <div class="flex-1 min-w-0">
           <h2 class="text-heading-5 font-bold font-secondary">Critical Projects</h2>
-          <p class="text-xs text-neutral-500 mt-0.5">{{ orgDisplayName }} contributors are involved in</p>
+          <p class="text-xs text-neutral-500 mt-0.5">
+            {{ orgDisplayName }} contributors are involved in (last 2 years)
+          </p>
         </div>
         <span class="w-full sm:w-auto text-xs text-neutral-500 flex items-center gap-1.5 sm:flex-shrink-0">
           <lfx-icon
             name="arrow-down-wide-short"
             :size="12"
           />
-          Sorted by
-          <lfx-tooltip placement="top">
-            <span class="border-b border-dotted border-neutral-500 cursor-help">Technical influence</span>
-            <template #content>
-              <div class="flex flex-col gap-2 max-w-xs text-xs leading-relaxed">
-                <span
-                  >Technical influence examines code activities (commits, PRs) while ecosystem influence examines
-                  non-code collaboration activities (documentation, committees, meetings, events).</span
-                >
-                <span
-                  >Comparing a company's share of these activities to the project total indicates greater influence in
-                  the project.</span
-                >
-              </div>
-            </template>
-          </lfx-tooltip>
+          Sorted by Contributors
         </span>
       </div>
 
@@ -50,7 +37,7 @@ SPDX-License-Identifier: MIT
             <div class="flex-[2]">Project</div>
             <div class="flex-1">Technical influence</div>
             <div class="flex-1">Contributors</div>
-            <div class="flex-1">Activities</div>
+            <div class="flex-1">Contributions</div>
             <div class="w-5" />
           </div>
           <div
@@ -98,7 +85,7 @@ SPDX-License-Identifier: MIT
               </lfx-tooltip>
             </div>
             <div class="flex-1">Contributors</div>
-            <div class="flex-1">Activities</div>
+            <div class="flex-1">Contributions</div>
             <div class="w-5" />
           </div>
 

frontend/docs/features/organization-page/index.md

@@ -4,32 +4,32 @@ Use the Organization Page to understand how your company contributes to critical
 
 ## Key Metrics
 
-Three numbers at the top of the page give you an at-a-glance health check of your organization's open source activity over the **last 365 days**:
+Three numbers at the top of the page give you an at-a-glance health check of your organization's open source activity over the **last 2 years**:
 
 - **Active contributors** — how many of your employees made at least one code contribution (commit, pull request, or code review). Shows a year-over-year trend so you can see if engagement is growing or declining.
-- **Maintainer roles** — how many maintainer or owner roles your contributors hold across all projects. A higher number signals deeper trust and influence in those communities.
+- **Maintainer roles** — how many maintainer or owner roles your contributors held across all projects in the last 2 years. A higher number signals deeper trust and influence in those communities.
 - **Critical projects** — how many distinct projects your team contributed to. Useful for gauging breadth of involvement.
 
-## Activity Over Time
+## Contributions Over Time
 
-A bar chart showing your organization's total code contributions per year, from the earliest recorded activity to today. Use it to spot periods of growth, sustained investment, or pullback across your open source program.
+A bar chart showing your organization's total code contributions per year for the last 10 years. Use it to spot periods of growth, sustained investment, or pullback across your open source program.
 
 ## Contributors Over Time
 
-A bar chart showing how many unique contributors your organization had per year. Pair it with the Activity chart to distinguish between a growing team and a shrinking one that's working harder.
+A bar chart showing how many unique contributors your organization had per year over the last 10 years. Pair it with the Contributions chart to distinguish between a growing team and a shrinking one that's working harder.
 
 ## Critical Projects
 
-A ranked table of the projects your contributors were involved in, ordered by **Technical influence** — your organization's share of code contributions relative to what the whole project community produced.
+A ranked table of the projects your contributors were involved in over the **last 2 years**, ordered by **Contributors** — the number of your employees active in that project.
 
 Each project row shows:
 
-- **Technical influence** — one of four levels based on your contribution share:
+- **Technical influence** — your organization's share of code contributions relative to what the whole project community produced, expressed as one of four levels:
   - **Leading** — a large share; your team is a primary driver of the project.
   - **Contributing** — a meaningful share; consistent and committed involvement.
   - **Participating** — a small but non-zero share; actively helping.
   - **Silent** — minimal or no code contribution activity.
-- **Contributors** — number of your employees active in that project.
-- **Activities** — total code contributions your team made.
+- **Contributors** — number of your employees active in that project (primary sort).
+- **Contributions** — total code contributions your team made.
 
-The table covers an extended rolling window of recent years and counts only code contribution activity types.
+The table counts only code contribution activity types (commits, pull requests, code reviews).