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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +5160 -4996
  2. package/dist/orbcharts-plugins-basic.umd.js +7 -7
  3. package/dist/src/base/BaseLegend.d.ts +5 -3
  4. package/dist/src/grid/defaults.d.ts +10 -10
  5. package/dist/src/grid/types.d.ts +10 -2
  6. package/dist/src/multiGrid/defaults.d.ts +2 -1
  7. package/dist/src/multiGrid/index.d.ts +1 -0
  8. package/dist/src/multiGrid/plugins/MultiGridLegend.d.ts +1 -0
  9. package/dist/src/multiGrid/types.d.ts +17 -0
  10. package/dist/src/series/defaults.d.ts +2 -2
  11. package/dist/src/series/types.d.ts +10 -2
  12. package/package.json +2 -2
  13. package/src/base/BaseLegend.ts +41 -13
  14. package/src/grid/defaults.ts +10 -10
  15. package/src/grid/plugins/BarStack.ts +2 -2
  16. package/src/grid/plugins/Bars.ts +2 -2
  17. package/src/grid/plugins/BarsTriangle.ts +2 -2
  18. package/src/grid/plugins/Dots.ts +2 -2
  19. package/src/grid/plugins/GridLegend.ts +19 -1
  20. package/src/grid/plugins/GroupArea.ts +2 -2
  21. package/src/grid/plugins/GroupAxis.ts +2 -2
  22. package/src/grid/plugins/Lines.ts +2 -2
  23. package/src/grid/plugins/ScalingArea.ts +2 -2
  24. package/src/grid/plugins/ValueAxis.ts +2 -2
  25. package/src/grid/plugins/ValueStackAxis.ts +2 -2
  26. package/src/grid/types.ts +12 -2
  27. package/src/multiGrid/defaults.ts +20 -1
  28. package/src/multiGrid/index.ts +2 -1
  29. package/src/multiGrid/plugins/BarsAndLines.ts +18 -2
  30. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -0
  31. package/src/multiGrid/types.ts +19 -0
  32. package/src/series/defaults.ts +2 -2
  33. package/src/series/plugins/Bubbles.ts +2 -2
  34. package/src/series/plugins/Pie.ts +2 -2
  35. package/src/series/plugins/SeriesLegend.ts +19 -1
  36. package/src/series/types.ts +12 -2
@@ -9,9 +9,11 @@ export interface BaseLegendParams {
9
9
  backgroundFill: ColorType;
10
10
  backgroundStroke: ColorType;
11
11
  gap: number;
12
- listRectWidth: number;
13
- listRectHeight: number;
14
- listRectRadius: number;
12
+ seriesList: Array<{
13
+ listRectWidth: number;
14
+ listRectHeight: number;
15
+ listRectRadius: number;
16
+ }>;
15
17
  }
