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

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 (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
  })