@orbcharts/plugin-basic 4.0.0-pre-alpha.0

package/src/utils/observables.ts

@@ -0,0 +1,357 @@
+import * as d3 from 'd3'
+// import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs'
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  fromEvent,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable,
+  debounceTime
+} from 'rxjs'
+import type {
+  ModelType,
+  Theme,
+  ModelDatum
+} from '@orbcharts/core'
+import type {
+  ComputedDatum
+} from '../types/ComputedData'
+import type {
+  EventData
+} from '@orbcharts/core'
+import type {
+  Layout,
+  Padding,
+  GraphicStyles,
+  ContainerPositionScaled,
+  HighlightTarget,
+  Container
+} from '../types/PluginParams'
+
+// interface DatumUnknown {
+//   value: number | null
+//   id: string
+//   // label: string
+//   seriesLabel?: string // 要符合每一種computedData所以不一定會有seriesLabel
+//   groupLabel?: string // 要符合每一種computedData所以不一定會有groupLabel
+// }
+
+export function d3EventObservable(selection: d3.Selection<any, any, any, any>, event: any) {
+  // Start with an observable that will never emit
+  let obs: Observable<MouseEvent> = new Observable(() => {});
+  selection.each(function () {
+      // Create observables from each of the elements
+      const events: Observable<MouseEvent> = fromEvent(this, event);
+      // Merge the observables into one
+      obs = merge(obs, events);
+  });
+  return obs;
+}
+
+export function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOnly> {
+  return new Observable(subscriber => {
+    const ro = new ResizeObserver(entries => {
+      const entry = entries[0]
+      if (entry && entry.contentRect) {
+        subscriber.next(entry.contentRect)
+      }
+    })
+
+    ro.observe(elem)
+    return function unsubscribe() {
+      ro.unobserve(elem)
+    }
+  })
+}
+
+export function layoutObservable({size$, padding$}: {size$: Observable<{ width: number, height: number }>, padding$: Observable<Padding>}): Observable<Layout> {
+  return combineLatest({
+    size: size$,
+    padding: padding$
+  }).pipe(
+    debounceTime(0),
+    map(data => {
+      const width = data.size.width - data.padding.left - data.padding.right
+      const height = data.size.height - data.padding.top - data.padding.bottom
+      const layout: Layout = {
+        rootWidth: data.size.width,
+        rootHeight: data.size.height,
+        width: width > 0 ? width : 0,
+        height: height > 0 ? height : 0,
+        left: data.padding.left,
+        right: data.padding.right,
+        top: data.padding.top,
+        bottom: data.padding.bottom
+      }
+      return layout
+    }),
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    shareReplay(1)
+  )
+}
+
+interface HighlightTargetValue {
+  id: string | null
+  label: string | null
+  series: string | null
+  // group: string | null
+  category: string | null
+  // highlightDefault: string | null
+}
+
+// 通用 highlight Observable
+export const highlightObservable = <T extends ModelType, D>({ datumList$, styles$, event$ }: {
+  datumList$: Observable<D[]>
+  styles$: Observable<GraphicStyles>
+  event$: Observable<EventData<T>>
+}): Observable<D[]> => {
+  const destroy$ = new Subject()
+
+  // 預設的highlight
+  const highlightDefault$: Observable<HighlightTargetValue> = styles$.pipe(
+    takeUntil(destroy$),
+    map(d => d.highlightDefault || null),
+    distinctUntilChanged(),
+    map(highlightDefault => {
+      return {
+        id: highlightDefault,
+        label: highlightDefault,
+        series: highlightDefault,
+        category: highlightDefault,
+        // highlightDefault
+      } as HighlightTargetValue
+    }),
+    shareReplay(1)
+  )
+
+  const highlightTarget$: Observable<HighlightTarget> = styles$.pipe(
+    takeUntil(destroy$),
+    map(d => d.highlightTarget),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  // 事件觸發的highlight
+  const highlightMouseover$: Observable<HighlightTargetValue> = highlightTarget$.pipe(
+    switchMap(highlightTarget => {
+      return event$.pipe(
+        takeUntil(destroy$),
+        // filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
+        filter(d => d.eventName === 'mouseover'),
+        // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+        map(d => {
+          
+          // const d = _d as any
+          // console.log('mouseover event', d)
+          return d.target
+            ? {
+              id: d.target.id,
+              label: null, // label有可能重覆所以不做判斷
+              series: highlightTarget === 'series' ? d.target.series : null,
+              category: highlightTarget === 'category' ? (d.target as ModelDatum<'grid' | 'multivariate' | 'graph' | 'tree'>).category : null,
+              // highlightDefault: null
+            } as HighlightTargetValue
+            : {
+              id: null,
+              label: null,
+              series: null,
+              // group: null,
+              category: null,
+              // highlightDefault: null
+            } as HighlightTargetValue
+        })
+      )
+    })
+  )
+
+  const highlightMouseout$ = event$.pipe(
+    takeUntil(destroy$),
+    filter(d => d.eventName === 'mouseout'),
+    // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+    // map(d => {
+    //   return { id: '', label: '' }
+    // })
+    switchMap(d => highlightDefault$)
+  )
+
+  // function getDatumIds (datumList: ComputedDatum<T>[], id: string | null) {
+  //   const datum = datumList.find(d => (d as ComputedDatumBase).id === id)
+  //   return datum ? [datum] : []
+  // }
+  function getDatumIds (datumList: ComputedDatum<T>[], id: string | null, label: string | null) {
+    return id == null && label == null
+      ? []
+      : datumList.filter(d => d.id === id || d.name === label)
+  }
+
+  function getSeriesIds (datumList: ComputedDatum<T>[], seriesLabel: string | null) {
+    return seriesLabel == null
+      ? []
+      : datumList.filter(d => (d as ComputedDatum<"series">).series === seriesLabel)
+  }
+
+  // function getGroupIds (datumList: ComputedDatum<T>[], groupLabel: string | null) {
+  //   return groupLabel == null
+  //     ? []
+  //     : datumList.filter(d => (d as ComputedDatum<"grid">).category === groupLabel)
+  // }
+
+  function getCategoryIds (datumList: ComputedDatum<T>[], category: string | null) {
+    return category == null
+      ? []
+      : datumList.filter(d => (d as ComputedDatum<"multivariate" | "graph" | "tree">).category === category)
+  }
+
+  return new Observable<D[]>(subscriber => {
+    combineLatest({
+      target: merge(highlightMouseover$, highlightMouseout$, highlightDefault$),
+      datumList: datumList$,
+      styles: styles$,
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0),
+    ).subscribe(data => {
+      let datumList: ComputedDatum<T>[] = []
+      if (data.styles.highlightTarget === 'datum') {
+        datumList = getDatumIds(data.datumList as ComputedDatum<T>[], data.target.id, data.target.label)
+      } else if (data.styles.highlightTarget === 'series') {
+        datumList = getSeriesIds(data.datumList as ComputedDatum<T>[], data.target.series)
+      // } else if (data.styles.highlightTarget === 'group') {
+      //   datumList = getGroupIds(data.datumList as ComputedDatum<T>[], data.target.group)
+      } else if (data.styles.highlightTarget === 'category') {
+        datumList = getCategoryIds(data.datumList as ComputedDatum<T>[], data.target.category)
+      }
+      subscriber.next(datumList as D[])
+    })
+
+    return function unsubscribe () {
+      destroy$.next(undefined)
+    }
+  })
+}
+
+export const seriesDataMapObservable = <DatumType extends ComputedDatum<'series' | 'grid'>>({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+  return datumList$.pipe(
+    map(data => {
+      const SeriesDataMap: Map<string, DatumType[]> = new Map()
+      data.forEach(d => {
+        const seriesData = SeriesDataMap.get(d.series) ?? []
+        seriesData.push(d)
+        SeriesDataMap.set(d.series, seriesData)
+      })
+      return SeriesDataMap
+    })
+  )
+}
+
+// export const groupDataMapObservable = <DatumType extends ComputedDatum<'grid'>> ({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+//   return datumList$.pipe(
+//     map(data => {
+//       const GroupDataMap: Map<string, DatumType[]> = new Map()
+//       data.forEach(d => {
+//         const groupData = GroupDataMap.get(d.category) ?? []
+//         groupData.push(d)
+//         GroupDataMap.set(d.category, groupData)
+//       })
+//       return GroupDataMap
+//     })
+//   )
+// }
+
+export const categoryDataMapObservable = <DatumType extends ComputedDatum<'multivariate' | 'graph' | 'tree'>> ({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+  return datumList$.pipe(
+    map(data => {
+      const GroupDataMap: Map<string, DatumType[]> = new Map()
+      data
+        .filter(d => d.category != null)
+        .forEach(d => {
+          const groupData = GroupDataMap.get(d.category) ?? []
+          groupData.push(d)
+          GroupDataMap.set(d.category, groupData)
+        })
+      return GroupDataMap
+    })
+  )
+}
+
+export const fontSizePxObservable = (chartParams$: Observable<Theme>) => {
+  return chartParams$.pipe(
+    map(d => d.fontSize),
+    distinctUntilChanged(),
+    map(data => {
+      let value = NaN
+      if (typeof data === 'string') {
+        if (data.includes('rem')) {
+          const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize)
+          const num = parseFloat(data)
+          value = num * rootFontSizePx
+        } else if (data.includes('px')) {
+          value = parseFloat(data)
+        }
+      } else if (typeof data === 'number') {
+        return data
+      }
+      return value ? value : 14 // default
+    })
+  )
+}
+
+export const containerSizeObservable = ({ layout$, containerPosition$, container$ }: {
+  layout$: Observable<Layout>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  container$: Observable<Container>
+}) => {
+  const rowAmount$ = containerPosition$.pipe(
+    map(containerPosition => {
+      const maxRowIndex = containerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged(),
+  )
+
+  const columnAmount$ = containerPosition$.pipe(
+    map(containerPosition => {
+      const maxColumnIndex = containerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged()
+  )
+
+  return combineLatest({
+    layout: layout$,
+    rowAmount: rowAmount$,
+    columnAmount: columnAmount$,
+    container: container$
+  }).pipe(
+    debounceTime(0),
+    map(data => {
+      // const width = (data.layout.rootWidth / data.columnAmount) - (data.layout.left + data.layout.right)
+      // const height = (data.layout.rootHeight / data.rowAmount) - (data.layout.top + data.layout.bottom)
+      const columnGap = data.container.columnGap === 'auto'
+        ? data.layout.left + data.layout.right
+        : data.container.columnGap
+      const rowGap = data.container.rowGap === 'auto'
+        ? data.layout.top + data.layout.bottom
+        : data.container.rowGap
+      const width = (data.layout.rootWidth - data.layout.left - data.layout.right - (columnGap * (data.columnAmount - 1))) / data.columnAmount
+      const height = (data.layout.rootHeight - data.layout.top - data.layout.bottom - (rowGap * (data.rowAmount - 1))) / data.rowAmount
+      
+      return {
+        width,
+        height
+      }
+    }),
+    distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height),
+    // shareReplay(1)
+  )
+}

package/src/utils/orbchartsUtils.ts

@@ -0,0 +1,335 @@
+import type {
+  // AxisPosition,
+  ColorType,
+  Theme,
+  ModelDatum,
+  ModelDatumBase,
+  ModelDatumSeries,
+  ModelType,
+  
+  // ChartParams,
+  // ComputedDatumBase,
+  // ComputedDatumBaseValue,
+  // ComputedDatumBaseSeries,
+  // ComputedDatumBaseCategory
+} from '@orbcharts/core'
+import { Layout, Container, ContainerPosition, ContainerPositionScaled } from '../types/PluginParams'
+import { getMinMax } from './commonUtils'
+import { isLightColor } from './d3Utils'
+import { createLayerClassName } from '@orbcharts/core'
+import type { AxisPosition } from '../types/PluginParams'
+import type { ComputedDatum } from '../types/ComputedData'
+
+// 取得最小及最大值 - datum格式陣列資料
+export function getMinMaxValue<T extends ModelType> (data: ComputedDatum<T>[]): [number, number] {
+  const arr = data
+    .filter(d => d.value != null && d.visible != false)
+    .map(d => d.value as number)
+  return getMinMax(arr)
+}
+
+// // 取得最小及最大值 - Series Data
+// export function getMinMaxSeries (data: ModelDatum<'series'>[][]): [number, number] {
+//   const flatData: ModelDatum<'series'>[] = data[0] && Array.isArray((data as (DataSeriesValue | DataSeriesDatum)[][])[0])
+//     ? data.flat()
+//     : data as (DataSeriesValue | DataSeriesDatum)[]
+//   const arr = flatData
+//     .filter(d => (d == null || (isPlainObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
+//     .map(d => typeof d === 'number' ? d : d.value )
+//   return getMinMax(arr)
+// }
+
+// // 取得最小及最大值 - Grid Data
+// export function getMinMaxGrid (data: DataGrid): [number, number] {
+//   const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
+//   const arr = flatData
+//     .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+//     .map(d => typeof d === 'number' ? d : d.value )
+//   return getMinMax(arr)
+// }
+
+// // 取得最小及最大值 - MultiGrid Data
+// export function getMinMaxMultiGrid (data: DataMultiGrid): [number, number] {
+//   const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
+//   const arr = flatData
+//     .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+//     .map(d => typeof d === 'number' ? d : d.value )
+//   return getMinMax(arr)
+// }
+
+// // 取得最小及最大值 - MultiValue Data
+// export function getMinMaxMultiValue (data: DataMultiValue, valueIndex: number): [number, number] {
+//   const arr: number[] = data
+//     .map(d => {
+//       if (Array.isArray(d)) {
+//         return d[valueIndex] ?? null
+//       } else if (isPlainObject(d)) {
+//         return (d as DataMultiValueDatum).value[valueIndex] ?? null
+//       } else {
+//         return null
+//       }
+//     })
+//     .filter(d => d != null)
+//   return getMinMax(arr)
+// }
+
+// export function getMinMaxMultiValueXY ({ data, minX, maxX, minY, maxY }: {
+//   data: ComputedXYDatumMultiValue[][]
+//   minX: number
+//   maxX: number
+//   minY: number
+//   maxY: number
+// }) {
+//   let filteredData: ComputedXYDatumMultiValue[][] = []
+//   let minXDatum: ComputedXYDatumMultiValue | null = null
+//   let maxXDatum: ComputedXYDatumMultiValue | null = null
+//   let minYDatum: ComputedXYDatumMultiValue | null = null
+//   let maxYDatum: ComputedXYDatumMultiValue | null = null
+  
+//   for (let categoryData of data) {
+//     for (let datum of categoryData) {
+//       if (datum.axisX >= minX && datum.axisX <= maxX && datum.axisY >= minY && datum.axisY <= maxY) {
+//         filteredData.push(categoryData)
+//         if (minXDatum == null || datum.axisX < minXDatum.axisX) {
+//           minXDatum = datum
+//         }
+//         if (maxXDatum == null || datum.axisX > maxXDatum.axisX) {
+//           maxXDatum = datum
+//         }
+//         if (minYDatum == null || datum.axisY < minYDatum.axisY) {
+//           minYDatum = datum
+//         }
+//         if (maxYDatum == null || datum.axisY > maxYDatum.axisY) {
+//           maxYDatum = datum
+//         }
+//       }
+//     }
+//   }
+
+//   return {
+//     minXDatum,
+//     maxXDatum,
+//     minYDatum,
+//     maxYDatum,
+//     filteredData
+//   }
+// }
+
+export function getColorScheme (themeColorScheme: 'light' | 'dark' | 'auto') {
+  if (themeColorScheme === 'auto') {
+    const MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+    return MediaQueryList.matches ? 'dark' : 'light'
+  } else {
+    return themeColorScheme
+  }
+}
+
+// 取得colorType顏色
+export function getColor (colorType: ColorType, theme: Theme) {
+  const colorScheme = getColorScheme(theme.colorScheme)
+  const colors = theme.colors[colorScheme]
+  if (colorType === 'data') {
+    return colors.data[0] // default label color
+  } else if (colorType === 'dataContrast') {
+    return isLightColor(colors.data[0]) // default label color
+      ? colors.dataContrast[1]
+      : colors.dataContrast[0]
+  }
+  return colorType == 'none'
+    ? 'none'
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary // 如果比對不到
+}
+
+// export function getSeriesValueColor () {
+
+// }
+
+// export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBaseCategory, colorType: ColorType, fullChartParams: ChartParams }) {
+
+// }
+
+// // 取得Series顏色
+// export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
+//   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+//     ? seriesIndex
+//     : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
+//   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
+// }
+
+// 取得Datum顏色
+export function getDatumColor ({ datum, colorType, theme }: { datum: ModelDatumBase, colorType: ColorType, theme: Theme }) {
+  const colors = theme.colors[getColorScheme(theme.colorScheme)]
+
+  if (colorType === 'data') {
+    const datumColor: string | undefined = (datum as unknown as ModelDatumSeries).color
+    if (datumColor) {
+      return datumColor
+    } else {
+      // default label color
+      return colors.data[0]
+    }
+  } else if (colorType === 'dataContrast') {
+    const datumColor: string | undefined = (datum as unknown as ModelDatumSeries).color
+    if (datumColor) {
+      return isLightColor(datumColor)
+        ? colors.dataContrast[1]
+        : colors.dataContrast[0]
+    } else {
+      // default label color
+      return  isLightColor(colors.data[0])
+        ? colors.dataContrast[1]
+        : colors.dataContrast[0]
+    }
+  }
+  // 對應colorType設定的顏色
+  return colorType == 'none'
+    ? 'none' 
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary
+}
+
+export function seriesColorPredicate (seriesIndex: number, theme: Theme) {
+  const colorScheme = getColorScheme(theme.colorScheme)
+  return seriesIndex < theme.colors[colorScheme].data.length
+    ? theme.colors[colorScheme].data[seriesIndex]
+    : theme.colors[colorScheme].data[
+      seriesIndex % theme.colors[colorScheme].data.length
+    ]
+}
+
+export function createClassName (pluginName: string, layerName: string, elementName: string, modifier?: string) {
+  const modifierText = modifier ? `--${modifier}` : ''
+  return `${createLayerClassName(pluginName, layerName)}__${elementName}${modifierText}`
+}
+
+export function createUniID (pluginName: string, layerName: string, elementName: string) {
+  const textLength = 5
+  // 英文+數字
+  const randomText: string = Math.random().toString(36).substr(2, textLength)
+  
+  return createClassName(pluginName, layerName, elementName, randomText)
+}
+
+
+export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
+  xAxisPosition: AxisPosition
+  yAxisPosition: AxisPosition
+  width: number
+  height: number
+}) {
+  if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
+    return { width, height }
+  } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
+    return {
+      width: height,
+      height: width
+    }
+  }
+}
+
+// export function getTicks (minValue: number, maxValue: number, defaultTicks: number | null) {
+//   let valueLength = maxValue - minValue
+//   if (defaultTicks === null) {
+//     if (valueLength <= 1) {
+//       return 1
+//     } else {
+//       // d3.js自動判斷
+//       return null
+//     }
+//   } else if (valueLength < defaultTicks) {
+//     return Math.ceil(valueLength)
+//   } else {
+//     return defaultTicks
+//   }
+// }
+
+
+
+// 計算預設欄列數量
+// 規則1.rowAmount*columnAmount要大於或等於amount，並且數字要盡可能小
+// 規則2.columnAmount要大於或等於rowAmount，並且數字要盡可能小
+function calcGridDimensions (amount: number): { rowAmount: number; columnAmount: number } {
+  let rowAmount = Math.floor(Math.sqrt(amount))
+  let columnAmount = Math.ceil(amount / rowAmount)
+  while (rowAmount * columnAmount < amount) {
+    columnAmount++
+  }
+  return { rowAmount, columnAmount }
+}
+
+export function calcContainerPosition (layout: Layout, container: Container, amount: number): ContainerPosition[] {
+  // const { gap } = container
+  const columnGap = container.columnGap === 'auto'
+    ? layout.left + layout.right
+    : container.columnGap
+  const rowGap = container.rowGap === 'auto'
+    ? layout.top + layout.bottom
+    : container.rowGap
+  const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
+    // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
+    ? container
+    // 否則計算一個合適的預設值
+    : calcGridDimensions(amount)
+
+  return new Array(amount).fill(null).map((_, index) => {
+    const columnIndex = index % columnAmount
+    const rowIndex = Math.floor(index / columnAmount)
+
+    const width = (layout.width - (columnGap * (columnAmount - 1))) / columnAmount
+    const height = (layout.height - (rowGap * (rowAmount - 1))) / rowAmount
+    const x = columnIndex * width + (columnIndex * columnGap)
+    const y = rowIndex * height + (rowIndex * rowGap)
+    // const translate: [number, number] = [x, y]
+    
+    return {
+      slotIndex: index,
+      rowIndex,
+      columnIndex,
+      // translate,
+      startX: x,
+      startY: y,
+      centerX: x + width / 2,
+      centerY: y + height / 2,
+      width,
+      height
+    }
+  })
+}
+
+export function calcContainerPositionScaled (layout: Layout, container: Container, amount: number): ContainerPositionScaled[] {
+  // const { gap } = container
+  const columnGap = container.columnGap === 'auto'
+    ? layout.left + layout.right
+    : container.columnGap
+  const rowGap = container.rowGap === 'auto'
+    ? layout.top + layout.bottom
+    : container.rowGap
+  const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
+    // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
+    ? container
+    // 否則計算一個合適的預設值
+    : calcGridDimensions(amount)
+  
+  return new Array(amount).fill(null).map((_, index) => {
+    const columnIndex = index % columnAmount
+    const rowIndex = Math.floor(index / columnAmount)
+    
+    const width = (layout.width - (columnGap * (columnAmount - 1))) / columnAmount
+    const height = (layout.height - (rowGap * (rowAmount - 1))) / rowAmount
+    const x = columnIndex * width + (columnIndex * columnGap)
+    const y = rowIndex * height + (rowIndex * rowGap)
+    const translate: [number, number] = [x, y]
+    const scale: [number, number] = [width / layout.width, height / layout.height]
+
+    return {                      
+      slotIndex: index,
+      rowIndex,
+      columnIndex,
+      translate,
+      scale
+    }
+  })
+}