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
75246de9
Commit
75246de9
authored
Dec 03, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
add interactive options for doughnut graph
parent
2d989b93
Pipeline
#19235
passed with stages
in 2 minutes and 9 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/Doughnut.vue
View file @
75246de9
<
template
>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
v-if=
"doughnutData.data"
>
<canvas
:id=
"
this.doughnutData.
chartId"
></canvas>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
<div
class=
"text-xs-center"
v-else
>
<!--
<div
class=
"text-xs-center"
v-else
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
</div>
-->
<v-layout
align-center
wrap
>
<v-switch
v-model=
"displayLegend"
label=
"Display legend"
>
</v-switch>
<v-flex
xs12
sm6
>
<v-select
v-model=
"hideLabels"
:items=
"this.labels"
attach
chips
label=
"Hide fields"
multiple
></v-select>
</v-flex>
</v-layout>
</div>
</v-card>
</
template
>
...
...
@@ -24,37 +43,53 @@ export default {
required
:
true
,
},
},
updated
()
{
this
.
createChart
(
this
.
doughnutData
.
chartId
);
watch
:
{
doughnutData
(
val
)
{
this
.
updateChart
();
},
displayLegend
(
val
)
{
this
.
updateChartOptions
();
},
hideLabels
()
{
this
.
updateChartData
();
}
},
data
()
{
return
{
myChart
:
{},
options
:
{},
colors
:
[],
chartId
:
"
myChart
"
,
displayLegend
:
true
,
labels
:
[],
hideLabels
:
[],
}
},
mounted
()
{
this
.
createChart
(
this
.
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
,
this
.
myChart
=
new
Chart
(
ctx
,
{
data
:
this
.
data
,
type
:
'
doughnut
'
,
options
:
options
,
options
:
this
.
options
,
});
},
updateChart
()
{
this
.
dataDict
=
this
.
doughnutData
.
data
;
this
.
labels
=
Object
.
keys
(
this
.
doughnutData
.
data
);
this
.
generateColorList
();
this
.
updateChartOptions
();
this
.
updateChartData
();
},
generateColorList
()
{
this
.
color
=
[];
for
(
var
i
=
0
;
i
<
Object
.
keys
(
this
.
doughnutData
.
data
).
length
;
i
++
)
{
this
.
colors
.
push
(
this
.
generateColor
())
}
},
generateColor
()
{
var
letters
=
'
0123456789ABCDEF
'
;
var
color
=
'
#
'
;
...
...
@@ -63,6 +98,31 @@ export default {
}
return
color
;
},
updateChartOptions
()
{
this
.
options
=
{
legend
:
{
display
:
this
.
displayLegend
,
}
};
this
.
myChart
.
options
=
this
.
options
;
this
.
myChart
.
update
();
},
updateChartData
()
{
const
dataDict
=
Object
.
assign
({},
this
.
dataDict
);
for
(
let
i
=
0
;
i
<
this
.
hideLabels
.
length
;
i
++
)
{
delete
dataDict
[
this
.
hideLabels
[
i
]];
};
this
.
myChart
.
data
=
{
labels
:
Object
.
keys
(
dataDict
),
datasets
:
[
{
data
:
Object
.
values
(
dataDict
),
backgroundColor
:
this
.
colors
,
},
],
};
this
.
myChart
.
update
();
}
},
};
</
script
>
frontend/src/views/Stats.vue
View file @
75246de9
...
...
@@ -37,8 +37,8 @@
background-color=
"primary"
:items=
"this.geneLengthChoice"
label=
"Window Length"
value=
400
color=
"secondary"
v-model=
"geneLengthWindowSize"
></v-select>
</v-flex>
<v-flex
xs4
md2
>
...
...
@@ -46,8 +46,8 @@
background-color=
"primary"
:items=
"this.stopAtChoice"
label=
"Stop at"
value=
5000
color=
"secondary"
v-model=
"stopAt"
></v-select>
</v-flex>
</v-toolbar>
...
...
@@ -64,9 +64,10 @@
<v-flex
xs4
md2
>
<v-select
background-color=
"primary"
:items=
"this.selectLevel"
value=
"phylum"
:items=
"selectLevel"
color=
"secondary"
label=
"Level"
v-model=
"taxLevel"
></v-select>
</v-flex>
</v-toolbar>
...
...
@@ -86,6 +87,7 @@ import Histogram from '@/components/Histogram.vue';
import
CountCard
from
'
@/components/CountCard.vue
'
;
import
Doughnut
from
'
@/components/Doughnut.vue
'
;
export
default
{
name
:
'
home
'
,
data
()
{
...
...
@@ -96,27 +98,36 @@ export default {
geneCountTaxo
:
{},
geneCountFull
:
{},
geneLengthWindowSize
:
400
,
stopAtChoice
:
[
5000
,
10000
],
geneLengthChoice
:
[
200
,
400
,
500
,
1000
],
stopAt
:
5000
,
taxoCounts
:
{},
select
Level
:
[
'
kingdom
'
,
'
phylum
'
,
'
genus
'
]
tax
Level
:
'
phylum
'
,
};
},
computed
:
{
stopAtChoice
()
{
return
[
5000
,
10000
];
},
geneLengthChoice
()
{
return
[
200
,
400
,
500
,
1000
];
},
selectLevel
()
{
return
[
'
kingdom
'
,
'
superkingdom
'
,
'
phylum
'
,
'
class
'
,
'
order
'
,
'
family
'
,
'
genus
'
];
}
},
mounted
()
{
this
.
getGeneLength
(
this
.
geneLengthWindowSize
,
this
.
stopAt
);
this
.
getGeneLength
();
this
.
getGeneCountsAll
();
this
.
getGeneCountsFunctions
();
this
.
getGeneCountsTaxo
();
this
.
getGeneCountsFull
();
this
.
getTaxoCounts
(
'
phylum
'
);
this
.
getTaxoCounts
();
},
methods
:
{
getGeneLength
(
geneLengthWindowSize
,
stopAt
)
{
getGeneLength
()
{
axios
.
get
(
'
/api/catalog/v1/genes/gene_length
'
,
{
params
:
{
'
window_size
'
:
geneLengthWindowSize
,
'
stop_at
'
:
stopAt
,
'
window_size
'
:
this
.
geneLengthWindowSize
,
'
stop_at
'
:
this
.
stopAt
,
},
headers
:
{
Accept
:
'
application/json
'
,
...
...
@@ -218,20 +229,21 @@ export default {
console
.
log
(
error
);
});
},
getTaxoCounts
(
level
)
{
getTaxoCounts
()
{
axios
.
get
(
'
/api/catalog/v1/genes/taxonomy_counts
'
,
{
params
:
{
level
:
l
evel
,
level
:
this
.
taxL
evel
,
},
headers
:
{
Accept
:
'
application/json
'
,
},
})
.
then
((
response
)
=>
{
const
chartId
=
'
taxo_distri_
'
+
this
.
taxLevel
this
.
taxoCounts
=
{
data
:
response
.
data
.
results
.
counts
,
level
:
response
.
data
.
results
.
level
,
chartId
:
'
taxo_distri
'
,
chartId
:
chartId
,
};
})
.
catch
((
error
)
=>
{
...
...
@@ -244,5 +256,16 @@ export default {
countcard
:
CountCard
,
doughnut
:
Doughnut
,
},
watch
:
{
taxLevel
(
val
)
{
this
.
getTaxoCounts
();
},
stopAt
(
val
)
{
this
.
getGeneLength
();
},
geneLengthWindowSize
(
val
)
{
this
.
getGeneLength
();
},
}
};
</
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