Enhance Distribution Diagramm

report-viewer/src/components/distributionDiagram/DistributionDiagram.vue

@@ -0,0 +1,173 @@
+<!--
+  Bar diagram, displaying the distribution for the selected metric.
+-->
+<template>
+  <div class="flex flex-col">
+    <div class="h-3/4 w-full print:h-fit print:w-fit">
+      <Bar :data="chartData" :options="options" />
+    </div>
+
+    <DistributionDiagramOptions class="flex-grow print:grow-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart, registerables } from 'chart.js'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { graphColors } from '@/utils/ColorUtils'
+import type { Distribution } from '@/model/Distribution'
+import { MetricType } from '@/model/MetricType'
+import { store } from '@/stores/store'
+import DistributionDiagramOptions from './DistributionDiagramOptions.vue'
+
+Chart.register(...registerables)
+Chart.register(ChartDataLabels)
+
+const props = defineProps({
+  distributions: {
+    type: Object as PropType<Record<MetricType, Distribution>>,
+    required: true
+  },
+  xScale: {
+    type: String as PropType<'linear' | 'logarithmic'>,
+    required: false,
+    default: 'linear'
+  }
+})
+
+const graphOptions = computed(() => store().uiState.distributionChartConfig)
+const distribution = computed(() => props.distributions[graphOptions.value.metric])
+const distributionData = computed(() =>
+  distribution.value.splitIntoBuckets(graphOptions.value.bucketCount)
+)
+
+const maxVal = computed(() => Math.max(...distributionData.value))
+
+const labels = computed(() => {
+  let labels = []
+  for (let i = 0; i < distributionData.value.length; i++) {
+    labels.push(getDataPointLabel(i))
+  }
+  return labels.reverse()
+})
+
+const dataSetStyle = computed(() => {
+  return {
+    label: 'Comparisons in bucket',
+    backgroundColor: graphColors.contentFill,
+    borderWidth: 1,
+    borderColor: graphColors.contentBorder,
+    tickColor: graphColors.ticksAndFont.value
+  }
+})
+
+const chartData = computed(() => {
+  return {
+    labels: labels.value,
+    datasets: [
+      {
+        ...dataSetStyle.value,
+        data: distributionData.value
+      }
+    ]
+  }
+})
+
+const options = computed(() => {
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: 'y' as 'y',
+    scales: {
+      x: {
+        //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5,
+        //otherwise maximum is set to the highest count of submissions and is one bar always reaches the end.
+        suggestedMax:
+          graphOptions.value.xScale === 'linear'
+            ? maxVal.value + 5
+            : 10 ** Math.ceil(Math.log10(maxVal.value + 5)),
+        type: graphOptions.value.xScale,
+        ticks: {
+          // ensures that in log mode tick labels are not overlappein
+          minRotation: graphOptions.value.xScale === 'logarithmic' ? 30 : 0,
+          autoSkipPadding: 10,
+          color: graphColors.ticksAndFont.value,
+          // ensures that in log mode ticks are placed evenly appart
+          callback: function (value: any) {
+            if (graphOptions.value.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
+              return value
+            }
+            if (graphOptions.value.xScale !== 'logarithmic') {
+              return value
+            }
+          }
+        },
+        grid: {
+          color: graphColors.gridLines.value
+        }
+      },
+      y: {
+        ticks: {
+          color: graphColors.ticksAndFont.value,
+          callback: function (reversedValue: any) {
+            const value = distributionData.value.length - reversedValue - 1
+            if (graphOptions.value.bucketCount <= 10) {
+              return getDataPointLabel(value)
+            } else {
+              let labelBreakPoint = 10
+              if (graphOptions.value.bucketCount <= 25) {
+                labelBreakPoint = 5
+              } else {
+                labelBreakPoint = Math.floor(graphOptions.value.bucketCount / 10)
+              }
+              if (value == graphOptions.value.bucketCount - 1 || value % labelBreakPoint == 0) {
+                return getDataPointLabel(value)
+              }
+            }
+          }
+        },
+        grid: {
+          color: graphColors.gridLines.value
+        }
+      }
+    },
+    animation: false as false,
+    plugins: {
+      datalabels: {
+        color: graphColors.ticksAndFont.value,
+        font: {
+          weight: 'bold' as 'bold',
+          size: getDataLabelFontSize()
+        },
+        anchor: 'end' as 'end',
+        align: 'end' as 'end',
+        clamp: true,
+        text: 'test'
+      },
+      legend: {
+        display: true,
+        position: 'bottom' as 'bottom',
+        align: 'end' as 'end',
+        onClick: () => {}
+      }
+    }
+  }
+})
+
+function getDataPointLabel(index: number) {
+  let perBucket = 100 / graphOptions.value.bucketCount
+  return index * perBucket + '-' + (index * perBucket + perBucket) + '%'
+}
+
+function getDataLabelFontSize() {
+  if (graphOptions.value.bucketCount == 100) {
+    return 7
+  }
+  if (graphOptions.value.bucketCount == 50) {
+    return 10
+  }
+  return 12
+}
+</script>

