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
15d85517
Commit
15d85517
authored
Jun 24, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
start component for histogram
parent
2f25484f
Pipeline
#12776
passed with stage
in 1 minute and 26 seconds
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
backend/metagenedb/apps/catalog/views/statistics.py
View file @
15d85517
...
...
@@ -30,7 +30,7 @@ def _count_windows(df, window_col, window_size=10000):
labels
.
append
(
f
"
{
rg
[
0
]
}
-
{
rg
[
1
]
-
1
}
"
)
data
.
append
(
df
[
_get_mask
(
df
,
rg
,
window_col
)].
count
()[
'gene_length'
])
return
{
'
data
'
:
data
,
'
counts
'
:
data
,
'labels'
:
labels
}
...
...
backend/metagenedb/apps/catalog/views/test_statistics.py
View file @
15d85517
...
...
@@ -16,7 +16,7 @@ class TestCountWindows(TestCase):
def
test_simple_count_window10
(
self
):
expected_dict
=
{
'labels'
:
[
'0-9'
,
'10-19'
,
'20-29'
,
'30-39'
],
'
data
'
:
[
0
,
0
,
2
,
1
]
'
counts
'
:
[
0
,
0
,
2
,
1
]
}
test_dict
=
_count_windows
(
self
.
df
,
self
.
window_col
,
10
)
self
.
assertDictEqual
(
test_dict
,
expected_dict
)
frontend/src/App.vue
View file @
15d85517
...
...
@@ -28,4 +28,5 @@
}
}
}
</
style
>
</
style
>
\ No newline at end of file
frontend/src/components/Histo.vue
0 → 100644
View file @
15d85517
<
template
>
<div
id=
"app"
>
<h1>
Gene Length Distribution
</h1>
<canvas
id=
"histogram"
></canvas>
</div>
</
template
>
<
script
>
import
Chart
from
'
chart.js
'
;
export
default
{
props
:
[
'
geneLengthData
'
],
data
()
{
return
{
data
:
this
.
geneLengthData
,
}
},
mounted
()
{
this
.
createChart
(
'
histogram
'
);
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
histoData
=
{
labels
:
this
.
data
.
labels
,
datasets
:[
{
label
:
'
Number of genes
'
,
data
:
this
.
data
.
counts
}
]
}
const
myChart
=
new
Chart
(
ctx
,
{
type
:
'
bar
'
,
data
:
histoData
,
});
}
}
}
</
script
>
\ No newline at end of file
frontend/src/components/chart-data.js
0 → 100644
View file @
15d85517
export
const
planetChartData
=
{
type
:
'
bar
'
,
data
:
{
labels
:
[
'
0-10000
'
,
'
10000-20000
'
,
'
20000-30000
'
,
'
30000-40000
'
,
'
40000-50000
'
,
'
50000-60000
'
,
'
60000-70000
'
,
'
70000-80000
'
,
'
80000-90000
'
],
datasets
:
[
{
// one line graph
label
:
'
Number of Genes
'
,
data
:
[
0
,
887
,
97
,
10
,
3
,
0
,
1
,
0
,
2
],
backgroundColor
:
[
'
rgba(54,73,93,.5)
'
,
// Blue
],
borderColor
:
[
'
#36495d
'
,
],
borderWidth
:
3
},
]
},
options
:
{
responsive
:
true
,
lineTension
:
1
,
scales
:
{
yAxes
:
[{
ticks
:
{
beginAtZero
:
true
,
padding
:
25
,
}
}]
}
}
}
export
default
planetChartData
;
\ No newline at end of file
frontend/src/views/Home.vue
View file @
15d85517
...
...
@@ -7,19 +7,25 @@
<h4>
{{
gene
.
gene_id
}}
</h4>
<p>
Gene length:
{{
gene
.
gene_length
}}
{{
gene
.
functions
}}
</p>
</div>
<histo
v-if=
geneLengthData
v-bind:geneLengthData=
"geneLengthData"
></histo>
</div>
</
template
>
<
script
>
import
Histo
from
'
../components/Histo.vue
'
;
export
default
{
name
:
'
home
'
,
data
()
{
return
{
genes
:
[],
count
:
0
,
// geneLengthData: {},
};
},
mounted
()
{
this
.
fetchGenes
();
this
.
fetchGeneLength
();
},
methods
:
{
fetchGenes
()
{
...
...
@@ -38,6 +44,22 @@ export default {
}
});
},
fetchGeneLength
()
{
fetch
(
'
/catalog/api/gene_length
'
,
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
if
(
response
.
ok
)
{
response
.
json
().
then
((
json
)
=>
{
this
.
geneLengthData
=
json
.
data
;
});
}
});
},
},
components
:
{
histo
:
Histo
}
};
</
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