16
18
  interface BaseLegendContext {
17
19
  rootSelection: d3.Selection<any, unknown, any, unknown>;
@@ -1,13 +1,13 @@
1
1
  import { LinesParams, GroupAreaParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
2
2
 
3
- export declare const DEFAULT_LINES_PLUGIN_PARAMS: LinesParams;
4
- export declare const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams;
5
- export declare const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams;
6
- export declare const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams;
7
- export declare const DEFAULT_BAR_STACK_PLUGIN_PARAMS: BarStackParams;
8
- export declare const DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS: BarsTriangleParams;
9
- export declare const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams;
10
- export declare const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams;
11
- export declare const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams;
12
- export declare const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams;
3
+ export declare const DEFAULT_LINES_PARAMS: LinesParams;
4
+ export declare const DEFAULT_DOTS_PARAMS: DotsParams;
5
+ export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAreaParams;
6
+ export declare const DEFAULT_BARS_PARAMS: BarsParams;
7
+ export declare const DEFAULT_BAR_STACK_PARAMS: BarStackParams;
8
+ export declare const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams;
9
+ export declare const DEFAULT_GROUPING_AXIS_PARAMS: GroupAxisParams;
10
+ export declare const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams;
11
+ export declare const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams;
12
+ export declare const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams;
13
13
  export declare const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams;
@@ -1,5 +1,4 @@
1
1
  import { ColorType } from '@orbcharts/core';
2
- import { BaseLegendParams } from '../base/BaseLegend';
3
2
 
4
3
  export interface LinesParams {
5
4
  lineCurve: string;
@@ -72,5 +71,14 @@ export interface ValueStackAxisParams extends ValueAxisParams {
72
71
  }
73
72
  export interface ScalingAreaParams {
74
73
  }
75
- export interface GridLegendParams extends BaseLegendParams {
74
+ export interface GridLegendParams {
75
+ position: 'top' | 'bottom' | 'left' | 'right';
76
+ justify: 'start' | 'center' | 'end';
77
+ padding: number;
78
+ backgroundFill: ColorType;
79
+ backgroundStroke: ColorType;
80
+ gap: number;
81
+ listRectWidth: number;
82
+ listRectHeight: number;
83
+ listRectRadius: number;
76
84
  }
@@ -1,3 +1,4 @@
1
- import { BarsAndLinesParams } from './types';
1
+ import { BarsAndLinesParams, MultiGridLegendParams } from './types';
2
2
 
3
3
  export declare const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams;
4
+ export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;
@@ -1,3 +1,4 @@
1
1
  export * from './defaults';
2
2
  export * from './types';
3
3
  export { BarsAndLines } from './plugins/BarsAndLines';
4
+ export { MultiGridLegend } from './plugins/MultiGridLegend';
@@ -0,0 +1 @@
1
+ export declare const MultiGridLegend: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').MultiGridLegendParams>;
@@ -1,7 +1,24 @@
1
1
  import { BaseBarsParams } from '../base/BaseBars';
2
2
  import { BaseLinesParams } from '../base/BaseLines';
3
+ import { ColorType } from '@orbcharts/core';
3
4
 
4
5
  export interface BarsAndLinesParams {
5
6
  bars: BaseBarsParams;
6
7
  lines: BaseLinesParams;
7
8
  }
9
+ export interface MultiGridLegendParams {
10
+ position: 'top' | 'bottom' | 'left' | 'right';
11
+ justify: 'start' | 'center' | 'end';
12
+ padding: number;
13
+ backgroundFill: ColorType;
14
+ backgroundStroke: ColorType;
15
+ gap: number;
16
+ listRectWidth: number;
17
+ listRectHeight: number;
18
+ listRectRadius: number;
19
+ gridList: Array<{
20
+ listRectWidth: number;
21
+ listRectHeight: number;
22
+ listRectRadius: number;
23
+ }>;
24
+ }
@@ -1,7 +1,7 @@
1
1
  import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, SeriesLegendParams } from './types';
2
2
 
3
- export declare const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams;
4
- export declare const DEFAULT_PIE_PLUGIN_PARAMS: PieParams;
3
+ export declare const DEFAULT_BUBBLES_PARAMS: BubblesParams;
4
+ export declare const DEFAULT_PIE_PARAMS: PieParams;
5
5
  export declare const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams;
6
6
  export declare const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams;
7
7
  export declare const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams;
@@ -1,5 +1,4 @@
1
1
  import { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core';
2
- import { BaseLegendParams } from '../base/BaseLegend';
3
2
 
4
3
  export type BubbleScaleType = 'area' | 'radius';
5
4
  export interface BubblesParams {
@@ -44,5 +43,14 @@ export interface PieLabelsParams {
44
43
  labelFn: ((d: ComputedDatumSeries) => string);
45
44
  labelColorType: ColorType;
46
45
  }
47
- export interface SeriesLegendParams extends BaseLegendParams {
46
+ export interface SeriesLegendParams {
47
+ position: 'top' | 'bottom' | 'left' | 'right';
48
+ justify: 'start' | 'center' | 'end';
49
+ padding: number;
50
+ backgroundFill: ColorType;
51
+ backgroundStroke: ColorType;
52
+ gap: number;
53
+ listRectWidth: number;
54
+ listRectHeight: number;
55
+ listRectRadius: number;
48
56
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orbcharts/plugins-basic",
3
- "version": "3.0.0-alpha.31",
3
+ "version": "3.0.0-alpha.33",
4
4
  "description": "plugins for OrbCharts",
5
5
  "author": "Blue Planet Inc.",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "vite-plugin-dts": "^3.7.3"
36
36
  },
37
37
  "dependencies": {
38
- "@orbcharts/core": "^3.0.0-alpha.27",
38
+ "@orbcharts/core": "^3.0.0-alpha.29",
39
39
  "d3": "^7.8.5",
40
40
  "rxjs": "^7.8.1"
41
41
  }
@@ -20,9 +20,11 @@ export interface BaseLegendParams {
20
20
  backgroundFill: ColorType
21
21
  backgroundStroke: ColorType
22
22
  gap: number
23
- listRectWidth: number
24
- listRectHeight: number
25
- listRectRadius: number
23
+ seriesList: Array<{
24
+ listRectWidth: number
25
+ listRectHeight: number
26
+ listRectRadius: number
27
+ }>
26
28
  // highlightEvent: boolean
27
29
  }
28
30
 
@@ -70,8 +72,21 @@ interface LegendItem {
70
72
  translateX: number
71
73
  translateY: number
72
74
  color: string
73
- // fontSize: number
74
- // listRectRadius: number
75
+ listRectWidth: number
76
+ listRectHeight: number
77
+ listRectRadius: number
78
+ }
79
+
80
+ interface ListStyle {
81
+ listRectWidth: number
82
+ listRectHeight: number
83
+ listRectRadius: number
84
+ }
85
+
86
+ const defaultListStyle: ListStyle = {
87
+ listRectWidth: 14,
88
+ listRectHeight: 14,
89
+ listRectRadius: 0,
75
90
  }
76
91
 
77
92
  export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: string, {
@@ -198,13 +213,21 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
198
213
  })
199
214
  )
200
215
 
216
+ const defaultListStyle$ = fullParams$.pipe(
217
+ takeUntil(destroy$),
218
+ map(data => {
219
+ return data.seriesList[0] ? data.seriesList[0] : defaultListStyle
220
+ })
221
+ )
222
+
201
223
  // 先計算list內每個item
202
224
  const lengendItems$: Observable<LegendItem[][]> = combineLatest({
203
225
  fullParams: fullParams$,
204
226
  fullChartParams: fullChartParams$,
205
227
  seriesLabels: seriesLabels$,
206
228
  lineDirection: lineDirection$,
207
- lineMaxSize: lineMaxSize$
229
+ lineMaxSize: lineMaxSize$,
230
+ defaultListStyle: defaultListStyle$
208
231
  }).pipe(
209
232
  takeUntil(destroy$),
210
233
  switchMap(async d => d),
@@ -268,6 +291,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
268
291
  prev[lineIndex] = []
269
292
  }
270
293
 
294
+ const listStyle = data.fullParams.seriesList[itemIndex] ? data.fullParams.seriesList[itemIndex] : data.defaultListStyle
295
+
271
296
  prev[lineIndex].push({
272
297
  id: current,
273
298
  seriesLabel: current,
@@ -279,8 +304,11 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
279
304
  translateX,
280
305
  translateY,
281
306
  color,
307
+ listRectWidth: listStyle.listRectWidth,
308
+ listRectHeight: listStyle.listRectHeight,
309
+ listRectRadius: listStyle.listRectRadius
282
310
  })
283
- console.log('items', prev)
311
+
284
312
  return prev
285
313
  }, [])
286
314
  })
