@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35
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.
- package/dist/orbcharts-plugins-basic.es.js +10246 -9523
- package/dist/orbcharts-plugins-basic.umd.js +10 -10
- package/dist/src/base/BaseBarStack.d.ts +5 -1
- package/dist/src/base/BaseBars.d.ts +5 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
- package/dist/src/base/BaseDots.d.ts +33 -0
- package/dist/src/base/BaseGroupAxis.d.ts +35 -0
- package/dist/src/base/BaseLines.d.ts +3 -1
- package/dist/src/base/BaseValueAxis.d.ts +36 -0
- package/dist/src/grid/defaults.d.ts +3 -3
- package/dist/src/grid/gridObservables.d.ts +18 -4
- package/dist/src/grid/index.d.ts +1 -1
- package/dist/src/grid/plugins/Dots.d.ts +1 -3
- package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
- package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
- package/dist/src/grid/types.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +9 -2
- package/dist/src/multiGrid/index.d.ts +8 -1
- package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
- package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +31 -0
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +375 -198
- package/src/base/BaseBars.ts +297 -191
- package/src/base/BaseBarsTriangle.ts +344 -229
- package/src/base/BaseDots.ts +634 -0
- package/src/base/BaseGroupAxis.ts +497 -0
- package/src/base/BaseLines.ts +180 -50
- package/src/base/BaseValueAxis.ts +475 -0
- package/src/grid/defaults.ts +3 -3
- package/src/grid/gridObservables.ts +147 -14
- package/src/grid/index.ts +1 -1
- package/src/grid/plugins/BarStack.ts +4 -0
- package/src/grid/plugins/Bars.ts +4 -0
- package/src/grid/plugins/BarsTriangle.ts +4 -0
- package/src/grid/plugins/Dots.ts +19 -410
- package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
- package/src/grid/plugins/GroupAxis.ts +16 -348
- package/src/grid/plugins/Lines.ts +2 -0
- package/src/grid/plugins/ScalingArea.ts +9 -6
- package/src/grid/plugins/ValueAxis.ts +13 -337
- package/src/grid/plugins/ValueStackAxis.ts +35 -336
- package/src/grid/types.ts +1 -1
- package/src/index.ts +1 -0
- package/src/multiGrid/defaults.ts +120 -14
- package/src/multiGrid/index.ts +9 -2
- package/src/multiGrid/multiGridObservables.ts +279 -0
- package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
- package/src/multiGrid/plugins/MultiBars.ts +59 -0
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
- package/src/multiGrid/plugins/MultiDots.ts +58 -0
- package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
- package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
- package/src/multiGrid/plugins/MultiLines.ts +58 -0
- package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
- package/src/multiGrid/types.ts +39 -0
- package/tsconfig.dev.json +17 -0
- package/tsconfig.prod.json +14 -0
- package/vite.config.js +5 -0
- package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
- package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
- package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
- package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
- package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
- package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
- package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
- package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
- package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
- /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
- /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
package/src/grid/plugins/Dots.ts
CHANGED
@@ -1,427 +1,36 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
1
|
import {
|
3
|
-
Observable,
|
4
|
-
combineLatest,
|
5
|
-
switchMap,
|
6
|
-
distinctUntilChanged,
|
7
|
-
filter,
|
8
|
-
first,
|
9
|
-
map,
|
10
|
-
takeUntil,
|
11
2
|
Subject } from 'rxjs'
|
12
3
|
import {
|
13
4
|
defineGridPlugin } from '@orbcharts/core'
|
14
|
-
import type {
|
15
|
-
ChartParams,
|
16
|
-
ComputedDatumGrid,
|
17
|
-
Layout } from '@orbcharts/core'
|
18
|
-
import type { DotsParams } from '../types'
|
19
5
|
import { DEFAULT_DOTS_PARAMS } from '../defaults'
|
20
|
-
import {
|
21
|
-
|
22
|
-
type ClipPathDatum = {
|
23
|
-
id: string;
|
24
|
-
// x: number;
|
25
|
-
// y: number;
|
26
|
-
width: number;
|
27
|
-
height: number;
|
28
|
-
}
|
6
|
+
import { createBaseDots } from '../../base/BaseDots'
|
29
7
|
|
30
8
|
const pluginName = 'Dots'
|
31
|
-
const gClassName = getClassName(pluginName, 'g')
|
32
|
-
const circleClassName = getClassName(pluginName, 'circle')
|
33
|
-
|
34
|
-
function renderDots ({ selection, data, fullParams, fullChartParams, graphicOppositeScale }: {
|
35
|
-
selection: d3.Selection<SVGGElement, any, any, any>
|
36
|
-
data: ComputedDatumGrid[]
|
37
|
-
fullParams: DotsParams
|
38
|
-
fullChartParams: ChartParams
|
39
|
-
graphicOppositeScale: [number, number]
|
40
|
-
}) {
|
41
|
-
const createEnterDuration = (enter: d3.Selection<d3.EnterElement, ComputedDatumGrid, SVGGElement, any>) => {
|
42
|
-
const enterSize = enter.size()
|
43
|
-
const eachDuration = fullChartParams.transitionDuration / enterSize
|
44
|
-
return eachDuration
|
45
|
-
}
|
46
|
-
// enterDuration
|
47
|
-
let enterDuration = 0
|
48
|
-
|
49
|
-
const dots = selection
|
50
|
-
.selectAll<SVGGElement, ComputedDatumGrid>('g')
|
51
|
-
.data(data, d => d.id)
|
52
|
-
.join(
|
53
|
-
enter => {
|
54
|
-
// enterDuration
|
55
|
-
enterDuration = createEnterDuration(enter)
|
56
|
-
|
57
|
-
return enter
|
58
|
-
.append('g')
|
59
|
-
.classed(gClassName, true)
|
60
|
-
},
|
61
|
-
update => update,
|
62
|
-
exit => exit.remove()
|
63
|
-
)
|
64
|
-
.attr('transform', d => `translate(${d.axisX}, ${d.axisY})`)
|
65
|
-
.each((d, i, g) => {
|
66
|
-
const circle = d3.select(g[i])
|
67
|
-
.selectAll('circle')
|
68
|
-
.data([d])
|
69
|
-
.join(
|
70
|
-
enter => {
|
71
|
-
return enter
|
72
|
-
.append('circle')
|
73
|
-
.style('cursor', 'pointer')
|
74
|
-
.style('vector-effect', 'non-scaling-stroke')
|
75
|
-
.classed(circleClassName, true)
|
76
|
-
.attr('opacity', 0)
|
77
|
-
.transition()
|
78
|
-
.delay((_d, _i) => {
|
79
|
-
return i * enterDuration
|
80
|
-
})
|
81
|
-
.attr('opacity', 1)
|
82
|
-
},
|
83
|
-
update => {
|
84
|
-
return update
|
85
|
-
.transition()
|
86
|
-
.duration(50)
|
87
|
-
// .attr('cx', d => d.axisX)
|
88
|
-
// .attr('cy', d => d.axisY)
|
89
|
-
.attr('opacity', 1)
|
90
|
-
},
|
91
|
-
exit => exit.remove()
|
92
|
-
)
|
93
|
-
.attr('r', fullParams.radius)
|
94
|
-
.attr('fill', (d, i) => getDatumColor({ datum: d, colorType: fullParams.fillColorType, fullChartParams }))
|
95
|
-
.attr('stroke', (d, i) => getDatumColor({ datum: d, colorType: fullParams.strokeColorType, fullChartParams }))
|
96
|
-
.attr('stroke-width', fullParams.strokeWidth)
|
97
|
-
.attr('transform', `scale(${graphicOppositeScale[0]}, ${graphicOppositeScale[1]})`)
|
98
|
-
})
|
99
|
-
|
100
|
-
return dots
|
101
|
-
}
|
102
|
-
|
103
|
-
|
104
|
-
function highlightDots ({ selection, ids, onlyShowHighlighted, fullChartParams }: {
|
105
|
-
selection: d3.Selection<SVGGElement, ComputedDatumGrid, any, any>
|
106
|
-
ids: string[]
|
107
|
-
onlyShowHighlighted: boolean
|
108
|
-
fullChartParams: ChartParams
|
109
|
-
}) {
|
110
|
-
selection.interrupt('highlight')
|
111
|
-
if (!ids.length) {
|
112
|
-
// remove highlight
|
113
|
-
selection
|
114
|
-
.transition('highlight')
|
115
|
-
.duration(200)
|
116
|
-
.style('opacity', onlyShowHighlighted === true ? 0 : 1)
|
117
|
-
return
|
118
|
-
}
|
119
|
-
|
120
|
-
selection
|
121
|
-
.each((d, i, n) => {
|
122
|
-
if (ids.includes(d.id)) {
|
123
|
-
d3.select(n[i])
|
124
|
-
.style('opacity', 1)
|
125
|
-
.transition('highlight')
|
126
|
-
.duration(200)
|
127
|
-
} else {
|
128
|
-
d3.select(n[i])
|
129
|
-
.style('opacity', onlyShowHighlighted === true ? 0 : fullChartParams.styles.unhighlightedOpacity)
|
130
|
-
.transition('highlight')
|
131
|
-
.duration(200)
|
132
|
-
}
|
133
|
-
})
|
134
|
-
}
|
135
|
-
|
136
|
-
function renderClipPath ({ defsSelection, clipPathData }: {
|
137
|
-
defsSelection: d3.Selection<SVGDefsElement, any, any, any>
|
138
|
-
clipPathData: ClipPathDatum[]
|
139
|
-
}) {
|
140
|
-
const clipPath = defsSelection
|
141
|
-
.selectAll<SVGClipPathElement, Layout>('clipPath')
|
142
|
-
.data(clipPathData)
|
143
|
-
.join(
|
144
|
-
enter => {
|
145
|
-
return enter
|
146
|
-
.append('clipPath')
|
147
|
-
},
|
148
|
-
update => update,
|
149
|
-
exit => exit.remove()
|
150
|
-
)
|
151
|
-
.attr('id', d => d.id)
|
152
|
-
.each((d, i, g) => {
|
153
|
-
const rect = d3.select(g[i])
|
154
|
-
.selectAll<SVGRectElement, typeof d>('rect')
|
155
|
-
.data([d])
|
156
|
-
.join('rect')
|
157
|
-
.attr('x', 0)
|
158
|
-
.attr('y', 0)
|
159
|
-
.attr('width', _d => _d.width)
|
160
|
-
.attr('height', _d => _d.height)
|
161
|
-
})
|
162
|
-
|
163
|
-
}
|
164
9
|
|
165
10
|
export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
|
166
|
-
// const axisGUpdate = selection
|
167
|
-
// .selectAll('g')
|
168
|
-
// .data()
|
169
|
-
const destroy$ = new Subject()
|
170
|
-
|
171
|
-
const clipPathID = getUniID(pluginName, 'clipPath-box')
|
172
|
-
|
173
|
-
// const rectSelection: d3.Selection<SVGRectElement, any, any, any> = selection
|
174
|
-
// .append('rect')
|
175
|
-
// .attr('pointer-events', 'none')
|
176
|
-
const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
|
177
|
-
.append('g')
|
178
|
-
.attr('clip-path', `url(#${clipPathID})`)
|
179
|
-
const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
|
180
|
-
const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
|
181
|
-
const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
|
182
|
-
// const dotSelection$: Subject<d3.Selection<SVGCircleElement, ComputedDatumGrid, SVGGElement, any>> = new Subject()
|
183
|
-
|
184
|
-
observer.gridAxesTransform$
|
185
|
-
.pipe(
|
186
|
-
takeUntil(destroy$),
|
187
|
-
map(d => d.value),
|
188
|
-
distinctUntilChanged()
|
189
|
-
).subscribe(d => {
|
190
|
-
axisSelection
|
191
|
-
.style('transform', d)
|
192
|
-
})
|
193
|
-
|
194
|
-
observer.gridGraphicTransform$
|
195
|
-
.pipe(
|
196
|
-
takeUntil(destroy$),
|
197
|
-
switchMap(async d => d.value),
|
198
|
-
distinctUntilChanged()
|
199
|
-
).subscribe(d => {
|
200
|
-
dataAreaSelection
|
201
|
-
.transition()
|
202
|
-
.duration(50)
|
203
|
-
.style('transform', d)
|
204
|
-
})
|
205
|
-
|
206
|
-
const graphicOppositeScale$: Observable<[number, number]> = observer.gridGraphicTransform$.pipe(
|
207
|
-
takeUntil(destroy$),
|
208
|
-
map(d => [1 / d.scale[0], 1 / d.scale[1]])
|
209
|
-
)
|
210
|
-
|
211
|
-
// const axisSize$ = gridAxisSizeObservable({
|
212
|
-
// dataFormatter$,
|
213
|
-
// observer.layout$
|
214
|
-
// })
|
215
|
-
|
216
|
-
// combineLatest({
|
217
|
-
// axisSized: axisSize$,
|
218
|
-
// computedLayout: observer.layout$
|
219
|
-
// }).pipe(
|
220
|
-
// takeUntil(destroy$),
|
221
|
-
// // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
|
222
|
-
// switchMap(async (d) => d),
|
223
|
-
// ).subscribe(d => {
|
224
|
-
// rectSelection
|
225
|
-
// .style('transform', d.computedLayout.content.axesTransform)
|
226
|
-
// .attr('opacity', 0)
|
227
|
-
// .attr('width', d.axisSized.width)
|
228
|
-
// .attr('height', d.axisSized.height)
|
229
|
-
// // .transition()
|
230
|
-
// // .attr('opacity', 1)
|
231
|
-
// })
|
232
|
-
// selection.on('mouseover', (event, datum) => {
|
233
|
-
|
234
|
-
// console.log('selection mouseover', event, datum)
|
235
|
-
// })
|
236
|
-
|
237
|
-
const clipPathSubscription = observer.gridAxesSize$.pipe(
|
238
|
-
takeUntil(destroy$),
|
239
|
-
// 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
|
240
|
-
switchMap(async (d) => d),
|
241
|
-
).subscribe(data => {
|
242
|
-
// 外層的遮罩
|
243
|
-
const clipPathData = [{
|
244
|
-
id: clipPathID,
|
245
|
-
width: data.width,
|
246
|
-
height: data.height
|
247
|
-
}]
|
248
|
-
renderClipPath({
|
249
|
-
defsSelection,
|
250
|
-
clipPathData,
|
251
|
-
})
|
252
|
-
})
|
253
|
-
|
254
|
-
// const visibleComputedData$ = observer.computedData$.pipe(
|
255
|
-
// map(computedData => {
|
256
|
-
// return computedData
|
257
|
-
// .map(d => {
|
258
|
-
// return d.filter(_d => _d.visible == true)
|
259
|
-
// })
|
260
|
-
// })
|
261
|
-
// )
|
262
|
-
|
263
|
-
// const SeriesDataMap$ = visibleComputedData$.pipe(
|
264
|
-
// map(d => makeGridSeriesDataMap(d))
|
265
|
-
// )
|
266
|
-
|
267
|
-
// const GroupDataMap$ = visibleComputedData$.pipe(
|
268
|
-
// map(d => makeGridGroupDataMap(d))
|
269
|
-
// )
|
270
|
-
|
271
|
-
// const DataMap$ = computedData$.pipe(
|
272
|
-
// map(d => {
|
273
|
-
// const DataMap: Map<string, ComputedDatumGrid> = new Map()
|
274
|
-
// d.flat().forEach(_d => DataMap.set(_d.id, _d))
|
275
|
-
// return DataMap
|
276
|
-
// })
|
277
|
-
// )
|
278
|
-
|
279
|
-
const highlightTarget$ = observer.fullChartParams$.pipe(
|
280
|
-
takeUntil(destroy$),
|
281
|
-
map(d => d.highlightTarget),
|
282
|
-
distinctUntilChanged()
|
283
|
-
)
|
284
|
-
|
285
|
-
combineLatest({
|
286
|
-
computedData: observer.computedData$,
|
287
|
-
visibleComputedData: observer.visibleComputedData$,
|
288
|
-
SeriesDataMap: observer.SeriesDataMap$,
|
289
|
-
GroupDataMap: observer.GroupDataMap$,
|
290
|
-
graphicOppositeScale: graphicOppositeScale$,
|
291
|
-
fullChartParams: observer.fullChartParams$,
|
292
|
-
fullParams: observer.fullParams$,
|
293
|
-
highlightTarget: highlightTarget$
|
294
|
-
}).pipe(
|
295
|
-
takeUntil(destroy$),
|
296
|
-
// 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
|
297
|
-
switchMap(async (d) => d),
|
298
|
-
).subscribe(data => {
|
299
|
-
|
300
|
-
const graphicSelection = renderDots({
|
301
|
-
selection: dataAreaSelection,
|
302
|
-
data: data.visibleComputedData.flat(),
|
303
|
-
fullParams: data.fullParams,
|
304
|
-
fullChartParams: data.fullChartParams,
|
305
|
-
graphicOppositeScale: data.graphicOppositeScale
|
306
|
-
})
|
307
|
-
|
308
|
-
graphicSelection
|
309
|
-
.on('mouseover', (event, datum) => {
|
310
|
-
event.stopPropagation()
|
311
11
|
|
312
|
-
|
313
|
-
type: 'grid',
|
314
|
-
eventName: 'mouseover',
|
315
|
-
pluginName: name,
|
316
|
-
highlightTarget: data.highlightTarget,
|
317
|
-
datum,
|
318
|
-
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
319
|
-
seriesIndex: datum.seriesIndex,
|
320
|
-
seriesLabel: datum.seriesLabel,
|
321
|
-
groups: data.GroupDataMap.get(datum.groupLabel)!,
|
322
|
-
groupIndex: datum.groupIndex,
|
323
|
-
groupLabel: datum.groupLabel,
|
324
|
-
event,
|
325
|
-
data: data.computedData
|
326
|
-
})
|
327
|
-
})
|
328
|
-
.on('mousemove', (event, datum) => {
|
329
|
-
event.stopPropagation()
|
330
|
-
|
331
|
-
subject.event$.next({
|
332
|
-
type: 'grid',
|
333
|
-
eventName: 'mousemove',
|
334
|
-
pluginName: name,
|
335
|
-
highlightTarget: data.highlightTarget,
|
336
|
-
data: data.computedData,
|
337
|
-
datum,
|
338
|
-
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
339
|
-
seriesIndex: datum.seriesIndex,
|
340
|
-
seriesLabel: datum.seriesLabel,
|
341
|
-
groups: data.GroupDataMap.get(datum.groupLabel)!,
|
342
|
-
groupIndex: datum.groupIndex,
|
343
|
-
groupLabel: datum.groupLabel,
|
344
|
-
event
|
345
|
-
})
|
346
|
-
})
|
347
|
-
.on('mouseout', (event, datum) => {
|
348
|
-
event.stopPropagation()
|
349
|
-
|
350
|
-
subject.event$.next({
|
351
|
-
type: 'grid',
|
352
|
-
eventName: 'mouseout',
|
353
|
-
pluginName: name,
|
354
|
-
highlightTarget: data.highlightTarget,
|
355
|
-
datum,
|
356
|
-
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
357
|
-
seriesIndex: datum.seriesIndex,
|
358
|
-
seriesLabel: datum.seriesLabel,
|
359
|
-
groups: data.GroupDataMap.get(datum.groupLabel)!,
|
360
|
-
groupIndex: datum.groupIndex,
|
361
|
-
groupLabel: datum.groupLabel,
|
362
|
-
event,
|
363
|
-
data: data.computedData
|
364
|
-
})
|
365
|
-
})
|
366
|
-
.on('click', (event, datum) => {
|
367
|
-
event.stopPropagation()
|
368
|
-
|
369
|
-
subject.event$.next({
|
370
|
-
type: 'grid',
|
371
|
-
eventName: 'click',
|
372
|
-
pluginName: name,
|
373
|
-
highlightTarget: data.highlightTarget,
|
374
|
-
datum,
|
375
|
-
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
376
|
-
seriesIndex: datum.seriesIndex,
|
377
|
-
seriesLabel: datum.seriesLabel,
|
378
|
-
groups: data.GroupDataMap.get(datum.groupLabel)!,
|
379
|
-
groupIndex: datum.groupIndex,
|
380
|
-
groupLabel: datum.groupLabel,
|
381
|
-
event,
|
382
|
-
data: data.computedData
|
383
|
-
})
|
384
|
-
})
|
385
|
-
|
386
|
-
graphicSelection$.next(graphicSelection)
|
387
|
-
|
388
|
-
})
|
12
|
+
const destroy$ = new Subject()
|
389
13
|
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
highlight: observer.gridHighlight$,
|
407
|
-
onlyShowHighlighted: onlyShowHighlighted$,
|
408
|
-
fullChartParams: observer.fullChartParams$
|
409
|
-
}).pipe(
|
410
|
-
takeUntil(destroy$),
|
411
|
-
switchMap(async d => d)
|
412
|
-
))
|
413
|
-
).subscribe(data => {
|
414
|
-
highlightDots({
|
415
|
-
selection: data.graphicSelection,
|
416
|
-
ids: data.highlight,
|
417
|
-
onlyShowHighlighted: data.onlyShowHighlighted,
|
418
|
-
fullChartParams: data.fullChartParams
|
419
|
-
})
|
14
|
+
const unsubscribeBaseBars = createBaseDots(pluginName, {
|
15
|
+
selection,
|
16
|
+
computedData$: observer.computedData$,
|
17
|
+
visibleComputedData$: observer.visibleComputedData$,
|
18
|
+
existedSeriesLabels$: observer.existedSeriesLabels$,
|
19
|
+
SeriesDataMap$: observer.SeriesDataMap$,
|
20
|
+
GroupDataMap$: observer.GroupDataMap$,
|
21
|
+
fullParams$: observer.fullParams$,
|
22
|
+
fullChartParams$: observer.fullChartParams$,
|
23
|
+
gridAxesTransform$: observer.gridAxesTransform$,
|
24
|
+
gridGraphicTransform$: observer.gridGraphicTransform$,
|
25
|
+
gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
|
26
|
+
gridAxesSize$: observer.gridAxesSize$,
|
27
|
+
gridHighlight$: observer.gridHighlight$,
|
28
|
+
gridContainer$: observer.gridContainer$,
|
29
|
+
event$: subject.event$,
|
420
30
|
})
|
421
31
|
|
422
|
-
|
423
32
|
return () => {
|
424
|
-
highlightSubscription.unsubscribe()
|
425
33
|
destroy$.next(undefined)
|
34
|
+
unsubscribeBaseBars()
|
426
35
|
}
|
427
36
|
})
|
@@ -24,7 +24,7 @@ import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
|
|
24
24
|
import { d3EventObservable } from '../../utils/observables'
|
25
25
|
import { gridGroupPositionFnObservable } from '../gridObservables'
|
26
26
|
import { createAxisPointScale } from '@orbcharts/core'
|
27
|
-
import type {
|
27
|
+
import type { GroupAuxParams } from '../types'
|
28
28
|
|
29
29
|
interface LineDatum {
|
30
30
|
id: string
|
@@ -41,14 +41,14 @@ interface LabelDatum {
|
|
41
41
|
y: number
|
42
42
|
}
|
43
43
|
|
44
|
-
const pluginName = '
|
44
|
+
const pluginName = 'GroupAux'
|
45
45
|
const labelClassName = getClassName(pluginName, 'label-box')
|
46
46
|
|
47
47
|
function createLineData ({ groupLabel, axisX, axisHeight, fullParams }: {
|
48
48
|
groupLabel: string
|
49
49
|
axisX: number
|
50
50
|
axisHeight: number
|
51
|
-
fullParams:
|
51
|
+
fullParams: GroupAuxParams
|
52
52
|
}): LineDatum[] {
|
53
53
|
return fullParams.showLine && groupLabel
|
54
54
|
? [{
|
@@ -65,7 +65,7 @@ function renderLine ({ selection, pluginName, lineData, fullParams, fullChartPar
|
|
65
65
|
selection: d3.Selection<any, unknown, any, unknown>
|
66
66
|
pluginName: string
|
67
67
|
lineData: LineDatum[]
|
68
|
-
fullParams:
|
68
|
+
fullParams: GroupAuxParams
|
69
69
|
fullChartParams: ChartParams
|
70
70
|
}) {
|
71
71
|
const gClassName = getClassName(pluginName, 'auxline')
|
@@ -114,7 +114,7 @@ function removeLine (selection: d3.Selection<any, unknown, any, unknown>) {
|
|
114
114
|
function createLabelData ({ groupLabel, axisX, fullParams }: {
|
115
115
|
groupLabel: string
|
116
116
|
axisX: number
|
117
|
-
fullParams:
|
117
|
+
fullParams: GroupAuxParams
|
118
118
|
}) {
|
119
119
|
return fullParams.showLabel && groupLabel
|
120
120
|
? [{
|
@@ -126,12 +126,12 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
|
|
126
126
|
: []
|
127
127
|
}
|
128
128
|
|
129
|
-
function renderLabel ({ selection, labelData, fullParams, fullChartParams,
|
129
|
+
function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
|
130
130
|
selection: d3.Selection<any, unknown, any, unknown>
|
131
131
|
labelData: LabelDatum[]
|
132
|
-
fullParams:
|
132
|
+
fullParams: GroupAuxParams
|
133
133
|
fullChartParams: ChartParams
|
134
|
-
|
134
|
+
gridAxesReverseTransformValue: string
|
135
135
|
}) {
|
136
136
|
const rectHeight = fullChartParams.styles.textSize + 4
|
137
137
|
|
@@ -176,7 +176,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
|
|
176
176
|
// .style('pointer-events', 'none')
|
177
177
|
const rect = rectUpdate.merge(rectEnter)
|
178
178
|
.attr('width', d => `${rectWidth}px`)
|
179
|
-
.style('transform',
|
179
|
+
.style('transform', gridAxesReverseTransformValue)
|
180
180
|
rectUpdate.exit().remove()
|
181
181
|
|
182
182
|
const textUpdate = d3.select(n[i])
|
@@ -190,7 +190,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
|
|
190
190
|
// .style('pointer-events', 'none')
|
191
191
|
const text = textUpdate.merge(textEnter)
|
192
192
|
.text(d => d.text)
|
193
|
-
.style('transform',
|
193
|
+
.style('transform', gridAxesReverseTransformValue)
|
194
194
|
.attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
|
195
195
|
.attr('font-size', fullChartParams.styles.textSize)
|
196
196
|
.attr('x', rectX + 6)
|
@@ -208,7 +208,7 @@ function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
|
|
208
208
|
gUpdate.exit().remove()
|
209
209
|
}
|
210
210
|
|
211
|
-
export const
|
211
|
+
export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
|
212
212
|
const destroy$ = new Subject()
|
213
213
|
|
214
214
|
const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
|
@@ -283,7 +283,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
283
283
|
// subscriber.next(transformData.value)
|
284
284
|
// })
|
285
285
|
// })
|
286
|
-
// const
|
286
|
+
// const reverseTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
|
287
287
|
// takeUntil(destroy$),
|
288
288
|
// map(d => {
|
289
289
|
// const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
|
@@ -303,12 +303,12 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
303
303
|
// )
|
304
304
|
// const contentTransform$ = combineLatest({
|
305
305
|
// fullParams: observer.fullParams$,
|
306
|
-
//
|
306
|
+
// reverseTransform: reverseTransform$
|
307
307
|
// }).pipe(
|
308
308
|
// takeUntil(destroy$),
|
309
309
|
// switchMap(async data => {
|
310
310
|
// const translate = [0, 0]
|
311
|
-
// return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.
|
311
|
+
// return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.reverseTransform.rotate}deg) rotateX(${data.reverseTransform.rotateX}deg) rotateY(${data.reverseTransform.rotateY}deg)`
|
312
312
|
// }),
|
313
313
|
// distinctUntilChanged()
|
314
314
|
// )
|
@@ -324,18 +324,18 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
324
324
|
).subscribe(data => {
|
325
325
|
const groupMin = 0
|
326
326
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
327
|
-
const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
|
328
|
-
? groupMin - data.fullDataFormatter.groupAxis.scalePadding
|
329
|
-
: data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
|
330
|
-
const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
|
331
|
-
? groupMax + data.fullDataFormatter.groupAxis.scalePadding
|
332
|
-
: data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
|
327
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
328
|
+
? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
329
|
+
: data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
330
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
|
331
|
+
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
332
|
+
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
333
333
|
|
334
334
|
const groupingLength = data.computedData[0]
|
335
335
|
? data.computedData[0].length
|
336
336
|
: 0
|
337
337
|
|
338
|
-
let _labels = data.fullDataFormatter.grid.
|
338
|
+
let _labels = data.fullDataFormatter.grid.gridData.seriesDirection === 'row'
|
339
339
|
// ? data.fullDataFormatter.grid.columnLabels
|
340
340
|
// : data.fullDataFormatter.grid.rowLabels
|
341
341
|
? (data.computedData[0] ?? []).map(d => d.groupLabel)
|
@@ -352,7 +352,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
352
352
|
})
|
353
353
|
|
354
354
|
|
355
|
-
const padding = data.fullDataFormatter.groupAxis.scalePadding
|
355
|
+
const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
|
356
356
|
|
357
357
|
const groupScale = createAxisPointScale({
|
358
358
|
axisLabels,
|
@@ -496,7 +496,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
496
496
|
fullParams: observer.fullParams$,
|
497
497
|
fullChartParams: observer.fullChartParams$,
|
498
498
|
highlightTarget: highlightTarget$,
|
499
|
-
|
499
|
+
gridAxesReverseTransform: observer.gridAxesReverseTransform$,
|
500
500
|
GroupDataMap: observer.GroupDataMap$,
|
501
501
|
gridGroupPositionFn: gridGroupPositionFn$,
|
502
502
|
}).pipe(
|
@@ -535,7 +535,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
|
|
535
535
|
labelData,
|
536
536
|
fullParams: data.fullParams,
|
537
537
|
fullChartParams: data.fullChartParams,
|
538
|
-
|
538
|
+
gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
|
539
539
|
})
|
540
540
|
|
541
541
|
// label的事件
|