@orbcharts/plugins-basic 3.0.0-alpha.29 → 3.0.0-alpha.31

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 (45) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +15826 -15642
  2. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  3. package/dist/src/base/BaseBarStack.d.ts +29 -0
  4. package/dist/src/base/BaseBars.d.ts +29 -0
  5. package/dist/src/base/BaseBarsTriangle.d.ts +28 -0
  6. package/dist/src/base/BaseLegend.d.ts +12 -3
  7. package/dist/src/base/BaseLines.d.ts +27 -0
  8. package/dist/src/base/types.d.ts +2 -2
  9. package/dist/src/grid/plugins/BarStack.d.ts +1 -3
  10. package/dist/src/grid/plugins/Bars.d.ts +1 -3
  11. package/dist/src/grid/plugins/BarsTriangle.d.ts +1 -3
  12. package/dist/src/grid/plugins/Lines.d.ts +1 -3
  13. package/dist/src/index.d.ts +1 -0
  14. package/dist/src/multiGrid/defaults.d.ts +3 -0
  15. package/dist/src/multiGrid/index.d.ts +3 -0
  16. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +1 -0
  17. package/dist/src/multiGrid/types.d.ts +7 -0
  18. package/package.json +2 -2
  19. package/src/base/BaseBarStack.ts +699 -0
  20. package/src/base/BaseBars.ts +639 -0
  21. package/src/base/BaseBarsTriangle.ts +626 -0
  22. package/src/base/BaseLegend.ts +9 -7
  23. package/src/base/BaseLines.ts +566 -0
  24. package/src/base/types.ts +2 -2
  25. package/src/grid/plugins/BarStack.ts +16 -643
  26. package/src/grid/plugins/Bars.ts +15 -586
  27. package/src/grid/plugins/BarsTriangle.ts +14 -577
  28. package/src/grid/plugins/Lines.ts +14 -508
  29. package/src/index.ts +1 -0
  30. package/src/multiGrid/defaults.ts +14 -0
  31. package/src/multiGrid/index.ts +3 -0
  32. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  33. package/src/multiGrid/plugins/BarsAndLines.ts +110 -0
  34. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  35. package/src/multiGrid/plugins/DivergingValueAxes.ts +0 -0
  36. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  37. package/src/multiGrid/plugins/MultiGridLegend.ts +0 -0
  38. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  39. package/src/multiGrid/types.ts +8 -0
  40. /package/dist/src/multiGrid/plugins/{DivergingAxes.d.ts → BarStackAndLines.d.ts} +0 -0
  41. /package/dist/src/multiGrid/plugins/{TwoScaleAxes.d.ts → BarsTriangleAndLines.d.ts} +0 -0
  42. /package/dist/src/multiGrid/plugins/{TwoScales.d.ts → DivergingValueAxes.d.ts} +0 -0
  43. /package/{src/multiGrid/plugins/DivergingAxes.ts → dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts} +0 -0
  44. /package/{src/multiGrid/plugins/TwoScaleAxes.ts → dist/src/multiGrid/plugins/MultiGridLegend.d.ts} +0 -0
  45. /package/{src/multiGrid/plugins/TwoScales.ts → dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts} +0 -0
