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

package/dist/src/types/DataFormatterMultiGrid.d.ts

@@ -3,8 +3,17 @@ import { DataFormatterGrid } from './DataFormatterGrid';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
     visibleFilter: VisibleFilter<'multiGrid'>;
-    multiGrid: Array<DataFormatterGrid>;
+    multiGrid: Array<DataFormatterMultiGridMultiGrid>;
+    container: DataFormatterMultiGridContainer;
 }
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-    multiGrid?: Array<Partial<DataFormatterGrid>>;
+    multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>;
+}
+export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
+    slotIndex: number;
+}
+export interface DataFormatterMultiGridContainer {
+    gap: number;
+    rowAmount: number;
+    columnAmount: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.0-alpha.32",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/base/createBaseChart.ts

@@ -140,8 +140,6 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
         description: preset.description ?? ''
       }
     })(options)
-    
-    
 
     const sharedData$ = chartSubject.data$.pipe(shareReplay(1))
     const shareAndMergedDataFormatter$ = chartSubject.dataFormatter$
@@ -165,7 +163,9 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       .pipe(
         takeUntil(destroy$),
         startWith({}),
-        map((d) => mergeOptionsWithDefault(d, mergedPresetWithDefault.chartParams)),
+        map((d) => {
+          return mergeOptionsWithDefault(d, mergedPresetWithDefault.chartParams)
+        }),
         shareReplay(1)
       )
 
@@ -175,7 +175,9 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       .pipe(
         takeUntil(destroy$),
         startWith({}),
-        map((d: any) => mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT))
+        map((d: any) => {
+          return mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT)
+        })
       )
     mergedPadding$
       .pipe(
@@ -262,13 +264,16 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
               } catch (e) {
                 console.error(e)
                 throw new Error(e)
-              }   
+              }
             }),
             catchError(() => EMPTY)
           )  
       }),
       shareReplay(1)
     )
+
+    // subscribe - computedData組合了所有的chart參數，所以訂閱computedData可以一次訂閱所有的資料流
+    computedData$.subscribe()
     
     // -- plugins --
     const pluginEntityMap: any = {}  // 用於destroy

package/src/defaults.ts

@@ -10,7 +10,7 @@ import type { DataRelationship } from './types/DataRelationship'
 import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis } from './types/DataFormatter'
 import type { DataFormatterSeries } from './types/DataFormatterSeries'
 import type { DataFormatterGrid } from './types/DataFormatterGrid'
-import type { DataFormatterMultiGrid } from './types/DataFormatterMultiGrid'
+import type { DataFormatterMultiGrid, DataFormatterMultiGridMultiGrid } from './types/DataFormatterMultiGrid'
 import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
 import type { DataFormatterTree } from './types/DataFormatterTree'
 import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
@@ -180,24 +180,25 @@ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
   // },
 }
 
+export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
+  ...DATA_FORMATTER_GRID_DEFAULT,
+  slotIndex: 0,
+}
+
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   type: 'multiGrid',
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   multiGrid: [
     {
-      ...DATA_FORMATTER_GRID_DEFAULT
+      ...DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT
     },
-    // // @Q@ 暫時性的邏輯，之後colorsPredicate移除掉後，這邊也要移除（但colors使用的seriesIndex要接續前一組grid）
-    // {
-    //   ...DATA_FORMATTER_GRID_DEFAULT,
-    //   colorsPredicate: (datum, rowIndex, columnIndex, { data, chartParams, dataFormatter }) => {
-    //     const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
-    //     const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
-    //     return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
-    //   },
-    // }
   ],
   // visibleGroupRange: null,
+  container: {
+    gap: 120,
+    rowAmount: 1,
+    columnAmount: 1
+  }
 }
 
 export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -1,11 +1,11 @@
 import {
   shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
-import { multiGridObservable } from './multiGridObservables'
+import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
 
 export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
 
-  const multiGrid$ = multiGridObservable({
+  const multiGridEachDetail$ = multiGridEachDetailObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
@@ -15,12 +15,20 @@ export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({
     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$,
-    multiGrid$
+    multiGridEachDetail$,
+    multiGridContainer$
   }
 }

package/src/multiGrid/multiGridObservables.ts

@@ -24,6 +24,7 @@ import type {
   DataFormatterContext,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
+  DataFormatterMultiGridContainer,
   EventMultiGrid,
   HighlightTarget,
   Layout,
@@ -40,8 +41,9 @@ import {
   gridAxesOppositeTransformObservable,
   gridAxesSizeObservable,
   gridVisibleComputedDataObservable } from '../grid/gridObservables'
+import { DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT } from '../defaults'
 
-export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   layout$: Observable<Layout>
@@ -151,4 +153,60 @@ export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$
       })
     })
   )
+}
+
+
+
+// 每一個grid的container位置
+export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
+  fullChartParams$: Observable<ChartParams>
+  layout$: Observable<Layout>
+}) => {
+  function calcBox (layout: Layout, container: DataFormatterMultiGridContainer, 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
+    }
+  }
+
+  const multiGridContainer$ = combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+
+      const defaultGrid = data.fullDataFormatter.multiGrid[0] ?? DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT
+      
+      const boxArr = data.computedData.map((gridData, gridIndex) => {
+        const grid = data.fullDataFormatter.multiGrid[gridIndex] ?? defaultGrid
+        const columnIndex = grid.slotIndex % data.fullDataFormatter.container.columnAmount
+        const rowIndex = Math.floor(grid.slotIndex / data.fullDataFormatter.container.columnAmount)
+        const {  translate, scale } = calcBox(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+
+        return {
+          slotIndex: grid.slotIndex,
+          rowIndex,
+          columnIndex,
+          translate,
+          scale,
+        }
+      })
+      return boxArr
+    }),
+  )
+
+  return multiGridContainer$
 }

package/src/types/ContextObserverMultiGrid.ts

@@ -4,7 +4,8 @@ import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { TransformData } from './TransformData'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
-  multiGrid$: Observable<MultiGridObservableAll[]>
+  multiGridEachDetail$: Observable<MultiGridObservableAll[]>
+  multiGridContainer$: Observable<GridContainerBox[]>
 }
 
 export interface MultiGridObservableAll {
@@ -16,4 +17,12 @@ export interface MultiGridObservableAll {
   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/DataFormatterMultiGrid.ts

@@ -10,12 +10,25 @@ import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
   visibleFilter: VisibleFilter<'multiGrid'>
-  multiGrid: Array<DataFormatterGrid>
+  multiGrid: Array<DataFormatterMultiGridMultiGrid>
   // visibleGroupRange: [number, number] | null
+  container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  multiGrid?: Array<Partial<DataFormatterGrid>>
+  multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>
+}
+
+// 比grid還多出來的額外參數
+export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
+  slotIndex: number
+}
+
+// container
+export interface DataFormatterMultiGridContainer {
+  gap: number
+  rowAmount: number
+  columnAmount: number
 }
 
 // multiGrid欄位