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

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -1,164 +1,169 @@
-import * as d3 from 'd3'
-import {
-  of,
-  map,
-  switchMap,
-  combineLatest,
-  takeUntil,
-  iif,
-  Observable,
-  Subject } from 'rxjs'
-import type { ContextObserverMultiGrid, DataFormatterGrid } 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 { getClassName, getUniID } from '../../utils/orbchartsUtils'
-// @Q@
-import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
-
-const pluginName = 'OverlappingValueAxes'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const firstGridIndex$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(fullParams => fullParams.gridIndexes[0])
-  )
-
-  const secondGridIndex$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(fullParams => fullParams.gridIndexes[1])
-  )
-
-  // 為了要反轉第二個valueAxis的位置所以要重新計算
-  const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
-    firstGridIndex: firstGridIndex$,
-    secondGridIndex: secondGridIndex$
-  }).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
-            }
-          }
-        })
-      )
-    }),
-  )
-
-  const multiGridPlugin$ = of(observer).pipe(
-    takeUntil(destroy$),
-    map(observer => {
-      // 將observer的gridIndexes限制在2個
-      return {
-        ...observer,
-        fullParams$: observer.fullParams$.pipe(
-          map(fullParams => {
-            if (fullParams.gridIndexes.length > 2) {
-              fullParams.gridIndexes.length = 2
-            }
-            return fullParams
-          })
-        )
-      }
-    }),
-    switchMap(observer => multiGridDetailObservables(observer)),
-    map(data => {
-      return data.map((observables, index) => {
-        if (index === 0) {
-          return observables
-        }
-        // index === 1，將跟第二個valueAxis有關的observables全部重新計算
-        const gridAxesTransform$ = gridAxesTransformObservable({
-          fullDataFormatter$: secondGridDataFormatter$,
-          layout$: observer.layout$
-        })
-        const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
-          gridAxesTransform$
-        })
-        const gridContainer$ = gridContainerObservable({
-          computedData$: observables.gridComputedData$,
-          fullDataFormatter$: secondGridDataFormatter$,
-          fullChartParams$: observer.fullChartParams$,
-          layout$: observer.layout$
-        })
-        return {
-          ...observables,
-          gridAxesTransform$,
-          gridAxesReverseTransform$,
-          gridContainer$,
-        }
-      })
-    })
-  )
-
-  multiGridPlugin$.subscribe(data => {
-    // 每次重新計算時，清除之前的訂閱
-    unsubscribeFnArr.forEach(fn => fn())
-
-    selection.selectAll(`g.${gridClassName}`)
-      .data(data)
-      .join('g')
-      .attr('class', gridClassName)
-      .each((d, i, g) => {
-        if (i > 1) {
-          return
-        }
-
-        const gridSelection = d3.select(g[i])
-
-        unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
-          selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          fullParams$: observer.fullParams$.pipe(
-            map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
-          ),
-          fullDataFormatter$: d.gridDataFormatter$,
-          fullChartParams$: observer.fullChartParams$,  
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridAxesReverseTransform$: d.gridAxesReverseTransform$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
-        })
-      })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeFnArr.forEach(fn => fn())
-  }
-})
+import * as d3 from 'd3'
+import {
+  of,
+  map,
+  switchMap,
+  combineLatest,
+  takeUntil,
+  distinctUntilChanged,
+  shareReplay,
+  iif,
+  Observable,
+  Subject } from 'rxjs'
+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 { multiGridPluginObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
+
+const pluginName = 'OverlappingValueAxes'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const firstGridIndex$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(fullParams => fullParams.gridIndexes[0])
+  )
+
+  const secondGridIndex$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(fullParams => fullParams.gridIndexes[1])
+  )
+
+  // 為了要反轉第二個valueAxis的位置所以要重新計算
+  const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
+    firstGridIndex: firstGridIndex$,
+    secondGridIndex: secondGridIndex$,
+    fullDataFormatter: observer.fullDataFormatter$,
+  }).pipe(
+    takeUntil(destroy$),
+    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(
+    takeUntil(destroy$),
+    map(observer => {
+      // 將observer的gridIndexes限制在2個
+      return {
+        ...observer,
+        fullParams$: observer.fullParams$.pipe(
+          map(fullParams => {
+            if (fullParams.gridIndexes.length > 2) {
+              fullParams.gridIndexes.length = 2
+            }
+            return fullParams
+          })
+        )
+      }
+    }),
+    switchMap(observer => multiGridPluginObservables(observer)),
+    map(data => {
+      return data.map((observables, index) => {
+        if (index === 0) {
+          return observables
+        }
+        // index === 1，將跟第二個valueAxis有關的observables全部重新計算
+        const gridAxesTransform$ = gridAxesTransformObservable({
+          fullDataFormatter$: secondGridDataFormatter$,
+          layout$: observer.layout$
+        })
+        const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+          gridAxesTransform$
+        })
+        const gridContainerPosition$ = gridContainerPositionObservable({
+          computedData$: observables.computedData$,
+          fullDataFormatter$: secondGridDataFormatter$,
+          layout$: observer.layout$
+        })
+        return {
+          ...observables,
+          gridAxesTransform$,
+          gridAxesReverseTransform$,
+          gridContainerPosition$,
+        }
+      })
+    })
+  )
+
+  multiGridPlugin$.subscribe(data => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    selection.selectAll(`g.${gridClassName}`)
+      .data(data)
+      .join('g')
+      .attr('class', gridClassName)
+      .each((d, i, g) => {
+        if (i > 1) {
+          return
+        }
+
+        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.computedData$,
+          fullParams$: observer.fullParams$.pipe(
+            map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
+          ),
+          fullDataFormatter$: d.dataFormatter$,
+          fullChartParams$: observer.fullChartParams$,  
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridAxesReverseTransform$: d.gridAxesReverseTransform$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/types.ts

@@ -1,67 +1,67 @@
-import type { BaseBarsParams } from '../base/BaseBars'
-import type { BaseBarStackParams } from '../base/BaseBarStack'
-import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
-import type { BaseLinesParams } from '../base/BaseLines'
-import type { BaseLineAreasParams } from '../base/BaseLineAreas'
-import type { BaseDotsParams } from '../base/BaseDots'
-import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
-import type { BaseValueAxisParams } from '../base/BaseValueAxis'
-import type {
-  ChartParams, Layout, ColorType } from '@orbcharts/core'
-
-export interface MultiGridLegendParams {
-  position: 'top' | 'bottom' | 'left' | 'right'
-  justify: 'start' | 'center' | 'end'
-  padding: number
-  backgroundFill: ColorType
-  backgroundStroke: ColorType
-  gap: number
-  listRectWidth: number
-  listRectHeight: number
-  listRectRadius: number
-  // 可針對各grid設定，覆蓋全域設定
-  gridList: Array<{
-    listRectWidth: number
-    listRectHeight: number
-    listRectRadius: number
-  }>
-  textColorType: ColorType
-}
-
-export interface MultiGroupAxisParams extends BaseGroupAxisParams {
-  gridIndexes: number[]
-}
-
-export interface MultiValueAxisParams extends BaseValueAxisParams {
-  gridIndexes: number[]
-}
-
-export interface MultiBarsParams extends BaseBarsParams {
-  gridIndexes: number[]
-}
-
-export interface MultiBarStackParams extends BaseBarStackParams {
-  gridIndexes: number[]
-}
-
-export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
-  gridIndexes: number[]
-}
-
-export interface MultiLinesParams extends BaseLinesParams {
-  gridIndexes: number[]
-}
-
-export interface MultiLineAreasParams extends BaseLineAreasParams {
-  gridIndexes: number[]
-}
-
-export interface MultiDotsParams extends BaseDotsParams {
-  gridIndexes: number[]
-}
-
-export interface OverlappingValueAxesParams {
-  firstAxis: BaseValueAxisParams
-  secondAxis: BaseValueAxisParams
-  gridIndexes: [number, number]
-}
+import type { BaseBarsParams } from '../base/BaseBars'
+import type { BaseBarStackParams } from '../base/BaseBarStack'
+import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
+import type { BaseLinesParams } from '../base/BaseLines'
+import type { BaseLineAreasParams } from '../base/BaseLineAreas'
+import type { BaseDotsParams } from '../base/BaseDots'
+import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
+import type { BaseValueAxisParams } from '../base/BaseValueAxis'
+import type {
+  ChartParams, Layout, ColorType } from '@orbcharts/core'
+
+export interface MultiGridLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+  // 可針對各grid設定，覆蓋全域設定
+  gridList: Array<{
+    listRectWidth: number
+    listRectHeight: number
+    listRectRadius: number
+  }>
+  textColorType: ColorType
+}
+
+export interface MultiGroupAxisParams extends BaseGroupAxisParams {
+  gridIndexes: number[]
+}
+
+export interface MultiValueAxisParams extends BaseValueAxisParams {
+  gridIndexes: number[]
+}
+
+export interface MultiBarsParams extends BaseBarsParams {
+  gridIndexes: number[]
+}
+
+export interface MultiBarStackParams extends BaseBarStackParams {
+  gridIndexes: number[]
+}
+
+export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
+  gridIndexes: number[]
+}
+
+export interface MultiLinesParams extends BaseLinesParams {
+  gridIndexes: number[]
+}
+
+export interface MultiLineAreasParams extends BaseLineAreasParams {
+  gridIndexes: number[]
+}
+
+export interface MultiDotsParams extends BaseDotsParams {
+  gridIndexes: number[]
+}
+
+export interface OverlappingValueAxesParams {
+  firstAxis: BaseValueAxisParams
+  secondAxis: BaseValueAxisParams
+  gridIndexes: [number, number]
+}

