Merge pull request #42 from REDDERD/ApiIntegration

Api integration
REDDERD · Sep 28, 2023 · 2df639c · 2df639c
2 parents 6032986 + 3eed8e1
commit 2df639c
Show file tree

Hide file tree

Showing 14 changed files with 865 additions and 11,661 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -14,8 +14,13 @@ import { LoginComponent } from './login/login.component';
 import { RouterModule, Routes } from '@angular/router'
 import {MatInputModule} from "@angular/material/input";
 import {ReactiveFormsModule} from "@angular/forms";
-import {HttpClient, HttpClientModule} from "@angular/common/http";
+import {HttpClientModule} from "@angular/common/http";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatSelectModule} from "@angular/material/select";
+import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
 
 const routes: Routes = [ { path: 'home', component: HomeComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -39,7 +44,12 @@ const routes: Routes = [ { path: 'home', component: HomeComponent },
     MatInputModule,
     ReactiveFormsModule,
     HttpClientModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatButtonToggleModule,
+    MatExpansionModule,
+    MatSlideToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/home/chart-container/chart-container.component.html b/src/app/home/chart-container/chart-container.component.html
@@ -1 +1 @@
-<app-chart></app-chart>
+<app-chart [apiResponse]="apiResponse"></app-chart>
diff --git a/src/app/home/chart-container/chart-container.component.ts b/src/app/home/chart-container/chart-container.component.ts
@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {ResponseInterface} from "../../interfaces/response-interface";
 
 @Component({
   selector: 'app-chart-container',
   templateUrl: './chart-container.component.html',
   styleUrls: ['./chart-container.component.css']
 })
 export class ChartContainerComponent {
+  @Input() apiResponse: ResponseInterface | undefined;
 }
diff --git a/src/app/home/chart-container/chart/chart.component.ts b/src/app/home/chart-container/chart/chart.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component} from '@angular/core';
+import {AfterViewInit, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {Chart} from "chart.js/auto";
 import {Points, ResponseInterface} from "../../../interfaces/response-interface";
 import {CentroidDatesetInterface, ChartDatasetInterface} from "../../../interfaces/chartDataset-interface";
@@ -9,19 +9,31 @@ import {MockDaten} from "./mock-daten";
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.css']
 })
-export class ChartComponent implements AfterViewInit{
+export class ChartComponent implements AfterViewInit, OnChanges{
   public chart: any;
-  MockData: ResponseInterface = MockDaten
+  chartData: ResponseInterface = MockDaten
   datasets: Array<ChartDatasetInterface> = [];
+  @Input() apiResponse: ResponseInterface | undefined;
 
   ngAfterViewInit() {
     this.renderChart();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['apiResponse'].currentValue != undefined){
+      if(this.apiResponse){
+        this.datasets = [];
+        this.chartData = this.apiResponse;
+      }
+      this.chart.destroy()
+      this.renderChart()
+    }
+  }
+
   generateDatasets() {
     let centroids: Array<Points> = [];
     let clusterArray: Array<ChartDatasetInterface> = [];
-    this.MockData.cluster.map(cluster => {
+    this.chartData.cluster.map(cluster => {
       let dataset: ChartDatasetInterface = {
         label: "Cluster " + (cluster.clusterNr + 1),
         data: cluster.points
@@ -63,20 +75,20 @@ export class ChartComponent implements AfterViewInit{
         plugins: {
           title: {
             display: true,
-            text: MockDaten.name
+            text: this.chartData.name
           },
         },
         scales: {
           y: {
             title: {
               display: true,
-              text: MockDaten.y_label
+              text: this.chartData.y_label
             }
           },
           x: {
             title: {
               display: true,
-              text: MockDaten.x_label
+              text: this.chartData.x_label
             }
           }
         }