From 3636e87f4549ab98ea85906b7f3bd1ec1065dd95 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 5 Oct 2023 15:26:50 +0200
Subject: [PATCH] Try some options and facet
---
pages/refseq.vue | 127 +++++++++++++++++++++++++++++------------------
1 file changed, 78 insertions(+), 49 deletions(-)
diff --git a/pages/refseq.vue b/pages/refseq.vue
index eb4ef950..4a49021b 100644
--- a/pages/refseq.vue
+++ b/pages/refseq.vue
@@ -9,7 +9,8 @@ const drawer = ref(true);
// const { data } = await useAsyncData("refseq", () =>
// queryContent("/refseq").find()
// );
-
+const facet = ref(false);
+const facetDistriSystem = ref(false);
// console.log(data.value);
const {
data: refseqData,
@@ -76,40 +77,87 @@ function filterOnlyCapsText(value, query, item) {
return false;
}
-const computedDistriTaxoOptions = computed(() => {
+const computedDistriSystemOptions = computed(() => {
+ const groupYOption = facetDistriSystem.value
+ ? {
+ fy: "type",
+ y: selectedTaxoRank.value,
+ fill: selectedTaxoRank.value,
+ tip: true,
+ sort: { y: "-x" },
+ }
+ : {
+ y: "type",
+ tip: true,
+ fill: selectedTaxoRank.value,
+ sort: { y: "-x" },
+ };
+
return {
- style: {
- width: "100%",
- "max-width": "100%",
- },
- marginBottom: 100,
- x: { label: null, tickRotate: 90 },
+ marginLeft: facetDistriSystem.value ? 120 : 112,
+ x: { label: null },
y: { grid: true },
color: { legend: true },
width: computedWidth.value,
- height: height.value,
+ height: facetDistriSystem.value ? height.value * 8 : height.value * 2,
marks: [
- Plot.barY(
+ Plot.frame(),
+ Plot.barX(
unref(selectedRefSeq.value),
- // [
- // { species: "test", type: "Gao" },
- // { species: "test", type: "Gao" },
- // { species: "species2", type: "AVAST" },
- // ],
- Plot.groupX(
- { y: "count" },
- {
- x: selectedTaxoRank.value,
- // x: "genus",
- fill: "type",
- tip: true,
- }
+ Plot.groupY(
+ { x: facetDistriSystem.value ? "proportion-facet" : "count" },
+ groupYOption
)
),
],
};
});
+const computedDistriTaxoOptions = computed(() => {
+ const groupYOption = facet.value
+ ? {
+ y: "type",
+ fy: selectedTaxoRank.value,
+ fill: "type",
+ tip: true,
+ sort: { x: "-y" },
+ }
+ : {
+ y: selectedTaxoRank.value,
+ tip: true,
+ fill: "type",
+ offset: "normalize",
+ sort: { y: "x", reverse: true },
+ };
+
+ return {
+ // style: {
+ // width: "100%",
+ // "max-width": "100%",
+ // },
+
+ marginLeft: 110,
+ marginRight: facet.value ? 110 : 20,
+ marginBottom: 100,
+ grid: true,
+ x: { percent: true },
+ // x: { label: facet.value ? "Count" : null, tickRotate: 90 },
+ // y: { nice: true },
+ color: { legend: true },
+ width: computedWidth.value,
+ height: facet.value ? height.value * 4.3 : height.value,
+ marks: [
+ Plot.frame(),
+ Plot.barX(
+ unref(selectedRefSeq.value),
+ Plot.groupY(
+ { x: facet.value ? "proportion-facet" : "count"},
+ groupYOption
+ )
+ ),
+ ],
+ };
+});
</script>
<template>
@@ -146,33 +194,13 @@ const computedDistriTaxoOptions = computed(() => {
><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar
>
<v-card-text>
+ <v-switch
+ v-model="facetDistriSystem"
+ label="Facet"
+ color="primary"
+ ></v-switch>
<PlotFigure
- :options="{
- style: {
- width: '100%',
- 'max-width': '100%',
- },
- marginBottom: 100,
- x: { label: null, tickRotate: 50 },
- y: { grid: true },
- color: { legend: true },
- width: computedWidth,
- height,
- marks: [
- Plot.barY(
- unref(selectedRefSeq),
- Plot.groupX(
- { y: 'count' },
- {
- x: 'type',
- fill: 'species',
- tip: true,
- sort: { x: '-y' },
- }
- )
- ),
- ],
- }"
+ :options="unref(computedDistriSystemOptions)"
defer
></PlotFigure>
</v-card-text>
@@ -188,6 +216,7 @@ const computedDistriTaxoOptions = computed(() => {
density="compact"
label="Select taxonomic rank"
></v-select>
+ <v-switch v-model="facet" label="Facet" color="primary"></v-switch>
<PlotFigure
defer
:options="unref(computedDistriTaxoOptions)"
--
GitLab