feat: rewrite Teaching Stats

.eslintrc.json

@@ -56,6 +56,12 @@
         "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
+    },
+    {
+      "files": ["**/*.spec.ts"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
     }
   ]
 }

angular.json

@@ -79,7 +79,14 @@
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular/build:unit-test"
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "coverage": true,
+            "coverageExclude": [
+              "**/*.html"
+            ]
+          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

src/app/custom_types/means-graph.type.ts

@@ -2,3 +2,5 @@ import { AcademicYear } from '@values/years';
 
 export type Means = [number[], number[][]];
 export type MeansPerYear = Record<AcademicYear, Means>;
+
+export type DisclaimerType = 'info' | 'warning';

src/app/enums/chart-typology.enum.ts

@@ -0,0 +1,7 @@
+export const GraphSelection = {
+  CDS_GENERAL: 'cds_general',
+  TEACHINGS_CDS: 'teaching_cds',
+  YEAR: 'cds_year',
+} as const;
+
+export type GraphSelectionType = (typeof GraphSelection)[keyof typeof GraphSelection];

src/app/interfaces/cds.interface.ts

@@ -1,5 +1,4 @@
 import { Teaching } from './teaching.interface';
-import { GraphView } from './graph-config.interface';
 import { MeansPerYear } from '@c_types/means-graph.type';
 
 export interface CDS {
@@ -18,10 +17,5 @@ export interface CDS {
 
 export interface AllCdsInfoResp {
   teachings: Teaching[];
-  coarse: MeansPerYear;
-  graphs: {
-    cds_stats: GraphView;
-    // cds_stats_by_year: ChartData,
-    // cds_techings: ChartData
-  };
+  courses: MeansPerYear;
 }

src/app/interfaces/graph-config.interface.ts

@@ -1,6 +1,30 @@
+import { DisclaimerType } from '@c_types/means-graph.type';
+import { GraphSelectionType } from '@enums/chart-typology.enum';
 import { ChartData, ChartType } from 'chart.js';
 
 export interface GraphView {
   type: ChartType;
   data: ChartData;
 }
+
+export interface GraphSelectionBtn {
+  value: GraphSelectionType;
+  active: boolean;
+  description: string;
+  label: string;
+  icon: string;
+}
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+export interface DisclaimerInfo {
+  title: string;
+  description: string;
+  type: DisclaimerType;
+  icon: string;
+  isAccordion: boolean;
+  isOpen: boolean;
+}

src/app/mappers/graph.mapper.ts

@@ -0,0 +1,56 @@
+import { MeansPerYear } from '@c_types/means-graph.type';
+import { GraphView } from '@interfaces/graph-config.interface';
+import { SchedaOpis } from '@interfaces/opis-record.interface';
+import { typedKeys } from '@utils/object-helpers.utils';
+import { ACADEMIC_YEARS, AcademicYear } from '@values/years';
+
+/**
+ * Pure mapping class: transforms pre-computed data into GraphView objects
+ * compatible with ng-chart. No injected dependencies, no state.
+ * Use static methods directly wherever needed (service, component, resolver).
+ */
+export class GraphMapper {
+  private static buildLineGraph(means: MeansPerYear): GraphView {
+    const labels: AcademicYear[] = [];
+    const v1: number[] = [];
+    const v2: number[] = [];
+    const v3: number[] = [];
+
+    for (const year of typedKeys(means)) {
+      const [yearMeans] = means[year];
+      labels.push(year);
+      v1.push(yearMeans[0]);
+      v2.push(yearMeans[1]);
+      v3.push(yearMeans[2]);
+    }
+
+    return {
+      type: 'line',
+      data: {
+        labels,
+        datasets: [
+          { label: 'V1', data: [...v1] },
+          { label: 'V2', data: [...v2] },
+          { label: 'V3', data: [...v3] },
+        ],
+      },
+    };
+  }
+
+  static groupByYear<T extends { anno_accademico: string }>(
+    items: T[],
+    getScheda: (item: T) => SchedaOpis,
+  ): Record<AcademicYear, SchedaOpis[]> {
+    const initial = Object.fromEntries(
+      ACADEMIC_YEARS.map((year) => [year, []]),
+    ) as unknown as Record<AcademicYear, SchedaOpis[]>;
+
+    return items.reduce((acc, item) => {
+      const year = item.anno_accademico as AcademicYear;
+      acc[year]?.push(getScheda(item));
+      return acc;
+    }, initial);
+  }
+  static toCdsGeneralGraph = GraphMapper.buildLineGraph;
+  static toTeachingGraph = GraphMapper.buildLineGraph;
+}

src/app/mocks/scheda-mock.ts

@@ -0,0 +1,29 @@
+import { SchedaOpis } from "@interfaces/opis-record.interface";
+
+export const exampleSchedaOpis: SchedaOpis = {
+  id: 1,
+  anno_accademico: '2023/2024',
+  totale_schede: 10,
+  totale_schede_nf: 0,
+  femmine: 0,
+  femmine_nf: 0,
+  fc: 0,
+  inatt: 0,
+  inatt_nf: 0,
+  eta: null,
+  anno_iscr: null,
+  num_studenti: null,
+  ragg_uni: null,
+  studio_gg: null,
+  studio_tot: null,
+  domande: [
+    [10, 0, 0, 0], // Q1 → d=10, V1 += (10/10)*1 = 1
+    [0, 10, 0, 0], // Q2 → d=40, V2 += (40/10)*1 = 4
+    [0, 0, 10, 0], // Q3 → d=70, V3 += (70/10)*1 = 7
+  ],
+  domande_nf: null,
+  motivo_nf: null,
+  sugg: null,
+  sugg_nf: null,
+  id_insegnamento: 1,
+};

src/app/pages/department/department.html

@@ -1,32 +1,51 @@
 <section id="department-page">
   @if (department() !== null) {
     <div class="department-title">
-      <div class="department-title-top">
+      <div class="department-title-top wrapper">
         <a routerLink="/home">
           <opis-icon iconName="arrow_circle_left" />
           <span class="text"> Torna indietro </span>
         </a>
         <h1>{{ department()?.anno_accademico }}</h1>
       </div>
-      <div class="department-title-bottom" [attr.data-icon]="department()?.icon">
+      <div class="department-title-bottom wrapper" [attr.data-icon]="department()?.icon">
         <h2>{{ department()?.nome }}</h2>
       </div>
     </div>
 
-    <section id="cds" [class.loading]="cdsList.isLoading()">
+    <section id="cds" class="wrapper" [class.loading]="cdsList.isLoading()">
       @if (cdsList.isLoading()) {
         <opis-loader />
       } @else {
         <div class="cds-title">
-          @if (isCdsSelected) {
-            <button (click)="selectCds(NO_CHOICE_VALUE)">
-              <opis-icon iconName="backspace" />
-            </button>
+          <div class="cds-title-name">
+            @if (isCdsSelected()) {
+              <button (click)="selectCds(NO_CHOICE_VALUE)">
+                <opis-icon iconName="backspace" />
+              </button>
+            }
+            <h3>( {{ cds().classe }} ) {{ cds().nome }}</h3>
+          </div>
+
+          @if (isCdsSelected()) {
+            <div class="cds-title-graph btn-nav">
+              @for (graphBtn of graphBtns(); track $index) {
+                <button
+                  [disabled]="isLoading()"
+                  class="btn-nav-item"
+                  [class.active]="graphBtn.active"
+                  type="button"
+                  (click)="selectGraphType(graphBtn.value)"
+                >
+                  <opis-icon [iconName]="graphBtn.icon" />
+                  <span class="btn-nav-item-text">{{ graphBtn.label }}</span>
+                </button>
+              }
+            </div>
           }
-          <h3>( {{ cds().classe }} ) {{ cds().nome }}</h3>
         </div>
 
-        @if (!isCdsSelected) {
+        @if (!isCdsSelected()) {
           <ul class="cds-list">
             @let allCds = cdsList.value();
 
@@ -43,8 +62,9 @@ <h3>( {{ cds().classe }} ) {{ cds().nome }}</h3>
       }
     </section>
 
-    @if (isCdsSelected) {
-      <opis-cds-selected-section />
+    @if (isCdsSelected()) {
+      <opis-disclaimers class="wrapper" [disclaimers]="GroupsDisclaimers" />
+      <opis-cds-selected-section class="wrapper" />
     }
   }
 </section>

src/app/pages/department/department.scss

@@ -9,7 +9,6 @@
       display: inline-flex;
       align-items: center;
       justify-content: space-between;
-      width: 100%;
 
       a {
         margin-bottom: 1rem;
@@ -43,10 +42,6 @@
           padding-right: 1.5rem;
         }
       }
-
-      @media (min-width: 1300px) {
-        width: 70%;
-      }
     }
 
     &-bottom {
@@ -85,7 +80,6 @@
       }
 
       @media (min-width: 1300px) {
-        width: 70%;
         padding: 3rem 1rem;
       }
     }
@@ -96,7 +90,6 @@
     display: flex;
     flex-direction: column;
     align-items: start;
-    width: 90%;
     margin: 0 auto;
 
     h3 {
@@ -111,12 +104,28 @@
 
     .cds {
       &-title {
-        display: inline-flex;
-        align-items: start;
-        justify-content: start;
-        gap: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1.7rem;
+        width: 100%;
         margin-top: 1rem;
         margin-bottom: 1.2rem;
+
+        &-name {
+          display: inline-flex;
+          align-items: start;
+          gap: 1rem;
+        }
+
+        &-graph {
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+
+          @media (min-width: 800px) {
+            justify-content: space-evenly;
+          }
+        }
       }
 
       &-list {
@@ -159,9 +168,5 @@
         }
       }
     }
-
-    @media (min-width: 1300px) {
-      width: 70%;
-    }
   }
 }