@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.44

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 (75) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +5611 -5571
  3. package/dist/orbcharts-plugins-basic.umd.js +7 -7
  4. package/dist/src/base/BaseLegend.d.ts +1 -0
  5. package/package.json +42 -42
  6. package/src/base/BaseBarStack.ts +881 -881
  7. package/src/base/BaseBars.ts +750 -750
  8. package/src/base/BaseBarsTriangle.ts +659 -659
  9. package/src/base/BaseDots.ts +639 -639
  10. package/src/base/BaseGroupAxis.ts +496 -496
  11. package/src/base/BaseLegend.ts +641 -636
  12. package/src/base/BaseLineAreas.ts +621 -621
  13. package/src/base/BaseLines.ts +692 -692
  14. package/src/base/BaseValueAxis.ts +479 -479
  15. package/src/base/types.ts +2 -2
  16. package/src/grid/defaults.ts +121 -121
  17. package/src/grid/gridObservables.ts +263 -263
  18. package/src/grid/index.ts +15 -15
  19. package/src/grid/plugins/BarStack.ts +37 -37
  20. package/src/grid/plugins/Bars.ts +37 -37
  21. package/src/grid/plugins/BarsDiverging.ts +39 -39
  22. package/src/grid/plugins/BarsTriangle.ts +34 -34
  23. package/src/grid/plugins/Dots.ts +35 -35
  24. package/src/grid/plugins/GridLegend.ts +59 -58
  25. package/src/grid/plugins/GroupAux.ts +646 -643
  26. package/src/grid/plugins/GroupAxis.ts +30 -30
  27. package/src/grid/plugins/LineAreas.ts +36 -36
  28. package/src/grid/plugins/Lines.ts +35 -35
  29. package/src/grid/plugins/ScalingArea.ts +174 -174
  30. package/src/grid/plugins/ValueAxis.ts +31 -31
  31. package/src/grid/plugins/ValueStackAxis.ts +70 -70
  32. package/src/grid/types.ts +120 -120
  33. package/src/index.ts +9 -9
  34. package/src/multiGrid/defaults.ts +147 -147
  35. package/src/multiGrid/index.ts +11 -11
  36. package/src/multiGrid/multiGridObservables.ts +289 -289
  37. package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
  38. package/src/multiGrid/plugins/MultiBars.ts +59 -59
  39. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
  40. package/src/multiGrid/plugins/MultiDots.ts +58 -58
  41. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -88
  42. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
  43. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -59
  44. package/src/multiGrid/plugins/MultiLines.ts +58 -58
  45. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
  46. package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -164
  47. package/src/multiGrid/types.ts +67 -67
  48. package/src/noneData/defaults.ts +61 -61
  49. package/src/noneData/index.ts +3 -3
  50. package/src/noneData/plugins/Container.ts +10 -10
  51. package/src/noneData/plugins/Tooltip.ts +310 -304
  52. package/src/noneData/types.ts +26 -26
  53. package/src/series/defaults.ts +99 -99
  54. package/src/series/index.ts +6 -6
  55. package/src/series/plugins/Bubbles.ts +551 -551
  56. package/src/series/plugins/Pie.ts +600 -600
  57. package/src/series/plugins/PieEventTexts.ts +194 -194
  58. package/src/series/plugins/PieLabels.ts +288 -288
  59. package/src/series/plugins/SeriesLegend.ts +59 -58
  60. package/src/series/seriesUtils.ts +50 -50
  61. package/src/series/types.ts +67 -67
  62. package/src/tree/defaults.ts +22 -22
  63. package/src/tree/index.ts +3 -3
  64. package/src/tree/plugins/TreeLegend.ts +59 -58
  65. package/src/tree/plugins/TreeMap.ts +305 -302
  66. package/src/tree/types.ts +23 -23
  67. package/src/utils/commonUtils.ts +21 -21
  68. package/src/utils/d3Graphics.ts +124 -124
  69. package/src/utils/d3Utils.ts +73 -73
  70. package/src/utils/observables.ts +14 -14
  71. package/src/utils/orbchartsUtils.ts +100 -100
  72. package/tsconfig.dev.json +16 -16
  73. package/tsconfig.json +13 -13
  74. package/tsconfig.prod.json +13 -13
  75. package/vite.config.js +49 -49
