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

package/src/series/plugins/Bubbles.ts

@@ -14,7 +14,8 @@ import type {
   DataSeries,
   EventName,
   ComputedDataSeries,
-  ComputedDatumSeries } from '@orbcharts/core'
+  ComputedDatumSeries,
+  SeriesContainerPosition } from '@orbcharts/core'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
 import type { BubblesParams, BubbleScaleType } from '../types'
@@ -28,6 +29,8 @@ interface BubblesDatum extends ComputedDatumSeries {
   _originR: number // 紀錄變化前的r
 }
 
+type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
+
 let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
 function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
@@ -81,11 +84,12 @@ function getMaxR ({ data, bubbleGroupR, maxValue, avgValue }: {
   return maxR * modifier
 }
 
-function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, scaleType }: {
+function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, SeriesContainerPositionMap, scaleType }: {
   data: ComputedDataSeries
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
+  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
   scaleType: BubbleScaleType
   // highlightIds: string[]
 }) {
@@ -124,8 +128,9 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
       d.x = existDatum.x
       d.y = existDatum.y
     } else {
-      d.x = Math.random() * graphicWidth
-      d.y = Math.random() * graphicHeight
+      const seriesContainerPosition = SeriesContainerPositionMap.get(d.seriesLabel)!
+      d.x = Math.random() * seriesContainerPosition.width
+      d.y = Math.random() * seriesContainerPosition.height
     }
     const r = scaleBubbleR!(d.value ?? 0)!
     d.r = r
@@ -137,46 +142,55 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
   return bubbleData
 }
 
