@orbcharts/plugins-basic 3.0.0-alpha.60 → 3.0.0-alpha.62

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 (78) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +1 -1
  3. package/dist/orbcharts-plugins-basic.umd.js +1 -1
  4. package/package.json +42 -42
  5. package/src/base/BaseBarStack.ts +778 -778
  6. package/src/base/BaseBars.ts +764 -764
  7. package/src/base/BaseBarsTriangle.ts +672 -672
  8. package/src/base/BaseDots.ts +513 -513
  9. package/src/base/BaseGroupAxis.ts +558 -558
  10. package/src/base/BaseLegend.ts +641 -641
  11. package/src/base/BaseLineAreas.ts +628 -628
  12. package/src/base/BaseLines.ts +704 -704
  13. package/src/base/BaseValueAxis.ts +480 -478
  14. package/src/base/types.ts +2 -2
  15. package/src/grid/defaults.ts +128 -128
  16. package/src/grid/gridObservables.ts +541 -541
  17. package/src/grid/index.ts +15 -15
  18. package/src/grid/plugins/BarStack.ts +43 -43
  19. package/src/grid/plugins/Bars.ts +44 -44
  20. package/src/grid/plugins/BarsPN.ts +41 -41
  21. package/src/grid/plugins/BarsTriangle.ts +42 -42
  22. package/src/grid/plugins/Dots.ts +37 -37
  23. package/src/grid/plugins/GridLegend.ts +59 -59
  24. package/src/grid/plugins/GroupAux.ts +976 -976
  25. package/src/grid/plugins/GroupAxis.ts +35 -35
  26. package/src/grid/plugins/LineAreas.ts +40 -40
  27. package/src/grid/plugins/Lines.ts +40 -40
  28. package/src/grid/plugins/ScalingArea.ts +173 -173
  29. package/src/grid/plugins/ValueAxis.ts +36 -36
  30. package/src/grid/plugins/ValueStackAxis.ts +38 -38
  31. package/src/grid/types.ts +123 -123
  32. package/src/index.ts +9 -9
  33. package/src/multiGrid/defaults.ts +158 -158
  34. package/src/multiGrid/index.ts +13 -13
  35. package/src/multiGrid/multiGridObservables.ts +49 -49
  36. package/src/multiGrid/plugins/MultiBarStack.ts +78 -78
  37. package/src/multiGrid/plugins/MultiBars.ts +77 -77
  38. package/src/multiGrid/plugins/MultiBarsTriangle.ts +77 -77
  39. package/src/multiGrid/plugins/MultiDots.ts +65 -65
  40. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -89
  41. package/src/multiGrid/plugins/MultiGroupAxis.ts +69 -69
  42. package/src/multiGrid/plugins/MultiLineAreas.ts +77 -77
  43. package/src/multiGrid/plugins/MultiLines.ts +77 -77
  44. package/src/multiGrid/plugins/MultiValueAxis.ts +69 -69
  45. package/src/multiGrid/plugins/MultiValueStackAxis.ts +69 -69
  46. package/src/multiGrid/plugins/OverlappingValueAxes.ts +167 -167
  47. package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +168 -168
  48. package/src/multiGrid/types.ts +72 -72
  49. package/src/noneData/defaults.ts +102 -102
  50. package/src/noneData/index.ts +3 -3
  51. package/src/noneData/plugins/Container.ts +10 -10
  52. package/src/noneData/plugins/Tooltip.ts +310 -310
  53. package/src/noneData/types.ts +26 -26
  54. package/src/series/defaults.ts +144 -144
  55. package/src/series/index.ts +9 -9
  56. package/src/series/plugins/Bubbles.ts +545 -545
  57. package/src/series/plugins/Pie.ts +576 -576
  58. package/src/series/plugins/PieEventTexts.ts +262 -262
  59. package/src/series/plugins/PieLabels.ts +304 -304
  60. package/src/series/plugins/Rose.ts +472 -472
  61. package/src/series/plugins/RoseLabels.ts +362 -362
  62. package/src/series/plugins/SeriesLegend.ts +59 -59
  63. package/src/series/seriesObservables.ts +145 -145
  64. package/src/series/seriesUtils.ts +51 -51
  65. package/src/series/types.ts +83 -83
  66. package/src/tree/defaults.ts +23 -23
  67. package/src/tree/index.ts +3 -3
  68. package/src/tree/plugins/TreeLegend.ts +59 -59
  69. package/src/tree/plugins/TreeMap.ts +305 -305
  70. package/src/tree/types.ts +23 -23
  71. package/src/utils/commonUtils.ts +21 -21
  72. package/src/utils/d3Graphics.ts +124 -124
  73. package/src/utils/d3Utils.ts +73 -73
  74. package/src/utils/observables.ts +14 -14
  75. package/src/utils/orbchartsUtils.ts +100 -100
  76. package/tsconfig.base.json +13 -13
  77. package/tsconfig.json +2 -2
  78. package/vite.config.js +22 -22
