Commit b224f361 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Hacky way of displaying multiple plots with preview

parent 70316aee
...@@ -21,6 +21,12 @@ export class ApiService { ...@@ -21,6 +21,12 @@ export class ApiService {
return {index, values}; return {index, values};
} }
// Read input data
async readMtsFile(): Promise<any> {
const response = await fetch('http://127.0.0.1:5000/read-mts-data');
return await response.json();
}
// Split data into windows and normalize // Split data into windows and normalize
async createWindows(parameters): Promise<any> { async createWindows(parameters): Promise<any> {
const postData = {parameters}; const postData = {parameters};
......
...@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service'; ...@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service';
providedIn: 'root' providedIn: 'root'
}) })
export class CacheService { export class CacheService {
public rawValues: number[]; public rawValues: number[][];
public rawIndices: string[]; public rawIndices: string[][];
public loadingProgress: number = 0; public loadingProgress: number = 0;
private _currentTab: number; private _currentTab: number;
...@@ -56,9 +56,10 @@ export class CacheService { ...@@ -56,9 +56,10 @@ export class CacheService {
} }
async getRawData(): Promise<void> { async getRawData(): Promise<void> {
const rawData: RawData = await this.api.readFile(); const channels = await this.api.readMtsFile();
this.rawIndices = rawData.index; console.log(channels);
this.rawValues = rawData.values; this.rawIndices = channels.map((channel) => channel.index);
this.rawValues = channels.map((channel) => channel.values);
this.onNewData.emit(); this.onNewData.emit();
} }
......
...@@ -85,8 +85,8 @@ export class LabelingWindowComponent implements OnInit { ...@@ -85,8 +85,8 @@ export class LabelingWindowComponent implements OnInit {
{ {
index: window.index, index: window.index,
data: [{ data: [{
x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize), x: [...Array(this.service.windowSize).keys()],
y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize), y: this.service.rawValues[0].slice(window.index, window.index + this.service.windowSize),
type: 'line' type: 'line'
}], }],
layout: { layout: {
......
...@@ -25,8 +25,8 @@ export class LabelsComponent implements OnInit { ...@@ -25,8 +25,8 @@ export class LabelsComponent implements OnInit {
{ {
index, index,
data: [{ data: [{
x: this.service.rawIndices.slice(index, index + this.service.windowSize), x: [...Array(this.service.windowSize).keys()],
y: this.service.rawValues.slice(index, index + this.service.windowSize), y: this.service.rawValues[0].slice(index, index + this.service.windowSize),
type: 'line' type: 'line'
}], }],
layout: { layout: {
......
<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular> <zingchart-angular #chart [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular>
<div id="test"></div>
import {Component, OnInit} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { CacheService } from '../cache.service'; import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6'; import zingchart from 'zingchart/es6';
...@@ -9,11 +9,13 @@ import zingchart from 'zingchart/es6'; ...@@ -9,11 +9,13 @@ import zingchart from 'zingchart/es6';
}) })
export class OverviewWindowComponent implements OnInit { export class OverviewWindowComponent implements OnInit {
public config; public config;
public graphset = [];
public id = "overview"; public id = "overview";
public markers = []; public markers = [];
public series = []; public series = [];
public goodLabels = []; public goodLabels = [];
public badLabels = []; public badLabels = [];
@ViewChild('chart') chart;
public data; public data;
public layout; public layout;
...@@ -32,22 +34,73 @@ export class OverviewWindowComponent implements OnInit { ...@@ -32,22 +34,73 @@ export class OverviewWindowComponent implements OnInit {
} }
async initializePlot() { async initializePlot() {
this.service.queryWindow = undefined; // Initialize channels
this.data = []; for (const channel of this.service.rawValues) {
for (let i = 0; i < this.service.rawValues.length; i++) { const data = [];
this.data.push([i, this.service.rawValues[i]]); for (let i = 0; i < channel.length; i++) {
data.push([i, channel[i]]);
} }
this.series = [ this.graphset.push({
{
type: 'line', type: 'line',
values: this.data, // zoom: {
// shared: true
// },
plotarea: {
"margin-top": "10px",
"margin-bottom": "0px",
height: '50px',
},
scaleX: {
zooming: true,
zoomTo: [0, this.service.windowSize],
markers: []
},
'scale-y': {
zooming: false,
'auto-fit': true
},
series: [{
type: 'line',
values: data,
text: 'Raw Values', text: 'Raw Values',
zIndex: 5, zIndex: 5,
marker: { marker: {
alpha: 0.0, alpha: 0.0,
zIndex: 10 zIndex: 10
} }
}]
});
}
// Initialize label chart
this.graphset.push({
type: "scatter",
// plot: {
// visible: false,
// },
scaleX: {
zooming: true,
minValue: 0,
maxValue: this.service.rawValues[0].length,
zoomTo: [0, this.service.windowSize],
'auto-fit': true,
visible: false,
guide: {
visible: false
}
},
scaleY: {
maxValue: 1,
minValue: -1,
visible: false,
guide: {
visible: false
}
}, },
preview: {
height: "30px",
position: "0% 20%",
},
series: [
{ {
type: 'scatter', type: 'scatter',
values: [], values: [],
...@@ -65,29 +118,35 @@ export class OverviewWindowComponent implements OnInit { ...@@ -65,29 +118,35 @@ export class OverviewWindowComponent implements OnInit {
backgroundColor: '#f44336' backgroundColor: '#f44336'
}, },
zIndex: 20, zIndex: 20,
}];
this.config = {
type: "mixed",
preview: {
height: "30px",
position: "0% 100%",
'auto-fit': true
},
"plotarea": {
"margin-top": "10px",
"margin-bottom": "50%"
},
scaleX: {
zooming: true,
zoomTo: [0, this.service.windowSize],
'auto-fit': true,
markers: this.markers
}, },
'scale-y': { {
'auto-fit': true type: 'scatter',
values: [],
text: 'Candidates',
marker: {
backgroundColor: '#b1a343'
}, },
series: this.series zIndex: 20,
}
]
});
zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
if (e.graphid !== 'zingchart-ng-1-graph-id2') {
return;
}
for (let i = 0; i < this.graphset.length - 1; i ++) {
this.chart.zoomto({
graphid: i,
xmin: e.xmin,
xmax: e.xmax
});
}
});
this.config = {
layout: '3x1',
graphset: this.graphset
}; };
console.log(this.config);
console.log("showing plot"); console.log("showing plot");
} }
...@@ -96,12 +155,15 @@ export class OverviewWindowComponent implements OnInit { ...@@ -96,12 +155,15 @@ export class OverviewWindowComponent implements OnInit {
return; return;
} }
this.service.querySelectionMode = false; this.service.querySelectionMode = false;
const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', { const xyInformation = JSON.parse(this.chart.getxyinfo({
x: clickData.x, x: clickData.x,
y: clickData.y y: clickData.y
}); }));
console.log(xyInformation);
console.log(xyInformation[2]);
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize); const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize)); console.log(index);
await this.service.getQueryWindow(this.service.rawValues[0].slice(index, index + this.service.windowSize));
const temp = {}; const temp = {};
temp[index] = true; temp[index] = true;
this.service.labels = temp; this.service.labels = temp;
...@@ -118,30 +180,34 @@ export class OverviewWindowComponent implements OnInit { ...@@ -118,30 +180,34 @@ export class OverviewWindowComponent implements OnInit {
this.markers = []; this.markers = [];
for (const index in this.service.labels) { for (const index in this.service.labels) {
if (this.service.labels[index]) { if (this.service.labels[index]) {
this.goodLabels.push(this.data[index]); this.goodLabels.push([Number(index), 0]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10], range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
backgroundColor: "#4caf50", backgroundColor: "#4caf50",
}); });
} else { } else {
this.badLabels.push(this.data[index]); this.badLabels.push([Number(index), 0]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10], range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
backgroundColor: "#f44336", backgroundColor: "#f44336",
}); });
} }
} }
this.series[1].values = this.goodLabels; for (const channel of this.config.graphset) {
this.series[2].values = this.badLabels; if (channel.type === 'line') {
this.config.scaleX.markers = this.markers; channel.scaleX.markers = this.markers;
zingchart.exec("zingchart-ng-1", 'setdata', { } else {
channel.series[0].values = this.goodLabels;
channel.series[1].values = this.badLabels;
}
}
this.chart.setdata({
data: this.config data: this.config
}); });
console.log('querying');
await this.service.getSimilarWindows(); await this.service.getSimilarWindows();
console.log('done'); console.log('done');
} }
...@@ -155,27 +221,23 @@ export class OverviewWindowComponent implements OnInit { ...@@ -155,27 +221,23 @@ export class OverviewWindowComponent implements OnInit {
const labels = []; const labels = [];
const markers = []; const markers = [];
for (const index of candidates) { for (const index of candidates) {
labels.push(this.data[index]); labels.push([Number(index), 0]);
markers.push({ markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10], range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
backgroundColor: "#b1a343", backgroundColor: "#b1a343",
}); });
} }
const newSeries = this.config.series.slice(0, 3); for (const channel of this.config.graphset) {
newSeries.push({ if (channel.type === 'line') {
type: 'scatter', channel.scaleX.markers = this.markers;
values: labels, } else {
text: 'Similar windows', channel.series[0].values = this.goodLabels;
marker: { channel.series[1].values = this.badLabels;
backgroundColor: '#b1a343' }
}, }
zIndex: 20, this.chart.setdata({
});
this.config.series = newSeries;
this.config.scaleX.markers = this.markers.concat(markers);
zingchart.exec("zingchart-ng-1", 'setdata', {
data: this.config data: this.config
}); });
} }
...@@ -185,13 +247,20 @@ export class OverviewWindowComponent implements OnInit { ...@@ -185,13 +247,20 @@ export class OverviewWindowComponent implements OnInit {
return; return;
} }
if (p.ev.wheelDelta > 0) { if (p.ev.wheelDelta > 0) {
zingchart.exec("zingchart-ng-1", 'zoomin'); for (let i = 0; i < this.graphset.length; i ++) {
} else if (p.ev.wheelDelta < 0) { this.chart.zoomin({
zingchart.exec("zingchart-ng-1", 'zoomout'); graphid: i
});
} }
} else if (p.ev.wheelDelta < 0) {
for (let i = 0; i < this.graphset.length; i ++) {
this.chart.zoomout({
graphid: i
});
} }
} }
doubleClick(e) { doubleClick(e) {
zingchart.exec("zingchart-ng-1", 'viewall'); this.chart.viewall();
} }
} }
...@@ -139,6 +139,6 @@ export class ProgressViewComponent implements OnInit { ...@@ -139,6 +139,6 @@ export class ProgressViewComponent implements OnInit {
} }
public get amountOfCandidates() { public get amountOfCandidates() {
return this.similarity[this._sliderValue.toString()].length; return 1; // this.similarity[this._sliderValue.toString()].length;
} }
} }
...@@ -2,8 +2,10 @@ ...@@ -2,8 +2,10 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment=""> <list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
...@@ -16,8 +18,8 @@ ...@@ -16,8 +18,8 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2448"> <state relative-caret-position="-3340">
<caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" /> <caret line="62" column="36" selection-start-line="62" selection-start-column="36" selection-end-line="62" selection-end-column="36" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
...@@ -57,7 +59,7 @@ ...@@ -57,7 +59,7 @@
</list> </list>
</option> </option>
</component> </component>
<component name="ProjectFrameBounds" extendedState="6"> <component name="ProjectFrameBounds" extendedState="7">
<option name="x" value="-11" /> <option name="x" value="-11" />
<option name="y" value="-11" /> <option name="y" value="-11" />
<option name="width" value="1890" /> <option name="width" value="1890" />
...@@ -142,12 +144,12 @@ ...@@ -142,12 +144,12 @@
<workItem from="1599487808817" duration="1192000" /> <workItem from="1599487808817" duration="1192000" />
<workItem from="1599578907139" duration="8436000" /> <workItem from="1599578907139" duration="8436000" />
<workItem from="1599661275060" duration="1249000" /> <workItem from="1599661275060" duration="1249000" />
<workItem from="1600001984238" duration="5154000" /> <workItem from="1600001984238" duration="8284000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="99210000" /> <option name="totallyTimeSpent" value="102340000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="-7" y="-7" width="1295" height="695" extended-state="7" /> <frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
...@@ -209,8 +211,8 @@ ...@@ -209,8 +211,8 @@
</entry> </entry>
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2448"> <state relative-caret-position="-3340">
<caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" /> <caret line="62" column="36" selection-start-line="62" selection-start-column="36" selection-end-line="62" selection-end-column="36" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
......
...@@ -39,6 +39,34 @@ def read_data(): ...@@ -39,6 +39,34 @@ def read_data():
response = jsonify(response) response = jsonify(response)
return response return response
@app.route('/read-mts-data', methods=['GET'])
def read_mts_data():
filename = 'data.pkl'
if (not os.path.isfile(filename)):
print("start")
df = dd.read_csv("NW_Ground_Stations_2016.csv", usecols=['number_sta', 'date', 't'])
print("read file")
df = df.loc[df['number_sta'] == 14066001]
print("split rows")
df = df.compute()
df.to_pickle(filename)
print("to_pandas")
df = pd.read_pickle(filename)
df.dropna(subset=['t'], inplace=True)
response = [
{
"index": df.loc[:, 'date'].iloc[0:int(len(df.index)/2)].values.astype(str).tolist(),
"values": df.loc[:, 't'].iloc[0:int(len(df.index)/2)].values.tolist()
},
{
"index": df.loc[:, 'date'].iloc[int(len(df.index)/2):len(df.index)].values.astype(str).tolist(),
"values": df.loc[:, 't'].iloc[int(len(df.index)/2):len(df.index)].values.tolist()
}
]
print("response ready")
response = orjson.dumps(response)
return response