package/src/noneData/defaults.ts

@@ -1,61 +1,64 @@
-import type { ContainerPluginParams, TooltipParams } from './types'
-import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
-
-export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
-  header: {
-    height: 36,
-    text: [],
-    textStyle: []
-  },
-  footer: {
-    height: 0,
-    text: [],
-    textStyle: []
-  }
-}
-
-export const TOOLTIP_PARAMS: TooltipParams = {
-  backgroundColorType: 'background',
-  strokeColorType: 'primary',
-  backgroundOpacity: 0.8,
-  textColorType: 'primary',
-  offset: [20, 5],
-  padding: 10,
-  textRenderFn: (eventData) => {
-    if (eventData.highlightTarget === 'datum' && eventData.datum) {
-      return [`${eventData.datum.label}: ${eventData.datum.value}`]
-    } else if (eventData.highlightTarget === 'series') {
-      const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
-      const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
-        .map(d => {
-          return d.value
-        })
-      const value = valueArr.length > 5
-        ? valueArr.slice(0, 5).join(',') + '...'
-        : valueArr.join(',')
-      return [label, value]
-    } else if (eventData.highlightTarget === 'group') {
-      const label = (eventData as EventBaseGridValue<any, any>).groupLabel
-      const valueArr = (eventData as EventBaseGridValue<any, any>).series
-        .map(d => {
-          return d.value
-        })
-      const value = valueArr.length > 5
-        ? valueArr.slice(0, 5).join(',') + '...'
-        : valueArr.join(',')
-      return [label, value]
-    } else if (eventData.highlightTarget === 'category') {
-      const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
-      const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
-        .map(d => {
-          return d.value
-        })
-      const value = valueArr.length > 5
-        ? valueArr.slice(0, 5).join(',') + '...'
-        : valueArr.join(',')
-      return [label, value]
-    }
-    return []
-  },
-  svgRenderFn: null
-}
+import type { ContainerPluginParams, TooltipParams } from './types'
+import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
+
+export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
+  header: {
+    height: 36,
+    text: [],
+    textStyle: []
+  },
+  footer: {
+    height: 0,
+    text: [],
+    textStyle: []
+  }
+}
+
+export const TOOLTIP_PARAMS: TooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  textRenderFn: (eventData) => {
+    if (eventData.highlightTarget === 'datum' && eventData.datum) {
+      return [`${eventData.datum.label}: ${eventData.datum.value}`]
+    } 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
+        })
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : valueArr.join(',')
+      return [label, value]
+    } 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
+        })
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : valueArr.join(',')
+      return [label, value]
+    } 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
+        })
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : valueArr.join(',')
+      return [label, value]
+    }
+    return []
+  },
+  svgRenderFn: null
+}

package/src/noneData/index.ts

@@ -1,4 +1,4 @@
-export * from './defaults'
-export * from './types'
-export { Container } from './plugins/Container'
+export * from './defaults'
+export * from './types'
+export { Container } from './plugins/Container'
 export { Tooltip } from './plugins/Tooltip'

package/src/noneData/plugins/Container.ts

@@ -1,11 +1,11 @@
-import * as d3 from 'd3'
-import {
-  defineNoneDataPlugin } from '@orbcharts/core'
-import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
-
-export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
-  
-  return function unsubscribe () {
-    
-  }
+import * as d3 from 'd3'
+import {
+  defineNoneDataPlugin } from '@orbcharts/core'
+import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
+
+export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
+  
+  return function unsubscribe () {
+    
+  }
 })