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

package/src/grid/computeGridData.ts

@@ -1,205 +1,205 @@
-import * as d3 from 'd3'
-import type { ComputedDataFn } from '../types/ComputedData'
-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'
-
-export interface DataGridDatumTemp extends DataGridDatum {
-  // _color: string // 暫放的顏色資料
-  _visible: boolean // 暫放的visible
-}
-
-export function createTransposedDataGrid (context: DataFormatterContext<'grid'>): DataGridDatumTemp[][] {
-  const { data = [], dataFormatter, chartParams, layout } = 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: DataGridDatumTemp[][] = fullData.map((d, i) => {
-      return d.map((_d, _i) => {
-
-        // const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
-        const _visible = dataFormatter.grid.visibleFilter(_d, i, _i, context)
-
-        const datum: DataGridDatumTemp = _d == null
-          ? {
-            id: '',
-            label: '',
-            // tooltipContent: '',
-            data: {},
-            value: null,
-            // _color,
-            _visible
-          }
-          : typeof _d === 'number'
-            ? {
-              id: '',
-              label: '',
-              // tooltipContent: '',
-              data: {},
-              value: _d,
-              // _color,
-              _visible
-            }
-            : {
-              id: _d.id ?? '',
-              label: _d.label ?? '',
-              // tooltipContent: _d.tooltipContent ?? '',
-              data: _d.data ?? {},
-              value: _d.value,
-              // _color,
-              _visible
-            }
-        
-        return datum
-      })
-    })
-
-    // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
-
-    return transposedDataGrid
-  } catch (e) {
-    return []
-  }
-}
-
-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
-}
-
-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
-  })
-}
-
-export const computeGridData: ComputedDataFn<'grid'> = (context) => {
-  const { data = [], dataFormatter, chartParams, layout } = context
-  if (!data.length) {
-    return []
-  }
-
-  let computedDataGrid: ComputedDatumGrid[][]
-
-  try {
-    
-    // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = createTransposedDataGrid(context)
-
-    const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
-
-    const seriesLabels = createGridSeriesLabels({
-      transposedDataGrid,
-      dataFormatter,
-      chartType: 'grid'
-    })
-    const groupLabels = createGridGroupLabels({
-      transposedDataGrid,
-      dataFormatter,
-      chartType: 'grid'
-    })
-
-    // 每一個series的valueScale
-    const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
-    
-    const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
-      return seriesValueScaleArr[seriesIndex]!(0)
-    })
-
-    let _index = 0
-    computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
-      return seriesData.map((groupDatum, groupIndex) => {
-        
-        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
-        // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
-        const groupLabel = groupLabels[groupIndex]
-        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 ?? '',
-          // tooltipContent: groupDatum.tooltipContent ? groupDatum.tooltipContent : dataFormatter.tooltipContentFormat(groupDatum, seriesIndex, groupIndex, context),
-          data: groupDatum.data,
-          value: groupDatum.value,
-          // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
-          gridIndex: 0,
-          // accSeriesIndex: seriesIndex, // 預設為seriesIndex
-          seriesIndex,
-          seriesLabel: seriesLabels[seriesIndex],
-          groupIndex,
-          groupLabel,
-          // color: groupDatum._color,
-          color: seriesColorPredicate(seriesIndex, chartParams),
-          axisX: groupScale(groupIndex),
-          axisY,
-          axisYFromZero: axisY - zeroY,
-          // visible: groupDatum._visible == true && scaleDomainFilter(groupIndex) == true ? true : false // 兩者有一個false即為false
-          visible: groupDatum._visible
-        }
-
-        _index ++
-
-        return computedDatum
-      })
-    })
-
-  } catch (e) {
-    // console.error(e)
-    throw Error(e)
-  }
-
-  return computedDataGrid
-}
+import * as d3 from 'd3'
+import type { ComputedDataFn } from '../types/ComputedData'
+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'
+
+export interface DataGridDatumTemp extends DataGridDatum {
+  // _color: string // 暫放的顏色資料
+  _visible: boolean // 暫放的visible
+}
+
+export function createTransposedDataGrid (context: DataFormatterContext<'grid'>): DataGridDatumTemp[][] {
+  const { data = [], dataFormatter, chartParams, layout } = 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: DataGridDatumTemp[][] = fullData.map((d, i) => {
+      return d.map((_d, _i) => {
+
+        // const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
+        const _visible = dataFormatter.grid.visibleFilter(_d, i, _i, context)
+
+        const datum: DataGridDatumTemp = _d == null
+          ? {
+            id: '',
+            label: '',
+            // tooltipContent: '',
+            data: {},
+            value: null,
+            // _color,
+            _visible
+          }
+          : typeof _d === 'number'
+            ? {
+              id: '',
+              label: '',
+              // tooltipContent: '',
+              data: {},
+              value: _d,
+              // _color,
+              _visible
+            }
+            : {
+              id: _d.id ?? '',
+              label: _d.label ?? '',
+              // tooltipContent: _d.tooltipContent ?? '',
+              data: _d.data ?? {},
+              value: _d.value,
+              // _color,
+              _visible
+            }
+        
+        return datum
+      })
+    })
+
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
+
+    return transposedDataGrid
+  } catch (e) {
+    return []
+  }
+}
+
+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
+}
+
+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
+  })
+}
+
+export const computeGridData: ComputedDataFn<'grid'> = (context) => {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
+
+  let computedDataGrid: ComputedDatumGrid[][]
+
+  try {
+    
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = createTransposedDataGrid(context)
+
+    const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
+
+    const seriesLabels = createGridSeriesLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
+    const groupLabels = createGridGroupLabels({
+      transposedDataGrid,
+      dataFormatter,
+      chartType: 'grid'
+    })
+
+    // 每一個series的valueScale
+    const seriesValueScaleArr = createSeriesValueScaleArr(transposedDataGrid, dataFormatter, layout)
+    
+    const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
+      return seriesValueScaleArr[seriesIndex]!(0)
+    })
+
+    let _index = 0
+    computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
+      return seriesData.map((groupDatum, groupIndex) => {
+        
+        const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
+        // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
+        const groupLabel = groupLabels[groupIndex]
+        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 ?? '',
+          // tooltipContent: groupDatum.tooltipContent ? groupDatum.tooltipContent : dataFormatter.tooltipContentFormat(groupDatum, seriesIndex, groupIndex, context),
+          data: groupDatum.data,
+          value: groupDatum.value,
+          // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
+          gridIndex: 0,
+          // accSeriesIndex: seriesIndex, // 預設為seriesIndex
+          seriesIndex,
+          seriesLabel: seriesLabels[seriesIndex],
+          groupIndex,
+          groupLabel,
+          // color: groupDatum._color,
+          color: seriesColorPredicate(seriesIndex, chartParams),
+          axisX: groupScale(groupIndex),
+          axisY,
+          axisYFromZero: axisY - zeroY,
+          // visible: groupDatum._visible == true && scaleDomainFilter(groupIndex) == true ? true : false // 兩者有一個false即為false
+          visible: groupDatum._visible
+        }
+
+        _index ++
+
+        return computedDatum
+      })
+    })
+
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return computedDataGrid
+}

