@orbcharts/core 3.0.0-alpha.47 → 3.0.0-alpha.48

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

@@ -7,6 +7,7 @@ export interface ContextObserverGrid<PluginParams> extends ContextObserverBase<'
     textSizePx$: Observable<number>;
 }
 export interface ContextObserverGridDetail {
+    isSeriesSeprate$: Observable<boolean>;
     gridContainerPosition$: Observable<GridContainerPosition[]>;
     gridAxesTransform$: Observable<TransformData>;
     gridAxesReverseTransform$: Observable<TransformData>;
@@ -23,6 +24,7 @@ export interface ContextObserverGridDetail {
     computedLayoutData$: Observable<ComputedLayoutDataGrid>;
     visibleComputedData$: Observable<ComputedDataGrid>;
     visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>;
+    computedStackedData$: Observable<ComputedDataGrid>;
 }
 export type ComputedLayoutDataGrid = ComputedLayoutDatumGrid[][];
 export interface ComputedLayoutDatumGrid extends ComputedDatumGrid {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.47",
+  "version": "3.0.0-alpha.48",
   "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/grid/createGridContextObserver.ts

@@ -1,4 +1,4 @@
-import { map, shareReplay } from 'rxjs'
+import { map, shareReplay, distinctUntilChanged } from 'rxjs'
 import type { ContextObserverFn } from '../types'
 import {
   highlightObservable,
@@ -16,7 +16,8 @@ import {
   gridVisibleComputedDataObservable,
   gridVisibleComputedLayoutDataObservable,
   // isSeriesSeprateObservable,
-  gridContainerPositionObservable } from './gridObservables'
+  gridContainerPositionObservable,
+  computedStackedDataObservables } from './gridObservables'
 
 export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
   
@@ -24,12 +25,11 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
-  // const isSeriesSeprate$ = isSeriesSeprateObservable({
-  //   computedData$: observer.computedData$,
-  //   fullDataFormatter$: observer.fullDataFormatter$
-  // }).pipe(
-  //   shareReplay(1)
-  // )
+  const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
+    map(d => d.grid.separateSeries),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
   
   const gridContainerPosition$ = gridContainerPositionObservable({
     computedData$: observer.computedData$,
@@ -121,6 +121,13 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
+  const computedStackedData$ = computedStackedDataObservables({
+    computedData$: observer.computedData$,
+    isSeriesSeprate$: isSeriesSeprate$
+  }).pipe(
+    shareReplay(1)
+  )
+
 
   return {
     fullParams$: observer.fullParams$,
@@ -129,7 +136,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
     textSizePx$,
-    // isSeriesSeprate$,
+    isSeriesSeprate$,
     gridContainerPosition$,
     gridAxesTransform$,
     gridAxesReverseTransform$,
@@ -143,5 +150,6 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     computedLayoutData$,
     visibleComputedData$,
     visibleComputedLayoutData$,
+    computedStackedData$,
   }
 }

package/src/grid/gridObservables.ts

@@ -1,6 +1,7 @@
 import {
   combineLatest,
   distinctUntilChanged,
+  iif,
   filter,
   map,
   merge,
@@ -15,6 +16,7 @@ import type {
   ChartParams,
   ComputedDataTypeMap,
   ComputedDatumTypeMap,
+  ComputedDataGrid,
   ContextObserverFn,
   DataTypeMap,
   DataGridDatum,
@@ -504,23 +506,6 @@ export const gridVisibleComputedLayoutDataObservable = ({ computedLayoutData$ }:
   )
 }
 
-// export const isSeriesSeprateObservable = ({ computedData$, fullDataFormatter$ }: {
-//   computedData$: Observable<ComputedDataTypeMap<'grid'>>
-//   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
-// }) => {
-//   return combineLatest({
-//     computedData: computedData$,
-//     fullDataFormatter: fullDataFormatter$
-//   }).pipe(
-//     map(data => {
-//       return data.fullDataFormatter.grid.seriesSlotIndexes && data.fullDataFormatter.grid.seriesSlotIndexes.length === data.computedData.length
-//         ? true
-//         : false
-//     }),
-//     distinctUntilChanged()
-//   )
-// }
-
 // 所有container位置（對應series）
 export const gridContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
@@ -572,4 +557,45 @@ export const gridContainerPositionObservable = ({ computedData$, fullDataFormatt
   )
 
   return gridContainerPosition$
+}
+
+// 將原本的value全部替換成加總後的value
+export const computedStackedDataObservables = ({ isSeriesSeprate$, computedData$ }: {
+  isSeriesSeprate$: Observable<boolean>
+  computedData$: Observable<ComputedDataGrid>
+}): Observable<ComputedDataGrid> => {
+  const stackedData$: Observable<ComputedDataGrid> = computedData$.pipe(
+    map(data => {
+      // 將同一group的value加總起來
+      const stackedValue = new Array(data[0] ? data[0].length : 0)
+        .fill(null)
+        .map((_, i) => {
+          return data.reduce((prev, current) => {
+            if (current && current[i]) {
+              const currentValue = current[i].value == null || current[i].visible == false
+                ? 0
+                : current[i].value!
+              return prev + currentValue
+            }
+            return prev
+          }, 0)
+        })
+      // 將原本的value全部替換成加總後的value
+      const computedData = data.map((series, seriesIndex) => {
+        return series.map((d, i) => {
+          return {
+            ...d,
+            value: stackedValue[i],
+          }
+        })
+      })
+      return computedData
+    }),
+  )
+
+  return isSeriesSeprate$.pipe(
+    switchMap(isSeriesSeprate => {
+      return iif(() => isSeriesSeprate, computedData$, stackedData$)
+    })
+  )
 }

package/src/multiGrid/multiGridObservables.ts

@@ -41,7 +41,7 @@ import {
   gridVisibleComputedDataObservable,
   gridVisibleComputedLayoutDataObservable,
   // isSeriesSeprateObservable,
-  gridContainerPositionObservable } from '../grid/gridObservables'
+  computedStackedDataObservables } from '../grid/gridObservables'
 import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
 import { calcGridContainerLayout } from '../utils/orbchartsUtils'
 
@@ -131,6 +131,12 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
         //   shareReplay(1)
         // )
 
+        const isSeriesSeprate$ = gridDataFormatter$.pipe(
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         const gridContainerPosition$ = of(data.multiGridContainer[gridIndex]).pipe(
           takeUntil(destroy$),
           shareReplay(1)
@@ -217,7 +223,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           takeUntil(destroy$),
           shareReplay(1)
         )
-    
+
         const computedLayoutData$ = gridComputedLayoutDataObservable({
           computedData$: gridComputedData$,
           fullDataFormatter$: gridDataFormatter$,
@@ -234,7 +240,15 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           shareReplay(1)
         )
 
-        return <ContextObserverMultiGridDetail>{
+        const computedStackedData$ = computedStackedDataObservables({
+          computedData$: gridComputedData$,
+          isSeriesSeprate$: isSeriesSeprate$
+        }).pipe(
+          shareReplay(1)
+        )
+
+        return {
+          isSeriesSeprate$,
           gridContainerPosition$,
           gridAxesTransform$,
           gridAxesReverseTransform$,
@@ -250,7 +264,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           computedLayoutData$,
           visibleComputedData$,
           visibleComputedLayoutData$,
-          // isSeriesSeprate$
+          computedStackedData$
         }
       })
     })

package/src/types/ContextObserverGrid.ts

@@ -9,6 +9,7 @@ ContextObserverBase<'grid', PluginParams>, ContextObserverGridDetail {
 }
 
 export interface ContextObserverGridDetail {
+  isSeriesSeprate$: Observable<boolean>
   gridContainerPosition$: Observable<GridContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
   gridAxesReverseTransform$: Observable<TransformData>
@@ -22,7 +23,7 @@ export interface ContextObserverGridDetail {
   computedLayoutData$: Observable<ComputedLayoutDataGrid>
   visibleComputedData$: Observable<ComputedDataGrid>
   visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
-  // isSeriesSeprate$: Observable<boolean>
+  computedStackedData$: Observable<ComputedDataGrid>
 }
 
 export type ComputedLayoutDataGrid = ComputedLayoutDatumGrid[][]