@orbcharts/core 3.0.0-beta.8 → 3.0.0

package/src/grid/dataFormatterValidator.ts

@@ -1,102 +1,121 @@
-import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
-import { validateColumns } from '../utils/validator'
-
-export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataFormatter: DataFormatterTypeMap<'grid'>) => {
-  const result = validateColumns(dataFormatter, {
-    visibleFilter: {
-      toBeTypes: ['Function']
-    },
-    // grid: {
-    //   toBeTypes: ['object']
-    // },
-    container: {
-      toBeTypes: ['object']
-    }
-  })
-  // if (dataFormatter.grid) {
-    const visibleFilterResult = validateColumns(dataFormatter, {
-      seriesDirection: {
-        toBe: '"row" | "column"',
-        test: (value) => value === 'row' || value === 'column'
-      },
-      rowLabels: {
-        toBeTypes: ['string[]']
-      },
-      columnLabels: {
-        toBeTypes: ['string[]']
-      },
-      valueAxis: {
-        toBeTypes: ['object']
-      },
-      groupAxis: {
-        toBeTypes: ['object']
-      },
-      separateSeries: {
-        toBeTypes: ['boolean']
-      }
-    })
-    if (visibleFilterResult.status === 'error') {
-      return visibleFilterResult
-    }
-    if (dataFormatter.valueAxis) {
-      const valueAxisResult = validateColumns(dataFormatter.valueAxis, {
-        position: {
-          toBe: '"bottom" | "left" | "top" | "right"',
-          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
-        },
-        scaleDomain: {
-          toBe: '[number | "min" | "auto", number | "max" | "auto"]',
-          test: (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] === 'number' || value[0] === 'min' || value[0] === 'auto') && (typeof value[1] === 'number' || value[1] === 'max' || value[1] === 'auto')
-        },
-        scaleRange: {
-          toBe: '[number, number]',
-          test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && typeof value[1] === 'number'
-        },
-        label: {
-          toBeTypes: ['string']
-        }
-      })
-      if (valueAxisResult.status === 'error') {
-        return valueAxisResult
-      }
-    }
-    if (dataFormatter.groupAxis) {
-      const groupAxisResult = validateColumns(dataFormatter.groupAxis, {
-        position: {
-          toBe: '"bottom" | "left" | "top" | "right"',
-          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
-        },
-        scaleDomain: {
-          toBe: '[number, number | "max"]',
-          test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && (typeof value[1] === 'number' || value[1] === 'max')
-        },
-        scalePadding: {
-          toBeTypes: ['number']
-        },
-        label: {
-          toBeTypes: ['string']
-        }
-      })
-      if (groupAxisResult.status === 'error') {
-        return groupAxisResult
-      }
-    }
-  // }
-  if (dataFormatter.container) {
-    const containerResult = validateColumns(dataFormatter.container, {
-      gap: {
-        toBeTypes: ['number']
-      },
-      rowAmount: {
-        toBeTypes: ['number']
-      },
-      columnAmount: {
-        toBeTypes: ['number']
-      }
-    })
-    if (containerResult.status === 'error') {
-      return containerResult
-    }
-  }
-  return result
+import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
+
+export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataFormatter: DataFormatterTypeMap<'grid'>) => {
+  const result = validateColumns(dataFormatter, {
+    visibleFilter: {
+      toBeTypes: ['Function']
+    },
+    // grid: {
+    //   toBeTypes: ['object']
+    // },
+    container: {
+      toBeTypes: ['object']
+    },
+    seriesDirection: {
+      toBe: '"row" | "column"',
+      test: (value) => value === 'row' || value === 'column'
+    },
+    rowLabels: {
+      toBeTypes: ['string[]']
+    },
+    columnLabels: {
+      toBeTypes: ['string[]']
+    },
+    valueAxis: {
+      toBeTypes: ['object']
+    },
+    groupAxis: {
+      toBeTypes: ['object']
+    },
+    separateSeries: {
+      toBeTypes: ['boolean']
+    }
+  })
+  // if (dataFormatter.grid) {
+    // const visibleFilterResult = validateColumns(dataFormatter, {
+    //   seriesDirection: {
+    //     toBe: '"row" | "column"',
+    //     test: (value) => value === 'row' || value === 'column'
+    //   },
+    //   rowLabels: {
+    //     toBeTypes: ['string[]']
+    //   },
+    //   columnLabels: {
+    //     toBeTypes: ['string[]']
+    //   },
+    //   valueAxis: {
+    //     toBeTypes: ['object']
+    //   },
+    //   groupAxis: {
+    //     toBeTypes: ['object']
+    //   },
+    //   separateSeries: {
+    //     toBeTypes: ['boolean']
+    //   }
+    // })
+    if (result.status === 'error') {
+      return result
+    }
+    if (dataFormatter.valueAxis) {
+      const valueAxisResult = validateColumns(dataFormatter.valueAxis, {
+        position: {
+          toBe: '"bottom" | "left" | "top" | "right"',
+          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
+        },
+        scaleDomain: {
+          toBe: '[number | "min" | "auto", number | "max" | "auto"]',
+          test: (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] === 'number' || value[0] === 'min' || value[0] === 'auto') && (typeof value[1] === 'number' || value[1] === 'max' || value[1] === 'auto')
+        },
+        scaleRange: {
+          toBe: '[number, number]',
+          test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && typeof value[1] === 'number'
+        },
+        label: {
+          toBeTypes: ['string']
+        }
+      })
+      if (valueAxisResult.status === 'error') {
+        return valueAxisResult
+      }
+    }
+    if (dataFormatter.groupAxis) {
+      const groupAxisResult = validateColumns(dataFormatter.groupAxis, {
+        position: {
+          toBe: '"bottom" | "left" | "top" | "right"',
+          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
+        },
+        scaleDomain: {
+          toBe: '[number, number | "max"]',
+          test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && (typeof value[1] === 'number' || value[1] === 'max')
+        },
+        scalePadding: {
+          toBeTypes: ['number']
+        },
+        label: {
+          toBeTypes: ['string']
+        }
+      })
+      if (groupAxisResult.status === 'error') {
+        return groupAxisResult
+      }
+    }
+  // }
+  if (dataFormatter.container) {
+    const containerResult = validateColumns(dataFormatter.container, {
+      gap: {
+        toBeTypes: ['number']
+      },
+      rowAmount: {
+        toBeTypes: ['number']
+      },
+      columnAmount: {
+        toBeTypes: ['number']
+      }
+    })
+    if (containerResult.status === 'error') {
+      return containerResult
+    }
+  }
+  return result
 }

