@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

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 (80) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +10246 -9523
  2. package/dist/orbcharts-plugins-basic.umd.js +10 -10
  3. package/dist/src/base/BaseBarStack.d.ts +5 -1
  4. package/dist/src/base/BaseBars.d.ts +5 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
  6. package/dist/src/base/BaseDots.d.ts +33 -0
  7. package/dist/src/base/BaseGroupAxis.d.ts +35 -0
  8. package/dist/src/base/BaseLines.d.ts +3 -1
  9. package/dist/src/base/BaseValueAxis.d.ts +36 -0
  10. package/dist/src/grid/defaults.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +18 -4
  12. package/dist/src/grid/index.d.ts +1 -1
  13. package/dist/src/grid/plugins/Dots.d.ts +1 -3
  14. package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
  15. package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
  16. package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
  17. package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
  18. package/dist/src/grid/types.d.ts +1 -1
  19. package/dist/src/multiGrid/defaults.d.ts +9 -2
  20. package/dist/src/multiGrid/index.d.ts +8 -1
  21. package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
  22. package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
  23. package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
  24. package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
  25. package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
  26. package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
  27. package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
  28. package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
  29. package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
  30. package/dist/src/multiGrid/types.d.ts +31 -0
  31. package/package.json +2 -2
  32. package/src/base/BaseBarStack.ts +375 -198
  33. package/src/base/BaseBars.ts +297 -191
  34. package/src/base/BaseBarsTriangle.ts +344 -229
  35. package/src/base/BaseDots.ts +634 -0
  36. package/src/base/BaseGroupAxis.ts +497 -0
  37. package/src/base/BaseLines.ts +180 -50
  38. package/src/base/BaseValueAxis.ts +475 -0
  39. package/src/grid/defaults.ts +3 -3
  40. package/src/grid/gridObservables.ts +147 -14
  41. package/src/grid/index.ts +1 -1
  42. package/src/grid/plugins/BarStack.ts +4 -0
  43. package/src/grid/plugins/Bars.ts +4 -0
  44. package/src/grid/plugins/BarsTriangle.ts +4 -0
  45. package/src/grid/plugins/Dots.ts +19 -410
  46. package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
  47. package/src/grid/plugins/GroupAxis.ts +16 -348
  48. package/src/grid/plugins/Lines.ts +2 -0
  49. package/src/grid/plugins/ScalingArea.ts +9 -6
  50. package/src/grid/plugins/ValueAxis.ts +13 -337
  51. package/src/grid/plugins/ValueStackAxis.ts +35 -336
  52. package/src/grid/types.ts +1 -1
  53. package/src/index.ts +1 -0
  54. package/src/multiGrid/defaults.ts +120 -14
  55. package/src/multiGrid/index.ts +9 -2
  56. package/src/multiGrid/multiGridObservables.ts +279 -0
  57. package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
  58. package/src/multiGrid/plugins/MultiBars.ts +59 -0
  59. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
  60. package/src/multiGrid/plugins/MultiDots.ts +58 -0
  61. package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
  62. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
  63. package/src/multiGrid/plugins/MultiLines.ts +58 -0
  64. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
  65. package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
  66. package/src/multiGrid/types.ts +39 -0
  67. package/tsconfig.dev.json +17 -0
  68. package/tsconfig.prod.json +14 -0
  69. package/vite.config.js +5 -0
  70. package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
  71. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
  72. package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
  73. package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
  74. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  75. package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
  76. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  77. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  78. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  79. /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
  80. /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
@@ -1,427 +1,36 @@
1
- import * as d3 from 'd3'
2
1
  import {
3
- Observable,
4
- combineLatest,
5
- switchMap,
6
- distinctUntilChanged,
7
- filter,
8
- first,
9
- map,
10
- takeUntil,
11
2
  Subject } from 'rxjs'
12
3
  import {
13
4
  defineGridPlugin } from '@orbcharts/core'
14
- import type {
15
- ChartParams,
16
- ComputedDatumGrid,
17
- Layout } from '@orbcharts/core'
18
- import type { DotsParams } from '../types'
19
5
  import { DEFAULT_DOTS_PARAMS } from '../defaults'
