Try some options and facet

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)"