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

package/src/series/plugins/PieEventTexts.ts

@@ -6,16 +6,23 @@ import {
   takeUntil,
   map,
   distinctUntilChanged,
+  Observable,
   Subject } from 'rxjs'
 import type { Subscription } from 'rxjs'
 import {
   defineSeriesPlugin} from '@orbcharts/core'
 import type {
+  ComputedDatumSeries,
+  ChartParams,
+  SeriesContainerPosition,
   EventName,
   EventSeries } from '@orbcharts/core'
+import type { PieEventTextsParams } from '../types'
 import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
 import { getD3TransitionEase } from '../../utils/d3Utils'
 import { getClassName } from '../../utils/orbchartsUtils'
+import { seriesCenterSelectionObservable } from '../seriesObservables'
+
 
 type TextDatum = {
   text: string
@@ -74,62 +81,67 @@ function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles
   })
 }
 
-
-
-export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
-  
+function createEachPieEventTexts (pluginName: string, context: {
+  containerSelection: d3.Selection<SVGGElement, any, any, unknown>
+  computedData$: Observable<ComputedDatumSeries[][]>
+  containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+  fullParams$: Observable<PieEventTextsParams>
+  fullChartParams$: Observable<ChartParams>
+  seriesHighlight$: Observable<ComputedDatumSeries[]>
+  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  event$: Subject<EventSeries>
+}) {
   const destroy$ = new Subject()
 
-  const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
+  // const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
   let centerTextSelection: d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> | undefined
   let storeEventSubscription: Subscription | undefined
 
-  observer.layout$
-    .pipe(
-      first()
-    )
-    .subscribe(size => {
-      selection
-        .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-      observer.layout$
-        .pipe(
-          takeUntil(destroy$)
-        )
-        .subscribe(size => {
-          selection
-            .transition()
-            .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-        })
-    })
-
+  // context.layout$
+  //   .pipe(
+  //     first()
+  //   )
+  //   .subscribe(size => {
+  //     selection
+  //       .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //     context.layout$
+  //       .pipe(
+  //         takeUntil(destroy$)
+  //       )
+  //       .subscribe(size => {
+  //         selection
+  //           .transition()
+  //           .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //       })
+  //   })
 
-  const highlightTarget$ = observer.fullChartParams$.pipe(
+  const highlightTarget$ = context.fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => d.highlightTarget),
     distinctUntilChanged()
   )
 
   combineLatest({
-    computedData: observer.computedData$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$,
-    highlightTarget: highlightTarget$
+    computedData: context.computedData$,
+    fullParams: context.fullParams$,
+    fullChartParams: context.fullChartParams$,
+    highlightTarget: highlightTarget$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    graphicSelection
-      .transition()
+    context.containerSelection
+      .transition('move')
       .duration(data.fullChartParams.transitionDuration!)
-      .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
+      // .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
       .tween('move', (event, datum) => {
         return (t) => {
           const renderData = makeTextData({
             eventData: {
               type: 'series',
-              pluginName: name,
+              pluginName,
               eventName: 'transitionMove',
               event,
               highlightTarget: data.highlightTarget,
@@ -145,14 +157,14 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
             textAttrs: data.fullParams.textAttrs!,
             textStyles: data.fullParams.textStyles!
           })
-          centerTextSelection = renderText(graphicSelection, renderData)
+          centerTextSelection = renderText(context.containerSelection, renderData)
         }
       })
       .on('end', (event, datum) => {
         const renderData = makeTextData({
           eventData: {
             type: 'series',
-            pluginName: name,
+            pluginName,
             eventName: 'transitionEnd',
             event,
             highlightTarget: data.highlightTarget,
@@ -168,12 +180,12 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
           textAttrs: data.fullParams.textAttrs!,
           textStyles: data.fullParams.textStyles!
         })
-        centerTextSelection = renderText(graphicSelection, renderData)
+        centerTextSelection = renderText(context.containerSelection, renderData)
 
         if (storeEventSubscription) {
           storeEventSubscription.unsubscribe()
         }
-        storeEventSubscription = subject.event$
+        storeEventSubscription = context.event$
           .subscribe(eventData => {
             const renderData = makeTextData({
               eventData,
@@ -183,7 +195,7 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
               textAttrs: data.fullParams.textAttrs!,
               textStyles: data.fullParams.textStyles!
             })
-            centerTextSelection = renderText(graphicSelection, renderData)
+            centerTextSelection = renderText(context.containerSelection, renderData)
           })
       })
   })
@@ -191,4 +203,56 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
   return () => {
     destroy$.next(undefined)
   }
+}
+
+export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
+  const destroy$ = new Subject()
+
+  const { seriesCenterSelection$ } = seriesCenterSelectionObservable({
+    selection: selection,
+    pluginName,
+    separateSeries$: observer.separateSeries$,
+    seriesLabels$: observer.seriesLabels$,
+    seriesContainerPosition$: observer.seriesContainerPosition$
+  })
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  seriesCenterSelection$.subscribe(seriesCenterSelection => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    seriesCenterSelection.each((d, containerIndex, g) => { 
+      
+      const containerSelection = d3.select(g[containerIndex])
+
+      const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      const containerPosition$ = observer.seriesContainerPosition$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      unsubscribeFnArr[containerIndex] = createEachPieEventTexts(pluginName, {
+        containerSelection: containerSelection,
+        computedData$: observer.computedData$,
+        containerComputedLayoutData$: containerComputedLayoutData$,
+        SeriesDataMap$: observer.SeriesDataMap$,
+        fullParams$: observer.fullParams$,
+        fullChartParams$: observer.fullChartParams$,
+        seriesHighlight$: observer.seriesHighlight$,
+        seriesContainerPosition$: containerPosition$,
+        event$: subject.event$,
+      })
+
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
 })

package/src/series/plugins/PieLabels.ts

@@ -5,11 +5,15 @@ import {
   first,
   map,
   takeUntil,
+  Observable,
   Subject,
   BehaviorSubject } from 'rxjs'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
 import type {
+  ComputedDatumSeries,
+  SeriesContainerPosition,
+  EventSeries,
   ChartParams } from '@orbcharts/core'
 import type { PieLabelsParams } from '../types'
 import type { PieDatum } from '../seriesUtils'
@@ -17,6 +21,7 @@ import { DEFAULT_PIE_LABELS_PARAMS } from '../defaults'
 import { makePieData } from '../seriesUtils'
 import { makeD3Arc } from '../../utils/d3Utils'
 import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
+import { seriesCenterSelectionObservable } from '../seriesObservables'
 
 interface RenderDatum {
   pieDatum: PieDatum
@@ -152,52 +157,42 @@ function highlight ({ labelSelection, ids, fullChartParams }: {
 }
 
 
-// function removeHighlight ({ labelSelection }: {
-//   labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any> | undefined)
-// }) {
-//   if (!labelSelection) {
-//     return
-//   }
-  
-//   // 取消放大
-//   labelSelection
-//     .transition()
-//     .duration(200)
-//     .attr('transform', (d) => {
-//       return 'translate(' + d.x + ',' + d.y + ')'
-//     })
-//     .style('opacity', 1)
-
-// }
-
-
-export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
-  
+function createEachPieLabel (pluginName: string, context: {
+  containerSelection: d3.Selection<SVGGElement, any, any, unknown>
+  // computedData$: Observable<ComputedDatumSeries[][]>
+  containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+  fullParams$: Observable<PieLabelsParams>
+  fullChartParams$: Observable<ChartParams>
+  seriesHighlight$: Observable<ComputedDatumSeries[]>
+  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  event$: Subject<EventSeries>
+}) {
   const destroy$ = new Subject()
 
-  const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
+  // const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
   let labelSelection$: Subject<d3.Selection<SVGPathElement, RenderDatum, any, any>> = new Subject()
   let renderData: RenderDatum[] = []
   // let highlightTarget: HighlightTarget | undefined
   // let fullChartParams: ChartParams | undefined
 
-  observer.layout$
-    .pipe(
-      first()
-    )
-    .subscribe(size => {
-      selection
-        .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-      observer.layout$
-        .pipe(
-          takeUntil(destroy$)
-        )
-        .subscribe(size => {
-          selection
-            .transition()
-            .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-        })
-    })
+  // observer.layout$
+  //   .pipe(
+  //     first()
+  //   )
+  //   .subscribe(size => {
+  //     selection
+  //       .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //     observer.layout$
+  //       .pipe(
+  //         takeUntil(destroy$)
+  //       )
+  //       .subscribe(size => {
+  //         selection
+  //           .transition()
+  //           .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //       })
+  //   })
 
   
 
@@ -222,13 +217,12 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
   // })
 
   combineLatest({
-    layout: observer.layout$,
-    computedData: observer.computedData$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
+    layout: context.seriesContainerPosition$,
+    containerComputedLayoutData: context.containerComputedLayoutData$,
+    fullParams: context.fullParams$,
+    fullChartParams: context.fullChartParams$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
 
@@ -252,14 +246,14 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
     })
 
     const pieData = makePieData({
-      computedDataSeries: data.computedData,
+      data: data.containerComputedLayoutData,
       startAngle: data.fullParams.startAngle,
       endAngle: data.fullParams.endAngle
     })
 
     renderData = makeRenderData(pieData, arc, arcMouseover, data.fullParams.labelCentroid)
 
-    const labelSelection = renderLabel(graphicSelection, renderData, data.fullParams, data.fullChartParams)
+    const labelSelection = renderLabel(context.containerSelection, renderData, data.fullParams, data.fullChartParams)
 
     labelSelection$.next(labelSelection)
 
@@ -267,10 +261,10 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
   
   combineLatest({
     labelSelection: labelSelection$,
-    highlight: observer.seriesHighlight$.pipe(
+    highlight: context.seriesHighlight$.pipe(
       map(data => data.map(d => d.id))
     ),
-    fullChartParams: observer.fullChartParams$,
+    fullChartParams: context.fullChartParams$,
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -282,6 +276,59 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
     })
   })
 
+  return () => {
+    destroy$.next(undefined)
+  }
+}
+
+
+export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const { seriesCenterSelection$ } = seriesCenterSelectionObservable({
+    selection: selection,
+    pluginName,
+    separateSeries$: observer.separateSeries$,
+    seriesLabels$: observer.seriesLabels$,
+    seriesContainerPosition$: observer.seriesContainerPosition$
+  })
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  seriesCenterSelection$.subscribe(seriesCenterSelection => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    seriesCenterSelection.each((d, containerIndex, g) => { 
+      
+      const containerSelection = d3.select(g[containerIndex])
+
+      const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      const containerPosition$ = observer.seriesContainerPosition$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
+        containerSelection: containerSelection,
+        // computedData$: observer.computedData$,
+        containerComputedLayoutData$: containerComputedLayoutData$,
+        // SeriesDataMap$: observer.SeriesDataMap$,
+        fullParams$: observer.fullParams$,
+        fullChartParams$: observer.fullChartParams$,
+        seriesHighlight$: observer.seriesHighlight$,
+        seriesContainerPosition$: containerPosition$,
+        event$: subject.event$,
+      })
+
+    })
+  })
+
   return () => {
     destroy$.next(undefined)
   }