@@ -0,0 +1,566 @@
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
+ DataFormatterGrid,
16
+ EventGrid,
17
+ ChartParams,
18
+ Layout,
19
+ TransformData } from '@orbcharts/core'
20
+ import { getD3TransitionEase } from '../utils/d3Utils'
21
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
22
+ import { gridGroupPositionFnObservable } from '../grid/gridObservables'
23
+
24
+ export interface BaseLinesParams {
25
+ // lineType: LineType
26
+ lineCurve: string
27
+ lineWidth: number
28
+ // labelFn: (d: ComputedDatumSeries) => string
29
+ // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
30
+ // labelStyleFn: (d: ComputedDatumSeries) => string
31
+ // labelFontSizeFn: (d: ComputedDatumSeries) => number
32
+ // labelColorFn: (d: ComputedDatumSeries) => string
33
+ // labelPadding: number
34
+ }
35
+
36
+ interface BaseLinesContext {
37
+ selection: d3.Selection<any, unknown, any, unknown>
38
+ computedData$: Observable<ComputedDataGrid>
39
+ SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
40
+ GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
41
+ fullDataFormatter$: Observable<DataFormatterGrid>
42
+ fullParams$: Observable<BaseLinesParams>
43
+ fullChartParams$: Observable<ChartParams>
44
+ gridAxesTransform$: Observable<TransformData>
45
+ gridGraphicTransform$: Observable<TransformData>
46
+ gridAxesSize$: Observable<{
47
+ width: number;
48
+ height: number;
49
+ }>
50
+ gridHighlight$: Observable<string[]>
51
+ event$: Subject<EventGrid>
52
+ }
53
+
54
+
55
+ type ClipPathDatum = {
56
+ id: string;
57
+ // x: number;
58
+ // y: number;
59
+ width: number;
60
+ height: number;
61
+ }
62
+
63
+ const pluginName = 'Lines'
64
+ const gClassName = getClassName(pluginName, 'g')
65
+ const pathClassName = getClassName(pluginName, 'path')
66
+
67
+ function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedDatumGrid> {
68
+ return d3.line<ComputedDatumGrid>()
69
+ .x((d) => d.axisX)
70
+ .y((d) => d.axisY)
71
+ .curve((d3 as any)[lineCurve])
72
+ }
73
+
74
+ // function renderGraphicG ({ selection }) {
75
+
76
+ // }
77
+
78
+ // 依無值的資料分段
79
+ function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
80
+ let segmentData: ComputedDatumGrid[][] = [[]]
81
+
82
+ let currentIndex = 0
83
+ for (let i in data) {
84
+ if (data[i].visible == false || data[i].value === undefined || data[i].value === null) {
85
+ // 換下一段的 index
86
+ if (segmentData[currentIndex].length) {
87
+ currentIndex ++
88
+ segmentData[currentIndex] = []
89
+ }
90
+ continue
91
+ }
92
+ segmentData[currentIndex].push(data[i])
93
+ }
94
+
95
+ return segmentData
96
+ }
97
+
98
+
99
+ function renderLine ({ selection, segmentData, linePath, params }: {
100
+ selection: d3.Selection<SVGGElement, unknown, any, unknown>
101
+ segmentData: ComputedDatumGrid[][]
102
+ linePath: d3.Line<ComputedDatumGrid>
103
+ params: BaseLinesParams
104
+ }): d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> {
105
+ // if (!data[0]) {
106
+ // return undefined
107
+ // }
108
+
109
+ const lines = selection
110
+ .selectAll<SVGPathElement, ComputedDatumGrid[]>('path')
111
+ .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
112
+ .join(
113
+ enter => {
114
+ return enter
115
+ .append<SVGPathElement>('path')
116
+ .classed(pathClassName, true)
117
+ .attr("fill","none")
118
+ .attr('pointer-events', 'visibleStroke') // 只對線條產生事件
119
+ .style('vector-effect', 'non-scaling-stroke')
120
+ .style('cursor', 'pointer')
121
+ },
122
+ update => update,
123
+ exit => exit.remove()
124
+ )
125
+ .attr("stroke-width", params.lineWidth)
126
+ .attr("stroke", (d, i) => d[0] && d[0].color)
127
+ .attr("d", (d) => {
128
+ return linePath(d)
129
+ })
130
+
131
+ return lines
132
+ }
133
+
134
+ function highlightLine ({ selection, seriesLabel, fullChartParams }: {
135
+ selection: d3.Selection<any, string, any, any>
136
+ seriesLabel: string | null
137
+ fullChartParams: ChartParams
138
+ }) {
139
+ selection.interrupt('highlight')
140
+ if (!seriesLabel) {
141
+ // remove highlight
142
+ selection
143
+ .transition('highlight')
144
+ .duration(200)
145
+ .style('opacity', 1)
146
+ return
147
+ }
148
+
149
+ selection
150
+ .each((d, i, n) => {
151
+ if (d === seriesLabel) {
152
+ d3.select(n[i])
153
+ .style('opacity', 1)
154
+ } else {
155
+ d3.select(n[i])
156
+ .style('opacity', fullChartParams.styles.unhighlightedOpacity)
157
+ }
158
+ })
159
+ }
160
+
161
+ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, transitionEase }: {
162
+ defsSelection: d3.Selection<SVGDefsElement, any, any, any>
163
+ clipPathData: ClipPathDatum[]
164
+ transitionDuration: number
165
+ transitionEase: string
166
+ }) {
167
+ const clipPath = defsSelection
168
+ .selectAll<SVGClipPathElement, Layout>('clipPath')
169
+ .data(clipPathData)
170
+ .join(
171
+ enter => {
172
+ return enter
173
+ .append('clipPath')
174
+ },
175
+ update => update,
176
+ exit => exit.remove()
177
+ )
178
+ .attr('id', d => d.id)
179
+ .each((d, i, g) => {
180
+ const rect = d3.select(g[i])
181
+ .selectAll<SVGRectElement, typeof d>('rect')
182
+ .data([d])
183
+ .join(
184
+ enter => {
185
+ const enterSelection = enter
186
+ .append('rect')
187
+ enterSelection
188
+ .transition()
189
+ .duration(transitionDuration)
190
+ .ease(getD3TransitionEase(transitionEase))
191
+ // .delay(100) // @Q@ 不知為何如果沒加 delay位置會有點跑掉
192
+ .tween('tween', (_d, _i, _g) => {
193
+ return (t) => {
194
+ const transitionWidth = _d.width * t
195
+
196
+ enterSelection
197
+ .attr('x', 0)
198
+ .attr('y', 0)
199
+ .attr('width', _d => transitionWidth)
200
+ .attr('height', _d => _d.height)
201
+ }
202
+ })
203
+ return enterSelection
204
+ },
205
+ update => {
206
+ return update
207
+ .attr('x', 0)
208
+ .attr('y', 0)
209
+ .attr('width', _d => _d.width)
210
+ .attr('height', _d => _d.height)
211
+ },
212
+ exit => exit.remove()
213
+ )
214
+ })
215
+
216
+ }
217
+
218
+ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
219
+ selection,
220
+ computedData$,
221
+ SeriesDataMap$,
222
+ GroupDataMap$,
223
+ fullParams$,
224
+ fullDataFormatter$,
225
+ fullChartParams$,
226
+ gridAxesTransform$,
227
+ gridGraphicTransform$,
228
+ gridAxesSize$,
229
+ gridHighlight$,
230
+ event$
231
+ }) => {
232
+
233
+ const destroy$ = new Subject()
234
+
235
+ const clipPathID = getUniID(pluginName, 'clipPath-box')
236
+
237
+ const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
238
+ .append('g')
239
+ .attr('clip-path', `url(#${clipPathID})`)
240
+ const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
241
+ const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
242
+ const graphicSelection$: Subject<d3.Selection<SVGGElement, string, any, any>> = new Subject()
243
+ // let pathSelection: d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> | undefined
244
+ // .style('transform', 'translate(0px, 0px) scale(1)')
245
+
246
+ gridAxesTransform$
247
+ .pipe(
248
+ takeUntil(destroy$),
249
+ map(d => d.value),
250
+ distinctUntilChanged()
251
+ ).subscribe(d => {
252
+ axisSelection
253
+ .style('transform', d)
254
+ })
255
+
256
+ gridGraphicTransform$
257
+ .pipe(
258
+ takeUntil(destroy$),
259
+ map(d => d.value),
260
+ distinctUntilChanged()
261
+ ).subscribe(d => {
262
+ graphicGSelection
263
+ .transition()
264
+ .duration(50)
265
+ .style('transform', d)
266
+ })
267
+
268
+ const linePath$: Observable<d3.Line<ComputedDatumGrid>> = new Observable(subscriber => {
269
+ const paramsSubscription = fullParams$
270
+ .pipe(
271
+ takeUntil(destroy$)
272
+ )
273
+ .subscribe(d => {
274
+ if (!d) return
275
+ const linePath = createLinePath(d.lineCurve)
276
+ subscriber.next(linePath)
277
+ })
278
+ return () => {
279
+ paramsSubscription.unsubscribe()
280
+ }
281
+ })
282
+
283
+ // 顯示範圍內的series labels
284
+ const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
285
+ computedData$.pipe(
286
+ takeUntil(destroy$),
287
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
288
+ switchMap(async (d) => d),
289
+ ).subscribe(data => {
290
+ const labels = data[0] && data[0][0]
291
+ ? data.map(d => d[0].seriesLabel)
292
+ : []
293
+ subscriber.next(labels)
294
+ })
295
+ })
296
+
297
+ // const axisSize$ = gridAxisSizeObservable({
298
+ // fullDataFormatter$,
299
+ // computedLayout$
300
+ // })
301
+
302
+ const transitionDuration$ = fullChartParams$
303
+ .pipe(
304
+ map(d => d.transitionDuration),
305
+ distinctUntilChanged()
306
+ )
307
+
308
+ const transitionEase$ = fullChartParams$
309
+ .pipe(
310
+ map(d => d.transitionEase),
311
+ distinctUntilChanged()
312
+ )
313
+
314
+ const clipPathSubscription = combineLatest({
315
+ seriesLabels: seriesLabels$,
316
+ axisSize: gridAxesSize$,
317
+ transitionDuration: transitionDuration$,
318
+ transitionEase: transitionEase$
319
+ }).pipe(
320
+ takeUntil(destroy$),
321
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
322
+ switchMap(async (d) => d),
323
+ ).subscribe(data => {
324
+ // 外層的遮罩
325
+ const clipPathBox = [{
326
+ id: clipPathID,
327
+ width: data.axisSize.width,
328
+ height: data.axisSize.height
329
+ }]
330
+ // 各別線條的遮罩(各別動畫)
331
+ const clipPathData = clipPathBox.concat(
332
+ data.seriesLabels.map(d => {
333
+ return {
334
+ id: `orbcharts__clipPath_${d}`,
335
+ width: data.axisSize.width,
336
+ height: data.axisSize.height
337
+ }
338
+ })
339
+ )
340
+ renderClipPath({
341
+ defsSelection,
342
+ clipPathData,
343
+ transitionDuration: data.transitionDuration,
344
+ transitionEase: data.transitionEase
345
+ })
346
+ })
347
+
348
+ // const SeriesDataMap$ = computedData$.pipe(
349
+ // map(d => makeGridSeriesDataMap(d))
350
+ // )
351
+
352
+ // const GroupDataMap$ = computedData$.pipe(
353
+ // map(d => makeGridGroupDataMap(d))
354
+ // )
355
+
356
+ const DataMap$ = computedData$.pipe(
357
+ map(d => {
358
+ const DataMap: Map<string, ComputedDatumGrid> = new Map()
359
+ d.flat().forEach(_d => DataMap.set(_d.id, _d))
360
+ return DataMap
361
+ })
362
+ )
363
+
364
+ // 取得事件座標的group資料
365
+ const gridGroupPositionFn$ = gridGroupPositionFnObservable({
366
+ fullDataFormatter$,
367
+ gridAxesSize$: gridAxesSize$,
368
+ computedData$: computedData$,
369
+ fullChartParams$: fullChartParams$
370
+ })
371
+
372
+ const highlightTarget$ = fullChartParams$.pipe(
373
+ takeUntil(destroy$),
374
+ map(d => d.highlightTarget),
375
+ distinctUntilChanged()
376
+ )
377
+
378
+ const graphSubscription = combineLatest({
379
+ seriesLabels: seriesLabels$,
380
+ computedData: computedData$,
381
+ SeriesDataMap: SeriesDataMap$,
382
+ GroupDataMap: GroupDataMap$,
383
+ linePath: linePath$,
384
+ params: fullParams$,
385
+ highlightTarget: highlightTarget$,
386
+ gridGroupPositionFn: gridGroupPositionFn$,
387
+ }).pipe(
388
+ takeUntil(destroy$),
389
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
390
+ switchMap(async (d) => d),
391
+ ).subscribe(data => {
392
+
393
+ const updateGraphic = graphicGSelection
394
+ .selectAll<SVGGElement, number>('g')
395
+ .data(data.seriesLabels, (d, i) => d)
396
+ const enterGraphic = updateGraphic.enter()
397
+ .append('g')
398
+ .classed(gClassName, true)
399
+ updateGraphic.exit().remove()
400
+ const graphicSelection = updateGraphic.merge(enterGraphic)
401
+ .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
402
+
403
+ // 繪圖
404
+ graphicSelection.each((d, i, all) => {
405
+ // 將資料分段
406
+ const segmentData = makeSegmentData(data.computedData[i] ?? [])
407
+
408
+ const pathSelection = renderLine({
409
+ selection: d3.select(all[i]),
410
+ linePath: data.linePath,
411
+ segmentData: segmentData,
412
+ params: data.params
413
+ })
414
+
415
+ pathSelection
416
+ .on('mouseover', (event, datum) => {
417
+ event.stopPropagation()
418
+
419
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
420
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
421
+ const groupData = data.GroupDataMap.get(groupLabel)!
422
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
423
+ const _datum = targetDatum ?? datum[0]
424
+
425
+ event$.next({
426
+ type: 'grid',
427
+ eventName: 'mouseover',
428
+ pluginName,
429
+ highlightTarget: data.highlightTarget,
430
+ datum: _datum,
431
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
432
+ seriesIndex: _datum.seriesIndex,
433
+ seriesLabel: _datum.seriesLabel,
434
+ groups: data.GroupDataMap.get(_datum.groupLabel)!,
435
+ groupIndex: _datum.groupIndex,
436
+ groupLabel: _datum.groupLabel,
437
+ event,
438
+ data: data.computedData
439
+ })
440
+ })
441
+ .on('mousemove', (event, datum) => {
442
+ event.stopPropagation()
443
+
444
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
445
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
446
+ const groupData = data.GroupDataMap.get(groupLabel)!
447
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
448
+ const _datum = targetDatum ?? datum[0]
449
+
450
+ event$.next({
451
+ type: 'grid',
452
+ eventName: 'mousemove',
453
+ pluginName,
454
+ highlightTarget: data.highlightTarget,
455
+ datum: _datum,
456
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
457
+ seriesIndex: _datum.seriesIndex,
458
+ seriesLabel: _datum.seriesLabel,
459
+ groups: data.GroupDataMap.get(_datum.groupLabel)!,
460
+ groupIndex: _datum.groupIndex,
461
+ groupLabel: _datum.groupLabel,
462
+ event,
463
+ data: data.computedData
464
+ })
465
+ })
466
+ .on('mouseout', (event, datum) => {
467
+ event.stopPropagation()
468
+
469
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
470
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
471
+ const groupData = data.GroupDataMap.get(groupLabel)!
472
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
473
+ const _datum = targetDatum ?? datum[0]
474
+
475
+ event$.next({
476
+ type: 'grid',
477
+ eventName: 'mouseout',
478
+ pluginName,
479
+ highlightTarget: data.highlightTarget,
480
+ datum: _datum,
481
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
482
+ seriesIndex: _datum.seriesIndex,
483
+ seriesLabel: _datum.seriesLabel,
484
+ groups: data.GroupDataMap.get(_datum.groupLabel)!,
485
+ groupIndex: _datum.groupIndex,
486
+ groupLabel: _datum.groupLabel,
487
+ event,
488
+ data: data.computedData
489
+ })
490
+ })
491
+ .on('click', (event, datum) => {
492
+ event.stopPropagation()
493
+
494
+ const seriesLabel = datum[0] ? datum[0].seriesLabel : ''
495
+ const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
496
+ const groupData = data.GroupDataMap.get(groupLabel)!
497
+ const targetDatum = groupData.find(d => d.seriesLabel === seriesLabel)
498
+ const _datum = targetDatum ?? datum[0]
499
+
500
+ event$.next({
501
+ type: 'grid',
502
+ eventName: 'click',
503
+ pluginName,
504
+ highlightTarget: data.highlightTarget,
505
+ datum: _datum,
506
+ series: data.SeriesDataMap.get(_datum.seriesLabel)!,
507
+ seriesIndex: _datum.seriesIndex,
508
+ seriesLabel: _datum.seriesLabel,
509
+ groups: data.GroupDataMap.get(_datum.groupLabel)!,
510
+ groupIndex: _datum.groupIndex,
511
+ groupLabel: _datum.groupLabel,
512
+ event,
513
+ data: data.computedData
514
+ })
515
+ })
516
+
517
+ })
518
+
519
+
520
+
521
+ graphicSelection$.next(graphicSelection)
522
+
523
+
524
+ // pathSelection = renderLine({
525
+ // selection: graphicSelection,
526
+ // linePath: d.linePath,
527
+ // data: d.computedData
528
+ // })
529
+ })
530
+
531
+ // const datumList$ = computedData$.pipe(
532
+ // takeUntil(destroy$),
533
+ // map(d => d.flat())
534
+ // )
535
+ // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
536
+ const highlightSubscription = gridHighlight$.subscribe()
537
+
538
+ fullChartParams$.pipe(
539
+ takeUntil(destroy$),
540
+ filter(d => d.highlightTarget === 'series'),
541
+ switchMap(d => combineLatest({
542
+ graphicSelection: graphicSelection$,
543
+ highlight: gridHighlight$,
544
+ DataMap: DataMap$,
545
+ fullChartParams: fullChartParams$
546
+ }).pipe(
547
+ takeUntil(destroy$),
548
+ switchMap(async d => d)
549
+ ))
550
+ ).subscribe(data => {
551
+ const datum = data.DataMap.get(data.highlight[0])
552
+ // if (!datum) {
553
+ // return
554
+ // }
555
+ highlightLine({
556
+ selection: data.graphicSelection,
557
+ seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
558
+ fullChartParams: data.fullChartParams
559
+ })
560
+ })
561
+
562
+ return () => {
563
+ destroy$.next(undefined)
564
+ highlightSubscription.unsubscribe()
565
+ }
566
+ }
package/src/base/types.ts CHANGED
@@ -1,3 +1,3 @@
1
- export interface BasePluginFn {
2
- (pluginName: string, context: any): () => void // return unsubscribe function
1
+ export interface BasePluginFn<Context> {
2
+ (pluginName: string, context: Context): () => void // return unsubscribe function
3
3
  }