report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col space-y-1">
+    <h3 class="text-lg underline">Options:</h3>
+    <ScrollableComponent class="h-fit flex-grow">
+      <MetricSelector
+        class="mt-2"
+        title="Metric:"
+        :defaultSelected="store().uiState.distributionChartConfig.metric"
+        @selection-changed="
+          (metric: MetricType) => (store().uiState.distributionChartConfig.metric = metric)
+        "
+      />
+      <OptionsSelector
+        class="mt-2"
+        title="Scale x-Axis:"
+        :labels="['Linear', 'Logarithmic']"
+        :defaultSelected="store().uiState.distributionChartConfig.xScale == 'linear' ? 0 : 1"
+        @selection-changed="
+          (i: number) =>
+            (store().uiState.distributionChartConfig.xScale = i == 0 ? 'linear' : 'logarithmic')
+        "
+      />
+      <OptionsSelector
+        class="mt-2"
+        title="Bucket Count:"
+        :labels="resolutionOptions.map((div) => div.toString())"
+        :defaultSelected="
+          resolutionOptions.indexOf(store().uiState.distributionChartConfig.bucketCount)
+        "
+        @selection-changed="
+          (i: number) =>
+            (store().uiState.distributionChartConfig.bucketCount = resolutionOptions[i])
+        "
+      />
+    </ScrollableComponent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MetricType } from '@/model/MetricType'
+import { store } from '@/stores/store'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import ScrollableComponent from '../ScrollableComponent.vue'
+import { type BucketOptions } from '@/model/Distribution'
+
+const resolutionOptions = [10, 20, 25, 50, 100] as BucketOptions[]
+</script>

report-viewer/src/model/Distribution.ts

@@ -6,13 +6,17 @@ export class Distribution {
   }
 
   /**
-   * Returns the distribution summed at every tenth percentile
+   * Splits the distribution into the given number of buckets
    */
-  public splitIntoTenBuckets(): number[] {
-    const tenValueArray = new Array<number>(10).fill(0)
+  public splitIntoBuckets(bucketCount: BucketOptions): number[] {
+    const bucketArray = new Array<number>(bucketCount).fill(0)
+    const divisor = 100 / bucketCount
     for (let i = 99; i >= 0; i--) {
-      tenValueArray[Math.floor(i / 10)] += this._distribution[i]
+      bucketArray[Math.floor(i / divisor)] += this._distribution[i]
     }
-    return tenValueArray
+    return bucketArray
   }
 }
+
+type BucketOptions = 10 | 20 | 25 | 50 | 100
+export type { BucketOptions }

report-viewer/src/model/ui/DistributionChartConfig.ts

@@ -1,3 +1,4 @@
+import type { BucketOptions } from '../Distribution'
 import type { MetricType } from '../MetricType'
 
 /**
@@ -6,4 +7,5 @@ import type { MetricType } from '../MetricType'
 export interface DistributionChartConfig {
   metric: MetricType
   xScale: 'linear' | 'logarithmic'
+  bucketCount: BucketOptions
 }

report-viewer/src/stores/store.ts

@@ -29,7 +29,8 @@ const store = defineStore('store', {
       comparisonTableClusterSorting: false,
       distributionChartConfig: {
         metric: MetricType.AVERAGE,
-        xScale: 'linear'
+        xScale: 'linear',
+        bucketCount: 10
       }
     }
   }),