@orbcharts/plugins-basic 3.0.0-alpha.47 → 3.0.0-alpha.49

package/dist/src/series/defaults.d.ts

@@ -1,7 +1,9 @@
-import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, SeriesLegendParams } from './types';
+import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, RoseParams, RoseLabelsParams, SeriesLegendParams } from './types';
 
 export declare const DEFAULT_BUBBLES_PARAMS: BubblesParams;
 export declare const DEFAULT_PIE_PARAMS: PieParams;
 export declare const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams;
 export declare const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams;
+export declare const DEFAULT_ROSE_PARAMS: RoseParams;
+export declare const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams;
 export declare const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams;

package/dist/src/series/index.d.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 { Rose } from './plugins/Rose';
+export { RoseLabels } from './plugins/RoseLabels';
 export { SeriesLegend } from './plugins/SeriesLegend';

package/dist/src/series/plugins/Rose.d.ts

@@ -0,0 +1,10 @@
+import { ComputedDatumSeries } from '@orbcharts/core';
+import { D3PieDatum } from '../seriesUtils';
+import { RoseParams } from '../types';
+
+export interface PieDatum extends D3PieDatum {
+    data: ComputedDatumSeries;
+    id: string;
+    prevValue: number;
+}
+export declare const Rose: import('@orbcharts/core').PluginConstructor<"series", string, RoseParams>;

package/dist/src/series/plugins/RoseLabels.d.ts

@@ -0,0 +1,3 @@
+import { RoseLabelsParams } from '../types';
+
+export declare const RoseLabels: import('@orbcharts/core').PluginConstructor<"series", string, RoseLabelsParams>;

package/dist/src/series/types.d.ts

@@ -1,6 +1,6 @@
 import { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core';
 
-export type BubbleScaleType = 'area' | 'radius';
+export type ArcScaleType = 'area' | 'radius';
 export interface BubblesParams {
     force: {
         strength: number;
@@ -13,13 +13,12 @@ export interface BubblesParams {
         lineLengthMin: number;
     };
     highlightRIncrease: number;
-    bubbleScaleType: BubbleScaleType;
+    arcScaleType: ArcScaleType;
 }
 export interface PieParams {
     outerRadius: number;
     innerRadius: number;
-    outerMouseoverRadius: number;
-    enterDuration: number;
+    mouseoverOuterRadius: number;
     startAngle: number;
     endAngle: number;
     padAngle: number;
@@ -36,13 +35,26 @@ export interface PieEventTextsParams {
 }
 export interface PieLabelsParams {
     outerRadius: number;
-    outerMouseoverRadius: number;
+    mouseoverOuterRadius: number;
     startAngle: number;
     endAngle: number;
     labelCentroid: number;
     labelFn: ((d: ComputedDatumSeries) => string);
     labelColorType: ColorType;
 }
+export interface RoseParams {
+    outerRadius: number;
+    cornerRadius: number;
+    arcScaleType: ArcScaleType;
+    mouseoverAngleIncrease: number;
+}
+export interface RoseLabelsParams {
+    outerRadius: number;
+    labelCentroid: number;
+    labelFn: ((d: ComputedDatumSeries) => string);
+    labelColorType: ColorType;
+    arcScaleType: ArcScaleType;
+}
 export interface SeriesLegendParams {
     position: 'top' | 'bottom' | 'left' | 'right';
     justify: 'start' | 'center' | 'end';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.47",
+  "version": "3.0.0-alpha.49",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.45",
+    "@orbcharts/core": "^3.0.0-alpha.47",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

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,18 +386,33 @@ 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)
+  )
+
+  // pathSelection$.subscribe(data => {
+  //   console.log('pathSelection', data)
+  // })
+  // context.SeriesDataMap$.subscribe(data => {
+  //   console.log('SeriesDataMap', data)
+  // })
+  // context.computedData$.subscribe(data => {
+  //   console.log('computedData', data)
+  // })
+  // highlightTarget$.subscribe(data => {
+  //   console.log('highlightTarget', data)
+  // })
 
   combineLatest({
     pathSelection: pathSelection$,
@@ -513,9 +529,6 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  // @Q@ 在seriesCenterSelection$之後才訂閱會造成fullParams$訂閱不到最初次的值，還需找時間研究先workaround
-  observer.fullParams$.subscribe()
-
   seriesCenterSelection$
     .pipe(
       takeUntil(destroy$)
@@ -532,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])
         )
@@ -545,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$,