feat: use DraggableGridLayout for all dashboard rendering

Author: Chalks

packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="kong-ui-public-dashboard-renderer">
+  <div
+    class="kong-ui-public-dashboard-renderer"
+    :class="{ editable: context.editable }"
+  >
     <KAlert
       v-if="!queryBridge"
       appearance="danger"
     >
       {{ i18n.t('renderer.noQueryBridge') }}
     </KAlert>
-    <component
-      :is="context.editable ? DraggableGridLayout : GridLayout"
+    <DraggableGridLayout
       v-else
       ref="gridLayoutRef"
+      :editable="context.editable"
       :grid-size="model.gridSize"
       :tile-height="model.tileHeight"
       :tiles="gridTiles"
@@ -30,25 +33,26 @@
           :height="tile.layout.size.rows * (model.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
           :query-ready="queryReady"
           :refresh-counter="refreshCounter"
+          :tile="tile"
           :tile-id="tile.id"
+          @chart-data="onChartData"
           @duplicate-tile="onDuplicateTile(tile)"
           @edit-tile="onEditTile(tile)"
           @remove-tile="onRemoveTile(tile)"
           @zoom-time-range="emit('zoom-time-range', $event)"
         />
       </template>
-    </component>
+    </DraggableGridLayout>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { DashboardRendererContext, DashboardRendererContextInternal, GridTile } from '../types'
 import type { AbsoluteTimeRangeV4, DashboardConfig, TileConfig, SlottableOptions, TileDefinition } from '@kong-ui-public/analytics-utilities'
 import DashboardTile from './DashboardTile.vue'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, nextTick } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import composables from '../composables'
-import GridLayout from './layout/GridLayout.vue'
 import DraggableGridLayout from './layout/DraggableGridLayout.vue'
 import type { DraggableGridLayoutExpose } from './layout/DraggableGridLayout.vue'
 import type { AnalyticsBridge, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
@@ -236,6 +240,11 @@ const onRemoveTile = (tile: GridTile<TileDefinition>) => {
   }
 }
 
+const onChartData = async () => {
+  await nextTick()
+  gridLayoutRef.value.redraw()
+}
+
 const refreshTiles = () => {
   refreshCounter.value++
 }
@@ -265,11 +274,14 @@ defineExpose({ refresh: refreshTiles })
     background: var(--kui-color-background-transparent, $kui-color-background-transparent);
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-    height: 100%;
 
     &.slottable-tile {
       padding: var(--kui-space-60, $kui-space-60);
     }
   }
+
+  &.editable .tile-container {
+    height: 100%;
+  }
 }
 </style>

packages/analytics/dashboard-renderer/src/components/DashboardTile.vue

@@ -116,7 +116,7 @@
 </template>
 <script setup lang="ts">
 import type { DashboardRendererContextInternal } from '../types'