package/src/series/seriesObservables.ts

@@ -0,0 +1,145 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  SeriesContainerPosition } from '@orbcharts/core'
+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<SeriesContainerPosition[]>
+}) => {
+  
+  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<SeriesContainerPosition[]>
+}) => {
+  
+  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$,
+  }
+}
+

package/src/series/seriesUtils.ts

@@ -17,8 +17,8 @@ export interface PieDatum extends D3PieDatum {
   id: string
 }
 
-export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
-  computedDataSeries: ComputedDataSeries
+export function makePieData ({ data, startAngle, endAngle }: {
+  data: ComputedDatumSeries[]
   startAngle: number
   endAngle: number
   // itemLabels: string[]
@@ -30,12 +30,12 @@ export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
     .endAngle(endAngle)
     .value((d) => d.visible == false ? 0 : d.value)
     // .sort(null) // 不要排序
-    .sort((a, b) => a.sortedIndex - b.sortedIndex)
+    .sort((a, b) => a.seq - b.seq)
     // .sort((a: any, b: any) => {
     //   return b.value - a.value
     // })
     // .sort(d3.ascending)
-  const pieData = pie(computedDataSeries)
+  const pieData = pie(data)
   return pieData.map((d: D3PieDatum, i: number) => {
     // const itemLabel = d.data.itemLabel
     let _d: any = d

package/tsconfig.json

@@ -9,6 +9,6 @@
     "allowJs": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports" : true,
-    "esModuleInterop" : true,
+    "esModuleInterop" : true
   }
 }