-function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
+function renderBubbles ({ graphicSelection, bubblesData, fullParams, sumSeries }: {
   graphicSelection: d3.Selection<SVGGElement, any, any, any>
   bubblesData: BubblesDatum[]
   fullParams: BubblesParams
+  sumSeries: boolean
 }) {
-  let update = graphicSelection.selectAll<SVGGElement, BubblesDatum>("g")
+  const bubblesSelection = graphicSelection.selectAll<SVGGElement, BubblesDatum>("g")
     .data(bubblesData, (d) => d.id)
-  let enter = update.enter()
-    .append<SVGGElement>("g")
-    .attr('cursor', 'pointer')
-  enter
-    .attr('font-size', 12)
-    .style('fill', '#ffffff')
-    .attr("text-anchor", "middle")
+    .join(
+      enter => {
+        const enterSelection = enter
+          .append('g')
+          .attr('cursor', 'pointer')
+          .attr('font-size', 12)
+          .style('fill', '#ffffff')
+          .attr("text-anchor", "middle")
+        
+        enterSelection
+          .append("circle")
+          .attr("class", "node")
+          .attr("cx", 0)
+          .attr("cy", 0)
+          // .attr("r", 1e-6)
+          .attr('fill', (d) => d.color)
+          // .transition()
+          // .duration(500)
+            
+        enterSelection
+          .append('text')
+          .style('opacity', 0.8)
+          .attr('pointer-events', 'none')
+
+        return enterSelection
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit
+          .remove()
+      }
+    )
     .attr("transform", (d) => {
       return `translate(${d.x},${d.y})`
     })
-    // .attr("cx", (d) => d.x)
-    // .attr("cy", (d) => d.y)
-
-  enter
-      .append("circle")
-      .attr("class", "node")
-// update.merge(enter)
-      .attr("cx", 0)
-      .attr("cy", 0)
-      // .attr("r", 1e-6)
-      .attr('fill', (d) => d.color)
-      // .transition()
-      // .duration(500)
-      
-  enter
-    .append('text')
-    .style('opacity', 0.8)
-    .attr('pointer-events', 'none')
-
-  update.exit().remove()
-
-  const bubblesSelection = update.merge(enter)
 
+  // 泡泡文字要使用的的資料欄位
+  const textDataColumn = sumSeries ? 'seriesLabel' : 'label'// 如果有合併series則使用seriesLabel
+    
   bubblesSelection.select('circle')
     .transition()
     .duration(200)
@@ -186,11 +200,11 @@ function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
     .each((d,i,g) => {
       const gSelection = d3.select(g[i])
       let breakAll = true
-      if (d.label.length <= fullParams.bubbleText.lineLengthMin) {
+      if (d[textDataColumn].length <= fullParams.bubbleText.lineLengthMin) {
         breakAll = false
       }
       gSelection.call(renderCircleText, {
-        text: d.label,
+        text: d[textDataColumn],
         radius: d.r * fullParams.bubbleText.fillRate,
         lineHeight: fullParams.bubbleText.lineHeight,
         isBreakAll: breakAll
@@ -253,16 +267,22 @@ function drag (): d3.DragBehavior<Element, unknown, unknown> {
 //   return typeCenter ? typeCenter.x : 0
 // }
 
-function groupBubbles ({ fullParams, graphicWidth, graphicHeight }: {
+function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
   fullParams: BubblesParams
-  graphicWidth: number
-  graphicHeight: number
+  // graphicWidth: number
+  // graphicHeight: number
+  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
 }) {
+  // console.log('groupBubbles')
   force!
     // .force('x', d3.forceX().strength(fullParams.force.strength).x(graphicWidth / 2))
     // .force('y', d3.forceY().strength(fullParams.force.strength).y(graphicHeight / 2))
-    .force('x', d3.forceX().strength(fullParams.force.strength).x(0))
-    .force('y', d3.forceY().strength(fullParams.force.strength).y(0))
+    .force('x', d3.forceX().strength(fullParams.force.strength).x((data: BubblesSimulationDatum) => {
+      return SeriesContainerPositionMap.get(data.seriesLabel)!.centerX
+    }))
+    .force('y', d3.forceY().strength(fullParams.force.strength).y((data: BubblesSimulationDatum) => {
+      return SeriesContainerPositionMap.get(data.seriesLabel)!.centerY
+    }))
 
   force!.alpha(1).restart();
 }
@@ -303,7 +323,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   const destroy$ = new Subject()
 
   const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
-  const bubblesSelection$: Subject<d3.Selection<SVGGElement, BubblesDatum, any, any>> = new Subject()
+  // const bubblesSelection$: Subject<d3.Selection<SVGGElement, BubblesDatum, any, any>> = new Subject()
   // 紀錄前一次bubble data
   let LastBubbleDataMap: Map<string, BubblesDatum> = new Map()
 
@@ -312,23 +332,27 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   //   force = makeForce(bubblesSelection, d)
   // })
 
-  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.seriesContainerPosition$.subscribe(d => {
+  //   console.log(d)
+  // })
+
+  // 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})`)
+  //       })
+  //   })
 
   // const bubbleGroupR$ = layout$.pipe(
   //   map(d => {
@@ -361,6 +385,11 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   //   map(d => makeSeriesDataMap(d))
   // )
 
+  const sumSeries$ = observer.fullDataFormatter$.pipe(
+    map(d => d.sumSeries),
+    distinctUntilChanged()
+  )
+
   const scaleType$ = observer.fullParams$.pipe(
     takeUntil(destroy$),
     map(d => d.bubbleScaleType),
@@ -370,18 +399,20 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   const bubblesData$ = new Observable<BubblesDatum[]>(subscriber => {
     combineLatest({
       layout: observer.layout$,
-      computedData: observer.computedData$,
+      SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
+      visibleComputedLayoutData: observer.visibleComputedLayoutData$,
       scaleType: scaleType$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
+      // console.log(data.visibleComputedLayoutData)
       const bubblesData = createBubblesData({
-        data: data.computedData,
+        data: data.visibleComputedLayoutData,
         LastBubbleDataMap,
         graphicWidth: data.layout.width,
         graphicHeight: data.layout.height,
+        SeriesContainerPositionMap: data.SeriesContainerPositionMap,
         scaleType: data.scaleType
       })
       subscriber.next(bubblesData)
@@ -399,30 +430,54 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
     distinctUntilChanged()
   )
 
+  const bubblesSelection$ = combineLatest({
+    bubblesData: bubblesData$,
+    fullParams: observer.fullParams$,
+    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
+    sumSeries: sumSeries$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      const bubblesSelection = renderBubbles({
+        graphicSelection,
+        bubblesData: data.bubblesData,
+        fullParams: data.fullParams,
+        sumSeries: data.sumSeries
+      })
+      
+      force = makeForce(bubblesSelection, data.fullParams)
+
+      force.nodes(data.bubblesData)
+
+      groupBubbles({
+        fullParams: data.fullParams,
+        SeriesContainerPositionMap: data.SeriesContainerPositionMap
+        // graphicWidth: data.layout.width,
+        // graphicHeight: data.layout.height
+      })
+
+      return bubblesSelection
+    })
+  )
+  
   combineLatest({
+    bubblesSelection: bubblesSelection$,
     layout: observer.layout$,
     computedData: observer.computedData$,
     bubblesData: bubblesData$,
     SeriesDataMap: observer.SeriesDataMap$,
     fullParams: observer.fullParams$,
-    highlightTarget: highlightTarget$
+    highlightTarget: highlightTarget$,
+    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
     // fullChartParams: fullChartParams$
     // highlight: highlight$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-    switchMap(async (d) => d),
+    switchMap(async (d) => d)
   ).subscribe(data => {
 
-    const bubblesSelection = renderBubbles({
-      graphicSelection,
-      bubblesData: data.bubblesData,
-      fullParams: data.fullParams
-    })
-    
-    force = makeForce(bubblesSelection, data.fullParams)
-
-    bubblesSelection
+    data.bubblesSelection
       .on('mouseover', (event, datum) => {
         // this.tooltip!.setDatum({
         //   data: d,
@@ -495,15 +550,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
       })
       .call(drag() as any)
 
-    force!.nodes(data.bubblesData);
-
-    groupBubbles({
-      fullParams: data.fullParams,
-      graphicWidth: data.layout.width,
-      graphicHeight: data.layout.height
-    })
-
-    bubblesSelection$.next(bubblesSelection)
+    
   })
 
   combineLatest({
@@ -514,7 +561,9 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
     ),
     fullChartParams: observer.fullChartParams$,
     fullParams: observer.fullParams$,
-    layout: observer.layout$
+    sumSeries: sumSeries$,
+    // layout: observer.layout$,
+    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -534,14 +583,16 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
       renderBubbles({
         graphicSelection,
         bubblesData: data.bubblesData,
-        fullParams: data.fullParams
+        fullParams: data.fullParams,
+        sumSeries: data.sumSeries
       })
     }
     
     groupBubbles({
       fullParams: data.fullParams,
-      graphicWidth: data.layout.width,
-      graphicHeight: data.layout.height
+      SeriesContainerPositionMap: data.SeriesContainerPositionMap
+      // graphicWidth: data.layout.width,
+      // graphicHeight: data.layout.height
     })
     force!.nodes(data.bubblesData);
   })