20
- import { getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
21
-
22
- type ClipPathDatum = {
23
- id: string;
24
- // x: number;
25
- // y: number;
26
- width: number;
27
- height: number;
28
- }
6
+ import { createBaseDots } from '../../base/BaseDots'
29
7
 
30
8
  const pluginName = 'Dots'
31
- const gClassName = getClassName(pluginName, 'g')
32
- const circleClassName = getClassName(pluginName, 'circle')
33
-
34
- function renderDots ({ selection, data, fullParams, fullChartParams, graphicOppositeScale }: {
35
- selection: d3.Selection<SVGGElement, any, any, any>
36
- data: ComputedDatumGrid[]
37
- fullParams: DotsParams
38
- fullChartParams: ChartParams
39
- graphicOppositeScale: [number, number]
40
- }) {
41
- const createEnterDuration = (enter: d3.Selection<d3.EnterElement, ComputedDatumGrid, SVGGElement, any>) => {
42
- const enterSize = enter.size()
43
- const eachDuration = fullChartParams.transitionDuration / enterSize
44
- return eachDuration
45
- }
46
- // enterDuration
47
- let enterDuration = 0
48
-
49
- const dots = selection
50
- .selectAll<SVGGElement, ComputedDatumGrid>('g')
51
- .data(data, d => d.id)
52
- .join(
53
- enter => {
54
- // enterDuration
55
- enterDuration = createEnterDuration(enter)
56
-
57
- return enter
58
- .append('g')
59
- .classed(gClassName, true)
60
- },
61
- update => update,
62
- exit => exit.remove()
63
- )
64
- .attr('transform', d => `translate(${d.axisX}, ${d.axisY})`)
65
- .each((d, i, g) => {
66
- const circle = d3.select(g[i])
67
- .selectAll('circle')
68
- .data([d])
69
- .join(
70
- enter => {
71
- return enter
72
- .append('circle')
73
- .style('cursor', 'pointer')
74
- .style('vector-effect', 'non-scaling-stroke')
75
- .classed(circleClassName, true)
76
- .attr('opacity', 0)
77
- .transition()
78
- .delay((_d, _i) => {
79
- return i * enterDuration
80
- })
81
- .attr('opacity', 1)
82
- },
83
- update => {
84
- return update
85
- .transition()
86
- .duration(50)
87
- // .attr('cx', d => d.axisX)
88
- // .attr('cy', d => d.axisY)
89
- .attr('opacity', 1)
90
- },
91
- exit => exit.remove()
92
- )
93
- .attr('r', fullParams.radius)
94
- .attr('fill', (d, i) => getDatumColor({ datum: d, colorType: fullParams.fillColorType, fullChartParams }))
95
- .attr('stroke', (d, i) => getDatumColor({ datum: d, colorType: fullParams.strokeColorType, fullChartParams }))
96
- .attr('stroke-width', fullParams.strokeWidth)
97
- .attr('transform', `scale(${graphicOppositeScale[0]}, ${graphicOppositeScale[1]})`)
98
- })
99
-
100
- return dots
101
- }
102
-
103
-
104
- function highlightDots ({ selection, ids, onlyShowHighlighted, fullChartParams }: {
105
- selection: d3.Selection<SVGGElement, ComputedDatumGrid, any, any>
106
- ids: string[]
107
- onlyShowHighlighted: boolean
108
- fullChartParams: ChartParams
109
- }) {
110
- selection.interrupt('highlight')
111
- if (!ids.length) {
112
- // remove highlight
113
- selection
114
- .transition('highlight')
115
- .duration(200)
116
- .style('opacity', onlyShowHighlighted === true ? 0 : 1)
117
- return
118
- }
119
-
120
- selection
121
- .each((d, i, n) => {
122
- if (ids.includes(d.id)) {
123
- d3.select(n[i])
124
- .style('opacity', 1)
125
- .transition('highlight')
126
- .duration(200)
127
- } else {
128
- d3.select(n[i])
129
- .style('opacity', onlyShowHighlighted === true ? 0 : fullChartParams.styles.unhighlightedOpacity)
130
- .transition('highlight')
131
- .duration(200)
132
- }
133
- })
134
- }
135
-
136
- function renderClipPath ({ defsSelection, clipPathData }: {
137
- defsSelection: d3.Selection<SVGDefsElement, any, any, any>
138
- clipPathData: ClipPathDatum[]
139
- }) {
140
- const clipPath = defsSelection
141
- .selectAll<SVGClipPathElement, Layout>('clipPath')
142
- .data(clipPathData)
143
- .join(
144
- enter => {
145
- return enter
146
- .append('clipPath')
147
- },
148
- update => update,
149
- exit => exit.remove()
150
- )
151
- .attr('id', d => d.id)
152
- .each((d, i, g) => {
153
- const rect = d3.select(g[i])
154
- .selectAll<SVGRectElement, typeof d>('rect')
155
- .data([d])
156
- .join('rect')
157
- .attr('x', 0)
158
- .attr('y', 0)
159
- .attr('width', _d => _d.width)
160
- .attr('height', _d => _d.height)
161
- })
162
-
163
- }
164
9
 
165
10
  export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
166
- // const axisGUpdate = selection
167
- // .selectAll('g')
168
- // .data()
169
- const destroy$ = new Subject()
170
-
171
- const clipPathID = getUniID(pluginName, 'clipPath-box')
172
-
173
- // const rectSelection: d3.Selection<SVGRectElement, any, any, any> = selection
174
- // .append('rect')
175
- // .attr('pointer-events', 'none')
176
- const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
177
- .append('g')
178
- .attr('clip-path', `url(#${clipPathID})`)
179
- const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
180
- const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
181
- const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
182
- // const dotSelection$: Subject<d3.Selection<SVGCircleElement, ComputedDatumGrid, SVGGElement, any>> = new Subject()
183
-
184
- observer.gridAxesTransform$
185
- .pipe(
186
- takeUntil(destroy$),
187
- map(d => d.value),
188
- distinctUntilChanged()
189
- ).subscribe(d => {
190
- axisSelection
191
- .style('transform', d)
192
- })
193
-
194
- observer.gridGraphicTransform$
195
- .pipe(
196
- takeUntil(destroy$),
197
- switchMap(async d => d.value),
198
- distinctUntilChanged()
199
- ).subscribe(d => {
200
- dataAreaSelection
201
- .transition()
202
- .duration(50)
203
- .style('transform', d)
204
- })
205
-
206
- const graphicOppositeScale$: Observable<[number, number]> = observer.gridGraphicTransform$.pipe(
207
- takeUntil(destroy$),
208
- map(d => [1 / d.scale[0], 1 / d.scale[1]])
209
- )
210
-
211
- // const axisSize$ = gridAxisSizeObservable({
212
- // dataFormatter$,
213
- // observer.layout$
214
- // })
215
-
216
- // combineLatest({
217
- // axisSized: axisSize$,
218
- // computedLayout: observer.layout$
219
- // }).pipe(
220
- // takeUntil(destroy$),
221
- // // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
222
- // switchMap(async (d) => d),
223
- // ).subscribe(d => {
224
- // rectSelection
225
- // .style('transform', d.computedLayout.content.axesTransform)
226
- // .attr('opacity', 0)
227
- // .attr('width', d.axisSized.width)
228
- // .attr('height', d.axisSized.height)
229
- // // .transition()
230
- // // .attr('opacity', 1)
231
- // })
232
- // selection.on('mouseover', (event, datum) => {
233
-
234
- // console.log('selection mouseover', event, datum)
235
- // })
236
-
237
- const clipPathSubscription = observer.gridAxesSize$.pipe(
238
- takeUntil(destroy$),
239
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
240
- switchMap(async (d) => d),
241
- ).subscribe(data => {
242
- // 外層的遮罩
243
- const clipPathData = [{
244
- id: clipPathID,
245
- width: data.width,
246
- height: data.height
247
- }]
248
- renderClipPath({
249
- defsSelection,
250
- clipPathData,
251
- })
252
- })
253
-
254
- // const visibleComputedData$ = observer.computedData$.pipe(
255
- // map(computedData => {
256
- // return computedData
257
- // .map(d => {
258
- // return d.filter(_d => _d.visible == true)
259
- // })
260
- // })
261
- // )
262
-
263
- // const SeriesDataMap$ = visibleComputedData$.pipe(
264
- // map(d => makeGridSeriesDataMap(d))
265
- // )
266
-
267
- // const GroupDataMap$ = visibleComputedData$.pipe(
268
- // map(d => makeGridGroupDataMap(d))
269
- // )
270
-
271
- // const DataMap$ = computedData$.pipe(
272
- // map(d => {
273
- // const DataMap: Map<string, ComputedDatumGrid> = new Map()
274
- // d.flat().forEach(_d => DataMap.set(_d.id, _d))
275
- // return DataMap
276
- // })
277
- // )
278
-
279
- const highlightTarget$ = observer.fullChartParams$.pipe(
280
- takeUntil(destroy$),
281
- map(d => d.highlightTarget),
282
- distinctUntilChanged()
283
- )
284
-
285
- combineLatest({
286
- computedData: observer.computedData$,
287
- visibleComputedData: observer.visibleComputedData$,
288
- SeriesDataMap: observer.SeriesDataMap$,
289
- GroupDataMap: observer.GroupDataMap$,
290
- graphicOppositeScale: graphicOppositeScale$,
291
- fullChartParams: observer.fullChartParams$,
292
- fullParams: observer.fullParams$,
293
- highlightTarget: highlightTarget$
294
- }).pipe(
295
- takeUntil(destroy$),
296
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
297
- switchMap(async (d) => d),
298
- ).subscribe(data => {
299
-
300
- const graphicSelection = renderDots({
301
- selection: dataAreaSelection,
302
- data: data.visibleComputedData.flat(),
303
- fullParams: data.fullParams,
304
- fullChartParams: data.fullChartParams,
305
- graphicOppositeScale: data.graphicOppositeScale
306
- })
307
-
308
- graphicSelection
309
- .on('mouseover', (event, datum) => {
310
- event.stopPropagation()
311
11
 
312
- subject.event$.next({
313
- type: 'grid',
314
- eventName: 'mouseover',
315
- pluginName: name,
316
- highlightTarget: data.highlightTarget,
317
- datum,
318
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
319
- seriesIndex: datum.seriesIndex,
320
- seriesLabel: datum.seriesLabel,
321
- groups: data.GroupDataMap.get(datum.groupLabel)!,
322
- groupIndex: datum.groupIndex,
323
- groupLabel: datum.groupLabel,
324
- event,
325
- data: data.computedData
326
- })
327
- })
328
- .on('mousemove', (event, datum) => {
329
- event.stopPropagation()
330
-
331
- subject.event$.next({
332
- type: 'grid',
333
- eventName: 'mousemove',
334
- pluginName: name,
335
- highlightTarget: data.highlightTarget,
336
- data: data.computedData,
337
- datum,
338
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
339
- seriesIndex: datum.seriesIndex,
340
- seriesLabel: datum.seriesLabel,
341
- groups: data.GroupDataMap.get(datum.groupLabel)!,
342
- groupIndex: datum.groupIndex,
343
- groupLabel: datum.groupLabel,
344
- event
345
- })
346
- })
347
- .on('mouseout', (event, datum) => {
348
- event.stopPropagation()
349
-
350
- subject.event$.next({
351
- type: 'grid',
352
- eventName: 'mouseout',
353
- pluginName: name,
354
- highlightTarget: data.highlightTarget,
355
- datum,
356
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
357
- seriesIndex: datum.seriesIndex,
358
- seriesLabel: datum.seriesLabel,
359
- groups: data.GroupDataMap.get(datum.groupLabel)!,
360
- groupIndex: datum.groupIndex,
361
- groupLabel: datum.groupLabel,
362
- event,
363
- data: data.computedData
364
- })
365
- })
366
- .on('click', (event, datum) => {
367
- event.stopPropagation()
368
-
369
- subject.event$.next({
370
- type: 'grid',
371
- eventName: 'click',
372
- pluginName: name,
373
- highlightTarget: data.highlightTarget,
374
- datum,
375
- series: data.SeriesDataMap.get(datum.seriesLabel)!,
376
- seriesIndex: datum.seriesIndex,
377
- seriesLabel: datum.seriesLabel,
378
- groups: data.GroupDataMap.get(datum.groupLabel)!,
379
- groupIndex: datum.groupIndex,
380
- groupLabel: datum.groupLabel,
381
- event,
382
- data: data.computedData
383
- })
384
- })
385
-
386
- graphicSelection$.next(graphicSelection)
387
-
388
- })
12
+ const destroy$ = new Subject()
389
13
 
390
- // const datumList$ = observer.computedData$.pipe(
391
- // takeUntil(destroy$),
392
- // map(d => d.flat())
393
- // )
394
- // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
395
- const highlightSubscription = observer.gridHighlight$.subscribe()
396
- const onlyShowHighlighted$ = observer.fullParams$.pipe(
397
- takeUntil(destroy$),
398
- map(d => d.onlyShowHighlighted),
399
- distinctUntilChanged()
400
- )
401
-
402
- observer.fullChartParams$.pipe(
403
- takeUntil(destroy$),
404
- switchMap(d => combineLatest({
405
- graphicSelection: graphicSelection$,
406
- highlight: observer.gridHighlight$,
407
- onlyShowHighlighted: onlyShowHighlighted$,
408
- fullChartParams: observer.fullChartParams$
409
- }).pipe(
410
- takeUntil(destroy$),
411
- switchMap(async d => d)
412
- ))
413
- ).subscribe(data => {
414
- highlightDots({
415
- selection: data.graphicSelection,
416
- ids: data.highlight,
417
- onlyShowHighlighted: data.onlyShowHighlighted,
418
- fullChartParams: data.fullChartParams
419
- })
14
+ const unsubscribeBaseBars = createBaseDots(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ visibleComputedData$: observer.visibleComputedData$,
18
+ existedSeriesLabels$: observer.existedSeriesLabels$,
19
+ SeriesDataMap$: observer.SeriesDataMap$,
20
+ GroupDataMap$: observer.GroupDataMap$,
21
+ fullParams$: observer.fullParams$,
22
+ fullChartParams$: observer.fullChartParams$,
23
+ gridAxesTransform$: observer.gridAxesTransform$,
24
+ gridGraphicTransform$: observer.gridGraphicTransform$,
25
+ gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
26
+ gridAxesSize$: observer.gridAxesSize$,
27
+ gridHighlight$: observer.gridHighlight$,
28
+ gridContainer$: observer.gridContainer$,
29
+ event$: subject.event$,
420
30
  })
421
31
 
422
-
423
32
  return () => {
424
- highlightSubscription.unsubscribe()
425
33
  destroy$.next(undefined)
34
+ unsubscribeBaseBars()
426
35
  }
427
36
  })
