@orbcharts/plugins-basic 3.0.0-beta.8 → 3.0.0

package/src/series/defaults.ts

@@ -18,26 +18,20 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
     collisionSpacing: 2 // 泡泡間距
   },
   bubbleLabel: {
+    colorType: 'labelContrast',
     fillRate: 0.6,
-    lineHeight: 12,
-    lineLengthMin: 4
+    lineHeight: 1,
+    maxLineLength: 6,
+    wordBreakAll: true,
   },
   // highlightRIncrease: 0,
   arcScaleType: 'area'
 }
 
 export const DEFAULT_PIE_PARAMS: PieParams = {
-  // padding: {
-  //   top: 50,
-  //   right: 70,
-  //   bottom: 50,
-  //   left: 70
-  // },
   outerRadius: 0.85,
   innerRadius: 0,
   outerRadiusWhileHighlight: 0.9,
-  // label?: LabelStyle
-  // enterDuration: 800,
   startAngle: 0,
   endAngle: Math.PI * 2,
   padAngle: 0,
@@ -45,9 +39,6 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
   strokeWidth: 1,
   // padRadius: 100,
   cornerRadius: 0,
-  // highlightTarget: 'datum',
-  // highlightId: null,
-  // highlightLabel: null,
 }
 
 export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
@@ -117,17 +108,17 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
 DEFAULT_PIE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
 
 export const DEFAULT_ROSE_PARAMS: RoseParams = {
-  outerRadius: 0.85,
+  outerRadius: 0.95,
   padAngle: 0,
   strokeColorType: 'background',
-  strokeWidth: 0,
+  strokeWidth: 0.5,
   cornerRadius: 0,
   arcScaleType: 'area',
   angleIncreaseWhileHighlight: 0.05
 }
 
 export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
-  outerRadius: 0.85,
+  outerRadius: 0.95,
   labelCentroid: 2.1,
   labelFn: d => String(d.label),
   labelColorType: 'primary',
@@ -161,6 +152,7 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
   renderFn: (eventData, { styles, utils }) => {
     const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
     const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
+    const valueText = utils.toCurrency(eventData.datum.value)
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
     const seriesSvg = hasSeriesLabel
@@ -172,8 +164,19 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const seriesLabelTextWidth = hasSeriesLabel
+      ? utils.measureTextWidth(`${eventData.seriesLabel}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${valueText}`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 1.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</tspan>
   </text>`
 
     return `${seriesSvg}
@@ -183,25 +186,37 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
   },
 }
 DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
-    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
-    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
-    const bulletWidth = styles.textSizePx * 0.7
-    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
-    const seriesSvg = hasSeriesLabel
-      ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
-  <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    <tspan>\${eventData.seriesLabel}</tspan>
-  </text>\`
-      : ''
-    const datumLabelSvg = hasDatumLabel
-      ? \`<tspan>\${eventData.datum.label}</tspan>  \`
-      : ''
-    const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
-  </text>\`
+  const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
+  const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
+  const valueText = utils.toCurrency(eventData.datum.value)
+  const bulletWidth = styles.textSizePx * 0.7
+  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+  const seriesSvg = hasSeriesLabel
+    ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
+<text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+  <tspan>\${eventData.seriesLabel}</tspan>
+</text>\`
+    : ''
+  const datumLabelSvg = hasDatumLabel
+    ? \`<tspan>\${eventData.datum.label}</tspan>  \`
+    : ''
+  const seriesLabelTextWidth = hasSeriesLabel
+    ? utils.measureTextWidth(\`\${eventData.seriesLabel}\${valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+    : 0
+  const datumLabelTextWidth = hasDatumLabel
+    ? utils.measureTextWidth(\`\${eventData.datum.label}\${valueText}\`, styles.textSizePx)
+    : 0
+  const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+  const lineEndX = hasDatumLabel
+    ? maxTextWidth + styles.textSizePx * 1.5
+    : 0
+  const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
+  const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+  \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
+</text>\`
 
-    return \`\${seriesSvg}
-  <g \${hasSeriesLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
-    \${datumSvg}
-  </g>\`
+  return \`\${seriesSvg}
+<g \${hasSeriesLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+  \${datumSvg}
+</g>\`
 }`

