@orbcharts/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/series/contextObserverCallback.ts

@@ -8,7 +8,7 @@ import { highlightObservable, textSizePxObservable } from '../utils/observables'
 import {
   separateSeriesObservable,
   seriesVisibleComputedDataObservable,
-  seriesComputedLayoutDataObservable,
+  seriesComputedSortedDataObservable,
   seriesLabelsObservable,
   seriesContainerPositionObservable,
   seriesContainerPositionMapObservable
@@ -22,22 +22,28 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
 
   const separateSeries$ = separateSeriesObservable({
     fullDataFormatter$: observer.fullDataFormatter$
-  })
+  }).pipe(
+    shareReplay(1)
+  )
 
   const visibleComputedData$ = seriesVisibleComputedDataObservable({
     computedData$: observer.computedData$,
-  })
+  }).pipe(
+    shareReplay(1)
+  )
 
-  const computedLayoutData$ = seriesComputedLayoutDataObservable({
+  const computedSortedData$ = seriesComputedSortedDataObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$
   }).pipe(
     shareReplay(1)
   )
 
-  const visibleComputedLayoutData$ = seriesVisibleComputedDataObservable({
-    computedData$: computedLayoutData$,
-  })
+  const visibleComputedSortedData$ = seriesVisibleComputedDataObservable({
+    computedData$: computedSortedData$,
+  }).pipe(
+    shareReplay(1)
+  )
 
   const datumList$ = observer.computedData$.pipe(
     map(d => d.flat())
@@ -55,8 +61,9 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
 
   const seriesLabels$ = seriesLabelsObservable({
     computedData$: observer.computedData$,
-  })
-
+  }).pipe(
+    shareReplay(1)
+  )
 
   const SeriesDataMap$ = seriesDataMapObservable({
     datumList$
@@ -88,9 +95,9 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
     layout$: observer.layout$,
     textSizePx$,
     visibleComputedData$,
-    visibleComputedLayoutData$,
+    visibleComputedSortedData$,
     separateSeries$,
-    computedLayoutData$,
+    computedSortedData$,
     seriesHighlight$,
     seriesLabels$,
     SeriesDataMap$,

package/src/tree/dataValidator.ts

@@ -7,7 +7,7 @@ export const dataValidator: DataValidator<'tree'> = (data: DataTypeMap<'tree'>)
     data: {
       toBe: 'DataTreeObj | DataTreeDatum[]',
       // 畢免資料量過大檢查不完，不深度檢查
-      test: (value) => isPlainObject(value) && value.id !== undefined
+      test: (value) => (isPlainObject(value) && value.id !== undefined) || Array.isArray(value)
     }
   })
   return result

package/src/utils/gridObservables.ts

@@ -17,6 +17,7 @@ import type {
   ComputedDataTypeMap,
   ComputedDatumTypeMap,
   ComputedDataGrid,
+  ContainerSize,
   DataTypeMap,
   DataGridDatum,
   ComputedDatumGrid,
@@ -25,17 +26,17 @@ import type {
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
   ComputedLayoutDatumGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   ContainerPositionScaled,
   HighlightTarget,
   Layout,
   TransformData } from '../../lib/core-types'
 import { getMinMaxGrid } from './orbchartsUtils'
 import { createValueToAxisScale, createLabelToAxisScale, createAxisToLabelIndexScale } from './d3Scale'
-import { calcGridContainerLayout } from './orbchartsUtils'
+import { calcContainerPositionScaled } from './orbchartsUtils'
 import { getMinMaxValue } from './orbchartsUtils'
 
-export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+export const gridComputedAxesDataObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
   layout$: Observable<Layout>
@@ -138,9 +139,20 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
     }
   }
 
