Merge pull request #434 from OBDDimal/issue-370-Fix-comparing-artifacts

Issue 370 fix comparing artifacts ref #370

frontendVue3/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "@sgratzl/chartjs-chart-boxplot": "^4.2.7",
     "axios": "^1.6.0",
     "chart.js": "^4.4.0",
     "core-js": "^3.8.3",

frontendVue3/src/components/Charts/BoxPlot.vue

@@ -0,0 +1,82 @@
+<template>
+  <canvas ref="chartCanvas"></canvas>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { BoxPlotChart } from "@sgratzl/chartjs-chart-boxplot";
+import { Chart, registerables } from "chart.js";
+Chart.register(...registerables);
+
+const chartCanvas = ref(null);
+const props = defineProps({
+  data: {
+    type: Object,
+    required: false,
+  },
+})
+/*const randomValues = (count, min, max) => {
+
+  const delta = max - min;
+  return Array.from({ length: count }).map(() => Math.random() * delta + min);
+};
+const boxplotData = {
+  labels: ["January", "February", "March", "April", "May", "June", "July"],
+  datasets: [
+    {
+      label: "Dataset 1",
+      backgroundColor: "rgba(242, 244, 255, 1)",
+      borderColor: "rgba(108, 123, 192, 1)",
+      borderWidth: 2,
+      outlierStyle: "circle",
+      outlierBackgroundColor: "#FFE2E2",
+      outlierBorderColor: "#6E1C1C",
+      outlierRadius: 2,
+      outlierBorderWidth: 2,
+      padding: 0,
+      itemRadius: 1,
+      itemBackgroundColor: "#FF8C3C",
+
+      data: [
+        [...randomValues(100, 400, 1000), 160, 140],
+        [...randomValues(100, 500, 200), 50, 55, 60, 65],
+        [...randomValues(100, 500, 700), 5, -5, 105],
+        randomValues(100, 600, 1000),
+        randomValues(40, 500, 1000),
+        randomValues(100, 600, 1200),
+        [...randomValues(100, 600, 1000), 50, 150],
+      ],
+    },
+  ],
+};*/
+onMounted(() => {
+  const ctx = chartCanvas.value.getContext("2d");
+
+  new BoxPlotChart(ctx, {
+    data: props.data,
+    options: {
+      responsive: true,
+      legend: {
+        position: "top",
+      },
+      maintainAspectRatio: false,
+      layout: {
+        padding: {
+          left: -2,
+          right: 0,
+          top: 0,
+          bottom: 1,
+        },
+      },
+      scales: {
+        x: {
+          display: true,
+        },
+        y: {
+          display: true,
+        },
+      },
+    },
+  });
+});
+</script>

frontendVue3/src/components/Charts/LineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <Line :data="chartData" :options="options" />
+  <Line :data="chartData" :options="options" ref="myChart"/>
 </template>
 
 <script setup>
@@ -11,9 +11,9 @@ import {
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
 } from 'chart.js'
-import { Line } from 'vue-chartjs'
+import {Line} from 'vue-chartjs'
 import {ref} from "vue";
 
 ChartJS.register(
@@ -25,22 +25,31 @@ ChartJS.register(
   Tooltip,
   Legend
 )
+const {chartData} = defineProps(['chartData']);
+
 
-const labels = ref(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
-const datasets = ref([
-  {
-    label: 'Data One',
-    backgroundColor: '#f87979',
-    data: [40, 39, 10, 40, 39, 80, 40]
-  }
-])
-const { chartData } = defineProps(['chartData']);
 /*const chartData = ref({
   labels: labels.value,
   datasets: datasets.value
 })*/
-
+const emit = defineEmits(['onHover', 'onUnHover']);
 const options = ref({
   responsive: true,
+  pointHoverRadius: 10,
+  onHover: handleHover,
+  onLeave: handleMouseLeave(),
+  maintainAspectRatio: false,
 })
+function handleMouseLeave(event, elements){
+    emit("onUnHover")
+}
+function handleHover(event, elements){
+  if (elements.length > 0) {
+    const hoveredIndex = elements[0].index;
+    emit("onHover", hoveredIndex)
+  }
+  else {
+    emit("onUnHover")
+  }
+}
 </script>