package/src/series/plugins/Bubbles.ts

@@ -5,6 +5,7 @@ import {
   switchMap,
   first,
   takeUntil,
+  debounceTime,
   Subject, 
   Observable,
   distinctUntilChanged,
@@ -24,6 +25,7 @@ import type { BubblesParams, ArcScaleType } from '../../../lib/plugins-basic-typ
 import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+import { getDatumColor } from '../../utils/orbchartsUtils'
 
 interface BubblesDatum extends ComputedDatumSeries {
   x: number
@@ -36,6 +38,8 @@ type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
 
 const pluginName = 'Bubbles'
 
+const baseLineHeight = 12 // 未變形前的字體大小（代入計算用而已，數字多少都不會有影響）
+
 const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES_PARAMS> = {
   name: pluginName,
   defaultParams: DEFAULT_BUBBLES_PARAMS,
@@ -71,13 +75,16 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
     }
     if (params.bubbleLabel) {
       const bubbleLabelResult = validateColumns(params.bubbleLabel, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
         fillRate: {
           toBeTypes: ['number']
         },
         lineHeight: {
           toBeTypes: ['number']
         },
-        lineLengthMin: {
+        maxLineLength: {
           toBeTypes: ['number']
         },
       })
@@ -89,9 +96,10 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
   }
 }
 
-let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
-function makeForce (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, any, any>, fullParams: BubblesParams) {
+// let isRunning = false
+
+function createSimulation (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, any, any>, fullParams: BubblesParams) {
   return d3.forceSimulation()
     .velocityDecay(fullParams.force!.velocityDecay!)
     // .alphaDecay(0.2)
@@ -120,7 +128,12 @@ function makeForce (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, an
         })
         // .attr("cx", (d) => d.x)
         // .attr("cy", (d) => d.y)
+
+      
     })
+    // .on("end", () => {
+      
+    // })
 
 }
 
@@ -143,8 +156,8 @@ function makeForce (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, an
 //   return maxR * modifier
 // }
 
-function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, graphicWidth, graphicHeight, SeriesContainerPositionMap, scaleType }: {
-  visibleComputedLayoutData: ComputedDataSeries
+function createBubblesData ({ visibleComputedSortedData, LastBubbleDataMap, graphicWidth, graphicHeight, SeriesContainerPositionMap, scaleType }: {
+  visibleComputedSortedData: ComputedDataSeries
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
@@ -155,7 +168,7 @@ function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, grap
   // 虛擬大圓（所有小圓聚合起來的大圓）的半徑
   const totalR = Math.min(...[graphicWidth, graphicHeight]) / 2
 
-  const data = visibleComputedLayoutData.flat()
+  const data = visibleComputedSortedData.flat()
 
   const totalValue = data.reduce((acc, current) => acc + current.value, 0)
 
@@ -202,10 +215,11 @@ function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, grap
   })
 }
 
-function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
+function renderBubbles ({ selection, bubblesData, fullParams, fullChartParams, sumSeries }: {
   selection: d3.Selection<SVGGElement, any, any, any>
   bubblesData: BubblesDatum[]
   fullParams: BubblesParams
+  fullChartParams: ChartParams
   sumSeries: boolean
 }) {
   const bubblesSelection = selection.selectAll<SVGGElement, BubblesDatum>("g")
@@ -215,7 +229,7 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
         const enterSelection = enter
           .append('g')
           .attr('cursor', 'pointer')
-          .attr('font-size', 12)
+          .attr('font-size', baseLineHeight)
           .style('fill', '#ffffff')
           .attr("text-anchor", "middle")
         
@@ -259,17 +273,24 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
   bubblesSelection
     .each((d,i,g) => {
       const gSelection = d3.select(g[i])
-      let breakAll = true
-      if (d[textDataColumn].length <= fullParams.bubbleLabel.lineLengthMin) {
-        breakAll = false
-      }
+      const text = d[textDataColumn] ?? ''
+      
       gSelection.call(renderCircleText, {
-        text: d[textDataColumn],
+        text,
         radius: d.r * fullParams.bubbleLabel.fillRate,
-        lineHeight: fullParams.bubbleLabel.lineHeight,
-        isBreakAll: breakAll
+        lineHeight: baseLineHeight * fullParams.bubbleLabel.lineHeight,
+        isBreakAll: text.length <= fullParams.bubbleLabel.maxLineLength
+          ? false
+          : fullParams.bubbleLabel.wordBreakAll
       })
 
+      // -- text color --
+      gSelection.select('text').attr('fill', _ => getDatumColor({
+        datum: d,
+        colorType: fullParams.bubbleLabel.colorType,
+        fullChartParams: fullChartParams
+      }))
+
     })
 
   return bubblesSelection
@@ -297,18 +318,18 @@ function setHighlightData ({ data, highlightRIncrease, highlightIds }: {
   })
 }
 
