Merge pull request #49 in DEFINMA/definma-ui from f/pdf-export to master

* commit 'efd4e3f5e90d7e6efe1f21fe197a762954d2e9d0':
  Add timestamps to export file names
  Fix export button placement, finalize PDF layout
  Improve PDF export fonts
  Add most relevant content to PDF export
  Fix prediction result aggregation
  Add pdfmake dependency

package.json

@@ -32,6 +32,7 @@
     "flatpickr": "^4.6.3",
     "lodash": "^4.17.15",
     "ng2-charts": "^2.3.2",
+    "pdfmake": "^0.1.70",
     "quick-score": "0.0.8",
     "rxjs": "~6.5.5",
     "str-compare": "^0.1.2",

src/app/prediction/prediction.component.html

@@ -60,12 +60,18 @@
     <rb-form-radio name="multiple-samples" label="Multiple samples" [(ngModel)]="multipleSamples" [value]="true">
     </rb-form-radio>
   </div>
-
-  <rb-icon-button icon="forward-right" mode="primary" (click)="exportCSV()" *ngIf="spectrumNames.length">
-    Export to CSV
-  </rb-icon-button>
 </div>
 
+<!-- CSV export -->
+<rb-icon-button icon="forward-right" mode="secondary" (click)="exportCSV()" *ngIf="spectrumNames.length" style="margin-right: 0.5rem">
+  Export to CSV
+</rb-icon-button>
+
+<!-- PDF exprot -->
+<rb-icon-button icon="forward-right" mode="secondary" (click)="exportPDF()" *ngIf="spectrumNames.length">
+  Export to PDF
+</rb-icon-button>
+
 <div class="dpt-chart space-below">
   <canvas baseChart
           class="dpt-chart"

src/app/prediction/prediction.component.scss

