@orbcharts/core 3.0.0-alpha.32 → 3.0.0-alpha.33

package/src/types/ContextObserverGrid.ts

@@ -3,14 +3,32 @@ import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { TransformData } from './TransformData'
 
-export interface ContextObserverGrid<PluginParams> extends ContextObserverBase<'grid', PluginParams> {
+export interface ContextObserverGrid<PluginParams>
+  extends
+    ContextObserverBase<'grid', PluginParams>,
+    ContextObserverGridDetail {
+  
+    }
+
+export interface ContextObserverGridDetail {
+  gridContainer$: Observable<ContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
+  gridAxesReverseTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
-  gridAxesOppositeTransform$: Observable<TransformData>
+  gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{ width: number; height: number; }>
   gridHighlight$: Observable<string[]>
+  existedSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   visibleComputedData$: Observable<ComputedDataGrid>
+  isSeriesPositionSeprate$: Observable<boolean>
 }
 
+export interface ContainerPosition {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  translate: [number, number]
+  scale: [number, number]
+}

package/src/types/ContextObserverMultiGrid.ts

@@ -1,28 +1,27 @@
 import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
+import type { ContainerPosition } from './ContextObserverGrid'
 import type { TransformData } from './TransformData'
+import type { ContextObserverGridDetail } from './ContextObserverGrid'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
-  multiGridEachDetail$: Observable<MultiGridObservableAll[]>
-  multiGridContainer$: Observable<GridContainerBox[]>
+  multiGridEachDetail$: Observable<ContextObserverGridDetail[]>
+  multiGridContainer$: Observable<ContainerPosition[][]>
 }
 
-export interface MultiGridObservableAll {
-  gridAxesTransform$: Observable<TransformData>
-  gridGraphicTransform$: Observable<TransformData>
-  gridAxesOppositeTransform$: Observable<TransformData>
-  gridAxesSize$: Observable<{ width: number; height: number; }>
-  gridHighlight$: Observable<string[]>
-  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  visibleComputedData$: Observable<ComputedDataGrid>
-}
+// export interface MultiGridObservableAll {
+//   isSeriesPositionSeprate$: Observable<boolean>
+//   gridContainer$: Observable<ContainerPosition[]>
+//   gridAxesTransform$: Observable<TransformData>
+//   gridAxesReverseTransform$: Observable<TransformData>
+//   gridGraphicTransform$: Observable<TransformData>
+//   gridGraphicReverseScale$: Observable<[number, number][]>
+//   gridAxesSize$: Observable<{ width: number; height: number; }>
+//   gridHighlight$: Observable<string[]>
+//   existedSeriesLabels$: Observable<string[]>
+//   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+//   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+//   visibleComputedData$: Observable<ComputedDataGrid>
+// }
 
-export interface GridContainerBox {
-  slotIndex: number
-  rowIndex: number
-  columnIndex: number
-  translate: [number, number]
-  scale: [number, number]
-}

package/src/types/DataFormatterGrid.ts

@@ -2,34 +2,49 @@ import type { DataGridDatum, DataGridValue } from './DataGrid'
 import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter'
 // import type { AxisPosition } from './Axis'
 
-export type SeriesType = 'row' | 'column' // default: 'row'
+export type SeriesDirection = 'row' | 'column' // default: 'row'
 
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
-  visibleFilter: VisibleFilter<'grid'>
   grid: DataFormatterGridGrid
-  valueAxis: DataFormatterValueAxis
-  groupAxis: DataFormatterGroupAxis
+  container: DataFormatterGridContainer
   // visibleGroupRange: [number, number] | null
   // colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
 }
 
 export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
-  grid?: Partial<DataFormatterGridGrid>
+  grid?: DataFormatterGridGridPartial
+  container?: Partial<DataFormatterGridContainer>
+}
+
+export interface DataFormatterGridGrid {
+  visibleFilter: VisibleFilter<'grid'>
+  gridData: DataFormatterGridGridData
+  valueAxis: DataFormatterValueAxis
+  groupAxis: DataFormatterGroupAxis
+  slotIndex: number | null
+  seriesSlotIndexes: number[] | null
+}
+
+export interface DataFormatterGridGridPartial {
+  visibleFilter?: VisibleFilter<'grid'>
+  gridData?: Partial<DataFormatterGridGridData>
   valueAxis?: Partial<DataFormatterValueAxis>
   groupAxis?: Partial<DataFormatterGroupAxis>
-  // colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+  slotIndex?: number | null
+  seriesSlotIndexes?: number[] | null
+}
+
+export interface DataFormatterGridContainer {
+  gap: number
+  rowAmount: number
+  columnAmount: number
 }
 
 // grid欄位
