From f8719b1000abf40b7d52aebf4abaff2c7c23ec1c Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 20 Aug 2023 15:45:41 +0200
Subject: [PATCH 1/4] update to new chart library

---
 report-viewer/package-lock.json               | 44 +++++++++----------
 report-viewer/package.json                    |  4 +-
 .../src/components/ClusterRadarChart.vue      | 10 +++--
 .../src/components/DistributionDiagram.vue    | 14 +++---
 report-viewer/src/views/OverviewView.vue      |  2 +-
 5 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 92dbe09f0..64653ffe8 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -12,14 +12,14 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
-        "chart.js": "^3.9.1",
+        "chart.js": "^4.3.3",
         "chartjs-plugin-datalabels": "^2.2.0",
         "highlight.js": "^11.8.0",
         "jszip": "^3.10.0",
         "pinia": "^2.1.6",
         "slash": "^5.1.0",
         "vue": "^3.3.4",
-        "vue-chart-3": "^3.1.8",
+        "vue-chartjs": "^5.2.0",
         "vue-draggable-next": "^2.2.1",
         "vue-router": "^4.2.4",
         "vue-virtual-scroller": "^2.0.0-beta.8"
@@ -642,6 +642,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1812,9 +1817,15 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
     },
     "node_modules/chartjs-plugin-datalabels": {
       "version": "2.2.0",
@@ -4056,11 +4067,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6601,19 +6607,13 @@
         "@vue/shared": "3.3.4"
       }
     },
