From 40434b1e988f3631539103b4144aadb23434026d Mon Sep 17 00:00:00 2001
From: ddamiron <ddamiron@sii.fr>
Date: Wed, 17 Jul 2019 18:34:27 +0200
Subject: [PATCH] add logs graph and data

---
 package.json                                  |   3 +-
 src/app/app.routing.module.ts                 |   6 +-
 src/app/components/index.ts                   |   9 +-
 .../logs-data/logs-data.component.html}       |  25 +++-
 .../logs-data/logs-data.component.scss}       |   0
 .../logs-data/logs-data.component.ts}         |  25 +++-
 .../logs-graph/logs-graph.component.html      |  15 +++
 .../logs-graph/logs-graph.component.scss      |   3 +
 .../logs-graph/logs-graph.component.ts        | 117 ++++++++++++++++++
 src/app/services/data-logs.service.ts         |  18 +++
 10 files changed, 209 insertions(+), 12 deletions(-)
 rename src/app/components/{data-logs/data-logs.component.html => logs-dashboard/logs-data/logs-data.component.html} (67%)
 rename src/app/components/{data-logs/data-logs.component.scss => logs-dashboard/logs-data/logs-data.component.scss} (100%)
 rename src/app/components/{data-logs/data-logs.component.ts => logs-dashboard/logs-data/logs-data.component.ts} (66%)
 create mode 100644 src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
 create mode 100644 src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
 create mode 100644 src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts

diff --git a/package.json b/package.json
index 306f117..a1428da 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "rxjs": "^6.4.0",
     "rxjs-tslint": "^0.1.7",
     "sass-recursive-map-merge": "^1.0.1",
-    "zone.js": "^0.8.29"
+    "zone.js": "^0.8.29",
+    "chart.js": "^2.5.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.13.1",
diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts
index 30ebd3d..e13d295 100644
--- a/src/app/app.routing.module.ts
+++ b/src/app/app.routing.module.ts
@@ -9,7 +9,9 @@ import { ResourceFormComponent } from './components/resources/edit/resource-form
 import { ResourceDetailComponent } from './components/resources/detail/resource-detail.component';
 import { FormatsComponent, FormatDetailComponent, FormatFormComponent } from './components';
 import { AuthenticatedGuard } from './user/guards/authenticated.guard';