@@ -1,36 +1,36 @@
1
- import {
2
- Subject,
3
- takeUntil,
4
- map,
5
- distinctUntilChanged,
6
- shareReplay
7
- } from 'rxjs'
8
- import {
9
- defineGridPlugin } from '@orbcharts/core'
10
- import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
11
- import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
12
-
13
- const pluginName = 'GroupAxis'
14
-
15
- export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
16
-
17
- const destroy$ = new Subject()
18
-
19
- const unsubscribeBaseGroupAxis = createBaseGroupAxis(pluginName, {
20
- selection,
21
- computedData$: observer.computedData$,
22
- fullParams$: observer.fullParams$,
23
- fullDataFormatter$: observer.fullDataFormatter$,
24
- fullChartParams$: observer.fullChartParams$,
25
- gridAxesTransform$: observer.gridAxesTransform$,
26
- gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
27
- gridAxesSize$: observer.gridAxesSize$,
28
- gridContainerPosition$: observer.gridContainerPosition$,
29
- isSeriesSeprate$: observer.isSeriesSeprate$,
30
- })
31
-
32
- return () => {
33
- destroy$.next(undefined)
34
- unsubscribeBaseGroupAxis()
35
- }
1
+ import {
2
+ Subject,
3
+ takeUntil,
4
+ map,
5
+ distinctUntilChanged,
6
+ shareReplay
7
+ } from 'rxjs'
8
+ import {
9
+ defineGridPlugin } from '@orbcharts/core'
10
+ import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
11
+ import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
12
+
13
+ const pluginName = 'GroupAxis'
14
+
15
+ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
16
+
17
+ const destroy$ = new Subject()
18
+
19
+ const unsubscribeBaseGroupAxis = createBaseGroupAxis(pluginName, {
20
+ selection,
21
+ computedData$: observer.computedData$,
22
+ fullParams$: observer.fullParams$,
23
+ fullDataFormatter$: observer.fullDataFormatter$,
24
+ fullChartParams$: observer.fullChartParams$,
25
+ gridAxesTransform$: observer.gridAxesTransform$,
26
+ gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
27
+ gridAxesSize$: observer.gridAxesSize$,
28
+ gridContainerPosition$: observer.gridContainerPosition$,
29
+ isSeriesSeprate$: observer.isSeriesSeprate$,
30
+ })
31
+
32
+ return () => {
33
+ destroy$.next(undefined)
34
+ unsubscribeBaseGroupAxis()
35
+ }
36
36
  })
