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
61af92b5
Commit
61af92b5
authored
Dec 04, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
Improve components with props ID and loading icon
parent
da2a9bc0
Pipeline
#19264
passed with stages
in 2 minutes and 11 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/Doughnut.vue
View file @
61af92b5
<
template
>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
<!--
<div
class=
"text-xs-center"
v-else
>
<div
class=
"text-xs-center"
v-if=
"noGraph"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
-->
</div>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
<v-layout
align-center
wrap
justify-space-around
row
>
<v-switch
v-model=
"displayLegend"
label=
"Display legend"
>
</v-switch>
<v-flex
xs12
sm6
>
<v-flex
sm3
>
<v-switch
v-model=
"hideLegend"
label=
"Hide legend"
>
</v-switch>
</v-flex>
<v-flex
sm8
>
<v-select
v-model=
"hideLabels"
:items=
"this.labels"
...
...
@@ -26,6 +28,7 @@
chips
:label=
"hideLabelsLabel"
multiple
clearable
></v-select>
</v-flex>
</v-layout>
...
...
@@ -42,23 +45,28 @@ export default {
type
:
Object
,
required
:
true
,
},
chartId
:
String
,
},
data
()
{
return
{
myChart
:
{},
options
:
{},
colors
:
[],
chartId
:
"
myChart
"
,
displayLegend
:
true
,
hideLegend
:
false
,
labels
:
[],
hideLabels
:
[],
noGraph
:
true
,
}
},
watch
:
{
doughnutData
(
val
)
{
if
(
this
.
noGraph
)
{
this
.
noGraph
=
false
;
this
.
createChart
();
}
this
.
updateChart
();
},
display
Legend
(
val
)
{
hide
Legend
(
val
)
{
this
.
updateChartOptions
();
},
hideLabels
()
{
...
...
@@ -73,21 +81,18 @@ export default {
return
"
Hide
"
+
this
.
doughnutData
.
level
;
}
},
},
mounted
()
{
this
.
createChart
(
this
.
chartId
);
displayLegend
()
{
return
!
this
.
hideLegend
;
}
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
createChart
()
{
const
ctx
=
document
.
getElementById
(
this
.
chartId
);
this
.
myChart
=
new
Chart
(
ctx
,
{
data
:
this
.
data
,
type
:
'
doughnut
'
,
options
:
this
.
options
,
});
},
updateChart
()
{
this
.
dataDict
=
this
.
doughnutData
.
data
;
this
.
labels
=
Object
.
keys
(
this
.
doughnutData
.
data
);
this
.
generateColorList
();
this
.
updateChartOptions
();
...
...
@@ -117,7 +122,7 @@ export default {
this
.
myChart
.
update
();
},
updateChartData
()
{
const
dataDict
=
Object
.
assign
({},
this
.
d
ataDict
);
const
dataDict
=
Object
.
assign
({},
this
.
d
oughnutData
.
data
);
for
(
let
i
=
0
;
i
<
this
.
hideLabels
.
length
;
i
++
)
{
delete
dataDict
[
this
.
hideLabels
[
i
]];
};
...
...
@@ -131,7 +136,7 @@ export default {
],
};
this
.
myChart
.
update
();
}
}
,
},
};
</
script
>
frontend/src/components/Histogram.vue
View file @
61af92b5
<
template
>
<v-card
class=
"pa-2"
>
<div
class=
"card-body"
>
<div
v-if=
"histoData.data"
>
<canvas
:id=
"histoData.chart_id"
></canvas>
</div>
<div
class=
"text-xs-center"
v-else
>
<div
class=
"text-xs-center"
v-if=
"noGraph"
>
<v-progress-circular
indeterminate
color=
"secondary"
></v-progress-circular>
</div>
<div>
<canvas
:id=
"chartId"
></canvas>
</div>
</div>
</v-card>
</
template
>
...
...
@@ -23,14 +23,36 @@ export default {
type
:
Object
,
required
:
true
,
},
chartId
:
String
,
},
updated
()
{
this
.
createChart
(
this
.
histoData
.
chart_id
);
data
()
{
return
{
myChart
:
{},
options
:
{},
noGraph
:
true
,
}
},
watch
:
{
histoData
(
val
)
{
if
(
this
.
noGraph
)
{
this
.
noGraph
=
false
;
this
.
createChart
();
}
this
.
updateChart
();
},
},
methods
:
{
createChart
(
chartId
)
{
const
ctx
=
document
.
getElementById
(
chartId
);
const
data
=
{
createChart
()
{
const
ctx
=
document
.
getElementById
(
this
.
chartId
);
this
.
myChart
=
new
Chart
(
ctx
,
{
type
:
'
bar
'
,
});
},
updateChart
()
{
this
.
updateChartData
();
},
updateChartData
()
{
this
.
myChart
.
data
=
{
labels
:
this
.
histoData
.
labels
,
datasets
:
[
{
...
...
@@ -41,11 +63,7 @@ export default {
},
],
};
// eslint-disable-next-line
const
myChart
=
new
Chart
(
ctx
,
{
type
:
'
bar
'
,
data
:
data
,
});
this
.
myChart
.
update
();
},
},
};
...
...
frontend/src/views/Stats.vue
View file @
61af92b5
...
...
@@ -51,8 +51,9 @@
></v-select>
</v-flex>
</v-toolbar>
<histogram
:histoData=
"geneLengthData"
></histogram>
<histogram
:histoData=
"geneLengthData"
chartId=
"histo_gene_length"
></histogram>
</v-flex>
<!-- Doughnut -->
<v-flex
xs12
md6
xl4
>
<v-toolbar
class=
"secondary"
...
...
@@ -71,7 +72,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut
:doughnutData=
"taxoCounts"
></doughnut>
<doughnut
:doughnutData=
"taxoCounts"
chartId=
"taxo_annotation"
></doughnut>
</v-flex>
</v-layout>
</v-container>
...
...
@@ -135,7 +136,6 @@ export default {
})
.
then
((
response
)
=>
{
this
.
geneLengthData
=
{
chart_id
:
"
histo_gene_length
"
,
data
:
response
.
data
.
results
.
counts
,
labels
:
response
.
data
.
results
.
labels
,
label
:
"
Number of genes
"
,
...
...
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