diff --git a/src/app/sample/sample.component.scss b/src/app/sample/sample.component.scss
index c65b876..8b4e416 100644
--- a/src/app/sample/sample.component.scss
+++ b/src/app/sample/sample.component.scss
@@ -15,3 +15,7 @@ td:first-child {
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
}
+
+.dpt-chart {
+ max-width: 400px;
+}
diff --git a/src/app/sample/sample.component.ts b/src/app/sample/sample.component.ts
index 96d57c3..ba13d26 100644
--- a/src/app/sample/sample.component.ts
+++ b/src/app/sample/sample.component.ts
@@ -14,20 +14,35 @@ import {NgForm, Validators} from '@angular/forms';
import {ValidationService} from '../services/validation.service';
import {TemplateModel} from '../models/template.model';
import {MeasurementModel} from '../models/measurement.model';
+import { ChartOptions } from 'chart.js';
+import {animate, style, transition, trigger} from '@angular/animations';
// TODO: tests
// TODO: confirmation for new group/supplier
-// TODO: DPT preview
// TODO: work on better recognition for file input
// TODO: only show condition (if not set) and measurements in edit sample dialog at first
-// TODO: multiple spectra, drag and drop
+// TODO: multiple spectra
// TODO: multiple samples for base data, extend multiple measurements, conditions
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
- styleUrls: ['./sample.component.scss']
+ styleUrls: ['./sample.component.scss'],
+ animations: [
+ trigger(
+ 'inOut', [
+ transition(':enter', [
+ style({height: 0, opacity: 0}),
+ animate('0.5s ease-out', style({height: '*', opacity: 1}))
+ ]),
+ transition(':leave', [
+ style({height: '*', opacity: 1}),
+ animate('0.5s ease-in', style({height: 0, opacity: 0}))
+ ])
+ ]
+ )
+ ]
})
export class SampleComponent implements OnInit, AfterContentChecked {
@@ -49,6 +64,27 @@ export class SampleComponent implements OnInit, AfterContentChecked {
measurementTemplates: TemplateModel[];
loading = 0; // number of currently loading instances
checkFormAfterInit = false;
+ charts = []; // chart data for spectrums
+ readonly chartInit = [{
+ data: [],
+ label: 'Spectrum',
+ showLine: true,
+ fill: false,
+ pointRadius: 0,
+ borderColor: '#00a8b0',
+ borderWidth: 2
+ }];
+ readonly chartOptions: ChartOptions = {
+ scales: {
+ xAxes: [{ticks: {min: 400, max: 4000, stepSize: 400, reverse: true}}],
+ yAxes: [{ticks: {min: 0, max: 1}}]
+ },
+ responsive: true,
+ tooltips: {enabled: false},
+ hover: {mode: null},
+ maintainAspectRatio: true,
+ plugins: {datalabels: {display: false}}
+ };
constructor(
private router: Router,
@@ -90,6 +126,19 @@ export class SampleComponent implements OnInit, AfterContentChecked {
this.loading++;
this.api.get
('/sample/' + this.route.snapshot.paramMap.get('id'), sData => {
this.sample.deserialize(sData);
+ this.charts = [];
+ const spectrumTemplate = this.measurementTemplates.find(e => e.name === 'spectrum')._id;
+ let spectrumCounter = 0;
+ this.sample.measurements.forEach((measurement, i) => {
+ this.charts.push(_.cloneDeep(this.chartInit));
+ if (measurement.measurement_template === spectrumTemplate) {
+ setTimeout(() => {
+ this.generateChart(measurement.values.dpt, i);
+ console.log(this.charts);
+ }, spectrumCounter * 20);
+ spectrumCounter ++;
+ }
+ });
this.material = sData.material;
this.customFields = this.sample.notes.custom_fields && this.sample.notes.custom_fields !== {} ? Object.keys(this.sample.notes.custom_fields).map(e => [e, this.sample.notes.custom_fields[e]]) : [['', '']];
if ('condition_template' in this.sample.condition) {
@@ -225,8 +274,8 @@ export class SampleComponent implements OnInit, AfterContentChecked {
this.setNewMaterial();
}
- preventSubmit(event) {
- if (event.key === 'Enter') {
+ preventDefault(event) {
+ if (event.key && event.key === 'Enter' || event.type === 'dragover') {
event.preventDefault();
}
}
@@ -285,6 +334,7 @@ export class SampleComponent implements OnInit, AfterContentChecked {
addMeasurement() {
this.sample.measurements.push(new MeasurementModel(this.measurementTemplates[0]._id));
+ this.charts.push(_.cloneDeep(this.chartInit));
}
removeMeasurement(index) {
@@ -292,14 +342,24 @@ export class SampleComponent implements OnInit, AfterContentChecked {
this.api.delete('/measurement/' + this.sample.measurements[index]._id);
}
this.sample.measurements.splice(index, 1);
+ this.charts.splice(index, 1);
}
- fileToArray(event, mIndex, parameter) {
+ clearChart(index) {
+ this.charts[index][0].data = [];
+ }
+
+ fileToArray(files, mIndex, parameter) {
const fileReader = new FileReader();
fileReader.onload = () => {
this.sample.measurements[mIndex].values[parameter] = fileReader.result.toString().split('\r\n').map(e => e.split(','));
+ this.generateChart(this.sample.measurements[mIndex].values[parameter], mIndex);
};
- fileReader.readAsText(event.target.files[0]);
+ fileReader.readAsText(files[0]);
+ }
+
+ generateChart(spectrum, index) {
+ this.charts[index][0].data = spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));
}
toggleCondition() {
diff --git a/src/app/samples/samples.component.html b/src/app/samples/samples.component.html
index ee76318..9aae131 100644
--- a/src/app/samples/samples.component.html
+++ b/src/app/samples/samples.component.html
@@ -45,7 +45,7 @@
-
+
@@ -54,11 +54,6 @@
-
-
-
-
-