@orbcharts/core 3.0.0-beta.8 → 3.0.0

package/src/grid/computedDataFn.ts

@@ -1,129 +1,129 @@
-// import * as d3 from 'd3'
-import type { ComputedDataFn, DataGrid, DataGridDatum, DataFormatterGridGrid, ComputedDatumGrid } from '../../lib/core-types'
-import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
-import { getMinMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
-
-// 統一 DataGrid 格式、並欄列資料轉置為一致方式
-export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
-  // const { data = [], dataFormatter, chartParams } = context
-  if (!data.length) {
-    return []
-  }
-  try {
-    // 最多的array length
-    const maxArrayLength = data.reduce((prev, current) => {
-      return current.length > prev ? current.length : prev
-    }, 0)
-
-    // 補齊短少資料
-    const fullData = data.map((d, i) => {
-      if (d.length === maxArrayLength) {
-        return d
-      }
-      const newD = Object.assign([], d)
-      for (let _i = newD.length; _i < maxArrayLength; _i++) {
-        newD[_i] = null
-      }
-      return newD
-    })
-
-    // 完整的資料格式
-    const dataGrid: DataGridDatum[][] = fullData.map((d, i) => {
-      return d.map((_d, _i) => {
-
-        const datum: DataGridDatum = _d == null
-          ? {
-            id: '',
-            label: '',
-            data: {},
-            value: null,
-          }
-          : typeof _d === 'number'
-            ? {
-              id: '',
-              label: '',
-              data: {},
-              value: _d,
-            }
-            : {
-              id: _d.id ?? '',
-              label: _d.label ?? '',
-              data: _d.data ?? {},
-              value: _d.value,
-            }
-        
-        return datum
-      })
-    })
-
-    // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = transposeData(dataFormatterGrid.seriesDirection, dataGrid)
-
-    return transposedDataGrid
-  } catch (e) {
-    return []
-  }
-}
-
-export const computedDataFn: ComputedDataFn<'grid'> = (context) => {
-  const { data = [], dataFormatter, chartParams } = context
-  if (!data.length) {
-    return []
-  }
-
-  let computedDataGrid: ComputedDatumGrid[][]
-
-  try {
-    
-    // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter)
-
-    const seriesLabels = createGridSeriesLabels({
-      transposedDataGrid,
-      dataFormatterGrid: dataFormatter,
-      chartType: 'grid'
-    })
-    const groupLabels = createGridGroupLabels({
-      transposedDataGrid,
-      dataFormatterGrid: dataFormatter,
-      chartType: 'grid'
-    })
-
-    let _index = 0
-    computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
-      return seriesData.map((groupDatum, groupIndex) => {
-        
-        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
-        const groupLabel = groupLabels[groupIndex]
-
-        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: 0,
-          seriesIndex,
-          seriesLabel: seriesLabels[seriesIndex],
-          groupIndex,
-          groupLabel,
-          color: seriesColorPredicate(seriesIndex, chartParams),
-          visible: true // 先給一個預設值
-        }
-
-        // 先建立物件再計算visible欄位
-        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
-
-        _index ++
-
-        return computedDatum
-      })
-    })
-
-  } catch (e) {
-    throw Error(e)
-  }
-
-  return computedDataGrid
-}
+// import * as d3 from 'd3'
+import type { ComputedDataFn, DataGrid, DataGridDatum, DataFormatterGridGrid, ComputedDatumGrid } from '../../lib/core-types'
+import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
+import { getMinMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
+
+// 統一 DataGrid 格式、並欄列資料轉置為一致方式
+export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
+  // const { data = [], dataFormatter, chartParams } = context
+  if (!data.length) {
+    return []
+  }
+  try {
+    // 最多的array length
+    const maxArrayLength = data.reduce((prev, current) => {
+      return current.length > prev ? current.length : prev
+    }, 0)
+
+    // 補齊短少資料
+    const fullData = data.map((d, i) => {
+      if (d.length === maxArrayLength) {
+        return d
+      }
+      const newD = Object.assign([], d)
+      for (let _i = newD.length; _i < maxArrayLength; _i++) {
+        newD[_i] = null
+      }
+      return newD
+    })
+
+    // 完整的資料格式
+    const dataGrid: DataGridDatum[][] = fullData.map((d, i) => {
+      return d.map((_d, _i) => {
+
+        const datum: DataGridDatum = _d == null
+          ? {
+            id: '',
+            label: '',
+            data: {},
+            value: null,
+          }
+          : typeof _d === 'number'
+            ? {
+              id: '',
+              label: '',
+              data: {},
+              value: _d,
+            }
+            : {
+              id: _d.id ?? '',
+              label: _d.label ?? '',
+              data: _d.data ?? {},
+              value: _d.value,
+            }
+        
+        return datum
+      })
+    })
+
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = transposeData(dataFormatterGrid.seriesDirection, dataGrid)
+
+    return transposedDataGrid
+  } catch (e) {
+    return []
+  }
+}
+
+export const computedDataFn: ComputedDataFn<'grid'> = (context) => {
+  const { data = [], dataFormatter, chartParams } = context
+  if (!data.length) {
+    return []
+  }
+
+  let computedDataGrid: ComputedDatumGrid[][]
+
+  try {
+    
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter)
+
+    const seriesLabels = createGridSeriesLabels({
+      transposedDataGrid,
+      dataFormatterGrid: dataFormatter,
+      chartType: 'grid'
+    })
+    const groupLabels = createGridGroupLabels({
+      transposedDataGrid,
+      dataFormatterGrid: dataFormatter,
+      chartType: 'grid'
+    })
+
+    let _index = 0
+    computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
+      return seriesData.map((groupDatum, groupIndex) => {
+        
+        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
+        const groupLabel = groupLabels[groupIndex]
+
+        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: 0,
+          seriesIndex,
+          seriesLabel: seriesLabels[seriesIndex],
+          groupIndex,
+          groupLabel,
+          color: seriesColorPredicate(seriesIndex, chartParams),
+          visible: true // 先給一個預設值
+        }
+
+        // 先建立物件再計算visible欄位
+        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+
+        _index ++
+
+        return computedDatum
+      })
+    })
+
+  } catch (e) {
+    throw Error(e)
+  }
+
+  return computedDataGrid
+}

