@orbcharts/plugins-basic 3.0.1 → 3.0.3

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 (133) hide show
  1. package/LICENSE +200 -200
  2. package/dist/lib/gridObservables.d.ts +1 -0
  3. package/dist/orbcharts-plugins-basic.es.js +14800 -13543
  4. package/dist/orbcharts-plugins-basic.umd.js +129 -99
  5. package/dist/src/base/BaseOrdinalBubbles.d.ts +26 -0
  6. package/dist/src/base/BaseRacingBars.d.ts +2 -1
  7. package/dist/src/base/BaseRacingLabels.d.ts +1 -0
  8. package/dist/src/base/BaseXZoom.d.ts +18 -0
  9. package/dist/src/grid/gridObservables.d.ts +4 -7
  10. package/dist/src/multiValue/defaults.d.ts +5 -1
  11. package/dist/src/multiValue/index.d.ts +4 -0
  12. package/dist/src/multiValue/multiValueObservables.d.ts +14 -1
  13. package/dist/src/multiValue/plugins/OrdinalAux.d.ts +3 -0
  14. package/dist/src/multiValue/plugins/OrdinalAxis.d.ts +3 -0
  15. package/dist/src/multiValue/plugins/OrdinalBubbles.d.ts +3 -0
  16. package/dist/src/multiValue/plugins/OrdinalZoom.d.ts +1 -0
  17. package/lib/core-types.ts +7 -7
  18. package/lib/core.ts +6 -6
  19. package/lib/gridObservables.ts +6 -0
  20. package/lib/plugins-basic-types.ts +6 -6
  21. package/package.json +48 -44
  22. package/src/base/BaseBars.ts +765 -765
  23. package/src/base/BaseBarsTriangle.ts +676 -676
  24. package/src/base/BaseDots.ts +464 -464
  25. package/src/base/BaseGroupAxis.ts +691 -691
  26. package/src/base/BaseLegend.ts +684 -684
  27. package/src/base/BaseLineAreas.ts +629 -629
  28. package/src/base/BaseLines.ts +706 -706
  29. package/src/base/BaseOrdinalBubbles.ts +728 -0
  30. package/src/base/BaseRacingBars.ts +582 -551
  31. package/src/base/BaseRacingLabels.ts +404 -396
  32. package/src/base/BaseRacingValueLabels.ts +403 -403
  33. package/src/base/BaseStackedBars.ts +782 -782
  34. package/src/base/BaseTooltip.ts +386 -386
  35. package/src/base/BaseValueAxis.ts +600 -600
  36. package/src/base/BaseXAxis.ts +427 -427
  37. package/src/base/BaseXZoom.ts +242 -0
  38. package/src/base/BaseYAxis.ts +389 -389
  39. package/src/base/types.ts +2 -2
  40. package/src/const.ts +30 -30
  41. package/src/grid/defaults.ts +213 -213
  42. package/src/grid/gridObservables.ts +635 -612
  43. package/src/grid/index.ts +16 -16
  44. package/src/grid/plugins/Bars.ts +69 -69
  45. package/src/grid/plugins/BarsPN.ts +66 -66
  46. package/src/grid/plugins/BarsTriangle.ts +73 -73
  47. package/src/grid/plugins/Dots.ts +68 -68
  48. package/src/grid/plugins/GridLegend.ts +107 -107
  49. package/src/grid/plugins/GridTooltip.ts +66 -66
  50. package/src/grid/plugins/GroupAux.ts +1095 -1120
  51. package/src/grid/plugins/GroupAxis.ts +73 -73
  52. package/src/grid/plugins/GroupZoom.ts +218 -218
  53. package/src/grid/plugins/LineAreas.ts +65 -65
  54. package/src/grid/plugins/Lines.ts +59 -59
  55. package/src/grid/plugins/StackedBars.ts +64 -64
  56. package/src/grid/plugins/StackedValueAxis.ts +96 -96
  57. package/src/grid/plugins/ValueAxis.ts +94 -94
  58. package/src/index.ts +6 -6
  59. package/src/multiGrid/defaults.ts +244 -244
  60. package/src/multiGrid/index.ts +14 -14
  61. package/src/multiGrid/multiGridObservables.ts +50 -50
  62. package/src/multiGrid/plugins/MultiBars.ts +108 -108
  63. package/src/multiGrid/plugins/MultiBarsTriangle.ts +114 -114
  64. package/src/multiGrid/plugins/MultiDots.ts +102 -102
  65. package/src/multiGrid/plugins/MultiGridLegend.ts +169 -169
  66. package/src/multiGrid/plugins/MultiGridTooltip.ts +66 -66
  67. package/src/multiGrid/plugins/MultiGroupAxis.ts +137 -137
  68. package/src/multiGrid/plugins/MultiLineAreas.ts +107 -107
  69. package/src/multiGrid/plugins/MultiLines.ts +101 -101
  70. package/src/multiGrid/plugins/MultiStackedBars.ts +106 -106
  71. package/src/multiGrid/plugins/MultiStackedValueAxis.ts +134 -134
  72. package/src/multiGrid/plugins/MultiValueAxis.ts +134 -134
  73. package/src/multiGrid/plugins/OverlappingStackedValueAxes.ts +300 -300
  74. package/src/multiGrid/plugins/OverlappingValueAxes.ts +300 -300
  75. package/src/multiValue/defaults.ts +523 -431
  76. package/src/multiValue/index.ts +16 -12
  77. package/src/multiValue/multiValueObservables.ts +781 -666
  78. package/src/multiValue/plugins/MultiValueLegend.ts +107 -107
  79. package/src/multiValue/plugins/MultiValueTooltip.ts +66 -66
  80. package/src/multiValue/plugins/OrdinalAux.ts +661 -0
  81. package/src/multiValue/plugins/OrdinalAxis.ts +525 -0
  82. package/src/multiValue/plugins/OrdinalBubbles.ts +226 -0
  83. package/src/multiValue/plugins/OrdinalZoom.ts +57 -0
  84. package/src/multiValue/plugins/RacingBars.ts +375 -373
  85. package/src/multiValue/plugins/RacingCounterTexts.ts +300 -300
  86. package/src/multiValue/plugins/RacingValueAxis.ts +114 -114
  87. package/src/multiValue/plugins/Scatter.ts +486 -426
  88. package/src/multiValue/plugins/ScatterBubbles.ts +635 -554
  89. package/src/multiValue/plugins/XAxis.ts +107 -107
  90. package/src/multiValue/plugins/XYAux.ts +683 -682
  91. package/src/multiValue/plugins/XYAxes.ts +194 -194
  92. package/src/multiValue/plugins/XYAxes_legacy.ts +683 -683
  93. package/src/multiValue/plugins/XZoom.ts +40 -299
  94. package/src/noneData/defaults.ts +102 -102
  95. package/src/noneData/index.ts +3 -3
  96. package/src/noneData/plugins/Container.ts +27 -27
  97. package/src/noneData/plugins/Tooltip.ts +373 -373
  98. package/src/relationship/defaults.ts +221 -221
  99. package/src/relationship/index.ts +5 -5
  100. package/src/relationship/plugins/ForceDirected.ts +1173 -1173
  101. package/src/relationship/plugins/ForceDirectedBubbles.ts +1411 -1411
  102. package/src/relationship/plugins/RelationshipLegend.ts +100 -100
  103. package/src/relationship/plugins/RelationshipTooltip.ts +66 -66
  104. package/src/relationship/relationshipObservables.ts +49 -49
  105. package/src/series/defaults.ts +221 -221
  106. package/src/series/index.ts +9 -9
  107. package/src/series/plugins/Bubbles.ts +636 -636
  108. package/src/series/plugins/Pie.ts +623 -623
  109. package/src/series/plugins/PieEventTexts.ts +284 -284
  110. package/src/series/plugins/PieLabels.ts +640 -640
  111. package/src/series/plugins/Rose.ts +516 -516
  112. package/src/series/plugins/RoseLabels.ts +600 -600
  113. package/src/series/plugins/SeriesLegend.ts +107 -107
  114. package/src/series/plugins/SeriesTooltip.ts +66 -66
  115. package/src/series/seriesObservables.ts +145 -145
  116. package/src/series/seriesUtils.ts +51 -51
  117. package/src/tree/defaults.ts +102 -102
  118. package/src/tree/index.ts +4 -4
  119. package/src/tree/plugins/TreeLegend.ts +100 -100
  120. package/src/tree/plugins/TreeMap.ts +341 -341
  121. package/src/tree/plugins/TreeTooltip.ts +66 -66
  122. package/src/utils/commonUtils.ts +31 -31
  123. package/src/utils/d3Graphics.ts +176 -176
  124. package/src/utils/d3Utils.ts +92 -92
  125. package/src/utils/observables.ts +14 -14
  126. package/src/utils/orbchartsUtils.ts +129 -129
  127. package/tsconfig.base.json +13 -13
  128. package/tsconfig.json +2 -2
  129. package/vite.config.js +22 -22
  130. package/dist/src/multiValue/plugins/OrdinalXAxis.d.ts +0 -0
  131. package/dist/src/multiValue/plugins/RankingAxis_legacy.d.ts +0 -0
  132. package/src/multiValue/plugins/OrdinalXAxis.ts +0 -0
  133. package/src/multiValue/plugins/RankingAxis_legacy.ts +0 -109
