@orbcharts/core 3.0.0-alpha.42 → 3.0.0-alpha.44

package/src/types/DataFormatter.ts

@@ -1,6 +1,7 @@
 import type { ChartType } from './Chart'
 import type { ChartParams } from './ChartParams'
 import type { DataTypeMap, DatumTypeMap } from './Data'
+import type { ComputedDataTypeMap, ComputedDatumTypeMap } from './ComputedData'
 import type { DataFormatterSeries, DataFormatterSeriesPartial } from './DataFormatterSeries'
 import type { DataFormatterGrid, DataFormatterGridPartial } from './DataFormatterGrid'
 import type { DataFormatterMultiGrid, DataFormatterMultiGridPartial } from './DataFormatterMultiGrid'
@@ -8,28 +9,14 @@ import type { DataFormatterMultiValue, DataFormatterMultiValuePartial } from './
 import type { DataFormatterTree, DataFormatterTreePartial } from './DataFormatterTree'
 import type { DataFormatterRelationship, DataFormatterRelationshipPartial } from './DataFormatterRelationship'
 import type { AxisPosition } from './Axis'
-import type { Layout } from './Layout'
 
-// export type DataFormatter = DataFormatterSeries
-//   | DataFormatterGrid
-//   | DataFormatterMultiGrid
-//   | DataFormatterMultiValue
-//   | DataFormatterTree
-//   | DataFormatterRelationship
-
-// export type DataFormatterPartial = DataFormatterSeriesPartial
-//   | DataFormatterGridPartial
-//   | DataFormatterMultiGridPartial
-//   | DataFormatterMultiValuePartial
-//   | DataFormatterTreePartial
-//   | DataFormatterRelationshipPartial
 
 // dataFormatter計算當中會使用的資料
 export interface DataFormatterContext<T extends ChartType> {
   data: DataTypeMap<T>
   dataFormatter: DataFormatterTypeMap<T>
   chartParams: ChartParams
-  layout: Layout
+  // layout: Layout
 }
 
 
