fix: address comments

Kong · Sep 15, 2023 · cd8a88b · cd8a88b
1 parent 50c3587
commit cd8a88b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -37,11 +37,24 @@
 </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'
 
+function getNumberOfGridRows(element: HTMLElement) {
+
+  if (!element || element.children.length === 0) {
+    return 0
+  }
+
+  const totalItems = element.children.length
+  const computedStyle = window.getComputedStyle(element)
+  const columns = computedStyle.getPropertyValue('grid-template-columns').split(' ').length
+  const rows = Math.ceil(totalItems / columns)
+
+  return rows
+}
+
 const props = defineProps({
   id: {
     type: String,
@@ -61,15 +74,18 @@ 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)) {
+  if (legendContainerRef.value && position.value === ChartLegendPosition.Bottom) {
+    const numberOfRows = getNumberOfGridRows(legendContainerRef.value)
+
+    if (numberOfRows > 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 +173,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 +188,6 @@ const position = inject('legendPosition', ref(ChartLegendPosition.Right))
     }
 
     li {
-      align-items: center;
       display: flex;
       justify-content: start;
     }