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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseBarStack.d.ts +6 -4
  2. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseBars.d.ts +6 -4
  3. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseBarsTriangle.d.ts +7 -4
  4. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseDots.d.ts +5 -3
  5. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseGroupAxis.d.ts +3 -3
  6. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseLegend.d.ts +1 -0
  7. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseLineAreas.d.ts +6 -3
  8. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseLines.d.ts +6 -3
  9. package/dist/{src → orbcharts-plugins-basic/src}/base/BaseValueAxis.d.ts +3 -3
  10. package/dist/{src → orbcharts-plugins-basic/src}/grid/gridObservables.d.ts +4 -4
  11. package/dist/orbcharts-plugins-basic/src/index.d.ts +5 -0
  12. package/dist/orbcharts-plugins-basic/src/multiGrid/multiGridObservables.d.ts +8 -0
  13. package/dist/orbcharts-plugins-basic/src/series/plugins/PieEventTexts.d.ts +3 -0
  14. package/dist/orbcharts-plugins-basic/src/series/seriesObservables.d.ts +21 -0
  15. package/dist/{src → orbcharts-plugins-basic/src}/series/seriesUtils.d.ts +3 -3
  16. package/dist/orbcharts-plugins-basic.es.js +8349 -8142
  17. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  18. package/dist/src/index.d.ts +1 -5
  19. package/package.json +2 -2
  20. package/src/base/BaseBarStack.ts +105 -208
  21. package/src/base/BaseBars.ts +78 -64
  22. package/src/base/BaseBarsTriangle.ts +76 -63
  23. package/src/base/BaseDots.ts +41 -178
  24. package/src/base/BaseGroupAxis.ts +16 -16
  25. package/src/base/BaseLegend.ts +18 -13
  26. package/src/base/BaseLineAreas.ts +85 -81
  27. package/src/base/BaseLines.ts +82 -75
  28. package/src/base/BaseValueAxis.ts +17 -18
  29. package/src/grid/gridObservables.ts +22 -38
  30. package/src/grid/plugins/BarStack.ts +16 -3
  31. package/src/grid/plugins/Bars.ts +18 -4
  32. package/src/grid/plugins/BarsDiverging.ts +6 -4
  33. package/src/grid/plugins/BarsTriangle.ts +20 -4
  34. package/src/grid/plugins/Dots.ts +4 -2
  35. package/src/grid/plugins/GridLegend.ts +2 -1
  36. package/src/grid/plugins/GroupAux.ts +8 -6
  37. package/src/grid/plugins/GroupAxis.ts +15 -3
  38. package/src/grid/plugins/LineAreas.ts +5 -2
  39. package/src/grid/plugins/Lines.ts +5 -2
  40. package/src/grid/plugins/ScalingArea.ts +0 -1
  41. package/src/grid/plugins/ValueAxis.ts +15 -3
  42. package/src/grid/plugins/ValueStackAxis.ts +14 -5
  43. package/src/multiGrid/multiGridObservables.ts +14 -261
  44. package/src/multiGrid/plugins/MultiBarStack.ts +22 -8
  45. package/src/multiGrid/plugins/MultiBars.ts +21 -7
  46. package/src/multiGrid/plugins/MultiBarsTriangle.ts +22 -7
  47. package/src/multiGrid/plugins/MultiDots.ts +7 -5
  48. package/src/multiGrid/plugins/MultiGridLegend.ts +3 -2
  49. package/src/multiGrid/plugins/MultiGroupAxis.ts +19 -7
  50. package/src/multiGrid/plugins/MultiLineAreas.ts +9 -6
  51. package/src/multiGrid/plugins/MultiLines.ts +9 -6
  52. package/src/multiGrid/plugins/MultiValueAxis.ts +19 -7
  53. package/src/multiGrid/plugins/OverlappingValueAxes.ts +52 -47
  54. package/src/noneData/defaults.ts +3 -0
  55. package/src/noneData/plugins/Tooltip.ts +9 -3
  56. package/src/series/defaults.ts +13 -3
  57. package/src/series/plugins/Bubbles.ts +57 -37
  58. package/src/series/plugins/Pie.ts +300 -352
  59. package/src/series/plugins/PieEventTexts.ts +102 -38
  60. package/src/series/plugins/PieLabels.ts +95 -48
  61. package/src/series/plugins/SeriesLegend.ts +2 -1
  62. package/src/series/seriesObservables.ts +145 -0
  63. package/src/series/seriesUtils.ts +4 -4
  64. package/src/tree/plugins/TreeLegend.ts +2 -1
  65. package/src/tree/plugins/TreeMap.ts +8 -5
  66. package/tsconfig.json +3 -0
  67. package/dist/src/multiGrid/multiGridObservables.d.ts +0 -12
  68. package/dist/src/series/plugins/PieEventTexts.d.ts +0 -1
  69. /package/dist/{src → orbcharts-plugins-basic/src}/base/BaseGroupArea.d.ts +0 -0
  70. /package/dist/{src → orbcharts-plugins-basic/src}/base/types.d.ts +0 -0
  71. /package/dist/{src → orbcharts-plugins-basic/src}/grid/defaults.d.ts +0 -0
  72. /package/dist/{src → orbcharts-plugins-basic/src}/grid/index.d.ts +0 -0
  73. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/BarStack.d.ts +0 -0
  74. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/Bars.d.ts +0 -0
  75. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/BarsDiverging.d.ts +0 -0
  76. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/BarsTriangle.d.ts +0 -0
  77. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/Dots.d.ts +0 -0
  78. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/GridLegend.d.ts +0 -0
  79. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/GroupAux.d.ts +0 -0
  80. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/GroupAxis.d.ts +0 -0
  81. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/LineAreas.d.ts +0 -0
  82. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/Lines.d.ts +0 -0
  83. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/Ranking.d.ts +0 -0
  84. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/RankingAxis.d.ts +0 -0
  85. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/ScalingArea.d.ts +0 -0
  86. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/ValueAxis.d.ts +0 -0
  87. /package/dist/{src → orbcharts-plugins-basic/src}/grid/plugins/ValueStackAxis.d.ts +0 -0
  88. /package/dist/{src → orbcharts-plugins-basic/src}/grid/types.d.ts +0 -0
  89. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/defaults.d.ts +0 -0
  90. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/index.d.ts +0 -0
  91. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiBarStack.d.ts +0 -0
  92. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiBars.d.ts +0 -0
  93. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiBarsTriangle.d.ts +0 -0
  94. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiDots.d.ts +0 -0
  95. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiGridLegend.d.ts +0 -0
  96. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiGroupAxis.d.ts +0 -0
  97. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiLineAreas.d.ts +0 -0
  98. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiLines.d.ts +0 -0
  99. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/MultiValueAxis.d.ts +0 -0
  100. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/plugins/OverlappingValueAxes.d.ts +0 -0
  101. /package/dist/{src → orbcharts-plugins-basic/src}/multiGrid/types.d.ts +0 -0
  102. /package/dist/{src → orbcharts-plugins-basic/src}/multiValue/index.d.ts +0 -0
  103. /package/dist/{src → orbcharts-plugins-basic/src}/multiValue/plugins/Scatter.d.ts +0 -0
  104. /package/dist/{src → orbcharts-plugins-basic/src}/multiValue/plugins/ScatterAxes.d.ts +0 -0
  105. /package/dist/{src → orbcharts-plugins-basic/src}/noneData/defaults.d.ts +0 -0
  106. /package/dist/{src → orbcharts-plugins-basic/src}/noneData/index.d.ts +0 -0
  107. /package/dist/{src → orbcharts-plugins-basic/src}/noneData/plugins/Container.d.ts +0 -0
  108. /package/dist/{src → orbcharts-plugins-basic/src}/noneData/plugins/Tooltip.d.ts +0 -0
  109. /package/dist/{src → orbcharts-plugins-basic/src}/noneData/types.d.ts +0 -0
  110. /package/dist/{src → orbcharts-plugins-basic/src}/relationship/index.d.ts +0 -0
  111. /package/dist/{src → orbcharts-plugins-basic/src}/relationship/plugins/Relationship.d.ts +0 -0
  112. /package/dist/{src → orbcharts-plugins-basic/src}/series/defaults.d.ts +0 -0
  113. /package/dist/{src → orbcharts-plugins-basic/src}/series/index.d.ts +0 -0
  114. /package/dist/{src → orbcharts-plugins-basic/src}/series/plugins/Bubbles.d.ts +0 -0
  115. /package/dist/{src → orbcharts-plugins-basic/src}/series/plugins/Pie.d.ts +0 -0
  116. /package/dist/{src → orbcharts-plugins-basic/src}/series/plugins/PieLabels.d.ts +0 -0
  117. /package/dist/{src → orbcharts-plugins-basic/src}/series/plugins/SeriesLegend.d.ts +0 -0
  118. /package/dist/{src → orbcharts-plugins-basic/src}/series/plugins/Waffle.d.ts +0 -0
  119. /package/dist/{src → orbcharts-plugins-basic/src}/series/types.d.ts +0 -0
  120. /package/dist/{src → orbcharts-plugins-basic/src}/tree/defaults.d.ts +0 -0
  121. /package/dist/{src → orbcharts-plugins-basic/src}/tree/index.d.ts +0 -0
  122. /package/dist/{src → orbcharts-plugins-basic/src}/tree/plugins/TreeLegend.d.ts +0 -0
  123. /package/dist/{src → orbcharts-plugins-basic/src}/tree/plugins/TreeMap.d.ts +0 -0
  124. /package/dist/{src → orbcharts-plugins-basic/src}/tree/types.d.ts +0 -0
  125. /package/dist/{src → orbcharts-plugins-basic/src}/utils/commonUtils.d.ts +0 -0
  126. /package/dist/{src → orbcharts-plugins-basic/src}/utils/d3Graphics.d.ts +0 -0
  127. /package/dist/{src → orbcharts-plugins-basic/src}/utils/d3Utils.d.ts +0 -0
  128. /package/dist/{src → orbcharts-plugins-basic/src}/utils/observables.d.ts +0 -0
  129. /package/dist/{src → orbcharts-plugins-basic/src}/utils/orbchartsUtils.d.ts +0 -0
  130. /package/dist/{vite.config.d.ts → orbcharts-plugins-basic/vite.config.d.ts} +0 -0