package/src/grid/createGridContextObserver.ts

@@ -1,124 +1,130 @@
-import { map, shareReplay } from 'rxjs'
-import type { ContextObserverFn } from '../types'
-import {
-  highlightObservable,
-  seriesDataMapObservable,
-  groupDataMapObservable } from '../utils/observables'
-import {
-  gridAxesTransformObservable,
-  gridAxesReverseTransformObservable,
-  gridGraphicTransformObservable,
-  gridGraphicReverseScaleObservable,
-  gridAxesSizeObservable,
-  existSeriesLabelsObservable,
-  gridVisibleComputedDataObservable,
-  isSeriesPositionSeprateObservable,
-  gridContainerObservable } from './gridObservables'
-
-export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
-  
-  const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$
-  }).pipe(
-    shareReplay(1)
-  )
-  
-  const gridContainer$ = gridContainerObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    fullChartParams$: observer.fullChartParams$,
-    layout$: observer.layout$,
-  })
-
-  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$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
-    gridContainer$: gridContainer$,
-    gridAxesTransform$: gridAxesTransform$,
-    gridGraphicTransform$: gridGraphicTransform$,
-  })
-
-  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 existSeriesLabels$ = existSeriesLabelsObservable({
-    computedData$: observer.computedData$,
-  })
-
-  const SeriesDataMap$ = seriesDataMapObservable({
-    datumList$: datumList$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const GroupDataMap$ = groupDataMapObservable({
-    datumList$: datumList$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const visibleComputedData$ = gridVisibleComputedDataObservable({
-    computedData$: observer.computedData$,
-  }).pipe(
-    shareReplay(1)
-  )
-
-
-  return {
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    isSeriesPositionSeprate$,
-    gridContainer$,
-    gridAxesTransform$,
-    gridAxesReverseTransform$,
-    gridGraphicTransform$,
-    gridGraphicReverseScale$,
-    gridAxesSize$,
-    gridHighlight$,
-    existSeriesLabels$,
-    SeriesDataMap$,
-    GroupDataMap$,
-    visibleComputedData$,
-  }
-}
+import { map, shareReplay } from 'rxjs'
+import type { ContextObserverFn } from '../types'
+import {
+  highlightObservable,
+  seriesDataMapObservable,
+  groupDataMapObservable,
+  textSizePxObservable } from '../utils/observables'
+import {
+  gridAxesTransformObservable,
+  gridAxesReverseTransformObservable,
+  gridGraphicTransformObservable,
+  gridGraphicReverseScaleObservable,
+  gridAxesSizeObservable,
+  existSeriesLabelsObservable,
+  gridVisibleComputedDataObservable,
+  isSeriesPositionSeprateObservable,
+  gridContainerObservable } from './gridObservables'
+
+export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
+  
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$
+  }).pipe(
+    shareReplay(1)
+  )
+  
+  const gridContainer$ = gridContainerObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+  })
+
+  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$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+    gridContainer$: gridContainer$,
+    gridAxesTransform$: gridAxesTransform$,
+    gridGraphicTransform$: gridGraphicTransform$,
+  })
+
+  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 existSeriesLabels$ = existSeriesLabelsObservable({
+    computedData$: observer.computedData$,
+  })
+
+  const SeriesDataMap$ = seriesDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const GroupDataMap$ = groupDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = gridVisibleComputedDataObservable({
+    computedData$: observer.computedData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    textSizePx$,
+    isSeriesPositionSeprate$,
+    gridContainer$,
+    gridAxesTransform$,
+    gridAxesReverseTransform$,
+    gridGraphicTransform$,
+    gridGraphicReverseScale$,
+    gridAxesSize$,
+    gridHighlight$,
+    existSeriesLabels$,
+    SeriesDataMap$,
+    GroupDataMap$,
+    visibleComputedData$,
+  }
+}