-import { type DashboardTileType, formatTime, type TileDefinition, TimePeriods } from '@kong-ui-public/analytics-utilities'
+import { type DashboardTileType, formatTime, type TileDefinition, type TileConfig, TimePeriods } from '@kong-ui-public/analytics-utilities'
 import { type Component, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 import '@kong-ui-public/analytics-chart/dist/style.css'
 import '@kong-ui-public/analytics-metric-provider/dist/style.css'
@@ -144,6 +144,7 @@ const props = withDefaults(defineProps<{
   height?: number
   queryReady: boolean
   refreshCounter: number
+  tile: TileConfig
   tileId: string | number
 }>(), {
   height: DEFAULT_TILE_HEIGHT,
@@ -154,6 +155,7 @@ const emit = defineEmits<{
   (e: 'duplicate-tile', tile: TileDefinition): void
   (e: 'remove-tile', tile: TileDefinition): void
   (e: 'zoom-time-range', newTimeRange: AbsoluteTimeRangeV4): void
+  (e: 'chart-data', data: ExploreResultV4)
 }>()
 
 const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
@@ -290,6 +292,7 @@ const removeTile = () => {
 
 const onChartData = (data: ExploreResultV4) => {
   chartData.value = data
+  emit('chart-data', data)
 }
 
 const setExportModalVisibility = (val: boolean) => {
@@ -305,7 +308,6 @@ const exportCsv = () => {
 .tile-boundary {
   display: flex;
   flex-direction: column;
-  height: v-bind('`${height}px`');
   overflow: hidden;
 
   &.editable:hover {

packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue

@@ -1,55 +1,66 @@
 <template>
-  <div
-    ref="gridContainer"
-    class="grid-stack"
-  >
+  <div class="grid-wrapper">
     <div
-      v-for="tile in props.tiles"
-      :key="tile.id"
-      class="grid-stack-item"
-      :data-id="`${tile.id}`"
-      :data-testid="`grid-stack-item-${tile.id}`"
-      :gs-h="tile.layout.size.rows"
-      :gs-lazy-load="true"
-      :gs-w="tile.layout.size.cols"
-      :gs-x="tile.layout.position.col"
-      :gs-y="tile.layout.position.row"
+      ref="gridContainer"
+      class="grid-stack"
     >
-      <div class="grid-stack-item-content">
-        <slot
-          name="tile"
-          :tile="tile"
-        />
+      <div
+        v-for="tile in props.tiles"
+        :key="tile.id"
+        class="grid-stack-item"
+        :data-id="`${tile.id}`"
+        :data-testid="`grid-stack-item-${tile.id}`"
+        :gs-h="rowToGridStack(tile.layout.size.rows)"
+        :gs-lazy-load="true"
+        :gs-size-to-content="!editable"
+        :gs-w="tile.layout.size.cols"
+        :gs-x="tile.layout.position.col"
+        :gs-y="rowToGridStack(tile.layout.position.row)"
+      >
+        <div class="grid-stack-item-content">
+          <slot
+            name="tile"
+            :tile="tile"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang='ts' setup generic="T">
-import { onMounted, onUnmounted, ref, watch, nextTick, watchEffect } from 'vue'
+import { onMounted, onUnmounted, computed, ref, watch, nextTick, watchEffect } from 'vue'
 import { GridStack } from 'gridstack'
 import type { GridStackNode } from 'gridstack'
-import type { GridSize, GridTile } from 'src/types'
+import type { GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
+import { DEFAULT_TILE_HEIGHT, MIN_CELL_HEIGHT } from '../../constants'
+import { useDebounce } from '@kong-ui-public/core'
 
 export type DraggableGridLayoutExpose<T> = {
   removeWidget: (id: number | string) => void
+  redraw: () => void
   tiles: GridTile<T>[]
-  gridSize: GridSize
 }
 
 const props = withDefaults(defineProps<{
   tiles: GridTile<T>[]
-  gridSize: GridSize
   tileHeight?: number
+  editable?: boolean
 }>(), {
-  tileHeight: 200,
+  tileHeight: DEFAULT_TILE_HEIGHT,
 })
+
+const rowToGridStack = (row) => props.editable ? row : row * Math.floor(props.tileHeight / MIN_CELL_HEIGHT)
+const gridStackToRow = (gridRow) => props.editable ? gridRow : Math.floor(gridRow / Math.floor(props.tileHeight / MIN_CELL_HEIGHT))
+
 const emit = defineEmits<{
   (e: 'update-tiles', tiles: GridTile<T>[]): void
 }>()
 
+const headerCursor = computed(() => props.editable ? 'move' : 'default')
+
 const gridContainer = ref<HTMLDivElement | null>(null)
 
 const tilesRef = ref<Map<string, GridTile<any>>>(new Map(props.tiles.map(t => [`${t.id}`, t])))
@@ -67,8 +78,8 @@ const makeTilesFromGridItems = (items: GridStackNode[]) => {
       return {
         ...tile,
         layout: {
-          position: { col: Number(item.x), row: Number(item.y) },
-          size: { cols: Number(item.w), rows: Number(item.h) },
+          position: { col: Number(item.x), row: gridStackToRow(Number(item.y)) },
+          size: { cols: Number(item.w), rows: gridStackToRow(Number(item.h)) },
         },
       } satisfies GridTile<T>
     }
@@ -92,18 +103,36 @@ const removeHandler = (_: Event, items: GridStackNode[]) => {
   emit('update-tiles', Array.from(tilesRef.value.values()))
 }
 
-onMounted(() => {
+onMounted(async () => {
   if (gridContainer.value) {
     grid = GridStack.init({
-      column: props.gridSize.cols,
-      cellHeight: props.tileHeight,
+      margin: 10,
+      column: 6,
+      cellHeight: props.editable ? props.tileHeight : MIN_CELL_HEIGHT,
+      cellHeightThrottle: 100,
       resizable: { handles: 'se, sw' },
       handle: '.tile-header',
-
+      staticGrid: !props.editable,
+      columnOpts: !props.editable ? {
+        breakpointForWindow: true,
+        columnMax: 6,
+        breakpoints: [{
+          w: 640, c: 1, // mobile
+        }, {
+          w: 1024, c: 2, // tablet
+        }, {
+          w: 1280, c: 4, // laptop
+        }, {
+          w: 1536, c: 6, // desktop
+        }],
+      } : {},
     }, gridContainer.value)
-    grid.on('change', updateTiles)
-    grid.on('added', updateTiles)
-    grid.on('removed', removeHandler)
+
+    if (props.editable) {
+      grid.on('change', updateTiles)
+      grid.on('added', updateTiles)
+      grid.on('removed', removeHandler)
+    }
   }
 })
 
@@ -113,6 +142,16 @@ onUnmounted(() => {
   }
 })
 
+const { debounce } = useDebounce()
+
+const debouncedRedraw = debounce(() => {
+  props.tiles.forEach(({ id }) => {
+    const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
+    grid.resizeToContent(el)
+    grid.compact()
+  })
+}, 100)
+
 const removeWidget = (id: number | string) => {
   if (grid && gridContainer.value) {
     const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
@@ -131,7 +170,7 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
       grid.makeWidget(makeSelector(tile.id), {
         autoPosition: true,
         w: tile.layout.size.cols,
-        h: tile.layout.size.rows,
+        h: rowToGridStack(tile.layout.size.rows),
       })
     }
   }
@@ -144,14 +183,30 @@ watchEffect(() => {
   })
 })
 
-defineExpose({ removeWidget })
+defineExpose({ removeWidget, redraw: debouncedRedraw })
 
 </script>
 
 <style lang="scss" scoped>
+.grid-wrapper {
+  /*
+   * If you want space between your items in GridStack, you have to provide a
+   * margin. If you provide a margin, GridStack forces you to have an outer
+   * margin not just between tiles. So, anything using this component is always
+   * 20 pixels (2 * margin size) shorter in both the x and y axis than the space
+   * that's provided. To solve this we can wrap it with a basic div and give the
+   * GridStack container negative margin. That makes it so content actually fits
+   * the intended layout of anything that uses this component.
+   */
+  .grid-stack {
+    margin: -10px;
+  }
+}
+
 :deep(.tile-header) {
-  cursor: move;
+  cursor: v-bind('headerCursor');
 }
+
 $rotate-values: (
   'se': 0deg,
   'sw': 90deg,