-function drag (): d3.DragBehavior<Element, unknown, unknown> {
+function drag (_simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>): d3.DragBehavior<Element, unknown, unknown> {
   return d3.drag()
     .on("start", (event, d: any) => {
       if (!event.active) {
-        force!.alpha(1).restart()
+        _simulation!.alpha(1).restart()
       }
       d.fx = d.x
       d.fy = d.y
     })
     .on("drag", (event, d: any) => {
       if (!event.active) {
-        force!.alphaTarget(0)
+        _simulation!.alphaTarget(0)
       }
       d.fx = event.x
       d.fy = event.y
@@ -316,6 +337,7 @@ function drag (): d3.DragBehavior<Element, unknown, unknown> {
     .on("end", (event, d: any) => {
       d.fx = null
       d.fy = null
+      _simulation!.alpha(1).restart()
     })
 }
 
@@ -327,14 +349,15 @@ function drag (): d3.DragBehavior<Element, unknown, unknown> {
 //   return typeCenter ? typeCenter.x : 0
 // }
 
-function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
+function groupBubbles ({ _simulation, fullParams, SeriesContainerPositionMap }: {
+  _simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>
   fullParams: BubblesParams
   // graphicWidth: number
   // graphicHeight: number
   SeriesContainerPositionMap: Map<string, ContainerPosition>
 }) {
   // console.log('groupBubbles')
-  force!
+  _simulation!
     // .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((data: BubblesSimulationDatum) => {
@@ -344,7 +367,7 @@ function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
       return SeriesContainerPositionMap.get(data.seriesLabel)!.centerY
     }))
 
-  force!.alpha(1).restart()
+  // force!.alpha(1).restart()
 }
 
 function highlight ({ bubblesSelection, highlightIds, fullChartParams }: {
@@ -383,6 +406,8 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
   
   const destroy$ = new Subject()
 
+  let simulation: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
+
   // 紀錄前一次bubble data
   let LastBubbleDataMap: Map<string, BubblesDatum> = new Map()
 
@@ -401,15 +426,15 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
   const bubblesData$ = combineLatest({
     layout: observer.layout$,
     SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
-    visibleComputedLayoutData: observer.visibleComputedLayoutData$,
+    visibleComputedSortedData: observer.visibleComputedSortedData$,
     scaleType: scaleType$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      // console.log(data.visibleComputedLayoutData)
+      // console.log(data.visibleComputedSortedData)
       return createBubblesData({
-        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        visibleComputedSortedData: data.visibleComputedSortedData,
         LastBubbleDataMap,
         graphicWidth: data.layout.width,
         graphicHeight: data.layout.height,
@@ -434,41 +459,43 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
   const bubblesSelection$ = combineLatest({
     bubblesData: bubblesData$,
     fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$,
     SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
     sumSeries: sumSeries$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      if (force) {
-        force.stop()
+      if (simulation) {
+        // 先停止，重新計算之後再restart
+        simulation.stop()
       }
 
       const bubblesSelection = renderBubbles({
         selection,
         bubblesData: data.bubblesData,
         fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams,
         sumSeries: data.sumSeries
       })
       
-      force = makeForce(bubblesSelection, data.fullParams)
+      simulation = createSimulation(bubblesSelection, data.fullParams)
 
-      force.nodes(data.bubblesData)
+      simulation.nodes(data.bubblesData)
 
       groupBubbles({
+        _simulation: simulation,
         fullParams: data.fullParams,
         SeriesContainerPositionMap: data.SeriesContainerPositionMap
         // graphicWidth: data.layout.width,
         // graphicHeight: data.layout.height
       })
 
-      // setTimeout(() => {
-      //   force!.alphaTarget(0)
-      //   force!.alpha(1).restart()
-      // }, 2000)
+      simulation!.alpha(1).restart()
 
       return bubblesSelection
-    })
+    }),
+    shareReplay(1)
   )
   
   combineLatest({
@@ -552,22 +579,22 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
           data: data.computedData
         })
       })
-      .call(drag() as any)
+      .call(drag(simulation) as any)
 
     
   })
 
   combineLatest({
     bubblesSelection: bubblesSelection$,
-    bubblesData: bubblesData$,
+    // bubblesData: bubblesData$,
     highlight: observer.seriesHighlight$.pipe(
       map(data => data.map(d => d.id))
     ),
     fullChartParams: observer.fullChartParams$,
-    fullParams: observer.fullParams$,
-    sumSeries: sumSeries$,
-    // layout: observer.layout$,
-    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
+    // fullParams: observer.fullParams$,
+    // sumSeries: sumSeries$,
+    // // layout: observer.layout$,
+    // SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -598,8 +625,13 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
     // }
 
   })
+
   
   return () => {
     destroy$.next(undefined)
+    if (simulation) {
+      simulation.stop()
+      simulation = undefined
+    }
   }
 })