package/src/grid/dataValidator.ts

@@ -1,13 +1,13 @@
-import type { DataValidator, DataTypeMap } from '../../lib/core-types'
-import { validateColumns } from '../utils/validator'
-
-export const dataValidator: DataValidator<'grid'> = (data: DataTypeMap<'grid'>) => {
-  const result = validateColumns({ data }, {
-    data: {
-      toBe: '(DataGridDatum | DataGridValue)[][]',
-      // 畢免資料量過大檢查不完，不深度檢查
-      test: (value) => Array.isArray(value)
-    }
-  })
-  return result
+import type { DataValidator, DataTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
+
+export const dataValidator: DataValidator<'grid'> = (data: DataTypeMap<'grid'>) => {
+  const result = validateColumns({ data }, {
+    data: {
+      toBe: '(DataGridDatum | DataGridValue)[][]',
+      // 畢免資料量過大檢查不完，不深度檢查
+      test: (value) => Array.isArray(value)
+    }
+  })
+  return result
 }

package/src/index.ts

@@ -1,20 +1,20 @@
-
-export { SeriesChart } from './SeriesChart'
-export { GridChart } from './GridChart'
-export { MultiGridChart } from './MultiGridChart'
-export { MultiValueChart } from './MultiValueChart'
-export { RelationshipChart } from './RelationshipChart'
-export { TreeChart } from './TreeChart'
-
-export { defineSeriesPlugin } from './defineSeriesPlugin'
-export { defineGridPlugin } from './defineGridPlugin'
-export { defineMultiGridPlugin } from './defineMultiGridPlugin'
-export { defineMultiValuePlugin } from './defineMultiValuePlugin'
-export { defineNoneDataPlugin } from './defineNoneDataPlugin'
-export { defineRelationshipPlugin } from './defineRelationshipPlugin'
-export { defineTreePlugin } from './defineTreePlugin'
-
-export * from './utils'
-export * from './defaults'
-
-
+
+export { SeriesChart } from './SeriesChart'
+export { GridChart } from './GridChart'
+export { MultiGridChart } from './MultiGridChart'
+export { MultiValueChart } from './MultiValueChart'
+export { RelationshipChart } from './RelationshipChart'
+export { TreeChart } from './TreeChart'
+
+export { defineSeriesPlugin } from './defineSeriesPlugin'
+export { defineGridPlugin } from './defineGridPlugin'
+export { defineMultiGridPlugin } from './defineMultiGridPlugin'
+export { defineMultiValuePlugin } from './defineMultiValuePlugin'
+export { defineNoneDataPlugin } from './defineNoneDataPlugin'
+export { defineRelationshipPlugin } from './defineRelationshipPlugin'
+export { defineTreePlugin } from './defineTreePlugin'
+
+export * from './utils'
+export * from './defaults'
+
+

package/src/multiGrid/computedDataFn.ts

@@ -1,123 +1,123 @@
-import type { ComputedDataFn, ComputedDatumGrid, DataFormatterGridGrid, ComputedDataMultiGrid } from '../../lib/core-types'
-import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
-import {
-  createDefaultDatumId,
-  seriesColorPredicate,
-  createGridSeriesLabels,
-  createMultiGridSeriesLabels,
-  createMultiGridGroupLabels
-} from '../utils/orbchartsUtils'
-import { createTransposedDataGrid } from '../grid/computedDataFn'
-
-export const computedDataFn: ComputedDataFn<'multiGrid'> = (context) => {
-  const { data = [], dataFormatter, chartParams } = context
-  if (!data.length) {
-    return []
-  }
-
-  let multiGridData: ComputedDataMultiGrid = []
-
-  try {
-    const defaultGrid = dataFormatter.gridList[0] || DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
-
-    // 計算每個grid的dataFormatter
-    const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {
-      return dataFormatter.gridList[gridIndex] || defaultGrid
-    })
-
-    const transposedDataGridList = data.map((gridData, gridIndex) => {
-      // 依seriesDirection轉置資料矩陣
-      return createTransposedDataGrid(gridData, gridDataFormatterList[gridIndex])
-    })
-
-    // const isOverlappingMultiGrid = (() => {
-    //   const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.slotIndex))
-    //   // 判斷是否有重疊的grid
-    //   return SlotIndexSet.size !== gridDataFormatterList.length
-    // })()
-
-    const multiGridSeriesLabels = dataFormatter.separateGrid
-      // grid分開的時候，預設每組的seriesLabels相同
-      ? transposedDataGridList
-          .map((gridData, gridIndex) => {
-            return createGridSeriesLabels({
-              transposedDataGrid: gridData,
-              dataFormatterGrid: gridDataFormatterList[gridIndex],
-              chartType: 'multiGrid',
-            })
-          })
-      // grid不分開的時候，預設每個grid相同seriesIndex的seriesLabel相同
-      : transposedDataGridList
-          .map((gridData, gridIndex) => {
-            return createMultiGridSeriesLabels({
-              transposedDataGrid: gridData,
-              dataFormatterGrid: gridDataFormatterList[gridIndex],
-              chartType: 'multiGrid',
-              gridIndex
-            })
-          })
-
-    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的資料
-    multiGridData = transposedDataGridList.map((gridData, gridIndex) => {
-      const gridSeriesLabels = multiGridSeriesLabels[gridIndex]
-      const groupLabels = createMultiGridGroupLabels({
-        transposedDataGrid: gridData,
-        dataFormatterGrid: gridDataFormatterList[gridIndex],
-        chartType: 'multiGrid',
-        gridIndex
-      })
-
-      let _index = 0
-      let computedDataGrid: ComputedDatumGrid[][] = gridData.map((seriesData, seriesIndex) => {
-        return seriesData.map((groupDatum, groupIndex) => {
-          
-          const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
-          const groupLabel = groupLabels[groupIndex]
-          const seriesLabel = gridSeriesLabels[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: SeriesLabelColorMap.get(seriesLabel),
-            visible: true // 先給一個預設值
-          }
-
-          computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
-    
-          _index ++
-    
-          return computedDatum
-        })
-      })
-    
-      return computedDataGrid
-    })
-
-
-  } catch (e) {
-    // console.error(e)
-    throw Error(e)
-  }
-
-  return multiGridData
-}
+import type { ComputedDataFn, ComputedDatumGrid, DataFormatterGridGrid, ComputedDataMultiGrid } from '../../lib/core-types'
+import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
+import {
+  createDefaultDatumId,
+  seriesColorPredicate,
+  createGridSeriesLabels,
+  createMultiGridSeriesLabels,
+  createMultiGridGroupLabels
+} from '../utils/orbchartsUtils'
+import { createTransposedDataGrid } from '../grid/computedDataFn'
+
+export const computedDataFn: ComputedDataFn<'multiGrid'> = (context) => {
+  const { data = [], dataFormatter, chartParams } = context
+  if (!data.length) {
+    return []
+  }
+
+  let multiGridData: ComputedDataMultiGrid = []
+
+  try {
+    const defaultGrid = dataFormatter.gridList[0] || DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
+
+    // 計算每個grid的dataFormatter
+    const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {
+      return dataFormatter.gridList[gridIndex] || defaultGrid
+    })
+
+    const transposedDataGridList = data.map((gridData, gridIndex) => {
+      // 依seriesDirection轉置資料矩陣
+      return createTransposedDataGrid(gridData, gridDataFormatterList[gridIndex])
+    })
+
+    // const isOverlappingMultiGrid = (() => {
+    //   const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.slotIndex))
+    //   // 判斷是否有重疊的grid
+    //   return SlotIndexSet.size !== gridDataFormatterList.length
+    // })()
+
+    const multiGridSeriesLabels = dataFormatter.separateGrid
+      // grid分開的時候，預設每組的seriesLabels相同
+      ? transposedDataGridList
+          .map((gridData, gridIndex) => {
+            return createGridSeriesLabels({
+              transposedDataGrid: gridData,
+              dataFormatterGrid: gridDataFormatterList[gridIndex],
+              chartType: 'multiGrid',
+            })
+          })
+      // grid不分開的時候，預設每個grid相同seriesIndex的seriesLabel相同
+      : transposedDataGridList
+          .map((gridData, gridIndex) => {
+            return createMultiGridSeriesLabels({
+              transposedDataGrid: gridData,
+              dataFormatterGrid: gridDataFormatterList[gridIndex],
+              chartType: 'multiGrid',
+              gridIndex
+            })
+          })
+
+    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的資料
+    multiGridData = transposedDataGridList.map((gridData, gridIndex) => {
+      const gridSeriesLabels = multiGridSeriesLabels[gridIndex]
+      const groupLabels = createMultiGridGroupLabels({
+        transposedDataGrid: gridData,
+        dataFormatterGrid: gridDataFormatterList[gridIndex],
+        chartType: 'multiGrid',
+        gridIndex
+      })
+
+      let _index = 0
+      let computedDataGrid: ComputedDatumGrid[][] = gridData.map((seriesData, seriesIndex) => {
+        return seriesData.map((groupDatum, groupIndex) => {
+          
+          const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
+          const groupLabel = groupLabels[groupIndex]
+          const seriesLabel = gridSeriesLabels[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: SeriesLabelColorMap.get(seriesLabel),
+            visible: true // 先給一個預設值
+          }
+
+          computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+    
+          _index ++
+    
+          return computedDatum
+        })
+      })
+    
+      return computedDataGrid
+    })
+
+
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return multiGridData
+}

package/src/multiGrid/contextObserverCallback.ts

@@ -1,41 +1,72 @@
-import {
-  map,
-  shareReplay } from 'rxjs'
-import type { ContextObserverCallback } from '../../lib/core-types'
-import { multiGridEachDetailObservable, multiGridContainerObservable } from '../utils/multiGridObservables'
-import { textSizePxObservable } from '../utils/observables'
-
-export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({ subject, observer }) => {
-
-  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
-    shareReplay(1)
-  )
-
-  const multiGridEachDetail$ = multiGridEachDetailObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    event$: subject.event$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const multiGridContainerPosition$ = multiGridContainerObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$,
-  })
-
-  return {
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    textSizePx$,
-    multiGridContainerPosition$,
-    multiGridEachDetail$,
-    // multiGridContainer$
-  }
-}
+import {
+  map,
+  shareReplay } from 'rxjs'
+import type { ContextObserverCallback, DataGridDatum } from '../../lib/core-types'
+import { multiGridEachDetailObservable, multiGridContainerObservable } from '../utils/multiGridObservables'
+import { textSizePxObservable, containerSizeObservable, highlightObservable } from '../utils/observables'
+// import { createMultiGridSeriesLabels } from '../utils/orbchartsUtils'
+import { combineLatest } from 'rxjs/internal/observable/combineLatest'
+
+export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({ subject, observer }) => {
+
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const multiGridContainerPosition$ = multiGridContainerObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const containerSize$ = containerSizeObservable({
+    layout$: observer.layout$,
+    containerPosition$: multiGridContainerPosition$.pipe(
+      map(d => d.flat())
+    )
+  }).pipe(
+    shareReplay(1)
+  )
+
+  // highlight全部grid
+  const multiGridHighlight$ = highlightObservable({
+    datumList$: observer.computedData$.pipe(
+      map(d => d.flat().flat()),
+      shareReplay(1)
+    ),
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const multiGridEachDetail$ = multiGridEachDetailObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$,
+    containerSize$
+  }).pipe(
+    shareReplay(1)
+  )
+  // multiGridContainerPosition$.subscribe(d => {
+  //   console.log('multiGridContainerPosition$', d)
+  // })
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    textSizePx$,
+    containerSize$,
+    multiGridHighlight$,
+    multiGridContainerPosition$,
+    multiGridEachDetail$,
+    // multiGridContainer$
+  }
+}