@@ -58,21 +45,6 @@ export interface DataFormatterBase<T extends ChartType> {
 
 export type DataFormatterBasePartial<T extends ChartType> = Partial<DataFormatterBase<T>>
 
-// 有value
-// export interface DataFormatterValue {
-//   valueFormat: ValueFormat
-// }
-
-// 有axis
-// export interface DataFormatterAxis {
-//   // domainMinValue?: number
-//   // domainMaxValue?: number
-//   // domainMinRange?: number
-//   // domainMaxRange?: number
-//   valueDomain: [number | 'auto', number | 'auto']
-//   valueRange: [number, number] // 0-1
-// }
-
 export interface DataFormatterValueAxis {
   position: AxisPosition
   scaleDomain: [number | 'auto', number | 'auto']
@@ -90,6 +62,13 @@ export interface DataFormatterGroupAxis {
 
 // export type ValueFormat = string | ((text: d3.NumberValue) => string)
 
-export type VisibleFilter<T extends ChartType> = (datum: DatumTypeMap<T>, rowIndex: number, columnIndex: number, context: DataFormatterContext<T>) => boolean | null
+export type VisibleFilter<T extends ChartType> = (datum: ComputedDatumTypeMap<T>, context: DataFormatterContext<T>) => boolean | null
+
+// export type TooltipContentFormat<T extends ChartType> = (datum: DatumTypeMap<T>, rowIndex: number, columnIndex: number, context: DataFormatterContext<T>) => string | null
+
+export interface DataFormatterContainer {
+  gap: number
+  rowAmount: number
+  columnAmount: number
+}
 
-export type TooltipContentFormat<T extends ChartType> = (datum: DatumTypeMap<T>, rowIndex: number, columnIndex: number, context: DataFormatterContext<T>) => string | null

package/src/types/DataFormatterGrid.ts

@@ -1,37 +1,49 @@
-import type { DataGridDatum, DataGridValue } from './DataGrid'
-import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter'
-// import type { AxisPosition } from './Axis'
+import type { 
+  DataFormatterBase, 
+  DataFormatterBasePartial, 
+  DataFormatterValueAxis, 
+  DataFormatterGroupAxis, 
+  VisibleFilter,
+  DataFormatterContainer
+} from './DataFormatter'
+
 
 export type SeriesDirection = 'row' | 'column' // default: 'row'
 
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
+  visibleFilter: VisibleFilter<'grid'>
   grid: DataFormatterGridGrid
-  container: DataFormatterGridContainer
-  // visibleGroupRange: [number, number] | null
-  // colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+  container: DataFormatterContainer
 }
 
 export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
+  visibleFilter?: VisibleFilter<'grid'>
   grid?: DataFormatterGridGridPartial
-  container?: Partial<DataFormatterGridContainer>
+  container?: Partial<DataFormatterContainer>
 }
 
 export interface DataFormatterGridGrid {
-  visibleFilter: VisibleFilter<'grid'>
-  gridData: DataFormatterGridGridData
+  // gridData: DataFormatterGridGridData
+  // slotIndex: number | null
+  // seriesSlotIndexes: number[] | null
+  seriesDirection: SeriesDirection
+  rowLabels: string[]
+  columnLabels: string[]
   valueAxis: DataFormatterValueAxis
   groupAxis: DataFormatterGroupAxis
-  slotIndex: number | null
-  seriesSlotIndexes: number[] | null
+  separateSeries: boolean
 }
 
 export interface DataFormatterGridGridPartial {
-  visibleFilter?: VisibleFilter<'grid'>
-  gridData?: Partial<DataFormatterGridGridData>
+  // gridData?: Partial<DataFormatterGridGridData>
+  // slotIndex?: number | null
+  // seriesSlotIndexes?: number[] | null
+  seriesDirection?: SeriesDirection
+  rowLabels?: string[]
+  columnLabels?: string[]
   valueAxis?: Partial<DataFormatterValueAxis>
   groupAxis?: Partial<DataFormatterGroupAxis>
-  slotIndex?: number | null
-  seriesSlotIndexes?: number[] | null
+  separateSeries?: boolean
 }
 
 export interface DataFormatterGridContainer {
@@ -41,11 +53,11 @@ export interface DataFormatterGridContainer {
 }
 
 // grid欄位
-export interface DataFormatterGridGridData {
-  seriesDirection: SeriesDirection
-  rowLabels: string[]
-  columnLabels: string[]
-}
+// export interface DataFormatterGridGridData {
+//   seriesDirection: SeriesDirection
+//   rowLabels: string[]
+//   columnLabels: string[]
+// }
 
 // const test: DataFormatterGridPartial = {
 //   type: 'grid',

package/src/types/DataFormatterMultiGrid.ts

@@ -1,5 +1,5 @@
-import type { VisibleFilter } from './DataFormatter'
-import type { DataFormatterGridGrid, DataFormatterGridGridPartial, DataFormatterGridContainer } from './DataFormatterGrid'
+import type { VisibleFilter, DataFormatterContainer } from './DataFormatter'
+import type { DataFormatterGridGrid, DataFormatterGridGridPartial } from './DataFormatterGrid'
 import type {
   DataFormatterBase,
   DataFormatterBasePartial,
@@ -9,15 +9,17 @@ import type {
 import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-  // visibleFilter: VisibleFilter<'multiGrid'>
+  visibleFilter: VisibleFilter<'multiGrid'>
   gridList: Array<DataFormatterGridGrid>
   container: DataFormatterMultiGridContainer
+  separateGrid: boolean
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
   // visibleFilter?: VisibleFilter<'multiGrid'>
   gridList?: Array<DataFormatterGridGridPartial>
   container?: Partial<DataFormatterMultiGridContainer>
+  separateGrid?: boolean
 }
 
 export interface DataFormatterMultiGridGrid extends DataFormatterGridGrid {
@@ -29,7 +31,7 @@ export interface DataFormatterMultiGridGridPartial extends DataFormatterGridGrid
 }
 
 // container
-export interface DataFormatterMultiGridContainer extends DataFormatterGridContainer {
+export interface DataFormatterMultiGridContainer extends DataFormatterContainer {
 
 }
 

package/src/types/DataFormatterMultiValue.ts

@@ -4,12 +4,15 @@ import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, Vi
 export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> {
   visibleFilter: VisibleFilter<'multiValue'>
   // labelFormat: (datum: unknown) => string
+  categoryLabels: string[]
   multiValue: Array<DataFormatterMultiValueMultiValue>
   xAxis: DataFormatterValueAxis
   yAxis: DataFormatterValueAxis
 }
 
 export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial<'multiValue'> {
+  visibleFilter?: VisibleFilter<'multiValue'>
+  categoryLabels?: string[]
   multiValue?: Array<Partial<DataFormatterMultiValueMultiValue>>
   xAxis?: Partial<DataFormatterValueAxis>
   yAxis?: Partial<DataFormatterValueAxis>

package/src/types/DataFormatterRelationship.ts

@@ -3,11 +3,14 @@ import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './Da
 
 export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> {
   visibleFilter: VisibleFilter<'relationship'>
+  categoryLabels: string[]
   // node: DataFormatterRelationshipNode
   // edge: DataFormatterRelationshipEdge
 }
 
 export interface DataFormatterRelationshipPartial extends DataFormatterBasePartial<'relationship'> {
+  visibleFilter?: VisibleFilter<'relationship'>
+  categoryLabels?: string[]
   // node: Partial<DataFormatterRelationshipNode>
   // edge: Partial<DataFormatterRelationshipEdge>
 }

package/src/types/DataFormatterSeries.ts

@@ -1,30 +1,20 @@
-import { DataSeriesDatum, DataSeriesValue, DataSeries } from './DataSeries'
-import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter'
-// import { ComputedDatumSeries } from './ComputedDataSeries'
+import type { ComputedDatumSeries } from './ComputedDataSeries'
+import type { DataFormatterBase, DataFormatterBasePartial, VisibleFilter, DataFormatterContainer } from './DataFormatter'
 
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
   visibleFilter: VisibleFilter<'series'>
-  // series: DataFormatterSeriesSeries
-  // unitLabel: string
+  sort: ((a: ComputedDatumSeries, b: ComputedDatumSeries) => number) | null
   seriesLabels: string[]
-  // labelFormat: (datum: DataSeriesDatum) => string
-  // mapSeries: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
-  // colorsPredicate: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
-  sort: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null
-  // colors: Colors
+  container: DataFormatterContainer
+  separateSeries: boolean
+  sumSeries: boolean
 }
 
 export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
-  // series: Partial<DataFormatterSeriesSeries>
-  // unitLabel?: string
+  visibleFilter?: VisibleFilter<'series'>
+  sort?: ((a: ComputedDatumSeries, b: ComputedDatumSeries) => number) | null
   seriesLabels?: string[]
-  // colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
-  sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null
+  container?: Partial<DataFormatterContainer>
+  separateSeries?: boolean
+  sumSeries?: boolean
 }
-
-// export interface DataFormatterSeriesSeries {
-//   unitLabel: string
-//   seriesLabels: string[]
-//   // labelFormat: (datum: DataSeriesDatum) => string
-//   sort: ((computedDatum: ComputedDatumSeries) => number) | null
-// }

package/src/utils/d3Utils.ts

@@ -1,13 +1,13 @@
 import * as d3 from 'd3'
-import { DATA_FORMATTER_VALUE_AXIS } from '../defaults'
+import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
 
 // scaleLinear - 連續資料對應到比較尺座標上
 export const createAxisLinearScale = ({
   maxValue = 1,
   minValue = 0,
   axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS.scaleRange,
+  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
+  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
 }: {
   maxValue: number
   minValue: number
@@ -16,10 +16,10 @@ export const createAxisLinearScale = ({
   scaleRange: [number, number] // 0-1
 }) => {
   // -- 無值補上預設值 --
-  const domainMin: number | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[0]
-  const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[1]
-  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS.scaleRange[0]
-  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS.scaleRange[1]
+  const domainMin: number | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
+  const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
 
   // -- 'auto'提換成實際值 --
   const domainMinValue = domainMin === 'auto' ? minValue : domainMin

package/src/utils/orbchartsUtils.ts

@@ -6,12 +6,15 @@ import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/Data
 import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
 import type { DataMultiGrid } from '../types/DataMultiGrid'
 import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
-import type { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid'
+import type { DataFormatterContainer } from '../types/DataFormatter'
+import type { SeriesDirection, DataFormatterGrid, DataFormatterGridGrid } from '../types/DataFormatterGrid'
 import type { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
 import type { ComputedDatumSeriesValue } from '../types/ComputedData'
 import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
 import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
+import type { SeriesContainerPosition } from '../types/ContextObserverSeries'
+import type { GridContainerPosition } from '../types/ContextObserverGrid'
 import type { Layout } from '../types/Layout'
 // import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
 import { isPlainObject } from './commonUtils'
@@ -39,14 +42,14 @@ export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex:
   return `${chartTypeOrPrefix}_group${groupIndex}`
 }
 
-export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
+export function createGridSeriesLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'grid' }: {
   transposedDataGrid: DataGridDatum[][],
-  dataFormatter: DataFormatterGrid
+  dataFormatterGrid: DataFormatterGridGrid
   chartType?: ChartType
 }) {
-  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
-    ? dataFormatter.grid.gridData.rowLabels
-    : dataFormatter.grid.gridData.columnLabels
+  const labels = dataFormatterGrid.seriesDirection === 'row'
+    ? dataFormatterGrid.rowLabels
+    : dataFormatterGrid.columnLabels
   return transposedDataGrid.map((_, rowIndex) => {
     return labels[rowIndex] != null
       ? labels[rowIndex]
@@ -54,15 +57,15 @@ export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, cha
   })
 }
 
-export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
+export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'multiGrid', gridIndex = 0 }: {
   transposedDataGrid: DataGridDatum[][],
-  dataFormatter: DataFormatterGrid
+  dataFormatterGrid: DataFormatterGridGrid
   chartType?: ChartType
   gridIndex?: number
 }) {
-  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
-    ? dataFormatter.grid.gridData.rowLabels
-    : dataFormatter.grid.gridData.columnLabels
+  const labels = dataFormatterGrid.seriesDirection === 'row'
+    ? dataFormatterGrid.rowLabels
+    : dataFormatterGrid.columnLabels
   return transposedDataGrid.map((_, rowIndex) => {
     return labels[rowIndex] != null
       ? labels[rowIndex]
@@ -70,17 +73,17 @@ export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatter
   })
 }
 
-export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
+export function createGridGroupLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'grid' }: {
   transposedDataGrid: DataGridDatum[][],
-  dataFormatter: DataFormatterGrid
+  dataFormatterGrid: DataFormatterGridGrid
   chartType?: ChartType
 }) {
   if (transposedDataGrid[0] == null) {
     return []
   }
-  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
-    ? dataFormatter.grid.gridData.columnLabels
-    : dataFormatter.grid.gridData.rowLabels
+  const labels = dataFormatterGrid.seriesDirection === 'row'
+    ? dataFormatterGrid.columnLabels
+    : dataFormatterGrid.rowLabels
   return transposedDataGrid[0].map((_, columnLabels) => {
     return labels[columnLabels] != null
       ? labels[columnLabels]
@@ -88,18 +91,18 @@ export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, char
   })
 }
 
-export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
+export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'multiGrid', gridIndex = 0 }: {
   transposedDataGrid: DataGridDatum[][],
-  dataFormatter: DataFormatterGrid
+  dataFormatterGrid: DataFormatterGridGrid
   chartType?: ChartType
   gridIndex?: number
 }) {
   if (transposedDataGrid[0] == null) {
     return []
   }
-  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
-    ? dataFormatter.grid.gridData.columnLabels
-    : dataFormatter.grid.gridData.rowLabels
+  const labels = dataFormatterGrid.seriesDirection === 'row'
+    ? dataFormatterGrid.columnLabels
+    : dataFormatterGrid.rowLabels
   return transposedDataGrid[0].map((_, columnLabels) => {
     return labels[columnLabels] != null
       ? labels[columnLabels]
@@ -214,19 +217,112 @@ export function seriesColorPredicate (seriesIndex: number, chartParams: ChartPar
     ]
 }
 
-export function calcGridContainerPosition (layout: Layout, container: DataFormatterGridContainer, rowIndex: number, columnIndex: number) {
-  const { gap, rowAmount, columnAmount } = container
-  const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-  const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-  const x = columnIndex * width + (columnIndex * gap)
-  const y = rowIndex * height + (rowIndex * gap)
-  const translate: [number, number] = [x, y]
-  const scale: [number, number] = [width / layout.width, height / layout.height]
+// export function calcSeriesContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
+//   const { gap, rowAmount, columnAmount } = container
+//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
+//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
+//   const x = columnIndex * width + (columnIndex * gap)
+//   const y = rowIndex * height + (rowIndex * gap)
+//   // const translate: [number, number] = [x, y]
+  
+//   return {
+//     // translate,
+//     startX: x,
+//     startY: y,
+//     centerX: x + width / 2,
+//     centerY: y + height / 2,
+//     width,
+//     height
+//   }
+// }
 
-  return {
-    translate,
-    scale
+// 計算預設欄列數量
+// 規則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 calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): SeriesContainerPosition[] {
+  const { gap } = container
+  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 - (gap * (columnAmount - 1))) / columnAmount
+    const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
+    const x = columnIndex * width + (columnIndex * gap)
+    const y = rowIndex * height + (rowIndex * gap)
+    // 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 calcGridContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
+//   const { gap, rowAmount, columnAmount } = container
+//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
+//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
+//   const x = columnIndex * width + (columnIndex * gap)
+//   const y = rowIndex * height + (rowIndex * gap)
+//   const translate: [number, number] = [x, y]
+//   const scale: [number, number] = [width / layout.width, height / layout.height]
+
+//   return {
+//     translate,
+//     scale
+//   }
+// }
+
+export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): GridContainerPosition[] {
+  const { gap } = container
+  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 - (gap * (columnAmount - 1))) / columnAmount
+    const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
+    const x = columnIndex * width + (columnIndex * gap)
+    const y = rowIndex * height + (rowIndex * gap)
+    const translate: [number, number] = [x, y]
+    const scale: [number, number] = [width / layout.width, height / layout.height]
+
+    return {
+      slotIndex: index,
+      rowIndex,
+      columnIndex,
+      translate,
+      scale
+    }
+  })
 }
 
 // // multiGrid datum color