Issue 40, 45, 46 - Add Market emissions by year options, add egrid map

package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^14.2.12",
     "@angular/platform-browser-dynamic": "^14.2.12",
     "@angular/router": "^14.2.12",
-    "ngx-bootstrap": "^10.0.0",
+    "ngx-bootstrap": "^9.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "xlsx": "^0.17.3",
@@ -30,23 +30,23 @@
     "@angular/cli": "^14.2.10",
     "@angular/compiler-cli": "^14.2.12",
     "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
     "@types/lodash": "4.14.100",
+    "@types/node": "^12.11.1",
     "angular-plotly.js": "^4.0.0",
     "bootstrap": "^4.6.0",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "lodash.foreach": "^4.5.0",
     "lodash.keys": "^4.2.0",
+    "papaparse": "^5.1.0",
     "plotly.js": "^1.58.4",
     "protractor": "~7.0.0",
-    "papaparse": "^5.1.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.6.4"

src/app/app.component.css

@@ -44,4 +44,8 @@
   .mod-panel:hover:not(.modification) {
     background-color: #fff;
     cursor: pointer;      
-  }
+  }
+
+  .modal-open {
+    z-index: initial !important;
+}

src/app/app.component.html

@@ -5,11 +5,12 @@
   <div class="p-0 flex-grow-1">
     <div class="row no-gutters h-100">
       <div class="mod-panel col-4 pt-2 scroll-item" [ngStyle]="{'height.px': containerHeight}"
-        [ngClass]="{'modification': baselineSelected }" (click)="selectBaseline()">
+        [ngClass]="{'modification': baselineSelected, 'modal-open': isModalOpen == true }" 
+        (click)="selectBaseline()">
         <app-energy-use-forms [isBaseline]="true" [selected]="baselineSelected"></app-energy-use-forms>
       </div>
       <div class="mod-panel col-4 pt-2 scroll-item" [ngStyle]="{'height.px': containerHeight}"
-        [ngClass]="{'modification': !baselineSelected }" (click)="selectModification()">
+        [ngClass]="{'modification': !baselineSelected, 'modal-open': isModalOpen == true }" (click)="selectModification()">
         <app-energy-use-forms [isBaseline]="false" [selected]="!baselineSelected"></app-energy-use-forms>
       </div>
 

src/app/app.component.ts

@@ -1,5 +1,7 @@
 import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router'; 
+import { Subscription } from 'rxjs';
+import { Co2SavingsService } from './co2-savings.service';
 import { EGridService } from './e-grid.service';
 
 // declare ga as a function to access the JS code in TS
@@ -25,8 +27,11 @@ export class AppComponent {
       this.setContainerSize();
   }
   headerHeight: number;
+  isModalOpenSub: Subscription;
   baselineSelected: boolean = true;
-  constructor(public router: Router, private eGridService: EGridService){   
+  isModalOpen: boolean;
+
+  constructor(public router: Router, private eGridService: EGridService, private co2SavingsService: Co2SavingsService){   
     this.router.events.subscribe(event => {
        if(event instanceof NavigationEnd){
            gtag('config', 'G-29K0R91S12', 
@@ -38,8 +43,16 @@ export class AppComponent {
      }
   )}
 
-  ngOnInit() {
-    this.eGridService.getAllSubRegions();
+  async ngOnInit() {
+    this.isModalOpenSub = this.co2SavingsService.modalOpen.subscribe(val => {
+      this.isModalOpen = val;
+    });
+
+    await this.eGridService.parseEGridData();
+  }
+
+  ngOnDestroy() {
+    this.isModalOpenSub.unsubscribe();
   }
 
   ngAfterViewInit(){

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppComponent } from './app.component';
 import { BannerComponent } from './banner/banner.component';
 import { ResultsComponent } from './results/results.component';
@@ -10,6 +9,8 @@ import { FormComponent } from './energy-use-forms/form/form.component';
 import { FormsModule } from '@angular/forms';
 import { PlotlyViaWindowModule } from 'angular-plotly.js';
 import { RouterModule } from '@angular/router';
+import { MarketEmissionsTableComponent } from './market-emissions-table/market-emissions-table.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 @NgModule({
   declarations: [
@@ -18,12 +19,14 @@ import { RouterModule } from '@angular/router';
     ResultsComponent,
     HelpComponent,
     EnergyUseFormsComponent,
-    FormComponent
+    FormComponent,
+    MarketEmissionsTableComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     PlotlyViaWindowModule,
+    ModalModule,
     RouterModule.forRoot([])
   ],
   providers: [],