PM-4699 Add bubble skill statistics UI with mock data

src/apps/customer-portal/src/config/routes.config.ts

@@ -12,3 +12,4 @@ export const talentSearchRouteId = 'talent-search'
 export const showcaseSearchRouteId = 'showcase'
 export const flexiTalentRouteId = 'flexi-talent'
 export const statisticsRouteId = 'statistics'
+export const skillStatisticsRouteId = 'skill-statistics'

src/apps/customer-portal/src/customer-portal.routes.tsx

@@ -17,6 +17,7 @@ import {
 import { customerPortalFlexiTalentRoutes } from './pages/flexi-talent/flexi-talent.routes'
 import { customerPortalTalentSearchRoutes } from './pages/talent-search/talent-search.routes'
 import { customerPortalProjectShowcaseRoutes } from './pages/project-showcase/project-showcase.routes'
+import { customerPortalSkillStatisticsRoutes } from './pages/skill-statistics/skill-statistics.routes'
 import { customerPortalStatisticsRoutes } from './pages/statistics/statistics.routes'
 
 const CustomerPortalApp: LazyLoadedComponent = lazyLoad(() => import('./CustomerPortalApp'))
@@ -34,6 +35,7 @@ export const customerPortalRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '',
             },
             ...customerPortalStatisticsRoutes,
+            ...customerPortalSkillStatisticsRoutes,
             ...customerPortalTalentSearchRoutes,
             ...customerPortalProjectShowcaseRoutes,
             ...customerPortalFlexiTalentRoutes,

src/apps/customer-portal/src/lib/components/NavTabs/config/tabs-config.ts

@@ -4,6 +4,7 @@ import { TabsNavItem } from '~/libs/ui'
 import {
     flexiTalentRouteId,
     showcaseSearchRouteId,
+    skillStatisticsRouteId,
     statisticsRouteId,
     talentSearchRouteId,
 } from '~/apps/customer-portal/src/config/routes.config'
@@ -14,6 +15,9 @@ export function getTabsConfig(userRoles: string[], isAnonymous: boolean, isUnpri
         ...(!isUnprivilegedUser ? [{
             id: statisticsRouteId,
             title: 'General Statistics',
+        }, {
+            id: skillStatisticsRouteId,
+            title: 'Skill Statistics',
         }, {
             id: talentSearchRouteId,
             title: 'Talent Search',

src/apps/customer-portal/src/pages/skill-statistics/SkillStatisticsPage/SkillBubblesChart.module.scss

@@ -0,0 +1,300 @@
+@import '@libs/ui/styles/includes';
+
+.chart {
+    height: 560px;
+    min-height: 560px;
+    overflow: visible;
+    position: relative;
+    width: 100%;
+
+    @include ltemd {
+        height: 420px;
+        min-height: 420px;
+    }
+}
+
+.bubble {
+    align-items: center;
+    border: 0;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    padding: 8px;
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    transition: box-shadow 160ms ease, transform 160ms ease;
+    z-index: 1;
+
+    svg {
+        color: #fff;
+        flex: 0 0 auto;
+        margin-bottom: 4px;
+    }
+
+    &:hover,
+    &:focus-visible,
+    &.hovered {
+        box-shadow: 0 10px 28px rgba(10, 10, 10, 0.35);
+        z-index: 3;
+    }
+
+    &:focus-visible {
+        outline: 2px solid #078477;
+        outline-offset: 3px;
+    }
+}
+
+.selected {
+    box-shadow: 0 12px 32px rgba(10, 10, 10, 0.4);
+    z-index: 4;
+}
+
+.label {
+    display: -webkit-box;
+    font-family: 'Nunito Sans', sans-serif;
+    font-weight: 700;
+    line-height: 1.15;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+.popover {
+    background: #0f172a;
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Figtree', sans-serif;
+    gap: 16px;
+    padding: 24px;
+    pointer-events: none;
+    position: fixed;
+    transform: translate(-50%, calc(-100% - 8px));
+    width: 320px;
+    z-index: 2147483647;
+
+    &::after {
+        border-left: 9px solid transparent;
+        border-right: 9px solid transparent;
+        border-top: 8px solid #0f172a;
+        content: '';
+        height: 0;
+        left: 50%;
+        position: absolute;
+        top: 100%;
+        transform: translateX(-50%);
+        width: 0;
+    }
+
+    &.below {
+        transform: translate(-50%, 8px);
+
+        &::after {
+            border-bottom: 8px solid #0f172a;
+            border-top: 0;
+            bottom: 100%;
+            top: auto;
+        }
+    }
+
+    &.left {
+        transform: translate(calc(-100% - 8px), 0);
+
+        &::after {
+            border-bottom: 9px solid transparent;
+            border-left: 8px solid #0f172a;
+            border-right: 0;
+            border-top: 9px solid transparent;
+            left: 100%;
+            top: var(--arrow-offset, 50%);
+            transform: translateY(-50%);
+        }
+    }
+
+    &.right {
+        transform: translate(8px, 0);
+
+        &::after {
+            border-bottom: 9px solid transparent;
+            border-left: 0;
+            border-right: 8px solid #0f172a;
+            border-top: 9px solid transparent;
+            left: auto;
+            right: 100%;
+            top: var(--arrow-offset, 50%);
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.popoverTitle {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.metrics {
+    display: grid;
+    gap: 40px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.metric {
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    gap: 3px;
+}
+
+.metricValue {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+
+    img {
+        flex: 0 0 24px;
+        height: 24px;
+        width: 24px;
+    }
+
+    strong {
+        font-size: 24px;
+        font-weight: 600;
+        line-height: normal;
+        white-space: nowrap;
+    }
+}
+
+.breakdown {
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    gap: 10px;
+}
+
+.bar {
+    border-radius: 4px;
+    display: flex;
+    height: 24px;
+    overflow: hidden;
+    width: 100%;
+}
+
+.segment {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.legend {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.legendItem {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    min-width: 0;
+
+    > span:last-child {
+        max-width: 70px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.dot {
+    border-radius: 50%;
+    flex: 0 0 9px;
+    height: 9px;
+    width: 9px;
+}
+
+.topMember {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.topMemberContent {
+    align-items: center;
+    display: flex;
+    gap: 14px;
+    min-width: 0;
+}
+
+.avatar {
+    background-color: #d9d9d9;
+    background-position: center;
+    background-size: cover;
+    border-radius: 50%;
+    display: block;
+    flex: 0 0 40px;
+    height: 40px;
+    overflow: hidden;
+    position: relative;
+    width: 40px;
+}
+
+.avatarHead {
+    background: #aab6c2;
+    border-radius: 50%;
+    height: 14px;
+    left: 13px;
+    position: absolute;
+    top: 7px;
+    width: 14px;
+}
+
+.avatarBody {
+    background: #aab6c2;
+    border-radius: 16px 16px 8px 8px;
+    bottom: -2px;
+    height: 18px;
+    left: 7px;
+    position: absolute;
+    width: 26px;
+}
+
+.handle {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #3877EA;
+}
+
+.memberStats {
+    align-items: center;
+    display: flex;
+    font-size: 12px;
+    gap: 5px;
+    line-height: normal;
+    white-space: nowrap;
+}
+
+.flag {
+    flex: 0 0 16px;
+    height: 16px;
+    width: 16px;
+}
+
+.divider {
+    margin: 0 5px;
+}