Added presets and implemented vaccination.

SilverLinings89 · Mar 16, 2020 · 8fe1c39 · 8fe1c39
1 parent 77042c4
commit 8fe1c39
Show file tree

Hide file tree

Showing 19 changed files with 288 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # CoronaSimulator
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.3.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.
 
 ## Setup
 
@@ -25,4 +25,4 @@ Special Thanks to:
 - [The World Bank](https://data.worldbank.org/) for providing a list of [Departures](https://data.worldbank.org/indicator/ST.INT.DPRT) and [Arrivals](https://data.worldbank.org/indicator/ST.INT.ARVL) I could parse to JSON and use.
 - Obviously the [angular team](https://angular.io/), which is just doing an awesome job.
 - [Plotly](plot.ly) for their chart-tools in Javascript, which I use to draw the world map.
-- [Chart.js](https://www.chartjs.org/) which I use to draw the line graphs.
+- [Highcharts](https://www.highcharts.com/) for their chart-tools, which I draw all the charts with.
diff --git a/src/app/chart-view/chart-view.component.html b/src/app/chart-view/chart-view.component.html
@@ -15,5 +15,6 @@
           [(ngModel)]="showRate">
   Show Rate
 </mat-slide-toggle>
-  <div [chart]="chart"></div>
+
+<div [chart]="chart"></div>
 
diff --git a/src/app/chart-view/chart-view.component.ts b/src/app/chart-view/chart-view.component.ts
@@ -101,18 +101,18 @@ export class ChartViewComponent implements AfterViewInit  {
           }
         });
       }
+      console.log(this.lineChartData);
       this.lineChartLabels = [];
       for (let i = 0; i < this.simulation.timeSpan; i++) {
         this.lineChartLabels.push(i.toString());
       }
-    }
-    let yAxis = {};
-    if (this.showRate) {
-      yAxis = {title: {text: 'Percentage of people affected'}};
-    } else {
-      yAxis = {title: {text: 'Number of people affected'}};
-    }
-    this.chart = new Chart({
+      let yAxis = {};
+      if (this.showRate) {
+        yAxis = {title: {text: 'Percentage of people affected'}};
+      } else {
+        yAxis = {title: {text: 'Number of people affected'}};
+      }
+      this.chart = new Chart({
         chart: {
         type: 'line'
         },
@@ -126,6 +126,7 @@ export class ChartViewComponent implements AfterViewInit  {
         xAxis: {title: {text: 'Days'}},
         yAxis: yAxis
       });
-    this.ready = true;
+      this.ready = true;
+    }
   }
 }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -0,0 +1,7 @@
