@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,194 +1,194 @@
1
- import * as d3 from 'd3'
2
- import {
3
- combineLatest,
4
- switchMap,
5
- first,
6
- takeUntil,
7
- map,
8
- distinctUntilChanged,
9
- Subject } from 'rxjs'
10
- import type { Subscription } from 'rxjs'
11
- import {
12
- defineSeriesPlugin} from '@orbcharts/core'
13
- import type {
14
- EventName,
15
- EventSeries } from '@orbcharts/core'
16
- import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
17
- import { getD3TransitionEase } from '../../utils/d3Utils'
18
- import { getClassName } from '../../utils/orbchartsUtils'
19
-
20
- type TextDatum = {
21
- text: string
22
- attr: { [key:string]: any }
23
- style: { [key:string]: any }
24
- }
25
-
26
- const pluginName = 'PieEventTexts'
27
- const textClassName = getClassName(pluginName, 'text')
28
-
29
- function renderText (
30
- selection: d3.Selection<SVGGElement, unknown, any, any>,
31
- data: Array<TextDatum>
32
- ): d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> {
33
- const textUpdate = selection
34
- .selectAll<SVGTextElement, TextDatum>(`text.${textClassName}`)
35
- .data(data)
36
- const textEnter = textUpdate.enter()
37
- .append('text')
38
- .classed(textClassName, true)
39
- const text = textUpdate.merge(textEnter)
40
- text
41
- .each((d, i, g) => {
42
- const t = d3.select(g[i])
43
- .text(d.text)
44
- Object.keys(d.attr)
45
- .forEach(key => {
46
- t.attr(key, d.attr[key])
47
- })
48
- Object.keys(d.style)
49
- .forEach(key => {
50
- t.style(key, d.style[key])
51
- })
52
- })
53
-
54
- textUpdate.exit().remove()
55
-
56
- return text
57
- }
58
-
59
- function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles }: {
60
- eventData: EventSeries,
61
- eventName: EventName,
62
- t: number,
63
- eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
64
- textAttrs: Array<{ [key:string]: string | number }>
65
- textStyles: Array<{ [key:string]: string | number }>
66
- }): TextDatum[] {
67
- const callbackText = eventFn(eventData, eventName, t)
68
- return callbackText.map((d, i) => {
69
- return {
70
- text: d,
71
- attr: textAttrs[i],
72
- style: textStyles[i]
73
- }
74
- })
75
- }
76
-
77
-
78
-
79
- export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
80
-
81
- const destroy$ = new Subject()
82
-
83
- const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
84
- let centerTextSelection: d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> | undefined
85
- let storeEventSubscription: Subscription | undefined
86
-
87
- observer.layout$
88
- .pipe(
89
- first()
90
- )
91
- .subscribe(size => {
92
- selection
93
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
94
- observer.layout$
95
- .pipe(
96
- takeUntil(destroy$)
97
- )
98
- .subscribe(size => {
99
- selection
100
- .transition()
101
- .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
102
- })
103
- })
104
-
105
-
106
- const highlightTarget$ = observer.fullChartParams$.pipe(
107
- takeUntil(destroy$),
108
- map(d => d.highlightTarget),
109
- distinctUntilChanged()
110
- )
111
-
112
- combineLatest({
113
- computedData: observer.computedData$,
114
- fullParams: observer.fullParams$,
115
- fullChartParams: observer.fullChartParams$,
116
- highlightTarget: highlightTarget$
117
- }).pipe(
118
- takeUntil(destroy$),
119
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
120
- switchMap(async (d) => d),
121
- ).subscribe(data => {
122
-
123
- graphicSelection
124
- .transition()
125
- .duration(data.fullChartParams.transitionDuration!)
126
- .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
127
- .tween('move', (event, datum) => {
128
- return (t) => {
129
- const renderData = makeTextData({
130
- eventData: {
131
- type: 'series',
132
- pluginName: name,
133
- eventName: 'transitionMove',
134
- event,
135
- highlightTarget: data.highlightTarget,
136
- data: data.computedData,
137
- series: [],
138
- seriesIndex: -1,
139
- seriesLabel: '',
140
- datum: null
141
- },
142
- eventName: 'transitionMove',
143
- t,
144
- eventFn: data.fullParams.eventFn!,
145
- textAttrs: data.fullParams.textAttrs!,
146
- textStyles: data.fullParams.textStyles!
147
- })
148
- centerTextSelection = renderText(graphicSelection, renderData)
149
- }
150
- })
151
- .on('end', (event, datum) => {
152
- const renderData = makeTextData({
153
- eventData: {
154
- type: 'series',
155
- pluginName: name,
156
- eventName: 'transitionEnd',
157
- event,
158
- highlightTarget: data.highlightTarget,
159
- data: data.computedData,
160
- series: [],
161
- seriesIndex: -1,
162
- seriesLabel: '',
163
- datum: null
164
- },
165
- eventName: 'transitionMove',
166
- t: 1,
167
- eventFn: data.fullParams.eventFn!,
168
- textAttrs: data.fullParams.textAttrs!,
169
- textStyles: data.fullParams.textStyles!
170
- })
171
- centerTextSelection = renderText(graphicSelection, renderData)
172
-
173
- if (storeEventSubscription) {
174
- storeEventSubscription.unsubscribe()
175
- }
176
- storeEventSubscription = subject.event$
177
- .subscribe(eventData => {
178
- const renderData = makeTextData({
179
- eventData,
180
- eventName: eventData.eventName,
181
- t: 1,
182
- eventFn: data.fullParams.eventFn!,
183
- textAttrs: data.fullParams.textAttrs!,
184
- textStyles: data.fullParams.textStyles!
185
- })
186
- centerTextSelection = renderText(graphicSelection, renderData)
187
- })
188
- })
189
- })
190
-
191
- return () => {
192
- destroy$.next(undefined)
193
- }
194
- })
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ switchMap,
5
+ first,
6
+ takeUntil,
7
+ map,
8
+ distinctUntilChanged,
9
+ Subject } from 'rxjs'
10
+ import type { Subscription } from 'rxjs'
11
+ import {
12
+ defineSeriesPlugin} from '@orbcharts/core'
13
+ import type {
14
+ EventName,
15
+ EventSeries } from '@orbcharts/core'
16
+ import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
17
+ import { getD3TransitionEase } from '../../utils/d3Utils'
18
+ import { getClassName } from '../../utils/orbchartsUtils'
19
+
20
+ type TextDatum = {
21
+ text: string
22
+ attr: { [key:string]: any }
23
+ style: { [key:string]: any }
24
+ }
25
+
26
+ const pluginName = 'PieEventTexts'
27
+ const textClassName = getClassName(pluginName, 'text')
28
+
29
+ function renderText (
30
+ selection: d3.Selection<SVGGElement, unknown, any, any>,
31
+ data: Array<TextDatum>
32
+ ): d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> {
33
+ const textUpdate = selection
34
+ .selectAll<SVGTextElement, TextDatum>(`text.${textClassName}`)
35
+ .data(data)
36
+ const textEnter = textUpdate.enter()
37
+ .append('text')
38
+ .classed(textClassName, true)
39
+ const text = textUpdate.merge(textEnter)
40
+ text
41
+ .each((d, i, g) => {
42
+ const t = d3.select(g[i])
43
+ .text(d.text)
44
+ Object.keys(d.attr)
45
+ .forEach(key => {
46
+ t.attr(key, d.attr[key])
47
+ })
48
+ Object.keys(d.style)
49
+ .forEach(key => {
50
+ t.style(key, d.style[key])
51
+ })
52
+ })
53
+
54
+ textUpdate.exit().remove()
55
+
56
+ return text
57
+ }
58
+
59
+ function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles }: {
60
+ eventData: EventSeries,
61
+ eventName: EventName,
62
+ t: number,
63
+ eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
64
+ textAttrs: Array<{ [key:string]: string | number }>
65
+ textStyles: Array<{ [key:string]: string | number }>
66
+ }): TextDatum[] {
67
+ const callbackText = eventFn(eventData, eventName, t)
68
+ return callbackText.map((d, i) => {
69
+ return {
70
+ text: d,
71
+ attr: textAttrs[i],
72
+ style: textStyles[i]
73
+ }
74
+ })
75
+ }
76
+
77
+
78
+
79
+ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
80
+
81
+ const destroy$ = new Subject()
82
+
83
+ const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
84
+ let centerTextSelection: d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> | undefined
85
+ let storeEventSubscription: Subscription | undefined
86
+
87
+ observer.layout$
88
+ .pipe(
89
+ first()
90
+ )
91
+ .subscribe(size => {
92
+ selection
93
+ .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
94
+ observer.layout$
95
+ .pipe(
96
+ takeUntil(destroy$)
97
+ )
98
+ .subscribe(size => {
99
+ selection
100
+ .transition()
101
+ .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
102
+ })
103
+ })
104
+
105
+
106
+ const highlightTarget$ = observer.fullChartParams$.pipe(
107
+ takeUntil(destroy$),
108
+ map(d => d.highlightTarget),
109
+ distinctUntilChanged()
110
+ )
111
+
112
+ combineLatest({
113
+ computedData: observer.computedData$,
114
+ fullParams: observer.fullParams$,
115
+ fullChartParams: observer.fullChartParams$,
116
+ highlightTarget: highlightTarget$
117
+ }).pipe(
118
+ takeUntil(destroy$),
119
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
120
+ switchMap(async (d) => d),
121
+ ).subscribe(data => {
122
+
123
+ graphicSelection
124
+ .transition()
125
+ .duration(data.fullChartParams.transitionDuration!)
126
+ .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
127
+ .tween('move', (event, datum) => {
128
+ return (t) => {
129
+ const renderData = makeTextData({
130
+ eventData: {
131
+ type: 'series',
132
+ pluginName: name,
133
+ eventName: 'transitionMove',
134
+ event,
135
+ highlightTarget: data.highlightTarget,
136
+ data: data.computedData,
137
+ series: [],
138
+ seriesIndex: -1,
139
+ seriesLabel: '',
140
+ datum: null
141
+ },
142
+ eventName: 'transitionMove',
143
+ t,
144
+ eventFn: data.fullParams.eventFn!,
145
+ textAttrs: data.fullParams.textAttrs!,
146
+ textStyles: data.fullParams.textStyles!
147
+ })
148
+ centerTextSelection = renderText(graphicSelection, renderData)
149
+ }
150
+ })
151
+ .on('end', (event, datum) => {
152
+ const renderData = makeTextData({
153
+ eventData: {
154
+ type: 'series',
155
+ pluginName: name,
156
+ eventName: 'transitionEnd',
157
+ event,
158
+ highlightTarget: data.highlightTarget,
159
+ data: data.computedData,
160
+ series: [],
161
+ seriesIndex: -1,
162
+ seriesLabel: '',
163
+ datum: null
164
+ },
165
+ eventName: 'transitionMove',
166
+ t: 1,
167
+ eventFn: data.fullParams.eventFn!,
168
+ textAttrs: data.fullParams.textAttrs!,
169
+ textStyles: data.fullParams.textStyles!
170
+ })
171
+ centerTextSelection = renderText(graphicSelection, renderData)
172
+
173
+ if (storeEventSubscription) {
174
+ storeEventSubscription.unsubscribe()
175
+ }
176
+ storeEventSubscription = subject.event$
177
+ .subscribe(eventData => {
178
+ const renderData = makeTextData({
179
+ eventData,
180
+ eventName: eventData.eventName,
181
+ t: 1,
182
+ eventFn: data.fullParams.eventFn!,
183
+ textAttrs: data.fullParams.textAttrs!,
184
+ textStyles: data.fullParams.textStyles!
185
+ })
186
+ centerTextSelection = renderText(graphicSelection, renderData)
187
+ })
188
+ })
189
+ })
190
+
191
+ return () => {
192
+ destroy$.next(undefined)
193
+ }
194
+ })