@orbcharts/plugins-basic 3.0.0-alpha.31 → 3.0.0-alpha.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +5058 -4953
  2. package/dist/orbcharts-plugins-basic.umd.js +7 -7
  3. package/dist/src/base/BaseLegend.d.ts +5 -3
  4. package/dist/src/grid/defaults.d.ts +10 -10
  5. package/dist/src/grid/types.d.ts +10 -2
  6. package/dist/src/multiGrid/defaults.d.ts +2 -1
  7. package/dist/src/multiGrid/index.d.ts +1 -0
  8. package/dist/src/multiGrid/plugins/MultiGridLegend.d.ts +1 -0
  9. package/dist/src/multiGrid/types.d.ts +17 -0
  10. package/dist/src/series/defaults.d.ts +2 -2
  11. package/dist/src/series/types.d.ts +10 -2
  12. package/package.json +2 -2
  13. package/src/base/BaseLegend.ts +41 -13
  14. package/src/grid/defaults.ts +10 -10
  15. package/src/grid/plugins/BarStack.ts +2 -2
  16. package/src/grid/plugins/Bars.ts +2 -2
  17. package/src/grid/plugins/BarsTriangle.ts +2 -2
  18. package/src/grid/plugins/Dots.ts +2 -2
  19. package/src/grid/plugins/GridLegend.ts +19 -1
  20. package/src/grid/plugins/GroupArea.ts +2 -2
  21. package/src/grid/plugins/GroupAxis.ts +2 -2
  22. package/src/grid/plugins/Lines.ts +2 -2
  23. package/src/grid/plugins/ScalingArea.ts +2 -2
  24. package/src/grid/plugins/ValueAxis.ts +2 -2
  25. package/src/grid/plugins/ValueStackAxis.ts +2 -2
  26. package/src/grid/types.ts +12 -2
  27. package/src/multiGrid/defaults.ts +20 -1
  28. package/src/multiGrid/index.ts +2 -1
  29. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -0
  30. package/src/multiGrid/types.ts +19 -0
  31. package/src/series/defaults.ts +2 -2
  32. package/src/series/plugins/Bubbles.ts +2 -2
  33. package/src/series/plugins/Pie.ts +2 -2
  34. package/src/series/plugins/SeriesLegend.ts +19 -1
  35. package/src/series/types.ts +12 -2
@@ -0,0 +1,89 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ map,
5
+ switchMap,
6
+ takeUntil,
7
+ Observable,
8
+ Subject } from 'rxjs'
9
+ import {
10
+ defineMultiGridPlugin } from '@orbcharts/core'
11
+ import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
12
+ import { createBaseLegend } from '../../base/BaseLegend'
13
+ import type { BaseLegendParams } from '../../base/BaseLegend'
14
+
15
+ const pluginName = 'MultiGridLegend'
16
+
17
+ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GRID_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
18
+
19
+ const destroy$ = new Subject()
20
+
21
+ const seriesLabels$ = observer.multiGrid$.pipe(
22
+ takeUntil(destroy$),
23
+ map(multiGrid => {
24
+ const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
25
+ return grid.SeriesDataMap$.pipe(
26
+ // grid內的seriesLabels
27
+ map(seriesDataMap => Array.from(seriesDataMap.keys()))
28
+ )
29
+ })
30
+ return seriesLabelsObservableArr
31
+ }),
32
+ switchMap(seriesLabelsObservableArr => combineLatest(seriesLabelsObservableArr)),
33
+ map(data => data.flat())
34
+ )
35
+
36
+ const seriesList$ = combineLatest({
37
+ fullParams: observer.fullParams$,
38
+ multiGrid: observer.multiGrid$,
39
+ computedData: observer.computedData$,
40
+ }).pipe(
41
+ takeUntil(destroy$),
42
+ switchMap(async d => d),
43
+ map(data => {
44
+ // grid
45
+ return data.computedData
46
+ .map((gridData, gridIndex) => {
47
+ // 這個grid全部series要套用的圖例列點樣式
48
+ const gridListStyle = data.fullParams.gridList[gridIndex]
49
+ ? data.fullParams.gridList[gridIndex]
50
+ : {
51
+ listRectWidth: data.fullParams.listRectWidth,
52
+ listRectHeight: data.fullParams.listRectHeight,
53
+ listRectRadius: data.fullParams.listRectRadius,
54
+ }
55
+ // series
56
+ return gridData.map(d => gridListStyle)
57
+ })
58
+ .flat()
59
+
60
+ })
61
+ )
62
+
63
+ const fullParams$: Observable<BaseLegendParams> = combineLatest({
64
+ fullParams: observer.fullParams$,
65
+ seriesList: seriesList$
66
+ }).pipe(
67
+ takeUntil(destroy$),
68
+ map(d => {
69
+ return {
70
+ ...d.fullParams,
71
+ seriesList: d.seriesList
72
+ }
73
+ })
74
+ )
75
+
76
+ const unsubscribeBaseLegend = createBaseLegend(pluginName, {
77
+ rootSelection,
78
+ seriesLabels$,
79
+ fullParams$,
80
+ layout$: observer.layout$,
81
+ fullChartParams$: observer.fullChartParams$
82
+ })
83
+
84
+ return () => {
85
+ destroy$.next(undefined)
86
+ unsubscribeBaseLegend()
87
+ }
88
+ })
89
+
@@ -1,8 +1,27 @@
1
1
  import type { BaseBarsParams } from '../base/BaseBars'
