Skip to content
GitLab
Commit f936c0b6 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Added/fixed experiments 


Former-commit-id: 6012e545
parent 649da5a6
Expand all Hide whitespace changes
Inline Side-by-side
AngularApp/prototype/src/app/api.service.ts
View file @ f936c0b6
import { Injectable } from '@angular/core';
export interface RawData {
index: string[][];
values: number[][];
index: string[];
values: number[];
}
export interface LshData {
......
AngularApp/prototype/src/app/overview-window/overview-window.component.css
View file @ f936c0b6
::ng-deep .modebar {
display: none !important;
}
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
font-family: helvetica, sans-serif;
}
.table-wrapper {
position: relative;
padding-top: 20px;
}
.table-scroll {
height: 100%;
overflow: scroll;
}
table {
margin-right: 0;
margin-left: auto;
}
thead {
background: white;
}
th > div {
width: 4em;
text-align: left;
background: white;
padding: 3px;
top: 0;
}
td {
padding: 3px;
width: 4em;
}
td:last-child,
th:last-child > div {
text-align: right;
}
svg {
}
path {
fill: none;
stroke-width: 1;
stroke: black;
}
.channels {
overflow: scroll;
border:2px solid #000;
}
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @ f936c0b6
<zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular>
<!--<zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular>-->
<div class="table-wrapper">
<div class="table-scroll">
<table>
<thead>
<th><div>Channel</div></th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="channels">
</div>
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @ f936c0b6
import {Component, OnInit, ViewChild} from '@angular/core';
import { StateService } from '../state.service';
import zingchart from 'zingchart/es6';
import * as d3 from 'd3';
@Component({
selector: 'app-overview-window',
......@@ -17,6 +18,7 @@ export class OverviewWindowComponent implements OnInit {
public goodLabels = [];
public badLabels = [];
public candidateLabels = [];
public pathWidth = 100;
public data;
public layout;
......@@ -25,129 +27,376 @@ export class OverviewWindowComponent implements OnInit {
}
async ngOnInit(): Promise<void> {
this.state.onNewData.subscribe(() => this.initializePlot());
// this.state.onNewTable.subscribe(() => this.updatePlot());
this.state.onNewData.subscribe(() => this.doStuff());
// this.state.onNewData.subscribe(() => this.initializePlot());
// this.state.onNewLshData.subscribe(() => this.updatePlot());
}
async initializePlot() {
this.state.queryWindow = undefined;
// this.debugClicked();
this.graphset.push({
id: 'preview',
type: "scatter",
x: 0,
y: 0,
scaleX: {
zooming: true,
minValue: 0,
maxValue: this.state.rawData[0].values.length,
zoomTo: [0, this.state.windowSize],
'auto-fit': true,
visible: false,
guide: {
visible: false
}
},
height: '30px',
scaleY: {
maxValue: 1,
minValue: -1,
visible: false,
guide: {
visible: false
}
},
preview: {
x: 50,
y: 10,
height: '30px',
},
series: [
{
type: 'scatter',
values: [],
text: 'Good labels',
marker: {
backgroundColor: '#4caf50'
},
zIndex: 3,
},
{
type: 'scatter',
values: [],
text: 'Bad labels',
marker: {
backgroundColor: '#f44336'
},
zIndex: 2,
},
{
type: 'scatter',
values: [],
text: 'Candidates',
marker: {
backgroundColor: '#b1a343'
},
zIndex: 1,
}
]
});
// Initialize channels
this.state.rawData.forEach((channel, index) => {
const data = [];
for (let i = 0; i < channel.values.length; i++) {
data.push([i, channel.values[i]]);
doStuff3() {
}
doStuff2() {
const x,y,gX, gY, xAxis, yAxis;
const idList=1
const color = d3.scaleOrdinal(d3.schemeCategory10);
let mainData = null;
const line;
const settings = {
targets:[],
detail:{
type:"line"
}
this.graphset.push({
id: index,
x: 0,
y: `${75 * index + 50}px`,
type: 'line',
height: '50px',
scaleX: {
zooming: true,
zoomTo: [0, this.state.windowSize],
markers: []
},
'scale-y': {
zooming: false,
'auto-fit': true
},
plotarea: {
height: '50px',
'margin-top': '0px',
'margin-bot': '0px'
},
series: [{
type: 'line',
values: data,
text: 'Raw Values',
zIndex: 5,
marker: {
alpha: 0.0,
zIndex: 10
}
}]
});
};
mainData = data;
const svg = d3.select("svg");
d3.select("#area")
.insert("div","svg").html(data[0].metric.AREA_NAME+"<BR>"+data[0].metric.IND_NAME
+"<BR>"+data[0].metric.NAME);
const limits = {maxY: null, minY: null, maxX: null, minX: null};
const padding = {top: 20, bottom: 150, left: 100, right: 20};
const width = +svg.attr("width");
const height = +svg.attr("height");
const canvasHeight = height-padding.top-padding.bottom;
const canvasWidth = width-padding.left-padding.right;
data.forEach(function(e,i) {
const eMaxY = d3.max(e.data,function(d){return +d.VALUE_NUMERIC;});
const eMinY = d3.min(e.data,function(d){return +d.VALUE_NUMERIC;});
const eMaxX = d3.max(e.data,function(d){return new Date(d.DATA_DATE);});
const eMinX = d3.min(e.data,function(d){return new Date(d.DATA_DATE);});
if(limits.maxX == null){ limits.maxX = eMaxX;}
else { if(eMaxX > limits.maxX){ limits.maxX = eMaxX;}}
if(limits.minX == null){ limits.minX = eMinX;}
else { if(eMinX < limits.minX){ limits.minX = eMinX;}}
if(limits.maxY == null){limits.maxY = eMaxY;}
else { if(eMaxY > limits.maxY){limits.maxY = eMaxY;}}
if(limits.minY == null){limits.minY = eMinY;}
else { if(eMinY < limits.minY){limits.minY = eMinY;}}
});
zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
if (e.graphid !== `zingchart-ng-1-graph-preview`) {
return;
settings.targets.forEach(function(d){
if(limits.maxY < d.value){
limits.maxY = d.value;
}
for (let i = 1; i < this.graphset.length; i ++) {
this.chart.zoomto({
graphid: i,
xmin: e.xmin,
xmax: e.xmax
});
if(limits.minY > d.value){
limits.minY = d.value;
}
});
this.config = {
layout: `${this.graphset.length}x1`,
graphset: this.graphset
};
console.log(this.config);
console.log("showing plot");
const canvas = svg.append("g")
.attr("id","canvas")
.attr("width",canvasWidth)
.attr("height",canvasHeight)
.attr("transform","translate("+padding.left+","+padding.top+")")
;
x = d3.scaleTime()
.domain([limits.minX,limits.maxX])
.range([0,+canvas.attr("width")]);
y = d3.scaleLinear()
.domain([limits.maxY*1.1,limits.minY-(limits.minY*0.1)])
.range([0,+canvas.attr("height")]);
line = d3.line()
.x(function(d) { return x(new Date(d.DATA_DATE)); })
.y(function(d) { return y(+d.VALUE_NUMERIC); });
const zoom = d3.zoom().on("zoom",zoomed);
xAxis = d3.axisBottom(x);
yAxis = d3.axisLeft(y);
canvas.selectAll(".targets")
.data(settings.targets)
.enter()
.append("line")
.classed("targets",true)
.style("stroke",function(d){return d.color;})
.style("stroke-width",1)
.attr("x1",x(limits.minX))
.attr("x2",x(limits.maxX))
.attr("y1",function(d){return y(+d.value);})
.attr("y2",function(d){return y(+d.value);});
const clip = canvas.append("clipPath")
.attr("id","clip")
.append("rect")
.attr("width",canvasWidth)
.attr("height",canvasHeight);
gX = canvas.append("g")
.attr("transform","translate(0,"+(+canvas.attr("height"))+")")
.attr("class","axis axis--x")
.call(xAxis);
gY = canvas.append("g").attr("class","axis axis--y").call(yAxis);
d3.selectAll(".axis--y > g.tick > line").attr("x2",canvasWidth).style("stroke","lightgrey");
if(settings.detail.type == "line"){
const lines = canvas.selectAll("path.line")
.data(data)
.enter()
.append("path")
.attr("clip-path", "url(#clip)")
.classed("line",true)
.style("stroke",function(d){ return color(d.metric.METRIC_ID)})
.attr("d",function(d){
return line(d.data);})
;
} else if(settings.detail.type == "bar"){
barWidth = (x(new Date("2016-01-02")) - x(new Date("2016-01-01")));
const barLines = canvas.selectAll("rect.bar")
.data(data[0].data)
.enter()
.append("rect")
.attr("class","bar")
.attr("clip-path", "url(#clip)")
.attr("x",function(d){return x(new Date(d.DATA_DATE))-barWidth*0.5;})
.attr("width",barWidth)
.attr("height",function(d){return canvasHeight-y(d.VALUE_NUMERIC);})
.attr("y",function(d){return y(d.VALUE_NUMERIC);})
.style("fill","steelblue")
.style("stroke","blue")
.style("stroke-width","1px");
}
canvas.append("g")
.attr("transform","translate("+(-40)+","+
(+canvas.attr("height"))/2
+") rotate(270)")
.append("text")
.attr("text-anchor","middle")
.text(data[0].metric.Y_AXIS_NAME);
svg.call(zoom);
});
function zoomed() {
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
const new_x = d3.event.transform.rescaleX(x);
if(settings.detail.type == "line"){
line.x(function(d) { return new_x(new Date(d.DATA_DATE)); })
d3.select("#canvas").selectAll("path.line")
.data(mainData)
.attr("d",function(d){
return line(d.data);
});
} else if(settings.detail.type == "bar"){
barWidth = new_x(new Date("2016-01-02")) - new_x(new Date("2016-01-01"));
d3.select("#canvas").selectAll("rect.bar")
.data(mainData[0].data)
.attr("x",function(d){return new_x(new Date(d.DATA_DATE))-barWidth*0.5;})
.attr("width",barWidth);
}
}
}
doStuff() {
const data = this.state.rawData.map((channel, index) => {
const price = d3.range(channel.values.length).map((i) => {
return {date: i, value: channel.values[i]};
});
return {price: price, ticker: index.toString()};
});
const x = d3.scaleTime()
.domain(d3.extent(d3.merge(data.map(d => d.price)).map((d: any) => d.date)))
.range([0, 80000]); //(d3.select("svg").node() as HTMLElement).getBoundingClientRect().width])
const y = d3.scaleLinear()
.domain(d3.extent(d3.merge(data.map(d => d.price)).map((d: any) => d.value)))
.range([200, 0]);
const line = d3.line()
.x((d: any) => x(d.date))
.y((d: any) => y(d.value));
const row = d3.select("tbody")
.selectAll("tr")
.data(data)
.enter()
.append("tr")
.on("click", function(d,i) {
render(i);
});
row.append("td").text(d => d.ticker);
row.append("td").text(d => d3.format(".0%")(d.price[d.price.length-1].value - 1))
const path = d3.select(".channels")
.selectAll("svg")
.data(data)
.enter()
.append('svg')
.call(d3.zoom().scaleExtent([1, Infinity])
.translateExtent([[0, 0], [100000, 150]])
.extent([[0, 0], [100000, 150]]).on("zoom", function () {
path.attr("transform", d3.event.transform);
}))
.append("path")
.attr("d", (d: any) => line(d.price));
d3.selectAll("svg").attr('width', d3.select('svg').select('path').attr('d').split(',').length.toString() + 'px');
console.log(d3.select('svg').select('path').attr('d').split(',').length);
const scrollScale = d3.scaleLinear()
.domain([0, (d3.select(".table-scroll").node() as HTMLElement).scrollHeight - (50 - 20)])
.range([0, data.length-1])
const opacityScale = d3.scaleLinear()
.domain([0,4])
.range([1,0])
.clamp(true)
d3.select(".table-scroll").on("scroll", function() {
render(Math.round(scrollScale((this as HTMLElement).scrollTop)));
});
function render(index) {
row
.style("opacity", (d,i) => opacityScale(Math.abs(index - i)))
.style("font-weight", (d,i) => i == index ? 'bold' : 'normal')
path
.style("opacity", (d,i) => i == index ? 1 : 0)//opacityScale(Math.abs(index - i)))
.style("stroke-width", (d,i) => i == index ? 3 : 1)
}
}
async initializePlot() {
this.state.queryWindow = undefined;
// this.debugClicked();
// this.graphset.push({
// id: 'preview',
// type: "scatter",
// x: 0,
// y: 0,
// scaleX: {
// zooming: true,
// minValue: 0,
// maxValue: this.state.rawData[0].values.length,
// zoomTo: [0, this.state.windowSize],
// 'auto-fit': true,
// visible: false,
// guide: {
// visible: false
// }
// },
// height: '30px',
// scaleY: {
// maxValue: 1,
// minValue: -1,
// visible: false,
// guide: {
// visible: false
// }
// },
// preview: {
// x: 50,
// y: 10,
// height: '30px',
// },
// series: [
// {
// type: 'scatter',
// values: [],
// text: 'Good labels',
// marker: {
// backgroundColor: '#4caf50'
// },
// zIndex: 3,
// },
// {
// type: 'scatter',
// values: [],
// text: 'Bad labels',
// marker: {
// backgroundColor: '#f44336'
// },
// zIndex: 2,
// },
// {
// type: 'scatter',
// values: [],
// text: 'Candidates',
// marker: {
// backgroundColor: '#b1a343'
// },
// zIndex: 1,
// }
// ]
// });
// // Initialize channels
// this.state.rawData.forEach((channel, index) => {
// const data = [];
// for (let i = 0; i < channel.values.length; i++) {
// data.push([i, channel.values[i]]);
// }
// this.graphset.push({
// id: index,
// x: 0,
// y: `${75 * index + 50}px`,
// type: 'line',
// height: '50px',
// scaleX: {
// zooming: true,
// zoomTo: [0, this.state.windowSize],
// markers: []