@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

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 (80) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +10246 -9523
  2. package/dist/orbcharts-plugins-basic.umd.js +10 -10
  3. package/dist/src/base/BaseBarStack.d.ts +5 -1
  4. package/dist/src/base/BaseBars.d.ts +5 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
  6. package/dist/src/base/BaseDots.d.ts +33 -0
  7. package/dist/src/base/BaseGroupAxis.d.ts +35 -0
  8. package/dist/src/base/BaseLines.d.ts +3 -1
  9. package/dist/src/base/BaseValueAxis.d.ts +36 -0
  10. package/dist/src/grid/defaults.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +18 -4
  12. package/dist/src/grid/index.d.ts +1 -1
  13. package/dist/src/grid/plugins/Dots.d.ts +1 -3
  14. package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
  15. package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
  16. package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
  17. package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
  18. package/dist/src/grid/types.d.ts +1 -1
  19. package/dist/src/multiGrid/defaults.d.ts +9 -2
  20. package/dist/src/multiGrid/index.d.ts +8 -1
  21. package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
  22. package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
  23. package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
  24. package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
  25. package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
  26. package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
  27. package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
  28. package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
  29. package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
  30. package/dist/src/multiGrid/types.d.ts +31 -0
  31. package/package.json +2 -2
  32. package/src/base/BaseBarStack.ts +375 -198
  33. package/src/base/BaseBars.ts +297 -191
  34. package/src/base/BaseBarsTriangle.ts +344 -229
  35. package/src/base/BaseDots.ts +634 -0
  36. package/src/base/BaseGroupAxis.ts +497 -0
  37. package/src/base/BaseLines.ts +180 -50
  38. package/src/base/BaseValueAxis.ts +475 -0
  39. package/src/grid/defaults.ts +3 -3
  40. package/src/grid/gridObservables.ts +147 -14
  41. package/src/grid/index.ts +1 -1
  42. package/src/grid/plugins/BarStack.ts +4 -0
  43. package/src/grid/plugins/Bars.ts +4 -0
  44. package/src/grid/plugins/BarsTriangle.ts +4 -0
  45. package/src/grid/plugins/Dots.ts +19 -410
  46. package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
  47. package/src/grid/plugins/GroupAxis.ts +16 -348
  48. package/src/grid/plugins/Lines.ts +2 -0
  49. package/src/grid/plugins/ScalingArea.ts +9 -6
  50. package/src/grid/plugins/ValueAxis.ts +13 -337
  51. package/src/grid/plugins/ValueStackAxis.ts +35 -336
  52. package/src/grid/types.ts +1 -1
  53. package/src/index.ts +1 -0
  54. package/src/multiGrid/defaults.ts +120 -14
  55. package/src/multiGrid/index.ts +9 -2
  56. package/src/multiGrid/multiGridObservables.ts +279 -0
  57. package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
  58. package/src/multiGrid/plugins/MultiBars.ts +59 -0
  59. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
  60. package/src/multiGrid/plugins/MultiDots.ts +58 -0
  61. package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
  62. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
  63. package/src/multiGrid/plugins/MultiLines.ts +58 -0
  64. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
  65. package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
  66. package/src/multiGrid/types.ts +39 -0
  67. package/tsconfig.dev.json +17 -0
  68. package/tsconfig.prod.json +14 -0
  69. package/vite.config.js +5 -0
  70. package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
  71. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
  72. package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
  73. package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
  74. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  75. package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
  76. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  77. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  78. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  79. /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
  80. /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