2
2
  import type { BaseLinesParams } from '../base/BaseLines'
3
+ import type {
4
+ ChartParams, Layout, ColorType } from '@orbcharts/core'
3
5
 
4
6
  export interface BarsAndLinesParams {
5
7
  bars: BaseBarsParams
6
8
  lines: BaseLinesParams
7
9
  }
8
10
 
11
+ export interface MultiGridLegendParams {
12
+ position: 'top' | 'bottom' | 'left' | 'right'
13
+ justify: 'start' | 'center' | 'end'
14
+ padding: number
15
+ backgroundFill: ColorType
16
+ backgroundStroke: ColorType
17
+ gap: number
18
+ listRectWidth: number
19
+ listRectHeight: number
20
+ listRectRadius: number
21
+ // 可針對各grid設定,覆蓋全域設定
22
+ gridList: Array<{
23
+ listRectWidth: number
24
+ listRectHeight: number
25
+ listRectRadius: number
26
+ }>
27
+ }
@@ -7,7 +7,7 @@ import type {
7
7
  SeriesLegendParams } from './types'
8
8
 
9
9
 
10
- export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams = {
10
+ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
11
11
  force: {
12
12
  strength: 0.03, // 泡泡引力
13
13
  velocityDecay: 0.2, // 衰減數
@@ -22,7 +22,7 @@ export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams = {
22
22
  bubbleScaleType: 'area'
23
23
  }
24
24
 
25
- export const DEFAULT_PIE_PLUGIN_PARAMS: PieParams = {
25
+ export const DEFAULT_PIE_PARAMS: PieParams = {
26
26
  // padding: {
27
27
  // top: 50,
28
28
  // right: 70,
@@ -18,7 +18,7 @@ import type {
18
18
  import {
19
19
  defineSeriesPlugin } from '@orbcharts/core'
20
20
  import type { BubblesParams, BubbleScaleType } from '../types'
21
- import { DEFAULT_BUBBLES_PLUGIN_PARAMS } from '../defaults'
21
+ import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
22
22
  import { renderCircleText } from '../../utils/d3Graphics'
23
23
 
24
24
  interface BubblesDatum extends ComputedDatumSeries {
@@ -298,7 +298,7 @@ function highlight ({ bubblesSelection, highlightIds, fullChartParams }: {
298
298
  })
299
299
  }
300
300
 
301
- export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
301
+ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({ selection, name, observer, subject }) => {
302
302
 
303
303
  const destroy$ = new Subject()
304
304
 
@@ -19,7 +19,7 @@ import type {
19
19
  ChartParams } from '@orbcharts/core'
20
20
  import type { PieParams } from '../types'
21
21
  import type { PieDatum } from '../seriesUtils'
22
- import { DEFAULT_PIE_PLUGIN_PARAMS } from '../defaults'
22
+ import { DEFAULT_PIE_PARAMS } from '../defaults'
23
23
  import { makePieData } from '../seriesUtils'
24
24
  import { getD3TransitionEase, makeD3Arc } from '../../utils/d3Utils'
25
25
  import { getClassName } from '../../utils/orbchartsUtils'
@@ -163,7 +163,7 @@ function highlight ({ pathSelection, ids, fullChartParams, arc, arcMouseover }:
163
163
  }
164
164
 
165
165
 
166
- export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
166
+ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selection, name, observer, subject }) => {
167
167
 
168
168
  const destroy$ = new Subject()
169
169
 
@@ -24,10 +24,28 @@ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND
24
24
  })
25
25
  )
26
26
 
27
+ // 全部列點矩型使用相同樣式參數
28
+ const fullParams$ = observer.fullParams$.pipe(
29
+ takeUntil(destroy$),
30
+ map(d => {
31
+ const seriesList = [
32
+ {
33
+ listRectWidth: d.listRectWidth,
34
+ listRectHeight: d.listRectHeight,
35
+ listRectRadius: d.listRectRadius,
36
+ }
37
+ ]
38
+ return {
39
+ ...d,
40
+ seriesList
41
+ }
42
+ })
43
+ )
44
+
27
45
  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
28
46
  rootSelection,
29
47
  seriesLabels$,
30
- fullParams$: observer.fullParams$,
48
+ fullParams$,
31
49
  layout$: observer.layout$,
32
50
  fullChartParams$: observer.fullChartParams$
33
51
  })
@@ -1,5 +1,5 @@
1
1
  import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
2
- import type { BaseLegendParams } from '../base/BaseLegend'
2
+ // import type { BaseLegendParams } from '../base/BaseLegend'
3
3
 
4
4
  export type BubbleScaleType = 'area' | 'radius'
5
5
 
@@ -53,4 +53,14 @@ export interface PieLabelsParams {
53
53
  labelColorType: ColorType
54
54
  }
55
55
 
56
- export interface SeriesLegendParams extends BaseLegendParams {}
56
+ export interface SeriesLegendParams {
57
+ position: 'top' | 'bottom' | 'left' | 'right'
58
+ justify: 'start' | 'center' | 'end'
59
+ padding: number
60
+ backgroundFill: ColorType
61
+ backgroundStroke: ColorType
62
+ gap: number
63
+ listRectWidth: number
64
+ listRectHeight: number
65
+ listRectRadius: number
66
+ }