Experiements box plot per genotypes 104

client-nuxt/components/charts/PhenotypeBoxPlot.vue

+<template>
+  <v-card flat
+    ><highcharts
+      ref="chart"
+      :options="sanitizedchartOptions"
+      :update-args="[true, true, true]"
+    ></highcharts>
+  </v-card>
+</template>
+
+<script>
+import * as d3Array from 'd3-array'
+
+export default {
+  props: {
+    phenotypePerGenotype: { type: Map, default: () => new Map([]) },
+    phenotypeName: { type: String, default: () => '' },
+  },
+  data() {
+    return {
+      chartOptions: {
+        title: { text: 'Boxplot' },
+        chart: {
+          type: 'boxplot',
+          height: 500,
+        },
+        legend: { enabled: false },
+        xAxis: {
+          title: {
+            text: 'Genotypes',
+          },
+        },
+        yAxis: {
+          title: { text: 'Phenotype' },
+        },
+
+        exporting: {
+          sourceWidth: 1600,
+          sourceHeight: 900,
+          // buttons: {
+          //   contextButton: {
+          //     menuItems: [
+          //       'viewFullscreen',
+          //       'printChart',
+          //       'separator',
+          //       'downloadPNG',
+          //       'downloadJPEG',
+          //       'downloadPDF',
+          //       'downloadSVG',
+          //       'separator',
+          //       'downloadCSV',
+          //       'downloadXLS',
+          //     ],
+          //   },
+          // },
+        },
+        credits: false,
+      },
+    }
+  },
+  computed: {
+    sanitizedchartOptions() {
+      const entries = Array.from(this.phenotypePerGenotype.entries())
+      // const categories = entries.map((d) => d[0].split('-')[0])
+      // const phenotypePerGenotypeSeries = entries.map((d) =>
+      //   d[1].map((d) => d.y)
+      // )
+      const sortedPhenotypeByMeans = entries
+        .map((d) => [d[0], d3Array.mean(d[1].map((e) => e.y))])
+        .sort((a, b) => a[1] - b[1])
+      return {
+        ...this.chartOptions,
+        title: {
+          ...this.chartOptions.title,
+          text: `Boxplot for <b>${this.phenotypeName}</b>`,
+        },
+        xAxis: {
+          ...this.chartOptions.xAxis,
+          categories: sortedPhenotypeByMeans.map((d) => d[0]),
+        },
+        yAxis: {
+          title: {
+            text: `${this.phenotypeName}`,
+          },
+        },
+        series: [
+          {
+            name: 'Observations',
+            data: sortedPhenotypeByMeans.map(([key, mean], i) => {
+              const sortedPhenotype = this.phenotypePerGenotype
+                .get(key)
+                .map((d) => d.y)
+                .sort()
+              return {
+                x: i,
+                low: d3Array.min(sortedPhenotype),
+                q1: d3Array.quantileSorted(sortedPhenotype, 0.25),
+                median: d3Array.quantileSorted(sortedPhenotype, 0.5),
+                q3: d3Array.quantileSorted(sortedPhenotype, 0.75),
+                high: d3Array.max(sortedPhenotype),
+                count: sortedPhenotype.length,
+                name: key,
+              }
+            }),
+            tooltip: {
+              headerFormat: null,
+              pointFormat:
+                '<span style="color:{point.color}">●</span> <b> {point.name}</b><br/>' +
+                'Maximum: {point.high}<br/>' +
+                'Upper quartile: {point.q3}<br/>' +
+                'Median: {point.median}<br/>' +
+                'Lower quartile: {point.q1}<br/>' +
+                'Minimum: {point.low}<br/>' +
+                'Count: {point.count}',
+            },
+          },
+        ],
+      }
+    },
+  },
+}
+</script>
+
+<style></style>