Adds Program Overview and Property Insights (#55)

* program config

* guard org mismatch on load inventory

* program overview fxnal sans click events

* property insights dev

* property inisghts base

* mark duplicates in data mapping

* legend toggle visibility

* click to detail

* overview and insights unique components

* remove program wrapper

* insight ali fxnal

* dev

* limit duplicate network calls and timing

* results and missing url id

* form options update after program update

* expandable data table

* labels

* ranked and sorted labels

* form populate ali

* set results, use getters

* lint

* visibility logic

* Lint fixes

* Fixes, added filter group, activate new program on save

---------

Co-authored-by: Alex Swindler <Alex.Swindler@nrel.gov>

Author: perryr16

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",

pnpm-lock.yaml

@@ -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/dataset/dataset.types.ts

@@ -0,0 +1,46 @@
+import type { HttpErrorResponse } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http'
+import { inject, Injectable } from '@angular/core'
+import { BehaviorSubject, catchError, map, take, tap } from 'rxjs'
+import { ErrorService } from '@seed/services'
+import { naturalSort } from '@seed/utils'
+import { UserService } from '../user'
+import type { FilterGroup, FilterGroupInventoryType, FilterGroupsResponse } from './filter-group.types'
+
+@Injectable({ providedIn: 'root' })
+export class FilterGroupService {
+  private _errorService = inject(ErrorService)
+  private _filterGroups = new BehaviorSubject<FilterGroup[]>([])
+  private _httpClient = inject(HttpClient)
+  private _userService = inject(UserService)
+
+  filterGroups$ = this._filterGroups.asObservable()
+
+  constructor() {
+    this._userService.currentOrganizationId$
+      .pipe(
+        tap((orgId) => {
+          this.list(orgId, 'Property')
+        }),
+      )
+      .subscribe()
+  }
+
+  list(orgId: number, inventoryType: FilterGroupInventoryType = 'Property') {
+    const url = `/api/v3/filter_groups/?organization_id=${orgId}&inventory_type=${inventoryType}`
+    this._httpClient
+      .get<FilterGroupsResponse>(url)
+      .pipe(
+        take(1),
+        map(({ data }) => {
+          const filterGroups = data.toSorted((a, b) => naturalSort(a.name, b.name))
+          this._filterGroups.next(filterGroups)
+          return filterGroups
+        }),
+        catchError((error: HttpErrorResponse) => {
+          return this._errorService.handleError(error, 'Error fetching filter groups')
+        }),
+      )
+      .subscribe()
+  }
+}

src/@seed/api/filter-group/filter-group.service.ts

@@ -0,0 +1,15 @@
+export type FilterGroupInventoryType = 'Property' | 'Tax Lot'
+
+// TODO there are more fields returned that could be added here
+export type FilterGroup = {
+  id: number;
+  name: string;
+  organization_id: number;
+  inventory_type: FilterGroupInventoryType;
+}
+
+// TODO this has unhandled pagination
+export type FilterGroupsResponse = {
+  status: string;
+  data: FilterGroup[];
+}

src/@seed/api/filter-group/filter-group.types.ts

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

src/@seed/api/filter-group/index.ts

@@ -9,6 +9,7 @@ export * from './data-quality'
 export * from './dataset'
 export * from './derived-column'
 export * from './geocode'
+export * from './filter-group'
 export * from './groups'
 export * from './inventory'
 export * from './label'
@@ -18,6 +19,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/index.ts

@@ -107,6 +107,7 @@ export type OrganizationUserSettings = {
   profile?: UserSettingsProfiles;
   crossCycles?: UserSettingsCrossCycles;
   labels?: UserLabelSettings;
+  insights?: InsightsUserSettings;
 }
 
 type UserSettingsFilters = {
@@ -131,6 +132,22 @@ type UserSettingsCrossCycles = {
 
 type UserLabelSettings = { ids: number[]; operator: LabelOperator }
 
+export type InsightDatasetVisibility = 'compliant' | 'non-compliant' | 'unknown' | 'whisker'
+
+export type PropertyInsightsUserSettings = {
+  programId?: number | null;
+  cycleId?: number | null;
+  metricType?: 0 | 1 | null;
+  xAxisColumnId?: number | null;
+  accessLevel?: string | null;
+  accessLevelInstanceId?: number | null;
+  datasetVisibility?: InsightDatasetVisibility[];
+}
+
+export type InsightsUserSettings = {
+  propertyInsights?: PropertyInsightsUserSettings;
+}
+
 export type OrganizationUsersResponse = {
   users: OrganizationUser[];
   status: string;

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

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

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

@@ -0,0 +1,121 @@
+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, ProgramUpsertPayload } 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: ProgramUpsertPayload): Observable<ProgramResponse> {
+    const url = `/api/v3/compliance_metrics/?organization_id=${orgId}`
+    const payload = this._normalizePayload(data)
+    return this._httpClient.post<ProgramResponse>(url, payload).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: ProgramUpsertPayload): Observable<ProgramResponse> {
+    const url = `/api/v3/compliance_metrics/${programId}/?organization_id=${orgId}`
+    const payload = this._normalizePayload(data)
+    return this._httpClient.put<ProgramResponse>(url, payload).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')
+      }),
+    )
+  }
+
+  private _normalizePayload(data: ProgramUpsertPayload): ProgramUpsertPayload {
+    const payload = { ...data } as ProgramUpsertPayload & Partial<Program>
+    delete payload.organization_id
+    delete payload.id
+    delete payload.energy_bool
+    delete payload.emission_bool
+
+    return {
+      ...payload,
+      actual_emission_column: payload.actual_emission_column ?? null,
+      actual_energy_column: payload.actual_energy_column ?? null,
+      cycles: payload.cycles ?? [],
+      emission_metric_type: payload.emission_metric_type ?? '',
+      energy_metric_type: payload.energy_metric_type ?? '',
+      filter_group: payload.filter_group ?? null,
+      target_emission_column: payload.target_emission_column ?? null,
+      target_energy_column: payload.target_energy_column ?? null,
+      x_axis_columns: payload.x_axis_columns ?? [],
+    }
+  }
+}