Experiements box plot per genotypes 104

client-nuxt/pages/projects/_id/experiments/_experimentId.vue

@@ -97,19 +97,30 @@
           </v-toolbar>
           <v-card-title>Raw Phenotype</v-card-title>
           <v-card-text>
-            <phenotype
+            <phenotype-distribution
               :phenotype="rawPhenotype"
               :phenotype-name="selectedPhenotype"
-            ></phenotype>
+            ></phenotype-distribution>
           </v-card-text>
           <v-card-title>Transformed Phenotype</v-card-title>
           <v-card-text>
-            <phenotype
+            <phenotype-distribution
               :phenotype="rawPhenotype"
               :phenotype-name="selectedPhenotype"
               :phenotype-transform-types="phenotypeTransformTypes"
-            ></phenotype>
-            <!-- <phenotype :phenotype="[1, 2, 1, 4, 5, 4, 4, 7, 7]"></phenotype> -->
+            ></phenotype-distribution>
+          </v-card-text>
+          <v-card-text class="mt-4">
+            <phenotype-bar-plot
+              :phenotype-name="selectedPhenotype"
+              :grouped-phenotypes="phenotypeMeanPerGenotype"
+            ></phenotype-bar-plot>
+          </v-card-text>
+          <v-card-text>
+            <phenotype-box-plot
+              :phenotype-name="selectedPhenotype"
+              :phenotype-per-genotype="rawPhenotypeGroupedPerGenotype"
+            ></phenotype-box-plot>
           </v-card-text>
         </v-card>
       </v-card-text>
@@ -130,11 +141,14 @@
   </v-card>
 </template>
 <script>
+import * as d3Array from 'd3-array'
 import JsonCSV from 'vue-json-csv'
 
 import ErrorAlert from '@/components/ErrorAlert'
 import AnalysisTable from '@/components/AnalysisTable.vue'
-import Phenotype from '@/components/charts/Phenotype'
+import PhenotypeDistribution from '@/components/charts/PhenotypeDistribution'
+import PhenotypeBarPlot from '@/components/charts/PhenotypeBarPlot'
+import PhenotypeBoxPlot from '@/components/charts/PhenotypeBoxPlot.vue'
 
 import { group } from 'd3-array'
 
@@ -142,8 +156,10 @@ export default {
   components: {
     ErrorAlert,
     AnalysisTable,
-    Phenotype,
+    PhenotypeDistribution,
+    PhenotypeBarPlot,
     downloadCsv: JsonCSV,
+    PhenotypeBoxPlot,
   },
   props: {
     project: { type: Object, default: () => ({}) },
@@ -326,6 +342,17 @@ export default {
         return []
       }
     },
+    rawPhenotypeGroupedPerGenotype() {
+      return group(this.rawPhenotype, (d) => d.id_cc_f)
+    },
+
+    phenotypeMeanPerGenotype() {
+      return Array.from(this.rawPhenotypeGroupedPerGenotype.entries())
+        .map(([k, v]) => {
+          return [k, d3Array.mean(v.map((d) => d.y))]
+        })
+        .sort((a, b) => a[1] - b[1])
+    },
   },
   mounted() {
     if (this.numberPhenotypeNames && this.numberPhenotypeNames.length > 0) {