@orbcharts/core 3.0.0-alpha.26 → 3.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.26",
+  "version": "3.0.0-alpha.27",
   "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/defaults.ts

@@ -2,7 +2,7 @@
 // import { ChartRenderOptions } from './types/Chart'
 import type { ChartType, ChartOptionsPartial } from './types/Chart'
 import type { DataSeries } from './types/DataSeries'
-import type { DataGrid } from './types/DataGrid'
+import type { DataGrid, DataGridDatum } from './types/DataGrid'
 import type { DataMultiGrid } from './types/DataMultiGrid'
 import type { DataMultiValue } from './types/DataMultiValue'
 import type { DataTree } from './types/DataTree'
@@ -197,7 +197,24 @@ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   ...DATA_FORMATTER,
   type: 'multiGrid',
-  multiGrid: [], // 預設無資料，由各plugin定義預設值
+  multiGrid: [
+    {
+      ...DATA_FORMATTER_GRID_DEFAULT
+    },
+    {
+      ...DATA_FORMATTER_GRID_DEFAULT,
+      valueAxis: {
+        ...DATA_FORMATTER_VALUE_AXIS,
+        position: 'right'
+      },
+      colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
+        const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+        // @Q@ 暫時性的邏輯，之後改寫成接續前一個grid的series index
+        const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
+        return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
+      },
+    }
+  ],
   // visibleGroupRange: null,
 }
 
@@ -205,7 +222,7 @@ export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
   ...DATA_FORMATTER,
   type: 'multiValue',
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
-  multiValue: [], // 預設無資料，由各plugin定義預設值
+  multiValue: [],
   xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
   yAxis: { ...DATA_FORMATTER_VALUE_AXIS },
 }

package/src/grid/gridObservables.ts

@@ -127,7 +127,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
       fullDataFormatter: fullDataFormatter$,
       layout: layout$
     }).pipe(
-      takeUntil(destroy$)
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
     ).subscribe(data => {
       const axesTransformData = calcAxesTransform({
         xAxis: data.fullDataFormatter.groupAxis,
@@ -238,7 +239,8 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
       fullDataFormatter: fullDataFormatter$,
       layout: layout$
     }).pipe(
-      takeUntil(destroy$)
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
     ).subscribe(data => {
       const dataAreaTransformData = calcGridDataAreaTransform ({
         data: data.computedData,
@@ -311,7 +313,6 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
       layout: layout$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
       

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -1,12 +1,26 @@
+import {
+  shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
+import { multiGridObservable } from './multiGridObservables'
 
 export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
 
+  const multiGrid$ = multiGridObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    multiGrid$
   }
 }

package/src/multiGrid/multiGridObservables.ts

@@ -0,0 +1,152 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  of,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable, 
+  combineLatestAll} from 'rxjs'
+import type {
+  AxisPosition,
+  ChartType,
+  ChartParams,
+  ComputedDataTypeMap,
+  ComputedDatumTypeMap,
+  ContextObserverFn,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterGrid,
+  DataFormatterContext,
+  DataFormatterValueAxis,
+  DataFormatterGroupAxis,
+  EventMultiGrid,
+  HighlightTarget,
+  Layout,
+  TransformData } from '../types'
+import { getMinAndMaxGrid, transposeData } from '../utils/orbchartsUtils'
+import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from '../utils/d3Utils'
+import {
+  highlightObservable,
+  seriesDataMapObservable,
+  groupDataMapObservable } from '../utils/observables'
+import {
+  gridAxesTransformObservable,
+  gridGraphicTransformObservable,
+  gridAxesOppositeTransformObservable,
+  gridAxesSizeObservable,
+  gridVisibleComputedDataObservable } from '../grid/gridObservables'
+
+export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
+  computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
+  layout$: Observable<Layout>
+  fullChartParams$: Observable<ChartParams>
+  event$: Subject<EventMultiGrid>
+}) => {
+  const destroy$ = new Subject()
+
+  return combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    computedData: computedData$,
+  }).pipe(
+    switchMap(async (d) => d),
+    distinctUntilChanged((a, b) => {
+      return a.fullDataFormatter.multiGrid.length === b.fullDataFormatter.multiGrid.length
+        && a.computedData.length === b.computedData.length
+    }),
+    map(data => {
+      // 每次重新計算時，清除之前的訂閱
+      destroy$.next(undefined)
+
+      return data.fullDataFormatter.multiGrid.map((gridDataFormatter, gridIndex) => {
+
+        // -- 取得該grid的data和dataFormatter
+        const gridDataFormatter$ = of(gridDataFormatter).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+        const gridComputedData$ = of(data.computedData[gridIndex] || []).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+
+        // -- 建立Observables --
+        const gridAxesTransform$ = gridAxesTransformObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridGraphicTransform$ = gridGraphicTransformObservable({
+          computedData$: gridComputedData$,
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridAxesOppositeTransform$ = gridAxesOppositeTransformObservable({
+          gridAxesTransform$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridAxesSize$ = gridAxesSizeObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const datumList$ = gridComputedData$.pipe(
+          map(d => d.flat())
+        ).pipe(
+          shareReplay(1)
+        )
+      
+        const gridHighlight$ = highlightObservable({
+          datumList$,
+          fullChartParams$: fullChartParams$,
+          event$: event$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const SeriesDataMap$ = seriesDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const GroupDataMap$ = groupDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const visibleComputedData$ = gridVisibleComputedDataObservable({
+          computedData$: gridComputedData$,
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        return {
+          gridAxesTransform$,
+          gridGraphicTransform$,
+          gridAxesOppositeTransform$,
+          gridAxesSize$,
+          gridHighlight$,
+          SeriesDataMap$,
+          GroupDataMap$,
+          visibleComputedData$
+        }
+      })
+    })
+  )
+}

package/src/types/ContextObserverMultiGrid.ts

@@ -1,5 +1,19 @@
+import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
+import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
+import type { TransformData } from './TransformData'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
+  multiGrid$: Observable<MultiGridObservableAll[]>
+}
 
+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>
 }

package/src/types/DataFormatterMultiGrid.ts

@@ -1,5 +1,5 @@
 import { DataGridDatum, DataGridValue } from './DataGrid'
-import { DataFormatterGridGrid } from './DataFormatterGrid'
+import { DataFormatterGrid, DataFormatterGridGrid } from './DataFormatterGrid'
 import {
   DataFormatterBase,
   DataFormatterBasePartial,
@@ -9,19 +9,19 @@ import {
 import { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-  multiGrid: Array<DataFormatterMultiGridMultiGrid>
+  multiGrid: Array<DataFormatterGrid>
   // visibleGroupRange: [number, number] | null
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>
+  multiGrid?: Array<Partial<DataFormatterGrid>>
 }
 
-// multiGrid欄位
-export interface DataFormatterMultiGridMultiGrid {
-  grid: DataFormatterGridGrid
-  valueAxis: DataFormatterValueAxis // default: 'left'
-  groupAxis: DataFormatterGroupAxis // default: 'bottom'
-  colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
-  // colors: Colors
-}
+// // multiGrid欄位
+// export interface DataFormatterMultiGridMultiGrid {
+//   grid: DataFormatterGridGrid
+//   valueAxis: DataFormatterValueAxis // default: 'left'
+//   groupAxis: DataFormatterGroupAxis // default: 'bottom'
+//   colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+//   // colors: Colors
+// }