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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (84) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +5477 -5426
  3. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  4. package/dist/src/base/BaseBarStack.d.ts +1 -1
  5. package/dist/src/base/BaseBars.d.ts +1 -1
  6. package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
  7. package/dist/src/base/BaseDots.d.ts +1 -1
  8. package/dist/src/base/BaseLineAreas.d.ts +1 -1
  9. package/dist/src/base/BaseLines.d.ts +1 -1
  10. package/dist/src/multiGrid/defaults.d.ts +2 -1
  11. package/dist/src/multiGrid/index.d.ts +1 -0
  12. package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
  13. package/dist/src/multiGrid/types.d.ts +4 -4
  14. package/package.json +42 -42
  15. package/src/base/BaseBarStack.ts +881 -879
  16. package/src/base/BaseBars.ts +750 -748
  17. package/src/base/BaseBarsTriangle.ts +659 -657
  18. package/src/base/BaseDots.ts +639 -637
  19. package/src/base/BaseGroupAxis.ts +496 -496
  20. package/src/base/BaseLegend.ts +636 -636
  21. package/src/base/BaseLineAreas.ts +621 -624
  22. package/src/base/BaseLines.ts +692 -695
  23. package/src/base/BaseValueAxis.ts +479 -479
  24. package/src/base/types.ts +2 -2
  25. package/src/grid/defaults.ts +121 -121
  26. package/src/grid/gridObservables.ts +263 -263
  27. package/src/grid/index.ts +15 -15
  28. package/src/grid/plugins/BarStack.ts +37 -37
  29. package/src/grid/plugins/Bars.ts +37 -37
  30. package/src/grid/plugins/BarsDiverging.ts +39 -39
  31. package/src/grid/plugins/BarsTriangle.ts +34 -34
  32. package/src/grid/plugins/Dots.ts +35 -35
  33. package/src/grid/plugins/GridLegend.ts +58 -58
  34. package/src/grid/plugins/GroupAux.ts +643 -643
  35. package/src/grid/plugins/GroupAxis.ts +30 -30
  36. package/src/grid/plugins/LineAreas.ts +36 -36
  37. package/src/grid/plugins/Lines.ts +35 -35
  38. package/src/grid/plugins/ScalingArea.ts +174 -174
  39. package/src/grid/plugins/ValueAxis.ts +31 -31
  40. package/src/grid/plugins/ValueStackAxis.ts +70 -70
  41. package/src/grid/types.ts +120 -120
  42. package/src/index.ts +9 -9
  43. package/src/multiGrid/defaults.ts +147 -140
  44. package/src/multiGrid/index.ts +11 -10
  45. package/src/multiGrid/multiGridObservables.ts +289 -278
  46. package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
  47. package/src/multiGrid/plugins/MultiBars.ts +59 -59
  48. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
  49. package/src/multiGrid/plugins/MultiDots.ts +58 -58
  50. package/src/multiGrid/plugins/MultiGridLegend.ts +88 -88
  51. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
  52. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
  53. package/src/multiGrid/plugins/MultiLines.ts +58 -58
  54. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
  55. package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -165
  56. package/src/multiGrid/types.ts +67 -67
  57. package/src/noneData/defaults.ts +61 -61
  58. package/src/noneData/index.ts +3 -3
  59. package/src/noneData/plugins/Container.ts +10 -10
  60. package/src/noneData/plugins/Tooltip.ts +304 -304
  61. package/src/noneData/types.ts +26 -26
  62. package/src/series/defaults.ts +99 -99
  63. package/src/series/index.ts +6 -6
  64. package/src/series/plugins/Bubbles.ts +551 -549
  65. package/src/series/plugins/Pie.ts +600 -598
  66. package/src/series/plugins/PieEventTexts.ts +194 -194
  67. package/src/series/plugins/PieLabels.ts +288 -285
  68. package/src/series/plugins/SeriesLegend.ts +58 -58
  69. package/src/series/seriesUtils.ts +50 -50
  70. package/src/series/types.ts +67 -67
  71. package/src/tree/defaults.ts +22 -22
  72. package/src/tree/index.ts +3 -3
  73. package/src/tree/plugins/TreeLegend.ts +58 -58
  74. package/src/tree/plugins/TreeMap.ts +302 -300
  75. package/src/tree/types.ts +23 -23
  76. package/src/utils/commonUtils.ts +21 -21
  77. package/src/utils/d3Graphics.ts +124 -124
  78. package/src/utils/d3Utils.ts +73 -73
  79. package/src/utils/observables.ts +14 -14
  80. package/src/utils/orbchartsUtils.ts +100 -100
  81. package/tsconfig.dev.json +16 -16
  82. package/tsconfig.json +13 -13
  83. package/tsconfig.prod.json +13 -13
  84. package/vite.config.js +49 -49