+  const groupAxisPosition$ = fullDataFormatter$.pipe(
+    map(d => d.groupAxis.position),
+    distinctUntilChanged()
+  )
+
+  const valueAxisPosition$ = fullDataFormatter$.pipe(
+    map(d => d.valueAxis.position),
+    distinctUntilChanged()
+  )
+
   return new Observable(subscriber => {
     combineLatest({
-      fullDataFormatter: fullDataFormatter$,
+      groupAxisPosition: groupAxisPosition$,
+      valueAxisPosition: valueAxisPosition$,
       layout: layout$
     }).pipe(
       takeUntil(destroy$),
@@ -148,8 +160,8 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
     ).subscribe(data => {
       
       const axisSize = calcAxesSize({
-        xAxisPosition: data.fullDataFormatter.groupAxis.position,
-        yAxisPosition: data.fullDataFormatter.valueAxis.position,
+        xAxisPosition: data.groupAxisPosition,
+        yAxisPosition: data.valueAxisPosition,
         width: data.layout.width,
         height: data.layout.height,
       })
@@ -163,6 +175,16 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
   })
 }
 
+export const gridAxesContainerSizeObservable = ({ fullDataFormatter$, containerSize$ }: {
+  containerSize$: Observable<ContainerSize>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+}): Observable<ContainerSize> => {
+  return gridAxesSizeObservable({
+    fullDataFormatter$,
+    layout$: containerSize$ as Observable<Layout>
+  })
+}
+
 // export const gridHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
 //   computedData$: Observable<ComputedDataTypeMap<'grid'>>
 //   fullChartParams$: Observable<ChartParams>
@@ -204,8 +226,8 @@ export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedD
   )
 }
 
