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

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/multiGrid/createMultiGridContextObserver.ts

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

package/src/multiGrid/multiGridObservables.ts

@@ -41,6 +41,7 @@ import {
   gridAxesOppositeTransformObservable,
   gridAxesSizeObservable,
   gridVisibleComputedDataObservable } from '../grid/gridObservables'
+import { DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT } from '../defaults'
 
 export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
@@ -154,26 +155,21 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
   )
 }
 
-interface GridContainerBox {
-  slotIndex: number
-  rowIndex: number
-  columnIndex: number
-  translate: [number, number]
-  scale: [number, number]
-}
+
 
 // 每一個grid的container位置
-export const multiGridContainerObservable = ({ fullDataFormatter$, layout$, fullChartParams$ }: {
+export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
-  layout$: Observable<Layout>
   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 / columnAmount) - (gap / 2)
-    const height = (layout.height / rowAmount) - (gap / 2)
+    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 + (columnIndex * gap)
+    const y = rowIndex * height + (rowIndex * gap)
     const translate: [number, number] = [x, y]
     const scale: [number, number] = [width / layout.width, height / layout.height]
 
@@ -184,14 +180,18 @@ export const multiGridContainerObservable = ({ fullDataFormatter$, layout$, full
   }
 
   const multiGridContainer$ = combineLatest({
+    computedData: computedData$,
     fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
     layout: layout$,
-    fullChartParams: fullChartParams$
   }).pipe(
     switchMap(async (d) => d),
     map(data => {
-      data.fullDataFormatter.container.rowAmount
-      const boxArr: GridContainerBox[] = data.fullDataFormatter.multiGrid.map((grid, gridIndex) => {
+
+      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)

package/src/types/ContextObserverMultiGrid.ts

@@ -5,6 +5,7 @@ import type { TransformData } from './TransformData'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
   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]
 }