@@ -1,31 +1,31 @@
1
- import {
2
- Subject } from 'rxjs'
3
- import {
4
- defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
6
- import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
7
-
8
- const pluginName = 'GroupAxis'
9
-
10
- export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
11
-
12
- const destroy$ = new Subject()
13
-
14
- const unsubscribeBaseGroupAxis = createBaseGroupAxis(pluginName, {
15
- selection,
16
- computedData$: observer.computedData$,
17
- fullParams$: observer.fullParams$,
18
- fullDataFormatter$: observer.fullDataFormatter$,
19
- fullChartParams$: observer.fullChartParams$,
20
- gridAxesTransform$: observer.gridAxesTransform$,
21
- gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
22
- gridAxesSize$: observer.gridAxesSize$,
23
- gridContainer$: observer.gridContainer$,
24
- isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
25
- })
26
-
27
- return () => {
28
- destroy$.next(undefined)
29
- unsubscribeBaseGroupAxis()
30
- }
1
+ import {
2
+ Subject } from 'rxjs'
3
+ import {
4
+ defineGridPlugin } from '@orbcharts/core'
5
+ import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
6
+ import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
7
+
8
+ const pluginName = 'GroupAxis'
9
+
10
+ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
11
+
12
+ const destroy$ = new Subject()
13
+
14
+ const unsubscribeBaseGroupAxis = createBaseGroupAxis(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ fullParams$: observer.fullParams$,
18
+ fullDataFormatter$: observer.fullDataFormatter$,
19
+ fullChartParams$: observer.fullChartParams$,
20
+ gridAxesTransform$: observer.gridAxesTransform$,
21
+ gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
22
+ gridAxesSize$: observer.gridAxesSize$,
23
+ gridContainer$: observer.gridContainer$,
24
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
25
+ })
26
+
27
+ return () => {
28
+ destroy$.next(undefined)
29
+ unsubscribeBaseGroupAxis()
30
+ }
31
31
  })
@@ -1,37 +1,37 @@
1
- import {
2
- Subject } from 'rxjs'
3
- import {
4
- defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_LINE_AREAS_PARAMS } from '../defaults'
6
- import { createBaseLineAreas } from '../../base/BaseLineAreas'
7
-
8
- const pluginName = 'LineAreas'
9
-
10
- export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)(({ selection, name, observer, subject }) => {
11
-
12
- const destroy$ = new Subject()
13
-
14
- const unsubscribeBaseBars = createBaseLineAreas(pluginName, {
15
- selection,
16
- computedData$: observer.computedData$,
17
- existSeriesLabels$: observer.existSeriesLabels$,
18
- SeriesDataMap$: observer.SeriesDataMap$,
19
- GroupDataMap$: observer.GroupDataMap$,
20
- fullParams$: observer.fullParams$,
21
- fullDataFormatter$: observer.fullDataFormatter$,
22
- fullChartParams$: observer.fullChartParams$,
23
- gridAxesTransform$: observer.gridAxesTransform$,
24
- gridGraphicTransform$: observer.gridGraphicTransform$,
25
- gridAxesSize$: observer.gridAxesSize$,
26
- gridHighlight$: observer.gridHighlight$,
27
- gridContainer$: observer.gridContainer$,
28
- layout$: observer.layout$,
29
- event$: subject.event$,
30
- })
31
-
32
-
33
- return () => {
34
- destroy$.next(undefined)
35
- unsubscribeBaseBars()
36
- }
1
+ import {
2
+ Subject } from 'rxjs'
3
+ import {
4
+ defineGridPlugin } from '@orbcharts/core'
5
+ import { DEFAULT_LINE_AREAS_PARAMS } from '../defaults'
6
+ import { createBaseLineAreas } from '../../base/BaseLineAreas'
7
+
8
+ const pluginName = 'LineAreas'
9
+
10
+ export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)(({ selection, name, observer, subject }) => {
11
+
12
+ const destroy$ = new Subject()
13
+
14
+ const unsubscribeBaseBars = createBaseLineAreas(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ existSeriesLabels$: observer.existSeriesLabels$,
18
+ SeriesDataMap$: observer.SeriesDataMap$,
19
+ GroupDataMap$: observer.GroupDataMap$,
20
+ fullParams$: observer.fullParams$,
21
+ fullDataFormatter$: observer.fullDataFormatter$,
22
+ fullChartParams$: observer.fullChartParams$,
23
+ gridAxesTransform$: observer.gridAxesTransform$,
24
+ gridGraphicTransform$: observer.gridGraphicTransform$,
25
+ gridAxesSize$: observer.gridAxesSize$,
26
+ gridHighlight$: observer.gridHighlight$,
27
+ gridContainer$: observer.gridContainer$,
28
+ layout$: observer.layout$,
29
+ event$: subject.event$,
30
+ })
31
+
32
+
33
+ return () => {
34
+ destroy$.next(undefined)
35
+ unsubscribeBaseBars()
36
+ }
37
37
  })
