Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Metagenomics
metagenedb
Commits
69a2ca55
Commit
69a2ca55
authored
Jun 25, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
link histograms to backend
parent
15d85517
Pipeline
#12799
passed with stage
in 1 minute and 13 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/Histo.vue
→
frontend/src/components/Histo
gram
.vue
View file @
69a2ca55
<
template
>
<div
id=
"app"
>
<div
v-if=
"geneLengthData.counts"
id=
"app"
>
<h1>
Gene Length Distribution
</h1>
<canvas
id=
"histogram"
></canvas>
</div>
...
...
@@ -9,24 +9,24 @@
import
Chart
from
'
chart.js
'
;
export
default
{
props
:
[
'
geneLengthData
'
],
d
ata
()
{
return
{
data
:
this
.
geneLengthData
,
}
},
moun
ted
()
{
props
:
{
geneLengthD
ata
:
{
type
:
Object
,
required
:
true
}
},
upda
ted
()
{
this
.
createChart
(
'
histogram
'
);
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
histoData
=
{
labels
:
this
.
d
ata
.
labels
,
labels
:
this
.
geneLengthD
ata
.
labels
,
datasets
:[
{
label
:
'
Number of genes
'
,
data
:
this
.
d
ata
.
counts
data
:
this
.
geneLengthD
ata
.
counts
}
]
}
...
...
frontend/src/views/Home.vue
View file @
69a2ca55
...
...
@@ -7,12 +7,12 @@
<h4>
{{
gene
.
gene_id
}}
</h4>
<p>
Gene length:
{{
gene
.
gene_length
}}
{{
gene
.
functions
}}
</p>
</div>
<histo
v-if=
geneLengthData
v-bind:geneLengthData=
"geneLengthData"
></histo>
<histo
gram
v-bind:geneLengthData=
"geneLengthData"
></histo
gram
>
</div>
</
template
>
<
script
>
import
Histo
from
'
../components/Histo.vue
'
;
import
Histo
gram
from
'
../components/Histo
gram
.vue
'
;
export
default
{
name
:
'
home
'
,
...
...
@@ -20,12 +20,13 @@ export default {
return
{
genes
:
[],
count
:
0
,
// geneLengthData: {},
geneLengthData
:
{},
geneLengthWindowSize
:
10000
,
};
},
mounted
()
{
this
.
fetchGenes
();
this
.
fetchGeneLength
();
this
.
fetchGeneLength
(
this
.
geneLengthWindowSize
);
},
methods
:
{
fetchGenes
()
{
...
...
@@ -44,8 +45,8 @@ export default {
}
});
},
fetchGeneLength
()
{
fetch
(
'
/catalog/api/gene_length
'
,
{
fetchGeneLength
(
geneLengthWindowSize
)
{
fetch
(
'
/catalog/api/gene_length
?window_size=
'
.
concat
(
geneLengthWindowSize
)
,
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
...
...
@@ -60,6 +61,6 @@ export default {
});
},
},
components
:
{
histo
:
Histo
}
components
:
{
histo
gram
:
Histo
gram
}
};
</
script
>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment