From eb4841ed46a2dfc3f64d695d290cf4452b08b678 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 15:56:50 +0200
Subject: [PATCH 1/5] log scale

---
 report-viewer/src/components/DistributionDiagram.vue |  8 +++++++-
 report-viewer/src/views/OverviewView.vue             | 12 +++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index c53e51433..8d4c437a9 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed, type Prop, type PropType } from 'vue'
 import { Bar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
@@ -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'
   }
 })
 
@@ -70,6 +75,7 @@ const options = computed(() => {
         //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,
+        type: props.xScale,
         ticks: {
           color: graphColors.ticksAndFont.value
         },
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 9bd976329..4da8aca4d 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/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.

From 5cf3ffe65ee1c812695f7ce4bd0ac736529e7832 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 21:14:51 +0200
Subject: [PATCH 2/5] ensure no fractions

---
 report-viewer/src/components/DistributionDiagram.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 8d4c437a9..8573ece66 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type Prop, type PropType } from 'vue'
+import { computed, type PropType } from 'vue'
 import { Bar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
@@ -77,7 +77,13 @@ const options = computed(() => {
         suggestedMax: maxVal.value + 5,
         type: props.xScale,
         ticks: {
-          color: graphColors.ticksAndFont.value
+          color: graphColors.ticksAndFont.value,
+          // ensures that in log mode only integer values are shown
+          callback: function (value: any) {
+            if (value % 1 === 0) {
+              return value
+            }
+          }
         },
         grid: {
           color: graphColors.gridLines.value

From 65d16842ae9610e89460b913851d1d551e1307eb Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 21:22:36 +0200
Subject: [PATCH 3/5] ensure tick readability

---
 report-viewer/src/components/DistributionDiagram.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 8573ece66..ff00f9a34 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -77,6 +77,9 @@ const options = computed(() => {
         suggestedMax: maxVal.value + 5,
         type: props.xScale,
         ticks: {
+          // 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 only integer values are shown
           callback: function (value: any) {

From 836a1a92423f74f07b8e998b5cd819f060b47390 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 11:07:03 +0200
Subject: [PATCH 4/5] place log ticks evenly appart

---
 .../src/components/DistributionDiagram.vue         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index ff00f9a34..456d3e257 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -74,16 +74,24 @@ 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: {
           // 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 only integer values are shown
+          // ensures that in log mode ticks are placed evenly appart
           callback: function (value: any) {
-            if (value % 1 === 0) {
+            console.log(value)
+            if (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
+              console.log('match')
+              return value
+            }
+            if (props.xScale !== 'logarithmic') {
               return value
             }
           }

From fa1c98b12097e49bb6d7b835730c65d246121a69 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 13:28:04 +0200
Subject: [PATCH 5/5] remove console log

---
 report-viewer/src/components/DistributionDiagram.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 456d3e257..c6ca774d5 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -86,9 +86,7 @@ const options = computed(() => {
           color: graphColors.ticksAndFont.value,
           // ensures that in log mode ticks are placed evenly appart
           callback: function (value: any) {
-            console.log(value)
             if (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
-              console.log('match')
               return value
             }
             if (props.xScale !== 'logarithmic') {