@orbcharts/plugins-basic 3.0.0-beta.2 → 3.0.0-beta.20

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -1,159 +1,169 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineMultiGridPlugin, mergeOptionsWithDefault } from '../../../lib/core'
-import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
-import { createBaseLegend } from '../../base/BaseLegend'
-import type { BaseLegendParams } from '../../../lib/plugins-basic-types'
-import { LAYER_INDEX_OF_INFO } from '../../const'
-
-const pluginName = 'MultiGridLegend'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_GRID_LEGEND_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_MULTI_GRID_LEGEND_PARAMS,
-  layerIndex: LAYER_INDEX_OF_INFO,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      placement: {
-        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
-        test: (value) => {
-          return [
-            'top', 'top-start', 'top-end',
-            'bottom', 'bottom-start', 'bottom-end',
-            'left', 'left-start', 'left-end',
-            'right', 'right-start', 'right-end'
-          ].includes(value)
-        }
-      },
-      padding: {
-        toBeTypes: ['number']
-      },
-      backgroundFill: {
-        toBeOption: 'ColorType',
-      },
-      backgroundStroke: {
-        toBeOption: 'ColorType',
-      },
-      gap: {
-        toBeTypes: ['number']
-      },
-      listRectWidth: {
-        toBeTypes: ['number']
-      },
-      listRectHeight: {
-        toBeTypes: ['number']
-      },
-      listRectRadius: {
-        toBeTypes: ['number']
-      },
-      gridList: {
-        toBeTypes: ['object[]']
-      },
-      textColorType: {
-        toBeOption: 'ColorType',
-      }
-    })
-    if (params.gridList) {
-      const gridListResult = params.gridList.map((grid, gridIndex) => {
-        return validateColumns(grid, {
-          listRectWidth: {
-            toBeTypes: ['number']
-          },
-          listRectHeight: {
-            toBeTypes: ['number']
-          },
-          listRectRadius: {
-            toBeTypes: ['number']
-          }
-        })
-      })
-      const errorResult = gridListResult.find(r => r.status === 'error')
-      if (errorResult) {
-        return errorResult
-      }
-    }
-    return result
-  }
-}
-
-export const MultiGridLegend = defineMultiGridPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const seriesLabels$ = observer.multiGridEachDetail$.pipe(
-    takeUntil(destroy$),
-    map(multiGrid => {
-      const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
-        return grid.SeriesDataMap$.pipe(
-          // grid內的seriesLabels
-          map(seriesDataMap => Array.from(seriesDataMap.keys()))
-        )
-      })
-      return seriesLabelsObservableArr
-    }),
-    switchMap(seriesLabelsObservableArr => combineLatest(seriesLabelsObservableArr)),
-    map(data => data.flat())
-  )
-
-  const seriesList$ = combineLatest({
-    fullParams: observer.fullParams$,
-    // multiGrid: observer.multiGridEachDetail$,
-    computedData: observer.computedData$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      // grid
-      return data.computedData
-        .map((gridData, gridIndex) => {
-          // 這個grid全部series要套用的圖例列點樣式
-          const gridListStyle = mergeOptionsWithDefault(data.fullParams.gridList[gridIndex] ?? {}, {
-            listRectWidth: data.fullParams.listRectWidth,
-            listRectHeight: data.fullParams.listRectHeight,
-            listRectRadius: data.fullParams.listRectRadius,
-          })
-          // series
-          return gridData.map(d => gridListStyle)
-        })
-        .flat()
-
-    })
-  )
-
-  const fullParams$: Observable<BaseLegendParams> = combineLatest({
-    fullParams: observer.fullParams$,
-    seriesList: seriesList$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(d => {
-      return {
-        ...d.fullParams,
-        seriesList: d.seriesList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    seriesLabels$,
-    fullParams$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    textSizePx$: observer.textSizePx$
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseLegend()
-  }
-})
-
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiGridPlugin, mergeOptionsWithDefault } from '../../../lib/core'
+import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import type { BaseLegendParams } from '../../../lib/plugins-basic-types'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'MultiGridLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_GRID_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_GRID_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      placement: {
+        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
+        test: (value) => {
+          return [
+            'top', 'top-start', 'top-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end',
+            'right', 'right-start', 'right-end'
+          ].includes(value)
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      gridList: {
+        toBeTypes: ['object[]']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    if (params.gridList) {
+      const gridListResult = params.gridList.map((grid, gridIndex) => {
+        return validateColumns(grid, {
+          listRectWidth: {
+            toBeTypes: ['number']
+          },
+          listRectHeight: {
+            toBeTypes: ['number']
+          },
+          listRectRadius: {
+            toBeTypes: ['number']
+          }
+        })
+      })
+      const errorResult = gridListResult.find(r => r.status === 'error')
+      if (errorResult) {
+        return errorResult
+      }
+    }
+    return result
+  }
+}
+
+export const MultiGridLegend = defineMultiGridPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  // const seriesLabels$ = observer.multiGridEachDetail$.pipe(
+  //   takeUntil(destroy$),
+  //   map(multiGrid => {
+  //     const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
+  //       return grid.SeriesDataMap$.pipe(
+  //         // grid內的seriesLabels
+  //         map(seriesDataMap => Array.from(seriesDataMap.keys()))
+  //       )
+  //     })
+  //     return seriesLabelsObservableArr
+  //   }),
+  //   switchMap(seriesLabelsObservableArr => combineLatest(seriesLabelsObservableArr)),
+  //   map(data => data.flat())
+  // )
+
+  const seriesLabels$ = observer.multiGridEachDetail$.pipe(
+    map(multiGridEachDetail => multiGridEachDetail.map(grid => grid.seriesLabels$)),
+    switchMap(d => {
+      return combineLatest(d).pipe(
+        switchMap(async d => d),
+      )
+    }),
+    map(data => data.flat())
+  )
+
+  const seriesList$ = combineLatest({
+    fullParams: observer.fullParams$,
+    // multiGrid: observer.multiGridEachDetail$,
+    computedData: observer.computedData$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      // grid
+      return data.computedData
+        .map((gridData, gridIndex) => {
+          // 這個grid全部series要套用的圖例列點樣式
+          const gridListStyle = mergeOptionsWithDefault(data.fullParams.gridList[gridIndex] ?? {}, {
+            listRectWidth: data.fullParams.listRectWidth,
+            listRectHeight: data.fullParams.listRectHeight,
+            listRectRadius: data.fullParams.listRectRadius,
+          })
+          // series
+          return gridData.map(d => gridListStyle)
+        })
+        .flat()
+
+    })
+  )
+
+  const fullParams$: Observable<BaseLegendParams> = combineLatest({
+    fullParams: observer.fullParams$,
+    seriesList: seriesList$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(d => {
+      return {
+        ...d.fullParams,
+        labelList: d.seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    legendLabels$: seriesLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/multiGrid/plugins/MultiGridTooltip.ts

@@ -1,66 +1,66 @@
-import {
-  Subject,
-} from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_MULTI_GRID_TOOLTIP_PARAMS } from '../defaults'
-import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
-import { createBaseTooltip } from '../../base/BaseTooltip'
-
-const pluginName = 'MultiGridTooltip'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_GRID_TOOLTIP_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_MULTI_GRID_TOOLTIP_PARAMS,
-  layerIndex: LAYER_INDEX_OF_TOOLTIP,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      backgroundColorType: {
-        toBeOption: 'ColorType',
-      },
-      backgroundOpacity: {
-        toBeTypes: ['number']
-      },
-      strokeColorType: {
-        toBeOption: 'ColorType',
-      },
-      offset: {
-        toBe: '[number, number]',
-        test: (value: any) => {
-          return Array.isArray(value)
-            && value.length === 2
-            && typeof value[0] === 'number'
-            && typeof value[1] === 'number'
-        }
-      },
-      padding: {
-        toBeTypes: ['number']
-      },
-      textColorType: {
-        toBeOption: 'ColorType',
-      },
-      renderFn: {
-        toBeTypes: ['Function']
-      },
-    })
-    return result
-  }
-}
-
-export const MultiGridTooltip = defineMultiGridPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeTooltip = createBaseTooltip(pluginName, {
-    rootSelection,
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    layout$: observer.layout$,
-    event$: subject.event$,
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeTooltip()
-  }
-})
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiGridPlugin } from '../../../lib/core'
+import { DEFAULT_MULTI_GRID_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'MultiGridTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_GRID_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_GRID_TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      backgroundColorType: {
+        toBeOption: 'ColorType',
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      offset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      },
+      renderFn: {
+        toBeTypes: ['Function']
+      },
+    })
+    return result
+  }
+}
+
+export const MultiGridTooltip = defineMultiGridPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeTooltip = createBaseTooltip(pluginName, {
+    rootSelection,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeTooltip()
+  }
+})