@orbcharts/plugins-basic 3.0.0-beta.12 → 3.0.0-beta.14

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 (21) hide show
  1. package/dist/orbcharts-plugins-basic/src/utils/d3Utils.d.ts +1 -0
  2. package/dist/orbcharts-plugins-basic.es.js +5578 -5463
  3. package/dist/orbcharts-plugins-basic.umd.js +161 -80
  4. package/package.json +4 -4
  5. package/src/base/BaseBars.ts +4 -4
  6. package/src/base/BaseBarsTriangle.ts +4 -4
  7. package/src/base/BaseDots.ts +4 -4
  8. package/src/base/BaseLineAreas.ts +4 -4
  9. package/src/base/BaseLines.ts +4 -4
  10. package/src/base/BaseStackedBar.ts +4 -4
  11. package/src/grid/defaults.ts +21 -17
  12. package/src/grid/plugins/GroupAux.ts +18 -18
  13. package/src/multiGrid/defaults.ts +20 -16
  14. package/src/relationship/defaults.ts +47 -25
  15. package/src/relationship/plugins/ForceDirectedBubbles.ts +8 -0
  16. package/src/series/defaults.ts +26 -3
  17. package/src/series/plugins/Bubbles.ts +15 -1
  18. package/src/tree/defaults.ts +26 -4
  19. package/src/tree/plugins/TreeMap.ts +11 -3
  20. package/src/utils/d3Utils.ts +18 -0
  21. package/src/utils/orbchartsUtils.ts +30 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orbcharts/plugins-basic",
3
- "version": "3.0.0-beta.12",
3
+ "version": "3.0.0-beta.14",
4
4
  "description": "plugins for OrbCharts",
5
5
  "author": "Blue Planet Inc.",
6
6
  "license": "Apache-2.0",
@@ -35,9 +35,9 @@
35
35
  "vite-plugin-dts": "^3.7.3"
36
36
  },
37
37
  "dependencies": {
38
- "@orbcharts/core": "^3.0.0-beta.8",
39
- "@orbcharts/core-types": "^3.0.0-beta.5",
40
- "@orbcharts/plugins-basic-types": "^3.0.0-beta.10",
38
+ "@orbcharts/core": "^3.0.0-beta.10",
39
+ "@orbcharts/core-types": "^3.0.0-beta.7",
40
+ "@orbcharts/plugins-basic-types": "^3.0.0-beta.12",
41
41
  "d3": "^7.8.5",
42
42
  "rxjs": "^7.8.1"
43
43
  }
package/src/base/BaseBars.ts CHANGED
@@ -672,7 +672,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
672
672
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
673
673
  seriesIndex: datum.seriesIndex,
674
674
  seriesLabel: datum.seriesLabel,
675
- groups: data.GroupDataMap.get(datum.groupLabel)!,
675
+ group: data.GroupDataMap.get(datum.groupLabel)!,
676
676
  groupIndex: datum.groupIndex,
677
677
  groupLabel: datum.groupLabel,
678
678
  event,
@@ -692,7 +692,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
692
692
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
693
693
  seriesIndex: datum.seriesIndex,
694
694
  seriesLabel: datum.seriesLabel,
695
- groups: data.GroupDataMap.get(datum.groupLabel)!,
695
+ group: data.GroupDataMap.get(datum.groupLabel)!,
696
696
  groupIndex: datum.groupIndex,
697
697
  groupLabel: datum.groupLabel,
698
698
  event,
@@ -712,7 +712,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
712
712
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
713
713
  seriesIndex: datum.seriesIndex,
714
714
  seriesLabel: datum.seriesLabel,
715
- groups: data.GroupDataMap.get(datum.groupLabel)!,
715
+ group: data.GroupDataMap.get(datum.groupLabel)!,
716
716
  groupIndex: datum.groupIndex,
717
717
  groupLabel: datum.groupLabel,
718
718
  event,
@@ -732,7 +732,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
732
732
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
733
733
  seriesIndex: datum.seriesIndex,
734
734
  seriesLabel: datum.seriesLabel,
735
- groups: data.GroupDataMap.get(datum.groupLabel)!,
735
+ group: data.GroupDataMap.get(datum.groupLabel)!,
736
736
  groupIndex: datum.groupIndex,
