75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
|
import { Component, OnInit } from '@angular/core';
|
||
|
|
import {ChartOptions} from 'chart.js';
|
||
|
|
import {ApiService} from '../services/api.service';
|
||
|
|
import {animate, style, transition, trigger} from '@angular/animations';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-prediction',
|
||
|
|
templateUrl: './prediction.component.html',
|
||
|
|
styleUrls: ['./prediction.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 PredictionComponent implements OnInit {
|
||
|
|
|
||
|
|
readonly predictionUrl = 'https://definma-model-test.apps.de1.bosch-iot-cloud.com/predict';
|
||
|
|
result = '';
|
||
|
|
loading = false;
|
||
|
|
spectrum: string[][] = [[]];
|
||
|
|
chart = [{
|
||
|
|
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 api: ApiService
|
||
|
|
) { }
|
||
|
|
|
||
|
|
ngOnInit(): void {
|
||
|
|
}
|
||
|
|
|
||
|
|
fileToArray(files) {
|
||
|
|
const fileReader = new FileReader();
|
||
|
|
fileReader.onload = () => {
|
||
|
|
this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(','));
|
||
|
|
this.loading = true;
|
||
|
|
this.api.post<{result: string}>(this.predictionUrl, this.spectrum, data => {
|
||
|
|
this.result = data.result;
|
||
|
|
this.loading = false;
|
||
|
|
});
|
||
|
|
this.chart[0].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));
|
||
|
|
console.log(this.chart);
|
||
|
|
};
|
||
|
|
fileReader.readAsText(files[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|