-    "node_modules/vue-chart-3": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
-      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
-      "dependencies": {
-        "@vue/runtime-core": "latest",
-        "@vue/runtime-dom": "latest",
-        "csstype": "latest",
-        "lodash-es": "latest"
-      },
+    "node_modules/vue-chartjs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
+      "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
       "peerDependencies": {
-        "chart.js": "=> ^3.1.0",
-        "vue": ">= 3"
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
     "node_modules/vue-component-type-helpers": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 05747c7e9..c431aa026 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -21,14 +21,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.3.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "highlight.js": "^11.8.0",
     "jszip": "^3.10.0",
     "pinia": "^2.1.6",
     "slash": "^5.1.0",
     "vue": "^3.3.4",
-    "vue-chart-3": "^3.1.8",
+    "vue-chartjs": "^5.2.0",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.2.4",
     "vue-virtual-scroller": "^2.0.0-beta.8"
diff --git a/report-viewer/src/components/ClusterRadarChart.vue b/report-viewer/src/components/ClusterRadarChart.vue
index 330888911..c5b7e5682 100644
--- a/report-viewer/src/components/ClusterRadarChart.vue
+++ b/report-viewer/src/components/ClusterRadarChart.vue
@@ -3,13 +3,15 @@
   participants in the cluster.
 -->
 <template>
-  <div class="flex flex-col">
-    <div v-if="!hasNoMember" class="flex-grow flex flex-col">
+  <div class="flex flex-col max-h-full">
+    <div v-if="!hasNoMember" class="flex-grow flex flex-col max-h-full overflow-hidden">
       <DropDownSelector
         :options="selectedOptions"
         @selectionChanged="(value) => updateChartData(value)"
       />
-      <RadarChart :chartData="chartData" :options="options" class="flex-grow"></RadarChart>
+      <div class="flex-grow min-h-0 flex justify-center">
+        <Radar :data="chartData" :options="options" />
+      </div>
     </div>
     <div v-else>
       <span>This cluster has no members.</span>
@@ -23,7 +25,7 @@ import type { ChartData } from 'chart.js'
 import type { ClusterListElement } from '@/model/ClusterListElement'
 
 import { computed, ref } from 'vue'
-import { RadarChart } from 'vue-chart-3'
+import { Radar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import DropDownSelector from './DropDownSelector.vue'
diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 3cc12413c..8a79f6709 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -2,12 +2,14 @@
   Bar diagram, displaying the distribution for the selected metric.
 -->
 <template>
-  <BarChart :chartData="chartData" :options="options" />
+  <div>
+    <Bar :data="chartData" :options="options" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch, type PropType } from 'vue'
-import { BarChart } from 'vue-chart-3'
+import { Bar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { graphColors } from '@/utils/ColorUtils'
@@ -60,7 +62,7 @@ const options = computed(() => {
   return {
     responsive: true,
     maintainAspectRatio: false,
-    indexAxis: 'y',
+    indexAxis: 'y' as 'y',
     scales: {
       x: {
         //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5,
@@ -86,10 +88,10 @@ const options = computed(() => {
       datalabels: {
         color: graphColors.ticksAndFont.value,
         font: {
-          weight: 'bold'
+          weight: 'bold' as 'bold'
         },
-        anchor: 'end',
-        align: 'end',
+        anchor: 'end' as 'end',
+        align: 'end' as 'end',
         clamp: true
       },
       legend: {
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 4db66e6e7..c0907b37a 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -27,7 +27,7 @@
         <h2>Distribution of Comparisons:</h2>
         <DistributionDiagram
           :distribution="overview.distribution[selectedDistributionDiagramMetric]"
-          class="w-full h-2/3"
+          class="!w-full !h-2/3"
         />
         <div class="flex flex-col flex-grow space-y-1">
           <h3 class="text-lg underline">Options:</h3>

From d861aae4ecababb60243816ba53064fcbf0f88b5 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 20 Aug 2023 15:59:16 +0200
Subject: [PATCH 2/4] remove important modifier in css

---
 report-viewer/src/views/OverviewView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index c0907b37a..4db66e6e7 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -27,7 +27,7 @@
         <h2>Distribution of Comparisons:</h2>
         <DistributionDiagram
           :distribution="overview.distribution[selectedDistributionDiagramMetric]"
-          class="!w-full !h-2/3"
+          class="w-full h-2/3"
         />
         <div class="flex flex-col flex-grow space-y-1">
           <h3 class="text-lg underline">Options:</h3>

From e8ece9747c25424f4fa948cb9103398587cf91d4 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Wed, 30 Aug 2023 21:01:12 +0200
Subject: [PATCH 3/4] fix not updating bug

---
 .../src/components/ClusterRadarChart.vue      | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/report-viewer/src/components/ClusterRadarChart.vue b/report-viewer/src/components/ClusterRadarChart.vue
index c5b7e5682..3884246f2 100644
--- a/report-viewer/src/components/ClusterRadarChart.vue
+++ b/report-viewer/src/components/ClusterRadarChart.vue
@@ -7,7 +7,7 @@
     <div v-if="!hasNoMember" class="flex-grow flex flex-col max-h-full overflow-hidden">
       <DropDownSelector
         :options="selectedOptions"
-        @selectionChanged="(value) => updateChartData(value)"
+        @selectionChanged="(value) => (idOfShownSubmission = value)"
       />
       <div class="flex-grow min-h-0 flex justify-center">
         <Radar :data="chartData" :options="options" />
@@ -45,7 +45,7 @@ let hasNoMember = props.cluster.members.size == 0
 
 const selectedOptions = Array.from(props.cluster.members.keys())
 
-const idOfFirstSubmission = selectedOptions.length > 0 ? selectedOptions[0] : ''
+const idOfShownSubmission = ref(selectedOptions.length > 0 ? selectedOptions[0] : '')
 
 /**
  * @param member The member to create the labels for.
@@ -104,22 +104,18 @@ const radarChartOptions = computed(() => {
   }
 })
 
-const chartData: Ref<ChartData<'radar', (number | null)[], unknown>> = ref({
-  labels: createLabelsFor(idOfFirstSubmission),
-  datasets: [
-    {
-      ...radarChartStyle,
-      label: idOfFirstSubmission,
-      data: createDataSetFor(idOfFirstSubmission)
-    }
-  ]
+const chartData: Ref<ChartData<'radar', (number | null)[], unknown>> = computed(() => {
+  return {
+    labels: createLabelsFor(idOfShownSubmission.value),
+    datasets: [
+      {
+        ...radarChartStyle,
+        label: idOfShownSubmission.value,
+        data: createDataSetFor(idOfShownSubmission.value)
+      }
+    ]
+  }
 })
 
 const options = ref(radarChartOptions)
-
-function updateChartData(value: string) {
-  chartData.value.datasets[0].data = createDataSetFor(value)
-  chartData.value.datasets[0].label = value
-  chartData.value.labels = createLabelsFor(value)
-}
 </script>

From 4953f8df5a2b41b5d794e7186ea6505aa8978e77 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 31 Aug 2023 13:21:50 +0200
Subject: [PATCH 4/4] fix bug again

---
 report-viewer/src/components/DropDownSelector.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/DropDownSelector.vue b/report-viewer/src/components/DropDownSelector.vue
index 4ea76f3ab..1e0946ffd 100644
--- a/report-viewer/src/components/DropDownSelector.vue
+++ b/report-viewer/src/components/DropDownSelector.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import Interactable from '@/components/InteractableComponent.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   options: {
@@ -28,5 +28,15 @@ const props = defineProps({
 
 defineEmits(['selectionChanged'])
 
-const selectedOption = computed(() => (props.options.length > 0 ? props.options[0] : ''))
+const _selectedOption = ref('')
+
+const selectedOption = computed({
+  get: () => {
+    if (_selectedOption.value === '') {
+      return props.options[0]
+    }
+    return _selectedOption.value
+  },
+  set: (value) => (_selectedOption.value = value)
+})
 </script>