@@ -6,16 +6,23 @@ import {
6
6
  takeUntil,
7
7
  map,
8
8
  distinctUntilChanged,
9
+ Observable,
9
10
  Subject } from 'rxjs'
10
11
  import type { Subscription } from 'rxjs'
11
12
  import {
12
13
  defineSeriesPlugin} from '@orbcharts/core'
13
14
  import type {
15
+ ComputedDatumSeries,
16
+ ChartParams,
17
+ SeriesContainerPosition,
14
18
  EventName,
15
19
  EventSeries } from '@orbcharts/core'
20
+ import type { PieEventTextsParams } from '../types'
16
21
  import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
17
22
  import { getD3TransitionEase } from '../../utils/d3Utils'
18
23
  import { getClassName } from '../../utils/orbchartsUtils'
24
+ import { seriesCenterSelectionObservable } from '../seriesObservables'
25
+
19
26
 
20
27
  type TextDatum = {
21
28
  text: string
@@ -74,62 +81,67 @@ function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles
74
81
  })
75
82
  }
76
83
 
77
-
78
-
79
- export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
80
-
84
+ function createEachPieEventTexts (pluginName: string, context: {
85
+ containerSelection: d3.Selection<SVGGElement, any, any, unknown>
86
+ computedData$: Observable<ComputedDatumSeries[][]>
87
+ containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
88
+ SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
89
+ fullParams$: Observable<PieEventTextsParams>
90
+ fullChartParams$: Observable<ChartParams>
91
+ seriesHighlight$: Observable<ComputedDatumSeries[]>
92
+ seriesContainerPosition$: Observable<SeriesContainerPosition>
93
+ event$: Subject<EventSeries>
94
+ }) {
81
95
  const destroy$ = new Subject()
82
96
 
83
- const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
97
+ // const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
84
98
  let centerTextSelection: d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> | undefined
85
99
  let storeEventSubscription: Subscription | undefined
86
100
 
87
- observer.layout$
88
- .pipe(
89
- first()
90
- )
91
- .subscribe(size => {
92
- selection
93
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
94
- observer.layout$
95
- .pipe(
96
- takeUntil(destroy$)
97
- )
98
- .subscribe(size => {
99
- selection
100
- .transition()
101
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
102
- })
103
- })
104
-
101
+ // context.layout$
102
+ // .pipe(
103
+ // first()
104
+ // )
105
+ // .subscribe(size => {
106
+ // selection
107
+ // .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
108
+ // context.layout$
109
+ // .pipe(
110
+ // takeUntil(destroy$)
111
+ // )
112
+ // .subscribe(size => {
113
+ // selection
114
+ // .transition()
115
+ // .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
116
+ // })
117
+ // })
105
118
 
106
- const highlightTarget$ = observer.fullChartParams$.pipe(
119
+ const highlightTarget$ = context.fullChartParams$.pipe(
107
120
  takeUntil(destroy$),
108
121
  map(d => d.highlightTarget),
109
122
  distinctUntilChanged()
110
123
  )
111
124
 
112
125
  combineLatest({
113
- computedData: observer.computedData$,
114
- fullParams: observer.fullParams$,
115
- fullChartParams: observer.fullChartParams$,
116
- highlightTarget: highlightTarget$
126
+ computedData: context.computedData$,
127
+ fullParams: context.fullParams$,
128
+ fullChartParams: context.fullChartParams$,
129
+ highlightTarget: highlightTarget$,
117
130
  }).pipe(
118
131
  takeUntil(destroy$),
119
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
120
132
  switchMap(async (d) => d),
121
133
  ).subscribe(data => {
122
134
 
123
- graphicSelection
124
- .transition()
135
+ context.containerSelection
136
+ .transition('move')
125
137
  .duration(data.fullChartParams.transitionDuration!)
126
- .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
138
+ // .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
127
139
  .tween('move', (event, datum) => {
128
140
  return (t) => {
129
141
  const renderData = makeTextData({
130
142
  eventData: {
131
143
  type: 'series',
132
- pluginName: name,
144
+ pluginName,
133
145
  eventName: 'transitionMove',
134
146
  event,
135
147
  highlightTarget: data.highlightTarget,
@@ -145,14 +157,14 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
145
157
  textAttrs: data.fullParams.textAttrs!,
146
158
  textStyles: data.fullParams.textStyles!
147
159
  })
148
- centerTextSelection = renderText(graphicSelection, renderData)
160
+ centerTextSelection = renderText(context.containerSelection, renderData)
149
161
  }
150
162
  })
151
163
  .on('end', (event, datum) => {
152
164
  const renderData = makeTextData({
153
165
  eventData: {
154
166
  type: 'series',
155
- pluginName: name,
167
+ pluginName,
156
168
  eventName: 'transitionEnd',
157
169
  event,
158
170
  highlightTarget: data.highlightTarget,
@@ -168,12 +180,12 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
168
180
  textAttrs: data.fullParams.textAttrs!,
169
181
  textStyles: data.fullParams.textStyles!
170
182
  })
171
- centerTextSelection = renderText(graphicSelection, renderData)
183
+ centerTextSelection = renderText(context.containerSelection, renderData)
172
184
 
173
185
  if (storeEventSubscription) {
174
186
  storeEventSubscription.unsubscribe()
175
187
  }
176
- storeEventSubscription = subject.event$
188
+ storeEventSubscription = context.event$
177
189
  .subscribe(eventData => {
178
190
  const renderData = makeTextData({
179
191
  eventData,
@@ -183,7 +195,7 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
183
195
  textAttrs: data.fullParams.textAttrs!,
184
196
  textStyles: data.fullParams.textStyles!
185
197
  })
186
- centerTextSelection = renderText(graphicSelection, renderData)
198
+ centerTextSelection = renderText(context.containerSelection, renderData)
187
199
  })
188
200
  })
189
201
  })
@@ -191,4 +203,56 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
191
203
  return () => {
192
204
  destroy$.next(undefined)
193
205
  }
206
+ }
207
+
208
+ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
209
+ const destroy$ = new Subject()
210
+
211
+ const { seriesCenterSelection$ } = seriesCenterSelectionObservable({
212
+ selection: selection,
213
+ pluginName,
214
+ seriesSeparate$: observer.seriesSeparate$,
215
+ seriesLabels$: observer.seriesLabels$,
216
+ seriesContainerPosition$: observer.seriesContainerPosition$
217
+ })
218
+
219
+ const unsubscribeFnArr: (() => void)[] = []
220
+
221
+ seriesCenterSelection$.subscribe(seriesCenterSelection => {
222
+ // 每次重新計算時,清除之前的訂閱
223
+ unsubscribeFnArr.forEach(fn => fn())
224
+
225
+ seriesCenterSelection.each((d, containerIndex, g) => {
226
+
227
+ const containerSelection = d3.select(g[containerIndex])
228
+
229
+ const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
230
+ takeUntil(destroy$),
231
+ map(data => data[containerIndex] ?? data[0])
232
+ )
233
+
234
+ const containerPosition$ = observer.seriesContainerPosition$.pipe(
235
+ takeUntil(destroy$),
236
+ map(data => data[containerIndex] ?? data[0])
237
+ )
238
+
239
+ unsubscribeFnArr[containerIndex] = createEachPieEventTexts(pluginName, {
240
+ containerSelection: containerSelection,
241
+ computedData$: observer.computedData$,
242
+ containerComputedLayoutData$: containerComputedLayoutData$,
243
+ SeriesDataMap$: observer.SeriesDataMap$,
244
+ fullParams$: observer.fullParams$,
245
+ fullChartParams$: observer.fullChartParams$,
246
+ seriesHighlight$: observer.seriesHighlight$,
247
+ seriesContainerPosition$: containerPosition$,
248
+ event$: subject.event$,
249
+ })
250
+
251
+ })
252
+ })
253
+
254
+ return () => {
255
+ destroy$.next(undefined)
256
+ unsubscribeFnArr.forEach(fn => fn())
257
+ }
194
258
  })
