main.js¶
Create an main.js file with the following content:
const anomalyDetectorUrl = '/api/anomalydetection/v3';
/**
* Trains model.
*/
function train() {
const timeseries = document.getElementById('train-timeseries').value;
const epsilon = document.getElementById('epsilon').value;
const clusterSize = document.getElementById('cluster-size').value;
const algorithm = document.getElementById('algorithm').value;
// region request for training model.
const xhr = new XMLHttpRequest();
xhr.open('POST', `${anomalyDetectorUrl}/models?epsilon=${epsilon}&minPointsPerCluster=${clusterSize}&distanceMeasureAlgorithm=${algorithm}`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-XSRF-TOKEN', getCookie("XSRF-TOKEN"));
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200 && xhr.status != 201) {
console.log(xhr.status + ': ' + xhr.statusText);
}
else {
console.log(xhr.responseText);
const model = JSON.parse(xhr.responseText);
document.getElementById('train-result').textContent = `id: ${model.id}`;
document.getElementById('model-id').value = model.id;
}
}
xhr.send(timeseries);
// endregion.
}
/**
* Detects anomalyes.
*/
function detect() {
const timeseries = document.getElementById('detect-timeseries').value;
const modelId = document.getElementById('model-id').value;
// region request for anomaly.
var xhr = new XMLHttpRequest();
xhr.open('POST', `${anomalyDetectorUrl}/detectanomalies?modelID=${modelId}`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-XSRF-TOKEN', getCookie("XSRF-TOKEN"));
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
console.log(xhr.status + ': ' + xhr.statusText);
}
else {
console.log(xhr.responseText);
addTable(JSON.parse(xhr.responseText));
}
}
xhr.send(timeseries);
// endregion
/**
* Adds results table.
* @param eventList List of anomaly events.
*/
function addTable(eventList) {
let eventHtml = '';
for (let i = 0; i < eventList.length; i++) {
eventHtml +=
`<div class="body__row">
<div class="body__cell">${eventList[i]._time}</div>
<div class="body__cell">${eventList[i].anomalyExtent}</div>
</div>`;
}
document.getElementById('detect-result').innerHTML = eventHtml;
}
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('train-timeseries').value = JSON.stringify([
{
"_time": "2018-05-29T09:56:32.836Z",
"temperature": 199.13066,
"pressure": 200.18154,
"flow": 203.91713
},
{
"_time": "2018-05-29T09:56:33.123Z",
"temperature": 199.41138,
"pressure": 200.93165,
"flow": 202.68726
},
{
"_time": "2018-05-29T09:56:33.323Z",
"temperature": 199.97283,
"pressure": 201.27727,
"flow": 201.78946
},
{
"_time": "2018-05-29T09:56:33.524Z",
"temperature": 200.9599,
"pressure": 201.0878,
"flow": 200
},
{
"_time": "2018-05-29T09:56:33.725Z",
"temperature": 201.09573,
"pressure": 200.41176,
"flow": 200
},
{
"_time": "2018-05-29T09:56:33.928Z",
"temperature": 200.53428,
"pressure": 200.1574,
"flow": 202.12152
},
{
"_time": "2018-05-29T09:56:34.131Z",
"temperature": 199.76455,
"pressure": 199.87969,
"flow": 203.51127
},
{
"_time": "2018-05-29T09:56:34.372Z",
"temperature": 199.05821,
"pressure": 198.97925,
"flow": 202.76101
},
{
"_time": "2018-05-29T09:56:34.573Z",
"temperature": 199.69211,
"pressure": 198.52587,
"flow": 199.10835
},
{
"_time": "2018-05-29T09:56:34.774Z",
"temperature": 200.39845,
"pressure": 199.23372,
"flow": 202.04773
},
{
"_time": "2018-05-29T09:56:34.975Z",
"temperature": 201.16818,
"pressure": 198.84877,
"flow": 198.49884
},
{
"_time": "2018-05-29T09:56:35.176Z",
"temperature": 201.37646,
"pressure": 199.48577,
"flow": 200.76867
},
{
"_time": "2018-05-29T09:56:35.376Z",
"temperature": 201.9379,
"pressure": 200.34455,
"flow": 201.51889
},
{
"_time": "2018-05-29T09:56:35.577Z",
"temperature": 201.9379,
"pressure": 201.52781,
"flow": 201.02694
},
{
"_time": "2018-05-29T09:56:35.778Z",
"temperature": 201.59379,
"pressure": 202.047,
"flow": 201.92474
},
{
"_time": "2018-05-29T09:56:35.978Z",
"temperature": 200.88745,
"pressure": 202.31414,
"flow": 200.76867
},
{
"_time": "2018-05-29T09:56:36.178Z",
"temperature": 199.97283,
"pressure": 200.76865,
"flow": 197.46032
},
{
"_time": "2018-05-29T09:56:36.378Z",
"temperature": 198.70505,
"pressure": 201.46883,
"flow": 200
},
{
"_time": "2018-05-29T09:56:36.579Z",
"temperature": 198.35188,
"pressure": 200.02609,
"flow": 198.5918
},
{
"_time": "2018-05-29T09:56:36.780Z",
"temperature": 198.28849,
"pressure": 199.65622,
"flow": 199.42154
},
{
"_time": "2018-05-29T09:56:36.981Z",
"temperature": 198.35188,
"pressure": 198.69944,
"flow": 201.4082
},
{
"_time": "2018-05-29T09:56:37.181Z",
"temperature": 199.48383,
"pressure": 198.22855,
"flow": 200.12914
},
{
"_time": "2018-05-29T09:56:37.382Z",
"temperature": 200.53428,
"pressure": 198.38551,
"flow": 200.38741
},
{
"_time": "2018-05-29T09:56:37.582Z",
"temperature": 201.72962,
"pressure": 198.25873,
"flow": 199.36662
},
{
"_time": "2018-05-29T09:56:37.782Z",
"temperature": 202.5718,
"pressure": 199.60198,
"flow": 197.53411
},
{
"_time": "2018-05-29T09:56:37.982Z",
"temperature": 202.71669,
"pressure": 201.44933,
"flow": 198.72709
},
{
"_time": "2018-05-29T09:56:38.183Z",
"temperature": 202.21863,
"pressure": 202.2309,
"flow": 200
},
{
"_time": "2018-05-29T09:56:38.384Z",
"temperature": 202.01035,
"pressure": 201.86136,
"flow": 198.78858
},
{
"_time": "2018-05-29T09:56:38.585Z",
"temperature": 201.37646,
"pressure": 201.87042,
"flow": 200.19063
},
{
"_time": "2018-05-29T09:56:38.785Z",
"temperature": 200.53428,
"pressure": 201.76326,
"flow": 203.17921
},
{
"_time": "2018-05-29T09:56:38.986Z",
"temperature": 199.76455,
"pressure": 201.42971,
"flow": 202.71186
},
{
"_time": "2018-05-29T09:56:39.186Z",
"temperature": 198.84994,
"pressure": 200.70375,
"flow": 199.66179
},
{
"_time": "2018-05-29T09:56:39.387Z",
"temperature": 198.00776,
"pressure": 201.74817,
"flow": 197.6571
},
{
"_time": "2018-05-29T09:56:39.588Z",
"temperature": 197.72704,
"pressure": 200.88486,
"flow": 201.02694
},
{
"_time": "2018-05-29T09:56:39.789Z",
"temperature": 197.86287,
"pressure": 199.64969,
"flow": 197.6571
},
{
"_time": "2018-05-29T09:56:39.990Z",
"temperature": 199.69211,
"pressure": 200.41176,
"flow": 201.1499
},
{
"_time": "2018-05-29T09:56:40.190Z",
"temperature": 198.98577,
"pressure": 200.27059,
"flow": 197.06676
},
{
"_time": "2018-05-29T09:56:40.390Z",
"temperature": 199.33894,
"pressure": 201.26671,
"flow": 196.99297
},
{
"_time": "2018-05-29T09:56:40.591Z",
"temperature": 200.53428,
"pressure": 201.46883,
"flow": 200
},
{
"_time": "2018-05-29T09:56:40.791Z",
"temperature": 200.326,
"pressure": 202.2309,
"flow": 201.1499
},
{
"_time": "2018-05-29T09:56:40.992Z",
"temperature": 200.9599,
"pressure": 201.74817,
"flow": 201.14993
},
{
"_time": "2018-05-29T09:56:41.192Z",
"temperature": 201.4489,
"pressure": 201.19879,
"flow": 198.85007
},
{
"_time": "2018-05-29T09:56:41.393Z",
"temperature": 201.37646,
"pressure": 200.32572,
"flow": 203.0808
},
{
"_time": "2018-05-29T09:56:41.593Z",
"temperature": 202.01035,
"pressure": 199.64969,
"flow": 200.2445
},
{
"_time": "2018-05-29T09:56:41.793Z",
"temperature": 201.87451,
"pressure": 199.53256,
"flow": 203.08082
},
{
"_time": "2018-05-29T09:56:41.994Z",
"temperature": 200.46184,
"pressure": 199.12354,
"flow": 198.5918
},
{
"_time": "2018-05-29T09:56:42.195Z",
"temperature": 199.69211,
"pressure": 199.26866,
"flow": 200.2435
},
{
"_time": "2018-05-29T09:56:42.396Z",
"temperature": 200.04528,
"pressure": 200.32572,
"flow": 200.87988
},
{
"_time": "2018-05-29T09:56:42.596Z",
"temperature": 200.39845,
"pressure": 200.61621,
"flow": 202.306
},
{
"_time": "2018-05-29T09:56:42.796Z",
"temperature": 200.88745,
"pressure": 200.41176,
"flow": 201.6
}
]);
document.getElementById('detect-timeseries').value = JSON.stringify([
{
"_time": "2018-05-29T09:56:32.836Z",
"temperature": 196.53066,
"pressure": 196.48154,
"flow": 203.61713
},
{
"_time": "2018-05-29T09:56:33.123Z",
"temperature": 200.11138,
"pressure": 199.93165,
"flow": 200.168726
},
{
"_time": "2018-05-29T09:56:33.323Z",
"temperature": 202.97283,
"pressure": 197.27727,
"flow": 196.178946
}
]);
});
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Last update: March 5, 2019