From 50c3587617890e06a78e96171185ae2b164f0d94 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 14 Sep 2023 13:18:09 -0700
Subject: [PATCH 1/4] fix(analytics-chart): better legend label truncation
 [MA-2048]

https://konghq.atlassian.net/browse/MA-2048
---
 .../analytics/analytics-chart/sandbox/App.vue |  2 +-
 .../components/chart-plugins/ChartLegend.vue  | 28 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/analytics/analytics-chart/sandbox/App.vue b/packages/analytics/analytics-chart/sandbox/App.vue
index 75d3f7bb31..2e33edc20f 100644
--- a/packages/analytics/analytics-chart/sandbox/App.vue
+++ b/packages/analytics/analytics-chart/sandbox/App.vue
@@ -353,7 +353,7 @@ const metricItems = [{
 }]
 
 const statusCodeLabels = [
-  '200', '300', '400', '500', 'This is a really long chart label to test long labels',
+  '200', '300', '400', '500', '501', '502', '503', '404', '401', '202', '201', '203', '204', 'This is a really long chart label to test long labels',
 ]
 const statusCodeDimensionValues = ref(new Set(statusCodeLabels))
 
diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
index 0449319e47..f0410a960b 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -1,12 +1,13 @@
 <template>
   <ul
     v-if="position !== ChartLegendPosition.Hidden"
+    ref="legendContainerRef"
     class="legend-container"
     :class="positionToClass(position)"
     data-testid="legend"
   >
     <li
-      v-for="{ fillStyle, strokeStyle, text, datasetIndex, index, value } in (itemsRef as any[])"
+      v-for="{ fillStyle, strokeStyle, text, datasetIndex, index, value } in (items as any[])"
       :key="text"
       @click="handleLegendItemClick(datasetIndex, index)"
     >
@@ -19,6 +20,7 @@
       >
         <div
           class="label"
+          :class="{ 'truncate-label' : shouldTruncate }"
           :title="position === ChartLegendPosition.Bottom && text"
         >
           {{ text }}
@@ -35,9 +37,10 @@
 </template>
 
 <script setup lang="ts">
+import { KUI_SPACE_150 } from '@kong/design-tokens'
 import { ChartLegendPosition } from '../../enums'
 import { Chart } from 'chart.js'
