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

package/src/defaults.ts

@@ -7,7 +7,7 @@ import type { DataMultiGrid } from './types/DataMultiGrid'
 import type { DataMultiValue } from './types/DataMultiValue'
 import type { DataTree } from './types/DataTree'
 import type { DataRelationship } from './types/DataRelationship'
-import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis } from './types/DataFormatter'
+import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContainer } from './types/DataFormatter'
 import type { DataFormatterSeries } from './types/DataFormatterSeries'
 import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
 import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
@@ -43,16 +43,9 @@ export const PADDING_DEFAULT: Padding = {
   left: 60
 }
 
-// export const HIGHLIGHT_DEFAULT: HighlightDefault = {
-//   // trigger: 'datum',
-//   id: null,
-//   label: null
-// }
-
 export const CHART_PARAMS_DEFAULT: ChartParams = {
   padding: PADDING_DEFAULT,
   highlightTarget: 'datum',
-  // highlightDefault: HIGHLIGHT_DEFAULT,
   highlightDefault: null,
   colorScheme: 'light',
   colors: {
@@ -104,45 +97,36 @@ export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
 
 // -- Data Formatter --
 
-// 基本欄位
-// export const DATA_FORMATTER: DataFormatterBase<ChartType> = {
-//   // ...GLOBAL_DEFAULT,
-//   type: ('' as any), // 後面需複蓋掉否則會有問題
-// }
-// 有value
-// export const DATA_FORMATTER_WITH_VALUE: DataFormatterValue = {
-//   valueFormat: ',.0f'
-// }
-// 有axis
-// export const DATA_FORMATTER_WITH_AXIS: DataFormatterAxis = {
-//   // domainMinValue: 0,
-//   // domainMaxValue: undefined,
-//   // domainMinRange: undefined,
-//   // domainMaxRange: 0.9
-//   valueDomain: [0, 'auto'],
-//   valueRange: [0, 0.9]
-// }
-
-export const DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
+export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
   position: 'left',
   scaleDomain: [0, 'auto'],
   scaleRange: [0, 0.9],
   label: '',
 }
 
-export const DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
+export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
   position: 'bottom',
   scaleDomain: [0, 'auto'],
   scalePadding: 0.5,
   label: ''
 }
 
+export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
+  gap: 120,
+  rowAmount: 1,
+  columnAmount: 1
+}
+
 export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
-  // ...DATA_FORMATTER_WITH_VALUE,
   type: 'series',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // unitLabel: '',
+  visibleFilter: (datum, context) => true,
+  sort: null,
   seriesLabels: [],
+  container: {
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
+  },
+  separateSeries: false,
+  sumSeries: false
   // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
   //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
   //     ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
@@ -156,38 +140,28 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   //       rowIndex % chartParams.colors[chartParams.colorScheme].series.length
   //     ]
   // },
-  sort: null,
 }
 
 export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  gridData: {
-    seriesDirection: 'row',
-    rowLabels: [],
-    columnLabels: [],
-  },
-  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS },
-  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS, },
-  slotIndex: 0,
-  seriesSlotIndexes: null
+  seriesDirection: 'row',
+  rowLabels: [],
+  columnLabels: [],
+  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
+  separateSeries: false,
+  // slotIndex: 0,
+  // seriesSlotIndexes: null
 }
 
 export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
-  // ...DATA_FORMATTER_WITH_VALUE,
   type: 'grid',
+  visibleFilter: (datum, context) => true,
   grid: {
     ...DATA_FORMATTER_GRID_GRID_DEFAULT
   },
   container: {
-    gap: 120,
-    rowAmount: 1,
-    columnAmount: 1
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
   }
-  // visibleGroupRange: null,
-  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
-  //   const seriesIndex = dataFormatter.grid.seriesDirection === 'row' ? rowIndex : columnIndex
-  //   return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
-  // },
 }
 
 // export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
@@ -202,38 +176,38 @@ export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid
 
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   type: 'multiGrid',
-  // visibleFilter: (datum, rowIndex, columnIndex, context) => true,
+  visibleFilter: (datum, context) => true,
   gridList: [
     {
       ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
     },
   ],
+  separateGrid: false,
   container: {
-    gap: 120,
-    rowAmount: 1,
-    columnAmount: 1
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
   }
 }
 
 export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
   type: 'multiValue',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
+  visibleFilter: (datum, context) => true,
+  categoryLabels: [],
   multiValue: [],
-  xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
-  yAxis: { ...DATA_FORMATTER_VALUE_AXIS },
+  xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
 }
 
 export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
   type: 'tree',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
+  visibleFilter: (datum, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
   categoryLabels: []
 }
 
 export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
   type: 'relationship',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
+  visibleFilter: (datum, context) => true,
+  categoryLabels: []
   // node: {
   //   // labelFormat: (node: any) => (node && node.label) ?? '',
   //   descriptionFormat: (node: any) => (node && node.label) ?? ''
