@orbcharts/plugins-basic 3.0.0-alpha.34 → 3.0.0-alpha.36

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -0,0 +1,53 @@
+import * as d3 from 'd3'
+import {
+  Subject } 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 { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiValueAxis'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VALUE_AXIS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPlugin$ = multiGridDetailObservables(observer)
+
+  multiGridPlugin$.subscribe(data => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    selection.selectAll(`g.${gridClassName}`)
+      .data(data)
+      .join('g')
+      .attr('class', gridClassName)
+      .each((d, i, g) => {
+
+        const gridSelection = d3.select(g[i])
+
+        unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          fullParams$: observer.fullParams$,
+          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())
+  }
+})

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -0,0 +1,165 @@
+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'
+          }
+          console.log('reversePosition', reversePosition)
+          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())
+  }
+})

package/src/multiGrid/types.ts

@@ -1,5 +1,10 @@
 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 { BaseDotsParams } from '../base/BaseDots'
+import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
+import type { BaseValueAxisParams } from '../base/BaseValueAxis'
 import type {
   ChartParams, Layout, ColorType } from '@orbcharts/core'
 
@@ -25,3 +30,37 @@ export interface MultiGridLegendParams {
     listRectRadius: number
   }>
 }
+
+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 MultiDotsParams extends BaseDotsParams {
+  gridIndexes: number[]
+}
+
+export interface OverlappingValueAxesParams {
+  firstAxis: BaseValueAxisParams
+  secondAxis: BaseValueAxisParams
+  gridIndexes: [number, number]
+}

package/tsconfig.dev.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true,
+    "paths":{
+      "@orbcharts/core": ["./../orbcharts-core/src"]
+    }
+  }
+}

package/tsconfig.prod.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true
+  }
+}

package/vite.config.js

@@ -13,6 +13,11 @@ const releaseConfig = {
   compilerOptions: {
     composite: true
   },
+  // resolve: {
+  //   alias: {
+  //     '@core': '@orbcharts/core'
+  //   }
+  // },
   build: {
     lib: {
       entry: "src/index.ts",

package/dist/src/grid/plugins/GroupArea.d.ts

@@ -1,3 +0,0 @@
-import { GroupAreaParams } from '../types';
-
-export declare const GroupArea: import('@orbcharts/core').PluginConstructor<"grid", string, GroupAreaParams>;

package/dist/src/multiGrid/plugins/BarsAndLines.d.ts

@@ -1 +0,0 @@
-export declare const BarsAndLines: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').BarsAndLinesParams>;

package/src/multiGrid/plugins/BarsAndLines.ts

@@ -1,126 +0,0 @@
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Subject,
-  Observable } from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
-// import { defineMultiGridPlugin } from '../../../../orbcharts-core/src'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { DEFAULT_BARS_AND_LINES_PARAMS } from '../defaults'
-import { createBaseBars } from '../../base/BaseBars'
-import { createBaseLines } from '../../base/BaseLines'
-
-const pluginName = 'BarsAndLines'
-const barsClassName = getClassName(pluginName, 'bars')
-const linesClassName = getClassName(pluginName, 'lines')
-
-export const BarsAndLines = defineMultiGridPlugin(pluginName, DEFAULT_BARS_AND_LINES_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const barsSelection = selection.append('g').attr('class', barsClassName)
-  const linesSelection = selection.append('g').attr('class', linesClassName)
-
-  let unsubscribeBaseBars = () => {}
-  let unsubscribeBaseLines = () => {}
-
-  // combineLatest({
-  //   fullParams: observer.fullParams$,
-  //   fullChartParams: observer.fullChartParams$,
-  //   computedData: observer.computedData$,
-  //   event: subject.event$,
-  //   multiGrid: observer.multiGrid$,
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-    
-  // })
-
-  const barsComputedData$ = observer.computedData$.pipe(
-    takeUntil(destroy$),
-    map((computedData) => computedData[0] || [])
-  )
-
-  const linesComputedData$ = observer.computedData$.pipe(
-    takeUntil(destroy$),
-    map((computedData) => computedData[1] || [])
-  )
-
-  const barsFullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map((fullParams) => fullParams.bars)
-  )
-
-  const linesFullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map((fullParams) => fullParams.lines)
-  )
-
-  const defaultFullDataFormatter$ = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map((fullDataFormatter) => fullDataFormatter.multiGrid[0] || DATA_FORMATTER_MULTI_GRID_DEFAULT.multiGrid[0])
-  )
-
-  const linesFullDataFormatter$ = combineLatest({
-    fullDataFormatter: observer.fullDataFormatter$,
-    defaultFullDataFormatter: defaultFullDataFormatter$,
-  }).pipe(
-    takeUntil(destroy$),
-    map((data) => {
-      return data.fullDataFormatter.multiGrid[1] ?? data.defaultFullDataFormatter
-    })
-  )
-
-  observer.multiGrid$.subscribe((multiGrid) => {
-    // bars
-    if (multiGrid[0]) {
-      unsubscribeBaseBars = createBaseBars(pluginName, {
-        selection: barsSelection,
-        computedData$: barsComputedData$,
-        visibleComputedData$: multiGrid[0].visibleComputedData$,
-        SeriesDataMap$: multiGrid[0].SeriesDataMap$,
-        GroupDataMap$: multiGrid[0].GroupDataMap$,
-        fullParams$: barsFullParams$,
-        fullChartParams$: observer.fullChartParams$,
-        gridAxesTransform$: multiGrid[0].gridAxesTransform$,
-        gridGraphicTransform$: multiGrid[0].gridGraphicTransform$,
-        gridAxesSize$: multiGrid[0].gridAxesSize$,
-        gridHighlight$: multiGrid[0].gridHighlight$,
-        event$: subject.event$ as Subject<any>,
-      })
-    } else {
-      unsubscribeBaseBars()
-    }
-    // lines
-    if (multiGrid[1]) {
-      unsubscribeBaseLines = createBaseLines(pluginName, {
-        selection: linesSelection,
-        computedData$: linesComputedData$,
-        SeriesDataMap$: multiGrid[1].SeriesDataMap$,
-        GroupDataMap$: multiGrid[1].GroupDataMap$,
-        fullParams$: linesFullParams$,
-        fullDataFormatter$: linesFullDataFormatter$,
-        fullChartParams$: observer.fullChartParams$,
-        gridAxesTransform$: multiGrid[1].gridAxesTransform$,
-        gridGraphicTransform$: multiGrid[1].gridGraphicTransform$,
-        gridAxesSize$: multiGrid[1].gridAxesSize$,
-        gridHighlight$: multiGrid[1].gridHighlight$,
-        event$: subject.event$ as Subject<any>,
-      })
-    } else {
-      unsubscribeBaseLines()
-    }
-  })
-
-  
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseBars()
-    unsubscribeBaseLines()
-  }
-})