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

package/src/multiGrid/defaults.ts

@@ -1,147 +1,147 @@
-import type {
-  MultiGridLegendParams,
-  MultiBarsParams,
-  MultiBarStackParams,
-  MultiBarsTriangleParams,
-  MultiLinesParams,
-  MultiLineAreasParams,
-  MultiDotsParams,
-  MultiGroupAxisParams,
-  MultiValueAxisParams,
-  OverlappingValueAxesParams
-} from './types'
-
-export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
-  position: 'right',
-  justify: 'end',
-  padding: 28,
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  gridList: [
-    {
-      listRectWidth: 14,
-      listRectHeight: 14,
-      listRectRadius: 0,
-    }
-  ],
-  textColorType: 'primary'
-}
-
-export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
-  // labelAnchor: 'start',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: true,
-  axisLineColorType: 'primary',
-  tickFormat: text => text,
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: false,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
-  // labelAnchor: 'end',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: false,
-  axisLineColorType: 'primary',
-  ticks: 4,
-  tickFormat: ',.0f',
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: true,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 40,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
-  barWidth: 0,
-  barGroupPadding: 10,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 20,
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
-  lineCurve: 'curveLinear',
-  lineWidth: 2,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
-  lineCurve: 'curveLinear',
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
-  radius: 4,
-  fillColorType: 'white',
-  strokeColorType: 'series',
-  strokeWidth: 2,
-  onlyShowHighlighted: false,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
-  firstAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  secondAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  gridIndexes: [0, 1]
-}
+import type {
+  MultiGridLegendParams,
+  MultiBarsParams,
+  MultiBarStackParams,
+  MultiBarsTriangleParams,
+  MultiLinesParams,
+  MultiLineAreasParams,
+  MultiDotsParams,
+  MultiGroupAxisParams,
+  MultiValueAxisParams,
+  OverlappingValueAxesParams
+} from './types'
+
+export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  gridList: [
+    {
+      listRectWidth: 14,
+      listRectHeight: 14,
+      listRectRadius: 0,
+    }
+  ],
+  textColorType: 'primary'
+}
+
+export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
+  // labelAnchor: 'start',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: true,
+  axisLineColorType: 'primary',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
+  // labelAnchor: 'end',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: false,
+  axisLineColorType: 'primary',
+  ticks: 4,
+  tickFormat: ',.0f',
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: true,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 40,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
+  barWidth: 0,
+  barGroupPadding: 10,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 20,
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
+  lineCurve: 'curveLinear',
+  lineWidth: 2,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
+  radius: 4,
+  fillColorType: 'white',
+  strokeColorType: 'series',
+  strokeWidth: 2,
+  onlyShowHighlighted: false,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
+  firstAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  secondAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  gridIndexes: [0, 1]
+}

package/src/multiGrid/index.ts

@@ -1,12 +1,12 @@
-export * from './defaults'
-export * from './types'
-export { MultiGridLegend } from './plugins/MultiGridLegend'
-export { MultiBars } from './plugins/MultiBars'
-export { MultiBarStack } from './plugins/MultiBarStack'
-export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
-export { MultiLines } from './plugins/MultiLines'
-export { MultiLineAreas } from './plugins/MultiLineAreas'
-export { MultiDots } from './plugins/MultiDots'
-export { MultiGroupAxis } from './plugins/MultiGroupAxis'
-export { MultiValueAxis } from './plugins/MultiValueAxis'
+export * from './defaults'
+export * from './types'
+export { MultiGridLegend } from './plugins/MultiGridLegend'
+export { MultiBars } from './plugins/MultiBars'
+export { MultiBarStack } from './plugins/MultiBarStack'
+export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
+export { MultiLines } from './plugins/MultiLines'
+export { MultiLineAreas } from './plugins/MultiLineAreas'
+export { MultiDots } from './plugins/MultiDots'
+export { MultiGroupAxis } from './plugins/MultiGroupAxis'
+export { MultiValueAxis } from './plugins/MultiValueAxis'
 export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'

package/src/multiGrid/multiGridObservables.ts