@@ -0,0 +1,634 @@
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
+ EventGrid,
15
+ ChartParams,
16
+ ContainerPosition,
17
+ Layout,
18
+ TransformData,
19
+ ColorType } from '@orbcharts/core'
20
+ import { getDatumColor, getClassName, getUniID } from '../utils/orbchartsUtils'
21
+ import { gridSelectionsObservable } from '../grid/gridObservables'
22
+
23
+ export interface BaseDotsParams {
24
+ radius: number
25
+ fillColorType: ColorType
26
+ strokeColorType: ColorType
27
+ strokeWidth: number
28
+ onlyShowHighlighted: boolean
29
+ }
30
+
31
+ interface BaseDotsContext {
32
+ selection: d3.Selection<any, unknown, any, unknown>
33
+ computedData$: Observable<ComputedDataGrid>
34
+ visibleComputedData$: Observable<ComputedDatumGrid[][]>
35
+ existedSeriesLabels$: Observable<string[]>
36
+ SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
+ GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
38
+ fullParams$: Observable<BaseDotsParams>
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<string[]>
48
+ gridContainer$: Observable<ContainerPosition[]>
49
+ event$: Subject<EventGrid>
50
+ }
51
+
52
+
53
+ type ClipPathDatum = {
54
+ id: string;
55
+ // x: number;
56
+ // y: number;
57
+ width: number;
58
+ height: number;
59
+ }
60
+
61
+ // const pluginName = 'Dots'
62
+ // const circleGClassName = getClassName(pluginName, 'circleG')
63
+ // const circleClassName = getClassName(pluginName, 'circle')
64
+
65
+ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, data, fullParams, fullChartParams, graphicReverseScale }: {
66
+ graphicGSelection: d3.Selection<SVGGElement, any, any, any>
67
+ circleGClassName: string
68
+ circleClassName: string
69
+ data: ComputedDatumGrid[][]
70
+ fullParams: BaseDotsParams
71
+ fullChartParams: ChartParams
72
+ graphicReverseScale: [number, number][]
73
+ }) {
74
+ const createEnterDuration = (enter: d3.Selection<d3.EnterElement, ComputedDatumGrid, SVGGElement, any>) => {
75
+ const enterSize = enter.size()
76
+ const eachDuration = fullChartParams.transitionDuration / enterSize
77
+ return eachDuration
78
+ }
79
+ // enterDuration
80
+ let enterDuration = 0
81
+
82
+ graphicGSelection
83
+ .each((seriesData, seriesIndex, g) => {
84
+ d3.select(g[seriesIndex])
85
+ .selectAll<SVGGElement, ComputedDatumGrid>('g')
86
+ .data(data[seriesIndex], d => d.id)
87
+ .join(
88
+ enter => {
89
+ // enterDuration
90
+ enterDuration = createEnterDuration(enter)
91
+
92
+ return enter
93
+ .append('g')
94
+ .classed(circleGClassName, true)
95
+ },
96
+ update => update,
97
+ exit => exit.remove()
98
+ )
99
+ .attr('transform', d => `translate(${d.axisX}, ${d.axisY})`)
100
+ .each((d, i, g) => {
101
+ const circle = d3.select(g[i])
102
+ .selectAll('circle')
103
+ .data([d])
104
+ .join(
105
+ enter => {
106
+ return enter
107
+ .append('circle')
108
+ .style('cursor', 'pointer')
109
+ .style('vector-effect', 'non-scaling-stroke')
110
+ .classed(circleClassName, true)
111
+ .attr('opacity', 0)
112
+ .transition()
113
+ .delay((_d, _i) => {
114
+ return i * enterDuration
115
+ })
116
+ .attr('opacity', 1)
117
+ },
118
+ update => {
119
+ return update
120
+ .transition()
121
+ .duration(50)
122
+ // .attr('cx', d => d.axisX)
123
+ // .attr('cy', d => d.axisY)
124
+ .attr('opacity', 1)
125
+ },
126
+ exit => exit.remove()
127
+ )
128
+ .attr('r', fullParams.radius)
129
+ .attr('fill', (d, i) => getDatumColor({ datum: d, colorType: fullParams.fillColorType, fullChartParams }))
130
+ .attr('stroke', (d, i) => getDatumColor({ datum: d, colorType: fullParams.strokeColorType, fullChartParams }))
131
+ .attr('stroke-width', fullParams.strokeWidth)
132
+ .attr('transform', `scale(${graphicReverseScale[seriesIndex][0] ?? 1}, ${graphicReverseScale[seriesIndex][1] ?? 1})`)
133
+ })
134
+ })
135
+
136
+ // const dots = graphicGSelection
137
+ // .selectAll<SVGGElement, ComputedDatumGrid>('g')
138
+ // .data(data, d => d.id)
139
+ // .join(
140
+ // enter => {
141
+ // // enterDuration
142
+ // enterDuration = createEnterDuration(enter)
143
+
144
+ // return enter
145
+ // .append('g')
146
+ // .classed(circleGClassName, true)
147
+ // },
148
+ // update => update,
149
+ // exit => exit.remove()
150
+ // )
151
+ // .attr('transform', d => `translate(${d.axisX}, ${d.axisY})`)
152
+ // .each((d, i, g) => {
153
+ // const circle = d3.select(g[i])
154
+ // .selectAll('circle')
155
+ // .data([d])
156
+ // .join(
157
+ // enter => {
158
+ // return enter
159
+ // .append('circle')
160
+ // .style('cursor', 'pointer')
161
+ // .style('vector-effect', 'non-scaling-stroke')
162
+ // .classed(circleClassName, true)
163
+ // .attr('opacity', 0)
164
+ // .transition()
165
+ // .delay((_d, _i) => {
166
+ // return i * enterDuration
167
+ // })
168
+ // .attr('opacity', 1)
169
+ // },
170
+ // update => {
171
+ // return update
172
+ // .transition()
173
+ // .duration(50)
174
+ // // .attr('cx', d => d.axisX)
175
+ // // .attr('cy', d => d.axisY)
176
+ // .attr('opacity', 1)
177
+ // },
178
+ // exit => exit.remove()
179
+ // )
180
+ // .attr('r', fullParams.radius)
181
+ // .attr('fill', (d, i) => getDatumColor({ datum: d, colorType: fullParams.fillColorType, fullChartParams }))
182
+ // .attr('stroke', (d, i) => getDatumColor({ datum: d, colorType: fullParams.strokeColorType, fullChartParams }))
183
+ // .attr('stroke-width', fullParams.strokeWidth)
184
+ // .attr('transform', `scale(${graphicReverseScale[0]}, ${graphicReverseScale[1]})`)
185
+ // })
186
+
187
+ const graphicCircleSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown> = graphicGSelection.selectAll(`circle.${circleClassName}`)
188
+
189
+ return graphicCircleSelection
190
+ }
191
+
192
+
193
+ function highlightDots ({ selection, ids, onlyShowHighlighted, fullChartParams }: {
194
+ selection: d3.Selection<SVGGElement, ComputedDatumGrid, any, any>
195
+ ids: string[]
196
+ onlyShowHighlighted: boolean
197
+ fullChartParams: ChartParams
198
+ }) {
199
+ selection.interrupt('highlight')
200
+ if (!ids.length) {
201
+ // remove highlight
202
+ selection
203
+ .transition('highlight')
204
+ .duration(200)
205
+ .style('opacity', onlyShowHighlighted === true ? 0 : 1)
206
+ return
207
+ }
208
+
209
+ selection
210
+ .each((d, i, n) => {
211
+ if (ids.includes(d.id)) {
212
+ d3.select(n[i])
213
+ .style('opacity', 1)
214
+ .transition('highlight')
215
+ .duration(200)
216
+ } else {
217
+ d3.select(n[i])
218
+ .style('opacity', onlyShowHighlighted === true ? 0 : fullChartParams.styles.unhighlightedOpacity)
219
+ .transition('highlight')
220
+ .duration(200)
221
+ }
222
+ })
223
+ }
224
+
225
+ function renderClipPath ({ defsSelection, clipPathData }: {
226
+ defsSelection: d3.Selection<SVGDefsElement, any, any, any>
227
+ clipPathData: ClipPathDatum[]
228
+ }) {
229
+ const clipPath = defsSelection
230
+ .selectAll<SVGClipPathElement, Layout>('clipPath')
231
+ .data(clipPathData)
232
+ .join(
233
+ enter => {
234
+ return enter
235
+ .append('clipPath')
236
+ },
237
+ update => update,
238
+ exit => exit.remove()
239
+ )
240
+ .attr('id', d => d.id)
241
+ .each((d, i, g) => {
242
+ const rect = d3.select(g[i])
243
+ .selectAll<SVGRectElement, typeof d>('rect')
244
+ .data([d])
245
+ .join('rect')
246
+ .attr('x', 0)
247
+ .attr('y', 0)
248
+ .attr('width', _d => _d.width)
249
+ .attr('height', _d => _d.height)
250
+ })
251
+
252
+ }
253
+
254
+
255
+
256
+ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string, {
257
+ selection,
258
+ computedData$,
259
+ visibleComputedData$,
260
+ existedSeriesLabels$,
261
+ SeriesDataMap$,
262
+ GroupDataMap$,
263
+ fullParams$,
264
+ fullChartParams$,
265
+ gridAxesTransform$,
266
+ gridGraphicTransform$,
267
+ gridGraphicReverseScale$,
268
+ gridAxesSize$,
269
+ gridHighlight$,
270
+ gridContainer$,
271
+ event$
272
+ }) => {
273
+
274
+ const destroy$ = new Subject()
275
+
276
+ const clipPathID = getUniID(pluginName, 'clipPath-box')
277
+ const circleGClassName = getClassName(pluginName, 'circleG')
278
+ const circleClassName = getClassName(pluginName, 'circle')
279
+
280
+ // const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
281
+ // .append('g')
282
+ // .attr('clip-path', `url(#${clipPathID})`)
283
+ // const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
284
+ // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
285
+ const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
286
+
287
+ // gridAxesTransform$
288
+ // .pipe(
289
+ // takeUntil(destroy$),
290
+ // map(d => d.value),
291
+ // distinctUntilChanged()
292
+ // ).subscribe(d => {
293
+ // axisSelection
294
+ // .style('transform', d)
295
+ // })
296
+
297
+ // gridGraphicTransform$
298
+ // .pipe(
299
+ // takeUntil(destroy$),
300
+ // switchMap(async d => d.value),
301
+ // distinctUntilChanged()
302
+ // ).subscribe(d => {
303
+ // dataAreaSelection
304
+ // .transition()
305
+ // .duration(50)
306
+ // .style('transform', d)
307
+ // })
308
+
309
+ // const seriesSelection$ = computedData$.pipe(
310
+ // takeUntil(destroy$),
311
+ // distinctUntilChanged((a, b) => {
312
+ // // 只有當series的數量改變時,才重新計算
313
+ // return a.length === b.length
314
+ // }),
315
+ // map((computedData, i) => {
316
+ // return selection
317
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
318
+ // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
319
+ // .join(
320
+ // enter => {
321
+ // return enter
322
+ // .append('g')
323
+ // .classed(seriesClassName, true)
324
+ // .each((d, i, g) => {
325
+ // const axesSelection = d3.select(g[i])
326
+ // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
327
+ // .data([i])
328
+ // .join(
329
+ // enter => {
330
+ // return enter
331
+ // .append('g')
332
+ // .classed(axesClassName, true)
333
+ // .attr('clip-path', `url(#${clipPathID})`)
334
+ // .each((d, i, g) => {
335
+ // const defsSelection = d3.select(g[i])
336
+ // .selectAll<SVGDefsElement, any>('defs')
337
+ // .data([i])
338
+ // .join('defs')
339
+
340
+ // const graphicGSelection = d3.select(g[i])
341
+ // .selectAll<SVGGElement, any>('g')
342
+ // .data([i])
343
+ // .join('g')
344
+ // .classed(graphicClassName, true)
345
+ // })
346
+ // },
347
+ // update => update,
348
+ // exit => exit.remove()
349
+ // )
350
+ // })
351
+ // },
352
+ // update => update,
353
+ // exit => exit.remove()
354
+ // )
355
+ // })
356
+ // )
357
+
358
+ // combineLatest({
359
+ // seriesSelection: seriesSelection$,
360
+ // gridContainer: gridContainer$
361
+ // }).pipe(
362
+ // takeUntil(destroy$),
363
+ // switchMap(async d => d)
364
+ // ).subscribe(data => {
365
+ // data.seriesSelection
366
+ // .transition()
367
+ // .attr('transform', (d, i) => {
368
+ // const translate = data.gridContainer[i].translate
369
+ // const scale = data.gridContainer[i].scale
370
+ // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
371
+ // })
372
+ // })
373
+
374
+
375
+ // const axesSelection$ = combineLatest({
376
+ // seriesSelection: seriesSelection$,
377
+ // gridAxesTransform: gridAxesTransform$
378
+ // }).pipe(
379
+ // takeUntil(destroy$),
380
+ // switchMap(async d => d),
381
+ // map(data => {
382
+ // return data.seriesSelection
383
+ // .select<SVGGElement>(`g.${axesClassName}`)
384
+ // .style('transform', data.gridAxesTransform.value)
385
+ // })
386
+ // )
387
+ // const defsSelection$ = axesSelection$.pipe(
388
+ // takeUntil(destroy$),
389
+ // map(axesSelection => {
390
+ // return axesSelection.select<SVGDefsElement>('defs')
391
+ // })
392
+ // )
393
+ // const graphicGSelection$ = combineLatest({
394
+ // axesSelection: axesSelection$,
395
+ // gridGraphicTransform: gridGraphicTransform$
396
+ // }).pipe(
397
+ // takeUntil(destroy$),
398
+ // switchMap(async d => d),
399
+ // map(data => {
400
+ // const graphicGSelection = data.axesSelection
401
+ // .select<SVGGElement>(`g.${graphicClassName}`)
402
+ // graphicGSelection
403
+ // .transition()
404
+ // .duration(50)
405
+ // .style('transform', data.gridGraphicTransform.value)
406
+ // return graphicGSelection
407
+ // })
408
+ // )
409
+
410
+ const {
411
+ seriesSelection$,
412
+ axesSelection$,
413
+ defsSelection$,
414
+ graphicGSelection$
415
+ } = gridSelectionsObservable({
416
+ selection,
417
+ pluginName,
418
+ clipPathID,
419
+ existedSeriesLabels$,
420
+ gridContainer$,
421
+ gridAxesTransform$,
422
+ gridGraphicTransform$
423
+ })
424
+
425
+ const graphicReverseScale$: Observable<[number, number][]> = combineLatest({
426
+ // gridGraphicTransform: gridGraphicTransform$,
427
+ // gridContainer: gridContainer$,
428
+ // gridAxesTransform: gridAxesTransform$
429
+ computedData: computedData$,
430
+ gridGraphicReverseScale: gridGraphicReverseScale$
431
+ }).pipe(
432
+ takeUntil(destroy$),
433
+ switchMap(async data => data),
434
+ map(data => {
435
+ return data.computedData.map((series, seriesIndex) => {
436
+ return data.gridGraphicReverseScale[seriesIndex]
437
+ })
438
+ })
439
+ )
440
+
441
+ const clipPathSubscription = combineLatest({
442
+ defsSelection: defsSelection$,
443
+ gridAxesSize: gridAxesSize$,
444
+ }).pipe(
445
+ takeUntil(destroy$),
446
+ switchMap(async (d) => d),
447
+ ).subscribe(data => {
448
+ // 外層的遮罩
449
+ const clipPathData = [{
450
+ id: clipPathID,
451
+ width: data.gridAxesSize.width,
452
+ height: data.gridAxesSize.height
453
+ }]
454
+ renderClipPath({
455
+ defsSelection: data.defsSelection,
456
+ clipPathData,
457
+ })
458
+ })
459
+
460
+ // const visibleComputedData$ = computedData$.pipe(
461
+ // map(computedData => {
462
+ // return computedData
463
+ // .map(d => {
464
+ // return d.filter(_d => _d.visible == true)
465
+ // })
466
+ // })
467
+ // )
468
+
469
+ // const SeriesDataMap$ = visibleComputedData$.pipe(
470
+ // map(d => makeGridSeriesDataMap(d))
471
+ // )
472
+
473
+ // const GroupDataMap$ = visibleComputedData$.pipe(
474
+ // map(d => makeGridGroupDataMap(d))
475
+ // )
476
+
477
+ // const DataMap$ = computedData$.pipe(
478
+ // map(d => {
479
+ // const DataMap: Map<string, ComputedDatumGrid> = new Map()
480
+ // d.flat().forEach(_d => DataMap.set(_d.id, _d))
481
+ // return DataMap
482
+ // })
483
+ // )
484
+
485
+ const highlightTarget$ = fullChartParams$.pipe(
486
+ takeUntil(destroy$),
487
+ map(d => d.highlightTarget),
488
+ distinctUntilChanged()
489
+ )
490
+
491
+ combineLatest({
492
+ graphicGSelection: graphicGSelection$,
493
+ computedData: computedData$,
494
+ visibleComputedData: visibleComputedData$,
495
+ SeriesDataMap: SeriesDataMap$,
496
+ GroupDataMap: GroupDataMap$,
497
+ graphicReverseScale: graphicReverseScale$,
498
+ fullChartParams: fullChartParams$,
499
+ fullParams: fullParams$,
500
+ highlightTarget: highlightTarget$
501
+ }).pipe(
502
+ takeUntil(destroy$),
503
+ switchMap(async (d) => d),
504
+ ).subscribe(data => {
505
+
506
+ const graphicSelection = renderDots({
507
+ graphicGSelection: data.graphicGSelection,
508
+ circleGClassName,
509
+ circleClassName,
510
+ data: data.visibleComputedData,
511
+ fullParams: data.fullParams,
512
+ fullChartParams: data.fullChartParams,
513
+ graphicReverseScale: data.graphicReverseScale
514
+ })
515
+
516
+ graphicSelection
517
+ .on('mouseover', (event, datum) => {
518
+ event.stopPropagation()
519
+
520
+ event$.next({
521
+ type: 'grid',
522
+ eventName: 'mouseover',
523
+ pluginName,
524
+ highlightTarget: data.highlightTarget,
525
+ datum,
526
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
527
+ seriesIndex: datum.seriesIndex,
528
+ seriesLabel: datum.seriesLabel,
529
+ groups: data.GroupDataMap.get(datum.groupLabel)!,
530
+ groupIndex: datum.groupIndex,
531
+ groupLabel: datum.groupLabel,
532
+ event,
533
+ data: data.computedData
534
+ })
535
+ })
536
+ .on('mousemove', (event, datum) => {
537
+ event.stopPropagation()
538
+
539
+ event$.next({
540
+ type: 'grid',
541
+ eventName: 'mousemove',
542
+ pluginName,
543
+ highlightTarget: data.highlightTarget,
544
+ data: data.computedData,
545
+ datum,
546
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
547
+ seriesIndex: datum.seriesIndex,
548
+ seriesLabel: datum.seriesLabel,
549
+ groups: data.GroupDataMap.get(datum.groupLabel)!,
550
+ groupIndex: datum.groupIndex,
551
+ groupLabel: datum.groupLabel,
552
+ event
553
+ })
554
+ })
555
+ .on('mouseout', (event, datum) => {
556
+ event.stopPropagation()
557
+
558
+ event$.next({
559
+ type: 'grid',
560
+ eventName: 'mouseout',
561
+ pluginName,
562
+ highlightTarget: data.highlightTarget,
563
+ datum,
564
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
565
+ seriesIndex: datum.seriesIndex,
566
+ seriesLabel: datum.seriesLabel,
567
+ groups: data.GroupDataMap.get(datum.groupLabel)!,
568
+ groupIndex: datum.groupIndex,
569
+ groupLabel: datum.groupLabel,
570
+ event,
571
+ data: data.computedData
572
+ })
573
+ })
574
+ .on('click', (event, datum) => {
575
+ event.stopPropagation()
576
+
577
+ event$.next({
578
+ type: 'grid',
579
+ eventName: 'click',
580
+ pluginName,
581
+ highlightTarget: data.highlightTarget,
582
+ datum,
583
+ series: data.SeriesDataMap.get(datum.seriesLabel)!,
584
+ seriesIndex: datum.seriesIndex,
585
+ seriesLabel: datum.seriesLabel,
586
+ groups: data.GroupDataMap.get(datum.groupLabel)!,
587
+ groupIndex: datum.groupIndex,
588
+ groupLabel: datum.groupLabel,
589
+ event,
590
+ data: data.computedData
591
+ })
592
+ })
593
+
594
+ graphicSelection$.next(graphicSelection)
595
+
596
+ })
597
+
598
+ // const datumList$ = computedData$.pipe(
599
+ // takeUntil(destroy$),
600
+ // map(d => d.flat())
601
+ // )
602
+ // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
603
+ const highlightSubscription = gridHighlight$.subscribe()
604
+ const onlyShowHighlighted$ = fullParams$.pipe(
605
+ takeUntil(destroy$),
606
+ map(d => d.onlyShowHighlighted),
607
+ distinctUntilChanged()
608
+ )
609
+
610
+ fullChartParams$.pipe(
611
+ takeUntil(destroy$),
612
+ switchMap(d => combineLatest({
613
+ graphicSelection: graphicSelection$,
614
+ highlight: gridHighlight$,
615
+ onlyShowHighlighted: onlyShowHighlighted$,
616
+ fullChartParams: fullChartParams$
617
+ }).pipe(
618
+ takeUntil(destroy$),
619
+ switchMap(async d => d)
620
+ ))
621
+ ).subscribe(data => {
622
+ highlightDots({
623
+ selection: data.graphicSelection,
624
+ ids: data.highlight,
625
+ onlyShowHighlighted: data.onlyShowHighlighted,
626
+ fullChartParams: data.fullChartParams
627
+ })
628
+ })
629
+
630
+ return () => {
631
+ destroy$.next(undefined)
632
+ highlightSubscription.unsubscribe()
633
+ }
634
+ }