@@ -5,11 +5,15 @@ import {
5
5
  first,
6
6
  map,
7
7
  takeUntil,
8
+ Observable,
8
9
  Subject,
9
10
  BehaviorSubject } from 'rxjs'
10
11
  import {
11
12
  defineSeriesPlugin } from '@orbcharts/core'
12
13
  import type {
14
+ ComputedDatumSeries,
15
+ SeriesContainerPosition,
16
+ EventSeries,
13
17
  ChartParams } from '@orbcharts/core'
14
18
  import type { PieLabelsParams } from '../types'
15
19
  import type { PieDatum } from '../seriesUtils'
@@ -17,6 +21,7 @@ import { DEFAULT_PIE_LABELS_PARAMS } from '../defaults'
17
21
  import { makePieData } from '../seriesUtils'
18
22
  import { makeD3Arc } from '../../utils/d3Utils'
19
23
  import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
24
+ import { seriesCenterSelectionObservable } from '../seriesObservables'
20
25
 
21
26
  interface RenderDatum {
22
27
  pieDatum: PieDatum
@@ -152,52 +157,42 @@ function highlight ({ labelSelection, ids, fullChartParams }: {
152
157
  }
153
158
 
154
159
 
155
- // function removeHighlight ({ labelSelection }: {
156
- // labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any> | undefined)
157
- // }) {
158
- // if (!labelSelection) {
159
- // return
160
- // }
161
-
162
- // // 取消放大
163
- // labelSelection
164
- // .transition()
165
- // .duration(200)
166
- // .attr('transform', (d) => {
167
- // return 'translate(' + d.x + ',' + d.y + ')'
168
- // })
169
- // .style('opacity', 1)
170
-
171
- // }
172
-
173
-
174
- export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
175
-
160
+ function createEachPieLabel (pluginName: string, context: {
161
+ containerSelection: d3.Selection<SVGGElement, any, any, unknown>
162
+ // computedData$: Observable<ComputedDatumSeries[][]>
163
+ containerComputedLayoutData$: Observable<ComputedDatumSeries[]>
164
+ // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
165
+ fullParams$: Observable<PieLabelsParams>
166
+ fullChartParams$: Observable<ChartParams>
167
+ seriesHighlight$: Observable<ComputedDatumSeries[]>
168
+ seriesContainerPosition$: Observable<SeriesContainerPosition>
169
+ event$: Subject<EventSeries>
170
+ }) {
176
171
  const destroy$ = new Subject()
177
172
 
178
- const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
173
+ // const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
179
174
  let labelSelection$: Subject<d3.Selection<SVGPathElement, RenderDatum, any, any>> = new Subject()
180
175
  let renderData: RenderDatum[] = []
181
176
  // let highlightTarget: HighlightTarget | undefined
182
177
  // let fullChartParams: ChartParams | undefined
183
178
 
184
- observer.layout$
185
- .pipe(
186
- first()
187
- )
188
- .subscribe(size => {
189
- selection
190
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
191
- observer.layout$
192
- .pipe(
193
- takeUntil(destroy$)
194
- )
195
- .subscribe(size => {
196
- selection
197
- .transition()
198
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
199
- })
200
- })
179
+ // observer.layout$
180
+ // .pipe(
181
+ // first()
182
+ // )
183
+ // .subscribe(size => {
184
+ // selection
185
+ // .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
186
+ // observer.layout$
187
+ // .pipe(
188
+ // takeUntil(destroy$)
189
+ // )
190
+ // .subscribe(size => {
191
+ // selection
192
+ // .transition()
193
+ // .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
194
+ // })
195
+ // })
201
196
 
202
197
 
203
198
 
@@ -222,13 +217,12 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
222
217
  // })
223
218
 
224
219
  combineLatest({
225
- layout: observer.layout$,
226
- computedData: observer.computedData$,
227
- fullParams: observer.fullParams$,
228
- fullChartParams: observer.fullChartParams$
220
+ layout: context.seriesContainerPosition$,
221
+ containerComputedLayoutData: context.containerComputedLayoutData$,
222
+ fullParams: context.fullParams$,
223
+ fullChartParams: context.fullChartParams$
229
224
  }).pipe(
230
225
  takeUntil(destroy$),
231
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
232
226
  switchMap(async (d) => d),
233
227
  ).subscribe(data => {
234
228
 
@@ -252,14 +246,14 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
252
246
  })
253
247
 
254
248
  const pieData = makePieData({
255
- computedDataSeries: data.computedData,
249
+ data: data.containerComputedLayoutData,
256
250
  startAngle: data.fullParams.startAngle,
257
251
  endAngle: data.fullParams.endAngle
258
252
  })
259
253
 
260
254
  renderData = makeRenderData(pieData, arc, arcMouseover, data.fullParams.labelCentroid)
261
255
 
262
- const labelSelection = renderLabel(graphicSelection, renderData, data.fullParams, data.fullChartParams)
256
+ const labelSelection = renderLabel(context.containerSelection, renderData, data.fullParams, data.fullChartParams)
263
257
 
264
258
  labelSelection$.next(labelSelection)
265
259
 
@@ -267,10 +261,10 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
267
261
 
268
262
  combineLatest({
269
263
  labelSelection: labelSelection$,
270
- highlight: observer.seriesHighlight$.pipe(
264
+ highlight: context.seriesHighlight$.pipe(
271
265
  map(data => data.map(d => d.id))
272
266
  ),
273
- fullChartParams: observer.fullChartParams$,
267
+ fullChartParams: context.fullChartParams$,
274
268
  }).pipe(
275
269
  takeUntil(destroy$),
276
270
  switchMap(async d => d)
@@ -282,6 +276,59 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
282
276
  })
283
277
  })
284
278
 
279
+ return () => {
280
+ destroy$.next(undefined)
281
+ }
282
+ }
283
+
284
+
285
+ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
286
+
287
+ const destroy$ = new Subject()
288
+
289
+ const { seriesCenterSelection$ } = seriesCenterSelectionObservable({
290
+ selection: selection,
291
+ pluginName,
292
+ seriesSeparate$: observer.seriesSeparate$,
293
+ seriesLabels$: observer.seriesLabels$,
294
+ seriesContainerPosition$: observer.seriesContainerPosition$
295
+ })
296
+
297
+ const unsubscribeFnArr: (() => void)[] = []
298
+
299
+ seriesCenterSelection$.subscribe(seriesCenterSelection => {
300
+ // 每次重新計算時,清除之前的訂閱
301
+ unsubscribeFnArr.forEach(fn => fn())
302
+
303
+ seriesCenterSelection.each((d, containerIndex, g) => {
304
+
305
+ const containerSelection = d3.select(g[containerIndex])
306
+
307
+ const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
308
+ takeUntil(destroy$),
309
+ map(data => data[containerIndex] ?? data[0])
310
+ )
311
+
312
+ const containerPosition$ = observer.seriesContainerPosition$.pipe(
313
+ takeUntil(destroy$),
314
+ map(data => data[containerIndex] ?? data[0])
315
+ )
316
+
317
+ unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
318
+ containerSelection: containerSelection,
319
+ // computedData$: observer.computedData$,
320
+ containerComputedLayoutData$: containerComputedLayoutData$,
321
+ // SeriesDataMap$: observer.SeriesDataMap$,
322
+ fullParams$: observer.fullParams$,
323
+ fullChartParams$: observer.fullChartParams$,
324
+ seriesHighlight$: observer.seriesHighlight$,
325
+ seriesContainerPosition$: containerPosition$,
326
+ event$: subject.event$,
327
+ })
328
+
329
+ })
330
+ })
331
+
285
332
  return () => {
286
333
  destroy$.next(undefined)
287
334
  }