@@ -1,41 +1,41 @@
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
- visibleComputedData$: observer.visibleComputedData$,
18
- computedLayoutData$: observer.computedLayoutData$,
19
- visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
20
- seriesLabels$: observer.seriesLabels$,
21
- SeriesDataMap$: observer.SeriesDataMap$,
22
- GroupDataMap$: observer.GroupDataMap$,
23
- fullParams$: observer.fullParams$,
24
- fullDataFormatter$: observer.fullDataFormatter$,
25
- fullChartParams$: observer.fullChartParams$,
26
- gridAxesTransform$: observer.gridAxesTransform$,
27
- gridGraphicTransform$: observer.gridGraphicTransform$,
28
- gridAxesSize$: observer.gridAxesSize$,
29
- gridHighlight$: observer.gridHighlight$,
30
- gridContainerPosition$: observer.gridContainerPosition$,
31
- allContainerPosition$: observer.gridContainerPosition$,
32
- layout$: observer.layout$,
33
- event$: subject.event$,
34
- })
35
-
36
-
37
- return () => {
38
- destroy$.next(undefined)
39
- unsubscribeBaseBars()
40
- }
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
+ visibleComputedData$: observer.visibleComputedData$,
18
+ computedLayoutData$: observer.computedLayoutData$,
19
+ visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
20
+ seriesLabels$: observer.seriesLabels$,
21
+ SeriesDataMap$: observer.SeriesDataMap$,
22
+ GroupDataMap$: observer.GroupDataMap$,
23
+ fullParams$: observer.fullParams$,
24
+ fullDataFormatter$: observer.fullDataFormatter$,
25
+ fullChartParams$: observer.fullChartParams$,
26
+ gridAxesTransform$: observer.gridAxesTransform$,
27
+ gridGraphicTransform$: observer.gridGraphicTransform$,
28
+ gridAxesSize$: observer.gridAxesSize$,
29
+ gridHighlight$: observer.gridHighlight$,
30
+ gridContainerPosition$: observer.gridContainerPosition$,
31
+ allContainerPosition$: observer.gridContainerPosition$,
32
+ layout$: observer.layout$,
33
+ event$: subject.event$,
34
+ })
35
+
36
+
37
+ return () => {
38
+ destroy$.next(undefined)
39
+ unsubscribeBaseBars()
40
+ }
41
41
  })
@@ -1,41 +1,41 @@
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, rootSelection, name, observer, subject }) => {
11
-
12
- const destroy$ = new Subject()
13
-
14
- const unsubscribeBaseBars = createBaseLines(pluginName, {
15
- selection,
16
- computedData$: observer.computedData$,
17
- computedLayoutData$: observer.computedLayoutData$,
18
- visibleComputedData$: observer.visibleComputedData$,
19
- visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
20
- seriesLabels$: observer.seriesLabels$,
21
- SeriesDataMap$: observer.SeriesDataMap$,
22
- GroupDataMap$: observer.GroupDataMap$,
23
- fullParams$: observer.fullParams$,
24
- fullDataFormatter$: observer.fullDataFormatter$,
25
- fullChartParams$: observer.fullChartParams$,
26
- gridAxesTransform$: observer.gridAxesTransform$,
27
- gridGraphicTransform$: observer.gridGraphicTransform$,
28
- gridAxesSize$: observer.gridAxesSize$,
29
- gridHighlight$: observer.gridHighlight$,
30
- gridContainerPosition$: observer.gridContainerPosition$,
31
- allContainerPosition$: observer.gridContainerPosition$,
32
- layout$: observer.layout$,
33
- event$: subject.event$,
34
- })
35
-
36
-
37
- return () => {
38
- destroy$.next(undefined)
39
- unsubscribeBaseBars()
40
- }
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, rootSelection, name, observer, subject }) => {
11
+
12
+ const destroy$ = new Subject()
13
+
14
+ const unsubscribeBaseBars = createBaseLines(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ computedLayoutData$: observer.computedLayoutData$,
18
+ visibleComputedData$: observer.visibleComputedData$,
19
+ visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
20
+ seriesLabels$: observer.seriesLabels$,
21
+ SeriesDataMap$: observer.SeriesDataMap$,
22
+ GroupDataMap$: observer.GroupDataMap$,
23
+ fullParams$: observer.fullParams$,
24
+ fullDataFormatter$: observer.fullDataFormatter$,
25
+ fullChartParams$: observer.fullChartParams$,
26
+ gridAxesTransform$: observer.gridAxesTransform$,
27
+ gridGraphicTransform$: observer.gridGraphicTransform$,
28
+ gridAxesSize$: observer.gridAxesSize$,
29
+ gridHighlight$: observer.gridHighlight$,
30
+ gridContainerPosition$: observer.gridContainerPosition$,
31
+ allContainerPosition$: observer.gridContainerPosition$,
32
+ layout$: observer.layout$,
33
+ event$: subject.event$,
34
+ })
35
+
36
+
37
+ return () => {
38
+ destroy$.next(undefined)
39
+ unsubscribeBaseBars()
40
+ }
41
41
  })
