@orbcharts/plugins-basic 3.0.0-alpha.44 → 3.0.0-alpha.46

package/src/multiGrid/plugins/MultiDots.ts

@@ -5,7 +5,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
 import { createBaseDots } from '../../base/BaseDots'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiDots'
@@ -17,7 +17,7 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -33,9 +33,11 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
 
         unsubscribeFnArr[i] = createBaseDots(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,
@@ -45,7 +47,7 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
           gridGraphicReverseScale$: d.gridGraphicReverseScale$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -35,7 +35,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
 
   const seriesList$ = combineLatest({
     fullParams: observer.fullParams$,
-    multiGrid: observer.multiGridEachDetail$,
+    // multiGrid: observer.multiGridEachDetail$,
     computedData: observer.computedData$,
   }).pipe(
     takeUntil(destroy$),

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_GROUP_AXIS_PARAMS } from '../defaults'
 import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiGroupAxis'
@@ -17,7 +22,7 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,17 +36,24 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseGroupAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/multiGrid/plugins/MultiLineAreas.ts

@@ -6,7 +6,7 @@ import {
 
 import { DEFAULT_MULTI_LINE_AREAS_PARAMS } from '../defaults'
 import { createBaseLineAreas } from '../../base/BaseLineAreas'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLineAreas'
@@ -18,7 +18,7 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -34,18 +34,21 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
 
         unsubscribeFnArr[i] = createBaseLineAreas(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedData$: d.computedData$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedData$: d.visibleComputedData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           layout$: observer.layout$,
           event$: subject.event$ as Subject<any>,
         })

package/src/multiGrid/plugins/MultiLines.ts

@@ -6,7 +6,7 @@ import {
 
 import { DEFAULT_MULTI_LINES_PARAMS } from '../defaults'
 import { createBaseLines } from '../../base/BaseLines'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLines'
@@ -18,7 +18,7 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -34,18 +34,21 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
 
         unsubscribeFnArr[i] = createBaseLines(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedData$: d.computedData$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedData$: d.visibleComputedData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_VALUE_AXIS_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiValueAxis'
@@ -17,7 +22,7 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,17 +36,24 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -5,18 +5,19 @@ import {
   switchMap,
   combineLatest,
   takeUntil,
+  distinctUntilChanged,
+  shareReplay,
   iif,
   Observable,
   Subject } from 'rxjs'
-import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
+import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '@orbcharts/core'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-// @Q@
-import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
+import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
 
 const pluginName = 'OverlappingValueAxes'
 
@@ -40,43 +41,41 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
   // 為了要反轉第二個valueAxis的位置所以要重新計算
   const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
     firstGridIndex: firstGridIndex$,
-    secondGridIndex: secondGridIndex$
+    secondGridIndex: secondGridIndex$,
+    fullDataFormatter: observer.fullDataFormatter$,
   }).pipe(
     takeUntil(destroy$),
-    switchMap(data => {
-      return observer.fullDataFormatter$.pipe(
-        takeUntil(destroy$),
-        map(fullDataFormatter => {
-          if (!fullDataFormatter.gridList[data.secondGridIndex]) {
-            fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
-          }
-          // 反轉第二個valueAxis的位置
-          let reversePosition = ''
-          if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
-            reversePosition = 'right'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
-            reversePosition = 'top'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
-            reversePosition = 'bottom'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
-            reversePosition = 'left'
-          }
-          return <DataFormatterGrid>{
-            type: 'grid',
-            grid: {
-              ...fullDataFormatter.gridList[data.secondGridIndex],
-              valueAxis: {
-                ...fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
-                position: reversePosition
-              }
-            },
-            container: {
-              ...fullDataFormatter.container
-            }
+    switchMap(async (d) => d),
+    map(data => {
+      if (!data.fullDataFormatter.gridList[data.secondGridIndex]) {
+        data.fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, data.fullDataFormatter.gridList[data.firstGridIndex])
+      }
+      // 反轉第二個valueAxis的位置
+      let reversePosition = ''
+      if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
+        reversePosition = 'right'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
+        reversePosition = 'top'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
+        reversePosition = 'bottom'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
+        reversePosition = 'left'
+      }
+      return <DataFormatterGrid>{
+        type: 'grid',
+        visibleFilter: data.fullDataFormatter.visibleFilter as any,
+        grid: {
+          ...data.fullDataFormatter.gridList[data.secondGridIndex],
+          valueAxis: {
+            ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
+            position: reversePosition
           }
-        })
-      )
-    }),
+        },
+        container: {
+          ...data.fullDataFormatter.container
+        }
+      }
+    })
   )
 
   const multiGridPlugin$ = of(observer).pipe(
@@ -95,7 +94,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         )
       }
     }),
-    switchMap(observer => multiGridDetailObservables(observer)),
+    switchMap(observer => multiGridPluginObservables(observer)),
     map(data => {
       return data.map((observables, index) => {
         if (index === 0) {
@@ -109,17 +108,16 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
           gridAxesTransform$
         })
-        const gridContainer$ = gridContainerObservable({
-          computedData$: observables.gridComputedData$,
+        const gridContainerPosition$ = gridContainerPositionObservable({
+          computedData$: observables.computedData$,
           fullDataFormatter$: secondGridDataFormatter$,
-          fullChartParams$: observer.fullChartParams$,
           layout$: observer.layout$
         })
         return {
           ...observables,
           gridAxesTransform$,
           gridAxesReverseTransform$,
-          gridContainer$,
+          gridContainerPosition$,
         }
       })
     })
@@ -140,19 +138,26 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$.pipe(
             map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
           ),
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/noneData/defaults.ts

@@ -27,6 +27,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'series') {
       const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
       const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })
@@ -37,6 +38,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'group') {
       const label = (eventData as EventBaseGridValue<any, any>).groupLabel
       const valueArr = (eventData as EventBaseGridValue<any, any>).series
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })
@@ -47,6 +49,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'category') {
       const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
       const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })

package/src/series/defaults.ts

@@ -45,11 +45,21 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
 }
 
 export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
-  eventFn: (d: EventSeries, eventName: EventName, t: number) => {
+  eventFn: (eventData: EventSeries, eventName: EventName, t: number) => {
     if (eventName === 'mouseover' || eventName === 'mousemove') {
-      return [String(d.datum!.value)]
+      return [String(eventData.datum!.value)]
     }
-    return [String(Math.round(d.data.reduce((previous,current)=>previous+(current.value??0),0)*t))]
+    return [
+      String(
+        Math.round(
+          eventData.data.reduce((acc, seriesData) => {
+            return acc + seriesData.reduce((_acc, data) => {
+              return _acc + (data.value ?? 0)
+            }, 0)
+          }, 0) * t
+        )
+      )
+    ]
   },
   textAttrs: [
     {