@@ -47,7 +47,8 @@ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND
47
47
  seriesLabels$,
48
48
  fullParams$,
49
49
  layout$: observer.layout$,
50
- fullChartParams$: observer.fullChartParams$
50
+ fullChartParams$: observer.fullChartParams$,
51
+ textSizePx$: observer.textSizePx$
51
52
  })
52
53
 
53
54
  return () => {
@@ -0,0 +1,145 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Observable,
4
+ Subject,
5
+ of,
6
+ takeUntil,
7
+ filter,
8
+ first,
9
+ map,
10
+ switchMap,
11
+ combineLatest,
12
+ merge,
13
+ shareReplay,
14
+ distinctUntilChanged
15
+ } from 'rxjs'
16
+ import type {
17
+ SeriesContainerPosition } from '@orbcharts/core'
18
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
19
+
20
+ function createSeriesSelection ({ selection, pluginName, seriesSeparate$, seriesLabels$ }: {
21
+ selection: d3.Selection<any, unknown, any, unknown>
22
+ pluginName: string
23
+ seriesSeparate$: Observable<boolean>
24
+ seriesLabels$: Observable<string[]>
25
+ }) {
26
+ const seriesClassName = getClassName(pluginName, 'series')
27
+
28
+ return combineLatest({
29
+ seriesLabels: seriesLabels$,
30
+ seriesSeparate: seriesSeparate$
31
+ }).pipe(
32
+ switchMap(async d => d),
33
+ map((data, i) => {
34
+ const selectionData = data.seriesSeparate ? data.seriesLabels : [data.seriesLabels.join('')]
35
+ return selection
36
+ .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
37
+ .data(selectionData, d => d)
38
+ .join(
39
+ enter => {
40
+ return enter
41
+ .append('g')
42
+ .classed(seriesClassName, true)
43
+ },
44
+ update => update,
45
+ exit => exit.remove()
46
+ )
47
+ }),
48
+ shareReplay(1)
49
+ )
50
+ }
51
+
52
+ // series選取器,以起始座標位置為基準
53
+ export const seriesStartSelectionObservable = ({ selection, pluginName, seriesSeparate$, seriesLabels$, seriesContainerPosition$ }: {
54
+ selection: d3.Selection<any, unknown, any, unknown>
55
+ pluginName: string
56
+ seriesSeparate$: Observable<boolean>
57
+ seriesLabels$: Observable<string[]>
58
+ seriesContainerPosition$: Observable<SeriesContainerPosition[]>
59
+ }) => {
60
+
61
+ const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, seriesSeparate$, seriesLabels$ })
62
+
63
+ combineLatest({
64
+ seriesStartSelection: seriesStartSelection$,
65
+ seriesContainerPosition: seriesContainerPosition$
66
+ }).pipe(
67
+ switchMap(async d => d),
68
+ // selection數量相同的時候才執行
69
+ distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
70
+ ).subscribe(data => {
71
+ // 無transition動畫
72
+ data.seriesStartSelection
73
+ .attr('transform', (d, i) => {
74
+ const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
75
+ return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
76
+ })
77
+ })
78
+
79
+ combineLatest({
80
+ seriesStartSelection: seriesStartSelection$,
81
+ seriesContainerPosition: seriesContainerPosition$
82
+ }).pipe(
83
+ switchMap(async d => d),
84
+ ).subscribe(data => {
85
+ // 有transition動畫
86
+ data.seriesStartSelection
87
+ .transition()
88
+ .attr('transform', (d, i) => {
89
+ const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
90
+ return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
91
+ })
92
+ })
93
+
94
+ return {
95
+ seriesStartSelection$
96
+ }
97
+ }
98
+
99
+ // series選取器,以中心座標位置為基準
100
+ export const seriesCenterSelectionObservable = ({ selection, pluginName, seriesSeparate$, seriesLabels$, seriesContainerPosition$ }: {
101
+ selection: d3.Selection<any, unknown, any, unknown>
102
+ pluginName: string
103
+ seriesSeparate$: Observable<boolean>
104
+ seriesLabels$: Observable<string[]>
105
+ seriesContainerPosition$: Observable<SeriesContainerPosition[]>
106
+ }) => {
107
+
108
+ const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, seriesSeparate$, seriesLabels$ })
109
+
110
+ combineLatest({
111
+ seriesCenterSelection: seriesCenterSelection$,
112
+ seriesContainerPosition: seriesContainerPosition$
113
+ }).pipe(
114
+ switchMap(async d => d),
115
+ // selection數量相同的時候才執行
116
+ distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
117
+ ).subscribe(data => {
118
+ // 無transition動畫
119
+ data.seriesCenterSelection
120
+ .attr('transform', (d, i) => {
121
+ const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
122
+ return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
123
+ })
124
+ })
125
+
126
+ combineLatest({
127
+ seriesCenterSelection: seriesCenterSelection$,
128
+ seriesContainerPosition: seriesContainerPosition$
129
+ }).pipe(
130
+ switchMap(async d => d),
131
+ ).subscribe(data => {
132
+ // 有transition動畫
133
+ data.seriesCenterSelection
134
+ .transition()
135
+ .attr('transform', (d, i) => {
136
+ const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
137
+ return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
138
+ })
139
+ })
140
+
141
+ return {
142
+ seriesCenterSelection$,
143
+ }
144
+ }
145
+
@@ -17,8 +17,8 @@ export interface PieDatum extends D3PieDatum {
17
17
  id: string
18
18
  }
