@orbcharts/plugins-basic 3.0.0-alpha.48 → 3.0.0-alpha.50

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -15,7 +15,7 @@ import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridPluginObservables } from '../multiGridObservables'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
 
@@ -78,7 +78,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
     })
   )
 
-  const multiGridPlugin$ = of(observer).pipe(
+  const multiGridPluginDetail$ = of(observer).pipe(
     takeUntil(destroy$),
     map(observer => {
       // 將observer的gridIndexes限制在2個
@@ -94,7 +94,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         )
       }
     }),
-    switchMap(observer => multiGridPluginObservables(observer)),
+    switchMap(observer => multiGridPluginDetailObservables(observer)),
     map(data => {
       return data.map((observables, index) => {
         if (index === 0) {
@@ -123,7 +123,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
     })
   )
 
-  multiGridPlugin$
+  multiGridPluginDetail$
     .pipe(
       takeUntil(destroy$)
     )
@@ -142,13 +142,6 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
 
           const gridSelection = d3.select(g[i])
 
-          const isSeriesSeprate$ = d.dataFormatter$.pipe(
-            takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
-            distinctUntilChanged(),
-            shareReplay(1)
-          )
-
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
@@ -161,7 +154,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
             gridAxesReverseTransform$: d.gridAxesReverseTransform$,
             gridAxesSize$: d.gridAxesSize$,
             gridContainerPosition$: d.gridContainerPosition$,
-            isSeriesSeprate$,
+            isSeriesSeprate$: d.isSeriesSeprate$,
           })
         })
     })

package/src/multiGrid/plugins/OverlappingValueStackAxes.ts

@@ -0,0 +1,167 @@
+import * as d3 from 'd3'
+import {
+  of,
+  map,
+  switchMap,
+  combineLatest,
+  takeUntil,
+  distinctUntilChanged,
+  shareReplay,
+  iif,
+  Observable,
+  Subject } from 'rxjs'
+import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '@orbcharts/core'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
+import { createBaseValueAxis } from '../../base/BaseValueAxis'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
+
+const pluginName = 'OverlappingValueStackAxes'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+// 第一個圖軸使用堆疊的資料，第二個圖軸使用原始資料
+export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const firstGridIndex$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(fullParams => fullParams.gridIndexes[0])
+  )
+
+  const secondGridIndex$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(fullParams => fullParams.gridIndexes[1])
+  )
+
+  // 為了要反轉第二個valueAxis的位置所以要重新計算
+  const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
+    firstGridIndex: firstGridIndex$,
+    secondGridIndex: secondGridIndex$,
+    fullDataFormatter: observer.fullDataFormatter$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      if (!data.fullDataFormatter.gridList[data.secondGridIndex]) {
+        data.fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, data.fullDataFormatter.gridList[data.firstGridIndex])
+      }
+      // 反轉第二個valueAxis的位置
+      let reversePosition = ''
+      if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
+        reversePosition = 'right'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
+        reversePosition = 'top'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
+        reversePosition = 'bottom'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
+        reversePosition = 'left'
+      }
+      return <DataFormatterGrid>{
+        type: 'grid',
+        visibleFilter: data.fullDataFormatter.visibleFilter as any,
+        grid: {
+          ...data.fullDataFormatter.gridList[data.secondGridIndex],
+          valueAxis: {
+            ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
+            position: reversePosition
+          }
+        },
+        container: {
+          ...data.fullDataFormatter.container
+        }
+      }
+    })
+  )
+
+  const multiGridPluginDetail$ = of(observer).pipe(
+    takeUntil(destroy$),
+    map(observer => {
+      // 將observer的gridIndexes限制在2個
+      return {
+        ...observer,
+        fullParams$: observer.fullParams$.pipe(
+          map(fullParams => {
+            if (fullParams.gridIndexes.length > 2) {
+              fullParams.gridIndexes.length = 2
+            }
+            return fullParams
+          })
+        )
+      }
+    }),
+    switchMap(observer => multiGridPluginDetailObservables(observer)),
+    map(data => {
+      return data.map((observables, index) => {
+        if (index === 0) {
+          return observables
+        }
+        // index === 1，將跟第二個valueAxis有關的observables全部重新計算
+        const gridAxesTransform$ = gridAxesTransformObservable({
+          fullDataFormatter$: secondGridDataFormatter$,
+          layout$: observer.layout$
+        })
+        const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+          gridAxesTransform$
+        })
+        const gridContainerPosition$ = gridContainerPositionObservable({
+          computedData$: observables.computedData$,
+          fullDataFormatter$: secondGridDataFormatter$,
+          layout$: observer.layout$
+        })
+        return {
+          ...observables,
+          gridAxesTransform$,
+          gridAxesReverseTransform$,
+          gridContainerPosition$,
+        }
+      })
+    })
+  )
+
+  multiGridPluginDetail$
+    .pipe(
+      takeUntil(destroy$)
+    )
+    .subscribe(data => {
+      // 每次重新計算時，清除之前的訂閱
+      unsubscribeFnArr.forEach(fn => fn())
+
+      selection.selectAll(`g.${gridClassName}`)
+        .data(data)
+        .join('g')
+        .attr('class', gridClassName)
+        .each((d, i, g) => {
+          if (i > 1) {
+            return
+          }
+
+          const gridSelection = d3.select(g[i])
+
+          unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
+            selection: gridSelection,
+            computedData$: i === 0 ? d.computedStackedData$ : d.computedData$, // 第一個圖軸計算疊加value的資料
+            fullParams$: observer.fullParams$.pipe(
+              map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
+            ),
+            fullDataFormatter$: d.dataFormatter$,
+            fullChartParams$: observer.fullChartParams$,  
+            gridAxesTransform$: d.gridAxesTransform$,
+            gridAxesReverseTransform$: d.gridAxesReverseTransform$,
+            gridAxesSize$: d.gridAxesSize$,
+            gridContainerPosition$: d.gridContainerPosition$,
+            isSeriesSeprate$: d.isSeriesSeprate$,
+          })
+        })
+    })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/types.ts

