@orbcharts/plugins-basic 3.0.4 → 3.0.6

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 (117) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +4738 -4700
  3. package/dist/orbcharts-plugins-basic.umd.js +48 -48
  4. package/dist/src/series/seriesObservables.d.ts +5 -7
  5. package/lib/core-types.ts +7 -7
  6. package/lib/core.ts +6 -6
  7. package/lib/gridObservables.ts +6 -6
  8. package/lib/plugins-basic-types.ts +6 -6
  9. package/package.json +48 -48
  10. package/src/base/BaseBars.ts +765 -765
  11. package/src/base/BaseBarsTriangle.ts +676 -676
  12. package/src/base/BaseDots.ts +464 -464
  13. package/src/base/BaseGroupAxis.ts +691 -691
  14. package/src/base/BaseLegend.ts +684 -684
  15. package/src/base/BaseLineAreas.ts +629 -629
  16. package/src/base/BaseLines.ts +706 -706
  17. package/src/base/BaseOrdinalBubbles.ts +729 -729
  18. package/src/base/BaseRacingBars.ts +582 -582
  19. package/src/base/BaseRacingLabels.ts +404 -404
  20. package/src/base/BaseRacingValueLabels.ts +403 -403
  21. package/src/base/BaseStackedBars.ts +782 -782
  22. package/src/base/BaseTooltip.ts +386 -386
  23. package/src/base/BaseValueAxis.ts +600 -600
  24. package/src/base/BaseXAxis.ts +427 -427
  25. package/src/base/BaseXZoom.ts +241 -241
  26. package/src/base/BaseYAxis.ts +389 -389
  27. package/src/base/types.ts +2 -2
  28. package/src/const.ts +30 -30
  29. package/src/grid/defaults.ts +213 -213
  30. package/src/grid/gridObservables.ts +635 -635
  31. package/src/grid/index.ts +16 -16
  32. package/src/grid/plugins/Bars.ts +69 -69
  33. package/src/grid/plugins/BarsPN.ts +66 -66
  34. package/src/grid/plugins/BarsTriangle.ts +73 -73
  35. package/src/grid/plugins/Dots.ts +68 -68
  36. package/src/grid/plugins/GridLegend.ts +107 -107
  37. package/src/grid/plugins/GridTooltip.ts +66 -66
  38. package/src/grid/plugins/GroupAux.ts +1095 -1095
  39. package/src/grid/plugins/GroupAxis.ts +73 -73
  40. package/src/grid/plugins/GroupZoom.ts +218 -218
  41. package/src/grid/plugins/LineAreas.ts +65 -65
  42. package/src/grid/plugins/Lines.ts +59 -59
  43. package/src/grid/plugins/StackedBars.ts +64 -64
  44. package/src/grid/plugins/StackedValueAxis.ts +96 -96
  45. package/src/grid/plugins/ValueAxis.ts +94 -94
  46. package/src/index.ts +6 -6
  47. package/src/multiGrid/defaults.ts +244 -244
  48. package/src/multiGrid/index.ts +14 -14
  49. package/src/multiGrid/multiGridObservables.ts +50 -50
  50. package/src/multiGrid/plugins/MultiBars.ts +108 -108
  51. package/src/multiGrid/plugins/MultiBarsTriangle.ts +114 -114
  52. package/src/multiGrid/plugins/MultiDots.ts +102 -102
  53. package/src/multiGrid/plugins/MultiGridLegend.ts +169 -169
  54. package/src/multiGrid/plugins/MultiGridTooltip.ts +66 -66
  55. package/src/multiGrid/plugins/MultiGroupAxis.ts +137 -137
  56. package/src/multiGrid/plugins/MultiLineAreas.ts +107 -107
  57. package/src/multiGrid/plugins/MultiLines.ts +101 -101
  58. package/src/multiGrid/plugins/MultiStackedBars.ts +106 -106
  59. package/src/multiGrid/plugins/MultiStackedValueAxis.ts +134 -134
  60. package/src/multiGrid/plugins/MultiValueAxis.ts +134 -134
  61. package/src/multiGrid/plugins/OverlappingStackedValueAxes.ts +300 -300
  62. package/src/multiGrid/plugins/OverlappingValueAxes.ts +300 -300
  63. package/src/multiValue/defaults.ts +523 -523
  64. package/src/multiValue/index.ts +16 -16
  65. package/src/multiValue/multiValueObservables.ts +781 -781
  66. package/src/multiValue/plugins/MultiValueLegend.ts +107 -107
  67. package/src/multiValue/plugins/MultiValueTooltip.ts +66 -66
  68. package/src/multiValue/plugins/OrdinalAux.ts +660 -660
  69. package/src/multiValue/plugins/OrdinalAxis.ts +524 -524
  70. package/src/multiValue/plugins/OrdinalBubbles.ts +226 -226
  71. package/src/multiValue/plugins/OrdinalZoom.ts +57 -57
  72. package/src/multiValue/plugins/RacingBars.ts +375 -375
  73. package/src/multiValue/plugins/RacingCounterTexts.ts +300 -300
  74. package/src/multiValue/plugins/RacingValueAxis.ts +114 -114
  75. package/src/multiValue/plugins/Scatter.ts +486 -486
  76. package/src/multiValue/plugins/ScatterBubbles.ts +635 -635
  77. package/src/multiValue/plugins/XAxis.ts +107 -107
  78. package/src/multiValue/plugins/XYAux.ts +683 -683
  79. package/src/multiValue/plugins/XYAxes.ts +194 -194
  80. package/src/multiValue/plugins/XYAxes_legacy.ts +683 -683
  81. package/src/multiValue/plugins/XZoom.ts +40 -40
  82. package/src/noneData/defaults.ts +102 -102
  83. package/src/noneData/index.ts +3 -3
  84. package/src/noneData/plugins/Container.ts +27 -27
  85. package/src/noneData/plugins/Tooltip.ts +373 -373
  86. package/src/relationship/defaults.ts +221 -221
  87. package/src/relationship/index.ts +5 -5
  88. package/src/relationship/plugins/ForceDirected.ts +1056 -1173
  89. package/src/relationship/plugins/ForceDirectedBubbles.ts +1294 -1411
  90. package/src/relationship/plugins/RelationshipLegend.ts +100 -100
  91. package/src/relationship/plugins/RelationshipTooltip.ts +66 -66
  92. package/src/relationship/relationshipObservables.ts +49 -49
  93. package/src/series/defaults.ts +223 -221
  94. package/src/series/index.ts +9 -9
  95. package/src/series/plugins/Bubbles.ts +781 -636
  96. package/src/series/plugins/Pie.ts +622 -623
  97. package/src/series/plugins/PieEventTexts.ts +283 -284
  98. package/src/series/plugins/PieLabels.ts +639 -640
  99. package/src/series/plugins/Rose.ts +515 -516
  100. package/src/series/plugins/RoseLabels.ts +599 -600
  101. package/src/series/plugins/SeriesLegend.ts +107 -107
  102. package/src/series/plugins/SeriesTooltip.ts +66 -66
  103. package/src/series/seriesObservables.ts +168 -145
  104. package/src/series/seriesUtils.ts +51 -51
  105. package/src/tree/defaults.ts +102 -102
  106. package/src/tree/index.ts +4 -4
  107. package/src/tree/plugins/TreeLegend.ts +100 -100
  108. package/src/tree/plugins/TreeMap.ts +341 -341
  109. package/src/tree/plugins/TreeTooltip.ts +66 -66
  110. package/src/utils/commonUtils.ts +31 -31
  111. package/src/utils/d3Graphics.ts +176 -176
  112. package/src/utils/d3Utils.ts +92 -92
  113. package/src/utils/observables.ts +14 -14
  114. package/src/utils/orbchartsUtils.ts +129 -129
  115. package/tsconfig.base.json +13 -13
  116. package/tsconfig.json +2 -2
  117. package/vite.config.js +22 -22
