@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.
- package/LICENSE +200 -200
- package/dist/orbcharts-plugins-basic.es.js +5477 -5426
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseBarStack.d.ts +1 -1
- package/dist/src/base/BaseBars.d.ts +1 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
- package/dist/src/base/BaseDots.d.ts +1 -1
- package/dist/src/base/BaseLineAreas.d.ts +1 -1
- package/dist/src/base/BaseLines.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +2 -1
- package/dist/src/multiGrid/index.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +4 -4
- package/package.json +42 -42
- package/src/base/BaseBarStack.ts +881 -879
- package/src/base/BaseBars.ts +750 -748
- package/src/base/BaseBarsTriangle.ts +659 -657
- package/src/base/BaseDots.ts +639 -637
- package/src/base/BaseGroupAxis.ts +496 -496
- package/src/base/BaseLegend.ts +636 -636
- package/src/base/BaseLineAreas.ts +621 -624
- package/src/base/BaseLines.ts +692 -695
- package/src/base/BaseValueAxis.ts +479 -479
- package/src/base/types.ts +2 -2
- package/src/grid/defaults.ts +121 -121
- package/src/grid/gridObservables.ts +263 -263
- package/src/grid/index.ts +15 -15
- package/src/grid/plugins/BarStack.ts +37 -37
- package/src/grid/plugins/Bars.ts +37 -37
- package/src/grid/plugins/BarsDiverging.ts +39 -39
- package/src/grid/plugins/BarsTriangle.ts +34 -34
- package/src/grid/plugins/Dots.ts +35 -35
- package/src/grid/plugins/GridLegend.ts +58 -58
- package/src/grid/plugins/GroupAux.ts +643 -643
- package/src/grid/plugins/GroupAxis.ts +30 -30
- package/src/grid/plugins/LineAreas.ts +36 -36
- package/src/grid/plugins/Lines.ts +35 -35
- package/src/grid/plugins/ScalingArea.ts +174 -174
- package/src/grid/plugins/ValueAxis.ts +31 -31
- package/src/grid/plugins/ValueStackAxis.ts +70 -70
- package/src/grid/types.ts +120 -120
- package/src/index.ts +9 -9
- package/src/multiGrid/defaults.ts +147 -140
- package/src/multiGrid/index.ts +11 -10
- package/src/multiGrid/multiGridObservables.ts +289 -278
- package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
- package/src/multiGrid/plugins/MultiBars.ts +59 -59
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
- package/src/multiGrid/plugins/MultiDots.ts +58 -58
- package/src/multiGrid/plugins/MultiGridLegend.ts +88 -88
- package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
- package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
- package/src/multiGrid/plugins/MultiLines.ts +58 -58
- package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -165
- package/src/multiGrid/types.ts +67 -67
- package/src/noneData/defaults.ts +61 -61
- package/src/noneData/index.ts +3 -3
- package/src/noneData/plugins/Container.ts +10 -10
- package/src/noneData/plugins/Tooltip.ts +304 -304
- package/src/noneData/types.ts +26 -26
- package/src/series/defaults.ts +99 -99
- package/src/series/index.ts +6 -6
- package/src/series/plugins/Bubbles.ts +551 -549
- package/src/series/plugins/Pie.ts +600 -598
- package/src/series/plugins/PieEventTexts.ts +194 -194
- package/src/series/plugins/PieLabels.ts +288 -285
- package/src/series/plugins/SeriesLegend.ts +58 -58
- package/src/series/seriesUtils.ts +50 -50
- package/src/series/types.ts +67 -67
- package/src/tree/defaults.ts +22 -22
- package/src/tree/index.ts +3 -3
- package/src/tree/plugins/TreeLegend.ts +58 -58
- package/src/tree/plugins/TreeMap.ts +302 -300
- package/src/tree/types.ts +23 -23
- package/src/utils/commonUtils.ts +21 -21
- package/src/utils/d3Graphics.ts +124 -124
- package/src/utils/d3Utils.ts +73 -73
- package/src/utils/observables.ts +14 -14
- package/src/utils/orbchartsUtils.ts +100 -100
- package/tsconfig.dev.json +16 -16
- package/tsconfig.json +13 -13
- package/tsconfig.prod.json +13 -13
- 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
|
})
|