Change over time chart

src/interface/package.json

@@ -44,6 +44,7 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "esri-leaflet": "^3.0.12",
     "esri-leaflet-vector": "^4.2.4",
+    "fast-deep-equal": "^3.1.3",
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",

src/interface/src/app/services/treatments.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import { TreatmentPlan, TreatmentSummary } from '@types';
 
@@ -106,4 +106,22 @@ export class TreatmentsService {
       }
     );
   }
+
+  getTreatmentImpactCharts(
+    treatmentPlanId: number,
+    metrics: string[],
+    projectAreaId: number | null
+  ) {
+    let variableParams = new HttpParams();
+    metrics.forEach((m) => {
+      variableParams = variableParams.append('variables', m);
+    });
+    if (projectAreaId) {
+      variableParams = variableParams.append('project_areas', projectAreaId);
+    }
+    return this.http.get(this.baseUrl + treatmentPlanId + '/plot/', {
+      withCredentials: true,
+      params: variableParams,
+    });
+  }
 }

src/interface/src/app/treatments/change-over-time-chart/change-over-time-chart.component.html

@@ -0,0 +1,10 @@
+<div class="chart-heading">Average Change Over Time</div>
+<div class="title">Change (%)</div>
+<div class="chart">
+  <canvas
+    baseChart
+    [data]="(barChartData$ | async) || undefined"
+    [options]="(barChartOptions$ | async) ?? {}"
+    [legend]="false"
+    [type]="'bar'"></canvas>
+</div>

src/interface/src/app/treatments/change-over-time-chart/change-over-time-chart.component.scss

@@ -0,0 +1,32 @@
+@import 'colors';
+@import 'mixins';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.chart-heading {
+  @include h5();
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 60px;
+  align-items: flex-end;
+}
+
+.chart {
+  height: calc(100% - 140px);
+  padding-bottom: 20px;
+}
+
+canvas {
+  flex: 1;
+  max-height: 100%;
+}
+
+.title {
+  padding: 24px 24px 0;
+  color: $color-text-gray;
+}

src/interface/src/app/treatments/change-over-time-chart/change-over-time-chart.component.spec.ts

@@ -0,0 +1,34 @@
+import { DirectImpactsStateService } from '../direct-impacts.state.service';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockProvider } from 'ng-mocks';
+import { ChangeOverTimeChartComponent } from './change-over-time-chart.component';
+import { BehaviorSubject } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TreatmentsState } from '../treatments.state';
+import { TreatedStandsState } from '../treatment-map/treated-stands.state';
+
+describe('ChangeOverTimeChartComponent', () => {
+  let component: ChangeOverTimeChartComponent;
+  let fixture: ComponentFixture<ChangeOverTimeChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChangeOverTimeChartComponent, HttpClientTestingModule],
+      providers: [
+        TreatedStandsState,
+        MockProvider(TreatmentsState),
+        MockProvider(DirectImpactsStateService, {
+          activeStand$: new BehaviorSubject(null),
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChangeOverTimeChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});