package/src/series/plugins/Pie.ts

@@ -205,7 +205,7 @@ function highlight ({ pathSelection, ids, fullChartParams, arc, arcHighlight }:
 function createEachPie (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   computedData$: Observable<ComputedDatumSeries[][]>
-  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  containerVisibleComputedSortedData$: Observable<ComputedDatumSeries[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<PieParams>
   fullChartParams$: Observable<ChartParams>
@@ -248,7 +248,7 @@ function createEachPie (pluginName: string, context: {
 
   const pieData$: Observable<PieDatum[]> = new Observable(subscriber => {
     combineLatest({
-      containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
+      containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
       fullParams: context.fullParams$,
     }).pipe(
       takeUntil(destroy$),
@@ -256,7 +256,7 @@ function createEachPie (pluginName: string, context: {
     ).subscribe(data => {
       // console.log('pieData', data)
       const pieData: PieDatum[] = makePieData({
-        data: data.containerVisibleComputedLayoutData,
+        data: data.containerVisibleComputedSortedData,
         startAngle: data.fullParams.startAngle,
         endAngle: data.fullParams.endAngle
       })
@@ -592,7 +592,7 @@ export const Pie = defineSeriesPlugin(pluginConfig)(({ selection, name, subject,
         // console.log('containerIndex', containerIndex)
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
+        const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
           takeUntil(destroy$),
           map(data => data[containerIndex] ?? data[0])
         )
@@ -605,7 +605,7 @@ export const Pie = defineSeriesPlugin(pluginConfig)(({ selection, name, subject,
         unsubscribeFnArr[containerIndex] = createEachPie(pluginName, {
           containerSelection: containerSelection,
           computedData$: observer.computedData$,
-          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
+          containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
           SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,

package/src/series/plugins/PieEventTexts.ts

@@ -105,7 +105,7 @@ function createTextData ({ eventData, renderFn, textAttrs, textStyles }: {
 function createEachPieEventTexts (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   computedData$: Observable<ComputedDatumSeries[][]>
-  containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  containerComputedSortedData$: Observable<ComputedDatumSeries[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<PieEventTextsParams>
   fullChartParams$: Observable<ChartParams>
@@ -252,7 +252,7 @@ export const PieEventTexts = defineSeriesPlugin(pluginConfig)(({ selection, name
         
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
+        const containerComputedSortedData$ = observer.computedSortedData$.pipe(
           takeUntil(destroy$),
           map(data => data[containerIndex] ?? data[0])
         )
@@ -265,7 +265,7 @@ export const PieEventTexts = defineSeriesPlugin(pluginConfig)(({ selection, name
         unsubscribeFnArr[containerIndex] = createEachPieEventTexts(pluginName, {
           containerSelection: containerSelection,
           computedData$: observer.computedData$,
-          containerComputedLayoutData$: containerComputedLayoutData$,
+          containerComputedSortedData$: containerComputedSortedData$,
           SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,

package/src/series/plugins/PieLabels.ts

@@ -447,7 +447,7 @@ function highlight ({ textSelection, lineSelection, ids, fullChartParams }: {
 function createEachPieLabel (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   // computedData$: Observable<ComputedDatumSeries[][]>
-  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  containerVisibleComputedSortedData$: Observable<ComputedDatumSeries[]>
   // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<PieLabelsParams>
   fullChartParams$: Observable<ChartParams>
@@ -488,7 +488,7 @@ function createEachPieLabel (pluginName: string, context: {
 
   combineLatest({
     shorterSideWith: shorterSideWith$,
-    containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
+    containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$,
     textSizePx: context.textSizePx$,
@@ -516,7 +516,7 @@ function createEachPieLabel (pluginName: string, context: {
     })
 
     const pieData = makePieData({
-      data: data.containerVisibleComputedLayoutData,
+      data: data.containerVisibleComputedSortedData,
       startAngle: data.fullParams.startAngle,
       endAngle: data.fullParams.endAngle
     })
@@ -608,7 +608,7 @@ export const PieLabels = defineSeriesPlugin(pluginConfig)(({ selection, observer
         
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
+        const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
           takeUntil(destroy$),
           map(data => data[containerIndex] ?? data[0])
         )
@@ -621,7 +621,7 @@ export const PieLabels = defineSeriesPlugin(pluginConfig)(({ selection, observer
         unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
           containerSelection: containerSelection,
           // computedData$: observer.computedData$,
-          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
+          containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
           // SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,

package/src/series/plugins/Rose.ts

@@ -213,8 +213,8 @@ function createEachRose (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   computedData$: Observable<ComputedDatumSeries[][]>
   visibleComputedData$: Observable<ComputedDatumSeries[][]>
-  visibleComputedLayoutData$: Observable<ComputedDatumSeries[][]>
-  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  containerVisibleComputedSortedData$: Observable<ComputedDatumSeries[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<RoseParams>
   fullChartParams$: Observable<ChartParams>
@@ -235,14 +235,14 @@ function createEachRose (pluginName: string, context: {
   )
 
   const pieData$: Observable<PieDatum[]> = combineLatest({
-    containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
+    containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
     fullParams: context.fullParams$,
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      const eachAngle = roseEndAngle / data.containerVisibleComputedLayoutData.length
-      return data.containerVisibleComputedLayoutData.map((d, i) => {
+      const eachAngle = roseEndAngle / data.containerVisibleComputedSortedData.length
+      return data.containerVisibleComputedSortedData.map((d, i) => {
         return {
           id: d.id,
           data: d,
@@ -263,13 +263,13 @@ function createEachRose (pluginName: string, context: {
     distinctUntilChanged()
   )
 
-  const maxValue$ = context.visibleComputedLayoutData$.pipe(
+  const maxValue$ = context.visibleComputedSortedData$.pipe(
     map(data => Math.max(...data.flat().map(d => d.value))),
     distinctUntilChanged()
   )
 
-  // context.visibleComputedLayoutData$.subscribe(data => {
-  //   console.log('visibleComputedLayoutData$', data)
+  // context.visibleComputedSortedData$.subscribe(data => {
+  //   console.log('visibleComputedSortedData$', data)
   // })
 
   const tweenArc$ = combineLatest({
@@ -483,7 +483,7 @@ export const Rose = defineSeriesPlugin(pluginConfig)(({ selection, name, subject
       seriesCenterSelection.each((d, containerIndex, g) => { 
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
+        const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
           takeUntil(destroy$),
           map(data => JSON.parse(JSON.stringify(data[containerIndex] ?? data[0])))
         )
@@ -497,8 +497,8 @@ export const Rose = defineSeriesPlugin(pluginConfig)(({ selection, name, subject
           containerSelection: containerSelection,
           computedData$: observer.computedData$,
           visibleComputedData$: observer.visibleComputedData$,
-          visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
-          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
+          visibleComputedSortedData$: observer.visibleComputedSortedData$,
+          containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
           SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,