@@ -1,290 +1,43 @@
-import type { Observable } from 'rxjs'
-import {
-  Subject,
-  takeUntil,
-  of,
-  map,
-  reduce,
-  switchMap,
-  combineLatest,
-  distinctUntilChanged,
-  shareReplay
-} from 'rxjs'
-import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, ContextObserverGridDetail } from '@orbcharts/core'
-// import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
-
-// interface GridPluginParams {
-//   gridIndex: number
-// }
-
-// interface GridPluginObservables extends ContextObserverGridDetail {
-//   gridComputedData$: Observable<ComputedDataGrid>
-//   gridDataFormatter$: Observable<DataFormatterGrid>
-// }
-
-// // 對應grid資料的plugin所需Observable（必須有gridIndex）
-// export const gridPluginObservables = (observer: ContextObserverMultiGrid<GridPluginParams>): GridPluginObservables => {
-//   const gridIndex$ = observer.fullParams$.pipe(
-//     map(fullParams => fullParams.gridIndex),
-//     distinctUntilChanged(),
-//     shareReplay(1)
-//   )
-
-//   const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
-//     computedData: observer.computedData$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     map((data) => {
-//       return data.computedData[data.gridIndex] ?? data.computedData[0]
-//     })
-//   )
-
-//   const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
-//     fullDataFormatter: observer.fullDataFormatter$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     map((data) => {
-//       const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-      
-//       return {
-//         type: 'grid',
-//         grid: {
-//           ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
-//         },
-//         container: {
-//           ...data.fullDataFormatter.container
-//         }
-//       }
-//     })
-//   )
-
-//   const gridDetail$ = combineLatest({
-//     multiGridEachDetail: observer.multiGridEachDetail$,
-//     gridIndex: gridIndex$,
-//   }).pipe(
-//     switchMap(async d => d),
-//     map(data => {
-//       return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
-//     }),
-//     shareReplay(1)
-//   )
-
-//   const isSeriesPositionSeprate$ = gridDetail$.pipe(
-//     switchMap(d => d.isSeriesPositionSeprate$)
-//   )
-
-//   const gridContainer$ = gridDetail$.pipe(
-//     switchMap(d => d.gridContainer$)
-//   )
-
-//   const gridAxesTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesTransform$)
-//   )
-
-//   const gridAxesReverseTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesReverseTransform$)
-//   )
-  
-//   const gridAxesSize$ = gridDetail$.pipe(
-//     switchMap(d => d.gridAxesSize$)
-//   )
-  
-//   const gridGraphicTransform$ = gridDetail$.pipe(
-//     switchMap(d => d.gridGraphicTransform$)
-//   )
-
-//   const gridGraphicReverseScale$ = gridDetail$.pipe(
-//     switchMap(d => d.gridGraphicReverseScale$)
-//   )
-
-//   const gridHighlight$ = gridDetail$.pipe(
-//     switchMap(d => d.gridHighlight$)
-//   )
-
-//   const existSeriesLabels$ = gridDetail$.pipe(
-//     switchMap(d => d.existSeriesLabels$)
-//   )
-
-//   const SeriesDataMap$ = gridDetail$.pipe(
-//     switchMap(d => d.SeriesDataMap$)
-//   )
-
-//   const GroupDataMap$ = gridDetail$.pipe(
-//     switchMap(d => d.GroupDataMap$)
-//   )
-
-//   const visibleComputedData$ = gridDetail$.pipe(
-//     switchMap(d => d.visibleComputedData$)
-//   )
-
-  
-
-//   return {
-//     gridComputedData$,
-//     gridDataFormatter$,
-//     gridAxesTransform$,
-//     gridGraphicTransform$,
-//     gridGraphicReverseScale$,
-//     gridAxesReverseTransform$,
-//     gridAxesSize$,
-//     gridHighlight$,
-//     existSeriesLabels$,
-//     SeriesDataMap$,
-//     GroupDataMap$,
-//     visibleComputedData$,
-//     isSeriesPositionSeprate$,
-//     gridContainer$
-//   }
-// }
-
-// 可設定多個gridIndex的params
-interface MultiGridPluginParams {
-  gridIndexes: number[]
-}
-
-interface MultiGridDetailObservables extends ContextObserverGridDetail {
-  gridComputedData$: Observable<ComputedDataGrid>
-  gridDataFormatter$: Observable<DataFormatterGrid>
-}
-
-
-// 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<MultiGridDetailObservables[]> => {
-  const gridIndexes$ = observer.fullParams$.pipe(
-    map(fullParams => fullParams.gridIndexes),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-  const destroy$ = new Subject()
-
-  // 合併所有gridHighlight$
-  const gridHighlight$ = observer.multiGridEachDetail$.pipe(
-    // switchMap(data => concat(...data.map(d => d.gridHighlight$))),
-    switchMap(data => {
-      return combineLatest(data.map(d => d.gridHighlight$))
-    }),
-    map(d => d.flat()),
-    shareReplay(1)
-  )
-
-  return gridIndexes$.pipe(
-    map(gridIndexes => {
-      return gridIndexes.map(gridIndex => {
-        // 每次重新計算時，清除之前的訂閱
-        destroy$.next(undefined)
-
-        const gridIndex$ = of(gridIndex).pipe(
-          takeUntil(destroy$),
-          shareReplay(1)
-        )
-
-        const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
-          computedData: observer.computedData$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          map((data) => {
-            return data.computedData[data.gridIndex] ?? data.computedData[0]
-          })
-        )
-      
-        const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
-          fullDataFormatter: observer.fullDataFormatter$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          map((data) => {
-            const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-            
-            return {
-              type: 'grid',
-              grid: {
-                ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
-              },
-              container: {
-                ...data.fullDataFormatter.container
-              }
-            }
-          })
-        )
-      
-        const gridDetail$ = combineLatest({
-          multiGridEachDetail: observer.multiGridEachDetail$,
-          gridIndex: gridIndex$,
-        }).pipe(
-          takeUntil(destroy$),
-          switchMap(async d => d),
-          map(data => {
-            return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
-          }),
-          shareReplay(1)
-        )
-      
-        const isSeriesPositionSeprate$ = gridDetail$.pipe(
-          switchMap(d => d.isSeriesPositionSeprate$)
-        )
-      
-        const gridContainer$ = gridDetail$.pipe(
-          switchMap(d => d.gridContainer$)
-        )
-      
-        const gridAxesTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesTransform$)
-        )
-      
-        const gridAxesReverseTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesReverseTransform$)
-        )
-        
-        const gridAxesSize$ = gridDetail$.pipe(
-          switchMap(d => d.gridAxesSize$)
-        )
-        
-        const gridGraphicTransform$ = gridDetail$.pipe(
-          switchMap(d => d.gridGraphicTransform$)
-        )
-      
-        const gridGraphicReverseScale$ = gridDetail$.pipe(
-          switchMap(d => d.gridGraphicReverseScale$)
-        )
-      
-        // const gridHighlight$ = gridDetail$.pipe(
-        //   switchMap(d => d.gridHighlight$)
-        // )
-      
-        const existSeriesLabels$ = gridDetail$.pipe(
-          switchMap(d => d.existSeriesLabels$)
-        )
-      
-        const SeriesDataMap$ = gridDetail$.pipe(
-          switchMap(d => d.SeriesDataMap$)
-        )
-      
-        const GroupDataMap$ = gridDetail$.pipe(
-          switchMap(d => d.GroupDataMap$)
-        )
-      
-        const visibleComputedData$ = gridDetail$.pipe(
-          switchMap(d => d.visibleComputedData$)
-        )
-      
-        return {
-          gridComputedData$,
-          gridDataFormatter$,
-          gridAxesTransform$,
-          gridGraphicTransform$,
-          gridGraphicReverseScale$,
-          gridAxesReverseTransform$,
-          gridAxesSize$,
-          gridHighlight$,
-          existSeriesLabels$,
-          SeriesDataMap$,
-          GroupDataMap$,
-          visibleComputedData$,
-          isSeriesPositionSeprate$,
-          gridContainer$
-        }
-      })
-    })
-  )
+import type { Observable } from 'rxjs'
+import {
+  Subject,
+  takeUntil,
+  of,
+  map,
+  reduce,
+  switchMap,
+  combineLatest,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
+import type {
+  ContextObserverMultiGrid,
+  ComputedDataGrid,
+  DataFormatterGrid,
+  ContextObserverGridDetail,
+  ContextObserverMultiGridDetail } from '@orbcharts/core'
+
+// 可設定多個gridIndex的params
+interface MultiGridPluginParams {
+  gridIndexes: number[]
+}
+
+// 對應grid資料的plugin所需Observable（必須有gridIndexes）
+export const multiGridPluginObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
+  const gridIndexes$ = observer.fullParams$.pipe(
+    map(fullParams => fullParams.gridIndexes),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  return combineLatest({
+    multiGridEachDetail: observer.multiGridEachDetail$,
+    gridIndexes: gridIndexes$,
+  }).pipe(
+    map(data => {
+      return data.gridIndexes.map(gridIndex => {
+        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
+      })
+    })
+  )
 }