package/src/grid/contextObserverCallback.ts

@@ -1,176 +1,198 @@
-import { map, shareReplay, distinctUntilChanged } from 'rxjs'
-import type { ContextObserverCallback } from '../../lib/core-types'
-import {
-  highlightObservable,
-  seriesDataMapObservable,
-  groupDataMapObservable,
-  textSizePxObservable } from '../utils/observables'
-import {
-  gridComputedLayoutDataObservable,
-  gridAxesSizeObservable,
-  gridSeriesLabelsObservable,
-  gridVisibleComputedDataObservable,
-  gridVisibleComputedLayoutDataObservable,
-  // isSeriesSeprateObservable,
-  gridContainerPositionObservable,
-  computedStackedDataObservables,
-  groupScaleDomainValueObservable,
-  filteredMinMaxValueObservable,
-  gridAxesTransformObservable,
-  gridAxesReverseTransformObservable,
-  gridGraphicTransformObservable,
-  gridGraphicReverseScaleObservable,
-} from '../utils/gridObservables'
-
-export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subject, observer }) => {
-  
-  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
-    shareReplay(1)
-  )
-
-  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    map(d => d.separateSeries),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-  
-  const gridContainerPosition$ = gridContainerPositionObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$,
-  })
-
-  const gridAxesSize$ = gridAxesSizeObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const datumList$ = observer.computedData$.pipe(
-    map(d => d.flat())
-  ).pipe(
-    shareReplay(1)
-  )
-
-  const gridHighlight$ = highlightObservable({
-    datumList$,
-    fullChartParams$: observer.fullChartParams$,
-    event$: subject.event$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const seriesLabels$ = gridSeriesLabelsObservable({
-    computedData$: observer.computedData$,
-  })
-
-  const SeriesDataMap$ = seriesDataMapObservable({
-    datumList$: datumList$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const GroupDataMap$ = groupDataMapObservable({
-    datumList$: datumList$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const computedLayoutData$ = gridComputedLayoutDataObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const visibleComputedData$ = gridVisibleComputedDataObservable({
-    computedData$: observer.computedData$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
-    computedLayoutData$: computedLayoutData$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const computedStackedData$ = computedStackedDataObservables({
-    computedData$: observer.computedData$,
-    isSeriesSeprate$: isSeriesSeprate$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const groupScaleDomainValue$ = groupScaleDomainValueObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const filteredMinMaxValue$ = filteredMinMaxValueObservable({
-    computedData$: observer.computedData$,
-    groupScaleDomainValue$: groupScaleDomainValue$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridAxesTransform$ = gridAxesTransformObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
-    gridAxesTransform$
-  }).pipe(
-    shareReplay(1)
-  )
-  
-  const gridGraphicTransform$ = gridGraphicTransformObservable({
-    computedData$: observer.computedData$,
-    groupScaleDomainValue$: groupScaleDomainValue$,
-    filteredMinMaxValue$: filteredMinMaxValue$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
-    gridContainerPosition$: gridContainerPosition$,
-    gridAxesTransform$: gridAxesTransform$,
-    gridGraphicTransform$: gridGraphicTransform$,
-  })
-
-
-  return {
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    textSizePx$,
-    isSeriesSeprate$,
-    gridContainerPosition$,
-    gridAxesSize$,
-    gridHighlight$,
-    seriesLabels$,
-    SeriesDataMap$,
-    GroupDataMap$,
-    computedLayoutData$,
-    visibleComputedData$,
-    visibleComputedLayoutData$,
-    computedStackedData$,
-    groupScaleDomainValue$,
-    filteredMinMaxValue$,
-    gridAxesTransform$,
-    gridAxesReverseTransform$,
-    gridGraphicTransform$,
-    gridGraphicReverseScale$,
-  }
-}
+import { map, shareReplay, distinctUntilChanged } from 'rxjs'
+import type { ContextObserverCallback } from '../../lib/core-types'
+import {
+  highlightObservable,
+  seriesDataMapObservable,
+  groupDataMapObservable,
+  textSizePxObservable } from '../utils/observables'
+import {
+  gridComputedAxesDataObservable,
+  gridAxesSizeObservable,
+  gridAxesContainerSizeObservable,
+  gridSeriesLabelsObservable,
+  gridVisibleComputedDataObservable,
+  gridVisibleComputedAxesDataObservable,
+  // isSeriesSeprateObservable,
+  gridContainerPositionObservable,
+  computedStackedDataObservables,
+  groupScaleDomainValueObservable,
+  filteredMinMaxValueObservable,
+  gridAxesTransformObservable,
+  gridAxesReverseTransformObservable,
+  gridGraphicTransformObservable,
+  gridGraphicReverseScaleObservable,
+} from '../utils/gridObservables'
+import { containerSizeObservable } from '../utils/observables'
+
+export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subject, observer }) => {
+  
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
+    map(d => d.separateSeries),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+  
+  const gridContainerPosition$ = gridContainerPositionObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const containerSize$ = containerSizeObservable({
+    layout$: observer.layout$,
+    containerPosition$: gridContainerPosition$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesSize$ = gridAxesSizeObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesContainerSize$ = gridAxesContainerSizeObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    containerSize$: containerSize$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const datumList$ = observer.computedData$.pipe(
+    map(d => d.flat())
+  ).pipe(
+    shareReplay(1)
+  )
+
+  const gridHighlight$ = highlightObservable({
+    datumList$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const seriesLabels$ = gridSeriesLabelsObservable({
+    computedData$: observer.computedData$,
+  })
+
+  const SeriesDataMap$ = seriesDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const GroupDataMap$ = groupDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const computedAxesData$ = gridComputedAxesDataObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = gridVisibleComputedDataObservable({
+    computedData$: observer.computedData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedAxesData$ = gridVisibleComputedAxesDataObservable({
+    computedAxesData$: computedAxesData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const computedStackedData$ = computedStackedDataObservables({
+    computedData$: observer.computedData$,
+    isSeriesSeprate$: isSeriesSeprate$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const groupScaleDomainValue$ = groupScaleDomainValueObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const filteredMinMaxValue$ = filteredMinMaxValueObservable({
+    computedData$: observer.computedData$,
+    groupScaleDomainValue$: groupScaleDomainValue$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesTransform$ = gridAxesTransformObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+    gridAxesTransform$
+  }).pipe(
+    shareReplay(1)
+  )
+  
+  const gridGraphicTransform$ = gridGraphicTransformObservable({
+    computedData$: observer.computedData$,
+    groupScaleDomainValue$: groupScaleDomainValue$,
+    filteredMinMaxValue$: filteredMinMaxValue$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+    gridContainerPosition$: gridContainerPosition$,
+    gridAxesTransform$: gridAxesTransform$,
+    gridGraphicTransform$: gridGraphicTransform$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    textSizePx$,
+    isSeriesSeprate$,
+    gridContainerPosition$,
+    containerSize$,
+    gridAxesSize$,
+    gridAxesContainerSize$,
+    gridHighlight$,
+    seriesLabels$,
+    SeriesDataMap$,
+    GroupDataMap$,
+    computedAxesData$,
+    visibleComputedData$,
+    visibleComputedAxesData$,
+    computedStackedData$,
+    groupScaleDomainValue$,
+    filteredMinMaxValue$,
+    gridAxesTransform$,
+    gridAxesReverseTransform$,
+    gridGraphicTransform$,
+    gridGraphicReverseScale$,
+  }
+}