@@ -1,707 +1,707 @@
1
- import * as d3 from 'd3'
2
- import {
3
- combineLatest,
4
- map,
5
- filter,
6
- switchMap,
7
- takeUntil,
8
- distinctUntilChanged,
9
- Observable,
10
- Subject } from 'rxjs'
11
- import type { BasePluginFn } from './types'
12
- import type {
13
- ComputedDatumGrid,
14
- ComputedDataGrid,
15
- ComputedLayoutDatumGrid,
16
- ComputedAxesDataGrid,
17
- DataFormatterGrid,
18
- EventGrid,
19
- ContainerPositionScaled,
20
- ChartParams,
21
- Layout,
22
- TransformData
23
- } from '../../lib/core-types'
24
- import type { BaseLinesParams } from '../../lib/plugins-basic-types'
25
- import { getD3TransitionEase } from '../utils/d3Utils'
26
- import { getClassName, getUniID } from '../utils/orbchartsUtils'
27
- import { gridGroupPositionFnObservable } from '../grid/gridObservables'
28
- import { gridSelectionsObservable } from '../grid/gridObservables'
29
-
30
- // export interface BaseLinesParams {
31
- // // lineType: LineType
32
- // lineCurve: string
33
- // lineWidth: number
34
- // // labelFn: (d: ComputedDatumSeries) => string
35
- // // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
36
- // // labelStyleFn: (d: ComputedDatumSeries) => string
37
- // // labelFontSizeFn: (d: ComputedDatumSeries) => number
38
- // // labelColorFn: (d: ComputedDatumSeries) => string
39
- // // labelPadding: number
40
- // }
41
-
42
- interface BaseLinesContext {
43
- selection: d3.Selection<any, unknown, any, unknown>
44
- computedData$: Observable<ComputedDataGrid>
45
- computedAxesData$: Observable<ComputedAxesDataGrid>
46
- visibleComputedData$: Observable<ComputedDatumGrid[][]>
47
- visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
48
- seriesLabels$: Observable<string[]>
49
- SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
50
- GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
51
- fullDataFormatter$: Observable<DataFormatterGrid>
52
- fullParams$: Observable<BaseLinesParams>
53
- fullChartParams$: Observable<ChartParams>
54
- gridAxesTransform$: Observable<TransformData>
55
- gridGraphicTransform$: Observable<TransformData>
56
- gridAxesSize$: Observable<{
57
- width: number;
58
- height: number;
59
- }>
60
- gridHighlight$: Observable<ComputedDatumGrid[]>
61
- gridContainerPosition$: Observable<ContainerPositionScaled[]>
62
- allContainerPosition$: Observable<ContainerPositionScaled[]>
63
- layout$: Observable<Layout>
64
- event$: Subject<EventGrid>
65
- }
66
-
67
-
68
- type ClipPathDatum = {
69
- id: string;
70
- // x: number;
71
- // y: number;
72
- width: number;
73
- height: number;
74
- }
75
-
76
- // const pluginName = 'Lines'
77
- // const pathClassName = getClassName(pluginName, 'path')
78
-
79
-
80
- function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedLayoutDatumGrid> {
81
- return d3.line<ComputedLayoutDatumGrid>()
82
- .x((d) => d.axisX)
83
- .y((d) => d.axisY)
84
- .curve((d3 as any)[lineCurve])
85
- }
86
-
87
- // 依無值的資料分段
88
- function makeSegmentData (data: ComputedLayoutDatumGrid[]): ComputedLayoutDatumGrid[][] {
89
- let segmentData: ComputedLayoutDatumGrid[][] = [[]]
90
-
91
- let currentIndex = 0
92
- for (let i in data) {
93
- if (data[i].visible == false || data[i].value === undefined || data[i].value === null) {
94
- // 換下一段的 index
95
- if (segmentData[currentIndex].length) {
96
- currentIndex ++
97
- segmentData[currentIndex] = []
98
- }
99
- continue
100
- }
101
- segmentData[currentIndex].push(data[i])
102
- }
103
-
104
- return segmentData
105
- }
106
-
107
-
108
- function renderLines ({ selection, pathClassName, segmentData, linePath, params }: {
109
- selection: d3.Selection<SVGGElement, unknown, any, unknown>
110
- pathClassName: string
111
- segmentData: ComputedLayoutDatumGrid[][]
112
- linePath: d3.Line<ComputedLayoutDatumGrid>
113
- params: BaseLinesParams
114
- }): d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any> {
115
- // if (!data[0]) {
116
- // return undefined
117
- // }
118
-
119
- const lines = selection
120
- .selectAll<SVGPathElement, ComputedLayoutDatumGrid[]>('path')
121
- .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
122
- .join(
123
- enter => {
124
- return enter
125
- .append<SVGPathElement>('path')
126
- .classed(pathClassName, true)
127
- .attr("fill","none")
128
- .attr('pointer-events', 'visibleStroke') // 只對線條產生事件
129
- .style('vector-effect', 'non-scaling-stroke')
130
- .style('cursor', 'pointer')
131
- },
132
- update => update,
133
- exit => exit.remove()
134
- )
135
- .attr("stroke-width", params.lineWidth)
136
- .attr("stroke", (d, i) => d[0] && d[0].color)
137
- .attr("d", (d) => {
138
- return linePath(d)
139
- })
140
-
141
- return lines
142
- }
143
-
144
- function highlightLines ({ selection, seriesLabel, fullChartParams }: {
145
- selection: d3.Selection<any, string, any, any>
146
- seriesLabel: string | null
147
- fullChartParams: ChartParams
148
- }) {
149
- selection.interrupt('highlight')
150
- if (!seriesLabel) {
151
- // remove highlight
152
- selection
153
- .transition('highlight')
154
- .duration(200)
155
- .style('opacity', 1)
156
- return
157
- }
158
-
159
- selection
160
- .each((currentSeriesLabel, i, n) => {
161
- // const currentSeriesLabel = d[0] ? d[0].seriesLabel : ''
162
-
163
- if (currentSeriesLabel === seriesLabel) {
164
- d3.select(n[i])
165
- .style('opacity', 1)
166
- } else {
167
- d3.select(n[i])
168
- .style('opacity', fullChartParams.styles.unhighlightedOpacity)
169
- }
170
- })
171
- }
172
-
173
- function renderClipPath ({ defsSelection, clipPathData, transitionDuration, transitionEase }: {
174
- defsSelection: d3.Selection<SVGDefsElement, any, any, any>
175
- clipPathData: ClipPathDatum[]
176
- transitionDuration: number
177
- transitionEase: string
178
- }) {
179
- const clipPath = defsSelection
180
- .selectAll<SVGClipPathElement, Layout>('clipPath')
181
- .data(clipPathData)
182
- .join(
183
- enter => {
184
- return enter
185
- .append('clipPath')
186
- },
187
- update => update,
188
- exit => exit.remove()
189
- )
190
- .attr('id', d => d.id)
191
- .each((d, i, g) => {
192
- const rect = d3.select(g[i])
193
- .selectAll<SVGRectElement, typeof d>('rect')
194
- .data([d])
195
- .join(
196
- enter => {
197
- const enterSelection = enter
198
- .append('rect')
199
- enterSelection
200
- .transition()
201
- .duration(transitionDuration)
202
- .ease(getD3TransitionEase(transitionEase))
203
- // .delay(100) // @Q@ 不知為何如果沒加 delay位置會有點跑掉
204
- .tween('tween', (_d, _i, _g) => {
205
- return (t) => {
206
- const transitionWidth = _d.width * t
207
-
208
- enterSelection
209
- .attr('x', 0)
210
- .attr('y', 0)
211
- .attr('width', _d => transitionWidth)
212
- .attr('height', _d => _d.height)
213
- }
214
- })
215
- return enterSelection
216
- },
217
- update => {
218
- return update
219
- .attr('x', 0)
220
- .attr('y', 0)
221
- .attr('width', _d => _d.width)
222
- .attr('height', _d => _d.height)
223
- },
224
- exit => exit.remove()
225
- )
226
- })
227
-
228
- }
229
-
230
- export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
231
- selection,
232
- computedData$,
233
- computedAxesData$,
234
- visibleComputedData$,
235
- visibleComputedAxesData$,
236
- seriesLabels$,
237
- SeriesDataMap$,
238
- GroupDataMap$,
239
- fullParams$,
240
- fullDataFormatter$,
241
- fullChartParams$,
242
- gridAxesTransform$,
243
- gridGraphicTransform$,
244
- gridAxesSize$,
245
- gridHighlight$,
246
- gridContainerPosition$,
247
- allContainerPosition$,
248
- layout$,
249
- event$
250
- }) => {
251
-
252
- const destroy$ = new Subject()
253
-
254
- const clipPathID = getUniID(pluginName, 'clipPath-box')
255
- const pathClassName = getClassName(pluginName, 'path')
256
- // const clipPathSeriesID = getUniID(pluginName, 'clipPath')
257
-
258
- // const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
259
- // .append('g')
260
- // .attr('clip-path', `url(#${clipPathID})`)
261
- // const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
262
- // const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
263
- // const graphicSelection$: Subject<d3.Selection<SVGGElement, string, any, any>> = new Subject()
264
-
265
-
266
- // gridAxesTransform$
267
- // .pipe(
268
- // takeUntil(destroy$),
269
- // map(d => d.value),
270
- // distinctUntilChanged()
271
- // ).subscribe(d => {
272
- // axisSelection
273
- // .style('transform', d)
274
- // })
275
-
276
- // gridGraphicTransform$
277
- // .pipe(
278
- // takeUntil(destroy$),
279
- // map(d => d.value),
280
- // distinctUntilChanged()
281
- // ).subscribe(d => {
282
- // graphicGSelection
283
- // .transition()
284
- // .duration(50)
285
- // .style('transform', d)
286
- // })
287
-
288
- // const seriesSelection$ = computedData$.pipe(
289
- // takeUntil(destroy$),
290
- // distinctUntilChanged((a, b) => {
291
- // // 只有當series的數量改變時,才重新計算
292
- // return a.length === b.length
293
- // }),
294
- // map((computedData, i) => {
295
- // return selection
296
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
297
- // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
298
- // .join(
299
- // enter => {
300
- // return enter
301
- // .append('g')
302
- // .classed(seriesClassName, true)
303
- // .each((d, i, g) => {
304
- // const axesSelection = d3.select(g[i])
305
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
306
- // .data([i])
307
- // .join(
308
- // enter => {
309
- // return enter
310
- // .append('g')
311
- // .classed(axesClassName, true)
312
- // .attr('clip-path', `url(#${clipPathID})`)
313
- // .each((d, i, g) => {
314
- // const defsSelection = d3.select(g[i])
315
- // .selectAll<SVGDefsElement, any>('defs')
316
- // .data([i])
317
- // .join('defs')
318
-
319
- // const graphicGSelection = d3.select(g[i])
320
- // .selectAll<SVGGElement, any>('g')
321
- // .data([i])
322
- // .join('g')
323
- // .classed(graphicClassName, true)
324
- // })
325
- // },
326
- // update => update,
327
- // exit => exit.remove()
328
- // )
329
- // })
330
- // },
331
- // update => update,
332
- // exit => exit.remove()
333
- // )
334
- // })
335
- // )
336
-
337
- // combineLatest({
338
- // seriesSelection: seriesSelection$,
339
- // gridContainerPosition: gridContainerPosition$
340
- // }).pipe(
341
- // takeUntil(destroy$),
342
- // switchMap(async d => d)
343
- // ).subscribe(data => {
344
- // data.seriesSelection
345
- // .transition()
346
- // .attr('transform', (d, i) => {
347
- // const translate = data.gridContainerPosition[i].translate
348
- // const scale = data.gridContainerPosition[i].scale
349
- // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
350
- // })
351
- // })
352
-
353
-
354
- // const axesSelection$ = combineLatest({
355
- // seriesSelection: seriesSelection$,
356
- // gridAxesTransform: gridAxesTransform$
357
- // }).pipe(
358
- // takeUntil(destroy$),
359
- // switchMap(async d => d),
360
- // map(data => {
361
- // return data.seriesSelection
362
- // .select<SVGGElement>(`g.${axesClassName}`)
363
- // .style('transform', data.gridAxesTransform.value)
364
- // })
365
- // )
366
- // const defsSelection$ = axesSelection$.pipe(
367
- // takeUntil(destroy$),
368
- // map(axesSelection => {
369
- // return axesSelection.select<SVGDefsElement>('defs')
370
- // })
371
- // )
372
- // const graphicGSelection$ = combineLatest({
373
- // axesSelection: axesSelection$,
374
- // gridGraphicTransform: gridGraphicTransform$
375
- // }).pipe(
376
- // takeUntil(destroy$),
377
- // switchMap(async d => d),
378
- // map(data => {
379
- // const graphicGSelection = data.axesSelection
380
- // .select<SVGGElement>(`g.${graphicClassName}`)
381
- // .attr('clip-path', (d) => `url(#${clipPathSeriesID}-${d[0] ? d[0].seriesLabel : ''})`)
382
- // graphicGSelection
383
- // .transition()
384
- // .duration(50)
385
- // .style('transform', data.gridGraphicTransform.value)
386
- // return graphicGSelection
387
- // })
388
- // )
389
-
390
- const {
391
- seriesSelection$,
392
- axesSelection$,
393
- defsSelection$,
394
- graphicGSelection$
395
- } = gridSelectionsObservable({
396
- selection,
397
- pluginName,
398
- clipPathID,
399
- seriesLabels$,
400
- gridContainerPosition$,
401
- gridAxesTransform$,
402
- gridGraphicTransform$
403
- })
404
-
405
- const linePath$: Observable<d3.Line<ComputedLayoutDatumGrid>> = new Observable(subscriber => {
406
- const paramsSubscription = fullParams$
407
- .pipe(
408
- takeUntil(destroy$)
409
- )
410
- .subscribe(d => {
411
- if (!d) return
412
- const linePath = createLinePath(d.lineCurve)
413
- subscriber.next(linePath)
414
- })
415
- return () => {
416
- paramsSubscription.unsubscribe()
417
- }
418
- })
419
-
420
- // // 顯示範圍內的series labels
421
- // const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
422
- // computedData$.pipe(
423
- // takeUntil(destroy$),
424
- // switchMap(async (d) => d),
425
- // ).subscribe(data => {
426
- // const labels = data[0] && data[0][0]
427
- // ? data.map(d => d[0].seriesLabel)
428
- // : []
429
- // subscriber.next(labels)
430
- // })
431
- // })
432
-
433
- // const axisSize$ = gridAxisSizeObservable({
434
- // fullDataFormatter$,
435
- // computedLayout$
436
- // })
437
-
438
- const transitionDuration$ = fullChartParams$
439
- .pipe(
440
- map(d => d.transitionDuration),
441
- distinctUntilChanged()
442
- )
443
-
444
- const transitionEase$ = fullChartParams$
445
- .pipe(
446
- map(d => d.transitionEase),
447
- distinctUntilChanged()
448
- )
449
-
450
- const clipPathSubscription = combineLatest({
451
- defsSelection: defsSelection$,
452
- seriesLabels: seriesLabels$,
453
- axisSize: gridAxesSize$,
454
- transitionDuration: transitionDuration$,
455
- transitionEase: transitionEase$
456
- }).pipe(
457
- takeUntil(destroy$),
458
- switchMap(async (d) => d),
459
- ).subscribe(data => {
460
- // 外層的遮罩
461
- const clipPathBox = [{
462
- id: clipPathID,
463
- width: data.axisSize.width,
464
- height: data.axisSize.height
465
- }]
466
- // 各別線條的遮罩(各別動畫)
467
- const clipPathData = clipPathBox.concat(
468
- data.seriesLabels.map(d => {
469
- return {
470
- id: `orbcharts__clipPath_${d}`,
471
- width: data.axisSize.width,
472
- height: data.axisSize.height
473
- }
474
- })
475
- )
476
- renderClipPath({
477
- defsSelection: data.defsSelection,
478
- clipPathData,
479
- transitionDuration: data.transitionDuration,
480
- transitionEase: data.transitionEase
481
- })
482
- })
483
-
484
- // const SeriesDataMap$ = computedData$.pipe(
485
- // map(d => makeGridSeriesDataMap(d))
486
- // )
487
-
488
- // const GroupDataMap$ = computedData$.pipe(
489
- // map(d => makeGridGroupDataMap(d))
490
- // )
491
-
492
- const DataMap$ = computedData$.pipe(
493
- map(d => {
494
- const DataMap: Map<string, ComputedDatumGrid> = new Map()
495
- d.flat().forEach(_d => DataMap.set(_d.id, _d))
496
- return DataMap
497
- })
498
- )
499
-
500
- // 取得事件座標的group資料
501
- const gridGroupPositionFn$ = gridGroupPositionFnObservable({
502
- fullDataFormatter$,
503
- gridAxesSize$: gridAxesSize$,
504
- computedData$: computedData$,
505
- fullChartParams$: fullChartParams$,
506
- gridContainerPosition$: allContainerPosition$,
507
- layout$: layout$
508
- })
509
-
510
- const highlightTarget$ = fullChartParams$.pipe(
511
- takeUntil(destroy$),
512
- map(d => d.highlightTarget),
513
- distinctUntilChanged()
514
- )
515
-
516
- const pathSelectionArr$ = combineLatest({
517
- graphicGSelection: graphicGSelection$,
518
- visibleComputedAxesData: visibleComputedAxesData$,
519
- linePath: linePath$,
520
- params: fullParams$,
521
- }).pipe(
522
- takeUntil(destroy$),
523
- switchMap(async (d) => d),
524
- map(data => {
525
- // const updateGraphic = data.graphicGSelection
526
- // .selectAll<SVGGElement, number>('g')
527
- // .data(data.seriesLabels, (d, i) => d)
528
- // const enterGraphic = updateGraphic.enter()
529
- // .append('g')
530
- // .classed(graphicClassName, true)
531
- // updateGraphic.exit().remove()
532
- // const graphicSelection = updateGraphic.merge(enterGraphic)
533
- // .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
534
- let pathSelectionArr: d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any>[] = []
535
-
536
- // 繪圖
537
- data.graphicGSelection.each((d, i, all) => {
538
- // 將資料分段
539
- const segmentData = makeSegmentData(data.visibleComputedAxesData[i] ?? [])
540
-
541
- pathSelectionArr[i] = renderLines({
542
- selection: d3.select(all[i]),
543
- pathClassName,
544
- linePath: data.linePath,
545
- segmentData: segmentData,
546
- params: data.params
547
- })
548
- })
549
-
550
- return pathSelectionArr
551
- })
552
- )
553
-
554
- combineLatest({
555
- pathSelectionArr: pathSelectionArr$,
556
- computedData: computedData$,
557
- SeriesDataMap: SeriesDataMap$,
558
- GroupDataMap: GroupDataMap$,
559
- highlightTarget: highlightTarget$,
560
- gridGroupPositionFn: gridGroupPositionFn$,
561
- }).pipe(
562
- takeUntil(destroy$),
563
- switchMap(async (d) => d)
564
- ).subscribe(data => {
565
- data.pathSelectionArr.forEach(pathSelection => {
566
- pathSelection
567
- .on('mouseover', (event, datum) => {
568
- event.stopPropagation()
569
-
570
- const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
571
- const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
572
- // console.log('groupIndex', groupIndex)
573
- const groupData = data.GroupDataMap.get(groupLabel)!
574
- const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
575
- const _datum = targetDatum ?? datum[0]
576
-
577
- event$.next({
578
- type: 'grid',
579
- eventName: 'mouseover',
580
- pluginName,
581
- highlightTarget: data.highlightTarget,
582
- datum: _datum,
583
- gridIndex: _datum.gridIndex,
584
- series: data.SeriesDataMap.get(_datum.seriesLabel)!,
585
- seriesIndex: _datum.seriesIndex,
586
- seriesLabel: _datum.seriesLabel,
587
- group: data.GroupDataMap.get(_datum.groupLabel)!,
588
- groupIndex: _datum.groupIndex,
589
- groupLabel: _datum.groupLabel,
590
- event,
591
- data: data.computedData
592
- })
593
- })
594
- .on('mousemove', (event, datum) => {
595
- event.stopPropagation()
596
-
597
- const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
598
- const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
599
- const groupData = data.GroupDataMap.get(groupLabel)!
600
- const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
601
- const _datum = targetDatum ?? datum[0]
602
-
603
- event$.next({
604
- type: 'grid',
605
- eventName: 'mousemove',
606
- pluginName,
607
- highlightTarget: data.highlightTarget,
608
- datum: _datum,
609
- gridIndex: _datum.gridIndex,
610
- series: data.SeriesDataMap.get(_datum.seriesLabel)!,
611
- seriesIndex: _datum.seriesIndex,
612
- seriesLabel: _datum.seriesLabel,
613
- group: data.GroupDataMap.get(_datum.groupLabel)!,
614
- groupIndex: _datum.groupIndex,
615
- groupLabel: _datum.groupLabel,
616
- event,
617
- data: data.computedData
618
- })
619
- })
620
- .on('mouseout', (event, datum) => {
621
- event.stopPropagation()
622
-
623
- const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
624
- const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
625
- const groupData = data.GroupDataMap.get(groupLabel)!
626
- const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
627
- const _datum = targetDatum ?? datum[0]
628
-
629
- event$.next({
630
- type: 'grid',
631
- eventName: 'mouseout',
632
- pluginName,
633
- highlightTarget: data.highlightTarget,
634
- datum: _datum,
635
- gridIndex: _datum.gridIndex,
636
- series: data.SeriesDataMap.get(_datum.seriesLabel)!,
637
- seriesIndex: _datum.seriesIndex,
638
- seriesLabel: _datum.seriesLabel,
639
- group: data.GroupDataMap.get(_datum.groupLabel)!,
640
- groupIndex: _datum.groupIndex,
641
- groupLabel: _datum.groupLabel,
642
- event,
643
- data: data.computedData
644
- })
645
- })
646
- .on('click', (event, datum) => {
647
- event.stopPropagation()
648
-
649
- const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
650
- const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
651
- const groupData = data.GroupDataMap.get(groupLabel)!
652
- const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
653
- const _datum = targetDatum ?? datum[0]
654
-
655
- event$.next({
656
- type: 'grid',
657
- eventName: 'click',
658
- pluginName,
659
- highlightTarget: data.highlightTarget,
660
- datum: _datum,
661
- gridIndex: _datum.gridIndex,
662
- series: data.SeriesDataMap.get(_datum.seriesLabel)!,
663
- seriesIndex: _datum.seriesIndex,
664
- seriesLabel: _datum.seriesLabel,
665
- group: data.GroupDataMap.get(_datum.groupLabel)!,
666
- groupIndex: _datum.groupIndex,
667
- groupLabel: _datum.groupLabel,
668
- event,
669
- data: data.computedData
670
- })
671
- })
672
- })
673
- })
674
-
675
- // const datumList$ = computedData$.pipe(
676
- // takeUntil(destroy$),
677
- // map(d => d.flat())
678
- // )
679
- // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
680
- // const highlightSubscription = gridHighlight$.subscribe()
681
-
682
- fullChartParams$.pipe(
683
- takeUntil(destroy$),
684
- filter(d => d.highlightTarget === 'series'),
685
- switchMap(d => combineLatest({
686
- graphicGSelection: graphicGSelection$,
687
- gridHighlight: gridHighlight$,
688
- DataMap: DataMap$,
689
- fullChartParams: fullChartParams$
690
- }).pipe(
691
- takeUntil(destroy$),
692
- switchMap(async d => d)
693
- ))
694
- ).subscribe(data => {
695
- const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
696
- highlightLines({
697
- selection: data.graphicGSelection,
698
- seriesLabel,
699
- fullChartParams: data.fullChartParams
700
- })
701
- })
702
-
703
- return () => {
704
- destroy$.next(undefined)
705
- // highlightSubscription.unsubscribe()
706
- }
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ map,
5
+ filter,
6
+ switchMap,
7
+ takeUntil,
8
+ distinctUntilChanged,
9
+ Observable,
10
+ Subject } from 'rxjs'
11
+ import type { BasePluginFn } from './types'
12
+ import type {
13
+ ComputedDatumGrid,
14
+ ComputedDataGrid,
15
+ ComputedLayoutDatumGrid,
16
+ ComputedAxesDataGrid,
17
+ DataFormatterGrid,
18
+ EventGrid,
19
+ ContainerPositionScaled,
20
+ ChartParams,
21
+ Layout,
22
+ TransformData
23
+ } from '../../lib/core-types'
24
+ import type { BaseLinesParams } from '../../lib/plugins-basic-types'
25
+ import { getD3TransitionEase } from '../utils/d3Utils'
26
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
27
+ import { gridGroupPositionFnObservable } from '../grid/gridObservables'
28
+ import { gridSelectionsObservable } from '../grid/gridObservables'
29
+
30
+ // export interface BaseLinesParams {
31
+ // // lineType: LineType
32
+ // lineCurve: string
33
+ // lineWidth: number
34
+ // // labelFn: (d: ComputedDatumSeries) => string
35
+ // // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
36
+ // // labelStyleFn: (d: ComputedDatumSeries) => string
37
+ // // labelFontSizeFn: (d: ComputedDatumSeries) => number
38
+ // // labelColorFn: (d: ComputedDatumSeries) => string
39
+ // // labelPadding: number
40
+ // }
41
+
42
+ interface BaseLinesContext {
43
+ selection: d3.Selection<any, unknown, any, unknown>
44
+ computedData$: Observable<ComputedDataGrid>
45
+ computedAxesData$: Observable<ComputedAxesDataGrid>
46
+ visibleComputedData$: Observable<ComputedDatumGrid[][]>
47
+ visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
48
+ seriesLabels$: Observable<string[]>
49
+ SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
50
+ GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
51
+ fullDataFormatter$: Observable<DataFormatterGrid>
52
+ fullParams$: Observable<BaseLinesParams>
53
+ fullChartParams$: Observable<ChartParams>
54
+ gridAxesTransform$: Observable<TransformData>
55
+ gridGraphicTransform$: Observable<TransformData>
56
+ gridAxesSize$: Observable<{
57
+ width: number;
58
+ height: number;
59
+ }>
60
+ gridHighlight$: Observable<ComputedDatumGrid[]>
61
+ gridContainerPosition$: Observable<ContainerPositionScaled[]>
62
+ allContainerPosition$: Observable<ContainerPositionScaled[]>
63
+ layout$: Observable<Layout>
64
+ event$: Subject<EventGrid>
65
+ }
66
+
67
+
68
+ type ClipPathDatum = {
69
+ id: string;
70
+ // x: number;
71
+ // y: number;
72
+ width: number;
73
+ height: number;
74
+ }
75
+
76
+ // const pluginName = 'Lines'
77
+ // const pathClassName = getClassName(pluginName, 'path')
78
+
79
+
80
+ function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedLayoutDatumGrid> {
81
+ return d3.line<ComputedLayoutDatumGrid>()
82
+ .x((d) => d.axisX)
83
+ .y((d) => d.axisY)
84
+ .curve((d3 as any)[lineCurve])
85
+ }
86
+
87
+ // 依無值的資料分段
88
+ function makeSegmentData (data: ComputedLayoutDatumGrid[]): ComputedLayoutDatumGrid[][] {
89
+ let segmentData: ComputedLayoutDatumGrid[][] = [[]]
90
+
91
+ let currentIndex = 0
92
+ for (let i in data) {
93
+ if (data[i].visible == false || data[i].value === undefined || data[i].value === null) {
94
+ // 換下一段的 index
95
+ if (segmentData[currentIndex].length) {
96
+ currentIndex ++
97
+ segmentData[currentIndex] = []
98
+ }
99
+ continue
100
+ }
101
+ segmentData[currentIndex].push(data[i])
102
+ }
103
+
104
+ return segmentData
105
+ }
106
+
107
+
108
+ function renderLines ({ selection, pathClassName, segmentData, linePath, params }: {
109
+ selection: d3.Selection<SVGGElement, unknown, any, unknown>
110
+ pathClassName: string
111
+ segmentData: ComputedLayoutDatumGrid[][]
112
+ linePath: d3.Line<ComputedLayoutDatumGrid>
113
+ params: BaseLinesParams
114
+ }): d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any> {
115
+ // if (!data[0]) {
116
+ // return undefined
117
+ // }
118
+
119
+ const lines = selection
120
+ .selectAll<SVGPathElement, ComputedLayoutDatumGrid[]>('path')
121
+ .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
122
+ .join(
123
+ enter => {
124
+ return enter
125
+ .append<SVGPathElement>('path')
126
+ .classed(pathClassName, true)
127
+ .attr("fill","none")
128
+ .attr('pointer-events', 'visibleStroke') // 只對線條產生事件
129
+ .style('vector-effect', 'non-scaling-stroke')
130
+ .style('cursor', 'pointer')
131
+ },
132
+ update => update,
133
+ exit => exit.remove()
134
+ )
135
+ .attr("stroke-width", params.lineWidth)
136
+ .attr("stroke", (d, i) => d[0] && d[0].color)
137
+ .attr("d", (d) => {
138
+ return linePath(d)
139
+ })
140
+
141
+ return lines
142
+ }
143
+
144
+ function highlightLines ({ selection, seriesLabel, fullChartParams }: {
145
+ selection: d3.Selection<any, string, any, any>
146
+ seriesLabel: string | null
147
+ fullChartParams: ChartParams
148
+ }) {
149
+ selection.interrupt('highlight')
150
+ if (!seriesLabel) {
151
+ // remove highlight
152
+ selection
153
+ .transition('highlight')
154
+ .duration(200)
155
+ .style('opacity', 1)
156
+ return
157
+ }
158
+
159
+ selection
160
+ .each((currentSeriesLabel, i, n) => {
161
+ // const currentSeriesLabel = d[0] ? d[0].seriesLabel : ''
162
+
163
+ if (currentSeriesLabel === seriesLabel) {
164
+ d3.select(n[i])
165
+ .style('opacity', 1)
166
+ } else {
167
+ d3.select(n[i])
168
+ .style('opacity', fullChartParams.styles.unhighlightedOpacity)
169
+ }
170
+ })
171
+ }
172
+
173
+ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, transitionEase }: {
174
+ defsSelection: d3.Selection<SVGDefsElement, any, any, any>
175
+ clipPathData: ClipPathDatum[]
176
+ transitionDuration: number
177
+ transitionEase: string
178
+ }) {
179
+ const clipPath = defsSelection
180
+ .selectAll<SVGClipPathElement, Layout>('clipPath')
181
+ .data(clipPathData)
182
+ .join(
183
+ enter => {
184
+ return enter
185
+ .append('clipPath')
186
+ },
187
+ update => update,
188
+ exit => exit.remove()
189
+ )
190
+ .attr('id', d => d.id)
191
+ .each((d, i, g) => {
192
+ const rect = d3.select(g[i])
193
+ .selectAll<SVGRectElement, typeof d>('rect')
194
+ .data([d])
195
+ .join(
196
+ enter => {
197
+ const enterSelection = enter
198
+ .append('rect')
199
+ enterSelection
200
+ .transition()
201
+ .duration(transitionDuration)
202
+ .ease(getD3TransitionEase(transitionEase))
203
+ // .delay(100) // @Q@ 不知為何如果沒加 delay位置會有點跑掉
204
+ .tween('tween', (_d, _i, _g) => {
205
+ return (t) => {
206
+ const transitionWidth = _d.width * t
207
+
208
+ enterSelection
209
+ .attr('x', 0)
210
+ .attr('y', 0)
211
+ .attr('width', _d => transitionWidth)
212
+ .attr('height', _d => _d.height)
213
+ }
214
+ })
215
+ return enterSelection
216
+ },
217
+ update => {
218
+ return update
219
+ .attr('x', 0)
220
+ .attr('y', 0)
221
+ .attr('width', _d => _d.width)
222
+ .attr('height', _d => _d.height)
223
+ },
224
+ exit => exit.remove()
225
+ )
226
+ })
227
+
228
+ }
229
+
230
+ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
231
+ selection,
232
+ computedData$,
233
+ computedAxesData$,
234
+ visibleComputedData$,
235
+ visibleComputedAxesData$,
236
+ seriesLabels$,
237
+ SeriesDataMap$,
238
+ GroupDataMap$,
239
+ fullParams$,
240
+ fullDataFormatter$,
241
+ fullChartParams$,
242
+ gridAxesTransform$,
243
+ gridGraphicTransform$,
244
+ gridAxesSize$,
245
+ gridHighlight$,
246
+ gridContainerPosition$,
247
+ allContainerPosition$,
248
+ layout$,
249
+ event$
250
+ }) => {
251
+
252
+ const destroy$ = new Subject()
253
+
254
+ const clipPathID = getUniID(pluginName, 'clipPath-box')
255
+ const pathClassName = getClassName(pluginName, 'path')
256
+ // const clipPathSeriesID = getUniID(pluginName, 'clipPath')
257
+
258
+ // const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
259
+ // .append('g')
260
+ // .attr('clip-path', `url(#${clipPathID})`)
261
+ // const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
262
+ // const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
263
+ // const graphicSelection$: Subject<d3.Selection<SVGGElement, string, any, any>> = new Subject()
264
+
265
+
266
+ // gridAxesTransform$
267
+ // .pipe(
268
+ // takeUntil(destroy$),
269
+ // map(d => d.value),
270
+ // distinctUntilChanged()
271
+ // ).subscribe(d => {
272
+ // axisSelection
273
+ // .style('transform', d)
274
+ // })
275
+
276
+ // gridGraphicTransform$
277
+ // .pipe(
278
+ // takeUntil(destroy$),
279
+ // map(d => d.value),
280
+ // distinctUntilChanged()
281
+ // ).subscribe(d => {
282
+ // graphicGSelection
283
+ // .transition()
284
+ // .duration(50)
285
+ // .style('transform', d)
286
+ // })
287
+
288
+ // const seriesSelection$ = computedData$.pipe(
289
+ // takeUntil(destroy$),
290
+ // distinctUntilChanged((a, b) => {
291
+ // // 只有當series的數量改變時,才重新計算
292
+ // return a.length === b.length
293
+ // }),
294
+ // map((computedData, i) => {
295
+ // return selection
296
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
297
+ // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
298
+ // .join(
299
+ // enter => {
300
+ // return enter
301
+ // .append('g')
302
+ // .classed(seriesClassName, true)
303
+ // .each((d, i, g) => {
304
+ // const axesSelection = d3.select(g[i])
305
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
306
+ // .data([i])
307
+ // .join(
308
+ // enter => {
309
+ // return enter
310
+ // .append('g')
311
+ // .classed(axesClassName, true)
312
+ // .attr('clip-path', `url(#${clipPathID})`)
313
+ // .each((d, i, g) => {
314
+ // const defsSelection = d3.select(g[i])
315
+ // .selectAll<SVGDefsElement, any>('defs')
316
+ // .data([i])
317
+ // .join('defs')
318
+
319
+ // const graphicGSelection = d3.select(g[i])
320
+ // .selectAll<SVGGElement, any>('g')
321
+ // .data([i])
322
+ // .join('g')
323
+ // .classed(graphicClassName, true)
324
+ // })
325
+ // },
326
+ // update => update,
327
+ // exit => exit.remove()
328
+ // )
329
+ // })
330
+ // },
331
+ // update => update,
332
+ // exit => exit.remove()
333
+ // )
334
+ // })
335
+ // )
336
+
337
+ // combineLatest({
338
+ // seriesSelection: seriesSelection$,
339
+ // gridContainerPosition: gridContainerPosition$
340
+ // }).pipe(
341
+ // takeUntil(destroy$),
342
+ // switchMap(async d => d)
343
+ // ).subscribe(data => {
344
+ // data.seriesSelection
345
+ // .transition()
346
+ // .attr('transform', (d, i) => {
347
+ // const translate = data.gridContainerPosition[i].translate
348
+ // const scale = data.gridContainerPosition[i].scale
349
+ // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
350
+ // })
351
+ // })
352
+
353
+
354
+ // const axesSelection$ = combineLatest({
355
+ // seriesSelection: seriesSelection$,
356
+ // gridAxesTransform: gridAxesTransform$
357
+ // }).pipe(
358
+ // takeUntil(destroy$),
359
+ // switchMap(async d => d),
360
+ // map(data => {
361
+ // return data.seriesSelection
362
+ // .select<SVGGElement>(`g.${axesClassName}`)
363
+ // .style('transform', data.gridAxesTransform.value)
364
+ // })
365
+ // )
366
+ // const defsSelection$ = axesSelection$.pipe(
367
+ // takeUntil(destroy$),
368
+ // map(axesSelection => {
369
+ // return axesSelection.select<SVGDefsElement>('defs')
370
+ // })
371
+ // )
372
+ // const graphicGSelection$ = combineLatest({
373
+ // axesSelection: axesSelection$,
374
+ // gridGraphicTransform: gridGraphicTransform$
375
+ // }).pipe(
376
+ // takeUntil(destroy$),
377
+ // switchMap(async d => d),
378
+ // map(data => {
379
+ // const graphicGSelection = data.axesSelection
380
+ // .select<SVGGElement>(`g.${graphicClassName}`)
381
+ // .attr('clip-path', (d) => `url(#${clipPathSeriesID}-${d[0] ? d[0].seriesLabel : ''})`)
382
+ // graphicGSelection
383
+ // .transition()
384
+ // .duration(50)
385
+ // .style('transform', data.gridGraphicTransform.value)
386
+ // return graphicGSelection
387
+ // })
388
+ // )
389
+
390
+ const {
391
+ seriesSelection$,
392
+ axesSelection$,
393
+ defsSelection$,
394
+ graphicGSelection$
395
+ } = gridSelectionsObservable({
396
+ selection,
397
+ pluginName,
398
+ clipPathID,
399
+ seriesLabels$,
400
+ gridContainerPosition$,
401
+ gridAxesTransform$,
402
+ gridGraphicTransform$
403
+ })
404
+
405
+ const linePath$: Observable<d3.Line<ComputedLayoutDatumGrid>> = new Observable(subscriber => {
406
+ const paramsSubscription = fullParams$
407
+ .pipe(
408
+ takeUntil(destroy$)
409
+ )
410
+ .subscribe(d => {
411
+ if (!d) return
412
+ const linePath = createLinePath(d.lineCurve)
413
+ subscriber.next(linePath)
414
+ })
415
+ return () => {
416
+ paramsSubscription.unsubscribe()
417
+ }
418
+ })
419
+
420
+ // // 顯示範圍內的series labels
421
+ // const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
422
+ // computedData$.pipe(
423
+ // takeUntil(destroy$),
424
+ // switchMap(async (d) => d),
425
+ // ).subscribe(data => {
426
+ // const labels = data[0] && data[0][0]
427
+ // ? data.map(d => d[0].seriesLabel)
428
+ // : []
429
+ // subscriber.next(labels)
430
+ // })
431
+ // })
432
+
433
+ // const axisSize$ = gridAxisSizeObservable({
434
+ // fullDataFormatter$,
435
+ // computedLayout$
436
+ // })
437
+
438
+ const transitionDuration$ = fullChartParams$
439
+ .pipe(
440
+ map(d => d.transitionDuration),
441
+ distinctUntilChanged()
442
+ )
443
+
444
+ const transitionEase$ = fullChartParams$
445
+ .pipe(
446
+ map(d => d.transitionEase),
447
+ distinctUntilChanged()
448
+ )
449
+
450
+ const clipPathSubscription = combineLatest({
451
+ defsSelection: defsSelection$,
452
+ seriesLabels: seriesLabels$,
453
+ axisSize: gridAxesSize$,
454
+ transitionDuration: transitionDuration$,
455
+ transitionEase: transitionEase$
456
+ }).pipe(
457
+ takeUntil(destroy$),
458
+ switchMap(async (d) => d),
459
+ ).subscribe(data => {
460
+ // 外層的遮罩
461
+ const clipPathBox = [{
462
+ id: clipPathID,
463
+ width: data.axisSize.width,
464
+ height: data.axisSize.height
465
+ }]
466
+ // 各別線條的遮罩(各別動畫)
467
+ const clipPathData = clipPathBox.concat(
468
+ data.seriesLabels.map(d => {
469
+ return {
470
+ id: `orbcharts__clipPath_${d}`,
471
+ width: data.axisSize.width,
472
+ height: data.axisSize.height
473
+ }
474
+ })
475
+ )
476
+ renderClipPath({
477
+ defsSelection: data.defsSelection,
478
+ clipPathData,
479
+ transitionDuration: data.transitionDuration,
480
+ transitionEase: data.transitionEase
481
+ })
482
+ })
483
+
484
+ // const SeriesDataMap$ = computedData$.pipe(
485
+ // map(d => makeGridSeriesDataMap(d))
486
+ // )
487
+
488
+ // const GroupDataMap$ = computedData$.pipe(
489
+ // map(d => makeGridGroupDataMap(d))
490
+ // )
491
+
492
+ const DataMap$ = computedData$.pipe(
493
+ map(d => {
494
+ const DataMap: Map<string, ComputedDatumGrid> = new Map()
495
+ d.flat().forEach(_d => DataMap.set(_d.id, _d))
496
+ return DataMap
497
+ })
498
+ )
499
+
500
+ // 取得事件座標的group資料
501
+ const gridGroupPositionFn$ = gridGroupPositionFnObservable({
502
+ fullDataFormatter$,
503
+ gridAxesSize$: gridAxesSize$,
504
+ computedData$: computedData$,
505
+ fullChartParams$: fullChartParams$,
506
+ gridContainerPosition$: allContainerPosition$,
507
+ layout$: layout$
508
+ })
509
+
510
+ const highlightTarget$ = fullChartParams$.pipe(
511
+ takeUntil(destroy$),
512
+ map(d => d.highlightTarget),
513
+ distinctUntilChanged()
514
+ )
515
+
516
+ const pathSelectionArr$ = combineLatest({
517
+ graphicGSelection: graphicGSelection$,
518
+ visibleComputedAxesData: visibleComputedAxesData$,
519
+ linePath: linePath$,
520
+ params: fullParams$,
521
+ }).pipe(
522
+ takeUntil(destroy$),
523
+ switchMap(async (d) => d),
524
+ map(data => {
525
+ // const updateGraphic = data.graphicGSelection
526
+ // .selectAll<SVGGElement, number>('g')
527
+ // .data(data.seriesLabels, (d, i) => d)
528
+ // const enterGraphic = updateGraphic.enter()
529
+ // .append('g')
530
+ // .classed(graphicClassName, true)
531
+ // updateGraphic.exit().remove()
532
+ // const graphicSelection = updateGraphic.merge(enterGraphic)
533
+ // .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
534
+ let pathSelectionArr: d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any>[] = []
535
+
536
+ // 繪圖
537
+ data.graphicGSelection.each((d, i, all) => {
538
+ // 將資料分段
539
+ const segmentData = makeSegmentData(data.visibleComputedAxesData[i] ?? [])
540
+
541
+ pathSelectionArr[i] = renderLines({
542
+ selection: d3.select(all[i]),
543
+ pathClassName,
544
+ linePath: data.linePath,
545
+ segmentData: segmentData,
546
+ params: data.params
547
+ })
548
+ })
549
+
550
+ return pathSelectionArr
551
+ })
552
+ )
553
+
554
+ combineLatest({
555
+ pathSelectionArr: pathSelectionArr$,
556
+ computedData: computedData$,
557
+ SeriesDataMap: SeriesDataMap$,
558
+ GroupDataMap: GroupDataMap$,
559
+ highlightTarget: highlightTarget$,
560
+ gridGroupPositionFn: gridGroupPositionFn$,
561
+ }).pipe(
562
+ takeUntil(destroy$),
563
+ switchMap(async (d) => d)
564
+ ).subscribe(data => {
565
+ data.pathSelectionArr.forEach(pathSelection => {
566
+ pathSelection
567
+ .on('mouseover', (event, datum) => {
568
+ // event.stopPropagation()
569
+
570
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
571
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
572
+ // console.log('groupIndex', groupIndex)
573
+ const groupData = data.GroupDataMap.get(groupLabel)!
574
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
575
+ const _datum = targetDatum ?? datum[0]
576
+
577
+ event$.next({
578
+ type: 'grid',
579
+ eventName: 'mouseover',
580
+ pluginName,
581
+ highlightTarget: data.highlightTarget,
582
+ datum: _datum,
583
+ gridIndex: _datum.gridIndex,
584
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
585
+ seriesIndex: _datum.seriesIndex,
586
+ seriesLabel: _datum.seriesLabel,
587
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
588
+ groupIndex: _datum.groupIndex,
589
+ groupLabel: _datum.groupLabel,
590
+ event,
591
+ data: data.computedData
592
+ })
593
+ })
594
+ .on('mousemove', (event, datum) => {
595
+ // event.stopPropagation()
596
+
597
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
598
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
599
+ const groupData = data.GroupDataMap.get(groupLabel)!
600
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
601
+ const _datum = targetDatum ?? datum[0]
602
+
603
+ event$.next({
604
+ type: 'grid',
605
+ eventName: 'mousemove',
606
+ pluginName,
607
+ highlightTarget: data.highlightTarget,
608
+ datum: _datum,
609
+ gridIndex: _datum.gridIndex,
610
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
611
+ seriesIndex: _datum.seriesIndex,
612
+ seriesLabel: _datum.seriesLabel,
613
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
614
+ groupIndex: _datum.groupIndex,
615
+ groupLabel: _datum.groupLabel,
616
+ event,
617
+ data: data.computedData
618
+ })
619
+ })
620
+ .on('mouseout', (event, datum) => {
621
+ // event.stopPropagation()
622
+
623
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
624
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
625
+ const groupData = data.GroupDataMap.get(groupLabel)!
626
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
627
+ const _datum = targetDatum ?? datum[0]
628
+
629
+ event$.next({
630
+ type: 'grid',
631
+ eventName: 'mouseout',
632
+ pluginName,
633
+ highlightTarget: data.highlightTarget,
634
+ datum: _datum,
635
+ gridIndex: _datum.gridIndex,
636
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
637
+ seriesIndex: _datum.seriesIndex,
638
+ seriesLabel: _datum.seriesLabel,
639
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
640
+ groupIndex: _datum.groupIndex,
641
+ groupLabel: _datum.groupLabel,
642
+ event,
643
+ data: data.computedData
644
+ })
645
+ })
646
+ .on('click', (event, datum) => {
647
+ // event.stopPropagation()
648
+
649
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
650
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
651
+ const groupData = data.GroupDataMap.get(groupLabel)!
652
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
653
+ const _datum = targetDatum ?? datum[0]
654
+
655
+ event$.next({
656
+ type: 'grid',
657
+ eventName: 'click',
658
+ pluginName,
659
+ highlightTarget: data.highlightTarget,
660
+ datum: _datum,
661
+ gridIndex: _datum.gridIndex,
662
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
663
+ seriesIndex: _datum.seriesIndex,
664
+ seriesLabel: _datum.seriesLabel,
665
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
666
+ groupIndex: _datum.groupIndex,
667
+ groupLabel: _datum.groupLabel,
668
+ event,
669
+ data: data.computedData
670
+ })
671
+ })
672
+ })
673
+ })
674
+
675
+ // const datumList$ = computedData$.pipe(
676
+ // takeUntil(destroy$),
677
+ // map(d => d.flat())
678
+ // )
679
+ // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
680
+ // const highlightSubscription = gridHighlight$.subscribe()
681
+
682
+ fullChartParams$.pipe(
683
+ takeUntil(destroy$),
684
+ filter(d => d.highlightTarget === 'series'),
685
+ switchMap(d => combineLatest({
686
+ graphicGSelection: graphicGSelection$,
687
+ gridHighlight: gridHighlight$,
688
+ DataMap: DataMap$,
689
+ fullChartParams: fullChartParams$
690
+ }).pipe(
691
+ takeUntil(destroy$),
692
+ switchMap(async d => d)
693
+ ))
694
+ ).subscribe(data => {
695
+ const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
696
+ highlightLines({
697
+ selection: data.graphicGSelection,
698
+ seriesLabel,
699
+ fullChartParams: data.fullChartParams
700
+ })
701
+ })
702
+
703
+ return () => {
704
+ destroy$.next(undefined)
705
+ // highlightSubscription.unsubscribe()
706
+ }
707
707
  }