Option to display distribution diagram with logorithmic scale

report-viewer/src/components/DistributionDiagram.vue

@@ -22,6 +22,11 @@ const props = defineProps({
   distribution: {
     type: Object as PropType<Distribution>,
     required: true
+  },
+  xScale: {
+    type: String as PropType<'linear' | 'logarithmic'>,
+    required: false,
+    default: 'linear'
   }
 })
 
@@ -69,9 +74,25 @@ const options = computed(() => {
       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: maxVal.value + 5,
+        suggestedMax:
+          props.xScale === 'linear'
+            ? maxVal.value + 5
+            : 10 ** Math.ceil(Math.log10(maxVal.value + 5)),
+        type: props.xScale,
         ticks: {
-          color: graphColors.ticksAndFont.value
+          // ensures that in log mode tick labels are not overlappein
+          minRotation: props.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 (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
+              return value
+            }
+            if (props.xScale !== 'logarithmic') {
+              return value
+            }
+          }
         },
         grid: {
           color: graphColors.gridLines.value

report-viewer/src/views/OverviewView.vue

@@ -27,6 +27,7 @@
         <h2>Distribution of Comparisons:</h2>
         <DistributionDiagram
           :distribution="overview.distribution[selectedDistributionDiagramMetric]"
+          :x-scale="distributionDiagramScaleX"
           class="h-2/3 w-full"
         />
         <div class="flex flex-grow flex-col space-y-1">
@@ -39,6 +40,14 @@
                 (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
               "
             />
+            <OptionsSelector
+              class="mt-2"
+              name="Scale x-Axis:"
+              :labels="['Linear', 'Logarithmic']"
+              @selection-changed="
+                (i: number) => (distributionDiagramScaleX = i == 0 ? 'linear' : 'logarithmic')
+              "
+            />
           </ScrollableComponent>
         </div>
       </Container>
@@ -77,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, watch, type Ref } from 'vue'
 import { router } from '@/router'
 import DistributionDiagram from '@/components/DistributionDiagram.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
@@ -96,6 +105,7 @@ const overview = OverviewFactory.getOverview()
 
 const searchString = ref('')
 const comparisonTableSortingMetric = ref(MetricType.AVERAGE)
+const distributionDiagramScaleX: Ref<'linear' | 'logarithmic'> = ref('linear')
 
 /**
  * This funtion gets called when the search bar for the compariosn table has been updated.