-export interface DataFormatterGridGrid {
-  // labelFormat: (datum: DataGridDatum) => string
-  // rowUnitLabel: string
+export interface DataFormatterGridGridData {
+  seriesDirection: SeriesDirection
   rowLabels: string[]
-  // rowLabelFormat: string | ((text: any) => string)
-  // columnUnitLabel: string
   columnLabels: string[]
-  // columnLabelFormat: string | ((text: any) => string)
-  seriesType: SeriesType
 }
 
 // const test: DataFormatterGridPartial = {

package/src/types/DataFormatterMultiGrid.ts

@@ -1,5 +1,5 @@
 import type { VisibleFilter } from './DataFormatter'
-import type { DataFormatterGrid } from './DataFormatterGrid'
+import type { DataFormatterGridGrid, DataFormatterGridGridPartial, DataFormatterGridContainer } from './DataFormatterGrid'
 import type {
   DataFormatterBase,
   DataFormatterBasePartial,
@@ -10,30 +10,32 @@ import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
   visibleFilter: VisibleFilter<'multiGrid'>
-  multiGrid: Array<DataFormatterMultiGridMultiGrid>
-  // visibleGroupRange: [number, number] | null
+  gridList: Array<DataFormatterGridGrid>
   container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>
+  visibleFilter?: VisibleFilter<'multiGrid'>
+  gridList?: Array<DataFormatterGridGridPartial>
+  container?: Partial<DataFormatterMultiGridContainer>
 }
 
-// 比grid還多出來的額外參數
-export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
-  slotIndex: number
+export interface DataFormatterMultiGridGrid extends DataFormatterGridGrid {
+
+}
+
+export interface DataFormatterMultiGridGridPartial extends DataFormatterGridGridPartial {
+
 }
 
 // container
-export interface DataFormatterMultiGridContainer {
-  gap: number
-  rowAmount: number
-  columnAmount: number
+export interface DataFormatterMultiGridContainer extends DataFormatterGridContainer {
+
 }
 
 // multiGrid欄位
 // export interface DataFormatterMultiGridMultiGrid {
-//   grid: DataFormatterGridGrid
+//   grid: DataFormatterGridGridData
 //   valueAxis: DataFormatterValueAxis // default: 'left'
 //   groupAxis: DataFormatterGroupAxis // default: 'bottom'
 //   colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string

package/src/utils/orbchartsUtils.ts

@@ -6,11 +6,12 @@ import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/Data
 import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
 import type { DataMultiGrid } from '../types/DataMultiGrid'
 import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
-import type { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid'
 import type { ComputedDatumSeriesValue } from '../types/ComputedData'
 import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
 import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
+import type { Layout } from '../types/Layout'
 // import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
 import { isObject } from './commonUtils'
 
@@ -43,9 +44,9 @@ export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, cha
   chartType?: ChartType
   gridIndex?: number
 }) {
-  const labels = dataFormatter.grid.seriesType === 'row'
-    ? dataFormatter.grid.rowLabels
-    : dataFormatter.grid.columnLabels
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.rowLabels
+    : dataFormatter.grid.gridData.columnLabels
   return transposedDataGrid.map((_, rowIndex) => {
     return labels[rowIndex] != null
       ? labels[rowIndex]
@@ -62,9 +63,9 @@ export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, char
   if (transposedDataGrid[0] == null) {
     return []
   }
-  const labels = dataFormatter.grid.seriesType === 'row'
-    ? dataFormatter.grid.columnLabels
-    : dataFormatter.grid.rowLabels
+  const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
+    ? dataFormatter.grid.gridData.columnLabels
+    : dataFormatter.grid.gridData.rowLabels
   return transposedDataGrid[0].map((_, columnLabels) => {
     return labels[columnLabels] != null
       ? labels[columnLabels]
@@ -146,9 +147,9 @@ export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number
 
 // }
 
-// 轉置成seriesType為main的陣列格式
-export function transposeData<T> (seriesType: SeriesType, data: T[][]): T[][] {
-  if (seriesType === 'row') {
+// 轉置成seriesDirection為main的陣列格式
+export function transposeData<T> (seriesDirection: SeriesDirection, data: T[][]): T[][] {
+  if (seriesDirection === 'row') {
     return Object.assign([], data)
   }
   // 取得原始陣列的維度
@@ -179,6 +180,21 @@ export function seriesColorPredicate (seriesIndex: number, chartParams: ChartPar
     ]
 }
 
+export function calcGridContainerPosition (layout: Layout, container: DataFormatterGridContainer, rowIndex: number, columnIndex: number) {
+  const { gap, rowAmount, columnAmount } = container
+  const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
+  const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
+  const x = columnIndex * width + (columnIndex * gap)
+  const y = rowIndex * height + (rowIndex * gap)
+  const translate: [number, number] = [x, y]
+  const scale: [number, number] = [width / layout.width, height / layout.height]
+
+  return {
+    translate,
+    scale
+  }
+}
+
 // // multiGrid datum color
 // export function multiGridColorPredicate ({ seriesIndex, groupIndex, data, chartParams }: {
 //   seriesIndex: number