19
19
 
20
- export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
21
- computedDataSeries: ComputedDataSeries
20
+ export function makePieData ({ data, startAngle, endAngle }: {
21
+ data: ComputedDatumSeries[]
22
22
  startAngle: number
23
23
  endAngle: number
24
24
  // itemLabels: string[]
@@ -30,12 +30,12 @@ export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
30
30
  .endAngle(endAngle)
31
31
  .value((d) => d.visible == false ? 0 : d.value)
32
32
  // .sort(null) // 不要排序
33
- .sort((a, b) => a.sortedIndex - b.sortedIndex)
33
+ .sort((a, b) => a.seq - b.seq)
34
34
  // .sort((a: any, b: any) => {
35
35
  // return b.value - a.value
36
36
  // })
37
37
  // .sort(d3.ascending)
38
- const pieData = pie(computedDataSeries)
38
+ const pieData = pie(data)
39
39
  return pieData.map((d: D3PieDatum, i: number) => {
40
40
  // const itemLabel = d.data.itemLabel
41
41
  let _d: any = d
@@ -47,7 +47,8 @@ export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAM
47
47
  seriesLabels$: categoryLabels$,
48
48
  fullParams$,
49
49
  layout$: observer.layout$,
50
- fullChartParams$: observer.fullChartParams$
50
+ fullChartParams$: observer.fullChartParams$,
51
+ textSizePx$: observer.textSizePx$
51
52
  })
52
53
 
53
54
  return () => {
@@ -20,13 +20,15 @@ const pluginName = 'TreeMap'
20
20
  const treeClassName = getClassName(pluginName, 'tree')
21
21
  const tileClassName = getClassName(pluginName, 'tile')
22
22
 
23
- function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
23
+ function renderTree ({ selection, treeData, fullParams, fullChartParams, textSizePx }: {
24
24
  selection: d3.Selection<any, any, any, any>
25
25
  treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
26
26
  fullParams: TreeMapParams
27
27
  fullChartParams: ChartParams
28
+ textSizePx: number
28
29
  }) {
29
- const padding = fullChartParams.styles.textSize / 2
30
+ const padding = textSizePx / 2
31
+ const lineHeight = textSizePx // 行高
30
32
 
31
33
  const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`g.${treeClassName}`)
32
34
  .data(treeData, d => d.data.id)
@@ -75,7 +77,6 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
75
77
  const words = d.data.label.split(/\s+/).reverse() // 以空隔分割字串
76
78
  let word;
77
79
  let line: string[] = []
78
- const lineHeight = fullChartParams.styles.textSize // 行高
79
80
  const x = textElement.attr("x")
80
81
  let y = textElement.attr("y")
81
82
  let dy = 0
@@ -180,7 +181,8 @@ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({
180
181
  selection: of(selection),
181
182
  treeData: treeData$,
182
183
  fullParams: observer.fullParams$,
183
- fullChartParams: observer.fullChartParams$
184
+ fullChartParams: observer.fullChartParams$,
185
+ textSizePx: observer.textSizePx$
184
186
  }).pipe(
185
187
  takeUntil(destroy$),
186
188
  switchMap(async d => d),
@@ -189,7 +191,8 @@ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({
189
191
  selection,
190
192
  treeData: data.treeData,
191
193
  fullParams: data.fullParams,
192
- fullChartParams: data.fullChartParams
194
+ fullChartParams: data.fullChartParams,
195
+ textSizePx: data.textSizePx
193
196
  })
194
197
  })
195
198
  )
package/tsconfig.json CHANGED
@@ -10,5 +10,8 @@
10
10
  "moduleResolution": "node",
11
11
  "allowSyntheticDefaultImports" : true,
12
12
  "esModuleInterop" : true,
13
+ "paths":{
14
+ "@orbcharts/core": ["./../orbcharts-core/src"]
15
+ }
13
16
  }
14
17
  }