@orbcharts/plugins-basic 3.0.4 → 3.0.5

package/src/series/plugins/SeriesLegend.ts

@@ -1,107 +1,107 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineSeriesPlugin } from '../../../lib/core'
-import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
-import { createBaseLegend } from '../../base/BaseLegend'
-import { LAYER_INDEX_OF_INFO } from '../../const'
-
-const pluginName = 'SeriesLegend'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SERIES_LEGEND_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_SERIES_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']
-      },
-      textColorType: {
-        toBeOption: 'ColorType',
-      }
-    })
-    return result
-  }
-}
-
-export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const legendLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return Array.from(data.keys())
-    })
-  )
-
-  // 全部列點矩型使用相同樣式參數
-  const fullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      const labelList = [
-        {
-          listRectWidth: d.listRectWidth,
-          listRectHeight: d.listRectHeight,
-          listRectRadius: d.listRectRadius,
-        }
-      ]
-      return {
-        ...d,
-        labelList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    legendLabels$,
-    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 {
+  defineSeriesPlugin } from '../../../lib/core'
+import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'SeriesLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SERIES_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_SERIES_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']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const legendLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const labelList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        labelList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    legendLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/series/plugins/SeriesTooltip.ts

@@ -1,66 +1,66 @@
-import {
-  Subject,
-} from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineSeriesPlugin } from '../../../lib/core'
-import { DEFAULT_SERIES_TOOLTIP_PARAMS } from '../defaults'
-import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
-import { createBaseTooltip } from '../../base/BaseTooltip'
-
-const pluginName = 'SeriesTooltip'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SERIES_TOOLTIP_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_SERIES_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 SeriesTooltip = defineSeriesPlugin(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 {
+  defineSeriesPlugin } from '../../../lib/core'
+import { DEFAULT_SERIES_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'SeriesTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SERIES_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_SERIES_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 SeriesTooltip = defineSeriesPlugin(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()
+  }
+})

package/src/series/seriesObservables.ts

@@ -1,145 +1,168 @@
-import * as d3 from 'd3'
-import {
-  Observable,
-  Subject,
-  of,
-  takeUntil,
-  filter,
-  first,
-  map,
-  switchMap,
-  combineLatest,
-  merge,
-  shareReplay,
-  distinctUntilChanged
-} from 'rxjs'
-import type {
-  ContainerPosition } from '../../lib/core-types'
-import { getClassName, getUniID } from '../utils/orbchartsUtils'
-
-function createSeriesSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  separateSeries$: Observable<boolean>
-  seriesLabels$: Observable<string[]>
-}) {
-  const seriesClassName = getClassName(pluginName, 'series')
-  
-  return combineLatest({
-    seriesLabels: seriesLabels$,
-    separateSeries: separateSeries$
-  }).pipe(
-    switchMap(async d => d),
-    map((data, i) => {
-      const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')]
-      return selection
-        .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
-        .data(selectionData, d => d)
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .classed(seriesClassName, true)
-          },
-          update => update,
-          exit => exit.remove()
-        )
-    }),
-    shareReplay(1)
-  )
-}
-
-// series選取器，以起始座標位置為基準
-export const seriesStartSelectionObservable = ({ selection, pluginName, separateSeries$, seriesLabels$, seriesContainerPosition$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  separateSeries$: Observable<boolean>
-  seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<ContainerPosition[]>
-}) => {
-  
-  const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })
-
-  combineLatest({
-    seriesStartSelection: seriesStartSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-    // selection數量相同的時候才執行
-    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
-  ).subscribe(data => {
-    // 無transition動畫
-    data.seriesStartSelection
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
-      })
-  })
-
-  combineLatest({
-    seriesStartSelection: seriesStartSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-  ).subscribe(data => {
-    // 有transition動畫
-    data.seriesStartSelection
-      .transition()
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
-      })
-  })
-
-  return {
-    seriesStartSelection$
-  }
-}
-
-// series選取器，以中心座標位置為基準
-export const seriesCenterSelectionObservable = ({ selection, pluginName, separateSeries$, seriesLabels$, seriesContainerPosition$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  separateSeries$: Observable<boolean>
-  seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<ContainerPosition[]>
-}) => {
-  
-  const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })
-
-  combineLatest({
-    seriesCenterSelection: seriesCenterSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-    // selection數量相同的時候才執行
-    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
-  ).subscribe(data => {
-    // 無transition動畫
-    data.seriesCenterSelection
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
-      })
-  })
-
-  combineLatest({
-    seriesCenterSelection: seriesCenterSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-  ).subscribe(data => {
-    // 有transition動畫
-    data.seriesCenterSelection
-      .transition()
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
-      })
-  })
-
-  return {
-    seriesCenterSelection$,
-  }
-}
-
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ContainerPosition,
+  ComputedDatumSeries } from '../../lib/core-types'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+function createSeriesSelection ({ selection, pluginName, visibleComputedSortedData$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  // separateSeries$: Observable<boolean>
+  // separateLabel$: Observable<boolean>
+  // seriesLabels$: Observable<string[]>
+  // datumLabels$: Observable<string[]>
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+}) {
+  const seriesClassName = getClassName(pluginName, 'series')
+  
+  return visibleComputedSortedData$.pipe(
+    map(data => data.map(series => series[0] ? `${series[0].seriesLabel}_${series[0].label}` : '')),
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    map(data => {
+      return selection
+      .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+      .data(data, d => d)
+      .join(
+        enter => {
+          return enter
+            .append('g')
+            .classed(seriesClassName, true)
+        },
+        update => update,
+        exit => exit.remove()
+      )
+    }),
+    shareReplay(1)
+  )
+
+
+  // return combineLatest({
+  //   seriesLabels: seriesLabels$,
+  //   separateSeries: separateSeries$
+  // }).pipe(
+  //   switchMap(async d => d),
+  //   map((data, i) => {
+  //     const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')]
+  //     return selection
+  //       .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+  //       .data(selectionData, d => d)
+  //       .join(
+  //         enter => {
+  //           return enter
+  //             .append('g')
+  //             .classed(seriesClassName, true)
+  //         },
+  //         update => update,
+  //         exit => exit.remove()
+  //       )
+  //   }),
+  //   shareReplay(1)
+  // )
+}
+
+// series選取器，以起始座標位置為基準
+export const seriesStartSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+}) => {
+  
+  const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
+
+  combineLatest({
+    seriesStartSelection: seriesStartSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+    // selection數量不同的時候才執行
+    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
+  ).subscribe(data => {
+    // 無transition動畫
+    data.seriesStartSelection
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
+      })
+  })
+
+  combineLatest({
+    seriesStartSelection: seriesStartSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+  ).subscribe(data => {
+    // 有transition動畫
+    data.seriesStartSelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
+      })
+  })
+
+  return {
+    seriesStartSelection$
+  }
+}
+
+// series選取器，以中心座標位置為基準
+export const seriesCenterSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+}) => {
+  
+  const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
+
+  combineLatest({
+    seriesCenterSelection: seriesCenterSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+    // selection數量相同的時候才執行
+    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
+  ).subscribe(data => {
+    // 無transition動畫
+    data.seriesCenterSelection
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
+      })
+  })
+
+  combineLatest({
+    seriesCenterSelection: seriesCenterSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+  ).subscribe(data => {
+    // 有transition動畫
+    data.seriesCenterSelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
+      })
+  })
+
+  return {
+    seriesCenterSelection$,
+  }
+}
+