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

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