@@ -1,164 +1,164 @@
1
- import * as d3 from 'd3'
2
- import {
3
- of,
4
- map,
5
- switchMap,
6
- combineLatest,
7
- takeUntil,
8
- iif,
9
- Observable,
10
- Subject } from 'rxjs'
11
- import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
12
- import {
13
- defineMultiGridPlugin } from '@orbcharts/core'
14
- import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
15
- import { createBaseValueAxis } from '../../base/BaseValueAxis'
16
- import { multiGridDetailObservables } from '../multiGridObservables'
17
- import { getClassName, getUniID } from '../../utils/orbchartsUtils'
18
- // @Q@
19
- import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
20
-
21
- const pluginName = 'OverlappingValueAxes'
22
-
23
- const gridClassName = getClassName(pluginName, 'grid')
24
-
25
- export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
26
- const destroy$ = new Subject()
27
-
28
- const unsubscribeFnArr: (() => void)[] = []
29
-
30
- const firstGridIndex$ = observer.fullParams$.pipe(
31
- takeUntil(destroy$),
32
- map(fullParams => fullParams.gridIndexes[0])
33
- )
34
-
35
- const secondGridIndex$ = observer.fullParams$.pipe(
36
- takeUntil(destroy$),
37
- map(fullParams => fullParams.gridIndexes[1])
38
- )
39
-
40
- // 為了要反轉第二個valueAxis的位置所以要重新計算
41
- const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
42
- firstGridIndex: firstGridIndex$,
43
- secondGridIndex: secondGridIndex$
44
- }).pipe(
45
- takeUntil(destroy$),
46
- switchMap(data => {
47
- return observer.fullDataFormatter$.pipe(
48
- takeUntil(destroy$),
49
- map(fullDataFormatter => {
50
- if (!fullDataFormatter.gridList[data.secondGridIndex]) {
51
- fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
52
- }
53
- // 反轉第二個valueAxis的位置
54
- let reversePosition = ''
55
- if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
56
- reversePosition = 'right'
57
- } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
58
- reversePosition = 'top'
59
- } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
60
- reversePosition = 'bottom'
61
- } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
62
- reversePosition = 'left'
63
- }
64
- return <DataFormatterGrid>{
65
- type: 'grid',
66
- grid: {
67
- ...fullDataFormatter.gridList[data.secondGridIndex],
68
- valueAxis: {
69
- ...fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
70
- position: reversePosition
71
- }
72
- },
73
- container: {
74
- ...fullDataFormatter.container
75
- }
76
- }
77
- })
78
- )
79
- }),
80
- )
81
-
82
- const multiGridPlugin$ = of(observer).pipe(
83
- takeUntil(destroy$),
84
- map(observer => {
85
- // 將observer的gridIndexes限制在2個
86
- return {
87
- ...observer,
88
- fullParams$: observer.fullParams$.pipe(
89
- map(fullParams => {
90
- if (fullParams.gridIndexes.length > 2) {
91
- fullParams.gridIndexes.length = 2
92
- }
93
- return fullParams
94
- })
95
- )
96
- }
97
- }),
98
- switchMap(observer => multiGridDetailObservables(observer)),
99
- map(data => {
100
- return data.map((observables, index) => {
101
- if (index === 0) {
102
- return observables
103
- }
104
- // index === 1,將跟第二個valueAxis有關的observables全部重新計算
105
- const gridAxesTransform$ = gridAxesTransformObservable({
106
- fullDataFormatter$: secondGridDataFormatter$,
107
- layout$: observer.layout$
108
- })
109
- const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
110
- gridAxesTransform$
111
- })
112
- const gridContainer$ = gridContainerObservable({
113
- computedData$: observables.gridComputedData$,
114
- fullDataFormatter$: secondGridDataFormatter$,
115
- fullChartParams$: observer.fullChartParams$,
116
- layout$: observer.layout$
117
- })
118
- return {
119
- ...observables,
120
- gridAxesTransform$,
121
- gridAxesReverseTransform$,
122
- gridContainer$,
123
- }
124
- })
125
- })
126
- )
127
-
128
- multiGridPlugin$.subscribe(data => {
129
- // 每次重新計算時,清除之前的訂閱
130
- unsubscribeFnArr.forEach(fn => fn())
131
-
132
- selection.selectAll(`g.${gridClassName}`)
133
- .data(data)
134
- .join('g')
135
- .attr('class', gridClassName)
136
- .each((d, i, g) => {
137
- if (i > 1) {
138
- return
139
- }
140
-
141
- const gridSelection = d3.select(g[i])
142
-
143
- unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
144
- selection: gridSelection,
145
- computedData$: d.gridComputedData$,
146
- fullParams$: observer.fullParams$.pipe(
147
- map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
148
- ),
149
- fullDataFormatter$: d.gridDataFormatter$,
150
- fullChartParams$: observer.fullChartParams$,
151
- gridAxesTransform$: d.gridAxesTransform$,
152
- gridAxesReverseTransform$: d.gridAxesReverseTransform$,
153
- gridAxesSize$: d.gridAxesSize$,
154
- gridContainer$: d.gridContainer$,
155
- isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
156
- })
157
- })
158
- })
159
-
160
- return () => {
161
- destroy$.next(undefined)
162
- unsubscribeFnArr.forEach(fn => fn())
163
- }
164
- })
1
+ import * as d3 from 'd3'
2
+ import {
3
+ of,
4
+ map,
5
+ switchMap,
6
+ combineLatest,
7
+ takeUntil,
8
+ iif,
9
+ Observable,
10
+ Subject } from 'rxjs'
11
+ import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
12
+ import {
13
+ defineMultiGridPlugin } from '@orbcharts/core'
14
+ import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
15
+ import { createBaseValueAxis } from '../../base/BaseValueAxis'
16
+ import { multiGridDetailObservables } from '../multiGridObservables'
17
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
18
+ // @Q@
19
+ import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
20
+
21
+ const pluginName = 'OverlappingValueAxes'
22
+
23
+ const gridClassName = getClassName(pluginName, 'grid')
24
+
25
+ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
26
+ const destroy$ = new Subject()
27
+
28
+ const unsubscribeFnArr: (() => void)[] = []
29
+
30
+ const firstGridIndex$ = observer.fullParams$.pipe(
31
+ takeUntil(destroy$),
32
+ map(fullParams => fullParams.gridIndexes[0])
33
+ )
34
+
35
+ const secondGridIndex$ = observer.fullParams$.pipe(
36
+ takeUntil(destroy$),
37
+ map(fullParams => fullParams.gridIndexes[1])
38
+ )
39
+
40
+ // 為了要反轉第二個valueAxis的位置所以要重新計算
41
+ const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
42
+ firstGridIndex: firstGridIndex$,
43
+ secondGridIndex: secondGridIndex$
44
+ }).pipe(
45
+ takeUntil(destroy$),
46
+ switchMap(data => {
47
+ return observer.fullDataFormatter$.pipe(
48
+ takeUntil(destroy$),
49
+ map(fullDataFormatter => {
50
+ if (!fullDataFormatter.gridList[data.secondGridIndex]) {
51
+ fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
52
+ }
53
+ // 反轉第二個valueAxis的位置
54
+ let reversePosition = ''
55
+ if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
56
+ reversePosition = 'right'
57
+ } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
58
+ reversePosition = 'top'
59
+ } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
60
+ reversePosition = 'bottom'
61
+ } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
62
+ reversePosition = 'left'
63
+ }
64
+ return <DataFormatterGrid>{
65
+ type: 'grid',
66
+ grid: {
67
+ ...fullDataFormatter.gridList[data.secondGridIndex],
68
+ valueAxis: {
69
+ ...fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
70
+ position: reversePosition
71
+ }
72
+ },
73
+ container: {
74
+ ...fullDataFormatter.container
75
+ }
76
+ }
77
+ })
78
+ )
79
+ }),
80
+ )
81
+
82
+ const multiGridPlugin$ = of(observer).pipe(
83
+ takeUntil(destroy$),
84
+ map(observer => {
85
+ // 將observer的gridIndexes限制在2個
86
+ return {
87
+ ...observer,
88
+ fullParams$: observer.fullParams$.pipe(
89
+ map(fullParams => {
90
+ if (fullParams.gridIndexes.length > 2) {
91
+ fullParams.gridIndexes.length = 2
92
+ }
93
+ return fullParams
94
+ })
95
+ )
96
+ }
97
+ }),
98
+ switchMap(observer => multiGridDetailObservables(observer)),
99
+ map(data => {
100
+ return data.map((observables, index) => {
101
+ if (index === 0) {
102
+ return observables
103
+ }
104
+ // index === 1,將跟第二個valueAxis有關的observables全部重新計算
105
+ const gridAxesTransform$ = gridAxesTransformObservable({
106
+ fullDataFormatter$: secondGridDataFormatter$,
107
+ layout$: observer.layout$
108
+ })
109
+ const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
110
+ gridAxesTransform$
111
+ })
112
+ const gridContainer$ = gridContainerObservable({
113
+ computedData$: observables.gridComputedData$,
114
+ fullDataFormatter$: secondGridDataFormatter$,
115
+ fullChartParams$: observer.fullChartParams$,
116
+ layout$: observer.layout$
117
+ })
118
+ return {
119
+ ...observables,
120
+ gridAxesTransform$,
121
+ gridAxesReverseTransform$,
122
+ gridContainer$,
123
+ }
124
+ })
125
+ })
126
+ )
127
+
128
+ multiGridPlugin$.subscribe(data => {
129
+ // 每次重新計算時,清除之前的訂閱
130
+ unsubscribeFnArr.forEach(fn => fn())
131
+
132
+ selection.selectAll(`g.${gridClassName}`)
133
+ .data(data)
134
+ .join('g')
135
+ .attr('class', gridClassName)
136
+ .each((d, i, g) => {
137
+ if (i > 1) {
138
+ return
139
+ }
140
+
141
+ const gridSelection = d3.select(g[i])
142
+
143
+ unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
144
+ selection: gridSelection,
145
+ computedData$: d.gridComputedData$,
146
+ fullParams$: observer.fullParams$.pipe(
147
+ map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
148
+ ),
149
+ fullDataFormatter$: d.gridDataFormatter$,
150
+ fullChartParams$: observer.fullChartParams$,
151
+ gridAxesTransform$: d.gridAxesTransform$,
152
+ gridAxesReverseTransform$: d.gridAxesReverseTransform$,
153
+ gridAxesSize$: d.gridAxesSize$,
154
+ gridContainer$: d.gridContainer$,
155
+ isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
156
+ })
157
+ })
158
+ })
159
+
160
+ return () => {
161
+ destroy$.next(undefined)
162
+ unsubscribeFnArr.forEach(fn => fn())
163
+ }
164
+ })
@@ -1,67 +1,67 @@
1
- import type { BaseBarsParams } from '../base/BaseBars'
2
- import type { BaseBarStackParams } from '../base/BaseBarStack'
3
- import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
4
- import type { BaseLinesParams } from '../base/BaseLines'
5
- import type { BaseLineAreasParams } from '../base/BaseLineAreas'
6
- import type { BaseDotsParams } from '../base/BaseDots'
7
- import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
8
- import type { BaseValueAxisParams } from '../base/BaseValueAxis'
9
- import type {
10
- ChartParams, Layout, ColorType } from '@orbcharts/core'
11
-
12
- export interface MultiGridLegendParams {
13
- position: 'top' | 'bottom' | 'left' | 'right'
14
- justify: 'start' | 'center' | 'end'
15
- padding: number
16
- backgroundFill: ColorType
17
- backgroundStroke: ColorType
18
- gap: number
19
- listRectWidth: number
20
- listRectHeight: number
21
- listRectRadius: number
22
- // 可針對各grid設定,覆蓋全域設定
23
- gridList: Array<{
24
- listRectWidth: number
25
- listRectHeight: number
26
- listRectRadius: number
27
- }>
28
- textColorType: ColorType
29
- }
30
-
31
- export interface MultiGroupAxisParams extends BaseGroupAxisParams {
32
- gridIndexes: number[]
33
- }
34
-
35
- export interface MultiValueAxisParams extends BaseValueAxisParams {
36
- gridIndexes: number[]
37
- }
38
-
39
- export interface MultiBarsParams extends BaseBarsParams {
40
- gridIndexes: number[]
41
- }
42
-
43
- export interface MultiBarStackParams extends BaseBarStackParams {
44
- gridIndexes: number[]
45
- }
46
-
47
- export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
48
- gridIndexes: number[]
49
- }
50
-
51
- export interface MultiLinesParams extends BaseLinesParams {
52
- gridIndexes: number[]
53
- }
54
-
55
- export interface MultiLineAreasParams extends BaseLineAreasParams {
56
- gridIndexes: number[]
57
- }
58
-
59
- export interface MultiDotsParams extends BaseDotsParams {
60
- gridIndexes: number[]
61
- }
62
-
63
- export interface OverlappingValueAxesParams {
64
- firstAxis: BaseValueAxisParams
65
- secondAxis: BaseValueAxisParams
66
- gridIndexes: [number, number]
67
- }
1
+ import type { BaseBarsParams } from '../base/BaseBars'
2
+ import type { BaseBarStackParams } from '../base/BaseBarStack'
3
+ import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
4
+ import type { BaseLinesParams } from '../base/BaseLines'
5
+ import type { BaseLineAreasParams } from '../base/BaseLineAreas'
6
+ import type { BaseDotsParams } from '../base/BaseDots'
7
+ import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
8
+ import type { BaseValueAxisParams } from '../base/BaseValueAxis'
9
+ import type {
10
+ ChartParams, Layout, ColorType } from '@orbcharts/core'
11
+
12
+ export interface MultiGridLegendParams {
13
+ position: 'top' | 'bottom' | 'left' | 'right'
14
+ justify: 'start' | 'center' | 'end'
15
+ padding: number
16
+ backgroundFill: ColorType
17
+ backgroundStroke: ColorType
18
+ gap: number
19
+ listRectWidth: number
20
+ listRectHeight: number
21
+ listRectRadius: number
22
+ // 可針對各grid設定,覆蓋全域設定
23
+ gridList: Array<{
24
+ listRectWidth: number
25
+ listRectHeight: number
26
+ listRectRadius: number
27
+ }>
28
+ textColorType: ColorType
29
+ }
30
+
31
+ export interface MultiGroupAxisParams extends BaseGroupAxisParams {
32
+ gridIndexes: number[]
33
+ }
34
+
35
+ export interface MultiValueAxisParams extends BaseValueAxisParams {
36
+ gridIndexes: number[]
37
+ }
38
+
39
+ export interface MultiBarsParams extends BaseBarsParams {
40
+ gridIndexes: number[]
41
+ }
42
+
43
+ export interface MultiBarStackParams extends BaseBarStackParams {
44
+ gridIndexes: number[]
45
+ }
46
+
47
+ export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
48
+ gridIndexes: number[]
49
+ }
50
+
51
+ export interface MultiLinesParams extends BaseLinesParams {
52
+ gridIndexes: number[]
53
+ }
54
+
55
+ export interface MultiLineAreasParams extends BaseLineAreasParams {
56
+ gridIndexes: number[]
57
+ }
58
+
59
+ export interface MultiDotsParams extends BaseDotsParams {
60
+ gridIndexes: number[]
61
+ }
62
+
63
+ export interface OverlappingValueAxesParams {
64
+ firstAxis: BaseValueAxisParams
65
+ secondAxis: BaseValueAxisParams
66
+ gridIndexes: [number, number]
67
+ }
@@ -1,61 +1,61 @@
1
- import type { ContainerPluginParams, TooltipParams } from './types'
2
- import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
3
-
4
- export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
5
- header: {
6
- height: 36,
7
- text: [],
8
- textStyle: []
9
- },
10
- footer: {
11
- height: 0,
12
- text: [],
13
- textStyle: []
14
- }
15
- }
16
-
17
- export const TOOLTIP_PARAMS: TooltipParams = {
18
- backgroundColorType: 'background',
19
- strokeColorType: 'primary',
20
- backgroundOpacity: 0.8,
21
- textColorType: 'primary',
22
- offset: [20, 5],
23
- padding: 10,
24
- textRenderFn: (eventData) => {
25
- if (eventData.highlightTarget === 'datum' && eventData.datum) {
26
- return [`${eventData.datum.label}: ${eventData.datum.value}`]
27
- } else if (eventData.highlightTarget === 'series') {
28
- const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
29
- const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
30
- .map(d => {
31
- return d.value
32
- })
33
- const value = valueArr.length > 5
34
- ? valueArr.slice(0, 5).join(',') + '...'
35
- : valueArr.join(',')
36
- return [label, value]
37
- } else if (eventData.highlightTarget === 'group') {
38
- const label = (eventData as EventBaseGridValue<any, any>).groupLabel
39
- const valueArr = (eventData as EventBaseGridValue<any, any>).series
40
- .map(d => {
41
- return d.value
42
- })
43
- const value = valueArr.length > 5
44
- ? valueArr.slice(0, 5).join(',') + '...'
45
- : valueArr.join(',')
46
- return [label, value]
47
- } else if (eventData.highlightTarget === 'category') {
48
- const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
49
- const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
50
- .map(d => {
51
- return d.value
52
- })
53
- const value = valueArr.length > 5
54
- ? valueArr.slice(0, 5).join(',') + '...'
55
- : valueArr.join(',')
56
- return [label, value]
57
- }
58
- return []
59
- },
60
- svgRenderFn: null
61
- }
1
+ import type { ContainerPluginParams, TooltipParams } from './types'
2
+ import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
3
+
4
+ export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
5
+ header: {
6
+ height: 36,
7
+ text: [],
8
+ textStyle: []
9
+ },
10
+ footer: {
11
+ height: 0,
12
+ text: [],
13
+ textStyle: []
14
+ }
15
+ }
16
+
17
+ export const TOOLTIP_PARAMS: TooltipParams = {
18
+ backgroundColorType: 'background',
19
+ strokeColorType: 'primary',
20
+ backgroundOpacity: 0.8,
21
+ textColorType: 'primary',
22
+ offset: [20, 5],
23
+ padding: 10,
24
+ textRenderFn: (eventData) => {
25
+ if (eventData.highlightTarget === 'datum' && eventData.datum) {
26
+ return [`${eventData.datum.label}: ${eventData.datum.value}`]
27
+ } else if (eventData.highlightTarget === 'series') {
28
+ const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
29
+ const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
30
+ .map(d => {
31
+ return d.value
32
+ })
33
+ const value = valueArr.length > 5
34
+ ? valueArr.slice(0, 5).join(',') + '...'
35
+ : valueArr.join(',')
36
+ return [label, value]
37
+ } else if (eventData.highlightTarget === 'group') {
38
+ const label = (eventData as EventBaseGridValue<any, any>).groupLabel
39
+ const valueArr = (eventData as EventBaseGridValue<any, any>).series
40
+ .map(d => {
41
+ return d.value
42
+ })
43
+ const value = valueArr.length > 5
44
+ ? valueArr.slice(0, 5).join(',') + '...'
45
+ : valueArr.join(',')
46
+ return [label, value]
47
+ } else if (eventData.highlightTarget === 'category') {
48
+ const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
49
+ const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
50
+ .map(d => {
51
+ return d.value
52
+ })
53
+ const value = valueArr.length > 5
54
+ ? valueArr.slice(0, 5).join(',') + '...'
55
+ : valueArr.join(',')
56
+ return [label, value]
57
+ }
58
+ return []
59
+ },
60
+ svgRenderFn: null
61
+ }
@@ -1,4 +1,4 @@
1
- export * from './defaults'
2
- export * from './types'
3
- export { Container } from './plugins/Container'
1
+ export * from './defaults'
2
+ export * from './types'
3
+ export { Container } from './plugins/Container'
4
4
  export { Tooltip } from './plugins/Tooltip'
@@ -1,11 +1,11 @@
1
- import * as d3 from 'd3'
2
- import {
3
- defineNoneDataPlugin } from '@orbcharts/core'
4
- import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
5
-
6
- export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
7
-
8
- return function unsubscribe () {
9
-
10
- }
1
+ import * as d3 from 'd3'
2
+ import {
3
+ defineNoneDataPlugin } from '@orbcharts/core'
4
+ import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
5
+
6
+ export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
7
+
8
+ return function unsubscribe () {
9
+
10
+ }
11
11
  })