update the report viewer to new chart library

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"

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 flex-grow flex-col">
+  <div class="flex max-h-full flex-col">
+    <div v-if="!hasNoMember" class="flex max-h-full flex-grow flex-col overflow-hidden">
       <DropDownSelector
         :options="selectedOptions"
-        @selectionChanged="(value) => updateChartData(value)"
+        @selectionChanged="(value) => (idOfShownSubmission = value)"
       />
-      <RadarChart :chartData="chartData" :options="options" class="flex-grow"></RadarChart>
+      <div class="flex min-h-0 flex-grow 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'
@@ -43,7 +45,7 @@ let hasNoMember = props.cluster.members.size == 0
 
 const selectedOptions = computed(() => Array.from(props.cluster.members.keys()))
 
-const idOfFirstSubmission = selectedOptions.value.length > 0 ? selectedOptions.value[0] : ''
+const idOfShownSubmission = ref(selectedOptions.value.length > 0 ? selectedOptions.value[0] : '')
 
 /**
  * @param member The member to create the labels for.
@@ -102,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>

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, 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'
@@ -62,7 +64,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,
@@ -88,10 +90,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: {

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>