Feat/153 analytics page

jest.config.js

@@ -11,12 +11,15 @@ module.exports = {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',
       {
-        tsconfig: '<rootDir>/tsconfig.json',
+        tsconfig: '<rootDir>/tsconfig.spec.json',
         stringifyContentPathRegex: '\\.(html|svg)$',
+        useESM: true,
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|@ngxs|@angular|@ngrx|parse5|entities|chart.js)'
+  ],
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
   coverageDirectory: 'coverage',
@@ -27,4 +30,5 @@ module.exports = {
     '!src/app/**/index.ts',
     '!src/app/**/public-api.ts',
   ],
+  extensionsToTreatAsEsm: ['.ts'],
 };

package.json

@@ -35,6 +35,7 @@
     "@ngxs/logger-plugin": "^19.0.0",
     "@ngxs/store": "^19.0.0",
     "@primeng/themes": "^19.0.9",
+    "chart.js": "^4.4.9",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^19.0.9",

src/app/app.routes.ts

@@ -103,6 +103,11 @@ export const routes: Routes = [
                 (mod) => mod.RegistrationsComponent
               ),
           },
+          {
+            path: 'analytics',
+            loadComponent: () =>
+              import('@osf/features/project/analytics/analytics.component').then((mod) => mod.AnalyticsComponent),
+          },
         ],
       },
       {

src/app/core/components/footer/footer.component.html

@@ -2,11 +2,11 @@
   <div class="footer-content">
     <div class="footer-nav">
       <div class="footer-links">
-        <a href="#">{{ 'footer.links.centerForOpenScience' | translate }}</a>
+        <a href="https://cos.io/">{{ 'footer.links.centerForOpenScience' | translate }}</a>
         <span class="separator">|</span>
-        <a href="#">{{ 'footer.links.reproducibilityProjectPsychology' | translate }}</a>
+        <a>{{ 'footer.links.reproducibilityProjectPsychology' | translate }}</a>
         <span class="separator">|</span>
-        <a href="#">{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
+        <a>{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
       </div>
 
       <div class="footer-socials">
@@ -29,11 +29,11 @@
         <span class="separator">|</span>
         <a routerLink="/privacy-policy">{{ 'footer.links.privacyPolicy' | translate }}</a>
         <span class="separator">|</span>
-        <a href="#">{{ 'footer.links.status' | translate }}</a>
+        <a href="https://status.cos.io/">{{ 'footer.links.status' | translate }}</a>
         <span class="separator">|</span>
-        <a href="#">{{ 'footer.links.api' | translate }}</a>
+        <a href="https://developer.osf.io/">{{ 'footer.links.api' | translate }}</a>
         <span class="separator">|</span>
-        <a href="#">{{ 'footer.links.topGuidelines' | translate }}</a>
+        <a href="https://www.cos.io/initiatives/top-guidelines">{{ 'footer.links.topGuidelines' | translate }}</a>
       </div>
 
       <div class="footer-copyright">{{ 'footer.copyright' | translate }}</div>

src/app/core/components/footer/footer.component.ts

@@ -24,22 +24,22 @@ export class FooterComponent {
   protected readonly socialIcons: SocialIcon[] = [
     {
       name: 'x',
-      url: '#',
+      url: 'https://x.com/OSFramework',
       ariaLabel: 'X (formerly Twitter)',
     },
     {
       name: 'facebook',
-      url: '#',
+      url: 'https://www.facebook.com/CenterForOpenScience/',
       ariaLabel: 'Facebook',
     },
     {
       name: 'group',
-      url: '#',
+      url: 'https://groups.google.com/g/openscienceframework',
       ariaLabel: 'Group',
     },
     {
       name: 'github',
-      url: '#',
+      url: 'https://github.com/centerforopenscience',
       ariaLabel: 'GitHub',
     },
   ];

src/app/core/components/nav-menu/nav-menu.component.html

@@ -9,7 +9,7 @@
         }"
         class="nav-link flex"
         [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
-        (click)="goToLink()"
+        (click)="goToLink(item)"
       >
         @if (item.icon) {
           <i [class]="item.icon" class="nav-icon"></i>
@@ -29,6 +29,7 @@
                 [routerLinkActive]="item.routerLink ? 'active' : ''"
                 [routerLinkActiveOptions]="{ exact: true }"
                 class="nav-link flex"
+                (click)="goToLink(item)"
               >
                 @if (item.icon) {
                   <i [class]="item.icon" class="nav-icon"></i>

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -63,7 +63,9 @@ export class NavMenuComponent {
     return { projectId, section };
   }
 
-  goToLink() {
-    this.closeMenu.emit();
+  goToLink(item: MenuItem) {
+    if (!item.items) {
+      this.closeMenu.emit();
+    }
   }
 }

src/app/core/components/sidenav/sidenav.component.html

@@ -1,4 +1,4 @@
-<aside>
+<aside class="custom-scrollbar">
   <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
   <osf-nav-menu />
 </aside>

src/app/core/components/sidenav/sidenav.component.scss

@@ -5,4 +5,5 @@ aside {
   gap: 1.8rem;
   width: 19.5rem;
   padding: 1.8rem 1rem 1.8rem 1.6rem;
+  height: 100%;
 }

src/app/core/components/topnav/topnav.component.scss

@@ -8,7 +8,7 @@
     @include mix.flex-center-between;
     background: var.$dark-blue-1;
     padding: 1.8rem 1.6rem;
-    color: white;
+    color: var.$white;
 
     .topnav-icon {
       font-size: 2.1rem;

src/app/core/constants/nav-items.constant.ts

@@ -15,12 +15,13 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'search',
     useExactMatch: true,
   },
-  {
-    path: '/support',
-    label: 'navigation.support',
-    icon: 'support',
-    useExactMatch: true,
-  },
+  // [NS] TODO: Hidden until development
+  // {
+  //   path: '/support',
+  //   label: 'navigation.support',
+  //   icon: 'support',
+  //   useExactMatch: true,
+  // },
   {
     path: '/my-projects',
     label: 'navigation.myProjects',
@@ -66,12 +67,14 @@ export const NAV_ITEMS: NavItem[] = [
       },
     ],
   },
-  {
-    path: '/donate',
-    label: 'navigation.donate',
-    icon: 'donate',
-    useExactMatch: true,
-  },
+
+  //[NS] TODO: Hidden until development
+  // {
+  //   path: '/donate',
+  //   label: 'navigation.donate',
+  //   icon: 'donate',
+  //   useExactMatch: true,
+  // },
 ];
 
 export const PROJECT_MENU_ITEMS: MenuItem[] = [
@@ -87,6 +90,7 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
         label: 'navigation.project.registrations',
         routerLink: 'registrations',
       },
+      { label: 'navigation.project.analytics', routerLink: 'analytics' },
     ],
   },
 ];

src/app/core/constants/ngxs-states.constant.ts

@@ -2,6 +2,7 @@ import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
 import { InstitutionsState } from '@osf/features/institutions/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
+import { AnalyticsState } from '@osf/features/project/analytics/store';
 import { SearchState } from '@osf/features/search/store';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { AddonsState } from '@osf/features/settings/addons/store';
@@ -20,4 +21,5 @@ export const STATES = [
   ProfileSettingsState,
   DeveloperAppsState,
   AccountSettingsState,
+  AnalyticsState,
 ];

src/app/features/auth/forgot-password/forgot-password.component.scss

@@ -15,7 +15,7 @@
     flex: 1;
     gap: 1.2rem;
     padding: 2rem;
-    background: white;
+    background: var.$white;
     border-radius: 0.6rem;
     box-shadow: 0 2px 4px var.$grey-outline;
 

src/app/features/auth/reset-password/reset-password.component.scss

@@ -15,7 +15,7 @@
     flex: 1;
     gap: 1.2rem;
     padding: 2rem;
-    background: white;
+    background: var.$white;
     border-radius: 0.6rem;
     box-shadow: 0 2px 4px var.$grey-outline;
 

src/app/features/auth/sign-up/sign-up.component.scss

@@ -14,7 +14,7 @@
     width: 32rem;
     margin: 4.5rem 0 1.5rem 0;
     padding: 2rem;
-    background: white;
+    background: var.$white;
     border-radius: 0.6rem;
     box-shadow: 0 2px 4px var.$grey-outline;
 
@@ -32,7 +32,7 @@
       flex: 1;
 
       .divider-text {
-        background: white;
+        background: var.$white;
       }
 
       .btn-group {

src/app/features/home/home.component.scss

@@ -29,7 +29,7 @@
   }
 
   .quick-search-container {
-    background: white;
+    background: var.$white;
     padding: 2rem;
 
     .text-center {
@@ -70,7 +70,7 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    background: white;
+    background: var.$white;
     padding: 1.71rem;
     column-gap: 1.71rem;
 

src/app/features/my-profile/my-profile.component.scss

@@ -80,7 +80,7 @@
 
   .resources {
     position: relative;
-    background: white;
+    background: var.$white;
     padding: 2rem;
   }
 
@@ -91,9 +91,10 @@
     display: flex;
     flex-direction: column;
     row-gap: 1.7rem;
-    background: white;
+    background: var.$white;
     border: 1px solid var.$grey-2;
     border-radius: 12px;
+
     h3 {
       font-size: 1.3rem;
     }

src/app/features/privacy-policy/privacy-policy.component.scss

@@ -1,7 +1,7 @@
 @use "assets/styles/variables" as var;
 
 :host {
-  background-color: white;
+  background-color: var.$white;
 
   .container {
     margin-top: 4.5rem;

src/app/features/project/analytics/analytics.component.html

@@ -0,0 +1,85 @@
+<osf-sub-header [title]="'navigation.project.analytics' | translate"></osf-sub-header>
+
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4">
+  <div class="flex flex-column sm:flex-row sm:justify-content-between gap-3 sm:gap-4">
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.forks'"
+      [value]="relatedCounts()?.forksCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewForks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.linksToThisProject'"
+      [value]="relatedCounts()?.linksToCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewLinks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.templateCopies'"
+      [value]="relatedCounts()?.templateCount"
+    ></osf-analytics-kpi>
+  </div>
+
+  <div class="flex align-items-center justify-content-end mt-6">
+    <label class="date-range-label" for="date-range">{{ 'project.analytics.charts.showAnalytics' | translate }}</label>
+
+    <p-select
+      class="ml-3"
+      inputId="date-range"
+      [options]="rangeOptions"
+      optionLabel="dateRange"
+      [ngModel]="selectedRange()"
+      (ngModelChange)="onRangeChange($event)"
+      [disabled]="isMetricsError() || isMetricsLoading()"
+    >
+      <ng-template #selectedItem let-selectedOption>
+        {{ selectedOption.label | translate }}
+      </ng-template>
+
+      <ng-template #item let-item>
+        {{ item.label | translate }}
+      </ng-template>
+    </p-select>
+  </div>
+
+  <div class="flex flex-column xl:flex-row flex-wrap gap-4" [class]="{ disabled: isMetricsError() }">
+    <osf-line-chart
+      class="chart xl-half-width"
+      [isLoading]="isMetricsLoading()"
+      [title]="'project.analytics.charts.uniqueVisits'"
+      [labels]="visitsLabels"
+      [datasets]="visitsDataset"
+    ></osf-line-chart>
+
+    <osf-bar-chart
+      class="chart xl-half-width"
+      [isLoading]="isMetricsLoading()"
+      [title]="'project.analytics.charts.timeOfDayOfVisits'"
+      [labels]="totalVisitsLabels"
+      [datasets]="totalVisitsDataset"
+      [orientation]="'vertical'"
+    ></osf-bar-chart>
+
+    <osf-pie-chart
+      class="chart xl-half-width"
+      [isLoading]="isMetricsLoading()"
+      [title]="'project.analytics.charts.topReferrers'"
+      [labels]="topReferrersLabels"
+      [datasets]="topReferrersDataset"
+      [showLegend]="true"
+    ></osf-pie-chart>
+
+    <osf-bar-chart
+      class="chart xl-half-width"
+      [isLoading]="isMetricsLoading()"
+      [title]="'project.analytics.charts.popularPages'"
+      [labels]="popularPagesLabels"
+      [datasets]="popularPagesDataset"
+    ></osf-bar-chart>
+  </div>
+</section>