@@ -2,6 +2,7 @@
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 0.5rem;
 }
 
 .file-input {

src/app/prediction/prediction.component.ts

@@ -5,8 +5,13 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
 import { DataService } from '../services/data.service';
+import { LoginService } from '../services/login.service';
 import { ModelItemModel } from '../models/model-item.model';
-import * as FileSaver from 'file-saver'
+import * as FileSaver from 'file-saver';
+import * as pdfMake from "pdfmake/build/pdfmake";
+import * as pdfFonts from 'pdfmake/build/vfs_fonts';
+
+(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;
 
 
 @Component({
@@ -63,7 +68,8 @@ export class PredictionComponent implements OnInit {
 
   constructor(
     private api: ApiService,
-    public d: DataService
+    public d: DataService,
+    public login: LoginService
   ) {
     this.chart[0] = cloneDeep(this.chartInit);
   }
@@ -122,10 +128,154 @@ export class PredictionComponent implements OnInit {
     this.result = undefined;
   }
 
-  exportCSV() {
+  // Aggregates spectrum names and prediction values into an associative array
+  prepareExport() {
     const zip = (a, b) => a.map((k, i) => [k, b[i]]);
-    const predictions = zip(this.spectrumNames, this.result.predictions.map(p => p[0].value));
+    const values = this.result.predictions
+      .map(prediction => prediction
+           .filter(field => field.category === 'Prediction')
+           .map(field => field.value));
+    return zip(this.spectrumNames, values);
+  }
+
+  // Generates a timestamp suitable for file naming
+  generateTimestamp() {
+    let d = new Date();
+    return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + '--' + d.getHours() + "-" + d.getMinutes();
+  }
+
+  // Converts the prediction results to a CSV file
+  exportCSV() {
+    const predictions = this.prepareExport();
     const csv = predictions.map(line => line.join(";")).join("\n");
-    FileSaver.saveAs(new Blob([csv], { type: 'text/csv;charset=utf-8' }), "predictions.csv");
+    FileSaver.saveAs(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'predictions-' + this.generateTimestamp() + '.csv');
+  }
+
+  // Converts the prediction results to a PDF file
+  exportPDF() {
+    const doc = {
+      content: [
+        {
+          text: 'DeFinMa - Decoding the Fingerprint of Materials by AI',
+          style: 'header'
+        },
+        {
+          table: {
+            widths: ['auto', '*', 'auto', 'auto', 'auto'],
+            body: [
+              [
+                {text: new Date().toLocaleDateString(), style: 'tableHeader'},
+                {text: 'Customer', style: 'tableHeader'},
+                {text: 'Security class', style: 'tableHeader'},
+                {text: 'Person in charge', style: 'tableHeader'},
+                {text: 'Phone', style: 'tableHeader'}],
+              [
+                this.activeGroup.group,
+                this.login.username,
+                'Intern',
+                {
+                  stack: [
+                    'CR/APS1-Lotter',
+                    'CR/APS1-Lingenfelser'
+                  ]
+                },
+                {
+                  stack: [
+                    '0711/811-49017',
+                    '0711/811-6897'
+                  ]
+                }
+              ]
+            ]
+          }
+        },
+        {
+          text: 'Prediction of ' + this.activeGroup.group + ' (' + this.activeGroup.models[this.activeModelIndex].name + ')*',
+          style: 'subheader'
+        },
+        {
+          text: this.result.mean.map(e => e.category + ' ' + e.value + ' ' + e.label + ' ' + (e.std !== '' ? (' (standard deviation: ' + e.std + ')') : ''))
+        },
+        {
+          table: {
+            widths: ['*', 'auto'],
+            body: [
+              [{text: 'Input Data / Sample Name', style: 'tableHeader'}, {text: 'Prediction*', style: 'tableHeader'}]
+            ].concat(this.prepareExport())
+          }
+        },
+        {
+          text: 'Reference Data',
+          style: 'subheader'
+        },
+        {
+          image: document.getElementsByTagName('canvas')[0].toDataURL('image/png'),
+          width: 500
+        },
+        {
+          table: {
+            body: [[{
+              stack: [
+                {
+                  text: '*Disclaimer: This tool is still under development and Testing',
+                  style: 'subsubheader'
+                },
+                {
+                  text: [
+                    'The prediction and classification of material parameters are validated only for certain conditions.',
+                    'These results may therefore under no circumstances be used to evaluate quality-relevant issues.',
+                    'For more details please contact ',
+                    {
+                      text: 'CR/APS1-Lingenfelser',
+                      link: 'mailto:dominic.lingenfelser@bosch.com'
+                    },
+                    '.'
+                  ]
+                },
+              ]
+            }]],
+          },
+          margin: [25, 20]
+        },
+        {
+          table: {
+            widths: ['*', '*', 'auto'],
+            body: [
+              [{text: 'Pr\u00fcfung', style: 'tableHeader'}, {text: 'Freigabe', style: 'tableHeader'}, {text: 'Datum', style: 'tableHeader'}],
+              ['CR/APS1-Lotter', 'CR/APS1-Lingenfelser', new Date().toLocaleDateString()]
+            ],
+          }
+        }
+      ],
+      footer: {
+        text: '\u00a9 Alle Rechte bei Robert Bosch GmbH, auch f\u00fcr den Fall von Schutzreichtsanmeldungen. Jede Verf\u00fcgungsbefugnis, wie Kopier- und Weitergaberecht, bei uns.',
+        fontSize: 8,
+        alignment: 'center'
+      },
+      styles: {
+        header: {
+          fontSize: 18,
+          bold: true,
+          margin: [0, 10]
+        },
+        subheader: {
+          fontSize: 15,
+          bold: true,
+          margin: [0, 8]
+        },
+        subsubheader: {
+          bold: true,
+          margin: [0, 5]
+        },
+        tableHeader: {
+          bold: true,
+          fontSize: 13,
+          color: 'black'
+		    }
+      },
+      pageMargins: [50, 50, 50, 15]
+    };
+
+    pdfMake.createPdf(doc).download('predictions-' + this.generateTimestamp() + '.pdf');
   }
 }