-import { inject, ref, toRef } from 'vue'
+import { inject, ref, watch } from 'vue'
 
 const props = defineProps({
   id: {
@@ -54,8 +57,19 @@ const props = defineProps({
     default: () => null,
   },
 })
+const legendContainerRef = ref<HTMLElement>()
+const shouldTruncate = ref(false)
+
+const checkForWrap = () => {
+  if (legendContainerRef.value) {
+    const scrollHeight = legendContainerRef.value.scrollHeight
+    if (scrollHeight > parseInt(KUI_SPACE_150, 10)) {
+      shouldTruncate.value = true
+    }
+  }
+}
 
-const itemsRef = toRef(props, 'items')
+watch(() => props.items, checkForWrap, { immediate: true })
 
 const handleLegendItemClick = (datasetIndex: number = 0, segmentIndex: number): void => {
   if (props.chartInstance === null) {
@@ -138,13 +152,17 @@ const position = inject('legendPosition', ref(ChartLegendPosition.Right))
   &.horizontal {
     column-gap: $kui-space-10;
     display: grid;
-    grid-template-columns: repeat(auto-fit, $kui-space-150);
+    grid-template-columns: repeat(auto-fit, minmax(12ch, max-content));
     justify-content: center;
     max-height: $kui-space-150;
     width: 100%;
 
     .label {
-      max-width: $kui-space-120;
+      width: 14ch;
+    }
+
+    .truncate-label {
+      max-width: 10ch;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

From 1b4914b186852ec70b536e9c93cf34ea6b2ba84b Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 14 Sep 2023 19:30:19 -0700
Subject: [PATCH 2/4] fix: address comments

calculate the number of row in the grid layout, representing
the legend by comparing the "top" position of each item
incrementing the numberOfRows each time there is a difference.

Use the number of rows to determine if a label should be
truncated or not
---
 .../analytics/analytics-chart/sandbox/App.vue |  2 +-
 .../components/chart-plugins/ChartLegend.vue  | 44 +++++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/analytics/analytics-chart/sandbox/App.vue b/packages/analytics/analytics-chart/sandbox/App.vue
index 2e33edc20f..75d3f7bb31 100644
--- a/packages/analytics/analytics-chart/sandbox/App.vue
+++ b/packages/analytics/analytics-chart/sandbox/App.vue
@@ -353,7 +353,7 @@ const metricItems = [{
 }]
 
 const statusCodeLabels = [
-  '200', '300', '400', '500', '501', '502', '503', '404', '401', '202', '201', '203', '204', 'This is a really long chart label to test long labels',
+  '200', '300', '400', '500', 'This is a really long chart label to test long labels',
 ]
 const statusCodeDimensionValues = ref(new Set(statusCodeLabels))
 
diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
index f0410a960b..8074df6c64 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -9,6 +9,7 @@
     <li
       v-for="{ fillStyle, strokeStyle, text, datasetIndex, index, value } in (items as any[])"
       :key="text"
+      ref="legendItemsRef"
       @click="handleLegendItemClick(datasetIndex, index)"
     >
       <div
@@ -37,10 +38,9 @@
 </template>
 
 <script setup lang="ts">
-import { KUI_SPACE_150 } from '@kong/design-tokens'
 import { ChartLegendPosition } from '../../enums'
 import { Chart } from 'chart.js'
-import { inject, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
 const props = defineProps({
   id: {
@@ -58,18 +58,44 @@ const props = defineProps({
   },
 })
 const legendContainerRef = ref<HTMLElement>()
+const legendItemsRef = ref<HTMLElement[]>([])
 const shouldTruncate = ref(false)
 
+// Return the number of rows for a grid layout
+// by cmparing the top position of each item.
+const numberOfRows = computed(() => {
+  const element = legendContainerRef.value
+  if (!element || !legendItemsRef.value || element.children.length === 0) {
+    return 0
+  }
+
+  let numberOfRows = 1
+  let previousTop = element.children[0].getBoundingClientRect().top
+  for (const item of legendItemsRef.value) {
+    const currentTop = item.getBoundingClientRect().top
+    // If the top position of the current item is
+    // different from the previous item, that means
+    // there is a new row.
+    if (currentTop !== previousTop) {
+      numberOfRows++
+      previousTop = currentTop
+    }
+  }
+
+  return numberOfRows
+})
+
 const checkForWrap = () => {
-  if (legendContainerRef.value) {
-    const scrollHeight = legendContainerRef.value.scrollHeight
-    if (scrollHeight > parseInt(KUI_SPACE_150, 10)) {
+  if (legendContainerRef.value && position.value === ChartLegendPosition.Bottom) {
+    if (numberOfRows.value > 1) {
       shouldTruncate.value = true
+    } else {
+      shouldTruncate.value = false
     }
   }
 }
 
-watch(() => props.items, checkForWrap, { immediate: true })
+watch(() => props.items, checkForWrap, { immediate: true, flush: 'post' })
 
 const handleLegendItemClick = (datasetIndex: number = 0, segmentIndex: number): void => {
   if (props.chartInstance === null) {
@@ -157,10 +183,13 @@ const position = inject('legendPosition', ref(ChartLegendPosition.Right))
     max-height: $kui-space-150;
     width: 100%;
 
+    .legend {
+      margin-top: $kui-space-30;
+    }
+
     .label {
       width: 14ch;
     }
-
     .truncate-label {
       max-width: 10ch;
       overflow: hidden;
@@ -169,7 +198,6 @@ const position = inject('legendPosition', ref(ChartLegendPosition.Right))
     }
 
     li {
-      align-items: center;
       display: flex;
       justify-content: start;
     }

From b77e90f0761c93b6502c5a490becfbabe13a0615 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Fri, 15 Sep 2023 09:32:32 -0700
Subject: [PATCH 3/4] fix: also run truncation logic on window resize

---
 .../src/components/chart-plugins/ChartLegend.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
index 8074df6c64..71735e05a9 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -40,7 +40,7 @@
 <script setup lang="ts">
 import { ChartLegendPosition } from '../../enums'
 import { Chart } from 'chart.js'
-import { computed, inject, ref, watch } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const props = defineProps({
   id: {
@@ -63,7 +63,7 @@ const shouldTruncate = ref(false)
 
 // Return the number of rows for a grid layout
 // by cmparing the top position of each item.
-const numberOfRows = computed(() => {
+const numberOfRows = () => {
   const element = legendContainerRef.value
   if (!element || !legendItemsRef.value || element.children.length === 0) {
     return 0
@@ -83,11 +83,11 @@ const numberOfRows = computed(() => {
   }
 
   return numberOfRows
-})
+}
 
 const checkForWrap = () => {
   if (legendContainerRef.value && position.value === ChartLegendPosition.Bottom) {
-    if (numberOfRows.value > 1) {
+    if (numberOfRows() > 1) {
       shouldTruncate.value = true
     } else {
       shouldTruncate.value = false
@@ -97,6 +97,14 @@ const checkForWrap = () => {
 
 watch(() => props.items, checkForWrap, { immediate: true, flush: 'post' })
 
+onMounted(() => {
+  window.addEventListener('resize', checkForWrap)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkForWrap)
+})
+
 const handleLegendItemClick = (datasetIndex: number = 0, segmentIndex: number): void => {
   if (props.chartInstance === null) {
     // https://konghq.atlassian.net/browse/KHCP-4679

From 2cc1707a31b85519f4906d335ab1c9588d78d6ef Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Fri, 15 Sep 2023 10:00:42 -0700
Subject: [PATCH 4/4] fix: label width was larger than its container's minimum
 width

---
 .../src/components/chart-plugins/ChartLegend.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
index 71735e05a9..221c92ad60 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -196,7 +196,7 @@ const position = inject('legendPosition', ref(ChartLegendPosition.Right))
     }
 
     .label {
-      width: 14ch;
+      width: 12ch;
     }
     .truncate-label {
       max-width: 10ch;