Adds Program Overview and Property Insights

package.json

@@ -51,6 +51,9 @@
     "@jsverse/transloco": "^7.5.1",
     "ag-grid-angular": "^33.1.1",
     "ag-grid-community": "^33.1.1",
+    "chart.js": "^4.5.0",
+    "chartjs-plugin-annotation": "^3.1.0",
+    "chartjs-plugin-zoom": "^2.2.0",
     "crypto-es": "^2.1.0",
     "cspell": "^8.17.3",
     "file-saver": "^2.0.5",

src/@seed/api/dataset/dataset.types.ts

@@ -67,6 +67,7 @@ export type DataMappingRow = {
   omit?: boolean; // optional, used for omitting columns
   isExtraData?: boolean; // used internally, not part of the API
   isNewColumn?: boolean; // used internally, not part of the API
+  hasDuplicate?: boolean; // used internally, not part of the API
 }
 
 export type MappedData = {

src/@seed/api/index.ts

@@ -18,6 +18,7 @@ export * from './notes'
 export * from './organization'
 export * from './pairing'
 export * from './postoffice'
+export * from './program'
 export * from './progress'
 export * from './salesforce'
 export * from './scenario'

src/@seed/api/program/index.ts

@@ -0,0 +1,2 @@
+export * from './program.service'
+export * from './program.types'

src/@seed/api/program/program.service.ts

@@ -0,0 +1,93 @@
+import type { HttpErrorResponse } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http'
+import { inject, Injectable } from '@angular/core'
+import type { Observable } from 'rxjs'
+import { BehaviorSubject, catchError, map, tap } from 'rxjs'
+import { ErrorService } from '@seed/services'
+import { SnackBarService } from 'app/core/snack-bar/snack-bar.service'
+import { UserService } from '../user'
+import type { Program, ProgramData, ProgramResponse, ProgramsResponse } from './program.types'
+
+@Injectable({ providedIn: 'root' })
+export class ProgramService {
+  private _httpClient = inject(HttpClient)
+  private _programs = new BehaviorSubject<Program[]>([])
+  // private _programs = new ReplaySubject<Program[]>(1)
+  private _errorService = inject(ErrorService)
+  private _snackBar = inject(SnackBarService)
+  private _userService = inject(UserService)
+  programs$ = this._programs
+  orgId: number
+
+  constructor() {
+    this._userService.currentOrganizationId$
+      .pipe(
+        tap((orgId) => { this.list(orgId) }),
+      )
+      .subscribe()
+  }
+
+  list(orgId: number) {
+    const url = `/api/v3/compliance_metrics/?organization_id=${orgId}`
+    this._httpClient.get<ProgramsResponse>(url).pipe(
+      map(({ compliance_metrics }) => {
+        this.programs$.next(compliance_metrics)
+        return compliance_metrics
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error fetching Programs')
+      }),
+    ).subscribe()
+  }
+
+  create(orgId: number, data: Program): Observable<ProgramResponse> {
+    const url = `/api/v3/compliance_metrics/?organization_id=${orgId}`
+    return this._httpClient.post<ProgramResponse>(url, data).pipe(
+      tap(() => {
+        this.list(orgId)
+        this._snackBar.success('Successfully created Program')
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error creating Program')
+      }),
+    )
+  }
+
+  update(orgId: number, programId: number, data: Program): Observable<ProgramResponse> {
+    const url = `/api/v3/compliance_metrics/${programId}/?organization_id=${orgId}`
+    return this._httpClient.put<ProgramResponse>(url, data).pipe(
+      tap(() => {
+        this.list(orgId)
+        this._snackBar.success('Successfully updated Program')
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error updating Program')
+      }),
+    )
+  }
+
+  delete(orgId: number, programId: number): Observable<ProgramResponse> {
+    const url = `/api/v3/compliance_metrics/${programId}/?organization_id=${orgId}`
+    return this._httpClient.delete<ProgramResponse>(url).pipe(
+      tap(() => {
+        this.list(orgId)
+        this._snackBar.success('Successfully deleted Program')
+      }),
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error deleting Program')
+      }),
+    )
+  }
+
+  evaluate(orgId: number, programId: number, aliId: number = null): Observable<ProgramData> {
+    let url = `/api/v3/compliance_metrics/${programId}/evaluate/?organization_id=${orgId}`
+    if (aliId) url += `&access_level_instance_id=${aliId}`
+
+    return this._httpClient.get<{ data: ProgramData }>(url).pipe(
+      map(({ data }) => data),
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error evaluating Program')
+      }),
+    )
+  }
+}

src/@seed/api/program/program.types.ts

