diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue index 0c04c98d82..a222014cde 100644 --- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue +++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue @@ -15,15 +15,18 @@ 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) } })