fix: make chart tiles respond to new height if they are "fitToContent"

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>