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

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 (57) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +7770 -7580
  2. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  3. package/dist/src/base/BaseBarStack.d.ts +6 -4
  4. package/dist/src/base/BaseBars.d.ts +6 -4
  5. package/dist/src/base/BaseBarsTriangle.d.ts +7 -4
  6. package/dist/src/base/BaseDots.d.ts +5 -3
  7. package/dist/src/base/BaseGroupAxis.d.ts +3 -3
  8. package/dist/src/base/BaseLineAreas.d.ts +6 -3
  9. package/dist/src/base/BaseLines.d.ts +6 -3
  10. package/dist/src/base/BaseValueAxis.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +4 -4
  12. package/dist/src/multiGrid/multiGridObservables.d.ts +2 -6
  13. package/dist/src/series/plugins/PieEventTexts.d.ts +3 -1
  14. package/dist/src/series/seriesObservables.d.ts +21 -0
  15. package/dist/src/series/seriesUtils.d.ts +3 -3
  16. package/package.json +2 -2
  17. package/src/base/BaseBarStack.ts +105 -208
  18. package/src/base/BaseBars.ts +78 -64
  19. package/src/base/BaseBarsTriangle.ts +76 -63
  20. package/src/base/BaseDots.ts +41 -178
  21. package/src/base/BaseGroupAxis.ts +13 -13
  22. package/src/base/BaseLineAreas.ts +85 -81
  23. package/src/base/BaseLines.ts +82 -75
  24. package/src/base/BaseValueAxis.ts +14 -15
  25. package/src/grid/gridObservables.ts +22 -38
  26. package/src/grid/plugins/BarStack.ts +16 -3
  27. package/src/grid/plugins/Bars.ts +18 -4
  28. package/src/grid/plugins/BarsDiverging.ts +6 -4
  29. package/src/grid/plugins/BarsTriangle.ts +20 -4
  30. package/src/grid/plugins/Dots.ts +4 -2
  31. package/src/grid/plugins/GroupAux.ts +1 -2
  32. package/src/grid/plugins/GroupAxis.ts +15 -3
  33. package/src/grid/plugins/LineAreas.ts +5 -2
  34. package/src/grid/plugins/Lines.ts +5 -2
  35. package/src/grid/plugins/ScalingArea.ts +0 -1
  36. package/src/grid/plugins/ValueAxis.ts +15 -3
  37. package/src/grid/plugins/ValueStackAxis.ts +14 -5
  38. package/src/multiGrid/multiGridObservables.ts +14 -261
  39. package/src/multiGrid/plugins/MultiBarStack.ts +22 -8
  40. package/src/multiGrid/plugins/MultiBars.ts +21 -7
  41. package/src/multiGrid/plugins/MultiBarsTriangle.ts +22 -7
  42. package/src/multiGrid/plugins/MultiDots.ts +7 -5
  43. package/src/multiGrid/plugins/MultiGridLegend.ts +1 -1
  44. package/src/multiGrid/plugins/MultiGroupAxis.ts +19 -7
  45. package/src/multiGrid/plugins/MultiLineAreas.ts +9 -6
  46. package/src/multiGrid/plugins/MultiLines.ts +9 -6
  47. package/src/multiGrid/plugins/MultiValueAxis.ts +19 -7
  48. package/src/multiGrid/plugins/OverlappingValueAxes.ts +52 -47
  49. package/src/noneData/defaults.ts +3 -0
  50. package/src/series/defaults.ts +13 -3
  51. package/src/series/plugins/Bubbles.ts +139 -88
  52. package/src/series/plugins/Pie.ts +307 -352
  53. package/src/series/plugins/PieEventTexts.ts +102 -38
  54. package/src/series/plugins/PieLabels.ts +95 -48
  55. package/src/series/seriesObservables.ts +145 -0
  56. package/src/series/seriesUtils.ts +4 -4
  57. package/tsconfig.json +1 -1
@@ -5,13 +5,16 @@ import {
5
5
  switchMap,
6
6
  takeUntil,
7
7
  distinctUntilChanged,
8
+ shareReplay,
8
9
  Observable,
9
10
  Subject } from 'rxjs'
10
11
  import type { BasePluginFn } from './types'