@@ -24,7 +24,7 @@ import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
24
24
  import { d3EventObservable } from '../../utils/observables'
25
25
  import { gridGroupPositionFnObservable } from '../gridObservables'
26
26
  import { createAxisPointScale } from '@orbcharts/core'
27
- import type { GroupAreaParams } from '../types'
27
+ import type { GroupAuxParams } from '../types'
28
28
 
29
29
  interface LineDatum {
30
30
  id: string
@@ -41,14 +41,14 @@ interface LabelDatum {
41
41
  y: number
42
42
  }
43
43
 
44
- const pluginName = 'GroupArea'
44
+ const pluginName = 'GroupAux'
45
45
  const labelClassName = getClassName(pluginName, 'label-box')
46
46
 
47
47
  function createLineData ({ groupLabel, axisX, axisHeight, fullParams }: {
48
48
  groupLabel: string
49
49
  axisX: number
50
50
  axisHeight: number
51
- fullParams: GroupAreaParams
51
+ fullParams: GroupAuxParams
52
52
  }): LineDatum[] {
53
53
  return fullParams.showLine && groupLabel
54
54
  ? [{
@@ -65,7 +65,7 @@ function renderLine ({ selection, pluginName, lineData, fullParams, fullChartPar
65
65
  selection: d3.Selection<any, unknown, any, unknown>
66
66
  pluginName: string
67
67
  lineData: LineDatum[]
68
- fullParams: GroupAreaParams
68
+ fullParams: GroupAuxParams
69
69
  fullChartParams: ChartParams
70
70
  }) {
71
71
  const gClassName = getClassName(pluginName, 'auxline')
@@ -114,7 +114,7 @@ function removeLine (selection: d3.Selection<any, unknown, any, unknown>) {
114
114
  function createLabelData ({ groupLabel, axisX, fullParams }: {
115
115
  groupLabel: string
116
116
  axisX: number
117
- fullParams: GroupAreaParams
117
+ fullParams: GroupAuxParams
118
118
  }) {
119
119
  return fullParams.showLabel && groupLabel
120
120
  ? [{
@@ -126,12 +126,12 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
126
126
  : []
127
127
  }
128
128
 
129
- function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesOppositeTransformValue }: {
129
+ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
130
130
  selection: d3.Selection<any, unknown, any, unknown>
131
131
  labelData: LabelDatum[]
132
- fullParams: GroupAreaParams
132
+ fullParams: GroupAuxParams
133
133
  fullChartParams: ChartParams
134
- gridAxesOppositeTransformValue: string
134
+ gridAxesReverseTransformValue: string
135
135
  }) {
136
136
  const rectHeight = fullChartParams.styles.textSize + 4
137
137
 
@@ -176,7 +176,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
176
176
  // .style('pointer-events', 'none')
177
177
  const rect = rectUpdate.merge(rectEnter)
178
178
  .attr('width', d => `${rectWidth}px`)
179
- .style('transform', gridAxesOppositeTransformValue)
179
+ .style('transform', gridAxesReverseTransformValue)
180
180
  rectUpdate.exit().remove()
181
181
 
182
182
  const textUpdate = d3.select(n[i])
@@ -190,7 +190,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
190
190
  // .style('pointer-events', 'none')
191
191
  const text = textUpdate.merge(textEnter)
192
192
  .text(d => d.text)
193
- .style('transform', gridAxesOppositeTransformValue)
193
+ .style('transform', gridAxesReverseTransformValue)
194
194
  .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
195
195
  .attr('font-size', fullChartParams.styles.textSize)
196
196
  .attr('x', rectX + 6)
@@ -208,7 +208,7 @@ function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
208
208
  gUpdate.exit().remove()
209
209
  }
210
210
 
211
- export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
211
+ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
212
212
  const destroy$ = new Subject()
213
213
 
214
214
  const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
@@ -283,7 +283,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
283
283
  // subscriber.next(transformData.value)
284
284
  // })
285
285
  // })
286
- // const oppositeTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
286
+ // const reverseTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
287
287
  // takeUntil(destroy$),
288
288
  // map(d => {
289
289
  // const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
@@ -303,12 +303,12 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
303
303
  // )
304
304
  // const contentTransform$ = combineLatest({
305
305
  // fullParams: observer.fullParams$,
306
- // oppositeTransform: oppositeTransform$
306
+ // reverseTransform: reverseTransform$
307
307
  // }).pipe(
308
308
  // takeUntil(destroy$),
309
309
  // switchMap(async data => {
310
310
  // const translate = [0, 0]
311
- // return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.oppositeTransform.rotate}deg) rotateX(${data.oppositeTransform.rotateX}deg) rotateY(${data.oppositeTransform.rotateY}deg)`
311
+ // return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.reverseTransform.rotate}deg) rotateX(${data.reverseTransform.rotateX}deg) rotateY(${data.reverseTransform.rotateY}deg)`
312
312
  // }),
313
313
  // distinctUntilChanged()
314
314
  // )
@@ -324,18 +324,18 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
324
324
  ).subscribe(data => {
325
325
  const groupMin = 0
326
326
  const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
327
- const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
328
- ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
329
- : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
330
- const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
331
- ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
332
- : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
327
+ const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
328
+ ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
329
+ : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
330
+ const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
331
+ ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
332
+ : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
333
333
 
334
334
  const groupingLength = data.computedData[0]
335
335
  ? data.computedData[0].length
336
336
  : 0
337
337
 
338
- let _labels = data.fullDataFormatter.grid.seriesType === 'row'
338
+ let _labels = data.fullDataFormatter.grid.gridData.seriesDirection === 'row'
339
339
  // ? data.fullDataFormatter.grid.columnLabels
340
340
  // : data.fullDataFormatter.grid.rowLabels
341
341
  ? (data.computedData[0] ?? []).map(d => d.groupLabel)
@@ -352,7 +352,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
352
352
  })
353
353
 
354
354
 
355
- const padding = data.fullDataFormatter.groupAxis.scalePadding
355
+ const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
356
356
 
357
357
  const groupScale = createAxisPointScale({
358
358
  axisLabels,
@@ -496,7 +496,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
496
496
  fullParams: observer.fullParams$,
497
497
  fullChartParams: observer.fullChartParams$,
498
498
  highlightTarget: highlightTarget$,
499
- gridAxesOppositeTransform: observer.gridAxesOppositeTransform$,
499
+ gridAxesReverseTransform: observer.gridAxesReverseTransform$,
500
500
  GroupDataMap: observer.GroupDataMap$,
501
501
  gridGroupPositionFn: gridGroupPositionFn$,
502
502
  }).pipe(
@@ -535,7 +535,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
535
535
  labelData,
536
536
  fullParams: data.fullParams,
537
537
  fullChartParams: data.fullChartParams,
538
- gridAxesOppositeTransformValue: data.gridAxesOppositeTransform.value
538
+ gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
539
539
  })
540
540
 
541
541
  // label的事件