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

package/src/series/plugins/SeriesLegend.ts

@@ -1,59 +1,59 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import {
-  defineSeriesPlugin } from '@orbcharts/core'
-import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
-import { createBaseLegend } from '../../base/BaseLegend'
-
-const pluginName = 'SeriesLegend'
-
-export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return Array.from(data.keys())
-    })
-  )
-
-  // 全部列點矩型使用相同樣式參數
-  const fullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      const seriesList = [
-        {
-          listRectWidth: d.listRectWidth,
-          listRectHeight: d.listRectHeight,
-          listRectRadius: d.listRectRadius,
-        }
-      ]
-      return {
-        ...d,
-        seriesList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    seriesLabels$,
-    fullParams$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    textSizePx$: observer.textSizePx$
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseLegend()
-  }
-})
-
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineSeriesPlugin } from '@orbcharts/core'
+import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'SeriesLegend'
+
+export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const seriesList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

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, seriesSeparate$, seriesLabels$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  seriesSeparate$: Observable<boolean>
+  seriesLabels$: Observable<string[]>
+}) {
+  const seriesClassName = getClassName(pluginName, 'series')
+  
+  return combineLatest({
+    seriesLabels: seriesLabels$,
+    seriesSeparate: seriesSeparate$
+  }).pipe(
+    switchMap(async d => d),
+    map((data, i) => {
+      const selectionData = data.seriesSeparate ? 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, seriesSeparate$, seriesLabels$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  seriesSeparate$: Observable<boolean>
+  seriesLabels$: Observable<string[]>
+  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+}) => {
+  
+  const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, seriesSeparate$, 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, seriesSeparate$, seriesLabels$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  seriesSeparate$: Observable<boolean>
+  seriesLabels$: Observable<string[]>
+  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+}) => {
+  
+  const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, seriesSeparate$, 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

@@ -1,51 +1,51 @@
-import * as d3 from 'd3'
-import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
-// import type { D3PieDatum, PieDatum } from '../types'
-
-// 由d3.pie()建出來的資料格式
-export interface D3PieDatum {
-  data: any
-  index: number,
-  value: number,
-  startAngle: number,
-  endAngle: number,
-  padAngle: number,  
-}
-
-export interface PieDatum extends D3PieDatum {
-  data: ComputedDatumSeries
-  id: string
-}
-
-export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
-  computedDataSeries: ComputedDataSeries
-  startAngle: number
-  endAngle: number
-  // itemLabels: string[]
-  // arcLabels: string[]
-}): PieDatum[] {
-  let pie = d3.pie<any, any>()
-    .startAngle(startAngle)
-    // .endAngle(startAngle + (endAngle - startAngle) * t)
-    .endAngle(endAngle)
-    .value((d) => d.visible == false ? 0 : d.value)
-    // .sort(null) // 不要排序
-    .sort((a, b) => a.sortedIndex - b.sortedIndex)
-    // .sort((a: any, b: any) => {
-    //   return b.value - a.value
-    // })
-    // .sort(d3.ascending)
-  const pieData = pie(computedDataSeries)
-  return pieData.map((d: D3PieDatum, i: number) => {
-    // const itemLabel = d.data.itemLabel
-    let _d: any = d
-    _d.id = d.data.id
-    return _d
-    // return {
-    //   ...d,
-    //   itemIndex: itemLabels.indexOf(itemLabel),
-    //   itemLabel,
-    //   id: d.data.id,
-    // }
-  })
+import * as d3 from 'd3'
+import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
+// import type { D3PieDatum, PieDatum } from '../types'
+
+// 由d3.pie()建出來的資料格式
+export interface D3PieDatum {
+  data: any
+  index: number,
+  value: number,
+  startAngle: number,
+  endAngle: number,
+  padAngle: number,  
+}
+
+export interface PieDatum extends D3PieDatum {
+  data: ComputedDatumSeries
+  id: string
+}
+
+export function makePieData ({ data, startAngle, endAngle }: {
+  data: ComputedDatumSeries[]
+  startAngle: number
+  endAngle: number
+  // itemLabels: string[]
+  // arcLabels: string[]
+}): PieDatum[] {
+  let pie = d3.pie<any, any>()
+    .startAngle(startAngle)
+    // .endAngle(startAngle + (endAngle - startAngle) * t)
+    .endAngle(endAngle)
+    .value((d) => d.visible == false ? 0 : d.value)
+    // .sort(null) // 不要排序
+    .sort((a, b) => a.seq - b.seq)
+    // .sort((a: any, b: any) => {
+    //   return b.value - a.value
+    // })
+    // .sort(d3.ascending)
+  const pieData = pie(data)
+  return pieData.map((d: D3PieDatum, i: number) => {
+    // const itemLabel = d.data.itemLabel
+    let _d: any = d
+    _d.id = d.data.id
+    return _d
+    // return {
+    //   ...d,
+    //   itemIndex: itemLabels.indexOf(itemLabel),
+    //   itemLabel,
+    //   id: d.data.id,
+    // }
+  })
 }

package/src/series/types.ts

@@ -1,67 +1,67 @@
-import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
-// import type { BaseLegendParams } from '../base/BaseLegend'
-
-export type BubbleScaleType = 'area' | 'radius'
-
-export interface BubblesParams {
-  force: {
-    strength: number; // 泡泡引力
-    velocityDecay: number; // 衰減數
-    collisionSpacing: number // 泡泡間距
-  }
-  bubbleText: {
-    fillRate: number
-    lineHeight: number
-    lineLengthMin: number
-  }
-  highlightRIncrease: number
-  bubbleScaleType: BubbleScaleType
-}
-
-export interface PieParams {
-  // padding: Padding
-  outerRadius: number;
-  innerRadius: number;
-  outerMouseoverRadius: number;
-  // label?: LabelStyle
-  enterDuration: number
-  startAngle: number
-  endAngle: number
-  padAngle: number
-  // padRadius: number
-  cornerRadius: number
-}
-
-export interface PieEventTextsParams {
-  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
-  textAttrs: Array<{ [key:string]: string | number }>
-  textStyles: Array<{ [key:string]: string | number }>
-}
-
-export interface PieLabelsParams {
-  // solidColor?: string;
-  // colors?: string[];
-  outerRadius: number
-  outerMouseoverRadius: number
-  // innerRadius?: number;
-  // enterDuration?: number
-  startAngle: number
-  endAngle: number
-  labelCentroid: number
-  // fontSize?: number
-  labelFn: ((d: ComputedDatumSeries) => string)
-  labelColorType: ColorType
-}
-
-export interface SeriesLegendParams {
-  position: 'top' | 'bottom' | 'left' | 'right'
-  justify: 'start' | 'center' | 'end'
-  padding: number
-  backgroundFill: ColorType
-  backgroundStroke: ColorType
-  gap: number
-  listRectWidth: number
-  listRectHeight: number
-  listRectRadius: number
-  textColorType: ColorType
-}
+import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
+// import type { BaseLegendParams } from '../base/BaseLegend'
+
+export type BubbleScaleType = 'area' | 'radius'
+
+export interface BubblesParams {
+  force: {
+    strength: number; // 泡泡引力
+    velocityDecay: number; // 衰減數
+    collisionSpacing: number // 泡泡間距
+  }
+  bubbleText: {
+    fillRate: number
+    lineHeight: number
+    lineLengthMin: number
+  }
+  highlightRIncrease: number
+  bubbleScaleType: BubbleScaleType
+}
+
+export interface PieParams {
+  // padding: Padding
+  outerRadius: number;
+  innerRadius: number;
+  outerMouseoverRadius: number;
+  // label?: LabelStyle
+  enterDuration: number
+  startAngle: number
+  endAngle: number
+  padAngle: number
+  // padRadius: number
+  cornerRadius: number
+}
+
+export interface PieEventTextsParams {
+  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
+  textAttrs: Array<{ [key:string]: string | number }>
+  textStyles: Array<{ [key:string]: string | number }>
+}
+
+export interface PieLabelsParams {
+  // solidColor?: string;
+  // colors?: string[];
+  outerRadius: number
+  outerMouseoverRadius: number
+  // innerRadius?: number;
+  // enterDuration?: number
+  startAngle: number
+  endAngle: number
+  labelCentroid: number
+  // fontSize?: number
+  labelFn: ((d: ComputedDatumSeries) => string)
+  labelColorType: ColorType
+}
+
+export interface SeriesLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+  textColorType: ColorType
+}