737
737
  groupLabel: datum.groupLabel,
738
738
  event,
package/src/base/BaseBarsTriangle.ts CHANGED
@@ -585,7 +585,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
585
585
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
586
586
  seriesIndex: datum.seriesIndex,
587
587
  seriesLabel: datum.seriesLabel,
588
- groups: data.GroupDataMap.get(datum.groupLabel)!,
588
+ group: data.GroupDataMap.get(datum.groupLabel)!,
589
589
  groupIndex: datum.groupIndex,
590
590
  groupLabel: datum.groupLabel,
591
591
  event,
@@ -605,7 +605,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
605
605
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
606
606
  seriesIndex: datum.seriesIndex,
607
607
  seriesLabel: datum.seriesLabel,
608
- groups: data.GroupDataMap.get(datum.groupLabel)!,
608
+ group: data.GroupDataMap.get(datum.groupLabel)!,
609
609
  groupIndex: datum.groupIndex,
610
610
  groupLabel: datum.groupLabel,
611
611
  event,
@@ -625,7 +625,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
625
625
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
626
626
  seriesIndex: datum.seriesIndex,
627
627
  seriesLabel: datum.seriesLabel,
628
- groups: data.GroupDataMap.get(datum.groupLabel)!,
628
+ group: data.GroupDataMap.get(datum.groupLabel)!,
629
629
  groupIndex: datum.groupIndex,
630
630
  groupLabel: datum.groupLabel,
631
631
  event,
@@ -645,7 +645,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
645
645
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
646
646
  seriesIndex: datum.seriesIndex,
647
647
  seriesLabel: datum.seriesLabel,
648
- groups: data.GroupDataMap.get(datum.groupLabel)!,
648
+ group: data.GroupDataMap.get(datum.groupLabel)!,
649
649
  groupIndex: datum.groupIndex,
650
650
  groupLabel: datum.groupLabel,
651
651
  event,
package/src/base/BaseDots.ts CHANGED
@@ -355,7 +355,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
355
355
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
356
356
  seriesIndex: datum.seriesIndex,
357
357
  seriesLabel: datum.seriesLabel,
358
- groups: data.GroupDataMap.get(datum.groupLabel)!,
358
+ group: data.GroupDataMap.get(datum.groupLabel)!,
359
359
  groupIndex: datum.groupIndex,
360
360
  groupLabel: datum.groupLabel,
361
361
  event,
@@ -376,7 +376,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
376
376
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
377
377
  seriesIndex: datum.seriesIndex,
378
378
  seriesLabel: datum.seriesLabel,
379
- groups: data.GroupDataMap.get(datum.groupLabel)!,
379
+ group: data.GroupDataMap.get(datum.groupLabel)!,
380
380
  groupIndex: datum.groupIndex,
381
381
  groupLabel: datum.groupLabel,
382
382
  event
@@ -395,7 +395,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
395
395
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
396
396
  seriesIndex: datum.seriesIndex,
397
397
  seriesLabel: datum.seriesLabel,
398
- groups: data.GroupDataMap.get(datum.groupLabel)!,
398
+ group: data.GroupDataMap.get(datum.groupLabel)!,
399
399
  groupIndex: datum.groupIndex,
400
400
  groupLabel: datum.groupLabel,
401
401
  event,
@@ -415,7 +415,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
415
415
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
416
416
  seriesIndex: datum.seriesIndex,
417
417
  seriesLabel: datum.seriesLabel,
418
- groups: data.GroupDataMap.get(datum.groupLabel)!,
418
+ group: data.GroupDataMap.get(datum.groupLabel)!,
419
419
  groupIndex: datum.groupIndex,
420
420
  groupLabel: datum.groupLabel,
421
421
  event,
package/src/base/BaseLineAreas.ts CHANGED
@@ -507,7 +507,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
507
507
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
508
508
  seriesIndex: _datum.seriesIndex,
509
509
  seriesLabel: _datum.seriesLabel,
510
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
510
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
511
511
  groupIndex: _datum.groupIndex,
512
512
  groupLabel: _datum.groupLabel,
513
513
  event,
@@ -533,7 +533,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
533
533
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
534
534
  seriesIndex: _datum.seriesIndex,
535
535
  seriesLabel: _datum.seriesLabel,
