@orbcharts/core 3.0.0-alpha.34 → 3.0.0-alpha.35

package/dist/src/utils/orbchartsUtils.d.ts

@@ -12,13 +12,23 @@ export declare function formatValueToLabel(value: any, valueFormatter: string |
 export declare function createDefaultDatumId(chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number): string;
 export declare function createDefaultSeriesLabel(chartTypeOrPrefix: string, seriesIndex: number): string;
 export declare function createDefaultGroupLabel(chartTypeOrPrefix: string, groupIndex: number): string;
-export declare function createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
+export declare function createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+}): string[];
+export declare function createMultiGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
     transposedDataGrid: DataGridDatum[][];
     dataFormatter: DataFormatterGrid;
     chartType?: ChartType;
     gridIndex?: number;
 }): string[];
-export declare function createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
+export declare function createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType }: {
+    transposedDataGrid: DataGridDatum[][];
+    dataFormatter: DataFormatterGrid;
+    chartType?: ChartType;
+}): string[];
+export declare function createMultiGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex }: {
     transposedDataGrid: DataGridDatum[][];
     dataFormatter: DataFormatterGrid;
     chartType?: ChartType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/base/createBaseChart.ts

@@ -89,10 +89,12 @@ function mergeDataFormatter <T>(dataFormatter: any, defaultDataFormatter: T, cha
 
   if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
     // multiGrid欄位為陣列，需要各別來merge預設值
-    (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
-      return mergeOptionsWithDefault(d, (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
+    (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map((d, i) => {
+      const defaultGrid = (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[i] || (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0]
+      return mergeOptionsWithDefault(d, defaultGrid)
     })
   }
+  console.log(mergedData)
   return mergedData
 }
 

package/src/grid/computeGridData.ts

@@ -4,28 +4,21 @@ import type { DataGrid, DataGridDatum } from '../types/DataGrid'
 import type { DataFormatterContext } from '../types/DataFormatter'
 import type { DataFormatterGrid } from '../types/DataFormatterGrid'
 import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
+import type { Layout } from '../types/Layout'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
 import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
 import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
 
-interface DataGridDatumTemp extends DataGridDatum {
+export interface DataGridDatumTemp extends DataGridDatum {
   // _color: string // 暫放的顏色資料
   _visible: boolean // 暫放的visible
 }
 
-export const computeGridData: ComputedDataFn<'grid'> = (context) => {
-  return computeBaseGridData(context, 'grid', 0)
-}
-
-// 共用的計算grid資料 - 只有multiGrid計算時才會有gridIndex參數
-export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chartType: 'grid' | 'multiGrid', gridIndex = 0) => {
+export function createTransposedDataGrid (context: DataFormatterContext<'grid'>): DataGridDatumTemp[][] {
   const { data = [], dataFormatter, chartParams, layout } = context
   if (!data.length) {
     return []
   }
-
-  let computedDataGrid: ComputedDatumGrid[][]
-
   try {
     // 最多的array length
     const maxArrayLength = data.reduce((prev, current) => {
@@ -88,120 +81,75 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
     // 依seriesDirection轉置資料矩陣
     const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
 
-    // -- groupScale --
-    const { groupScale } = (() => {
-      const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
-        ? layout.width
-        : layout.height
-      const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
-      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-        maxValue: groupEndIndex,
-        minValue: 0,
-        axisWidth: groupAxisWidth,
-        scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
-        scaleRange: [0, 1] // 不使用dataFormatter設定
-      })
-      return { groupScale }
-    })()
-
-    
-
-    // const seriesColors = chartParams.colors[chartParams.colorScheme].series
-
-    // const groupScaleDomain = [
-    //   dataFormatter.groupAxis.scaleDomain[0] === 'auto'
-    //     ? 0
-    //     : dataFormatter.groupAxis.scaleDomain[0],
-    //   dataFormatter.groupAxis.scaleDomain[1] === 'auto'
-    //     ? groupEndIndex
-    //     : dataFormatter.groupAxis.scaleDomain[1]
-    // ]
-    
+    return transposedDataGrid
+  } catch (e) {
+    return []
+  }
+}
 
-    // -- 依groupScale算visible --
-    // 篩選顯示狀態
-    // const scaleDomainFilter = (columnIndex: number) => {
-    //   // 如果groupIndex不在scale的範圍內則為false，不再做visibleFilter的判斷
-    //   if (columnIndex < groupScaleDomain[0] || columnIndex > groupScaleDomain[1]) {
-    //     return false
-    //   }
-    //   return true
-    // }
-    // transposedDataGrid.forEach((seriesData, seriesIndex) => {
-    //   seriesData.forEach((groupDatum, groupIndex) => {
-    //     // in-place修改visible
-    //     groupDatum._visible = groupDatum._visible == true && scaleDomainFilter(groupIndex) == true
-    //       ? true
-    //       : false // 兩者有一個false即為false
-    //   })
-    // })
+export function createGroupScale (transposedDataGrid: DataGridDatumTemp[][], dataFormatter: DataFormatterGrid, layout: Layout) {
+  const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
+    ? layout.width
+    : layout.height
+  const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
+  const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    maxValue: groupEndIndex,
+    minValue: 0,
+    axisWidth: groupAxisWidth,
+    scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
+    scaleRange: [0, 1] // 不使用dataFormatter設定
+  })
+  return groupScale
+}
 
-    const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
-    const groupLabels = createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
+export function createSeriesValueScaleArr (transposedDataGrid: DataGridDatumTemp[][], dataFormatter: DataFormatterGrid, layout: Layout) {
+  const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+    ? layout.height
+    : layout.width
+
+  const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+  const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+  
+  return transposedDataGrid.map((seriesData, seriesIndex) => {
+    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue,
+      minValue,
+      axisWidth: valueAxisWidth,
+      scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+      scaleRange: [0, 1] // 不使用dataFormatter設定
+    })
+    return valueScale
+  })
+}
 
-    // 每一個series的valueScale
-    const seriesValueScaleArr = (() => {
-      const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
-        ? layout.height
-        : layout.width
+export const computeGridData: ComputedDataFn<'grid'> = (context) => {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
 
-      // // 每一個series的 [minValue, maxValue]
-      // const minAndMaxValueArr = (() => {
-      //   // 有設定series定位，各別series計算各自的最大最小值
-      //   if (dataFormatter.grid.seriesSlotIndexes
-      //     && dataFormatter.grid.seriesSlotIndexes.length === transposedDataGrid.length
-      //   ) {
-      //     return transposedDataGrid
-      //       .map(series => {
-      //         const visibleData = series.filter(d => d._visible != false)
-      //         return getMinAndMaxValue(visibleData)
-      //       })
-      //   } else {
-      //     // 沒有設定series定位，全部資料一起計算最大值最小值
-      //     const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-      //     const [minValue, maxValue] = getMinAndMaxValue(visibleData)
-      //     return transposedDataGrid
-      //       .map(series => {
-      //         return [minValue, maxValue]
-      //       })
-      //   }
-      // })()
+  let computedDataGrid: ComputedDatumGrid[][]
 
-      const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-      const [minValue, maxValue] = getMinAndMaxValue(visibleData)
-      
-      return transposedDataGrid.map((seriesData, seriesIndex) => {
-        // const minValue = minAndMaxValueArr[seriesIndex][0]
-        // const maxValue = minAndMaxValueArr[seriesIndex][1]
-        const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-          maxValue,
-          minValue,
-          axisWidth: valueAxisWidth,
-          scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
-          scaleRange: [0, 1] // 不使用dataFormatter設定
-        })
-        return valueScale
-      })
-    })()
+  try {
+    
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = createTransposedDataGrid(context)
 
-    // const { valueScale } = (() => {
-      
-    //   const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-    //   const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+    const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
 
-    //   const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
-    //     ? layout.height
-    //     : layout.width
+    const seriesLabels = createGridSeriesLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
+    const groupLabels = createGridGroupLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
 
-    //   const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-    //     maxValue,
-    //     minValue,
-    //     axisWidth: valueAxisWidth,
-    //     scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
-    //     scaleRange: [0, 1] // 不使用dataFormatter設定
-    //   })
-    //   return { valueScale }
-    // })()
+    // 每一個series的valueScale
+    const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
     
     const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
       return seriesValueScaleArr[seriesIndex]!(0)
@@ -211,7 +159,7 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
     computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
       return seriesData.map((groupDatum, groupIndex) => {
         
-        const defaultId = createDefaultDatumId(chartType, gridIndex, seriesIndex, groupIndex)
+        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
         // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
         const groupLabel = groupLabels[groupIndex]
         const valueScale = seriesValueScaleArr[seriesIndex]
@@ -227,8 +175,8 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
           data: groupDatum.data,
           value: groupDatum.value,
           // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
-          gridIndex,
-          accSeriesIndex: seriesIndex, // 預設為seriesIndex
+          gridIndex: 0,
+          // accSeriesIndex: seriesIndex, // 預設為seriesIndex
           seriesIndex,
           seriesLabel: seriesLabels[seriesIndex],
           groupIndex,

package/src/multiGrid/computeMultiGridData.ts

@@ -1,10 +1,86 @@
 import type { DataGrid } from '../types/DataGrid'
 import type { ComputedDataFn } from '../types/ComputedData'
+import type { ComputedDatumGrid } from '../types/ComputedDataGrid'
+import type { DataFormatterContext } from '../types/DataFormatter'
 import type { DataFormatterGrid } from '../types/DataFormatterGrid'
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
-import { computeBaseGridData } from '../grid/computeGridData'
+// import { computeBaseGridData } from '../grid/computeGridData'
 import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
-import { seriesColorPredicate } from '../utils/orbchartsUtils'
+import {
+  createDefaultDatumId,
+  seriesColorPredicate,
+  createGridSeriesLabels,
+  createMultiGridSeriesLabels,
+  createMultiGridGroupLabels
+} from '../utils/orbchartsUtils'
+import type { DataGridDatumTemp } from '../grid/computeGridData'
+import { createTransposedDataGrid, createGroupScale, createSeriesValueScaleArr } from '../grid/computeGridData'
+
+function createGridData ({ context, gridIndex, transposedDataGrid, gridSeriesLabels, SeriesLabelColorMap }: {
+  context: DataFormatterContext<'grid'>
+  gridIndex: number
+  transposedDataGrid: DataGridDatumTemp[][]
+  gridSeriesLabels: string[]
+  SeriesLabelColorMap: Map<string, string>
+}) {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
+  
+  const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
+
+  // const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType: 'multiGrid', gridIndex })
+  
+  const groupLabels = createMultiGridGroupLabels({ transposedDataGrid, dataFormatter, chartType: 'multiGrid', gridIndex })
+
+  // 每一個series的valueScale
+  const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
+
+  const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
+    return seriesValueScaleArr[seriesIndex]!(0)
+  })
+
+  let _index = 0
+  let computedDataGrid: ComputedDatumGrid[][] = transposedDataGrid.map((seriesData, seriesIndex) => {
+    return seriesData.map((groupDatum, groupIndex) => {
+      
+      const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
+      const groupLabel = groupLabels[groupIndex]
+      const seriesLabel = gridSeriesLabels[seriesIndex]
+      const valueScale = seriesValueScaleArr[seriesIndex]
+      const axisY = valueScale(groupDatum.value ?? 0)
+      const zeroY = zeroYArr[seriesIndex]
+
+      const computedDatum: ComputedDatumGrid = {
+        id: groupDatum.id ? groupDatum.id : defaultId,
+        index: _index,
+        label: groupDatum.label ? groupDatum.label : defaultId,
+        description: groupDatum.description ?? '',
+        data: groupDatum.data,
+        value: groupDatum.value,
+        gridIndex,
+        // accSeriesIndex: seriesIndex, // 預設為seriesIndex
+        seriesIndex,
+        seriesLabel,
+        groupIndex,
+        groupLabel,
+        // color: seriesColorPredicate(seriesIndex, chartParams),
+        color: SeriesLabelColorMap.get(seriesLabel),
+        axisX: groupScale(groupIndex),
+        axisY,
+        axisYFromZero: axisY - zeroY,
+        visible: groupDatum._visible
+      }
+
+      _index ++
+
+      return computedDatum
+    })
+  })
+
+  return computedDataGrid
+}
 
 export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], dataFormatter, chartParams, layout }) => {
   if (!data.length) {
@@ -16,43 +92,78 @@ export const computeMultiGridData: ComputedDataFn<'multiGrid'> = ({ data = [], d
   try {
     const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
 
-    // 計算每個grid的資料
-    multiGridData = data.map((gridData, gridIndex) => {
+    // 計算每個grid的dataFormatter
+    const gridDataFormatterList: DataFormatterGrid[] = data.map((gridData, gridIndex) => {
       const currentDataFormatterGrid = dataFormatter.gridList[gridIndex] || defaultGrid
 
-      return computeBaseGridData(
-        {
-          data: gridData,
-          dataFormatter: {
-            type: 'grid',
-            grid: {
-              ...currentDataFormatterGrid
-            },
-            container: {
-              ...dataFormatter.container
-            }
-          },
-          chartParams,
-          layout
+      return {
+        type: 'grid',
+        grid: {
+          ...currentDataFormatterGrid
         },
-        'multiGrid',
-        gridIndex
-      )
+        container: {
+          ...dataFormatter.container
+        }
+      }
+    })
+
+    const gridContextList = data.map((gridData, gridIndex) => {
+      // grid context
+      return {
+        data: gridData,
+        dataFormatter: gridDataFormatterList[gridIndex],
+        chartParams,
+        layout
+      }  
+    })
+
+    const transposedDataGridList = data.map((gridData, gridIndex) => {
+      // 依seriesDirection轉置資料矩陣
+      return createTransposedDataGrid(gridContextList[gridIndex])
+    })
+
+    const createSeriesLabelsFn = (() => {
+      const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.grid.slotIndex))
+      // 判斷是否有重疊的grid
+      const isOverlappingMultiGrid = SlotIndexSet.size !== gridDataFormatterList.length
+      return isOverlappingMultiGrid
+        ? createMultiGridSeriesLabels // 有重疊的grid則使用「不同」的seriesLabels
+        : createGridSeriesLabels // 沒有重疊的grid則使用「相同」的seriesLabels
+    })()
+    
+
+    const multiGridSeriesLabels = transposedDataGridList
+      .map((gridData, gridIndex) => {
+        return createSeriesLabelsFn({
+          transposedDataGrid: gridData,
+          dataFormatter: gridDataFormatterList[gridIndex],
+          chartType: 'multiGrid',
+          gridIndex
+        } as any)
+      })
+
+    const SeriesLabelColorMap: Map<string, string> = new Map()
+    let accIndex = 0
+    multiGridSeriesLabels.flat().forEach((label, i) => {
+      if (!SeriesLabelColorMap.has(label)) {
+        const color = seriesColorPredicate(accIndex, chartParams)
+        SeriesLabelColorMap.set(label, color)
+        accIndex ++
+      }
     })
 
-    // 修正多個grid的欄位資料
-    let accSeriesIndex = -1
-    multiGridData = multiGridData.map((gridData, i) => {
-      return gridData.map((series, j) => {
-        accSeriesIndex ++
-        return series.map(d => {
-          d.accSeriesIndex = accSeriesIndex
-          d.color = seriesColorPredicate(accSeriesIndex, chartParams)
-          return d
-        })
+    // 計算每個grid的資料
+    multiGridData = data.map((gridData, gridIndex) => {
+      return createGridData({
+        context: gridContextList[gridIndex],
+        gridIndex,
+        transposedDataGrid: transposedDataGridList[gridIndex],
+        gridSeriesLabels: multiGridSeriesLabels[gridIndex],
+        SeriesLabelColorMap
       })
     })
 
+
   } catch (e) {
     // console.error(e)
     throw Error(e)

package/src/types/ComputedDataGrid.ts

@@ -2,7 +2,7 @@ import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData'
 
 export interface ComputedDatumGrid
   extends ComputedDatumBase, ComputedDatumSeriesValue {
-  accSeriesIndex: number // 每一個grid累加的seriesIndex
+  // accSeriesIndex: number // 每一個grid累加的seriesIndex
   gridIndex: number
   groupIndex: number
   groupLabel: string

package/src/utils/orbchartsUtils.ts

@@ -7,6 +7,7 @@ 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 { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
 import type { ComputedDatumSeriesValue } from '../types/ComputedData'
 import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
 import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
@@ -38,7 +39,22 @@ export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex:
   return `${chartTypeOrPrefix}_group${groupIndex}`
 }
 
-export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid', gridIndex = 0 }: {
+export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
+  transposedDataGrid: DataGridDatum[][],
+  dataFormatter: DataFormatterGrid
+  chartType?: ChartType
+}) {
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.rowLabels
+    : dataFormatter.grid.gridData.columnLabels
+  return transposedDataGrid.map((_, rowIndex) => {
+    return labels[rowIndex] != null
+      ? labels[rowIndex]
+      : createDefaultSeriesLabel(chartType, rowIndex)
+  })
+}
+
+export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
   transposedDataGrid: DataGridDatum[][],
   dataFormatter: DataFormatterGrid
   chartType?: ChartType
@@ -54,7 +70,25 @@ export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, cha
   })
 }
 
-export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid', gridIndex = 0 }: {
+export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
+  transposedDataGrid: DataGridDatum[][],
+  dataFormatter: DataFormatterGrid
+  chartType?: ChartType
+}) {
+  if (transposedDataGrid[0] == null) {
+    return []
+  }
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.columnLabels
+    : dataFormatter.grid.gridData.rowLabels
+  return transposedDataGrid[0].map((_, columnLabels) => {
+    return labels[columnLabels] != null
+      ? labels[columnLabels]
+      : createDefaultGroupLabel(chartType, columnLabels)
+  })
+}
+
+export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
   transposedDataGrid: DataGridDatum[][],
   dataFormatter: DataFormatterGrid
   chartType?: ChartType