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
8d6064a7
Commit
8d6064a7
authored
Dec 02, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
add visualization for phylum annotation on db
parent
2fe3bd45
Pipeline
#19183
passed with stages
in 2 minutes and 8 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/Doughnut.vue
0 → 100644
View file @
8d6064a7
<
template
>
<v-flex
xs12
md6
xl4
>
<v-toolbar
:class=
"doughnutData.class"
dark
v-if=
"doughnutData.data"
>
<v-icon
class=
"white--text"
>
{{
doughnutData
.
icon
}}
</v-icon>
<v-toolbar-title>
{{
doughnutData
.
title
}}
(
{{
doughnutData
.
level
}}
)
</v-toolbar-title>
</v-toolbar>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
v-if=
"doughnutData.data"
>
<canvas
:id=
"this.doughnutData.chartId"
></canvas>
</div>
<div
class=
"text-xs-center"
v-else
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
</div>
</v-card>
</v-flex>
</
template
>
<
script
>
import
Chart
from
'
chart.js
'
;
export
default
{
props
:
{
doughnutData
:
{
type
:
Object
,
required
:
true
,
},
},
updated
()
{
this
.
createChart
(
this
.
doughnutData
.
chartId
);
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
colors
=
[];
for
(
var
i
=
0
;
i
<
Object
.
keys
(
this
.
doughnutData
.
data
).
length
;
i
++
)
{
colors
.
push
(
this
.
generateColor
())
}
const
data
=
{
labels
:
Object
.
keys
(
this
.
doughnutData
.
data
),
datasets
:
[
{
data
:
Object
.
values
(
this
.
doughnutData
.
data
),
backgroundColor
:
colors
,
},
],
};
const
options
=
{
legend
:
{
display
:
true
,
}
};
// eslint-disable-next-line
const
myChart
=
new
Chart
(
ctx
,
{
data
:
data
,
type
:
'
doughnut
'
,
options
:
options
,
});
},
generateColor
()
{
var
letters
=
'
0123456789ABCDEF
'
;
var
color
=
'
#
'
;
for
(
var
i
=
0
;
i
<
6
;
i
++
)
{
color
+=
letters
[
Math
.
floor
(
Math
.
random
()
*
16
)];
}
return
color
;
},
},
};
</
script
>
frontend/src/components/Histogram.vue
View file @
8d6064a7
...
...
@@ -40,7 +40,7 @@ export default {
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
histoD
ata
=
{
const
d
ata
=
{
labels
:
this
.
histoData
.
labels
,
datasets
:
[
{
...
...
@@ -54,7 +54,7 @@ export default {
// eslint-disable-next-line
const
myChart
=
new
Chart
(
ctx
,
{
type
:
'
bar
'
,
data
:
histoD
ata
,
data
:
d
ata
,
});
},
},
...
...
frontend/src/views/Stats.vue
View file @
8d6064a7
...
...
@@ -25,6 +25,7 @@
</v-layout>
<v-layout
row
wrap
>
<histogram
:histoData=
"geneLengthData"
></histogram>
<doughnut
:doughnutData=
"taxoCounts"
></doughnut>
</v-layout>
</v-container>
</v-card>
...
...
@@ -37,6 +38,7 @@
import
axios
from
'
axios
'
;
import
Histogram
from
'
@/components/Histogram.vue
'
;
import
CountCard
from
'
@/components/CountCard.vue
'
;
import
Doughnut
from
'
@/components/Doughnut.vue
'
;
export
default
{
name
:
'
home
'
,
...
...
@@ -49,6 +51,7 @@ export default {
geneCountFull
:
{},
geneLengthWindowSize
:
400
,
stopAt
:
5000
,
taxoCounts
:
{},
};
},
mounted
()
{
...
...
@@ -57,6 +60,7 @@ export default {
this
.
getGeneCountsFunctions
();
this
.
getGeneCountsTaxo
();
this
.
getGeneCountsFull
();
this
.
getTaxoCounts
(
'
phylum
'
);
},
methods
:
{
getGeneLength
(
geneLengthWindowSize
,
stopAt
)
{
...
...
@@ -168,10 +172,35 @@ export default {
console
.
log
(
error
);
});
},
getTaxoCounts
(
level
)
{
axios
.
get
(
'
/api/catalog/v1/genes/taxonomy_counts
'
,
{
params
:
{
level
:
level
,
},
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
this
.
taxoCounts
=
{
class
:
"
secondary
"
,
icon
:
"
account_tree
"
,
title
:
"
Taxonomical annotation
"
,
data
:
response
.
data
.
results
.
counts
,
level
:
response
.
data
.
results
.
level
,
backgroundColor
:
'
#f15152
'
,
chartId
:
'
taxo_distri
'
,
};
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
},
},
components
:
{
histogram
:
Histogram
,
countcard
:
CountCard
,
doughnut
:
Doughnut
,
},
};
</
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