From 1e260c4725fdfa9b72eab0d7100be3b5c628f177 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sun, 1 Oct 2023 12:21:55 +0200
Subject: [PATCH] label position

---
 report-viewer/src/components/ClusterGraph.vue | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 68a9c14cd..b57597d1a 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -13,6 +13,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
 import { store } from '@/stores/store'
 import { graphColors } from '@/utils/ColorUtils'
+import { start } from 'repl'
 
 const props = defineProps({
   cluster: {
@@ -85,8 +86,27 @@ const graphData = computed(() => {
   }
 })
 
+const yPadding = 40
+const xPadding = computed(() => {
+  const avgCharacterLength = 8
+
+  const widths = labels.value.map((label) => label.length * avgCharacterLength)
+  const maxWidth = Math.max(...widths)
+  // Space needed for the longest name, but at most 200
+  console.log(maxWidth)
+  return Math.min(200, maxWidth)
+})
+
 const graphOptions = computed(() => {
   return {
+    layout: {
+      padding: {
+        top: yPadding,
+        bottom: yPadding,
+        left: xPadding.value,
+        right: xPadding.value
+      }
+    },
     animation: false as false,
     plugins: {
       legend: { display: false },
@@ -94,12 +114,13 @@ const graphOptions = computed(() => {
         display: true,
         font: {
           weight: 'bold' as 'bold',
-          size: 16
+          size: 12
         },
         formatter: (value: any, ctx: any) => {
           return labels.value[ctx.dataIndex]
         },
-        offset: 12,
+        align: (ctx: any) => (-360 * ctx.dataIndex) / keys.value.length,
+        offset: 8,
         color: graphColors.ticksAndFont.value
       },
       tooltip: {
@@ -124,7 +145,6 @@ function drawGraph() {
     loaded.value = false
     return
   }
-  console.log(graphCanvas.value)
   chart.value = new Chart(ctx, {
     type: 'graph',
     data: graphData.value,