-export const gridVisibleComputedLayoutDataObservable = ({ computedLayoutData$ }: { computedLayoutData$: Observable<ComputedLayoutDataGrid> }) => {
-  return computedLayoutData$.pipe(
+export const gridVisibleComputedAxesDataObservable = ({ computedAxesData$ }: { computedAxesData$: Observable<ComputedAxesDataGrid> }) => {
+  return computedAxesData$.pipe(
     map(data => {
       const visibleComputedData = data
         .map(d => {
@@ -236,7 +258,7 @@ export const gridContainerPositionObservable = ({ computedData$, fullDataFormatt
       
       if (data.fullDataFormatter.separateSeries) {
         // -- 依slotIndexes計算 --
-        return calcGridContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
+        return calcContainerPositionScaled(data.layout, data.fullDataFormatter.container, data.computedData.length)
         // return data.computedData.map((seriesData, seriesIndex) => {
         //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
         //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
@@ -251,7 +273,7 @@ export const gridContainerPositionObservable = ({ computedData$, fullDataFormatt
         // })
       } else {
         // -- 無拆分 --
-        const gridContainerPositionArr = calcGridContainerLayout(data.layout, data.fullDataFormatter.container, 1)
+        const gridContainerPositionArr = calcContainerPositionScaled(data.layout, data.fullDataFormatter.container, 1)
         return data.computedData.map((d, i) => gridContainerPositionArr[0]) // 每個series相同位置
         // const columnIndex = 0
         // const rowIndex = 0

package/src/utils/index.ts

@@ -1,10 +1,10 @@
 export * from './commonUtils'
 export * from './d3Scale'
 export * from './gridObservables'
-export * from './multiGridObservables'
+// export * from './multiGridObservables'
 // export * from './multiValueObservables'
 export * from './observables'
 export * from './orbchartsUtils'
 // export * from './relationshipObservables'
-export * from './seriesObservables'
-export * from './treeObservables'
+// export * from './seriesObservables'
+// export * from './treeObservables'

package/src/utils/multiGridObservables.ts

@@ -18,6 +18,7 @@ import type {
   ComputedDataTypeMap,
   ComputedDataGrid,
   ContextObserverMultiGridDetail,
+  ContainerSize,
   DataTypeMap,
   DataFormatterTypeMap,
   DataFormatterGrid,
@@ -32,11 +33,12 @@ import {
   seriesDataMapObservable,
   groupDataMapObservable } from './observables'
 import {
-  gridComputedLayoutDataObservable,
+  gridComputedAxesDataObservable,
   gridAxesSizeObservable,
+  gridAxesContainerSizeObservable,
   gridSeriesLabelsObservable,
   gridVisibleComputedDataObservable,
-  gridVisibleComputedLayoutDataObservable,
+  gridVisibleComputedAxesDataObservable,
   // isSeriesSeprateObservable,
   gridContainerPositionObservable,
   computedStackedDataObservables,
@@ -48,30 +50,31 @@ import {
   gridGraphicReverseScaleObservable,
 } from './gridObservables'
 import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
-import { calcGridContainerLayout } from './orbchartsUtils'
+import { calcContainerPositionScaled } from './orbchartsUtils'
 
 // 每一個grid計算出來的所有Observable
-export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$, containerSize$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   layout$: Observable<Layout>
   fullChartParams$: Observable<ChartParams>
   event$: Subject<EventMultiGrid>
+  containerSize$: Observable<ContainerSize>
 }): Observable<ContextObserverMultiGridDetail[]> => {
 
   const destroy$ = new Subject()
 
-  // highlight全部grid
-  const allGridHighlight$ = highlightObservable({
-    datumList$: computedData$.pipe(
-      map(d => d.flat().flat()),
-      shareReplay(1)
-    ),
-    fullChartParams$: fullChartParams$,
-    event$: event$
-  }).pipe(
-    shareReplay(1)
-  )
+  // // highlight全部grid
+  // const allGridHighlight$ = highlightObservable({
+  //   datumList$: computedData$.pipe(
+  //     map(d => d.flat().flat()),
+  //     shareReplay(1)
+  //   ),
+  //   fullChartParams$: fullChartParams$,
+  //   event$: event$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
 
   const multiGridContainer$ = multiGridContainerObservable({
     computedData$: computedData$,
@@ -146,9 +149,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           takeUntil(destroy$),
           shareReplay(1)
         )
-        
-        
-    
+
         const gridAxesSize$ = gridAxesSizeObservable({
           fullDataFormatter$: gridDataFormatter$,
           layout$: layout$
@@ -156,6 +157,13 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           takeUntil(destroy$),
           shareReplay(1)
         )
+        
+        const gridAxesContainerSize$ = gridAxesContainerSizeObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          containerSize$: containerSize$
+        }).pipe(
+          shareReplay(1)
+        )
     
         const datumList$ = gridComputedData$.pipe(
           map(d => d.flat())
@@ -200,7 +208,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           shareReplay(1)
         )
 
-        const computedLayoutData$ = gridComputedLayoutDataObservable({
+        const computedAxesData$ = gridComputedAxesDataObservable({
           computedData$: gridComputedData$,
           fullDataFormatter$: gridDataFormatter$,
           layout$: layout$,
@@ -209,8 +217,8 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           shareReplay(1)
         )
     
-        const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
-          computedLayoutData$: computedLayoutData$,
+        const visibleComputedAxesData$ = gridVisibleComputedAxesDataObservable({
+          computedAxesData$: computedAxesData$,
         }).pipe(
           takeUntil(destroy$),
           shareReplay(1)
@@ -276,15 +284,16 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           isSeriesSeprate$,
           gridContainerPosition$,
           gridAxesSize$,
-          gridHighlight$: allGridHighlight$,
+          gridAxesContainerSize$,
+          // gridHighlight$: allGridHighlight$,
           seriesLabels$,
           SeriesDataMap$,
           GroupDataMap$,
           dataFormatter$: gridDataFormatter$,
           computedData$: gridComputedData$,
-          computedLayoutData$,
+          computedAxesData$,
           visibleComputedData$,
-          visibleComputedLayoutData$,
+          visibleComputedAxesData$,
           computedStackedData$,
           groupScaleDomainValue$,
           filteredMinMaxValue$,
@@ -325,7 +334,7 @@ export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$
         return acc + gridSlotAmount
       }, 0) || 1
 
-      const gridContainerLayout = calcGridContainerLayout(data.layout, data.fullDataFormatter.container, slotAmount)
+      const gridContainerLayout = calcContainerPositionScaled(data.layout, data.fullDataFormatter.container, slotAmount)
 
       let accGridSlotIndex = 0
       const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {