diff --git a/package.json b/package.json
index 306f117e44ada4f9e28144866dbb13ce4f9a2f27..a1428dabd9c40c857672e959205208d28c8fac4c 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 30ebd3d9be2928eaf2f97022fe36c88430416590..e13d295433b54cde2c17e0d613eb9beb2b0bb079 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 0be251d30c92f42be717fcf9cf1e25b69242e671..c27042c18e06ed289627eac91c8ec0f60feaa9c4 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 e5bb244b21bcb2a2951399dbe3093e998d6a1844..56e34a632cbbe2ff99530d06026395c2ee0960fb 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 849ea1c4df0012bb156653a01fa99dd22156a061..21c1bbc237dfdf1b115fed1e778d7e77ff24c750 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 0000000000000000000000000000000000000000..e6218fc4c7ba432983e57f3d89ab431d5cbe7641
--- /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 0000000000000000000000000000000000000000..17c0def17fcc5e21e50addd46ee7e6a14799074d
--- /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 0000000000000000000000000000000000000000..747c2812da7b4854fbf9fcff664d6eadd4b53540
--- /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 4e18c9f2b2f76723c8ea429b611b9600371af37d..d85ac594896e8ed169d8b73eb98142df620468b9 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;
+ }),
+ );
+ }
}