536
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
536
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
537
537
  groupIndex: _datum.groupIndex,
538
538
  groupLabel: _datum.groupLabel,
539
539
  event,
@@ -559,7 +559,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
559
559
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
560
560
  seriesIndex: _datum.seriesIndex,
561
561
  seriesLabel: _datum.seriesLabel,
562
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
562
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
563
563
  groupIndex: _datum.groupIndex,
564
564
  groupLabel: _datum.groupLabel,
565
565
  event,
@@ -585,7 +585,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
585
585
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
586
586
  seriesIndex: _datum.seriesIndex,
587
587
  seriesLabel: _datum.seriesLabel,
588
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
588
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
589
589
  groupIndex: _datum.groupIndex,
590
590
  groupLabel: _datum.groupLabel,
591
591
  event,
package/src/base/BaseLines.ts CHANGED
@@ -584,7 +584,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
584
584
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
585
585
  seriesIndex: _datum.seriesIndex,
586
586
  seriesLabel: _datum.seriesLabel,
587
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
587
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
588
588
  groupIndex: _datum.groupIndex,
589
589
  groupLabel: _datum.groupLabel,
590
590
  event,
@@ -610,7 +610,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
610
610
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
611
611
  seriesIndex: _datum.seriesIndex,
612
612
  seriesLabel: _datum.seriesLabel,
613
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
613
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
614
614
  groupIndex: _datum.groupIndex,
615
615
  groupLabel: _datum.groupLabel,
616
616
  event,
@@ -636,7 +636,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
636
636
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
637
637
  seriesIndex: _datum.seriesIndex,
638
638
  seriesLabel: _datum.seriesLabel,
639
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
639
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
640
640
  groupIndex: _datum.groupIndex,
641
641
  groupLabel: _datum.groupLabel,
642
642
  event,
@@ -662,7 +662,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
662
662
  series: data.SeriesDataMap.get(_datum.seriesLabel)!,
663
663
  seriesIndex: _datum.seriesIndex,
664
664
  seriesLabel: _datum.seriesLabel,
665
- groups: data.GroupDataMap.get(_datum.groupLabel)!,
665
+ group: data.GroupDataMap.get(_datum.groupLabel)!,
666
666
  groupIndex: _datum.groupIndex,
667
667
  groupLabel: _datum.groupLabel,
668
668
  event,
package/src/base/BaseStackedBar.ts CHANGED
@@ -684,7 +684,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
684
684
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
685
685
  seriesIndex: datum.seriesIndex,
686
686
  seriesLabel: datum.seriesLabel,
687
- groups: data.GroupDataMap.get(datum.groupLabel)!,
687
+ group: data.GroupDataMap.get(datum.groupLabel)!,
688
688
  groupIndex: datum.groupIndex,
689
689
  groupLabel: datum.groupLabel,
690
690
  event,
@@ -704,7 +704,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
704
704
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
705
705
  seriesIndex: datum.seriesIndex,
706
706
  seriesLabel: datum.seriesLabel,
707
- groups: data.GroupDataMap.get(datum.groupLabel)!,
707
+ group: data.GroupDataMap.get(datum.groupLabel)!,
708
708
  groupIndex: datum.groupIndex,
709
709
  groupLabel: datum.groupLabel,
710
710
  event,
@@ -724,7 +724,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
724
724
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
725
725
  seriesIndex: datum.seriesIndex,
726
726
  seriesLabel: datum.seriesLabel,
727
- groups: data.GroupDataMap.get(datum.groupLabel)!,
727
+ group: data.GroupDataMap.get(datum.groupLabel)!,
728
728
  groupIndex: datum.groupIndex,
729
729
  groupLabel: datum.groupLabel,
730
730
  event,
@@ -744,7 +744,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
744
744
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
745
745
  seriesIndex: datum.seriesIndex,
746
746
  seriesLabel: datum.seriesLabel,
747
- groups: data.GroupDataMap.get(datum.groupLabel)!,
747
+ group: data.GroupDataMap.get(datum.groupLabel)!,
748
748
  groupIndex: datum.groupIndex,
749
749
  groupLabel: datum.groupLabel,
750
750
  event,