@@ -1,36 +1,36 @@
1
- import {
2
- Subject } from 'rxjs'
3
- import {
4
- defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_LINES_PARAMS } from '../defaults'
6
- import { createBaseLines } from '../../base/BaseLines'
7
-
8
- const pluginName = 'Lines'
9
-
10
- export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, name, observer, subject }) => {
11
-
12
- const destroy$ = new Subject()
13
-
14
- const unsubscribeBaseBars = createBaseLines(pluginName, {
15
- selection,
16
- computedData$: observer.computedData$,
17
- existSeriesLabels$: observer.existSeriesLabels$,
18
- SeriesDataMap$: observer.SeriesDataMap$,
19
- GroupDataMap$: observer.GroupDataMap$,
20
- fullParams$: observer.fullParams$,
21
- fullDataFormatter$: observer.fullDataFormatter$,
22
- fullChartParams$: observer.fullChartParams$,
23
- gridAxesTransform$: observer.gridAxesTransform$,
24
- gridGraphicTransform$: observer.gridGraphicTransform$,
25
- gridAxesSize$: observer.gridAxesSize$,
26
- gridHighlight$: observer.gridHighlight$,
27
- gridContainer$: observer.gridContainer$,
28
- event$: subject.event$,
29
- })
30
-
31
-
32
- return () => {
33
- destroy$.next(undefined)
34
- unsubscribeBaseBars()
35
- }
1
+ import {
2
+ Subject } from 'rxjs'
3
+ import {
4
+ defineGridPlugin } from '@orbcharts/core'
5
+ import { DEFAULT_LINES_PARAMS } from '../defaults'
6
+ import { createBaseLines } from '../../base/BaseLines'
7
+
8
+ const pluginName = 'Lines'
9
+
10
+ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, name, observer, subject }) => {
11
+
12
+ const destroy$ = new Subject()
13
+
14
+ const unsubscribeBaseBars = createBaseLines(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ existSeriesLabels$: observer.existSeriesLabels$,
18
+ SeriesDataMap$: observer.SeriesDataMap$,
19
+ GroupDataMap$: observer.GroupDataMap$,
20
+ fullParams$: observer.fullParams$,
21
+ fullDataFormatter$: observer.fullDataFormatter$,
22
+ fullChartParams$: observer.fullChartParams$,
23
+ gridAxesTransform$: observer.gridAxesTransform$,
24
+ gridGraphicTransform$: observer.gridGraphicTransform$,
25
+ gridAxesSize$: observer.gridAxesSize$,
26
+ gridHighlight$: observer.gridHighlight$,
27
+ gridContainer$: observer.gridContainer$,
28
+ event$: subject.event$,
29
+ })
30
+
31
+
32
+ return () => {
33
+ destroy$.next(undefined)
34
+ unsubscribeBaseBars()
35
+ }
36
36
  })