@@ -1,766 +1,766 @@
1
- import * as d3 from 'd3'
2
- import {
3
- combineLatest,
4
- map,
5
- switchMap,
6
- takeUntil,
7
- distinctUntilChanged,
8
- shareReplay,
9
- Observable,
10
- Subject } from 'rxjs'
11
- import type { BasePluginFn } from './types'
12
- import type {
13
- ComputedDatumGrid,
14
- ComputedDataGrid,
15
- ComputedAxesDataGrid,
16
- DataFormatterTypeMap,
17
- ContainerPositionScaled,
18
- EventGrid,
19
- ChartParams,
20
- Layout,
21
- TransformData } from '../../lib/core-types'
22
- import type { BaseBarsParams } from '../../lib/plugins-basic-types'
23
- import { getD3TransitionEase } from '../utils/d3Utils'
24
- import { getClassName, getUniID } from '../utils/orbchartsUtils'
25
- import { gridSelectionsObservable } from '../grid/gridObservables'
26
-
27
- // export interface BaseBarsParams {
28
- // // barType: BarType
29
- // barWidth: number
30
- // barPadding: number
31
- // barGroupPadding: number // 群組和群組間的間隔
32
- // barRadius: number | boolean
33
- // }
34
-
35
- interface BaseBarsContext {
36
- selection: d3.Selection<any, unknown, any, unknown>
37
- computedData$: Observable<ComputedDataGrid>
38
- computedAxesData$: Observable<ComputedAxesDataGrid>
39
- visibleComputedData$: Observable<ComputedDatumGrid[][]>
40
- visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
41
- seriesLabels$: Observable<string[]>
42
- SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
43
- GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
44
- fullParams$: Observable<BaseBarsParams>
45
- fullChartParams$: Observable<ChartParams>
46
- gridAxesTransform$: Observable<TransformData>
47
- gridGraphicTransform$: Observable<TransformData>
48
- gridGraphicReverseScale$: Observable<[number, number][]>
49
- gridAxesSize$: Observable<{
50
- width: number;
51
- height: number;
52
- }>
53
- gridHighlight$: Observable<ComputedDatumGrid[]>
54
- gridContainerPosition$: Observable<ContainerPositionScaled[]>
55
- isSeriesSeprate$: Observable<boolean>
56
- event$: Subject<EventGrid>
57
- }
58
-
59
- interface RenderBarParams {
60
- graphicGSelection: d3.Selection<SVGGElement, string, any, any>
61
- rectClassName: string
62
- visibleComputedAxesData: ComputedAxesDataGrid
63
- zeroYArr: number[]
64
- groupLabels: string[]
65
- barScale: d3.ScalePoint<string>
66
- params: BaseBarsParams
67
- chartParams: ChartParams
68
- barWidth: number
69
- transformedBarRadius: [number, number][]
70
- delayGroup: number
71
- transitionItem: number
72
- isSeriesSeprate: boolean
73
- }
74
-
75
- type ClipPathDatum = {
76
- id: string;
77
- // x: number;
78
- // y: number;
79
- width: number;
80
- height: number;
81
- }
82
-
83
- // const pluginName = 'Bars'
84
- // const rectClassName = getClassName(pluginName, 'rect')
85
- // group的delay在動畫中的佔比(剩餘部份的時間為圖形本身的動畫時間,因為delay時間和最後一個group的動畫時間加總為1)
86
- const groupDelayProportionOfDuration = 0.3
87
-
88
- function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding = 0, barGroupPadding = 0 }: {
89
- axisWidth: number
90
- groupAmount: number
91
- barAmountOfGroup: number
92
- barPadding: number
93
- barGroupPadding: number
94
- }) {
95
- const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
96
- ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
97
- : axisWidth
98
- const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
99
- return width > 1 ? width : 1
100
- }
101
-
102
- function makeBarScale (barWidth: number, seriesLabels: string[], params: BaseBarsParams) {
103
- const barHalfWidth = barWidth! / 2
104
- const barGroupWidth = barWidth * seriesLabels.length + params.barPadding! * seriesLabels.length
105
- return d3.scalePoint()
106
- .domain(seriesLabels)
107
- .range([-barGroupWidth / 2 + barHalfWidth, barGroupWidth / 2 - barHalfWidth])
108
- }
109
-
110
- function calcDelayGroup (barGroupAmount: number, totalDuration: number) {
111
- if (barGroupAmount <= 1) {
112
- // 一筆內計算會出錯所以不算
113
- return 0
114
- }
115
- return totalDuration / (barGroupAmount - 1) * groupDelayProportionOfDuration // 依group數量計算
116
- }
117
-
118
- function calctransitionItem (barGroupAmount: number, totalDuration: number) {
119
- if (barGroupAmount <= 1) {
120
- // 一筆內不會有delay
121
- return totalDuration
122
- }
123
- return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
124
- }
125
- // let _data: ComputedDatumGrid[][] = []
126
-
127
- function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedAxesData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
128
-
129
- const barHalfWidth = barWidth! / 2
130
-
131
- graphicGSelection
132
- .each((seriesData, seriesIndex, g) => {
133
- d3.select(g[seriesIndex])
134
- .selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
135
- .data(visibleComputedAxesData[seriesIndex] ?? [], d => d.id)
136
- .join(
137
- enter => {
138
- // console.log('enter')
139
- return enter
140
- .append('rect')
141
- .classed(rectClassName, true)
142
- .attr('cursor', 'pointer')
143
- .attr('height', d => 1)
144
- },
145
- update => update,
146
- exit => exit.remove()
147
- )
148
- .attr('transform', (d, i) => `translate(${(d ? d.axisX : 0) - barHalfWidth}, ${0})`)
149
- .attr('fill', d => d.color)
150
- .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
151
- .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
152
- .attr('width', barWidth!)
153
- .attr('rx', transformedBarRadius[seriesIndex][0] ?? 1)
154
- .attr('ry', transformedBarRadius[seriesIndex][1] ?? 1)
155
- .transition()
156
- .duration(transitionItem)
157
- .ease(getD3TransitionEase(chartParams.transitionEase))
158
- .delay((d, i) => d.groupIndex * delayGroup)
159
- .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
160
- })
161
-
162
-
163
- // graphicGSelection
164
- // .each((d, seriesIndex, g) => {
165
- // d3.select(g[seriesIndex])
166
- // .selectAll<SVGGElement, ComputedDatumGrid>(`g.${barClassName}`)
167
- // .data(computedData[seriesIndex], d => d.seriesIndex)
168
- // .join('g')
169
- // .classed(barClassName, true)
170
- // .attr('transform', (d, i) => `translate(${d ? d.axisX : 0}, ${0})`)
171
- // .each((datum, i, g) => {
172
- // d3.select(g[i])
173
- // .selectAll<SVGRectElement, ComputedDatumGrid>(`rect.${rectClassName}`)
174
- // .data([computedData[seriesIndex][i]], d => d.id)
175
- // .join(
176
- // enter => {
177
- // return enter
178
- // .append('rect')
179
- // .classed(rectClassName, true)
180
- // .attr('height', d => 0)
181
- // },
182
- // update => update,
183
- // exit => exit.remove()
184
- // )
185
- // .attr('cursor', 'pointer')
186
- // .attr('fill', d => d.color)
187
- // .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
188
- // .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
189
- // .attr('width', barWidth!)
190
- // .attr('transform', `translate(${-barHalfWidth}, 0)`)
191
- // // .attr('rx', params.barRadius == true ? barHalfWidth
192
- // // : params.barRadius == false ? 0
193
- // // : typeof params.barRadius == 'number' ? params.barRadius
194
- // // : 0)
195
- // .attr('rx', transformedBarRadius[0])
196
- // .attr('ry', transformedBarRadius[1])
197
- // .transition()
198
- // .duration(transitionItem)
199
- // .ease(getD3TransitionEase(chartParams.transitionEase))
200
- // .delay((d, i) => d.groupIndex * delayGroup)
201
- // .attr('height', d => Math.abs(d.axisYFromZero))
202
- // })
203
- // })
204
-
205
- const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown> = graphicGSelection.selectAll(`rect.${rectClassName}`)
206
-
207
- return graphicBarSelection
208
- }
209
-
210
- function renderClipPath ({ defsSelection, clipPathData }: {
211
- defsSelection: d3.Selection<SVGDefsElement, any, any, any>
212
- clipPathData: ClipPathDatum[]
213
- }) {
214
- const clipPath = defsSelection
215
- .selectAll<SVGClipPathElement, Layout>('clipPath')
216
- .data(clipPathData)
217
- .join(
218
- enter => {
219
- return enter
220
- .append('clipPath')
221
- },
222
- update => update,
223
- exit => exit.remove()
224
- )
225
- .attr('id', d => d.id)
226
- .each((d, i, g) => {
227
- const rect = d3.select(g[i])
228
- .selectAll<SVGRectElement, typeof d>('rect')
229
- .data([d])
230
- .join(
231
- enter => {
232
- return enter
233
- .append('rect')
234
- },
235
- update => update,
236
- exit => exit.remove()
237
- )
238
- .attr('x', 0)
239
- .attr('y', 0)
240
- .attr('width', _d => _d.width)
241
- .attr('height', _d => _d.height)
242
- })
243
- }
244
-
245
- function highlight ({ selection, ids, fullChartParams }: {
246
- selection: d3.Selection<any, ComputedDatumGrid, any, any>
247
- ids: string[]
248
- fullChartParams: ChartParams
249
- }) {
250
- selection.interrupt('highlight')
251
-
252
- if (!ids.length) {
253
- // remove highlight
254
- selection
255
- .transition('highlight')
256
- .duration(200)
257
- .style('opacity', 1)
258
- return
259
- }
260
-
261
- selection
262
- .each((d, i, n) => {
263
- if (ids.includes(d.id)) {
264
- d3.select(n[i])
265
- .style('opacity', 1)
266
- } else {
267
- d3.select(n[i])
268
- .style('opacity', fullChartParams.styles.unhighlightedOpacity)
269
- }
270
- })
271
- }
272
-
273
-
274
- export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string, {
275
- selection,
276
- computedData$,
277
- computedAxesData$,
278
- visibleComputedData$,
279
- visibleComputedAxesData$,
280
- seriesLabels$,
281
- SeriesDataMap$,
282
- GroupDataMap$,
283
- fullParams$,
284
- fullChartParams$,
285
- gridAxesTransform$,
286
- gridGraphicTransform$,
287
- gridGraphicReverseScale$,
288
- gridAxesSize$,
289
- gridHighlight$,
290
- gridContainerPosition$,
291
- isSeriesSeprate$,
292
- event$
293
- }) => {
294
-
295
- const destroy$ = new Subject()
296
-
297
- const clipPathID = getUniID(pluginName, 'clipPath-box')
298
- const rectClassName = getClassName(pluginName, 'rect')
299
-
300
- // const seriesSelection$ = computedData$.pipe(
301
- // takeUntil(destroy$),
302
- // distinctUntilChanged((a, b) => {
303
- // // 只有當series的數量改變時,才重新計算
304
- // return a.length === b.length
305
- // }),
306
- // map((computedData, i) => {
307
- // return selection
308
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
309
- // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
310
- // .join(
311
- // enter => {
312
- // return enter
313
- // .append('g')
314
- // .classed(seriesClassName, true)
315
- // .each((d, i, g) => {
316
- // const axesSelection = d3.select(g[i])
317
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
318
- // .data([i])
319
- // .join(
320
- // enter => {
321
- // return enter
322
- // .append('g')
323
- // .classed(axesClassName, true)
324
- // .attr('clip-path', `url(#${clipPathID})`)
325
- // .each((d, i, g) => {
326
- // const defsSelection = d3.select(g[i])
327
- // .selectAll<SVGDefsElement, any>('defs')
328
- // .data([i])
329
- // .join('defs')
330
-
331
- // const graphicGSelection = d3.select(g[i])
332
- // .selectAll<SVGGElement, any>('g')
333
- // .data([i])
334
- // .join('g')
335
- // .classed(graphicClassName, true)
336
- // })
337
- // },
338
- // update => update,
339
- // exit => exit.remove()
340
- // )
341
- // })
342
- // },
343
- // update => update,
344
- // exit => exit.remove()
345
- // )
346
- // })
347
- // )
348
-
349
- // combineLatest({
350
- // seriesSelection: seriesSelection$,
351
- // gridContainerPosition: gridContainerPosition$
352
- // }).pipe(
353
- // takeUntil(destroy$),
354
- // switchMap(async d => d)
355
- // ).subscribe(data => {
356
- // data.seriesSelection
357
- // .transition()
358
- // .attr('transform', (d, i) => {
359
- // const translate = data.gridContainerPosition[i].translate
360
- // const scale = data.gridContainerPosition[i].scale
361
- // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
362
- // })
363
- // })
364
-
365
-
366
- // const axesSelection$ = combineLatest({
367
- // seriesSelection: seriesSelection$,
368
- // gridAxesTransform: gridAxesTransform$
369
- // }).pipe(
370
- // takeUntil(destroy$),
371
- // switchMap(async d => d),
372
- // map(data => {
373
- // return data.seriesSelection
374
- // .select<SVGGElement>(`g.${axesClassName}`)
375
- // .style('transform', data.gridAxesTransform.value)
376
- // })
377
- // )
378
- // const defsSelection$ = axesSelection$.pipe(
379
- // takeUntil(destroy$),
380
- // map(axesSelection => {
381
- // return axesSelection.select<SVGDefsElement>('defs')
382
- // })
383
- // )
384
- // const graphicGSelection$ = combineLatest({
385
- // axesSelection: axesSelection$,
386
- // gridGraphicTransform: gridGraphicTransform$
387
- // }).pipe(
388
- // takeUntil(destroy$),
389
- // switchMap(async d => d),
390
- // map(data => {
391
- // const graphicGSelection = data.axesSelection
392
- // .select<SVGGElement>(`g.${graphicClassName}`)
393
- // graphicGSelection
394
- // .transition()
395
- // .duration(50)
396
- // .style('transform', data.gridGraphicTransform.value)
397
- // return graphicGSelection
398
- // })
399
- // )
400
-
401
- const {
402
- seriesSelection$,
403
- axesSelection$,
404
- defsSelection$,
405
- graphicGSelection$
406
- } = gridSelectionsObservable({
407
- selection,
408
- pluginName,
409
- clipPathID,
410
- seriesLabels$,
411
- gridContainerPosition$,
412
- gridAxesTransform$,
413
- gridGraphicTransform$
414
- })
415
-
416
- const zeroYArr$ = visibleComputedAxesData$.pipe(
417
- takeUntil(destroy$),
418
- map(data => {
419
- return data.map(d => {
420
- return d[0] ? d[0].axisY - d[0].axisYFromZero : 0
421
- })
422
- }),
423
- distinctUntilChanged()
424
- )
425
-
426
- const barWidth$ = combineLatest({
427
- computedData: computedData$,
428
- visibleComputedData: visibleComputedData$,
429
- params: fullParams$,
430
- gridAxesSize: gridAxesSize$,
431
- isSeriesSeprate: isSeriesSeprate$
432
- }).pipe(
433
- takeUntil(destroy$),
434
- switchMap(async d => d),
435
- map(data => {
436
- if (data.params.barWidth) {
437
- return data.params.barWidth
438
- } else if (data.isSeriesSeprate) {
439
- return calcBarWidth({
440
- axisWidth: data.gridAxesSize.width,
441
- groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
442
- barAmountOfGroup: 1,
443
- barPadding: data.params.barPadding,
444
- barGroupPadding: data.params.barGroupPadding
445
- })
446
- } else {
447
- return calcBarWidth({
448
- axisWidth: data.gridAxesSize.width,
449
- groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
450
- barAmountOfGroup: data.visibleComputedData.length,
451
- barPadding: data.params.barPadding,
452
- barGroupPadding: data.params.barGroupPadding
453
- })
454
- }
455
- }),
456
- distinctUntilChanged()
457
- )
458
-
459
- // 圓角的值 [rx, ry]
460
- const transformedBarRadius$: Observable<[number, number][]> = combineLatest({
461
- computedData: computedData$,
462
- // gridGraphicTransform: gridGraphicTransform$,
463
- barWidth: barWidth$,
464
- params: fullParams$,
465
- // gridContainerPosition: gridContainerPosition$,
466
- // gridAxesTransform: gridAxesTransform$
467
- gridGraphicReverseScale: gridGraphicReverseScale$
468
- }).pipe(
469
- takeUntil(destroy$),
470
- switchMap(async data => data),
471
- map(data => {
472
- const barHalfWidth = data.barWidth! / 2
473
- const radius = data.params.barRadius === true ? barHalfWidth
474
- : data.params.barRadius === false ? 0
475
- : typeof data.params.barRadius == 'number' ? data.params.barRadius
476
- : 0
477
-
478
- return data.computedData.map((series, seriesIndex) => {
479
- const gridGraphicReverseScale = data.gridGraphicReverseScale[seriesIndex] ?? data.gridGraphicReverseScale[0]
480
-
481
- let transformedRx = radius * gridGraphicReverseScale[0]
482
- let transformedRy = radius * gridGraphicReverseScale[1]
483
- // if (radius == 0) {
484
- // transformedRx = 0
485
- // transformedRy = 0
486
- // } else if (data.gridAxesTransform.rotate == 0) {
487
- // transformedRx = radius
488
- // // 抵消外層scale的變型
489
- // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[0]
490
- // transformedRy = radius
491
- // // 抵消外層scale的變型
492
- // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[1]
493
- // } else if (data.gridAxesTransform.rotate != 0) {
494
- // transformedRx = radius
495
- // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
496
- // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[1]
497
- // transformedRy = radius
498
- // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
499
- // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[0]
500
- // }
501
-
502
- // 如果計算出來的x圓角值大於寬度一半則進行修正
503
- if (transformedRx > barHalfWidth) {
504
- const rScale = barHalfWidth / transformedRx
505
- transformedRx = transformedRx * rScale
506
- transformedRy = transformedRy * rScale
507
- }
508
-
509
- return [transformedRx, transformedRy]
510
- })
511
- })
512
- )
513
-
514
-
515
- // const seriesLabels$ = visibleComputedData$.pipe(
516
- // takeUntil(destroy$),
517
- // map(data => {
518
- // const SeriesLabelSet: Set<string> = new Set()
519
- // data.forEach(d => {
520
- // d.forEach(_d => {
521
- // SeriesLabelSet.add(_d.seriesLabel)
522
- // })
523
- // })
524
- // return Array.from(SeriesLabelSet)
525
- // })
526
- // )
527
-
528
- const groupLabels$ = visibleComputedData$.pipe(
529
- takeUntil(destroy$),
530
- map(data => {
531
- const GroupLabelSet: Set<string> = new Set()
532
- data.forEach(d => {
533
- d.forEach(_d => {
534
- GroupLabelSet.add(_d.groupLabel)
535
- })
536
- })
537
- return Array.from(GroupLabelSet)
538
- })
539
- )
540
-
541
- const barScale$ = combineLatest({
542
- seriesLabels: seriesLabels$,
543
- barWidth: barWidth$,
544
- params: fullParams$,
545
- }).pipe(
546
- takeUntil(destroy$),
547
- switchMap(async d => d),
548
- map(data => {
549
- return makeBarScale(data.barWidth, data.seriesLabels, data.params)
550
- })
551
- )
552
-
553
- const transitionDuration$ = fullChartParams$.pipe(
554
- takeUntil(destroy$),
555
- map(d => d.transitionDuration),
556
- distinctUntilChanged()
557
- )
558
-
559
- const delayGroup$ = new Observable<number>(subscriber => {
560
- combineLatest({
561
- groupLabels: groupLabels$,
562
- transitionDuration: transitionDuration$,
563
- }).pipe(
564
- switchMap(async d => d)
565
- ).subscribe(data => {
566
- const delay = calcDelayGroup(data.groupLabels.length, data.transitionDuration)
567
- subscriber.next(delay)
568
- })
569
- }).pipe(
570
- takeUntil(destroy$),
571
- distinctUntilChanged()
572
- )
573
-
574
- const transitionItem$ = new Observable<number>(subscriber => {
575
- combineLatest({
576
- groupLabels: groupLabels$,
577
- transitionDuration: transitionDuration$
578
- }).pipe(
579
- switchMap(async d => d)
580
- ).subscribe(data => {
581
- const transition = calctransitionItem(data.groupLabels.length, data.transitionDuration)
582
- subscriber.next(transition)
583
- })
584
- }).pipe(
585
- takeUntil(destroy$),
586
- distinctUntilChanged()
587
- )
588
-
589
- combineLatest({
590
- defsSelection: defsSelection$,
591
- gridAxesSize: gridAxesSize$,
592
- }).pipe(
593
- takeUntil(destroy$),
594
- switchMap(async d => d)
595
- ).subscribe(data => {
596
- const clipPathData = [{
597
- id: clipPathID,
598
- width: data.gridAxesSize.width,
599
- height: data.gridAxesSize.height
600
- }]
601
- renderClipPath({
602
- defsSelection: data.defsSelection,
603
- clipPathData
604
- })
605
- })
606
-
607
-
608
- const highlightTarget$ = fullChartParams$.pipe(
609
- takeUntil(destroy$),
610
- map(d => d.highlightTarget),
611
- distinctUntilChanged()
612
- )
613
-
614
- const barSelection$ = combineLatest({
615
- graphicGSelection: graphicGSelection$,
616
- visibleComputedAxesData: visibleComputedAxesData$,
617
- // barData$: barData$,
618
- zeroYArr: zeroYArr$,
619
- groupLabels: groupLabels$,
620
- barScale: barScale$,
621
- params: fullParams$,
622
- chartParams: fullChartParams$,
623
- highlightTarget: highlightTarget$,
624
- barWidth: barWidth$,
625
- transformedBarRadius: transformedBarRadius$,
626
- delayGroup: delayGroup$,
627
- transitionItem: transitionItem$,
628
- isSeriesSeprate: isSeriesSeprate$
629
- }).pipe(
630
- takeUntil(destroy$),
631
- switchMap(async (d) => d),
632
- map(data => {
633
- return renderRectBars({
634
- graphicGSelection: data.graphicGSelection,
635
- rectClassName,
636
- visibleComputedAxesData: data.visibleComputedAxesData,
637
- zeroYArr: data.zeroYArr,
638
- groupLabels: data.groupLabels,
639
- barScale: data.barScale,
640
- params: data.params,
641
- chartParams: data.chartParams,
642
- barWidth: data.barWidth,
643
- transformedBarRadius: data.transformedBarRadius,
644
- delayGroup: data.delayGroup,
645
- transitionItem: data.transitionItem,
646
- isSeriesSeprate: data.isSeriesSeprate
647
- })
648
- })
649
- )
650
-
651
- combineLatest({
652
- barSelection: barSelection$,
653
- computedData: computedData$,
654
- highlightTarget: highlightTarget$,
655
- SeriesDataMap: SeriesDataMap$,
656
- GroupDataMap: GroupDataMap$,
657
- }).pipe(
658
- takeUntil(destroy$),
659
- switchMap(async (d) => d),
660
- ).subscribe(data => {
661
- data.barSelection
662
- .on('mouseover', (event, datum) => {
663
- event.stopPropagation()
664
-
665
- event$.next({
666
- type: 'grid',
667
- eventName: 'mouseover',
668
- pluginName,
669
- highlightTarget: data.highlightTarget,
670
- datum,
671
- gridIndex: datum.gridIndex,
672
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
673
- seriesIndex: datum.seriesIndex,
674
- seriesLabel: datum.seriesLabel,
675
- group: data.GroupDataMap.get(datum.groupLabel)!,
676
- groupIndex: datum.groupIndex,
677
- groupLabel: datum.groupLabel,
678
- event,
679
- data: data.computedData
680
- })
681
- })
682
- .on('mousemove', (event, datum) => {
683
- event.stopPropagation()
684
-
685
- event$.next({
686
- type: 'grid',
687
- eventName: 'mousemove',
688
- pluginName,
689
- highlightTarget: data.highlightTarget,
690
- datum,
691
- gridIndex: datum.gridIndex,
692
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
693
- seriesIndex: datum.seriesIndex,
694
- seriesLabel: datum.seriesLabel,
695
- group: data.GroupDataMap.get(datum.groupLabel)!,
696
- groupIndex: datum.groupIndex,
697
- groupLabel: datum.groupLabel,
698
- event,
699
- data: data.computedData
700
- })
701
- })
702
- .on('mouseout', (event, datum) => {
703
- event.stopPropagation()
704
-
705
- event$.next({
706
- type: 'grid',
707
- eventName: 'mouseout',
708
- pluginName,
709
- highlightTarget: data.highlightTarget,
710
- datum,
711
- gridIndex: datum.gridIndex,
712
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
713
- seriesIndex: datum.seriesIndex,
714
- seriesLabel: datum.seriesLabel,
715
- group: data.GroupDataMap.get(datum.groupLabel)!,
716
- groupIndex: datum.groupIndex,
717
- groupLabel: datum.groupLabel,
718
- event,
719
- data: data.computedData
720
- })
721
- })
722
- .on('click', (event, datum) => {
723
- event.stopPropagation()
724
-
725
- event$.next({
726
- type: 'grid',
727
- eventName: 'click',
728
- pluginName,
729
- highlightTarget: data.highlightTarget,
730
- datum,
731
- gridIndex: datum.gridIndex,
732
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
733
- seriesIndex: datum.seriesIndex,
734
- seriesLabel: datum.seriesLabel,
735
- group: data.GroupDataMap.get(datum.groupLabel)!,
736
- groupIndex: datum.groupIndex,
737
- groupLabel: datum.groupLabel,
738
- event,
739
- data: data.computedData
740
- })
741
- })
742
- })
743
-
744
-
745
- combineLatest({
746
- barSelection: barSelection$,
747
- highlight: gridHighlight$.pipe(
748
- map(data => data.map(d => d.id))
749
- ),
750
- fullChartParams: fullChartParams$
751
- }).pipe(
752
- takeUntil(destroy$),
753
- switchMap(async d => d)
754
- ).subscribe(data => {
755
- highlight({
756
- selection: data.barSelection,
757
- ids: data.highlight,
758
- fullChartParams: data.fullChartParams
759
- })
760
- })
761
-
762
-
763
- return () => {
764
- destroy$.next(undefined)
765
- }
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ map,
5
+ switchMap,
6
+ takeUntil,
7
+ distinctUntilChanged,
8
+ shareReplay,
9
+ Observable,
10
+ Subject } from 'rxjs'
11
+ import type { BasePluginFn } from './types'
12
+ import type {
13
+ ComputedDatumGrid,
14
+ ComputedDataGrid,
15
+ ComputedAxesDataGrid,
16
+ DataFormatterTypeMap,
17
+ ContainerPositionScaled,
18
+ EventGrid,
19
+ ChartParams,
20
+ Layout,
21
+ TransformData } from '../../lib/core-types'
22
+ import type { BaseBarsParams } from '../../lib/plugins-basic-types'
23
+ import { getD3TransitionEase } from '../utils/d3Utils'
24
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
25
+ import { gridSelectionsObservable } from '../grid/gridObservables'
26
+
27
+ // export interface BaseBarsParams {
28
+ // // barType: BarType
29
+ // barWidth: number
30
+ // barPadding: number
31
+ // barGroupPadding: number // 群組和群組間的間隔
32
+ // barRadius: number | boolean
33
+ // }
34
+
35
+ interface BaseBarsContext {
36
+ selection: d3.Selection<any, unknown, any, unknown>
37
+ computedData$: Observable<ComputedDataGrid>
38
+ computedAxesData$: Observable<ComputedAxesDataGrid>
39
+ visibleComputedData$: Observable<ComputedDatumGrid[][]>
40
+ visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
41
+ seriesLabels$: Observable<string[]>
42
+ SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
43
+ GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
44
+ fullParams$: Observable<BaseBarsParams>
45
+ fullChartParams$: Observable<ChartParams>
46
+ gridAxesTransform$: Observable<TransformData>
47
+ gridGraphicTransform$: Observable<TransformData>
48
+ gridGraphicReverseScale$: Observable<[number, number][]>
49
+ gridAxesSize$: Observable<{
50
+ width: number;
51
+ height: number;
52
+ }>
53
+ gridHighlight$: Observable<ComputedDatumGrid[]>
54
+ gridContainerPosition$: Observable<ContainerPositionScaled[]>
55
+ isSeriesSeprate$: Observable<boolean>
56
+ event$: Subject<EventGrid>
57
+ }
58
+
59
+ interface RenderBarParams {
60
+ graphicGSelection: d3.Selection<SVGGElement, string, any, any>
61
+ rectClassName: string
62
+ visibleComputedAxesData: ComputedAxesDataGrid
63
+ zeroYArr: number[]
64
+ groupLabels: string[]
65
+ barScale: d3.ScalePoint<string>
66
+ params: BaseBarsParams
67
+ chartParams: ChartParams
68
+ barWidth: number
69
+ transformedBarRadius: [number, number][]
70
+ delayGroup: number
71
+ transitionItem: number
72
+ isSeriesSeprate: boolean
73
+ }
74
+
75
+ type ClipPathDatum = {
76
+ id: string;
77
+ // x: number;
78
+ // y: number;
79
+ width: number;
80
+ height: number;
81
+ }
82
+
83
+ // const pluginName = 'Bars'
84
+ // const rectClassName = getClassName(pluginName, 'rect')
85
+ // group的delay在動畫中的佔比(剩餘部份的時間為圖形本身的動畫時間,因為delay時間和最後一個group的動畫時間加總為1)
86
+ const groupDelayProportionOfDuration = 0.3
87
+
88
+ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding = 0, barGroupPadding = 0 }: {
89
+ axisWidth: number
90
+ groupAmount: number
91
+ barAmountOfGroup: number
92
+ barPadding: number
93
+ barGroupPadding: number
94
+ }) {
95
+ const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
96
+ ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
97
+ : axisWidth
98
+ const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
99
+ return width > 1 ? width : 1
100
+ }
101
+
102
+ function makeBarScale (barWidth: number, seriesLabels: string[], params: BaseBarsParams) {
103
+ const barHalfWidth = barWidth! / 2
104
+ const barGroupWidth = barWidth * seriesLabels.length + params.barPadding! * seriesLabels.length
105
+ return d3.scalePoint()
106
+ .domain(seriesLabels)
107
+ .range([-barGroupWidth / 2 + barHalfWidth, barGroupWidth / 2 - barHalfWidth])
108
+ }
109
+
110
+ function calcDelayGroup (barGroupAmount: number, totalDuration: number) {
111
+ if (barGroupAmount <= 1) {
112
+ // 一筆內計算會出錯所以不算
113
+ return 0
114
+ }
115
+ return totalDuration / (barGroupAmount - 1) * groupDelayProportionOfDuration // 依group數量計算
116
+ }
117
+
118
+ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
119
+ if (barGroupAmount <= 1) {
120
+ // 一筆內不會有delay
121
+ return totalDuration
122
+ }
123
+ return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
124
+ }
125
+ // let _data: ComputedDatumGrid[][] = []
126
+
127
+ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedAxesData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
128
+
129
+ const barHalfWidth = barWidth! / 2
130
+
131
+ graphicGSelection
132
+ .each((seriesData, seriesIndex, g) => {
133
+ d3.select(g[seriesIndex])
134
+ .selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
135
+ .data(visibleComputedAxesData[seriesIndex] ?? [], d => d.id)
136
+ .join(
137
+ enter => {
138
+ // console.log('enter')
139
+ return enter
140
+ .append('rect')
141
+ .classed(rectClassName, true)
142
+ .attr('cursor', 'pointer')
143
+ .attr('height', d => 1)
144
+ },
145
+ update => update,
146
+ exit => exit.remove()
147
+ )
148
+ .attr('transform', (d, i) => `translate(${(d ? d.axisX : 0) - barHalfWidth}, ${0})`)
149
+ .attr('fill', d => d.color)
150
+ .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
151
+ .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
152
+ .attr('width', barWidth!)
153
+ .attr('rx', transformedBarRadius[seriesIndex][0] ?? 1)
154
+ .attr('ry', transformedBarRadius[seriesIndex][1] ?? 1)
155
+ .transition()
156
+ .duration(transitionItem)
157
+ .ease(getD3TransitionEase(chartParams.transitionEase))
158
+ .delay((d, i) => d.groupIndex * delayGroup)
159
+ .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
160
+ })
161
+
162
+
163
+ // graphicGSelection
164
+ // .each((d, seriesIndex, g) => {
165
+ // d3.select(g[seriesIndex])
166
+ // .selectAll<SVGGElement, ComputedDatumGrid>(`g.${barClassName}`)
167
+ // .data(computedData[seriesIndex], d => d.seriesIndex)
168
+ // .join('g')
169
+ // .classed(barClassName, true)
170
+ // .attr('transform', (d, i) => `translate(${d ? d.axisX : 0}, ${0})`)
171
+ // .each((datum, i, g) => {
172
+ // d3.select(g[i])
173
+ // .selectAll<SVGRectElement, ComputedDatumGrid>(`rect.${rectClassName}`)
174
+ // .data([computedData[seriesIndex][i]], d => d.id)
175
+ // .join(
176
+ // enter => {
177
+ // return enter
178
+ // .append('rect')
179
+ // .classed(rectClassName, true)
180
+ // .attr('height', d => 0)
181
+ // },
182
+ // update => update,
183
+ // exit => exit.remove()
184
+ // )
185
+ // .attr('cursor', 'pointer')
186
+ // .attr('fill', d => d.color)
187
+ // .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
188
+ // .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
189
+ // .attr('width', barWidth!)
190
+ // .attr('transform', `translate(${-barHalfWidth}, 0)`)
191
+ // // .attr('rx', params.barRadius == true ? barHalfWidth
192
+ // // : params.barRadius == false ? 0
193
+ // // : typeof params.barRadius == 'number' ? params.barRadius
194
+ // // : 0)
195
+ // .attr('rx', transformedBarRadius[0])
196
+ // .attr('ry', transformedBarRadius[1])
197
+ // .transition()
198
+ // .duration(transitionItem)
199
+ // .ease(getD3TransitionEase(chartParams.transitionEase))
200
+ // .delay((d, i) => d.groupIndex * delayGroup)
201
+ // .attr('height', d => Math.abs(d.axisYFromZero))
202
+ // })
203
+ // })
204
+
205
+ const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown> = graphicGSelection.selectAll(`rect.${rectClassName}`)
206
+
207
+ return graphicBarSelection
208
+ }
209
+
210
+ function renderClipPath ({ defsSelection, clipPathData }: {
211
+ defsSelection: d3.Selection<SVGDefsElement, any, any, any>
212
+ clipPathData: ClipPathDatum[]
213
+ }) {
214
+ const clipPath = defsSelection
215
+ .selectAll<SVGClipPathElement, Layout>('clipPath')
216
+ .data(clipPathData)
217
+ .join(
218
+ enter => {
219
+ return enter
220
+ .append('clipPath')
221
+ },
222
+ update => update,
223
+ exit => exit.remove()
224
+ )
225
+ .attr('id', d => d.id)
226
+ .each((d, i, g) => {
227
+ const rect = d3.select(g[i])
228
+ .selectAll<SVGRectElement, typeof d>('rect')
229
+ .data([d])
230
+ .join(
231
+ enter => {
232
+ return enter
233
+ .append('rect')
234
+ },
235
+ update => update,
236
+ exit => exit.remove()
237
+ )
238
+ .attr('x', 0)
239
+ .attr('y', 0)
240
+ .attr('width', _d => _d.width)
241
+ .attr('height', _d => _d.height)
242
+ })
243
+ }
244
+
245
+ function highlight ({ selection, ids, fullChartParams }: {
246
+ selection: d3.Selection<any, ComputedDatumGrid, any, any>
247
+ ids: string[]
248
+ fullChartParams: ChartParams
249
+ }) {
250
+ selection.interrupt('highlight')
251
+
252
+ if (!ids.length) {
253
+ // remove highlight
254
+ selection
255
+ .transition('highlight')
256
+ .duration(200)
257
+ .style('opacity', 1)
258
+ return
259
+ }
260
+
261
+ selection
262
+ .each((d, i, n) => {
263
+ if (ids.includes(d.id)) {
264
+ d3.select(n[i])
265
+ .style('opacity', 1)
266
+ } else {
267
+ d3.select(n[i])
268
+ .style('opacity', fullChartParams.styles.unhighlightedOpacity)
269
+ }
270
+ })
271
+ }
272
+
273
+
274
+ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string, {
275
+ selection,
276
+ computedData$,
277
+ computedAxesData$,
278
+ visibleComputedData$,
279
+ visibleComputedAxesData$,
280
+ seriesLabels$,
281
+ SeriesDataMap$,
282
+ GroupDataMap$,
283
+ fullParams$,
284
+ fullChartParams$,
285
+ gridAxesTransform$,
286
+ gridGraphicTransform$,
287
+ gridGraphicReverseScale$,
288
+ gridAxesSize$,
289
+ gridHighlight$,
290
+ gridContainerPosition$,
291
+ isSeriesSeprate$,
292
+ event$
293
+ }) => {
294
+
295
+ const destroy$ = new Subject()
296
+
297
+ const clipPathID = getUniID(pluginName, 'clipPath-box')
298
+ const rectClassName = getClassName(pluginName, 'rect')
299
+
300
+ // const seriesSelection$ = computedData$.pipe(
301
+ // takeUntil(destroy$),
302
+ // distinctUntilChanged((a, b) => {
303
+ // // 只有當series的數量改變時,才重新計算
304
+ // return a.length === b.length
305
+ // }),
306
+ // map((computedData, i) => {
307
+ // return selection
308
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
309
+ // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
310
+ // .join(
311
+ // enter => {
312
+ // return enter
313
+ // .append('g')
314
+ // .classed(seriesClassName, true)
315
+ // .each((d, i, g) => {
316
+ // const axesSelection = d3.select(g[i])
317
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
318
+ // .data([i])
319
+ // .join(
320
+ // enter => {
321
+ // return enter
322
+ // .append('g')
323
+ // .classed(axesClassName, true)
324
+ // .attr('clip-path', `url(#${clipPathID})`)
325
+ // .each((d, i, g) => {
326
+ // const defsSelection = d3.select(g[i])
327
+ // .selectAll<SVGDefsElement, any>('defs')
328
+ // .data([i])
329
+ // .join('defs')
330
+
331
+ // const graphicGSelection = d3.select(g[i])
332
+ // .selectAll<SVGGElement, any>('g')
333
+ // .data([i])
334
+ // .join('g')
335
+ // .classed(graphicClassName, true)
336
+ // })
337
+ // },
338
+ // update => update,
339
+ // exit => exit.remove()
340
+ // )
341
+ // })
342
+ // },
343
+ // update => update,
344
+ // exit => exit.remove()
345
+ // )
346
+ // })
347
+ // )
348
+
349
+ // combineLatest({
350
+ // seriesSelection: seriesSelection$,
351
+ // gridContainerPosition: gridContainerPosition$
352
+ // }).pipe(
353
+ // takeUntil(destroy$),
354
+ // switchMap(async d => d)
355
+ // ).subscribe(data => {
356
+ // data.seriesSelection
357
+ // .transition()
358
+ // .attr('transform', (d, i) => {
359
+ // const translate = data.gridContainerPosition[i].translate
360
+ // const scale = data.gridContainerPosition[i].scale
361
+ // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
362
+ // })
363
+ // })
364
+
365
+
366
+ // const axesSelection$ = combineLatest({
367
+ // seriesSelection: seriesSelection$,
368
+ // gridAxesTransform: gridAxesTransform$
369
+ // }).pipe(
370
+ // takeUntil(destroy$),
371
+ // switchMap(async d => d),
372
+ // map(data => {
373
+ // return data.seriesSelection
374
+ // .select<SVGGElement>(`g.${axesClassName}`)
375
+ // .style('transform', data.gridAxesTransform.value)
376
+ // })
377
+ // )
378
+ // const defsSelection$ = axesSelection$.pipe(
379
+ // takeUntil(destroy$),
380
+ // map(axesSelection => {
381
+ // return axesSelection.select<SVGDefsElement>('defs')
382
+ // })
383
+ // )
384
+ // const graphicGSelection$ = combineLatest({
385
+ // axesSelection: axesSelection$,
386
+ // gridGraphicTransform: gridGraphicTransform$
387
+ // }).pipe(
388
+ // takeUntil(destroy$),
389
+ // switchMap(async d => d),
390
+ // map(data => {
391
+ // const graphicGSelection = data.axesSelection
392
+ // .select<SVGGElement>(`g.${graphicClassName}`)
393
+ // graphicGSelection
394
+ // .transition()
395
+ // .duration(50)
396
+ // .style('transform', data.gridGraphicTransform.value)
397
+ // return graphicGSelection
398
+ // })
399
+ // )
400
+
401
+ const {
402
+ seriesSelection$,
403
+ axesSelection$,
404
+ defsSelection$,
405
+ graphicGSelection$
406
+ } = gridSelectionsObservable({
407
+ selection,
408
+ pluginName,
409
+ clipPathID,
410
+ seriesLabels$,
411
+ gridContainerPosition$,
412
+ gridAxesTransform$,
413
+ gridGraphicTransform$
414
+ })
415
+
416
+ const zeroYArr$ = visibleComputedAxesData$.pipe(
417
+ takeUntil(destroy$),
418
+ map(data => {
419
+ return data.map(d => {
420
+ return d[0] ? d[0].axisY - d[0].axisYFromZero : 0
421
+ })
422
+ }),
423
+ distinctUntilChanged()
424
+ )
425
+
426
+ const barWidth$ = combineLatest({
427
+ computedData: computedData$,
428
+ visibleComputedData: visibleComputedData$,
429
+ params: fullParams$,
430
+ gridAxesSize: gridAxesSize$,
431
+ isSeriesSeprate: isSeriesSeprate$
432
+ }).pipe(
433
+ takeUntil(destroy$),
434
+ switchMap(async d => d),
435
+ map(data => {
436
+ if (data.params.barWidth) {
437
+ return data.params.barWidth
438
+ } else if (data.isSeriesSeprate) {
439
+ return calcBarWidth({
440
+ axisWidth: data.gridAxesSize.width,
441
+ groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
442
+ barAmountOfGroup: 1,
443
+ barPadding: data.params.barPadding,
444
+ barGroupPadding: data.params.barGroupPadding
445
+ })
446
+ } else {
447
+ return calcBarWidth({
448
+ axisWidth: data.gridAxesSize.width,
449
+ groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
450
+ barAmountOfGroup: data.visibleComputedData.length,
451
+ barPadding: data.params.barPadding,
452
+ barGroupPadding: data.params.barGroupPadding
453
+ })
454
+ }
455
+ }),
456
+ distinctUntilChanged()
457
+ )
458
+
459
+ // 圓角的值 [rx, ry]
460
+ const transformedBarRadius$: Observable<[number, number][]> = combineLatest({
461
+ computedData: computedData$,
462
+ // gridGraphicTransform: gridGraphicTransform$,
463
+ barWidth: barWidth$,
464
+ params: fullParams$,
465
+ // gridContainerPosition: gridContainerPosition$,
466
+ // gridAxesTransform: gridAxesTransform$
467
+ gridGraphicReverseScale: gridGraphicReverseScale$
468
+ }).pipe(
469
+ takeUntil(destroy$),
470
+ switchMap(async data => data),
471
+ map(data => {
472
+ const barHalfWidth = data.barWidth! / 2
473
+ const radius = data.params.barRadius === true ? barHalfWidth
474
+ : data.params.barRadius === false ? 0
475
+ : typeof data.params.barRadius == 'number' ? data.params.barRadius
476
+ : 0
477
+
478
+ return data.computedData.map((series, seriesIndex) => {
479
+ const gridGraphicReverseScale = data.gridGraphicReverseScale[seriesIndex] ?? data.gridGraphicReverseScale[0]
480
+
481
+ let transformedRx = radius * gridGraphicReverseScale[0]
482
+ let transformedRy = radius * gridGraphicReverseScale[1]
483
+ // if (radius == 0) {
484
+ // transformedRx = 0
485
+ // transformedRy = 0
486
+ // } else if (data.gridAxesTransform.rotate == 0) {
487
+ // transformedRx = radius
488
+ // // 抵消外層scale的變型
489
+ // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[0]
490
+ // transformedRy = radius
491
+ // // 抵消外層scale的變型
492
+ // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[1]
493
+ // } else if (data.gridAxesTransform.rotate != 0) {
494
+ // transformedRx = radius
495
+ // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
496
+ // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[1]
497
+ // transformedRy = radius
498
+ // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
499
+ // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[0]
500
+ // }
501
+
502
+ // 如果計算出來的x圓角值大於寬度一半則進行修正
503
+ if (transformedRx > barHalfWidth) {
504
+ const rScale = barHalfWidth / transformedRx
505
+ transformedRx = transformedRx * rScale
506
+ transformedRy = transformedRy * rScale
507
+ }
508
+
509
+ return [transformedRx, transformedRy]
510
+ })
511
+ })
512
+ )
513
+
514
+
515
+ // const seriesLabels$ = visibleComputedData$.pipe(
516
+ // takeUntil(destroy$),
517
+ // map(data => {
518
+ // const SeriesLabelSet: Set<string> = new Set()
519
+ // data.forEach(d => {
520
+ // d.forEach(_d => {
521
+ // SeriesLabelSet.add(_d.seriesLabel)
522
+ // })
523
+ // })
524
+ // return Array.from(SeriesLabelSet)
525
+ // })
526
+ // )
527
+
528
+ const groupLabels$ = visibleComputedData$.pipe(
529
+ takeUntil(destroy$),
530
+ map(data => {
531
+ const GroupLabelSet: Set<string> = new Set()
532
+ data.forEach(d => {
533
+ d.forEach(_d => {
534
+ GroupLabelSet.add(_d.groupLabel)
535
+ })
536
+ })
537
+ return Array.from(GroupLabelSet)
538
+ })
539
+ )
540
+
541
+ const barScale$ = combineLatest({
542
+ seriesLabels: seriesLabels$,
543
+ barWidth: barWidth$,
544
+ params: fullParams$,
545
+ }).pipe(
546
+ takeUntil(destroy$),
547
+ switchMap(async d => d),
548
+ map(data => {
549
+ return makeBarScale(data.barWidth, data.seriesLabels, data.params)
550
+ })
551
+ )
552
+
553
+ const transitionDuration$ = fullChartParams$.pipe(
554
+ takeUntil(destroy$),
555
+ map(d => d.transitionDuration),
556
+ distinctUntilChanged()
557
+ )
558
+
559
+ const delayGroup$ = new Observable<number>(subscriber => {
560
+ combineLatest({
561
+ groupLabels: groupLabels$,
562
+ transitionDuration: transitionDuration$,
563
+ }).pipe(
564
+ switchMap(async d => d)
565
+ ).subscribe(data => {
566
+ const delay = calcDelayGroup(data.groupLabels.length, data.transitionDuration)
567
+ subscriber.next(delay)
568
+ })
569
+ }).pipe(
570
+ takeUntil(destroy$),
571
+ distinctUntilChanged()
572
+ )
573
+
574
+ const transitionItem$ = new Observable<number>(subscriber => {
575
+ combineLatest({
576
+ groupLabels: groupLabels$,
577
+ transitionDuration: transitionDuration$
578
+ }).pipe(
579
+ switchMap(async d => d)
580
+ ).subscribe(data => {
581
+ const transition = calctransitionItem(data.groupLabels.length, data.transitionDuration)
582
+ subscriber.next(transition)
583
+ })
584
+ }).pipe(
585
+ takeUntil(destroy$),
586
+ distinctUntilChanged()
587
+ )
588
+
589
+ combineLatest({
590
+ defsSelection: defsSelection$,
591
+ gridAxesSize: gridAxesSize$,
592
+ }).pipe(
593
+ takeUntil(destroy$),
594
+ switchMap(async d => d)
595
+ ).subscribe(data => {
596
+ const clipPathData = [{
597
+ id: clipPathID,
598
+ width: data.gridAxesSize.width,
599
+ height: data.gridAxesSize.height
600
+ }]
601
+ renderClipPath({
602
+ defsSelection: data.defsSelection,
603
+ clipPathData
604
+ })
605
+ })
606
+
607
+
608
+ const highlightTarget$ = fullChartParams$.pipe(
609
+ takeUntil(destroy$),
610
+ map(d => d.highlightTarget),
611
+ distinctUntilChanged()
612
+ )
613
+
614
+ const barSelection$ = combineLatest({
615
+ graphicGSelection: graphicGSelection$,
616
+ visibleComputedAxesData: visibleComputedAxesData$,
617
+ // barData$: barData$,
618
+ zeroYArr: zeroYArr$,
619
+ groupLabels: groupLabels$,
620
+ barScale: barScale$,
621
+ params: fullParams$,
622
+ chartParams: fullChartParams$,
623
+ highlightTarget: highlightTarget$,
624
+ barWidth: barWidth$,
625
+ transformedBarRadius: transformedBarRadius$,
626
+ delayGroup: delayGroup$,
627
+ transitionItem: transitionItem$,
628
+ isSeriesSeprate: isSeriesSeprate$
629
+ }).pipe(
630
+ takeUntil(destroy$),
631
+ switchMap(async (d) => d),
632
+ map(data => {
633
+ return renderRectBars({
634
+ graphicGSelection: data.graphicGSelection,
635
+ rectClassName,
636
+ visibleComputedAxesData: data.visibleComputedAxesData,
637
+ zeroYArr: data.zeroYArr,
638
+ groupLabels: data.groupLabels,
639
+ barScale: data.barScale,
640
+ params: data.params,
641
+ chartParams: data.chartParams,
642
+ barWidth: data.barWidth,
643
+ transformedBarRadius: data.transformedBarRadius,
644
+ delayGroup: data.delayGroup,
645
+ transitionItem: data.transitionItem,
646
+ isSeriesSeprate: data.isSeriesSeprate
647
+ })
648
+ })
649
+ )
650
+
651
+ combineLatest({
652
+ barSelection: barSelection$,
653
+ computedData: computedData$,
654
+ highlightTarget: highlightTarget$,
655
+ SeriesDataMap: SeriesDataMap$,
656
+ GroupDataMap: GroupDataMap$,
657
+ }).pipe(
658
+ takeUntil(destroy$),
659
+ switchMap(async (d) => d),
660
+ ).subscribe(data => {
661
+ data.barSelection
662
+ .on('mouseover', (event, datum) => {
663
+ event.stopPropagation()
664
+
665
+ event$.next({
666
+ type: 'grid',
667
+ eventName: 'mouseover',
668
+ pluginName,
669
+ highlightTarget: data.highlightTarget,
670
+ datum,
671
+ gridIndex: datum.gridIndex,
672
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
673
+ seriesIndex: datum.seriesIndex,
674
+ seriesLabel: datum.seriesLabel,
675
+ group: data.GroupDataMap.get(datum.groupLabel)!,
676
+ groupIndex: datum.groupIndex,
677
+ groupLabel: datum.groupLabel,
678
+ event,
679
+ data: data.computedData
680
+ })
681
+ })
682
+ .on('mousemove', (event, datum) => {
683
+ event.stopPropagation()
684
+
685
+ event$.next({
686
+ type: 'grid',
687
+ eventName: 'mousemove',
688
+ pluginName,
689
+ highlightTarget: data.highlightTarget,
690
+ datum,
691
+ gridIndex: datum.gridIndex,
692
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
693
+ seriesIndex: datum.seriesIndex,
694
+ seriesLabel: datum.seriesLabel,
695
+ group: data.GroupDataMap.get(datum.groupLabel)!,
696
+ groupIndex: datum.groupIndex,
697
+ groupLabel: datum.groupLabel,
698
+ event,
699
+ data: data.computedData
700
+ })
701
+ })
702
+ .on('mouseout', (event, datum) => {
703
+ event.stopPropagation()
704
+
705
+ event$.next({
706
+ type: 'grid',
707
+ eventName: 'mouseout',
708
+ pluginName,
709
+ highlightTarget: data.highlightTarget,
710
+ datum,
711
+ gridIndex: datum.gridIndex,
712
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
713
+ seriesIndex: datum.seriesIndex,
714
+ seriesLabel: datum.seriesLabel,
715
+ group: data.GroupDataMap.get(datum.groupLabel)!,
716
+ groupIndex: datum.groupIndex,
717
+ groupLabel: datum.groupLabel,
718
+ event,
719
+ data: data.computedData
720
+ })
721
+ })
722
+ .on('click', (event, datum) => {
723
+ event.stopPropagation()
724
+
725
+ event$.next({
726
+ type: 'grid',
727
+ eventName: 'click',
728
+ pluginName,
729
+ highlightTarget: data.highlightTarget,
730
+ datum,
731
+ gridIndex: datum.gridIndex,
732
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
733
+ seriesIndex: datum.seriesIndex,
734
+ seriesLabel: datum.seriesLabel,
735
+ group: data.GroupDataMap.get(datum.groupLabel)!,
736
+ groupIndex: datum.groupIndex,
737
+ groupLabel: datum.groupLabel,
738
+ event,
739
+ data: data.computedData
740
+ })
741
+ })
742
+ })
743
+
744
+
745
+ combineLatest({
746
+ barSelection: barSelection$,
747
+ highlight: gridHighlight$.pipe(
748
+ map(data => data.map(d => d.id))
749
+ ),
750
+ fullChartParams: fullChartParams$
751
+ }).pipe(
752
+ takeUntil(destroy$),
753
+ switchMap(async d => d)
754
+ ).subscribe(data => {
755
+ highlight({
756
+ selection: data.barSelection,
757
+ ids: data.highlight,
758
+ fullChartParams: data.fullChartParams
759
+ })
760
+ })
761
+
762
+
763
+ return () => {
764
+ destroy$.next(undefined)
765
+ }
766
766
  }