+<div style="padding-left: 40px;">
+    <div>
+        <a href="https://github.com/SilverLinings89/VirusSimulator/" target="_blank">
+            <img src="../../assets/GitHub-Mark-32px.png" width="15"/> <span style="color:#1A2D41; font-size: smaller;">&nbsp;&nbsp;View code and propose features on GitHub</span>
+        </a>
+    </div>
+</div>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit(): void {

diff --git a/src/app/initial-infection/initial-infection.component.html b/src/app/initial-infection/initial-infection.component.html
@@ -1 +1,26 @@
-<p>initial-infection works!</p>
+<div class="card">
+    <div class="card__header">
+        <div class="card__header-title text-light"><strong>Initial Infections</strong> &nbsp;
+        <a class="card__header-link text-bold" *ngIf="!showAll" (click)="showAll = !showAll">View All</a>
+        <a class="card__header-link text-bold" *ngIf="showAll" (click)="showAll = !showAll">View Less</a>
+        </div>
+        <div class="settings">
+        <div class="settings__block"><i class="fas fa-edit"></i></div>
+        <div class="settings__block"><i class="fas fa-cog"></i></div>
+        </div>
+    </div>
+    <div class="card__main">
+        <ul style="padding-inline-start: 0;">
+            <ng-container *ngFor="let c of baseData.countries">
+                <li *ngIf="showAll || c.initialInfected !== 0" style="list-style: none;">
+                    <div>
+                        <mat-form-field>
+                            <mat-label>{{ c.nameFull }} ({{c.nameCode}})</mat-label>
+                            <input matInput type="number" [(ngModel)]="c.initialInfected" />
+                        </mat-form-field>
+                    </div>
+                </li>
+            </ng-container>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/initial-infection/initial-infection.component.ts b/src/app/initial-infection/initial-infection.component.ts
@@ -1,13 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { SimulationService } from '../simulation.service';
+import { BaseDataService } from '../flight-data.service';
 
 @Component({
   selector: 'app-initial-infection',
   templateUrl: './initial-infection.component.html',
   styleUrls: ['./initial-infection.component.css']
 })
 export class InitialInfectionComponent implements OnInit {
-
-  constructor() { }
+  showAll = false;
+  constructor(public baseData: BaseDataService) { }
 
   ngOnInit(): void {
   }

diff --git a/src/app/map-view/map-view.component.html b/src/app/map-view/map-view.component.html
@@ -1,15 +1,15 @@
-<div style="width: 900px; height: 500px;" id="myDiv"></div>
+<div style="width: 100%; height: 600px;" id="myDiv"></div>
 <button mat-raised-button color="primary" (click)="visualize()">Run full animation</button> <br />
 <button mat-raised-button color="primary" (click)="draw()">Draw single frame</button> <br />
 <mat-slider
-        class="example-margin"
-        [disabled]="disabled"
-        [invert]="invert"
-        [max]="max"
-        [min]="min"
-        [step]="step"
-        [thumbLabel]="thumbLabel"
-        [tickInterval]="tickInterval"
-        [(ngModel)]="currentTime"
-        [vertical]="vertical">
-    </mat-slider>
+    class="example-margin"
+    [disabled]="disabled"
+    [invert]="invert"
+    [max]="max"
+    [min]="min"
+    [step]="step"
+    [thumbLabel]="thumbLabel"
+    [tickInterval]="tickInterval"
+    [(ngModel)]="currentTime"
+    [vertical]="vertical">
+</mat-slider>
diff --git a/src/app/map-view/map-view.component.ts b/src/app/map-view/map-view.component.ts
@@ -37,7 +37,7 @@ export class MapViewComponent implements OnInit {
 
   constructor(private simulation: SimulationService, private baseData: BaseDataService, public plotlyService: PlotlyService) {
     this.simulation.SimulationDone.subscribe((d) => {
-      if(d) {
+      if (d) {
         this.disabled = false;
         this.min = 0;
         this.max = this.simulation.timeSpan;
@@ -75,7 +75,7 @@ export class MapViewComponent implements OnInit {
       colorbar: {
           autotic: true,
           tickprefix: '',
-          title: 'Infected Part of the popoulation in % '
+          title: 'Infectionrate in %'
       }
     }];
     const Plotly = this.plotlyService.getPlotly();

diff --git a/src/app/mortality-settings/mortality-settings.component.html b/src/app/mortality-settings/mortality-settings.component.html
@@ -1,3 +1,7 @@
+<mat-form-field>
+    <mat-label>Immunity / Vaccination rate</mat-label><input matInput type="number" [(ngModel)]="simulation.immunityRate" />
+</mat-form-field>
+<br />
 <mat-form-field>
     <mat-label>Base Mortality</mat-label><input matInput type="number" [(ngModel)]="simulation.baseMortalityRate" />
 </mat-form-field>
@@ -7,10 +11,10 @@
     <br />
     <mat-form-field>
         <mat-label>Critical Mortality</mat-label>
-        <input matInput type="number" [(ngModel)]="simulation.advancedMortalityPercentage" />
+        <input matInput type="number" [(ngModel)]="simulation.criticalMortality" />
     </mat-form-field><br />
     <mat-form-field>
         <mat-label>Critical Mortality Threshold</mat-label>
-        <input matInput type="number" [(ngModel)]="simulation.advancedMortalityInfectionThreshold" />
+        <input matInput type="number" [(ngModel)]="simulation.criticalThreshold" />
     </mat-form-field>
 </div>
diff --git a/src/app/mortality-settings/mortality-settings.component.ts b/src/app/mortality-settings/mortality-settings.component.ts
@@ -8,12 +8,11 @@ import { SimulationService } from '../simulation.service';
 })
 export class MortalitySettingsComponent implements OnInit {
 
-  constructor(private simulation: SimulationService) { }
+  constructor(public simulation: SimulationService) { }
 
   ngOnInit(): void {
   }
 
   updateMortalities() {
-
   }
 }
diff --git a/src/app/simulation-control/simulation-control.component.html b/src/app/simulation-control/simulation-control.component.html
@@ -1,38 +1,38 @@
 <div class="main-overview">
   <div class="overviewCard" (click)="runSimulation()">
-    <div class="overviewCard-icon overviewCard-icon--document">
-       <i class="far fa-file-alt"></i>
+    <div class="overviewCard-icon overviewCard-icon--calendar">
+      <fa-icon [icon]="faPlay"></fa-icon>
     </div>
     <div class="overviewCard-description">
       <h3 class="overviewCard-title text-light"><strong>Run</strong> the simulation</h3>
       <p class="overviewCard-subtitle"></p>
     </div>
   </div>
-  <div class="overviewCard">
-    <div class="overviewCard-icon overviewCard-icon--calendar">
-       <i class="far fa-calendar-check"></i>
+  <div class="overviewCard" (click)="setCoronaDefault()">
+    <div class="overviewCard-icon overviewCard-icon--document">
+      <fa-icon [icon]="faBH"></fa-icon>
     </div>
     <div class="overviewCard-description">
-      <h3 class="overviewCard-title text-light"><strong>Measles</strong> Preset I</h3>
-      <p class="overviewCard-subtitle">with 0% vaccination</p>
+      <h3 class="overviewCard-title text-light"><strong>Corona Virus</strong> Preset</h3>
+      <p class="overviewCard-subtitle"></p>
     </div>
   </div>
-  <div class="overviewCard">
+  <div class="overviewCard" (click)="setMeaselesZeroVac()">
     <div class="overviewCard-icon overviewCard-icon--mail">
-       <i class="far fa-envelope"></i>
+      <fa-icon [icon]="faSuC"></fa-icon>
     </div>
     <div class="overviewCard-description">
-      <h3 class="overviewCard-title text-light"><strong>Measles</strong> Preset II</h3>
-      <p class="overviewCard-subtitle">with 90% vaccination</p>
+      <h3 class="overviewCard-title text-light"><strong>Measles</strong> Preset I</h3>
+      <p class="overviewCard-subtitle">with 0% vaccination</p>
     </div>
   </div>
-  <div class="overviewCard">
-    <div class="overviewCard-icon overviewCard-icon--photo">
-       <i class="far fa-file-image"></i>
+  <div class="overviewCard" (click)="setMeaselesHighVac()">
+    <div class="overviewCard-icon overviewCard-icon--calendar">
+      <fa-icon [icon]="faE"></fa-icon>
     </div>
     <div class="overviewCard-description">
-      <h3 class="overviewCard-title text-light"><strong>Corona Virus</strong> Preset</h3>
-      <p class="overviewCard-subtitle"></p>
+      <h3 class="overviewCard-title text-light"><strong>Measles</strong> Preset II</h3>
+      <p class="overviewCard-subtitle">with 95% vaccination</p>
     </div>
   </div>
 </div>
@@ -64,21 +64,7 @@ <h3 class="overviewCard-title text-light"><strong>Corona Virus</strong> Preset</
       <app-numerical-settings></app-numerical-settings>
     </div>
   </div>
-  <div class="card">
-    <div class="card__header">
-      <div class="card__header-title text-light"><strong>Initial Infections</strong>
-        <a href="#" class="card__header-link text-bold">View All</a>
-        <a href="#" class="card__header-link text-bold">View Less</a>
-      </div>
-      <div class="settings">
-        <div class="settings__block"><i class="fas fa-edit"></i></div>
-        <div class="settings__block"><i class="fas fa-cog"></i></div>
-      </div>
-    </div>
-    <div class="card__main">
-      <app-initial-infection></app-initial-infection>
-    </div>
-  </div>
+  <app-initial-infection></app-initial-infection>
   <div class="card card--finance">
     <div class="card__header">
       <div class="card__header-title text-light"><strong>Response Settings</strong>

diff --git a/src/app/simulation-control/simulation-control.component.ts b/src/app/simulation-control/simulation-control.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { BaseDataService } from '../flight-data.service';
 import { SimulationService } from '../simulation.service';
-import {ThemePalette} from '@angular/material/core';
-import {faCalendar} from '@fortawesome/free-solid-svg-icons';
+import { ThemePalette } from '@angular/material/core';
+import { faPlay, faSkullCrossbones, faBiohazard, faExclamation } from '@fortawesome/free-solid-svg-icons';
 import { NotificationServiceService } from '../notification-service.service';
 import { Router } from '@angular/router';
 @Component({
@@ -13,18 +13,37 @@ import { Router } from '@angular/router';
 export class SimulationControlComponent implements OnInit {
   color: ThemePalette = 'primary';
   mode = 'determinate';
-  faCalendar = faCalendar;
+  faPlay = faPlay;
+  faSuC = faSkullCrossbones;
+  faE = faExclamation;
+  faBH = faBiohazard;
   constructor( public simulation: SimulationService,
                private flights: BaseDataService,
                private notification: NotificationServiceService,
                private router: Router) {
-
   }
 
   ngOnInit() {
   }
 
+  setCoronaDefault() {
+
+  }
+
+  setMeaselesZeroVac() {
+    this.setMeaselesHighVac();
+    this.simulation.immunityRate = 0;
+    this.simulation.timeSpan = 200;
+  }
 
+  setMeaselesHighVac() {
+    this.simulation.timeStepLength = 1.0;
+    this.simulation.timeSpan = 400;
+    this.simulation.beta = 0.95;
+    this.simulation.gamma = 1.0 / (19.5);
+    this.simulation.immunityRate = 0.95;
+    this.simulation.baseMortalityRate = 0.001;
+  }
 
   runSimulation() {
     if (this.simulation.run()) {