@@ -1,175 +1,175 @@
1
- import * as d3 from 'd3'
2
- import {
3
- Observable,
4
- combineLatest,
5
- switchMap,
6
- distinctUntilChanged,
7
- first,
8
- map,
9
- takeUntil,
10
- debounceTime,
11
- Subject } from 'rxjs'
12
- import type { DataFormatterGrid } from '@orbcharts/core'
13
- import {
14
- defineGridPlugin } from '@orbcharts/core'
15
- import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
16
- import { getClassName, getUniID } from '../../utils/orbchartsUtils'
17
- import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
18
-
19
- const pluginName = 'ScalingArea'
20
- const rectClassName = getClassName(pluginName, 'rect')
21
-
22
- export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
23
-
24
- const destroy$ = new Subject()
25
-
26
- const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
27
- .insert('rect', 'g')
28
- .classed(rectClassName, true)
29
- .attr('opacity', 0)
30
- // .attr('pointer-events', 'none')
31
- // .attr('clip-path', 'url(#bpcharts__clipPath-box)')
32
- // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
33
-
34
- // 紀錄zoom最後一次的transform
35
- let lastTransform = {
36
- k: 1,
37
- x: 0,
38
- y: 0
39
- }
40
-
41
- observer.layout$.pipe(
42
- takeUntil(destroy$),
43
- ).subscribe(d => {
44
- rootRectSelection
45
- .attr('width', d.width)
46
- .attr('height', d.height)
47
- .attr('x', d.left)
48
- .attr('y', d.top)
49
- })
50
-
51
- const groupMaxIndex$ = observer.computedData$.pipe(
52
- map(d => d[0] ? d[0].length - 1 : 0),
53
- distinctUntilChanged()
54
- )
55
-
56
- // const fullDataFormatterEvent$: Subject<DataFormatterGrid> = new Subject()
57
- // fullDataFormatterEvent$
58
- // .pipe(
59
- // takeUntil(destroy$),
60
- // debounceTime(50)
61
- // )
62
- // .subscribe(fullDataFormatter => {
63
- // store.fullDataFormatter$.next(fullDataFormatter)
64
- // })
65
-
66
- combineLatest({
67
- initGroupAxis: observer.fullDataFormatter$.pipe(
68
- map(d => d.grid.groupAxis),
69
- // 只用第一次資料來計算scale才不會造成每次變動都受到影響
70
- first()
71
- ),
72
- // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
73
- fullDataFormatter: observer.fullDataFormatter$,
74
- groupMaxIndex: groupMaxIndex$,
75
- layout: observer.layout$,
76
- axisSize: observer.gridAxesSize$
77
- }).pipe(
78
- takeUntil(destroy$),
79
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
80
- switchMap(async (d) => d),
81
- ).subscribe(data => {
82
- const groupMin = 0
83
- const groupMax = data.groupMaxIndex
84
- const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'auto'
85
- ? groupMin - data.initGroupAxis.scalePadding
86
- : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
87
- const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'auto'
88
- ? groupMax + data.initGroupAxis.scalePadding
89
- : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
90
-
91
- // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
92
- // ? [0, 1]
93
- // : [1, 0]
94
-
95
- const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
96
- maxValue: data.groupMaxIndex,
97
- minValue: 0,
98
- axisWidth: data.axisSize.width,
99
- scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
100
- // scaleDomain: [groupMin, groupMax],
101
- scaleRange: [0, 1]
102
- })
103
-
104
- const shadowScale = groupScale.copy()
105
-
106
- const zoom = d3.zoom()
107
- // .scaleExtent([1, data.groupMaxIndex])
108
- // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
109
- .on("zoom", function zoomed(event) {
110
- // debugger
111
- // console.log('event', event)
112
- const t = event.transform;
113
- // console.log('t', t)
114
- const mapGroupindex = (d: number) => {
115
- const n = Math.round(d)
116
- return Math.min(groupMax, Math.max(groupMin, n));
117
- }
118
- const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
119
- ? t.rescaleX(shadowScale)
120
- .domain()
121
- .map(mapGroupindex)
122
- : t.rescaleY(shadowScale)
123
- .domain()
124
- .map(mapGroupindex)
125
-
126
- // domain超過極限值
127
- if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= groupMax) {
128
- // 繼續縮小
129
- if (t.k < lastTransform.k) {
130
- // 維持前一次的transform
131
- t.k = lastTransform.k
132
- t.x = lastTransform.x
133
- t.y = lastTransform.y
134
- }
135
- // domain間距小於1
136
- } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
137
- // 繼續放大
138
- if (t.k > lastTransform.k) {
139
- // 維持前一次的transform
140
- t.k = lastTransform.k
141
- t.x = lastTransform.x
142
- t.y = lastTransform.y
143
- }
144
- }
145
- // 紀錄transform
146
- lastTransform.k = t.k
147
- lastTransform.x = t.x
148
- lastTransform.y = t.y
149
- // console.log(String(data.fullDataFormatter.visibleFilter))
150
- // console.log('zoomedDomain', zoomedDomain)
151
-
152
- const newDataFormatter: DataFormatterGrid = {
153
- ...data.fullDataFormatter,
154
- grid: {
155
- ...data.fullDataFormatter.grid,
156
- groupAxis: {
157
- ...data.fullDataFormatter.grid.groupAxis,
158
- scaleDomain: zoomedDomain
159
- }
160
- },
161
- }
162
- subject.dataFormatter$.next(newDataFormatter)
163
- })
164
-
165
- // 傳入外層selection
166
- // subject.selection.call(zoom as any)
167
- rootSelection.call(zoom as any)
168
-
169
- })
170
-
171
- return () => {
172
- destroy$.next(undefined)
173
- rootRectSelection.remove()
174
- }
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Observable,
4
+ combineLatest,
5
+ switchMap,
6
+ distinctUntilChanged,
7
+ first,
8
+ map,
9
+ takeUntil,
10
+ debounceTime,
11
+ Subject } from 'rxjs'
12
+ import type { DataFormatterGrid } from '@orbcharts/core'
13
+ import {
14
+ defineGridPlugin } from '@orbcharts/core'
15
+ import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
16
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
17
+ import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
18
+
19
+ const pluginName = 'ScalingArea'
20
+ const rectClassName = getClassName(pluginName, 'rect')
21
+
22
+ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
23
+
24
+ const destroy$ = new Subject()
25
+
26
+ const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
27
+ .insert('rect', 'g')
28
+ .classed(rectClassName, true)
29
+ .attr('opacity', 0)
30
+ // .attr('pointer-events', 'none')
31
+ // .attr('clip-path', 'url(#bpcharts__clipPath-box)')
32
+ // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
33
+
34
+ // 紀錄zoom最後一次的transform
35
+ let lastTransform = {
36
+ k: 1,
37
+ x: 0,
38
+ y: 0
39
+ }
40
+
41
+ observer.layout$.pipe(
42
+ takeUntil(destroy$),
43
+ ).subscribe(d => {
44
+ rootRectSelection
45
+ .attr('width', d.width)
46
+ .attr('height', d.height)
47
+ .attr('x', d.left)
48
+ .attr('y', d.top)
49
+ })
50
+
51
+ const groupMaxIndex$ = observer.computedData$.pipe(
52
+ map(d => d[0] ? d[0].length - 1 : 0),
53
+ distinctUntilChanged()
54
+ )
55
+
56
+ // const fullDataFormatterEvent$: Subject<DataFormatterGrid> = new Subject()
57
+ // fullDataFormatterEvent$
58
+ // .pipe(
59
+ // takeUntil(destroy$),
60
+ // debounceTime(50)
61
+ // )
62
+ // .subscribe(fullDataFormatter => {
63
+ // store.fullDataFormatter$.next(fullDataFormatter)
64
+ // })
65
+
66
+ combineLatest({
67
+ initGroupAxis: observer.fullDataFormatter$.pipe(
68
+ map(d => d.grid.groupAxis),
69
+ // 只用第一次資料來計算scale才不會造成每次變動都受到影響
70
+ first()
71
+ ),
72
+ // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
73
+ fullDataFormatter: observer.fullDataFormatter$,
74
+ groupMaxIndex: groupMaxIndex$,
75
+ layout: observer.layout$,
76
+ axisSize: observer.gridAxesSize$
77
+ }).pipe(
78
+ takeUntil(destroy$),
79
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
80
+ switchMap(async (d) => d),
81
+ ).subscribe(data => {
82
+ const groupMin = 0
83
+ const groupMax = data.groupMaxIndex
84
+ const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'auto'
85
+ ? groupMin - data.initGroupAxis.scalePadding
86
+ : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
87
+ const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'auto'
88
+ ? groupMax + data.initGroupAxis.scalePadding
89
+ : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
90
+
91
+ // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
92
+ // ? [0, 1]
93
+ // : [1, 0]
94
+
95
+ const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
96
+ maxValue: data.groupMaxIndex,
97
+ minValue: 0,
98
+ axisWidth: data.axisSize.width,
99
+ scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
100
+ // scaleDomain: [groupMin, groupMax],
101
+ scaleRange: [0, 1]
102
+ })
103
+
104
+ const shadowScale = groupScale.copy()
105
+
106
+ const zoom = d3.zoom()
107
+ // .scaleExtent([1, data.groupMaxIndex])
108
+ // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
109
+ .on("zoom", function zoomed(event) {
110
+ // debugger
111
+ // console.log('event', event)
112
+ const t = event.transform;
113
+ // console.log('t', t)
114
+ const mapGroupindex = (d: number) => {
115
+ const n = Math.round(d)
116
+ return Math.min(groupMax, Math.max(groupMin, n));
117
+ }
118
+ const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
119
+ ? t.rescaleX(shadowScale)
120
+ .domain()
121
+ .map(mapGroupindex)
122
+ : t.rescaleY(shadowScale)
123
+ .domain()
124
+ .map(mapGroupindex)
125
+
126
+ // domain超過極限值
127
+ if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= groupMax) {
128
+ // 繼續縮小
129
+ if (t.k < lastTransform.k) {
130
+ // 維持前一次的transform
131
+ t.k = lastTransform.k
132
+ t.x = lastTransform.x
133
+ t.y = lastTransform.y
134
+ }
135
+ // domain間距小於1
136
+ } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
137
+ // 繼續放大
138
+ if (t.k > lastTransform.k) {
139
+ // 維持前一次的transform
140
+ t.k = lastTransform.k
141
+ t.x = lastTransform.x
142
+ t.y = lastTransform.y
143
+ }
144
+ }
145
+ // 紀錄transform
146
+ lastTransform.k = t.k
147
+ lastTransform.x = t.x
148
+ lastTransform.y = t.y
149
+ // console.log(String(data.fullDataFormatter.visibleFilter))
150
+ // console.log('zoomedDomain', zoomedDomain)
151
+
152
+ const newDataFormatter: DataFormatterGrid = {
153
+ ...data.fullDataFormatter,
154
+ grid: {
155
+ ...data.fullDataFormatter.grid,
156
+ groupAxis: {
157
+ ...data.fullDataFormatter.grid.groupAxis,
158
+ scaleDomain: zoomedDomain
159
+ }
160
+ },
161
+ }
162
+ subject.dataFormatter$.next(newDataFormatter)
163
+ })
164
+
165
+ // 傳入外層selection
166
+ // subject.selection.call(zoom as any)
167
+ rootSelection.call(zoom as any)
168
+
169
+ })
170
+
171
+ return () => {
172
+ destroy$.next(undefined)
173
+ rootRectSelection.remove()
174
+ }
175
175
  })