11
12
  import type {
12
13
  ComputedDatumGrid,
13
14
  ComputedDataGrid,
14
- ContainerPosition,
15
+ ComputedLayoutDataGrid,
16
+ DataFormatterTypeMap,
17
+ GridContainerPosition,
15
18
  EventGrid,
16
19
  ChartParams,
17
20
  Layout,
@@ -31,8 +34,10 @@ export interface BaseBarsParams {
31
34
  interface BaseBarsContext {
32
35
  selection: d3.Selection<any, unknown, any, unknown>
33
36
  computedData$: Observable<ComputedDataGrid>
37
+ computedLayoutData$: Observable<ComputedLayoutDataGrid>
34
38
  visibleComputedData$: Observable<ComputedDatumGrid[][]>
35
- existSeriesLabels$: Observable<string[]>
39
+ visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
40
+ seriesLabels$: Observable<string[]>
36
41
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
42
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
38
43
  fullParams$: Observable<BaseBarsParams>
@@ -45,15 +50,15 @@ interface BaseBarsContext {
45
50
  height: number;
46
51
  }>
47
52
  gridHighlight$: Observable<ComputedDatumGrid[]>
48
- gridContainer$: Observable<ContainerPosition[]>
49
- isSeriesPositionSeprate$: Observable<boolean>
53
+ gridContainerPosition$: Observable<GridContainerPosition[]>
54
+ isSeriesSeprate$: Observable<boolean>
50
55
  event$: Subject<EventGrid>
51
56
  }
52
57
 
53
58
  interface RenderBarParams {
54
59
  graphicGSelection: d3.Selection<SVGGElement, string, any, any>
55
60
  rectClassName: string
56
- computedData: ComputedDatumGrid[][]
61
+ visibleComputedLayoutData: ComputedLayoutDataGrid
57
62
  zeroYArr: number[]
58
63
  groupLabels: string[]
59
64
  barScale: d3.ScalePoint<string>
@@ -63,7 +68,7 @@ interface RenderBarParams {
63
68
  transformedBarRadius: [number, number][]
64
69
  delayGroup: number
65
70
  transitionItem: number
66
- isSeriesPositionSeprate: boolean
71
+ isSeriesSeprate: boolean
67
72
  }
68
73
 
69
74
  type ClipPathDatum = {
@@ -86,7 +91,9 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
86
91
  barPadding: number
87
92
  barGroupPadding: number
88
93
  }) {
89
- const eachGroupWidth = axisWidth / (groupAmount - 1)
94
+ const eachGroupWidth = groupAmount > 1
95
+ ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
96
+ : axisWidth
90
97
  const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
91
98
  return width > 1 ? width : 1
92
99
  }
@@ -116,7 +123,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
116
123
  }
117
124
  // let _data: ComputedDatumGrid[][] = []
118
125
 
119
- function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
126
+ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayoutData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
120
127
 
121
128
  const barHalfWidth = barWidth! / 2
122
129
 
@@ -124,7 +131,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
124
131
  .each((seriesData, seriesIndex, g) => {
125
132
  d3.select(g[seriesIndex])
126
133
  .selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
127
- .data(computedData[seriesIndex] ?? [], d => d.id)
134
+ .data(visibleComputedLayoutData[seriesIndex] ?? [], d => d.id)
128
135
  .join(
129
136
  enter => {
130
137
  // console.log('enter')
@@ -140,7 +147,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
140
147
  .attr('transform', (d, i) => `translate(${(d ? d.axisX : 0) - barHalfWidth}, ${0})`)
141
148
  .attr('fill', d => d.color)
142
149
  .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
143
- .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
150
+ .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
144
151
  .attr('width', barWidth!)
145
152
  .attr('rx', transformedBarRadius[seriesIndex][0] ?? 1)
146
153
  .attr('ry', transformedBarRadius[seriesIndex][1] ?? 1)
@@ -177,7 +184,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
177
184
  // .attr('cursor', 'pointer')
178
185
  // .attr('fill', d => d.color)
179
186
  // .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
180
- // .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
187
+ // .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
181
188
  // .attr('width', barWidth!)
182
189
  // .attr('transform', `translate(${-barHalfWidth}, 0)`)
183
190
  // // .attr('rx', params.barRadius == true ? barHalfWidth
@@ -266,8 +273,10 @@ function highlight ({ selection, ids, fullChartParams }: {
266
273
  export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string, {
267
274
  selection,
268
275
  computedData$,
276
+ computedLayoutData$,
269
277
  visibleComputedData$,
270
- existSeriesLabels$,
278
+ visibleComputedLayoutData$,
279
+ seriesLabels$,
271
280
  SeriesDataMap$,
272
281
  GroupDataMap$,
273
282
  fullParams$,
@@ -277,8 +286,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
277
286
  gridGraphicReverseScale$,
278
287
  gridAxesSize$,
279
288
  gridHighlight$,
280
- gridContainer$,
281
- isSeriesPositionSeprate$,
289
+ gridContainerPosition$,
290
+ isSeriesSeprate$,
282
291
  event$
283
292
  }) => {
284
293
 
@@ -338,7 +347,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
338
347
 
339
348
  // combineLatest({
340
349
  // seriesSelection: seriesSelection$,
341
- // gridContainer: gridContainer$
350
+ // gridContainerPosition: gridContainerPosition$
342
351
  // }).pipe(
343
352
  // takeUntil(destroy$),
344
353
  // switchMap(async d => d)
@@ -346,8 +355,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
346
355
  // data.seriesSelection
347
356
  // .transition()
348
357
  // .attr('transform', (d, i) => {
349
- // const translate = data.gridContainer[i].translate
350
- // const scale = data.gridContainer[i].scale
358
+ // const translate = data.gridContainerPosition[i].translate
359
+ // const scale = data.gridContainerPosition[i].scale
351
360
  // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
352
361
  // })
353
362
  // })
@@ -397,13 +406,13 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
397
406
  selection,
398
407
  pluginName,
399
408
  clipPathID,
400
- existSeriesLabels$,
401
- gridContainer$,
409
+ seriesLabels$,
410
+ gridContainerPosition$,
402
411
  gridAxesTransform$,
403
412
  gridGraphicTransform$
404
413
  })
405
414
 
406
- const zeroYArr$ = visibleComputedData$.pipe(
415
+ const zeroYArr$ = visibleComputedLayoutData$.pipe(
407
416
  takeUntil(destroy$),
408
417
  map(data => {
409
418
  return data.map(d => {
@@ -418,14 +427,14 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
418
427
  visibleComputedData: visibleComputedData$,
419
428
  params: fullParams$,
420
429
  gridAxesSize: gridAxesSize$,
421
- isSeriesPositionSeprate: isSeriesPositionSeprate$
430
+ isSeriesSeprate: isSeriesSeprate$
422
431
  }).pipe(
423
432
  takeUntil(destroy$),
424
433
  switchMap(async d => d),
425
434
  map(data => {
426
435
  if (data.params.barWidth) {
427
436
  return data.params.barWidth
428
- } else if (data.isSeriesPositionSeprate) {
437
+ } else if (data.isSeriesSeprate) {
429
438
  return calcBarWidth({
430
439
  axisWidth: data.gridAxesSize.width,
431
440
  groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
@@ -452,7 +461,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
452
461
  // gridGraphicTransform: gridGraphicTransform$,
453
462
  barWidth: barWidth$,
454
463
  params: fullParams$,
455
- // gridContainer: gridContainer$,
464
+ // gridContainerPosition: gridContainerPosition$,
456
465
  // gridAxesTransform: gridAxesTransform$
457
466
  gridGraphicReverseScale: gridGraphicReverseScale$
458
467
  }).pipe(
@@ -476,17 +485,17 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
476
485
  // } else if (data.gridAxesTransform.rotate == 0) {
477
486
  // transformedRx = radius
478
487
  // // 抵消外層scale的變型
479
- // / data.gridGraphicTransform.scale[0] / data.gridContainer[0].scale[0]
488
+ // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[0]
480
489
  // transformedRy = radius
481
490
  // // 抵消外層scale的變型
482
- // / data.gridGraphicTransform.scale[1] / data.gridContainer[0].scale[1]
491
+ // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[1]
483
492
  // } else if (data.gridAxesTransform.rotate != 0) {
484
493
  // transformedRx = radius
485
494
  // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
486
- // / data.gridGraphicTransform.scale[0] / data.gridContainer[0].scale[1]
495
+ // / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[1]
487
496
  // transformedRy = radius
488
497
  // // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
489
- // / data.gridGraphicTransform.scale[1] / data.gridContainer[0].scale[0]
498
+ // / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[0]
490
499
  // }
491
500
 
492
501
  // 如果計算出來的x圓角值大於寬度一半則進行修正
@@ -502,18 +511,18 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
502
511
  )
503
512
 
504
513
 
505
- const seriesLabels$ = visibleComputedData$.pipe(
506
- takeUntil(destroy$),
507
- map(data => {
508
- const SeriesLabelSet: Set<string> = new Set()
509
- data.forEach(d => {
510
- d.forEach(_d => {
511
- SeriesLabelSet.add(_d.seriesLabel)
512
- })
513
- })
514
- return Array.from(SeriesLabelSet)
515
- })
516
- )
514
+ // const seriesLabels$ = visibleComputedData$.pipe(
515
+ // takeUntil(destroy$),
516
+ // map(data => {
517
+ // const SeriesLabelSet: Set<string> = new Set()
518
+ // data.forEach(d => {
519
+ // d.forEach(_d => {
520
+ // SeriesLabelSet.add(_d.seriesLabel)
521
+ // })
522
+ // })
523
+ // return Array.from(SeriesLabelSet)
524
+ // })
525
+ // )
517
526
 
518
527
  const groupLabels$ = visibleComputedData$.pipe(
519
528
  takeUntil(destroy$),
@@ -601,11 +610,9 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
601
610
  distinctUntilChanged()
602
611
  )
603
612
 
604
- const barSelection$ = new Subject<d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown>>()
605
-
606
- combineLatest({
613
+ const barSelection$ = combineLatest({
607
614
  graphicGSelection: graphicGSelection$,
608
- computedData: computedData$,
615
+ visibleComputedLayoutData: visibleComputedLayoutData$,
609
616
  // barData$: barData$,
610
617
  zeroYArr: zeroYArr$,
611
618
  groupLabels: groupLabels$,
@@ -617,31 +624,40 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
617
624
  transformedBarRadius: transformedBarRadius$,
618
625
  delayGroup: delayGroup$,
619
626
  transitionItem: transitionItem$,
627
+ isSeriesSeprate: isSeriesSeprate$
628
+ }).pipe(
629
+ takeUntil(destroy$),
630
+ switchMap(async (d) => d),
631
+ map(data => {
632
+ return renderRectBars({
633
+ graphicGSelection: data.graphicGSelection,
634
+ rectClassName,
635
+ visibleComputedLayoutData: data.visibleComputedLayoutData,
636
+ zeroYArr: data.zeroYArr,
637
+ groupLabels: data.groupLabels,
638
+ barScale: data.barScale,
639
+ params: data.params,
640
+ chartParams: data.chartParams,
641
+ barWidth: data.barWidth,
642
+ transformedBarRadius: data.transformedBarRadius,
643
+ delayGroup: data.delayGroup,
644
+ transitionItem: data.transitionItem,
645
+ isSeriesSeprate: data.isSeriesSeprate
646
+ })
647
+ })
648
+ )
649
+
650
+ combineLatest({
651
+ barSelection: barSelection$,
652
+ computedData: computedData$,
653
+ highlightTarget: highlightTarget$,
620
654
  SeriesDataMap: SeriesDataMap$,
621
655
  GroupDataMap: GroupDataMap$,
622
- isSeriesPositionSeprate: isSeriesPositionSeprate$
623
656
  }).pipe(
624
657
  takeUntil(destroy$),
625
658
  switchMap(async (d) => d),
626
659
  ).subscribe(data => {
627
-
628
- const barSelection = renderRectBars({
629
- graphicGSelection: data.graphicGSelection,
630
- rectClassName,
631
- computedData: data.computedData,
632
- zeroYArr: data.zeroYArr,
633
- groupLabels: data.groupLabels,
634
- barScale: data.barScale,
635
- params: data.params,
636
- chartParams: data.chartParams,
637
- barWidth: data.barWidth,
638
- transformedBarRadius: data.transformedBarRadius,
639
- delayGroup: data.delayGroup,
640
- transitionItem: data.transitionItem,
641
- isSeriesPositionSeprate: data.isSeriesPositionSeprate
642
- })
643
-
644
- barSelection!
660
+ data.barSelection
645
661
  .on('mouseover', (event, datum) => {
646
662
  event.stopPropagation()
647
663
 
@@ -722,8 +738,6 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
722
738
  data: data.computedData
723
739
  })
724
740
  })
725
-
726
- barSelection$.next(barSelection!)
727
741
  })
728
742
 
729
743
 
@@ -5,15 +5,19 @@ import {
5
5
  switchMap,
6
6
  takeUntil,
7
7
  distinctUntilChanged,
8
+ shareReplay,
8
9
  Observable,
9
10
  Subject } from 'rxjs'
10
11
  import type { BasePluginFn } from './types'
11
12
  import type {
12
13
  ComputedDatumGrid,
13
14
  ComputedDataGrid,
15
+ ComputedLayoutDatumGrid,
16
+ ComputedLayoutDataGrid,
17
+ DataFormatterTypeMap,
14
18
  EventGrid,
15
19
  ChartParams,
16
- ContainerPosition,
20
+ GridContainerPosition,
17
21
  Layout,
18
22
  TransformData } from '@orbcharts/core'
19
23
  import { getD3TransitionEase } from '../utils/d3Utils'
@@ -30,8 +34,11 @@ export interface BaseBarsTriangleParams {
30
34
  interface BaseBarsContext {
31
35
  selection: d3.Selection<any, unknown, any, unknown>
32
36
  computedData$: Observable<ComputedDataGrid>
37
+ computedLayoutData$: Observable<ComputedLayoutDataGrid>
33
38
  visibleComputedData$: Observable<ComputedDatumGrid[][]>
34
- existSeriesLabels$: Observable<string[]>
39
+ visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
40
+ fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
41
+ seriesLabels$: Observable<string[]>
35
42
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
36
43
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
44
  fullParams$: Observable<BaseBarsTriangleParams>
@@ -43,8 +50,8 @@ interface BaseBarsContext {
43
50
  height: number;
44
51
  }>
45
52
  gridHighlight$: Observable<ComputedDatumGrid[]>
46
- gridContainer$: Observable<ContainerPosition[]>
47
- isSeriesPositionSeprate$: Observable<boolean>
53
+ gridContainerPosition$: Observable<GridContainerPosition[]>
54
+ isSeriesSeprate$: Observable<boolean>
48
55
  event$: Subject<EventGrid>
49
56
  }
50
57
 
@@ -53,7 +60,7 @@ interface RenderBarParams {
53
60
  graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
54
61
  pathGClassName: string
55
62
  pathClassName: string
56
- computedData: ComputedDataGrid
63
+ visibleComputedLayoutData: ComputedLayoutDataGrid
57
64
  linearGradientIds: string[]
58
65
  zeroYArr: number[]
59
66
  groupLabels: string[]
@@ -63,7 +70,7 @@ interface RenderBarParams {
63
70
  barWidth: number
64
71
  delayGroup: number
65
72
  transitionItem: number
66
- isSeriesPositionSeprate: boolean
73
+ isSeriesSeprate: boolean
67
74
  }
68
75
 
69
76
  // interface BarDatumGrid extends ComputedDatumGrid {
@@ -120,7 +127,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
120
127
  return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
121
128
  }
122
129
 
123
- function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, computedData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
130
+ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, visibleComputedLayoutData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
124
131
 
125
132
  const barHalfWidth = barWidth! / 2
126
133
 
@@ -129,7 +136,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
129
136
  // g
130
137
  const gSelection = d3.select(g[seriesIndex])
131
138
  .selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
132
- .data(computedData[seriesIndex] ?? [])
139
+ .data(visibleComputedLayoutData[seriesIndex] ?? [])
133
140
  .join(
134
141
  enter => {
135
142
  const enterSelection = enter
@@ -151,13 +158,13 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
151
158
  update => update,
152
159
  exit => exit.remove()
153
160
  )
154
- .attr('transform', d => `translate(${isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!}, 0)`)
161
+ .attr('transform', d => `translate(${isSeriesSeprate ? 0 : barScale(d.seriesLabel)!}, 0)`)
155
162
 
156
163
  // path
157
164
  gSelection.select(`path.${pathClassName}`)
158
165
  .attr('height', d => Math.abs(d.axisYFromZero))
159
166
  .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
160
- .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
167
+ .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
161
168
  // .style('fill', d => `url(#${d.linearGradientId})`)
162
169
  .style('fill', d => `url(#${linearGradientIds[d.seriesIndex]})`)
163
170
  .attr('stroke', d => d.color)
@@ -288,8 +295,11 @@ function highlight ({ selection, ids, fullChartParams }: {
288
295
  export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName: string, {
289
296
  selection,
290
297
  computedData$,
298
+ computedLayoutData$,
291
299
  visibleComputedData$,
292
- existSeriesLabels$,
300
+ visibleComputedLayoutData$,
301
+ fullDataFormatter$,
302
+ seriesLabels$,
293
303
  SeriesDataMap$,
294
304
  GroupDataMap$,
295
305
  fullParams$,
@@ -298,8 +308,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
298
308
  gridGraphicTransform$,
299
309
  gridAxesSize$,
300
310
  gridHighlight$,
301
- gridContainer$,
302
- isSeriesPositionSeprate$,
311
+ gridContainerPosition$,
312
+ isSeriesSeprate$,
303
313
  event$
304
314
  }) => {
305
315
  const destroy$ = new Subject()
@@ -317,8 +327,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
317
327
  selection,
318
328
  pluginName,
319
329
  clipPathID,
320
- existSeriesLabels$,
321
- gridContainer$,
330
+ seriesLabels$,
331
+ gridContainerPosition$,
322
332
  gridAxesTransform$,
323
333
  gridGraphicTransform$
324
334
  })
@@ -332,7 +342,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
332
342
  })
333
343
  )
334
344
 
335
- const zeroYArr$ = visibleComputedData$.pipe(
345
+ const zeroYArr$ = visibleComputedLayoutData$.pipe(
336
346
  // map(d => d[0] && d[0][0]
337
347
  // ? d[0][0].axisY - d[0][0].axisYFromZero
338
348
  // : 0),
@@ -349,14 +359,14 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
349
359
  visibleComputedData: visibleComputedData$,
350
360
  params: fullParams$,
351
361
  gridAxesSize: gridAxesSize$,
352
- isSeriesPositionSeprate: isSeriesPositionSeprate$
362
+ isSeriesSeprate: isSeriesSeprate$
353
363
  }).pipe(
354
364
  takeUntil(destroy$),
355
365
  switchMap(async d => d),
356
366
  map(data => {
357
367
  if (data.params.barWidth) {
358
368
  return data.params.barWidth
359
- } else if (data.isSeriesPositionSeprate) {
369
+ } else if (data.isSeriesSeprate) {
360
370
  return calcBarWidth({
361
371
  axisWidth: data.gridAxesSize.width,
362
372
  groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
@@ -376,18 +386,18 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
376
386
  })
377
387
  )
378
388
 
379
- const seriesLabels$ = visibleComputedData$.pipe(
380
- takeUntil(destroy$),
381
- map(data => {
382
- const SeriesLabelSet: Set<string> = new Set()
383
- data.forEach(d => {
384
- d.forEach(_d => {
385
- SeriesLabelSet.add(_d.seriesLabel)
386
- })
387
- })
388
- return Array.from(SeriesLabelSet)
389
- })
390
- )
389
+ // const seriesLabels$ = visibleComputedData$.pipe(
390
+ // takeUntil(destroy$),
391
+ // map(data => {
392
+ // const SeriesLabelSet: Set<string> = new Set()
393
+ // data.forEach(d => {
394
+ // d.forEach(_d => {
395
+ // SeriesLabelSet.add(_d.seriesLabel)
396
+ // })
397
+ // })
398
+ // return Array.from(SeriesLabelSet)
399
+ // })
400
+ // )
391
401
 
392
402
  const groupLabels$ = visibleComputedData$.pipe(
393
403
  takeUntil(destroy$),
@@ -479,8 +489,6 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
479
489
  distinctUntilChanged()
480
490
  )
481
491
 
482
- const barSelection$ = new Subject<d3.Selection<SVGPathElement, ComputedDatumGrid, SVGGElement, unknown>>()
483
-
484
492
  const linearGradientIds$ = seriesLabels$.pipe(
485
493
  takeUntil(destroy$),
486
494
  map(d => d.map((d, i) => {
@@ -506,52 +514,60 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
506
514
  // })
507
515
  // )
508
516
 
509
- combineLatest({
517
+ const barSelection$ = combineLatest({
510
518
  graphicGSelection: graphicGSelection$,
511
519
  defsSelection: defsSelection$,
512
520
  computedData: computedData$,
521
+ visibleComputedLayoutData: visibleComputedLayoutData$,
513
522
  linearGradientIds: linearGradientIds$,
514
523
  zeroYArr: zeroYArr$,
515
524
  groupLabels: groupLabels$,
516
525
  barScale: barScale$,
517
526
  params: fullParams$,
518
527
  chartParams: fullChartParams$,
519
- highlightTarget: highlightTarget$,
520
528
  barWidth: barWidth$,
521
529
  delayGroup: delayGroup$,
522
530
  transitionItem: transitionItem$,
523
- SeriesDataMap: SeriesDataMap$,
524
- GroupDataMap: GroupDataMap$,
525
- isSeriesPositionSeprate: isSeriesPositionSeprate$
531
+ isSeriesSeprate: isSeriesSeprate$
526
532
  }).pipe(
527
533
  takeUntil(destroy$),
528
534
  switchMap(async (d) => d),
529
- ).subscribe(data => {
535
+ map(data => {
536
+ renderLinearGradient({
537
+ defsSelection: data.defsSelection,
538
+ computedData: data.computedData,
539
+ linearGradientIds: data.linearGradientIds,
540
+ params: data.params
541
+ })
530
542
 
531
- const barSelection = renderTriangleBars({
532
- graphicGSelection: data.graphicGSelection,
533
- pathGClassName,
534
- pathClassName,
535
- computedData: data.computedData,
536
- linearGradientIds: data.linearGradientIds,
537
- zeroYArr: data.zeroYArr,
538
- groupLabels: data.groupLabels,
539
- barScale: data.barScale,
540
- params: data.params,
541
- chartParams: data.chartParams,
542
- barWidth: data.barWidth,
543
- delayGroup: data.delayGroup,
544
- transitionItem: data.transitionItem,
545
- isSeriesPositionSeprate: data.isSeriesPositionSeprate
546
- })
547
- renderLinearGradient({
548
- defsSelection: data.defsSelection,
549
- computedData: data.computedData,
550
- linearGradientIds: data.linearGradientIds,
551
- params: data.params
543
+ return renderTriangleBars({
544
+ graphicGSelection: data.graphicGSelection,
545
+ pathGClassName,
546
+ pathClassName,
547
+ visibleComputedLayoutData: data.visibleComputedLayoutData,
548
+ linearGradientIds: data.linearGradientIds,
549
+ zeroYArr: data.zeroYArr,
550
+ groupLabels: data.groupLabels,
551
+ barScale: data.barScale,
552
+ params: data.params,
553
+ chartParams: data.chartParams,
554
+ barWidth: data.barWidth,
555
+ delayGroup: data.delayGroup,
556
+ transitionItem: data.transitionItem,
557
+ isSeriesSeprate: data.isSeriesSeprate
558
+ })
552
559
  })
560
+ )
553
561
 
554
- barSelection!
562
+ combineLatest({
563
+ barSelection: barSelection$,
564
+ computedData: computedData$,
565
+ highlightTarget: highlightTarget$,
566
+ SeriesDataMap: SeriesDataMap$,
567
+ GroupDataMap: GroupDataMap$,
568
+ }).subscribe(data => {
569
+
570
+ data.barSelection!
555
571
  .on('mouseover', (event, datum) => {
556
572
  event.stopPropagation()
557
573
 
@@ -632,11 +648,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
632
648
  data: data.computedData
633
649
  })
634
650
  })
635
-
636
- barSelection$.next(barSelection!)
637
651
  })
638
652
 
639
-
640
653
  combineLatest({
641
654
  barSelection: barSelection$,
642
655
  highlight: gridHighlight$.pipe(