package/src/grid/defaults.ts CHANGED
@@ -27,7 +27,7 @@ export const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams = {
27
27
 
28
28
  export const DEFAULT_DOTS_PARAMS: DotsParams = {
29
29
  radius: 4,
30
- fillColorType: 'white',
30
+ fillColorType: 'background',
31
31
  strokeColorType: 'label',
32
32
  strokeWidth: 2,
33
33
  // strokeWidthWhileHighlight: 3,
@@ -145,13 +145,13 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
145
145
  // const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
146
146
  // if (eventData.highlightTarget === 'group') {
147
147
  // const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
148
- // const maxLengthText = eventData.groups.reduce((acc, group) => {
148
+ // const maxLengthText = eventData.group.reduce((acc, group) => {
149
149
  // const text = `${group.seriesLabel}${group.value}`
150
150
  // return text.length > acc.length ? text : acc
151
151
  // }, '')
152
152
  // const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
153
153
  // const lineEndX = maxTextWidth + styles.textSizePx * 2
154
- // const contentSvg = eventData.groups
154
+ // const contentSvg = eventData.group
155
155
  // .map((group, i) => {
156
156
  // const y = i * styles.textSizePx * 1.5
157
157
  // return `<g transform="translate(0, ${styles.textSizePx * 2})">
@@ -194,14 +194,16 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
194
194
  const bulletWidth = styles.textSizePx * 0.7
195
195
  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
196
196
 
197
- const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
198
- const maxLengthText = eventData.groups.reduce((acc, group) => {
197
+ const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}" fill="${styles.textColor}">${eventData.groupLabel}</text></g>`
198
+ const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
199
+ const listTextWidth = eventData.group.reduce((acc, group) => {
199
200
  const text = `${group.seriesLabel}${group.value}`
200
- return text.length > acc.length ? text : acc
201
- }, '')
202
- const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
203
- const lineEndX = maxTextWidth + styles.textSizePx * 2
204
- const contentSvg = eventData.groups
201
+ const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
202
+ return _maxTextWidth > acc ? _maxTextWidth : acc
203
+ }, 0)
204
+ const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
205
+ const lineEndX = maxTextWidth + styles.textSizePx * 3
206
+ const contentSvg = eventData.group
205
207
  .map((group, i) => {
206
208
  const y = i * styles.textSizePx * 1.5
207
209
  const isHighlight = group.id === (eventData.datum && eventData.datum.id)
@@ -222,14 +224,16 @@ DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, uti
222
224
  const bulletWidth = styles.textSizePx * 0.7
223
225
  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
224
226
 
225
- const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}">\${eventData.groupLabel}</text></g>\`
226
- const maxLengthText = eventData.groups.reduce((acc, group) => {
227
+ const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}" fill="\${styles.textColor}">\${eventData.groupLabel}</text></g>\`
228
+ const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
229
+ const listTextWidth = eventData.group.reduce((acc, group) => {
227
230
  const text = \`\${group.seriesLabel}\${group.value}\`
228
- return text.length > acc.length ? text : acc
229
- }, '')
230
- const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
231
- const lineEndX = maxTextWidth + styles.textSizePx * 2
232
- const contentSvg = eventData.groups
231
+ const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
232
+ return _maxTextWidth > acc ? _maxTextWidth : acc
233
+ }, 0)
234
+ const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
235
+ const lineEndX = maxTextWidth + styles.textSizePx * 3
236
+ const contentSvg = eventData.group
233
237
  .map((group, i) => {
234
238
  const y = i * styles.textSizePx * 1.5
235
239
  const isHighlight = group.id === (eventData.datum && eventData.datum.id)
package/src/grid/plugins/GroupAux.ts CHANGED
@@ -611,8 +611,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
611
611
  // series: [],
612
612
  // seriesIndex: -1,
613
613
  // seriesLabel: '',
614
- // groups: data.GroupDataMap.get(groupLabel) ?? [],
615
- // // groups: [],
614
+ // group: data.GroupDataMap.get(groupLabel) ?? [],
615
+ // // group: [],
616
616
  // groupIndex,
617
617
  // groupLabel,
618
618
  // event,
@@ -634,8 +634,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
634
634
  // series: [],
635
635
  // seriesIndex: -1,
636
636
  // seriesLabel: '',
637
- // groups: data.GroupDataMap.get(groupLabel) ?? [],
638
- // // groups: [],
637
+ // group: data.GroupDataMap.get(groupLabel) ?? [],
638
+ // // group: [],
639
639
  // groupIndex,
640
640
  // groupLabel,
641
641
  // event,
@@ -657,8 +657,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
657
657
  // series: [],
658
658
  // seriesIndex: -1,
659
659
  // seriesLabel: '',
660
- // groups: data.GroupDataMap.get(groupLabel) ?? [],
661
- // // groups: [],
660
+ // group: data.GroupDataMap.get(groupLabel) ?? [],
661
+ // // group: [],
662
662
  // groupIndex,
663
663
  // groupLabel,
664
664
  // event,
@@ -680,8 +680,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
680
680
  // series: [],
681
681
  // seriesIndex: -1,
682
682
  // seriesLabel: '',
683
- // // groups: data.GroupDataMap.get(groupLabel) ?? [],
684
- // groups: [],
683
+ // // group: data.GroupDataMap.get(groupLabel) ?? [],
684
+ // group: [],
685
685
  // groupIndex,
686
686
  // groupLabel,
687
687
  // event,
@@ -858,7 +858,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
858
858
  series: [],
859
859
  seriesIndex: -1,
860
860
  seriesLabel: '',
861
- groups: data.GroupDataMap.get(groupLabel) ?? [],
861
+ group: data.GroupDataMap.get(groupLabel) ?? [],
862
862
  groupIndex,
863
863
  groupLabel,
864
864
  event,
@@ -879,7 +879,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
879
879
  series: [],
880
880
  seriesIndex: -1,
881
881
  seriesLabel: '',
882
- groups: data.GroupDataMap.get(groupLabel) ?? [],
882
+ group: data.GroupDataMap.get(groupLabel) ?? [],
883
883
  groupIndex,
884
884
  groupLabel,
885
885
  event,
@@ -902,7 +902,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
902
902
  series: [],
903
903
  seriesIndex: -1,
904
904
  seriesLabel: '',
905
- groups: data.GroupDataMap.get(groupLabel) ?? [],
905
+ group: data.GroupDataMap.get(groupLabel) ?? [],
906
906
  groupIndex,
907
907
  groupLabel,
908
908
  event,
@@ -923,7 +923,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
923
923
  series: [],
924
924
  seriesIndex: -1,
925
925
  seriesLabel: '',
926
- groups: data.GroupDataMap.get(groupLabel) ?? [],
926
+ group: data.GroupDataMap.get(groupLabel) ?? [],
927
927
  groupIndex,
928
928
  groupLabel,
929
929
  event,
@@ -952,8 +952,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
952
952
  // takeUntil(destroy$),
953
953
  // switchMap(async d => d)
954
954
  // ).subscribe(data => {
955
- // // const groups = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
956
- // // ? data.event.groups
955
+ // // const group = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
956
+ // // ? data.event.group
957
957
  // // : []
958
958
 
959
959
  // // const groupLabel = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
@@ -1004,7 +1004,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
1004
1004
  // series: [],
1005
1005
  // seriesIndex: -1,
1006
1006
  // seriesLabel: '',
1007
- // groups: data.event.groups,
1007
+ // group: data.event.group,
1008
1008
  // groupIndex,
1009
1009
  // groupLabel,
1010
1010
  // event,
@@ -1024,7 +1024,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
1024
1024
  // series: [],
1025
1025
  // seriesIndex: -1,
1026
1026
  // seriesLabel: '',
1027
- // groups: data.event.groups,
1027
+ // group: data.event.group,
1028
1028
  // groupIndex,
1029
1029
  // groupLabel,
1030
1030
  // event,
@@ -1044,7 +1044,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
1044
1044
  // series: [],
1045
1045
  // seriesIndex: -1,
1046
1046
  // seriesLabel: '',
1047
- // groups: data.event.groups,
1047
+ // group: data.event.group,
1048
1048
  // groupIndex,
1049
1049
  // groupLabel,
1050
1050
  // event,
@@ -1064,7 +1064,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
1064
1064
  // series: [],
1065
1065
  // seriesIndex: -1,
1066
1066
  // seriesLabel: '',
1067
- // groups: data.event.groups,
1067
+ // group: data.event.group,
1068
1068
  // groupIndex,
1069
1069
  // groupLabel,
1070
1070
  // event,
package/src/multiGrid/defaults.ts CHANGED
@@ -70,7 +70,7 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
70
70
  tickColorType: 'secondary',
71
71
  tickTextRotate: 0,
72
72
  tickTextColorType: 'primary',
73
- gridIndexes: [0]
73
+ gridIndexes: 'all'
74
74
  }
75
75
 
76
76
  export const DEFAULT_MULTI_STACKED_VALUE_AXIS_PARAMS: MultiStackedValueAxisParams = {
@@ -114,7 +114,7 @@ export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
114
114
 
115
115
  export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
116
116
  radius: 4,
117
- fillColorType: 'white',
117
+ fillColorType: 'background',
118
118
  strokeColorType: 'label',
119
119
  strokeWidth: 2,
120
120
  onlyShowHighlighted: false,
@@ -172,14 +172,16 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
172
172
  const bulletWidth = styles.textSizePx * 0.7
173
173
  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
174
174
 
175
- const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
176
- const maxLengthText = eventData.groups.reduce((acc, group) => {
175
+ const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}" fill="${styles.textColor}">${eventData.groupLabel}</text></g>`
176
+ const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
177
+ const listTextWidth = eventData.group.reduce((acc, group) => {
177
178
  const text = `${group.seriesLabel}${group.value}`
178
- return text.length > acc.length ? text : acc
179
- }, '')
180
- const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
181
- const lineEndX = maxTextWidth + styles.textSizePx * 2
182
- const contentSvg = eventData.groups
179
+ const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
180
+ return _maxTextWidth > acc ? _maxTextWidth : acc
181
+ }, 0)
182
+ const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
183
+ const lineEndX = maxTextWidth + styles.textSizePx * 3
184
+ const contentSvg = eventData.group
183
185
  .map((group, i) => {
184
186
  const y = i * styles.textSizePx * 1.5
185
187
  const isHighlight = group.id === (eventData.datum && eventData.datum.id)
@@ -200,14 +202,16 @@ DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { style
200
202
  const bulletWidth = styles.textSizePx * 0.7
201
203
  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
202
204
 
203
- const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}">\${eventData.groupLabel}</text></g>\`
204
- const maxLengthText = eventData.groups.reduce((acc, group) => {
205
+ const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}" fill="\${styles.textColor}">\${eventData.groupLabel}</text></g>\`
206
+ const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
207
+ const listTextWidth = eventData.group.reduce((acc, group) => {
205
208
  const text = \`\${group.seriesLabel}\${group.value}\`
206
- return text.length > acc.length ? text : acc
207
- }, '')
208
- const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
209
- const lineEndX = maxTextWidth + styles.textSizePx * 2
210
- const contentSvg = eventData.groups
209
+ const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
210
+ return _maxTextWidth > acc ? _maxTextWidth : acc
211
+ }, 0)
212
+ const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
213
+ const lineEndX = maxTextWidth + styles.textSizePx * 3
214
+ const contentSvg = eventData.group
211
215
  .map((group, i) => {
212
216
  const y = i * styles.textSizePx * 1.5
213
217
  const isHighlight = group.id === (eventData.datum && eventData.datum.id)
package/src/relationship/defaults.ts CHANGED
@@ -71,8 +71,8 @@ export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
71
71
  }
72
72
  DEFAULT_FORCE_DIRECTED_PARAMS.dot.styleFn.toString = () => `(node) => ''`
73
73
  DEFAULT_FORCE_DIRECTED_PARAMS.dotLabel.styleFn.toString = () => `(node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'`
74
- DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(node) => ''`
75
- DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(node) => ''`
74
+ DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
75
+ DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
76
76
 
77
77
  export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams = {
78
78
  bubble: {
@@ -89,7 +89,7 @@ export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams =
89
89
  lineHeight: 1,
90
90
  maxLineLength: 6,
91
91
  wordBreakAll: true,
92
- colorType: 'primary',
92
+ colorType: 'labelContrast',
93
93
  styleFn: (node) => ''
94
94
  },
95
95
  arrow: {
@@ -125,8 +125,8 @@ export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams =
125
125
  }
126
126
  DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubble.styleFn.toString = () => `(node) => ''`
127
127
  DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubbleLabel.styleFn.toString = () => `(node) => ''`
128
- DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(node) => ''`
129
- DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(node) => ''`
128
+ DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
129
+ DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
130
130
 
131
131
 
132
132
  export const DEFAULT_RELATIONSHIP_LEGEND_PARAMS: RelationshipLegendParams = {
@@ -162,8 +162,19 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
162
162
  const datumLabelSvg = hasDatumLabel
163
163
  ? `<tspan>${eventData.datum.label}</tspan> `
164
164
  : ''
165
+ const categoryLabelTextWidth = hasCategoryLabel
166
+ ? utils.measureTextWidth(`${eventData.categoryLabel}${eventData.datum.value}`, styles.textSizePx) + styles.textSizePx * 1.5
167
+ : 0
168
+ const datumLabelTextWidth = hasDatumLabel
169
+ ? utils.measureTextWidth(`${eventData.datum.label}${eventData.datum.value}`, styles.textSizePx)
170
+ : 0
171
+ const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
172
+ const lineEndX = hasDatumLabel
173
+ ? maxTextWidth + styles.textSizePx * 0.5
174
+ : 0
175
+ const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
165
176
  const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
166
- ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
177
+ ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${eventData.datum.value}</tspan>
167
178
  </text>`
168
179
 
169
180
  return `${categorySvg}
@@ -174,24 +185,35 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
174
185
  }
175
186
  DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
176
187
  const hasCategoryLabel = eventData.categoryLabel ? true : false
177
- const hasDatumLabel = eventData.datum.label ? true : false
178
- const bulletWidth = styles.textSizePx * 0.7
179
- const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
180
- const categorySvg = hasCategoryLabel
181
- ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
182
- <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
183
- <tspan>\${eventData.categoryLabel}</tspan>
184
- </text>\`
185
- : ''
186
- const datumLabelSvg = hasDatumLabel
187
- ? \`<tspan>\${eventData.datum.label}</tspan> \`
188
- : ''
189
- const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
190
- \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
191
- </text>\`
188
+ const hasDatumLabel = eventData.datum.label ? true : false
189
+ const bulletWidth = styles.textSizePx * 0.7
190
+ const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
191
+ const categorySvg = hasCategoryLabel
192
+ ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
193
+ <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
194
+ <tspan>\${eventData.categoryLabel}</tspan>
195
+ </text>\`
196
+ : ''
197
+ const datumLabelSvg = hasDatumLabel
198
+ ? \`<tspan>\${eventData.datum.label}</tspan> \`
199
+ : ''
200
+ const categoryLabelTextWidth = hasCategoryLabel
201
+ ? utils.measureTextWidth(\`\${eventData.categoryLabel}\${eventData.datum.value}\`, styles.textSizePx) + styles.textSizePx * 1.5
202
+ : 0
203
+ const datumLabelTextWidth = hasDatumLabel
204
+ ? utils.measureTextWidth(\`\${eventData.datum.label}\${eventData.datum.value}\`, styles.textSizePx)
205
+ : 0
206
+ const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
207
+ const lineEndX = hasDatumLabel
208
+ ? maxTextWidth + styles.textSizePx * 0.5
209
+ : 0
210
+ const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
211
+ const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
212
+ \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${eventData.datum.value}</tspan>
213
+ </text>\`
192
214
 
193
- return \`\${categorySvg}
194
- <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
195
- \${datumSvg}
196
- </g>\`
215
+ return \`\${categorySvg}
216
+ <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
217
+ \${datumSvg}
218
+ </g>\`
197
219
  }`
package/src/relationship/plugins/ForceDirectedBubbles.ts CHANGED
@@ -552,6 +552,14 @@ function renderNodeCircle ({ nodeGSelection, fullParams, fullChartParams }: {
552
552
  : fullParams.bubbleLabel.wordBreakAll
553
553
  })
554
554
 
555
+ // -- text color --
556
+ gSelection.select('text').attr('fill', _ => getDatumColor({
557
+ datum: d,
558
+ colorType: fullParams.bubbleLabel.colorType,
559
+ fullChartParams: fullChartParams
560
+ }))
561
+
562
+
555
563
  })
556
564
 
557
565
  nodeGSelection.select('text')