@@ -1,174 +1,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
- switchMap(async (d) => d),
80
- ).subscribe(data => {
81
- const groupMin = 0
82
- const groupMax = data.groupMaxIndex
83
- const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'auto'
84
- ? groupMin - data.initGroupAxis.scalePadding
85
- : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
86
- const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'auto'
87
- ? groupMax + data.initGroupAxis.scalePadding
88
- : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
89
-
90
- // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
91
- // ? [0, 1]
92
- // : [1, 0]
93
-
94
- const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
95
- maxValue: data.groupMaxIndex,
96
- minValue: 0,
97
- axisWidth: data.axisSize.width,
98
- scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
99
- // scaleDomain: [groupMin, groupMax],
100
- scaleRange: [0, 1]
101
- })
102
-
103
- const shadowScale = groupScale.copy()
104
-
105
- const zoom = d3.zoom()
106
- // .scaleExtent([1, data.groupMaxIndex])
107
- // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
108
- .on("zoom", function zoomed(event) {
109
- // debugger
110
- // console.log('event', event)
111
- const t = event.transform;
112
- // console.log('t', t)
113
- const mapGroupindex = (d: number) => {
114
- const n = Math.round(d)
115
- return Math.min(groupMax, Math.max(groupMin, n));
116
- }
117
- const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
118
- ? t.rescaleX(shadowScale)
119
- .domain()
120
- .map(mapGroupindex)
121
- : t.rescaleY(shadowScale)
122
- .domain()
123
- .map(mapGroupindex)
124
-
125
- // domain超過極限值
126
- if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= groupMax) {
127
- // 繼續縮小
128
- if (t.k < lastTransform.k) {
129
- // 維持前一次的transform
130
- t.k = lastTransform.k
131
- t.x = lastTransform.x
132
- t.y = lastTransform.y
133
- }
134
- // domain間距小於1
135
- } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
136
- // 繼續放大
137
- if (t.k > lastTransform.k) {
138
- // 維持前一次的transform
139
- t.k = lastTransform.k
140
- t.x = lastTransform.x
141
- t.y = lastTransform.y
142
- }
143
- }
144
- // 紀錄transform
145
- lastTransform.k = t.k
146
- lastTransform.x = t.x
147
- lastTransform.y = t.y
148
- // console.log(String(data.fullDataFormatter.visibleFilter))
149
- // console.log('zoomedDomain', zoomedDomain)
150
-
151
- const newDataFormatter: DataFormatterGrid = {
152
- ...data.fullDataFormatter,
153
- grid: {
154
- ...data.fullDataFormatter.grid,
155
- groupAxis: {
156
- ...data.fullDataFormatter.grid.groupAxis,
157
- scaleDomain: zoomedDomain
158
- }
159
- },
160
- }
161
- subject.dataFormatter$.next(newDataFormatter)
162
- })
163
-
164
- // 傳入外層selection
165
- // subject.selection.call(zoom as any)
166
- rootSelection.call(zoom as any)
167
-
168
- })
169
-
170
- return () => {
171
- destroy$.next(undefined)
172
- rootRectSelection.remove()
173
- }
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
+ switchMap(async (d) => d),
80
+ ).subscribe(data => {
81
+ const groupMin = 0
82
+ const groupMax = data.groupMaxIndex
83
+ const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'auto'
84
+ ? groupMin - data.initGroupAxis.scalePadding
85
+ : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
86
+ const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'auto'
87
+ ? groupMax + data.initGroupAxis.scalePadding
88
+ : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
89
+
90
+ // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
91
+ // ? [0, 1]
92
+ // : [1, 0]
93
+
94
+ const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
95
+ maxValue: data.groupMaxIndex,
96
+ minValue: 0,
97
+ axisWidth: data.axisSize.width,
98
+ scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
99
+ // scaleDomain: [groupMin, groupMax],
100
+ scaleRange: [0, 1]
101
+ })
102
+
103
+ const shadowScale = groupScale.copy()
104
+
105
+ const zoom = d3.zoom()
106
+ // .scaleExtent([1, data.groupMaxIndex])
107
+ // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
108
+ .on("zoom", function zoomed(event) {
109
+ // debugger
110
+ // console.log('event', event)
111
+ const t = event.transform;
112
+ // console.log('t', t)
113
+ const mapGroupindex = (d: number) => {
114
+ const n = Math.round(d)
115
+ return Math.min(groupMax, Math.max(groupMin, n));
116
+ }
117
+ const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
118
+ ? t.rescaleX(shadowScale)
119
+ .domain()
120
+ .map(mapGroupindex)
121
+ : t.rescaleY(shadowScale)
122
+ .domain()
123
+ .map(mapGroupindex)
124
+
125
+ // domain超過極限值
126
+ if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= groupMax) {
127
+ // 繼續縮小
128
+ if (t.k < lastTransform.k) {
129
+ // 維持前一次的transform
130
+ t.k = lastTransform.k
131
+ t.x = lastTransform.x
132
+ t.y = lastTransform.y
133
+ }
134
+ // domain間距小於1
135
+ } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
136
+ // 繼續放大
137
+ if (t.k > lastTransform.k) {
138
+ // 維持前一次的transform
139
+ t.k = lastTransform.k
140
+ t.x = lastTransform.x
141
+ t.y = lastTransform.y
142
+ }
143
+ }
144
+ // 紀錄transform
145
+ lastTransform.k = t.k
146
+ lastTransform.x = t.x
147
+ lastTransform.y = t.y
148
+ // console.log(String(data.fullDataFormatter.visibleFilter))
149
+ // console.log('zoomedDomain', zoomedDomain)
150
+
151
+ const newDataFormatter: DataFormatterGrid = {
152
+ ...data.fullDataFormatter,
153
+ grid: {
154
+ ...data.fullDataFormatter.grid,
155
+ groupAxis: {
156
+ ...data.fullDataFormatter.grid.groupAxis,
157
+ scaleDomain: zoomedDomain
158
+ }
159
+ },
160
+ }
161
+ subject.dataFormatter$.next(newDataFormatter)
162
+ })
163
+
164
+ // 傳入外層selection
165
+ // subject.selection.call(zoom as any)
166
+ rootSelection.call(zoom as any)
167
+
168
+ })
169
+
170
+ return () => {
171
+ destroy$.next(undefined)
172
+ rootRectSelection.remove()
173
+ }
174
174
  })