@@ -36,6 +36,10 @@ export interface MultiValueAxisParams extends BaseValueAxisParams {
   gridIndexes: number[]
 }
 
+export interface MultiValueStackAxisParams extends BaseValueAxisParams {
+  gridIndexes: number[]
+}
+
 export interface MultiBarsParams extends BaseBarsParams {
   gridIndexes: number[]
 }

package/src/series/defaults.ts

@@ -4,6 +4,8 @@ import type {
   PieParams,
   PieEventTextsParams,
   PieLabelsParams,
+  RoseParams,
+  RoseLabelsParams,
   SeriesLegendParams } from './types'
 
   
@@ -19,7 +21,7 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
     lineLengthMin: 4
   },
   highlightRIncrease: 0,
-  bubbleScaleType: 'area'
+  arcScaleType: 'area'
 }
 
 export const DEFAULT_PIE_PARAMS: PieParams = {
@@ -31,9 +33,9 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
   // },
   outerRadius: 0.95,
   innerRadius: 0,
-  outerMouseoverRadius: 1,
+  mouseoverOuterRadius: 1,
   // label?: LabelStyle
-  enterDuration: 800,
+  // enterDuration: 800,
   startAngle: 0,
   endAngle: Math.PI * 2,
   padAngle: 0.02,
@@ -82,7 +84,7 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
   // solidColor: undefined,
   // colors: DEFAULT_COLORS,
   outerRadius: 0.95,
-  outerMouseoverRadius: 1,
+  mouseoverOuterRadius: 1,
   // innerRadius: 0,
   // enterDuration: 800,
   startAngle: 0,
@@ -90,7 +92,22 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
   labelCentroid: 2.3,
   // fontSize: 12,
   labelColorType: 'series',
-  labelFn: d => String(d.value),
+  labelFn: d => String(d.label),
+}
+
+export const DEFAULT_ROSE_PARAMS: RoseParams = {
+  outerRadius: 0.95,
+  cornerRadius: 0,
+  arcScaleType: 'area',
+  mouseoverAngleIncrease: 0.05
+}
+
+export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
+  outerRadius: 0.95,
+  labelCentroid: 2.5,
+  labelFn: d => String(d.label),
+  labelColorType: 'series',
+  arcScaleType: 'area'
 }
 
 export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {

package/src/series/index.ts

@@ -4,4 +4,6 @@ export { Bubbles } from './plugins/Bubbles'
 export { Pie } from './plugins/Pie'
 export { PieEventTexts } from './plugins/PieEventTexts'
 export { PieLabels } from './plugins/PieLabels'
-export { SeriesLegend } from './plugins/SeriesLegend'
+export { Rose } from './plugins/Rose'
+export { RoseLabels } from './plugins/RoseLabels'
+export { SeriesLegend } from './plugins/SeriesLegend'

package/src/series/plugins/Bubbles.ts

@@ -18,7 +18,7 @@ import type {
   SeriesContainerPosition } from '@orbcharts/core'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
-import type { BubblesParams, BubbleScaleType } from '../types'
+import type { BubblesParams, ArcScaleType } from '../types'
 import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
 
@@ -80,7 +80,7 @@ function getMaxR ({ data, bubbleGroupR, maxValue, avgValue }: {
   const maxSize = maxValue * sizeRate
   const maxR = Math.pow(maxSize / Math.PI, 0.5)
 
-  const modifier = 0.75 // @Q@ 因為以下公式是假設泡泡是正方型來計算，所以畫出來的圖會偏大一些，這個數值是用來修正用的
+  const modifier = 0.785 // @Q@ 因為以下公式是假設泡泡是正方型來計算，所以畫出來的圖會偏大一些，這個數值是用來修正用的
   return maxR * modifier
 }
 
@@ -90,7 +90,7 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
   graphicWidth: number
   graphicHeight: number
   SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
-  scaleType: BubbleScaleType
+  scaleType: ArcScaleType
   // highlightIds: string[]
 }) {
   const bubbleGroupR = Math.min(...[graphicWidth, graphicHeight]) / 2
@@ -392,7 +392,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
 
   const scaleType$ = observer.fullParams$.pipe(
     takeUntil(destroy$),
-    map(d => d.bubbleScaleType),
+    map(d => d.arcScaleType),
     distinctUntilChanged()
   )
 

package/src/series/plugins/Pie.ts

@@ -162,7 +162,7 @@ function highlight ({ pathSelection, ids, fullChartParams, arc, arcMouseover }:
 function createEachPie (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   computedData$: Observable<ComputedDatumSeries[][]>
-  containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<PieParams>
   fullChartParams$: Observable<ChartParams>
@@ -199,12 +199,13 @@ function createEachPie (pluginName: string, context: {
 
   const shorterSideWith$ = context.seriesContainerPosition$.pipe(
     takeUntil(destroy$),
-    map(d => d.width < d.height ? d.width : d.height)
+    map(d => d.width < d.height ? d.width : d.height),
+    distinctUntilChanged()
   )
 
   const pieData$: Observable<PieDatum[]> = new Observable(subscriber => {
     combineLatest({
-      containerComputedLayoutData: context.containerComputedLayoutData$,
+      containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
       fullParams: context.fullParams$,
     }).pipe(
       takeUntil(destroy$),
@@ -212,7 +213,7 @@ function createEachPie (pluginName: string, context: {
     ).subscribe(data => {
       // console.log('pieData', data)
       const pieData: PieDatum[] = makePieData({
-        data: data.containerComputedLayoutData,
+        data: data.containerVisibleComputedLayoutData,
         startAngle: data.fullParams.startAngle,
         endAngle: data.fullParams.endAngle
       })
@@ -256,7 +257,7 @@ function createEachPie (pluginName: string, context: {
       const arcMouseover = makeD3Arc({
         axisWidth: data.shorterSideWith,
         innerRadius: data.fullParams.innerRadius,
-        outerRadius: data.fullParams.outerMouseoverRadius, // 外半徑變化
+        outerRadius: data.fullParams.mouseoverOuterRadius, // 外半徑變化
         padAngle: data.fullParams.padAngle,
         cornerRadius: data.fullParams.cornerRadius
       })
@@ -385,16 +386,16 @@ function createEachPie (pluginName: string, context: {
         })
 
       // -- 更新資料 --
-      if (!enter.size() && update.size() > 0) {
-        // console.log('test')
-        const pathSelection = renderPie({
-          selection: context.containerSelection,
-          data: data.pieData,
-          arc: data.arc,
-          pathClassName
-        })
-        subscriber.next(pathSelection)
-      }
+      // if (!enter.size() && update.size() > 0) {
+      //   // console.log('test')
+      //   const pathSelection = renderPie({
+      //     selection: context.containerSelection,
+      //     data: data.pieData,
+      //     arc: data.arc,
+      //     pathClassName
+      //   })
+      //   subscriber.next(pathSelection)
+      // }
     })
   }).pipe(
     shareReplay(1)
@@ -544,7 +545,7 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
         // console.log('containerIndex', containerIndex)
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
+        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
           takeUntil(destroy$),
           map(data => data[containerIndex] ?? data[0])
         )
@@ -557,7 +558,7 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
         unsubscribeFnArr[containerIndex] = createEachPie(pluginName, {
           containerSelection: containerSelection,
           computedData$: observer.computedData$,
-          containerComputedLayoutData$: containerComputedLayoutData$,
+          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
           SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,

package/src/series/plugins/PieLabels.ts

@@ -6,6 +6,7 @@ import {
   map,
   takeUntil,
   Observable,
+  distinctUntilChanged,
   Subject,
   BehaviorSubject } from 'rxjs'
 import {
@@ -160,7 +161,7 @@ function highlight ({ labelSelection, ids, fullChartParams }: {
 function createEachPieLabel (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   // computedData$: Observable<ComputedDatumSeries[][]>
-  containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
   // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<PieLabelsParams>
   fullChartParams$: Observable<ChartParams>
@@ -173,52 +174,16 @@ function createEachPieLabel (pluginName: string, context: {
   // 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})`)
-  //       })
-  //   })
-
   
-
-  // combineLatest({
-  //   event: store.event$,
-  //   fullChartParams: fullChartParams$
-  // }).pipe(
-  //   // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-  //   switchMap(async (d) => d),
-  // ).subscribe(d => {
-  //   if (d.event.eventName === 'mouseover' && d.event.datum) {
-  //     highlight({
-  //       labelSelection,
-  //       data: renderData,
-  //       id: d.fullChartParams.highlightTarget === 'datum' ? d.event.datum!.id : undefined,
-  //       label: d.fullChartParams.highlightTarget === 'series' ? d.event.datum!.label : undefined,
-  //       fullChartParams: d.fullChartParams
-  //     })
-  //   } else if (d.event.eventName === 'mouseout') {
-  //     removeHighlight({ labelSelection })
-  //   }
-  // })
+  const shorterSideWith$ = context.seriesContainerPosition$.pipe(
+    takeUntil(destroy$),
+    map(d => d.width < d.height ? d.width : d.height),
+    distinctUntilChanged()
+  )
 
   combineLatest({
-    layout: context.seriesContainerPosition$,
-    containerComputedLayoutData: context.containerComputedLayoutData$,
+    shorterSideWith: shorterSideWith$,
+    containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$
   }).pipe(
@@ -226,11 +191,11 @@ function createEachPieLabel (pluginName: string, context: {
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
+    // const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
 
     // 弧產生器 (d3.arc())
     const arc = makeD3Arc({
-      axisWidth: shorterSideWith,
+      axisWidth: data.shorterSideWith,
       innerRadius: 0,
       outerRadius: data.fullParams.outerRadius,
       padAngle: 0,
@@ -238,15 +203,15 @@ function createEachPieLabel (pluginName: string, context: {
     })
 
     const arcMouseover = makeD3Arc({
-      axisWidth: shorterSideWith,
+      axisWidth: data.shorterSideWith,
       innerRadius: 0,
-      outerRadius: data.fullParams.outerMouseoverRadius, // 外半徑變化
+      outerRadius: data.fullParams.mouseoverOuterRadius, // 外半徑變化
       padAngle: 0,
       cornerRadius: 0
     })
 
     const pieData = makePieData({
-      data: data.containerComputedLayoutData,
+      data: data.containerVisibleComputedLayoutData,
       startAngle: data.fullParams.startAngle,
       endAngle: data.fullParams.endAngle
     })
@@ -308,7 +273,7 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
         
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
+        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
           takeUntil(destroy$),
           map(data => data[containerIndex] ?? data[0])
         )
@@ -321,7 +286,7 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
         unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
           containerSelection: containerSelection,
           // computedData$: observer.computedData$,
-          containerComputedLayoutData$: containerComputedLayoutData$,
+          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
           // SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,