feat: use css grid instead for grid layout (#1238)

Kong · Mar 14, 2024 · a747ed3 · a747ed3
1 parent e51f145
commit a747ed3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 62 deletions.
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
@@ -64,7 +64,9 @@ const ajv = new Ajv()
 
 const validate = ajv.compile(dashboardConfigSchema)
 
-const definitionText = ref(`{
+const definitionText = ref(
+  `
+{
     "gridSize": {
       "cols": 5,
       "rows": 5
@@ -88,6 +90,24 @@ const definitionText = ref(`{
           }
         }
       },
+      {
+        "definition": {
+          "chart": {
+            "type": "horizontal_bar"
+          },
+          "query": {}
+        },
+        "layout": {
+          "position": {
+            "col": 2,
+            "row": 0
+          },
+          "size": {
+            "cols": 2,
+            "rows": 2
+          }
+        }
+      },
       {
         "definition": {
           "chart": {
@@ -107,7 +127,8 @@ const definitionText = ref(`{
         }
       }
     ]
-  }`,
+  }
+  `,
 )
 
 const definition = computed<ValidationResult>(() => {

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -50,6 +50,7 @@ const dashboardConfig: DashboardConfig = {
     cols: 6,
     rows: 9,
   },
+  tileHeight: 167,
   tiles: [
     {
       definition: {

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -12,7 +12,7 @@
       :tile-height="config.tileHeight"
       :tiles="gridTiles"
     >
-      <template #tile="{ tile, style }">
+      <template #tile="{ tile }">
         <div
           v-if="tile.meta.chart.type === ChartTypes.Slottable"
           class="tile-container"
@@ -24,7 +24,7 @@
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"
-          :height="parseInt(style.height)"
+          :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
         />
       </template>
     </GridLayout>
@@ -39,7 +39,8 @@ import { computed, inject } from 'vue'
 import composables from '../composables'
 import GridLayout from './layout/GridLayout.vue'
 import type { AnalyticsBridge } from '@kong-ui-public/analytics-utilities'
-import { INJECT_QUERY_PROVIDER } from '../constants'
+import { DEFAULT_TILE_HEIGHT, INJECT_QUERY_PROVIDER } from '../constants'
+import { KUI_SPACE_70 } from '@kong/design-tokens'
 
 const props = defineProps<{
   context: DashboardRendererContext,

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
@@ -25,9 +25,6 @@
 import { computed, type PropType, ref, onMounted, onUnmounted } from 'vue'
 import type { GridSize, Cell, GridTile } from 'src/types'
 import { DEFAULT_TILE_HEIGHT } from '../../constants'
-import { KUI_SPACE_70 } from '@kong/design-tokens'
-
-const GAP_SIZE = parseInt(KUI_SPACE_70)
 
 const props = defineProps({
   gridSize: {
@@ -66,74 +63,31 @@ onUnmounted(() => {
   }
 })
 
-const tileWidth = computed(() => {
-  return (containerWidth.value / props.gridSize.cols) - GAP_SIZE
-})
-
-const tilesPerRow = computed(() => {
-  const count = new Array(props.gridSize.rows).fill(0) // Initialize an array to hold the count of tiles per row
-
-  props.tiles.forEach(tile => {
-    const rowIndex = tile.layout.position.row // Assuming rows are zero-indexed
-    count[rowIndex]++
-  })
-
-  return count
-})
-
 const gridCells = computed<Cell<T>[]>(() => {
-  const rowTileCounts: number[] = []
   return props.tiles.map((tile, i) => {
-    const row = tile.layout.position.row
-
-    // If this row hasn't been encountered yet, initialize its count
-    if (!rowTileCounts[row]) {
-      rowTileCounts[row] = 0
-    }
-
-    // Increment the tile count for this row to determine the tile's ordinal position
-    rowTileCounts[row]++
-
-    // This is the tile's nth position in its row
-    const nthPosition = rowTileCounts[row]
-    // Position elements based on their grid position and dimensions.
-    let translateX = tile.layout.position.col * (tileWidth.value + GAP_SIZE)
-    if (tile.layout.position.col > 0) {
-      translateX += (GAP_SIZE / tilesPerRow.value[tile.layout.position.row]) * (nthPosition - 1)
-    }
-    const translateY = tile.layout.position.row * (props.tileHeight + GAP_SIZE)
-    // Size tiles based on their dimensions and cell span.
-    const width = tile.layout.size.cols * tileWidth.value + (GAP_SIZE * (tile.layout.size.cols - 1)) + (GAP_SIZE / tilesPerRow.value[tile.layout.position.row]) - 1
-    const height = tile.layout.size.rows * props.tileHeight + (GAP_SIZE * (tile.layout.size.rows - 1))
-
     return {
       key: `tile-${i}`,
       tile,
       style: {
-        transform: `translate(${translateX}px, ${translateY}px)`,
-        width: `${width}px`,
-        height: `${height}px`,
+        'grid-column-start': tile.layout.position.col + 1,
+        'grid-column-end': tile.layout.position.col + 1 + tile.layout.size.cols,
+        'grid-row-start': tile.layout.position.row + 1,
+        'grid-row-end': tile.layout.position.row + 1 + tile.layout.size.rows,
       },
     }
   })
 })
 
-const gridHeight = computed(() => {
-  // get the tile with the highest row and add its height
-  const highestRow = Math.max(...props.tiles.map(tile => tile.layout.position.row + tile.layout.size.rows))
-  return highestRow * props.tileHeight + (GAP_SIZE * props.gridSize.rows)
-})
-
 </script>
 
 <style lang="scss" scoped>
 .kong-ui-public-grid-layout {
-  height: v-bind('`${gridHeight}px`');
+  display: grid;
+  gap: $kui-space-70;
+  grid-template-columns: repeat(v-bind('gridSize.cols'), 1fr);
+  grid-template-rows: repeat(v-bind('gridSize.rows'), v-bind('`${tileHeight}px`'));
   width: 100%;
 }
-.grid-cell {
-  position: absolute;
-}
 
 @media (max-width: $kui-breakpoint-phablet) {
   .kong-ui-public-grid-layout {

diff --git a/packages/analytics/dashboard-renderer/src/types/grid-layout-types.ts b/packages/analytics/dashboard-renderer/src/types/grid-layout-types.ts
@@ -24,8 +24,9 @@ export interface Cell<T> {
   key: string
   tile: GridTile<T>
   style: {
-    width: string,
-    height: string,
-    transform: string,
+    'grid-column-start': number
+    'grid-column-end': number
+    'grid-row-start': number
+    'grid-row-end': number
   }
 }