Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
vig
Sublinear Algorithms for VA
pseudo
Commits
f936c0b6
Commit
f936c0b6
authored
Feb 03, 2021
by
Kruyff,D.L.W. (Dylan)
Browse files
Added/fixed experiments
Former-commit-id:
6012e545
parent
649da5a6
Changes
108
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: []