-import { DataLogsComponent } from './components/data-logs/data-logs.component';
+import { LogsDataComponent } from './components/logs-dashboard/logs-data/logs-data.component';
+import { LogsGraphComponent } from './components/logs-dashboard/logs-graph/logs-graph.component';
+
 const appRoutes: Routes = [
   {
     path: '',
@@ -117,7 +119,7 @@ const appRoutes: Routes = [
   },
   {
     path: 'datalogs',
-    component: DataLogsComponent,
+    component: LogsDataComponent,
     canActivate: [AuthenticatedGuard],
     data: {
       title: 'datalogs',
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 0be251d..c27042c 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -14,7 +14,8 @@ import { FormatDetailComponent } from './formats/detail/format-detail.component'
 import { FormatFormComponent } from './formats/edit/format-form.component';
 import { ImageUploadComponent } from './image-upload/image-upload.component';
 import { NotificationsComponent } from './notifications/notifications.component';
-import { DataLogsComponent } from './data-logs/data-logs.component';
+import { LogsDataComponent } from './logs-dashboard/logs-data/logs-data.component';
+import { LogsGraphComponent } from './logs-dashboard/logs-graph/logs-graph.component';
 
 export {
   MenuComponent,
@@ -33,7 +34,8 @@ export {
   FormatFormComponent,
   ImageUploadComponent,
   NotificationsComponent,
-  DataLogsComponent,
+  LogsDataComponent,
+  LogsGraphComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -54,5 +56,6 @@ export const AppComponents = [
   FormatFormComponent,
   ImageUploadComponent,
   NotificationsComponent,
-  DataLogsComponent,
+  LogsDataComponent,
+  LogsGraphComponent,
 ];
diff --git a/src/app/components/data-logs/data-logs.component.html b/src/app/components/logs-dashboard/logs-data/logs-data.component.html
similarity index 67%
rename from src/app/components/data-logs/data-logs.component.html
rename to src/app/components/logs-dashboard/logs-data/logs-data.component.html
index e5bb244..56e34a6 100644
--- a/src/app/components/data-logs/data-logs.component.html
+++ b/src/app/components/logs-dashboard/logs-data/logs-data.component.html
@@ -15,7 +15,24 @@
         Afficher
       </a>
     </div>
+    <div class="columns is-centered is-marginless">
+        <div class="column has-text-centered">
+          <h2>{{ nbSessionId }} sessionId trouvées</h2>
+          <div *ngFor="let s of allFields.session_id_list">
+              <p>{{s}} </p>
+          </div>
+         
+          <h2>{{ nbSlug }} slugs trouvées</h2>
+          <div *ngFor="let slg of allFields.slug_list">
+              <p>{{slg}} </p>
+          </div>
+          <h2>{{ nbUuid }} uuid trouvées</h2>
+          <div *ngFor="let ul of allFields.uuid_list">
+              <p>{{ul}} </p>
+          </div>
 
+        </div>
+    </div>
   <div class="columns is-centered is-marginless">
     <div class="column has-text-centered">
       <div *ngFor="let a of [data]">
@@ -24,6 +41,9 @@
             <h3>
               uuid: {{a.uuid}} 
             </h3>
+            <p>|</p>
+            <p>V</p>
+
             session_id list:
             <div *ngFor="let s of a.sessionIdList">
                {{s}}
@@ -37,6 +57,7 @@
       <div *ngFor="let oneStepData of allStepsData">
         <div class="mini-log-card">
           <span>
+              <p>slug: {{oneStepData._id.slug}} </p>
             <p>uuid: {{oneStepData._id.uuid}} </p>
           <p>sessionId: {{oneStepData._id.session_id}} </p>
             <h3>
@@ -51,7 +72,9 @@
   </div>
 
   <div class="table">
-
   </div>
+  
 
 </div>
+
+<app-logs-graph></app-logs-graph>
\ No newline at end of file
diff --git a/src/app/components/data-logs/data-logs.component.scss b/src/app/components/logs-dashboard/logs-data/logs-data.component.scss
similarity index 100%
rename from src/app/components/data-logs/data-logs.component.scss
rename to src/app/components/logs-dashboard/logs-data/logs-data.component.scss
diff --git a/src/app/components/data-logs/data-logs.component.ts b/src/app/components/logs-dashboard/logs-data/logs-data.component.ts
similarity index 66%
rename from src/app/components/data-logs/data-logs.component.ts
rename to src/app/components/logs-dashboard/logs-data/logs-data.component.ts
index 849ea1c..21c1bbc 100644
--- a/src/app/components/data-logs/data-logs.component.ts
+++ b/src/app/components/logs-dashboard/logs-data/logs-data.component.ts
@@ -5,19 +5,22 @@ import { switchMap } from 'rxjs/operators';
 import { ILogs } from 'src/app/models/logs.model';
 import { FormsModule } from '@angular/forms';
 
-
 @Component({
-  selector: 'app-data-logs',
-  templateUrl: './data-logs.component.html',
-  styleUrls: ['./data-logs.component.scss'],
+  selector: 'app-logs-data',
+  templateUrl: './logs-data.component.html',
+  styleUrls: ['./logs-data.component.scss'],
 })
-export class DataLogsComponent implements OnInit {
+export class LogsDataComponent implements OnInit {
   uuid: string;
+  allFields: any;
   sessionId: string;
   slug: string;
   data: any;
   stepData: ILogs;
   allStepsData: any;
+  nbSessionId: number;
+  nbUuid: number;
+  nbSlug: number;
 
   sessionIdList: [string];
   constructor(
@@ -31,6 +34,8 @@ export class DataLogsComponent implements OnInit {
     this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd';
     this.slug = 'not implemented yet';
     this.allStepsData = [];
+    this.allFields = [];
+    this.getAllUniqueFields();
 
   }
 
@@ -51,4 +56,14 @@ export class DataLogsComponent implements OnInit {
   );
   }
 
+  getAllUniqueFields() {
+    this.dataLogsService.getAllUniqueFields().subscribe((result) => {
+      this.allFields = result[0];
+      this.nbSessionId = result[0]['session_id_list'].length;
+      this.nbUuid = result[0]['uuid_list'].length;
+      this.nbSlug = result[0]['slug_list'].length;
+
+    },
+    );
+  }
 }
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
new file mode 100644
index 0000000..e6218fc
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
@@ -0,0 +1,15 @@
+<p>
+  graph-logs works!
+</p>
+<div class="graph-component">
+  <div *ngFor="let data of this.graphData">
+    <div *ngFor="let timestamp of data.timestamps">
+    </div>
+
+  </div>
+
+  <div class="graph-div-canvas">
+    <canvas id="graphCanvas">{{ chart }}</canvas>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
new file mode 100644
index 0000000..17c0def
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
@@ -0,0 +1,3 @@
+.graph-div-canvas{
+    width: 60%;
+}
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
new file mode 100644
index 0000000..747c281
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
@@ -0,0 +1,117 @@
+import { Component, OnInit } from '@angular/core';
+import { Chart } from 'chart.js';
+import { DataLogsService } from 'src/app/services/data-logs.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { switchMap } from 'rxjs/operators';
+import { ILogs } from 'src/app/models/logs.model';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-logs-graph',
+  templateUrl: './logs-graph.component.html',
+  styleUrls: ['./logs-graph.component.scss'],
+})
+export class LogsGraphComponent implements OnInit {
+  public myChart: Chart;
+  graphData: any;
+  uuid: string;
+  sessionId: string;
+  dataset: any;
+  xValues: any;
+  yValues: any;
+
+  constructor(
+    private dataLogsService: DataLogsService,
+  ) { }
+
+  ngOnInit() {
+    this.graphData = [0.2, 0.3];
+    this.xValues = [];
+    this.yValues = [];
+    this.dataset = []
+    this.uuid = 'c1b069ca-181d-4265-9838-8d182f207bd3';
+    this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd';
+    this.getData();
+    this.myChart.update();
+
+  }
+
+  plotGraph() {
+
+    this.myChart = new Chart(document.getElementById("graphCanvas"), {
+      type: 'scatter',
+      data: {
+        datasets: this.dataset,
+      },
+      options: {
+        elements: {
+          line: {
+              tension: 0, // disables bezier curves
+          },
+      },
+        responsive: true,
+        scales: {
+          xAxes: [{
+            type: 'time',
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'Date',
+            },
+            ticks: {
+              major: {
+                fontStyle: 'bold',
+                fontColor: '#FF0000',
+              },
+            },
+          }],
+          yAxes: [{
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'progress-ratio',
+            },
+          }],
+        },
+      },
+
+    });
+  }
+
+  getXYValuesFromData() {
+    const color = ["red", "yellow", "blue", "black", "pink", "green", "orange"];
+    let c=0;
+    for (const data of this.graphData) {
+      const arrayOfXY = [];
+      for (const i in data.values) {
+        const XY = {
+          x: data.timestamps[i].$date,
+
+          y: data.values[i],
+        };
+        arrayOfXY.push(XY);
+      }
+      const tempObj = {
+        label: data._id.step,
+        showLine: true,
+        backgroundColor: color[c],
+        borderColor: color[c],
+        fill: false,
+        data: arrayOfXY,
+        lineTension: 0.3,
+      };
+      this.dataset.push(tempObj);
+      c += 1;
+    }
+  }
+  getData() {
+    this.dataLogsService.getData(this.uuid, this.sessionId).subscribe((results) => {
+      console.log(results);
+      this.graphData = results;
+      this.getXYValuesFromData();
+      this.plotGraph();
+
+    },
+    );
+  }
+}
diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts
index 4e18c9f..d85ac59 100644
--- a/src/app/services/data-logs.service.ts
+++ b/src/app/services/data-logs.service.ts
@@ -47,4 +47,22 @@ export class DataLogsService {
       }),
     );
   }
+  getAllUniqueFields(): Observable<any[]> {
+    const aggregationEndPoint = 'getAllUniqueFields';
+    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint).pipe(
+      map((response) => {
+        return response;
+      }),
+    );
+  }
+  getData(uuid, sessionId): Observable<any[]> {
+    const query = { uuid : uuid, session_id: sessionId };
+    const stringQuery = JSON.stringify(query);
+    const aggregationEndPoint = 'reportDataAggr?avars=';
+    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+      map((response) => {
+        return response;
+      }),
+    );
+  }
 }
-- 
GitLab