@@ -501,8 +529,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
501
529
  })
502
530
  .each((d, i, g) => {
503
531
  const rectCenterX = data.fullChartParams.styles.textSize / 2
504
- const rectWidth = data.fullParams.listRectWidth
505
- const rectHeight = data.fullParams.listRectHeight
532
+ const transformRectWidth = - d.listRectWidth / 2
533
+ const transformRectHeight = - d.listRectHeight / 2
506
534
  // 方塊
507
535
  d3.select(g[i])
508
536
  .selectAll('rect')
@@ -510,11 +538,11 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
510
538
  .join('rect')
511
539
  .attr('x', rectCenterX)
512
540
  .attr('y', rectCenterX)
513
- .attr('width', rectWidth)
514
- .attr('height', rectHeight)
515
- .attr('transform', `translate(${- rectWidth / 2}, ${- rectHeight / 2})`)
541
+ .attr('width', _d => _d.listRectWidth)
542
+ .attr('height', _d => _d.listRectHeight)
543
+ .attr('transform', _d => `translate(${transformRectWidth}, ${transformRectHeight})`)
516
544
  .attr('fill', _d => _d.color)
517
- .attr('rx', data.fullParams.listRectRadius)
545
+ .attr('rx', _d => _d.listRectRadius)
518
546
  // 文字
519
547
  d3.select(g[i])
520
548
  .selectAll('text')
@@ -11,12 +11,12 @@ import type {
11
11
  ScalingAreaParams,
12
12
  GridLegendParams } from './types'
13
13
 
14
- export const DEFAULT_LINES_PLUGIN_PARAMS: LinesParams = {
14
+ export const DEFAULT_LINES_PARAMS: LinesParams = {
15
15
  lineCurve: 'curveLinear',
16
16
  lineWidth: 2
17
17
  }
18
18
 
19
- export const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams = {
19
+ export const DEFAULT_DOTS_PARAMS: DotsParams = {
20
20
  radius: 4,
21
21
  fillColorType: 'white',
22
22
  strokeColorType: 'series',
@@ -24,7 +24,7 @@ export const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams = {
24
24
  onlyShowHighlighted: false
25
25
  }
26
26
 
27
- export const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams = {
27
+ export const DEFAULT_GROUP_AREA_PARAMS: GroupAreaParams = {
28
28
  showLine: true,
29
29
  showLabel: true,
30
30
  lineDashArray: '3, 3',
@@ -35,7 +35,7 @@ export const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams = {
35
35
  labelPadding: 24,
36
36
  }
37
37
 
38
- export const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams = {
38
+ export const DEFAULT_BARS_PARAMS: BarsParams = {
39
39
  // barType: 'rect',
40
40
  barWidth: 0,
41
41
  barPadding: 1,
@@ -43,20 +43,20 @@ export const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams = {
43
43
  barRadius: false,
44
44
  }
45
45
 
46
- export const DEFAULT_BAR_STACK_PLUGIN_PARAMS: BarStackParams = {
46
+ export const DEFAULT_BAR_STACK_PARAMS: BarStackParams = {
47
47
  barWidth: 0,
48
48
  barGroupPadding: 10,
49
49
  barRadius: false,
50
50
  }
51
51
 
52
- export const DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS: BarsTriangleParams = {
52
+ export const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams = {
53
53
  barWidth: 0,
54
54
  barPadding: 1,
55
55
  barGroupPadding: 20,
56
56
  linearGradientOpacity: [1, 0]
57
57
  }
58
58
 
59
- export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams = {
59
+ export const DEFAULT_GROUPING_AXIS_PARAMS: GroupAxisParams = {
60
60
  // labelAnchor: 'start',
61
61
  labelOffset: [0, 0],
62
62
  labelColorType: 'primary',
@@ -72,7 +72,7 @@ export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams = {
72
72
  tickTextColorType: 'primary'
73
73
  }
74
74
 
75
- export const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams = {
75
+ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
76
76
  // labelAnchor: 'end',
77
77
  labelOffset: [0, 0],
78
78
  labelColorType: 'primary',
@@ -89,9 +89,9 @@ export const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams = {
89
89
  tickTextColorType: 'primary'
90
90
  }
91
91
 
92
- export const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams = DEFAULT_VALUE_AXIS_PLUGIN_PARAMS
92
+ export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = DEFAULT_VALUE_AXIS_PARAMS
93
93
 
94
- export const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams = {
94
+ export const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams = {
95
95
 
96
96
  }
97
97
 
@@ -2,13 +2,13 @@ import {
2
2
  Subject,
3
3
  Observable } from 'rxjs'
4
4
  import { defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_BAR_STACK_PLUGIN_PARAMS } from '../defaults'
5
+ import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
6
6
  import { createBaseBarStack } from '../../base/BaseBarStack'
7
7
 
8
8
  const pluginName = 'BarStack'
9
9
 
10
10
 
11
- export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
11
+ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
12
12
  const destroy$ = new Subject()
13
13
 
14
14
  const unsubscribeBaseBars = createBaseBarStack(pluginName, {
@@ -3,12 +3,12 @@ import {
3
3
  Observable } from 'rxjs'
4
4
  import {
5
5
  defineGridPlugin } from '@orbcharts/core'
6
- import { DEFAULT_BARS_PLUGIN_PARAMS } from '../defaults'
6
+ import { DEFAULT_BARS_PARAMS } from '../defaults'
7
7
  import { createBaseBars } from '../../base/BaseBars'
8
8
 
9
9
  const pluginName = 'Bars'
10
10
 
11
- export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
11
+ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
12
12
  const destroy$ = new Subject()
13
13
 
14
14
  const unsubscribeBaseBars = createBaseBars(pluginName, {
@@ -2,12 +2,12 @@ import {
2
2
  Subject,
3
3
  Observable } from 'rxjs'
4
4
  import { defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS } from '../defaults'
5
+ import { DEFAULT_BARS_TRIANGLE_PARAMS } from '../defaults'
6
6
  import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
7
7
 
8
8
  const pluginName = 'BarsTriangle'
9
9
 
10
- export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
10
+ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
11
11
  const destroy$ = new Subject()
12
12
 
13
13
  const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {
@@ -16,7 +16,7 @@ import type {
16
16
  ComputedDatumGrid,
17
17
  Layout } from '@orbcharts/core'
18
18
  import type { DotsParams } from '../types'
19
- import { DEFAULT_DOTS_PLUGIN_PARAMS } from '../defaults'
19
+ import { DEFAULT_DOTS_PARAMS } from '../defaults'
20
20
  import { getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
21
21
 
22
22
  type ClipPathDatum = {
@@ -162,7 +162,7 @@ function renderClipPath ({ defsSelection, clipPathData }: {
162
162
 
163
163
  }
164
164
 
165
- export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
165
+ export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
166
166
  // const axisGUpdate = selection
167
167
  // .selectAll('g')
168
168
  // .data()
@@ -24,10 +24,28 @@ export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAM
24
24
  })
25
25
  )
26
26
 
27
+ // 全部列點矩型使用相同樣式參數
28
+ const fullParams$ = observer.fullParams$.pipe(
29
+ takeUntil(destroy$),
30
+ map(d => {
31
+ const seriesList = [
32
+ {
33
+ listRectWidth: d.listRectWidth,
34
+ listRectHeight: d.listRectHeight,
35
+ listRectRadius: d.listRectRadius,
36
+ }
37
+ ]
38
+ return {
39
+ ...d,
40
+ seriesList
41
+ }
42
+ })
43
+ )
44
+
27
45
  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
28
46
  rootSelection,
29
47
  seriesLabels$,
30
- fullParams$: observer.fullParams$,
48
+ fullParams$,
31
49
  layout$: observer.layout$,
32
50
  fullChartParams$: observer.fullChartParams$
33
51
  })
@@ -17,7 +17,7 @@ import {
17
17
  import type {
18
18
  TransformData,
19
19
  ChartParams } from '@orbcharts/core'
20
- import { DEFAULT_GROUP_AREA_PLUGIN_PARAMS } from '../defaults'
20
+ import { DEFAULT_GROUP_AREA_PARAMS } from '../defaults'
21
21
  import { parseTickFormatValue } from '../../utils/d3Utils'
22
22
  import { measureTextWidth } from '../../utils/commonUtils'
23
23
  import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
@@ -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_PLUGIN_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
211
+ export const GroupArea = 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
@@ -16,7 +16,7 @@ import type {
16
16
  ChartParams,
17
17
  TransformData } from '@orbcharts/core'
18
18
  import type { GroupAxisParams } from '../types'
19
- import { DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS } from '../defaults'
19
+ import { DEFAULT_GROUPING_AXIS_PARAMS } from '../defaults'
20
20
  import { parseTickFormatValue } from '../../utils/d3Utils'
21
21
  import { getColor, getClassName } from '../../utils/orbchartsUtils'
22
22
 
@@ -126,7 +126,7 @@ function renderPointAxis ({ selection, params, tickTextAlign, axisLabelAlign, gr
126
126
  }
127
127
 
128
128
 
129
- export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
129
+ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUPING_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
130
130
 
131
131
  const destroy$ = new Subject()
132
132
 
@@ -2,12 +2,12 @@ import {
2
2
  Subject } from 'rxjs'
3
3
  import {
4
4
  defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_LINES_PLUGIN_PARAMS } from '../defaults'
5
+ import { DEFAULT_LINES_PARAMS } from '../defaults'
6
6
  import { createBaseLines } from '../../base/BaseLines'
7
7
 
8
8
  const pluginName = 'Lines'
9
9
 
10
- export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
10
+ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, name, observer, subject }) => {
11
11
 
12
12
  const destroy$ = new Subject()
13
13
 
@@ -11,14 +11,14 @@ import {
11
11
  Subject } from 'rxjs'
12
12
  import {
13
13
  defineGridPlugin } from '@orbcharts/core'
14
- import { DEFAULT_SCALING_AREA_PLUGIN_PARAMS } from '../defaults'
14
+ import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
15
15
  import { getClassName, getUniID } from '../../utils/orbchartsUtils'
16
16
  import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
17
17
 
18
18
  const pluginName = 'ScalingArea'
19
19
  const rectClassName = getClassName(pluginName, 'rect')
20
20
 
21
- export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PLUGIN_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
21
+ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
22
22
 
23
23
  const destroy$ = new Subject()
24
24
 
@@ -16,7 +16,7 @@ import type {
16
16
  ChartParams,
17
17
  TransformData } from '@orbcharts/core'
18
18
  import type { ValueAxisParams } from '../types'
19
- import { DEFAULT_VALUE_AXIS_PLUGIN_PARAMS } from '../defaults'
19
+ import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
20
20
  import { parseTickFormatValue } from '../../utils/d3Utils'
21
21
  import { getColor, getMinAndMaxValue, getClassName, getUniID } from '../../utils/orbchartsUtils'
22
22
 
@@ -123,7 +123,7 @@ function renderLinearAxis ({ selection, fullParams, tickTextAlign, axisLabelAlig
123
123
  }
124
124
 
125
125
 
126
- export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
126
+ export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
127
127
 
128
128
  const destroy$ = new Subject()
129
129
 
@@ -16,7 +16,7 @@ import type {
16
16
  ChartParams,
17
17
  TransformData } from '@orbcharts/core'
18
18
  import type { ValueStackAxisParams } from '../types'
19
- import { DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS } from '../defaults'
19
+ import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
20
20
  import { getMinAndMax } from '../../utils/commonUtils'
21
21
  import { parseTickFormatValue } from '../../utils/d3Utils'
22
22
  import { getColor, getClassName } from '../../utils/orbchartsUtils'
@@ -125,7 +125,7 @@ function renderLinearAxis ({ selection, fullParams, tickTextAlign, axisLabelAlig
125
125
  }
126
126
 
127
127
 
128
- export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
128
+ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
129
129
 
130
130
  const destroy$ = new Subject()
131
131
 
package/src/grid/types.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ColorType } from '@orbcharts/core'
2
- import type { BaseLegendParams } from '../base/BaseLegend'
2
+ // import type { BaseLegendParams } from '../base/BaseLegend'
3
3
 
4
4
  // export type LineType = 'line' | 'area' | 'gradientArea'
5
5
  // export type BarType = 'rect' | 'triangle'
@@ -101,4 +101,14 @@ export interface ScalingAreaParams {
101
101
 
102
102
  }
103
103
 
104
- export interface GridLegendParams extends BaseLegendParams {}
104
+ export interface GridLegendParams {
105
+ position: 'top' | 'bottom' | 'left' | 'right'
106
+ justify: 'start' | 'center' | 'end'
107
+ padding: number
108
+ backgroundFill: ColorType
109
+ backgroundStroke: ColorType
110
+ gap: number
111
+ listRectWidth: number
112
+ listRectHeight: number
113
+ listRectRadius: number
114
+ }
@@ -1,4 +1,4 @@
1
- import type { BarsAndLinesParams } from './types'
1
+ import type { BarsAndLinesParams, MultiGridLegendParams } from './types'
2
2
 
3
3
  export const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams = {
4
4
  bars: {
@@ -12,3 +12,22 @@ export const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams = {
12
12
  lineWidth: 2
13
13
  }
14
14
  }
15
+
16
+ export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
17
+ position: 'right',
18
+ justify: 'end',
19
+ padding: 28,
20
+ backgroundFill: 'none',
21
+ backgroundStroke: 'none',
22
+ gap: 10,
23
+ listRectWidth: 14,
24
+ listRectHeight: 14,
25
+ listRectRadius: 0,
26
+ gridList: [
27
+ {
28
+ listRectWidth: 14,
29
+ listRectHeight: 14,
30
+ listRectRadius: 0,
31
+ }
32
+ ]
33
+ }
@@ -1,3 +1,4 @@
1
1
  export * from './defaults'
2
2
  export * from './types'
3
- export { BarsAndLines } from './plugins/BarsAndLines'
3
+ export { BarsAndLines } from './plugins/BarsAndLines'
4
+ export { MultiGridLegend } from './plugins/MultiGridLegend'
@@ -7,6 +7,7 @@ import {
7
7
  Observable } from 'rxjs'
8
8
  import {
9
9
  defineMultiGridPlugin } from '@orbcharts/core'
10
+ import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
10
11
  // import { defineMultiGridPlugin } from '../../../../orbcharts-core/src'
11
12
  import { getClassName, getUniID } from '../../utils/orbchartsUtils'
12
13
  import { DEFAULT_BARS_AND_LINES_PARAMS } from '../defaults'
@@ -40,23 +41,38 @@ export const BarsAndLines = defineMultiGridPlugin(pluginName, DEFAULT_BARS_AND_L
40
41
  // })
41
42
 
42
43
  const barsComputedData$ = observer.computedData$.pipe(
44
+ takeUntil(destroy$),
43
45
  map((computedData) => computedData[0] || [])
44
46
  )
45
47
 
46
48
  const linesComputedData$ = observer.computedData$.pipe(
49
+ takeUntil(destroy$),
47
50
  map((computedData) => computedData[1] || [])
48
51
  )
49
52
 
50
53
  const barsFullParams$ = observer.fullParams$.pipe(
54
+ takeUntil(destroy$),
51
55
  map((fullParams) => fullParams.bars)
52
56
  )
53
57
 
54
58
  const linesFullParams$ = observer.fullParams$.pipe(
59
+ takeUntil(destroy$),
55
60
  map((fullParams) => fullParams.lines)
56
61
  )
57
62
 
58
- const linesFullDataFormatter$ = observer.fullDataFormatter$.pipe(
59
- map((fullDataFormatter) => fullDataFormatter.multiGrid[1])
63
+ const defaultFullDataFormatter$ = observer.fullDataFormatter$.pipe(
64
+ takeUntil(destroy$),
65
+ map((fullDataFormatter) => fullDataFormatter.multiGrid[0] || DATA_FORMATTER_MULTI_GRID_DEFAULT.multiGrid[0])
66
+ )
67
+
68
+ const linesFullDataFormatter$ = combineLatest({
69
+ fullDataFormatter: observer.fullDataFormatter$,
70
+ defaultFullDataFormatter: defaultFullDataFormatter$,
71
+ }).pipe(
72
+ takeUntil(destroy$),
73
+ map((data) => {
74
+ return data.fullDataFormatter.multiGrid[1] ?? data.defaultFullDataFormatter
75
+ })
60
76
  )
61
77
 
62
78
  observer.multiGrid$.subscribe((multiGrid) => {