feat: implement resizeObserver in dashboard tile

Kong · Mar 25, 2024 · 7252e10 · 7252e10
1 parent 46b3994
commit 7252e10
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -15,15 +15,18 @@
       <template #tile="{ tile }">
         <div
           v-if="tile.meta.chart.type === ChartTypes.Slottable"
+          ref="tileContainer"
           class="tile-container"
         >
           <slot :name="tile.meta.chart.id" />
         </div>
         <DashboardTile
           v-else
+          ref="tileContainer"
           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
@@ -15,25 +15,27 @@ 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'
 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)
   }
 })