@@ -1,37 +1,37 @@
1
- import {
2
- Subject,
3
- takeUntil,
4
- map,
5
- distinctUntilChanged,
6
- shareReplay
7
- } from 'rxjs'
8
- import {
9
- defineGridPlugin } from '@orbcharts/core'
10
- import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
11
-
12
- import { createBaseValueAxis } from '../../base/BaseValueAxis'
13
-
14
- const pluginName = 'ValueAxis'
15
-
16
- export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
17
-
18
- const destroy$ = new Subject()
19
-
20
- const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
21
- selection,
22
- computedData$: observer.computedData$,
23
- fullParams$: observer.fullParams$,
24
- fullDataFormatter$: observer.fullDataFormatter$,
25
- fullChartParams$: observer.fullChartParams$,
26
- gridAxesTransform$: observer.gridAxesTransform$,
27
- gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
28
- gridAxesSize$: observer.gridAxesSize$,
29
- gridContainerPosition$: observer.gridContainerPosition$,
30
- isSeriesSeprate$: observer.isSeriesSeprate$,
31
- })
32
-
33
- return () => {
34
- destroy$.next(undefined)
35
- unsubscribeBaseValueAxis()
36
- }
1
+ import {
2
+ Subject,
3
+ takeUntil,
4
+ map,
5
+ distinctUntilChanged,
6
+ shareReplay
7
+ } from 'rxjs'
8
+ import {
9
+ defineGridPlugin } from '@orbcharts/core'
10
+ import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
11
+
12
+ import { createBaseValueAxis } from '../../base/BaseValueAxis'
13
+
14
+ const pluginName = 'ValueAxis'
15
+
16
+ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
17
+
18
+ const destroy$ = new Subject()
19
+
20
+ const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
21
+ selection,
22
+ computedData$: observer.computedData$,
23
+ fullParams$: observer.fullParams$,
24
+ fullDataFormatter$: observer.fullDataFormatter$,
25
+ fullChartParams$: observer.fullChartParams$,
26
+ gridAxesTransform$: observer.gridAxesTransform$,
27
+ gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
28
+ gridAxesSize$: observer.gridAxesSize$,
29
+ gridContainerPosition$: observer.gridContainerPosition$,
30
+ isSeriesSeprate$: observer.isSeriesSeprate$,
31
+ })
32
+
33
+ return () => {
34
+ destroy$.next(undefined)
35
+ unsubscribeBaseValueAxis()
36
+ }
37
37
  })