package/src/tree/defaults.ts

@@ -1,22 +1,22 @@
-import type { TreeMapParams, TreeLegendParams } from './types'
-
-export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
-  paddingInner: 2,
-  paddingOuter: 2,
-  labelColorType: 'primary',
-  squarifyRatio: 1.618034, // 黃金比例
-  sort: (a, b) => b.value - a.value
-}
-
-export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
-  position: 'right',
-  justify: 'end',
-  padding: 28,
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  textColorType: 'primary'
-}
+import type { TreeMapParams, TreeLegendParams } from './types'
+
+export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
+  paddingInner: 2,
+  paddingOuter: 2,
+  labelColorType: 'primary',
+  squarifyRatio: 1.618034, // 黃金比例
+  sort: (a, b) => b.value - a.value
+}
+
+export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  textColorType: 'primary'
+}

package/src/tree/index.ts

@@ -1,4 +1,4 @@
-export * from './defaults'
-export * from './types'
-export { TreeLegend } from './plugins/TreeLegend'
+export * from './defaults'
+export * from './types'
+export { TreeLegend } from './plugins/TreeLegend'
 export { TreeMap } from './plugins/TreeMap'

package/src/tree/plugins/TreeLegend.ts

@@ -1,59 +1,59 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import {
-  defineTreePlugin } from '@orbcharts/core'
-import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
-import { createBaseLegend } from '../../base/BaseLegend'
-
-const pluginName = 'TreeLegend'
-
-export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return Array.from(data.keys())
-    })
-  )
-
-  // 全部列點矩型使用相同樣式參數
-  const fullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      const seriesList = [
-        {
-          listRectWidth: d.listRectWidth,
-          listRectHeight: d.listRectHeight,
-          listRectRadius: d.listRectRadius,
-        }
-      ]
-      return {
-        ...d,
-        seriesList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    seriesLabels$: categoryLabels$,
-    fullParams$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    textSizePx$: observer.textSizePx$
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseLegend()
-  }
-})
-
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineTreePlugin } from '@orbcharts/core'
+import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'TreeLegend'
+
+export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const seriesList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$: categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+