Experiements box plot per genotypes 104

client-nuxt/components/charts/PhenotypeBarPlot.vue

+<template>
+  <v-card flat
+    ><highcharts
+      ref="chart"
+      :options="sanitizedchartOptions"
+      :update-args="[true, true, true]"
+    ></highcharts>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    groupedPhenotypes: { type: Array, default: () => [] },
+    phenotypeName: { type: String, default: () => '' },
+  },
+  data() {
+    return {
+      chartOptions: {
+        chart: {
+          type: 'column',
+        },
+        legend: { enabled: false },
+        title: {
+          text: 'Histogram using a column chart',
+        },
+
+        xAxis: {
+          title: { text: 'Genotypes' },
+          type: 'category',
+          // crosshair: true,
+        },
+        yAxis: {
+          min: 0,
+          title: {
+            text: '',
+          },
+        },
+        tooltip: {
+          headerFormat: '<b>{point.key}</b><br>',
+          pointFormat: 'mean : {point.y:.3f}',
+          shared: true,
+          useHTML: true,
+        },
+        plotOptions: {
+          column: {
+            // colorByPoint: true,
+            pointPadding: 0,
+            // borderWidth: 0,
+            groupPadding: 0,
+            // shadow: false,
+          },
+        },
+        series: [
+          {
+            name: 'Data',
+            // data: [
+            //   49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 124.1, 95.6, 54.4,
+            // ],
+          },
+        ],
+        exporting: {
+          sourceWidth: 1600,
+          sourceHeight: 900,
+        },
+        credits: false,
+      },
+    }
+  },
+  computed: {
+    categories() {
+      return this.groupedPhenotypes.map((d) => d[0])
+    },
+    phenotypes() {
+      return this.groupedPhenotypes.map((d) => d[1])
+    },
+    sanitizedchartOptions() {
+      return {
+        ...this.chartOptions,
+        title: {
+          ...this.chartOptions,
+          text: `Mean of <b>${this.phenotypeName}</b>`,
+        },
+        // xAxis: { ...this.chartOptions.xAxis, categories: this.categories },
+        yAxis: {
+          title: {
+            text: `Mean of ${this.phenotypeName}`,
+          },
+        },
+        series: this.chartOptions.series.map((s, i) => {
+          if (i === 0) {
+            return { ...s, data: this.groupedPhenotypes }
+          } else {
+            return s
+          }
+        }),
+      }
+    },
+  },
+}
+</script>
+
+<style></style>