From 46b399476eae05f35cd085dbd5fa7007ed11ae10 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Fri, 22 Mar 2024 14:45:25 -0700
Subject: [PATCH 1/2] fix: make chart tiles respond to new height if they are
 "fitToContent"

---
 .../src/components/DashboardTile.vue          | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 963f97d1e1..7620e9365b 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="tile-boundary">
+  <div
+    ref="tileBoundary"
+    class="tile-boundary"
+  >
     <component
       :is="componentData.component"
       v-if="componentData"
@@ -12,7 +15,7 @@ import { ChartTypes, type DashboardRendererContext, type TileDefinition } from '
 import type {
   Component,
 } from 'vue'
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
 import '@kong-ui-public/analytics-chart/dist/style.css'
 import '@kong-ui-public/analytics-metric-provider/dist/style.css'
 import SimpleChartRenderer from './SimpleChartRenderer.vue'
@@ -33,6 +36,13 @@ const props = withDefaults(defineProps<{
   height: DEFAULT_TILE_HEIGHT,
 })
 
+const heightRef = ref(props.height)
+const tileBoundary = ref<HTMLDivElement | null>(null)
+
+const resizeObserver = new ResizeObserver(entries => {
+  heightRef.value = entries[0].contentRect.height
+})
+
 const rendererLookup: Record<ChartTypes, Component | undefined> = {
   [ChartTypes.TimeseriesLine]: TimeseriesChartRenderer,
   [ChartTypes.HorizontalBar]: BarChartRenderer,
@@ -54,14 +64,27 @@ const componentData = computed(() => {
       context: props.context,
       queryReady: true, // TODO: Pipelining
       chartOptions: props.definition.chart,
-      height: props.height - PADDING_SIZE * 2,
+      height: heightRef.value,
     },
   }
 })
+
+onMounted(() => {
+  if (tileBoundary.value) {
+    resizeObserver.observe(tileBoundary.value as HTMLDivElement)
+  }
+})
+
+onUnmounted(() => {
+  if (tileBoundary.value) {
+    resizeObserver.unobserve(tileBoundary.value as HTMLDivElement)
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>
 .tile-boundary {
-  height: v-bind('`${height}px`');
+  height: v-bind('`${heightRef}px`');
 }
 </style>

From 05bc6a1f75eed284daee827761482f43c34ae21e Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 25 Mar 2024 09:17:41 -0700
Subject: [PATCH 2/2] feat: implement resizeObserver in dashboard tile

---
 .../src/components/DashboardRenderer.vue             |  1 +
 .../src/components/DashboardTile.vue                 | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 0c04c98d82..14be9fd913 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -24,6 +24,7 @@
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"
+          :fit-to-content="tile.layout.size.fitToContent"
           :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
         />
       </template>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 7620e9365b..5b52ffe136 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -15,7 +15,7 @@ import { ChartTypes, type DashboardRendererContext, type TileDefinition } from '
 import type {
   Component,
 } from 'vue'
-import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import '@kong-ui-public/analytics-chart/dist/style.css'
 import '@kong-ui-public/analytics-metric-provider/dist/style.css'
 import SimpleChartRenderer from './SimpleChartRenderer.vue'
@@ -23,17 +23,19 @@ import BarChartRenderer from './BarChartRenderer.vue'
 import { DEFAULT_TILE_HEIGHT } from '../constants'
 import TimeseriesChartRenderer from './TimeseriesChartRenderer.vue'
 import GoldenSignalsRenderer from './GoldenSignalsRenderer.vue'
-import { KUI_SPACE_70 } from '@kong/design-tokens'
 import TopNTableRenderer from './TopNTableRenderer.vue'
+import { KUI_SPACE_70 } from '@kong/design-tokens'
 
 const PADDING_SIZE = parseInt(KUI_SPACE_70, 10)
 
 const props = withDefaults(defineProps<{
   definition: TileDefinition,
   context: DashboardRendererContext,
-  height?: number
+  height?: number,
+  fitToContent?: boolean,
 }>(), {
   height: DEFAULT_TILE_HEIGHT,
+  fitToContent: false,
 })
 
 const heightRef = ref(props.height)
@@ -64,13 +66,13 @@ const componentData = computed(() => {
       context: props.context,
       queryReady: true, // TODO: Pipelining
       chartOptions: props.definition.chart,
-      height: heightRef.value,
+      height: heightRef.value - PADDING_SIZE * 2,
     },
   }
 })
 
 onMounted(() => {
-  if (tileBoundary.value) {
+  if (tileBoundary.value && props.fitToContent) {
     resizeObserver.observe(tileBoundary.value as HTMLDivElement)
   }
 })