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

package/src/index.ts

@@ -1,21 +1,21 @@
-
-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 './types'
-export * from './utils'
-
-
-
+
+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 './types'
+export * from './utils'
+
+
+

package/src/multiGrid/computeMultiGridData.ts

@@ -1,173 +1,173 @@
-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 { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
-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) {
-    return []
-  }
-
-  let multiGridData: ComputedDataMultiGrid = []
-
-  try {
-    const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-
-    // 計算每個grid的dataFormatter
-    const gridDataFormatterList: DataFormatterGrid[] = data.map((gridData, gridIndex) => {
-      const currentDataFormatterGrid = dataFormatter.gridList[gridIndex] || defaultGrid
-
-      return {
-        type: 'grid',
-        grid: {
-          ...currentDataFormatterGrid
-        },
-        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的資料
-    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)
-  }
-
-  return multiGridData
-}
+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 { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
+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) {
+    return []
+  }
+
+  let multiGridData: ComputedDataMultiGrid = []
+
+  try {
+    const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+
+    // 計算每個grid的dataFormatter
+    const gridDataFormatterList: DataFormatterGrid[] = data.map((gridData, gridIndex) => {
+      const currentDataFormatterGrid = dataFormatter.gridList[gridIndex] || defaultGrid
+
+      return {
+        type: 'grid',
+        grid: {
+          ...currentDataFormatterGrid
+        },
+        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的資料
+    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)
+  }
+
+  return multiGridData
+}

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -1,34 +1,40 @@
-import {
-  shareReplay } from 'rxjs'
-import type { ContextObserverFn } from '../types'
-import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
-
-export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
-
-  const multiGridEachDetail$ = multiGridEachDetailObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    event$: subject.event$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const multiGridContainer$ = multiGridContainerObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    fullChartParams$: observer.fullChartParams$,
-    layout$: observer.layout$,
-  })
-
-  return {
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    multiGridEachDetail$,
-    multiGridContainer$
-  }
-}
+import {
+  shareReplay } from 'rxjs'
+import type { ContextObserverFn } from '../types'
+import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
+import { textSizePxObservable } from '../utils/observables'
+
+export const createMultiGridContextObserver: ContextObserverFn<'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 multiGridContainer$ = multiGridContainerObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+  })
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    textSizePx$,
+    multiGridEachDetail$,
+    multiGridContainer$
+  }
+}