@@ -1,32 +1,32 @@
1
- import {
2
- Subject } from 'rxjs'
3
- import {
4
- defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
6
-
7
- import { createBaseValueAxis } from '../../base/BaseValueAxis'
8
-
9
- const pluginName = 'ValueAxis'
10
-
11
- export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
12
-
13
- const destroy$ = new Subject()
14
-
15
- const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
16
- selection,
17
- computedData$: observer.computedData$,
18
- fullParams$: observer.fullParams$,
19
- fullDataFormatter$: observer.fullDataFormatter$,
20
- fullChartParams$: observer.fullChartParams$,
21
- gridAxesTransform$: observer.gridAxesTransform$,
22
- gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
23
- gridAxesSize$: observer.gridAxesSize$,
24
- gridContainer$: observer.gridContainer$,
25
- isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
26
- })
27
-
28
- return () => {
29
- destroy$.next(undefined)
30
- unsubscribeBaseValueAxis()
31
- }
1
+ import {
2
+ Subject } from 'rxjs'
3
+ import {
4
+ defineGridPlugin } from '@orbcharts/core'
5
+ import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
6
+
7
+ import { createBaseValueAxis } from '../../base/BaseValueAxis'
8
+
9
+ const pluginName = 'ValueAxis'
10
+
11
+ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
12
+
13
+ const destroy$ = new Subject()
14
+
15
+ const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
16
+ selection,
17
+ computedData$: observer.computedData$,
18
+ fullParams$: observer.fullParams$,
19
+ fullDataFormatter$: observer.fullDataFormatter$,
20
+ fullChartParams$: observer.fullChartParams$,
21
+ gridAxesTransform$: observer.gridAxesTransform$,
22
+ gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
23
+ gridAxesSize$: observer.gridAxesSize$,
24
+ gridContainer$: observer.gridContainer$,
25
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
26
+ })
27
+
28
+ return () => {
29
+ destroy$.next(undefined)
30
+ unsubscribeBaseValueAxis()
31
+ }
32
32
  })