@orbcharts/plugins-basic 3.0.0-alpha.44 → 3.0.0-alpha.46
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 +7770 -7580
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseBarStack.d.ts +6 -4
- package/dist/src/base/BaseBars.d.ts +6 -4
- package/dist/src/base/BaseBarsTriangle.d.ts +7 -4
- package/dist/src/base/BaseDots.d.ts +5 -3
- package/dist/src/base/BaseGroupAxis.d.ts +3 -3
- package/dist/src/base/BaseLineAreas.d.ts +6 -3
- package/dist/src/base/BaseLines.d.ts +6 -3
- package/dist/src/base/BaseValueAxis.d.ts +3 -3
- package/dist/src/grid/gridObservables.d.ts +4 -4
- package/dist/src/multiGrid/multiGridObservables.d.ts +2 -6
- package/dist/src/series/plugins/PieEventTexts.d.ts +3 -1
- package/dist/src/series/seriesObservables.d.ts +21 -0
- package/dist/src/series/seriesUtils.d.ts +3 -3
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +105 -208
- package/src/base/BaseBars.ts +78 -64
- package/src/base/BaseBarsTriangle.ts +76 -63
- package/src/base/BaseDots.ts +41 -178
- package/src/base/BaseGroupAxis.ts +13 -13
- package/src/base/BaseLineAreas.ts +85 -81
- package/src/base/BaseLines.ts +82 -75
- package/src/base/BaseValueAxis.ts +14 -15
- package/src/grid/gridObservables.ts +22 -38
- package/src/grid/plugins/BarStack.ts +16 -3
- package/src/grid/plugins/Bars.ts +18 -4
- package/src/grid/plugins/BarsDiverging.ts +6 -4
- package/src/grid/plugins/BarsTriangle.ts +20 -4
- package/src/grid/plugins/Dots.ts +4 -2
- package/src/grid/plugins/GroupAux.ts +1 -2
- package/src/grid/plugins/GroupAxis.ts +15 -3
- package/src/grid/plugins/LineAreas.ts +5 -2
- package/src/grid/plugins/Lines.ts +5 -2
- package/src/grid/plugins/ScalingArea.ts +0 -1
- package/src/grid/plugins/ValueAxis.ts +15 -3
- package/src/grid/plugins/ValueStackAxis.ts +14 -5
- package/src/multiGrid/multiGridObservables.ts +14 -261
- package/src/multiGrid/plugins/MultiBarStack.ts +22 -8
- package/src/multiGrid/plugins/MultiBars.ts +21 -7
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +22 -7
- package/src/multiGrid/plugins/MultiDots.ts +7 -5
- package/src/multiGrid/plugins/MultiGridLegend.ts +1 -1
- package/src/multiGrid/plugins/MultiGroupAxis.ts +19 -7
- package/src/multiGrid/plugins/MultiLineAreas.ts +9 -6
- package/src/multiGrid/plugins/MultiLines.ts +9 -6
- package/src/multiGrid/plugins/MultiValueAxis.ts +19 -7
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +52 -47
- package/src/noneData/defaults.ts +3 -0
- package/src/series/defaults.ts +13 -3
- package/src/series/plugins/Bubbles.ts +139 -88
- package/src/series/plugins/Pie.ts +307 -352
- package/src/series/plugins/PieEventTexts.ts +102 -38
- package/src/series/plugins/PieLabels.ts +95 -48
- package/src/series/seriesObservables.ts +145 -0
- package/src/series/seriesUtils.ts +4 -4
- package/tsconfig.json +1 -1
@@ -14,7 +14,8 @@ import type {
|
|
14
14
|
DataSeries,
|
15
15
|
EventName,
|
16
16
|
ComputedDataSeries,
|
17
|
-
ComputedDatumSeries
|
17
|
+
ComputedDatumSeries,
|
18
|
+
SeriesContainerPosition } from '@orbcharts/core'
|
18
19
|
import {
|
19
20
|
defineSeriesPlugin } from '@orbcharts/core'
|
20
21
|
import type { BubblesParams, BubbleScaleType } from '../types'
|
@@ -28,6 +29,8 @@ interface BubblesDatum extends ComputedDatumSeries {
|
|
28
29
|
_originR: number // 紀錄變化前的r
|
29
30
|
}
|
30
31
|
|
32
|
+
type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
|
33
|
+
|
31
34
|
let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
|
32
35
|
|
33
36
|
function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
|
@@ -81,11 +84,12 @@ function getMaxR ({ data, bubbleGroupR, maxValue, avgValue }: {
|
|
81
84
|
return maxR * modifier
|
82
85
|
}
|
83
86
|
|
84
|
-
function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, scaleType }: {
|
87
|
+
function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, SeriesContainerPositionMap, scaleType }: {
|
85
88
|
data: ComputedDataSeries
|
86
89
|
LastBubbleDataMap: Map<string, BubblesDatum>
|
87
90
|
graphicWidth: number
|
88
91
|
graphicHeight: number
|
92
|
+
SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
|
89
93
|
scaleType: BubbleScaleType
|
90
94
|
// highlightIds: string[]
|
91
95
|
}) {
|
@@ -124,8 +128,9 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
|
|
124
128
|
d.x = existDatum.x
|
125
129
|
d.y = existDatum.y
|
126
130
|
} else {
|
127
|
-
|
128
|
-
d.
|
131
|
+
const seriesContainerPosition = SeriesContainerPositionMap.get(d.seriesLabel)!
|
132
|
+
d.x = Math.random() * seriesContainerPosition.width
|
133
|
+
d.y = Math.random() * seriesContainerPosition.height
|
129
134
|
}
|
130
135
|
const r = scaleBubbleR!(d.value ?? 0)!
|
131
136
|
d.r = r
|
@@ -137,46 +142,55 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
|
|
137
142
|
return bubbleData
|
138
143
|
}
|
139
144
|
|
140
|
-
function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
|
145
|
+
function renderBubbles ({ graphicSelection, bubblesData, fullParams, sumSeries }: {
|
141
146
|
graphicSelection: d3.Selection<SVGGElement, any, any, any>
|
142
147
|
bubblesData: BubblesDatum[]
|
143
148
|
fullParams: BubblesParams
|
149
|
+
sumSeries: boolean
|
144
150
|
}) {
|
145
|
-
|
151
|
+
const bubblesSelection = graphicSelection.selectAll<SVGGElement, BubblesDatum>("g")
|
146
152
|
.data(bubblesData, (d) => d.id)
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
153
|
+
.join(
|
154
|
+
enter => {
|
155
|
+
const enterSelection = enter
|
156
|
+
.append('g')
|
157
|
+
.attr('cursor', 'pointer')
|
158
|
+
.attr('font-size', 12)
|
159
|
+
.style('fill', '#ffffff')
|
160
|
+
.attr("text-anchor", "middle")
|
161
|
+
|
162
|
+
enterSelection
|
163
|
+
.append("circle")
|
164
|
+
.attr("class", "node")
|
165
|
+
.attr("cx", 0)
|
166
|
+
.attr("cy", 0)
|
167
|
+
// .attr("r", 1e-6)
|
168
|
+
.attr('fill', (d) => d.color)
|
169
|
+
// .transition()
|
170
|
+
// .duration(500)
|
171
|
+
|
172
|
+
enterSelection
|
173
|
+
.append('text')
|
174
|
+
.style('opacity', 0.8)
|
175
|
+
.attr('pointer-events', 'none')
|
176
|
+
|
177
|
+
return enterSelection
|
178
|
+
},
|
179
|
+
update => {
|
180
|
+
return update
|
181
|
+
},
|
182
|
+
exit => {
|
183
|
+
return exit
|
184
|
+
.remove()
|
185
|
+
}
|
186
|
+
)
|
154
187
|
.attr("transform", (d) => {
|
155
188
|
return `translate(${d.x},${d.y})`
|
156
189
|
})
|
157
|
-
// .attr("cx", (d) => d.x)
|
158
|
-
// .attr("cy", (d) => d.y)
|
159
|
-
|
160
|
-
enter
|
161
|
-
.append("circle")
|
162
|
-
.attr("class", "node")
|
163
|
-
// update.merge(enter)
|
164
|
-
.attr("cx", 0)
|
165
|
-
.attr("cy", 0)
|
166
|
-
// .attr("r", 1e-6)
|
167
|
-
.attr('fill', (d) => d.color)
|
168
|
-
// .transition()
|
169
|
-
// .duration(500)
|
170
|
-
|
171
|
-
enter
|
172
|
-
.append('text')
|
173
|
-
.style('opacity', 0.8)
|
174
|
-
.attr('pointer-events', 'none')
|
175
|
-
|
176
|
-
update.exit().remove()
|
177
|
-
|
178
|
-
const bubblesSelection = update.merge(enter)
|
179
190
|
|
191
|
+
// 泡泡文字要使用的的資料欄位
|
192
|
+
const textDataColumn = sumSeries ? 'seriesLabel' : 'label'// 如果有合併series則使用seriesLabel
|
193
|
+
|
180
194
|
bubblesSelection.select('circle')
|
181
195
|
.transition()
|
182
196
|
.duration(200)
|
@@ -186,11 +200,11 @@ function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
|
|
186
200
|
.each((d,i,g) => {
|
187
201
|
const gSelection = d3.select(g[i])
|
188
202
|
let breakAll = true
|
189
|
-
if (d.
|
203
|
+
if (d[textDataColumn].length <= fullParams.bubbleText.lineLengthMin) {
|
190
204
|
breakAll = false
|
191
205
|
}
|
192
206
|
gSelection.call(renderCircleText, {
|
193
|
-
text: d
|
207
|
+
text: d[textDataColumn],
|
194
208
|
radius: d.r * fullParams.bubbleText.fillRate,
|
195
209
|
lineHeight: fullParams.bubbleText.lineHeight,
|
196
210
|
isBreakAll: breakAll
|
@@ -253,16 +267,22 @@ function drag (): d3.DragBehavior<Element, unknown, unknown> {
|
|
253
267
|
// return typeCenter ? typeCenter.x : 0
|
254
268
|
// }
|
255
269
|
|
256
|
-
function groupBubbles ({ fullParams,
|
270
|
+
function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
|
257
271
|
fullParams: BubblesParams
|
258
|
-
graphicWidth: number
|
259
|
-
graphicHeight: number
|
272
|
+
// graphicWidth: number
|
273
|
+
// graphicHeight: number
|
274
|
+
SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
|
260
275
|
}) {
|
276
|
+
// console.log('groupBubbles')
|
261
277
|
force!
|
262
278
|
// .force('x', d3.forceX().strength(fullParams.force.strength).x(graphicWidth / 2))
|
263
279
|
// .force('y', d3.forceY().strength(fullParams.force.strength).y(graphicHeight / 2))
|
264
|
-
.force('x', d3.forceX().strength(fullParams.force.strength).x(
|
265
|
-
|
280
|
+
.force('x', d3.forceX().strength(fullParams.force.strength).x((data: BubblesSimulationDatum) => {
|
281
|
+
return SeriesContainerPositionMap.get(data.seriesLabel)!.centerX
|
282
|
+
}))
|
283
|
+
.force('y', d3.forceY().strength(fullParams.force.strength).y((data: BubblesSimulationDatum) => {
|
284
|
+
return SeriesContainerPositionMap.get(data.seriesLabel)!.centerY
|
285
|
+
}))
|
266
286
|
|
267
287
|
force!.alpha(1).restart();
|
268
288
|
}
|
@@ -303,7 +323,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
303
323
|
const destroy$ = new Subject()
|
304
324
|
|
305
325
|
const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
|
306
|
-
const bubblesSelection$: Subject<d3.Selection<SVGGElement, BubblesDatum, any, any>> = new Subject()
|
326
|
+
// const bubblesSelection$: Subject<d3.Selection<SVGGElement, BubblesDatum, any, any>> = new Subject()
|
307
327
|
// 紀錄前一次bubble data
|
308
328
|
let LastBubbleDataMap: Map<string, BubblesDatum> = new Map()
|
309
329
|
|
@@ -312,23 +332,27 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
312
332
|
// force = makeForce(bubblesSelection, d)
|
313
333
|
// })
|
314
334
|
|
315
|
-
observer.
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
335
|
+
// observer.seriesContainerPosition$.subscribe(d => {
|
336
|
+
// console.log(d)
|
337
|
+
// })
|
338
|
+
|
339
|
+
// observer.layout$
|
340
|
+
// .pipe(
|
341
|
+
// first()
|
342
|
+
// )
|
343
|
+
// .subscribe(size => {
|
344
|
+
// selection
|
345
|
+
// .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
|
346
|
+
// observer.layout$
|
347
|
+
// .pipe(
|
348
|
+
// takeUntil(destroy$)
|
349
|
+
// )
|
350
|
+
// .subscribe(size => {
|
351
|
+
// selection
|
352
|
+
// .transition()
|
353
|
+
// .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
|
354
|
+
// })
|
355
|
+
// })
|
332
356
|
|
333
357
|
// const bubbleGroupR$ = layout$.pipe(
|
334
358
|
// map(d => {
|
@@ -361,6 +385,11 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
361
385
|
// map(d => makeSeriesDataMap(d))
|
362
386
|
// )
|
363
387
|
|
388
|
+
const sumSeries$ = observer.fullDataFormatter$.pipe(
|
389
|
+
map(d => d.sumSeries),
|
390
|
+
distinctUntilChanged()
|
391
|
+
)
|
392
|
+
|
364
393
|
const scaleType$ = observer.fullParams$.pipe(
|
365
394
|
takeUntil(destroy$),
|
366
395
|
map(d => d.bubbleScaleType),
|
@@ -370,18 +399,20 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
370
399
|
const bubblesData$ = new Observable<BubblesDatum[]>(subscriber => {
|
371
400
|
combineLatest({
|
372
401
|
layout: observer.layout$,
|
373
|
-
|
402
|
+
SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
|
403
|
+
visibleComputedLayoutData: observer.visibleComputedLayoutData$,
|
374
404
|
scaleType: scaleType$
|
375
405
|
}).pipe(
|
376
406
|
takeUntil(destroy$),
|
377
|
-
// 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
|
378
407
|
switchMap(async (d) => d),
|
379
408
|
).subscribe(data => {
|
409
|
+
// console.log(data.visibleComputedLayoutData)
|
380
410
|
const bubblesData = createBubblesData({
|
381
|
-
data: data.
|
411
|
+
data: data.visibleComputedLayoutData,
|
382
412
|
LastBubbleDataMap,
|
383
413
|
graphicWidth: data.layout.width,
|
384
414
|
graphicHeight: data.layout.height,
|
415
|
+
SeriesContainerPositionMap: data.SeriesContainerPositionMap,
|
385
416
|
scaleType: data.scaleType
|
386
417
|
})
|
387
418
|
subscriber.next(bubblesData)
|
@@ -399,30 +430,54 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
399
430
|
distinctUntilChanged()
|
400
431
|
)
|
401
432
|
|
433
|
+
const bubblesSelection$ = combineLatest({
|
434
|
+
bubblesData: bubblesData$,
|
435
|
+
fullParams: observer.fullParams$,
|
436
|
+
SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
|
437
|
+
sumSeries: sumSeries$
|
438
|
+
}).pipe(
|
439
|
+
takeUntil(destroy$),
|
440
|
+
switchMap(async (d) => d),
|
441
|
+
map(data => {
|
442
|
+
const bubblesSelection = renderBubbles({
|
443
|
+
graphicSelection,
|
444
|
+
bubblesData: data.bubblesData,
|
445
|
+
fullParams: data.fullParams,
|
446
|
+
sumSeries: data.sumSeries
|
447
|
+
})
|
448
|
+
|
449
|
+
force = makeForce(bubblesSelection, data.fullParams)
|
450
|
+
|
451
|
+
force.nodes(data.bubblesData)
|
452
|
+
|
453
|
+
groupBubbles({
|
454
|
+
fullParams: data.fullParams,
|
455
|
+
SeriesContainerPositionMap: data.SeriesContainerPositionMap
|
456
|
+
// graphicWidth: data.layout.width,
|
457
|
+
// graphicHeight: data.layout.height
|
458
|
+
})
|
459
|
+
|
460
|
+
return bubblesSelection
|
461
|
+
})
|
462
|
+
)
|
463
|
+
|
402
464
|
combineLatest({
|
465
|
+
bubblesSelection: bubblesSelection$,
|
403
466
|
layout: observer.layout$,
|
404
467
|
computedData: observer.computedData$,
|
405
468
|
bubblesData: bubblesData$,
|
406
469
|
SeriesDataMap: observer.SeriesDataMap$,
|
407
470
|
fullParams: observer.fullParams$,
|
408
|
-
highlightTarget: highlightTarget
|
471
|
+
highlightTarget: highlightTarget$,
|
472
|
+
SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
|
409
473
|
// fullChartParams: fullChartParams$
|
410
474
|
// highlight: highlight$
|
411
475
|
}).pipe(
|
412
476
|
takeUntil(destroy$),
|
413
|
-
|
414
|
-
switchMap(async (d) => d),
|
477
|
+
switchMap(async (d) => d)
|
415
478
|
).subscribe(data => {
|
416
479
|
|
417
|
-
|
418
|
-
graphicSelection,
|
419
|
-
bubblesData: data.bubblesData,
|
420
|
-
fullParams: data.fullParams
|
421
|
-
})
|
422
|
-
|
423
|
-
force = makeForce(bubblesSelection, data.fullParams)
|
424
|
-
|
425
|
-
bubblesSelection
|
480
|
+
data.bubblesSelection
|
426
481
|
.on('mouseover', (event, datum) => {
|
427
482
|
// this.tooltip!.setDatum({
|
428
483
|
// data: d,
|
@@ -495,15 +550,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
495
550
|
})
|
496
551
|
.call(drag() as any)
|
497
552
|
|
498
|
-
|
499
|
-
|
500
|
-
groupBubbles({
|
501
|
-
fullParams: data.fullParams,
|
502
|
-
graphicWidth: data.layout.width,
|
503
|
-
graphicHeight: data.layout.height
|
504
|
-
})
|
505
|
-
|
506
|
-
bubblesSelection$.next(bubblesSelection)
|
553
|
+
|
507
554
|
})
|
508
555
|
|
509
556
|
combineLatest({
|
@@ -514,7 +561,9 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
514
561
|
),
|
515
562
|
fullChartParams: observer.fullChartParams$,
|
516
563
|
fullParams: observer.fullParams$,
|
517
|
-
|
564
|
+
sumSeries: sumSeries$,
|
565
|
+
// layout: observer.layout$,
|
566
|
+
SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
|
518
567
|
}).pipe(
|
519
568
|
takeUntil(destroy$),
|
520
569
|
switchMap(async d => d)
|
@@ -534,14 +583,16 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
534
583
|
renderBubbles({
|
535
584
|
graphicSelection,
|
536
585
|
bubblesData: data.bubblesData,
|
537
|
-
fullParams: data.fullParams
|
586
|
+
fullParams: data.fullParams,
|
587
|
+
sumSeries: data.sumSeries
|
538
588
|
})
|
539
589
|
}
|
540
590
|
|
541
591
|
groupBubbles({
|
542
592
|
fullParams: data.fullParams,
|
543
|
-
|
544
|
-
|
593
|
+
SeriesContainerPositionMap: data.SeriesContainerPositionMap
|
594
|
+
// graphicWidth: data.layout.width,
|
595
|
+
// graphicHeight: data.layout.height
|
545
596
|
})
|
546
597
|
force!.nodes(data.bubblesData);
|
547
598
|
})
|