@@ -244,5 +218,3 @@ export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
   // },
 }
 
-// -- Render Data --
-

package/src/grid/computeGridData.ts

@@ -2,20 +2,15 @@ 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 { DataFormatterGrid, DataFormatterGridGrid } 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
+// 統一 DataGrid 格式、並欄列資料轉置為一致方式
+export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
+  // const { data = [], dataFormatter, chartParams } = context
   if (!data.length) {
     return []
   }
@@ -38,40 +33,28 @@ export function createTransposedDataGrid (context: DataFormatterContext<'grid'>)
     })
 
     // 完整的資料格式
-    const dataGrid: DataGridDatumTemp[][] = fullData.map((d, i) => {
+    const dataGrid: DataGridDatum[][] = 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
+        const datum: DataGridDatum = _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
@@ -79,7 +62,7 @@ export function createTransposedDataGrid (context: DataFormatterContext<'grid'>)
     })
 
     // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
+    const transposedDataGrid = transposeData(dataFormatterGrid.seriesDirection, dataGrid)
 
     return transposedDataGrid
   } catch (e) {
@@ -87,43 +70,8 @@ export function createTransposedDataGrid (context: DataFormatterContext<'grid'>)
   }
 }
 
-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
+  const { data = [], dataFormatter, chartParams } = context
   if (!data.length) {
     return []
   }
@@ -133,63 +81,45 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
   try {
     
     // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = createTransposedDataGrid(context)
-
-    const groupScale = createGroupScale(transposedDataGrid, dataFormatter, layout)
+    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter.grid)
 
     const seriesLabels = createGridSeriesLabels({
       transposedDataGrid,
-      dataFormatter,
+      dataFormatterGrid: dataFormatter.grid,
       chartType: 'grid'
     })
     const groupLabels = createGridGroupLabels({
       transposedDataGrid,
-      dataFormatter,
+      dataFormatterGrid: dataFormatter.grid,
       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
+          visible: true // 先給一個預設值
         }
 
+        // 先建立物件再計算visible欄位
+        computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
+
         _index ++
 
         return computedDatum
@@ -197,7 +127,6 @@ export const computeGridData: ComputedDataFn<'grid'> = (context) => {
     })
 
   } catch (e) {
-    // console.error(e)
     throw Error(e)
   }
 

package/src/grid/createGridContextObserver.ts

@@ -6,15 +6,17 @@ import {
   groupDataMapObservable,
   textSizePxObservable } from '../utils/observables'
 import {
+  gridComputedLayoutDataObservable,
   gridAxesTransformObservable,
   gridAxesReverseTransformObservable,
   gridGraphicTransformObservable,
   gridGraphicReverseScaleObservable,
   gridAxesSizeObservable,
-  existSeriesLabelsObservable,
+  seriesLabelsObservable,
   gridVisibleComputedDataObservable,
-  isSeriesPositionSeprateObservable,
-  gridContainerObservable } from './gridObservables'
+  gridVisibleComputedLayoutDataObservable,
+  // isSeriesSeprateObservable,
+  gridContainerPositionObservable } from './gridObservables'
 
 export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
   
@@ -22,17 +24,16 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
-  const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$
-  }).pipe(
-    shareReplay(1)
-  )
+  // const isSeriesSeprate$ = isSeriesSeprateObservable({
+  //   computedData$: observer.computedData$,
+  //   fullDataFormatter$: observer.fullDataFormatter$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
   
-  const gridContainer$ = gridContainerObservable({
+  const gridContainerPosition$ = gridContainerPositionObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
-    fullChartParams$: observer.fullChartParams$,
     layout$: observer.layout$,
   })
 
@@ -58,7 +59,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
   )
 
   const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
-    gridContainer$: gridContainer$,
+    gridContainerPosition$: gridContainerPosition$,
     gridAxesTransform$: gridAxesTransform$,
     gridGraphicTransform$: gridGraphicTransform$,
   })
@@ -84,7 +85,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
-  const existSeriesLabels$ = existSeriesLabelsObservable({
+  const seriesLabels$ = seriesLabelsObservable({
     computedData$: observer.computedData$,
   })
 
@@ -100,12 +101,26 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     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)
+  )
+
 
   return {
     fullParams$: observer.fullParams$,
@@ -114,17 +129,19 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
     textSizePx$,
-    isSeriesPositionSeprate$,
-    gridContainer$,
+    // isSeriesSeprate$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridAxesReverseTransform$,
     gridGraphicTransform$,
     gridGraphicReverseScale$,
     gridAxesSize$,
     gridHighlight$,
-    existSeriesLabels$,
+    seriesLabels$,
     SeriesDataMap$,
     GroupDataMap$,
+    computedLayoutData$,
     visibleComputedData$,
+    visibleComputedLayoutData$,
   }
 }