@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.
Files changed (57) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +7770 -7580
  2. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  3. package/dist/src/base/BaseBarStack.d.ts +6 -4
  4. package/dist/src/base/BaseBars.d.ts +6 -4
  5. package/dist/src/base/BaseBarsTriangle.d.ts +7 -4
  6. package/dist/src/base/BaseDots.d.ts +5 -3
  7. package/dist/src/base/BaseGroupAxis.d.ts +3 -3
  8. package/dist/src/base/BaseLineAreas.d.ts +6 -3
  9. package/dist/src/base/BaseLines.d.ts +6 -3
  10. package/dist/src/base/BaseValueAxis.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +4 -4
  12. package/dist/src/multiGrid/multiGridObservables.d.ts +2 -6
  13. package/dist/src/series/plugins/PieEventTexts.d.ts +3 -1
  14. package/dist/src/series/seriesObservables.d.ts +21 -0
  15. package/dist/src/series/seriesUtils.d.ts +3 -3
  16. package/package.json +2 -2
  17. package/src/base/BaseBarStack.ts +105 -208
  18. package/src/base/BaseBars.ts +78 -64
  19. package/src/base/BaseBarsTriangle.ts +76 -63
  20. package/src/base/BaseDots.ts +41 -178
  21. package/src/base/BaseGroupAxis.ts +13 -13
  22. package/src/base/BaseLineAreas.ts +85 -81
  23. package/src/base/BaseLines.ts +82 -75
  24. package/src/base/BaseValueAxis.ts +14 -15
  25. package/src/grid/gridObservables.ts +22 -38
  26. package/src/grid/plugins/BarStack.ts +16 -3
  27. package/src/grid/plugins/Bars.ts +18 -4
  28. package/src/grid/plugins/BarsDiverging.ts +6 -4
  29. package/src/grid/plugins/BarsTriangle.ts +20 -4
  30. package/src/grid/plugins/Dots.ts +4 -2
  31. package/src/grid/plugins/GroupAux.ts +1 -2
  32. package/src/grid/plugins/GroupAxis.ts +15 -3
  33. package/src/grid/plugins/LineAreas.ts +5 -2
  34. package/src/grid/plugins/Lines.ts +5 -2
  35. package/src/grid/plugins/ScalingArea.ts +0 -1
  36. package/src/grid/plugins/ValueAxis.ts +15 -3
  37. package/src/grid/plugins/ValueStackAxis.ts +14 -5
  38. package/src/multiGrid/multiGridObservables.ts +14 -261
  39. package/src/multiGrid/plugins/MultiBarStack.ts +22 -8
  40. package/src/multiGrid/plugins/MultiBars.ts +21 -7
  41. package/src/multiGrid/plugins/MultiBarsTriangle.ts +22 -7
  42. package/src/multiGrid/plugins/MultiDots.ts +7 -5
  43. package/src/multiGrid/plugins/MultiGridLegend.ts +1 -1
  44. package/src/multiGrid/plugins/MultiGroupAxis.ts +19 -7
  45. package/src/multiGrid/plugins/MultiLineAreas.ts +9 -6
  46. package/src/multiGrid/plugins/MultiLines.ts +9 -6
  47. package/src/multiGrid/plugins/MultiValueAxis.ts +19 -7
  48. package/src/multiGrid/plugins/OverlappingValueAxes.ts +52 -47
  49. package/src/noneData/defaults.ts +3 -0
  50. package/src/series/defaults.ts +13 -3
  51. package/src/series/plugins/Bubbles.ts +139 -88
  52. package/src/series/plugins/Pie.ts +307 -352
  53. package/src/series/plugins/PieEventTexts.ts +102 -38
  54. package/src/series/plugins/PieLabels.ts +95 -48
  55. package/src/series/seriesObservables.ts +145 -0
  56. package/src/series/seriesUtils.ts +4 -4
  57. package/tsconfig.json +1 -1
@@ -14,7 +14,8 @@ import type {
14
14
  DataSeries,
15
15
  EventName,
16
16
  ComputedDataSeries,
17
- ComputedDatumSeries } from '@orbcharts/core'
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
- d.x = Math.random() * graphicWidth
128
- d.y = Math.random() * graphicHeight
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
- let update = graphicSelection.selectAll<SVGGElement, BubblesDatum>("g")
151
+ const bubblesSelection = graphicSelection.selectAll<SVGGElement, BubblesDatum>("g")
146
152
  .data(bubblesData, (d) => d.id)
147
- let enter = update.enter()
148
- .append<SVGGElement>("g")
149
- .attr('cursor', 'pointer')
150
- enter
151
- .attr('font-size', 12)
152
- .style('fill', '#ffffff')
153
- .attr("text-anchor", "middle")
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.label.length <= fullParams.bubbleText.lineLengthMin) {
203
+ if (d[textDataColumn].length <= fullParams.bubbleText.lineLengthMin) {
190
204
  breakAll = false
191
205
  }
192
206
  gSelection.call(renderCircleText, {
193
- text: d.label,
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, graphicWidth, graphicHeight }: {
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(0))
265
- .force('y', d3.forceY().strength(fullParams.force.strength).y(0))
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.layout$
316
- .pipe(
317
- first()
318
- )
319
- .subscribe(size => {
320
- selection
321
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
322
- observer.layout$
323
- .pipe(
324
- takeUntil(destroy$)
325
- )
326
- .subscribe(size => {
327
- selection
328
- .transition()
329
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
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
- computedData: observer.computedData$,
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.computedData,
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
- const bubblesSelection = renderBubbles({
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
- force!.nodes(data.bubblesData);
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
- layout: observer.layout$
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
- graphicWidth: data.layout.width,
544
- graphicHeight: data.layout.height
593
+ SeriesContainerPositionMap: data.SeriesContainerPositionMap
594
+ // graphicWidth: data.layout.width,
595
+ // graphicHeight: data.layout.height
545
596
  })
546
597
  force!.nodes(data.bubblesData);
547
598
  })