@@ -0,0 +1,79 @@
+import type { ChartDataset } from 'chart.js'
+
+export type Program = {
+  actual_emission_column: number;
+  actual_energy_column: number;
+  cycles: number[];
+  emission_metric_type: string;
+  energy_metric_type: string;
+  filter_group: null;
+  id: number;
+  name: string;
+  organization_id: number;
+  target_emission_column: number;
+  target_energy_column: number;
+  x_axis_columns: number[];
+  energy_bool?: boolean;
+  emission_bool?: boolean;
+}
+
+export type EvaluatedProgram = {
+  actual_emission_column: number;
+  actual_emission_column_name: string;
+  actual_energy_column: number;
+  actual_energy_column_name: string;
+  cycles: { id: number; name: string }[];
+  emission_bool: boolean;
+  emission_metric: boolean;
+  emission_metric_type: number;
+  energy_bool: boolean;
+  energy_metric: boolean;
+  energy_metric_type: number;
+  filter_group: number;
+  target_emission_column: number;
+  target_energy_column: number;
+}
+
+export type ProgramsResponse = {
+  status: string;
+  compliance_metrics: Program[];
+}
+
+export type ProgramResponse = {
+  status: string;
+  compliance_metric: Program;
+}
+
+export type ProgramData = {
+  cycles: { id: number; name: string }[];
+  graph_data: GraphData;
+  meta: { organization: number; compliance_metric: number };
+  metric: EvaluatedProgram;
+  name: string;
+  properties_by_cycles: Record<number, Record<string, unknown>[]>;
+  results_by_cycles: ResultsByCycles;
+}
+
+// compliant -> n: No, u: Unknown, y: Yes
+export type ResultsByCycles = { n: number[]; u: number[]; y: number[] }
+
+type GraphData = {
+  datasets: { data: number[]; label: string; backgroundColor?: string }[];
+  labels: string[];
+}
+
+export type PropertyInsightDataset = ChartDataset<'scatter', PropertyInsightPoint[]>
+
+export type PropertyInsightPoint = {
+  id: number;
+  name: string;
+  x: number;
+  y: number;
+  target: number;
+  distance?: number;
+}
+
+export type SimpleCartesianScale = {
+  type: 'linear' | 'category';
+  title: { display: boolean; text: string };
+}

src/@seed/materials/material.module.ts

@@ -16,7 +16,7 @@ import { MatMenuModule } from '@angular/material/menu'
 import { MatPaginatorModule } from '@angular/material/paginator'
 import { MatProgressBarModule } from '@angular/material/progress-bar'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { MatSelectModule } from '@angular/material/select'
+import { MatSelectModule, MatSelectTrigger } from '@angular/material/select'
 import { MatSidenavModule } from '@angular/material/sidenav'
 import { MatSlideToggleModule } from '@angular/material/slide-toggle'
 import { MatSortModule } from '@angular/material/sort'
@@ -47,6 +47,7 @@ export const MaterialImports = [
   MatOptionModule,
   MatSelectModule,
   MatStepperModule,
+  MatSelectTrigger,
   MatSidenavModule,
   MatSlideToggleModule,
   MatSortModule,

src/app/ag-grid-modules.ts

@@ -9,6 +9,7 @@ import {
   PaginationModule,
   RenderApiModule,
   RowApiModule,
+  RowStyleModule,
   SelectEditorModule,
   TextEditorModule,
   ValidationModule,
@@ -24,6 +25,7 @@ ModuleRegistry.registerModules([
   PaginationModule,
   RenderApiModule,
   RowApiModule,
+  RowStyleModule,
   SelectEditorModule,
   TextEditorModule,
   ValidationModule,

src/app/chartjs-setup.ts

@@ -0,0 +1,7 @@
+import { Chart, registerables } from 'chart.js'
+import annotationPlugin from 'chartjs-plugin-annotation'
+import zoomPlugin from 'chartjs-plugin-zoom'
+
+Chart.register(...registerables)
+Chart.register(annotationPlugin)
+Chart.register(zoomPlugin)

src/app/core/navigation/navigation.service.ts

@@ -198,7 +198,7 @@ export class NavigationService {
           id: 'insights/program-overview',
           link: '/insights/program-overview',
           title: 'Program Overview',
-          icon: 'fa-solid:chart-simple',
+          icon: 'fa-solid:chart-column',
           type: 'basic',
         },
         {

src/app/modules/datasets/data-mappings/step1/column-defs.ts

@@ -3,12 +3,6 @@ import { EditHeaderComponent } from '@seed/components'
 import { AutocompleteCellComponent } from '@seed/components/ag-grid/autocomplete.component'
 import { dataTypeOptions, unitMap } from './constants'
 
-export const gridOptions = {
-  singleClickEdit: true,
-  suppressMovableColumns: true,
-  // defaultColDef: { cellClass: (params: CellClassParams) => params.colDef.editable ? 'bg-primary bg-opacity-25' : '' },
-}
-
 // Special cases
 const canEdit = (to_data_type: string, field: string, isNewColumn: boolean): boolean => {
   const editMap: Record<string, boolean> = {