@orbcharts/plugins-basic 3.0.0-alpha.42 → 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 (39) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +6647 -6556
  2. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  3. package/dist/src/base/BaseBarStack.d.ts +1 -1
  4. package/dist/src/base/BaseBars.d.ts +1 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
  6. package/dist/src/base/BaseDots.d.ts +1 -1
  7. package/dist/src/base/BaseLegend.d.ts +1 -0
  8. package/dist/src/base/BaseLineAreas.d.ts +1 -1
  9. package/dist/src/base/BaseLines.d.ts +1 -1
  10. package/dist/src/multiGrid/defaults.d.ts +2 -1
  11. package/dist/src/multiGrid/index.d.ts +1 -0
  12. package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
  13. package/dist/src/multiGrid/types.d.ts +4 -4
  14. package/package.json +2 -2
  15. package/src/base/BaseBarStack.ts +4 -2
  16. package/src/base/BaseBars.ts +4 -2
  17. package/src/base/BaseBarsTriangle.ts +4 -2
  18. package/src/base/BaseDots.ts +6 -4
  19. package/src/base/BaseGroupAxis.ts +3 -3
  20. package/src/base/BaseLegend.ts +18 -13
  21. package/src/base/BaseLineAreas.ts +4 -7
  22. package/src/base/BaseLines.ts +4 -7
  23. package/src/base/BaseValueAxis.ts +3 -3
  24. package/src/grid/plugins/GridLegend.ts +2 -1
  25. package/src/grid/plugins/GroupAux.ts +7 -4
  26. package/src/multiGrid/defaults.ts +7 -0
  27. package/src/multiGrid/index.ts +1 -0
  28. package/src/multiGrid/multiGridObservables.ts +14 -3
  29. package/src/multiGrid/plugins/MultiGridLegend.ts +2 -1
  30. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
  31. package/src/multiGrid/plugins/OverlappingValueAxes.ts +0 -1
  32. package/src/multiGrid/types.ts +5 -5
  33. package/src/noneData/plugins/Tooltip.ts +9 -3
  34. package/src/series/plugins/Bubbles.ts +4 -2
  35. package/src/series/plugins/Pie.ts +3 -1
  36. package/src/series/plugins/PieLabels.ts +4 -1
  37. package/src/series/plugins/SeriesLegend.ts +2 -1
  38. package/src/tree/plugins/TreeLegend.ts +2 -1
  39. package/src/tree/plugins/TreeMap.ts +11 -6
@@ -24,7 +24,7 @@ interface BaseBarStackContext {
24
24
  width: number;
25
25
  height: number;
26
26
  }>;
27
- gridHighlight$: Observable<string[]>;
27
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
28
28
  gridContainer$: Observable<ContainerPosition[]>;
29
29
  isSeriesPositionSeprate$: Observable<boolean>;
30
30
  event$: Subject<EventGrid>;
@@ -24,7 +24,7 @@ interface BaseBarsContext {
24
24
  width: number;
25
25
  height: number;
26
26
  }>;
27
- gridHighlight$: Observable<string[]>;
27
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
28
28
  gridContainer$: Observable<ContainerPosition[]>;
29
29
  isSeriesPositionSeprate$: Observable<boolean>;
30
30
  event$: Subject<EventGrid>;
@@ -23,7 +23,7 @@ interface BaseBarsContext {
23
23
  width: number;
24
24
  height: number;
25
25
  }>;
26
- gridHighlight$: Observable<string[]>;
26
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
27
27
  gridContainer$: Observable<ContainerPosition[]>;
28
28
  isSeriesPositionSeprate$: Observable<boolean>;
29
29
  event$: Subject<EventGrid>;
@@ -25,7 +25,7 @@ interface BaseDotsContext {
25
25
  width: number;
26
26
  height: number;
27
27
  }>;
28
- gridHighlight$: Observable<string[]>;
28
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
29
29
  gridContainer$: Observable<ContainerPosition[]>;
30
30
  event$: Subject<EventGrid>;
31
31
  }
@@ -22,6 +22,7 @@ interface BaseLegendContext {
22
22
  fullParams$: Observable<BaseLegendParams>;
23
23
  layout$: Observable<Layout>;
24
24
  fullChartParams$: Observable<ChartParams>;
25
+ textSizePx$: Observable<number>;
25
26
  }
26
27
  export declare const createBaseLegend: BasePluginFn<BaseLegendContext>;
27
28
  export {};
@@ -21,7 +21,7 @@ interface BaseLineAreasContext {
21
21
  width: number;
22
22
  height: number;
23
23
  }>;
24
- gridHighlight$: Observable<string[]>;
24
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
25
25
  gridContainer$: Observable<ContainerPosition[]>;
26
26
  layout$: Observable<Layout>;
27
27
  event$: Subject<EventGrid>;
@@ -21,7 +21,7 @@ interface BaseLinesContext {
21
21
  width: number;
22
22
  height: number;
23
23
  }>;
24
- gridHighlight$: Observable<string[]>;
24
+ gridHighlight$: Observable<ComputedDatumGrid[]>;
25
25
  gridContainer$: Observable<ContainerPosition[]>;
26
26
  event$: Subject<EventGrid>;
27
27
  }
@@ -1,4 +1,4 @@
1
- import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, OverlappingValueAxesParams } from './types';
1
+ import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, OverlappingValueAxesParams } from './types';
2
2
 
3
3
  export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;
4
4
  export declare const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams;
@@ -7,5 +7,6 @@ export declare const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams;
7
7
  export declare const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams;
8
8
  export declare const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams;
9
9
  export declare const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams;
10
+ export declare const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams;
10
11
  export declare const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams;
11
12
  export declare const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams;
@@ -5,6 +5,7 @@ export { MultiBars } from './plugins/MultiBars';
5
5
  export { MultiBarStack } from './plugins/MultiBarStack';
6
6
  export { MultiBarsTriangle } from './plugins/MultiBarsTriangle';
7
7
  export { MultiLines } from './plugins/MultiLines';
8
+ export { MultiLineAreas } from './plugins/MultiLineAreas';
8
9
  export { MultiDots } from './plugins/MultiDots';
9
10
  export { MultiGroupAxis } from './plugins/MultiGroupAxis';
10
11
  export { MultiValueAxis } from './plugins/MultiValueAxis';
@@ -0,0 +1 @@
1
+ export declare const MultiLineAreas: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').MultiLineAreasParams>;
@@ -2,15 +2,12 @@ import { BaseBarsParams } from '../base/BaseBars';
2
2
  import { BaseBarStackParams } from '../base/BaseBarStack';
3
3
  import { BaseBarsTriangleParams } from '../base/BaseBarsTriangle';
4
4
  import { BaseLinesParams } from '../base/BaseLines';
5
+ import { BaseLineAreasParams } from '../base/BaseLineAreas';
5
6
  import { BaseDotsParams } from '../base/BaseDots';
6
7
  import { BaseGroupAxisParams } from '../base/BaseGroupAxis';
7
8
  import { BaseValueAxisParams } from '../base/BaseValueAxis';
8
9
  import { ColorType } from '@orbcharts/core';
9
10
 
10
- export interface BarsAndLinesParams {
11
- bars: BaseBarsParams;
12
- lines: BaseLinesParams;
13
- }
14
11
  export interface MultiGridLegendParams {
15
12
  position: 'top' | 'bottom' | 'left' | 'right';
16
13
  justify: 'start' | 'center' | 'end';
@@ -46,6 +43,9 @@ export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
46
43
  export interface MultiLinesParams extends BaseLinesParams {
47
44
  gridIndexes: number[];
48
45
  }
46
+ export interface MultiLineAreasParams extends BaseLineAreasParams {
47
+ gridIndexes: number[];
48
+ }
49
49
  export interface MultiDotsParams extends BaseDotsParams {
50
50
  gridIndexes: number[];
51
51
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orbcharts/plugins-basic",
3
- "version": "3.0.0-alpha.42",
3
+ "version": "3.0.0-alpha.44",
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.39",
38
+ "@orbcharts/core": "^3.0.0-alpha.42",
39
39
  "d3": "^7.8.5",
40
40
  "rxjs": "^7.8.1"
41
41
  }
@@ -45,7 +45,7 @@ interface BaseBarStackContext {
45
45
  width: number;
46
46
  height: number;
47
47
  }>
48
- gridHighlight$: Observable<string[]>
48
+ gridHighlight$: Observable<ComputedDatumGrid[]>
49
49
  gridContainer$: Observable<ContainerPosition[]>
50
50
  isSeriesPositionSeprate$: Observable<boolean>
51
51
  event$: Subject<EventGrid>
@@ -861,7 +861,9 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
861
861
 
862
862
  combineLatest({
863
863
  barSelection: barSelection$,
864
- highlight: gridHighlight$,
864
+ highlight: gridHighlight$.pipe(
865
+ map(data => data.map(d => d.id))
866
+ ),
865
867
  fullChartParams: fullChartParams$
866
868
  }).pipe(
867
869
  takeUntil(destroy$),
@@ -44,7 +44,7 @@ interface BaseBarsContext {
44
44
  width: number;
45
45
  height: number;
46
46
  }>
47
- gridHighlight$: Observable<string[]>
47
+ gridHighlight$: Observable<ComputedDatumGrid[]>
48
48
  gridContainer$: Observable<ContainerPosition[]>
49
49
  isSeriesPositionSeprate$: Observable<boolean>
50
50
  event$: Subject<EventGrid>
@@ -729,7 +729,9 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
729
729
 
730
730
  combineLatest({
731
731
  barSelection: barSelection$,
732
- highlight: gridHighlight$,
732
+ highlight: gridHighlight$.pipe(
733
+ map(data => data.map(d => d.id))
734
+ ),
733
735
  fullChartParams: fullChartParams$
734
736
  }).pipe(
735
737
  takeUntil(destroy$),
@@ -42,7 +42,7 @@ interface BaseBarsContext {
42
42
  width: number;
43
43
  height: number;
44
44
  }>
45
- gridHighlight$: Observable<string[]>
45
+ gridHighlight$: Observable<ComputedDatumGrid[]>
46
46
  gridContainer$: Observable<ContainerPosition[]>
47
47
  isSeriesPositionSeprate$: Observable<boolean>
48
48
  event$: Subject<EventGrid>
@@ -639,7 +639,9 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
639
639
 
640
640
  combineLatest({
641
641
  barSelection: barSelection$,
642
- highlight: gridHighlight$,
642
+ highlight: gridHighlight$.pipe(
643
+ map(data => data.map(d => d.id))
644
+ ),
643
645
  fullChartParams: fullChartParams$
644
646
  }).pipe(
645
647
  takeUntil(destroy$),
@@ -44,7 +44,7 @@ interface BaseDotsContext {
44
44
  width: number;
45
45
  height: number;
46
46
  }>
47
- gridHighlight$: Observable<string[]>
47
+ gridHighlight$: Observable<ComputedDatumGrid[]>
48
48
  gridContainer$: Observable<ContainerPosition[]>
49
49
  event$: Subject<EventGrid>
50
50
  }
@@ -604,7 +604,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
604
604
  // map(d => d.flat())
605
605
  // )
606
606
  // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
607
- const highlightSubscription = gridHighlight$.subscribe()
607
+ // const highlightSubscription = gridHighlight$.subscribe()
608
608
  const onlyShowHighlighted$ = fullParams$.pipe(
609
609
  takeUntil(destroy$),
610
610
  map(d => d.onlyShowHighlighted),
@@ -615,7 +615,9 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
615
615
  takeUntil(destroy$),
616
616
  switchMap(d => combineLatest({
617
617
  graphicSelection: graphicSelection$,
618
- highlight: gridHighlight$,
618
+ highlight: gridHighlight$.pipe(
619
+ map(data => data.map(d => d.id))
620
+ ),
619
621
  onlyShowHighlighted: onlyShowHighlighted$,
620
622
  fullChartParams: fullChartParams$
621
623
  }).pipe(
@@ -633,6 +635,6 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
633
635
 
634
636
  return () => {
635
637
  destroy$.next(undefined)
636
- highlightSubscription.unsubscribe()
638
+ // highlightSubscription.unsubscribe()
637
639
  }
638
640
  }
@@ -108,7 +108,7 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
108
108
  )
109
109
  .attr('text-anchor', axisLabelAlign.textAnchor)
110
110
  .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
111
- .style('font-size', `${chartParams.styles.textSize}px`)
111
+ .attr('font-size', chartParams.styles.textSize)
112
112
  .style('fill', getColor(params.labelColorType, chartParams))
113
113
  .style('transform', textTransform)
114
114
  .text(d => fullDataFormatter.grid.groupAxis.label)
@@ -161,8 +161,8 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
161
161
  // .style('transform', textTransform)
162
162
  // })
163
163
  const xText = xAxisSelection.selectAll('text')
164
- .style('font-family', 'sans-serif')
165
- .style('font-size', `${chartParams.styles.textSize}px`)
164
+ // .style('font-family', 'sans-serif')
165
+ .attr('font-size', chartParams.styles.textSize)
166
166
  // .style('font-weight', 'bold')
167
167
  .style('color', getColor(params.tickTextColorType, chartParams))
168
168
  .attr('text-anchor', tickTextAlign.textAnchor)
@@ -36,6 +36,7 @@ interface BaseLegendContext {
36
36
  fullParams$: Observable<BaseLegendParams>
37
37
  layout$: Observable<Layout>
38
38
  fullChartParams$: Observable<ChartParams>
39
+ textSizePx$: Observable<number>
39
40
  }
40
41
 
41
42
  // 第1層 - 定位的容器
@@ -107,7 +108,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
107
108
  seriesLabels$,
108
109
  fullParams$,
109
110
  layout$,
110
- fullChartParams$
111
+ fullChartParams$,
112
+ textSizePx$
111
113
  }) => {
112
114
 
113
115
  const rootPositionClassName = getClassName(pluginName, 'root-position')
@@ -280,7 +282,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
280
282
  lineDirection: lineDirection$,
281
283
  lineMaxSize: lineMaxSize$,
282
284
  defaultListStyle: defaultListStyle$,
283
- SeriesLabelColorMap: SeriesLabelColorMap$
285
+ SeriesLabelColorMap: SeriesLabelColorMap$,
286
+ textSizePx: textSizePx$
284
287
  }).pipe(
285
288
  takeUntil(destroy$),
286
289
  switchMap(async d => d),
@@ -291,8 +294,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
291
294
  return prev
292
295
  }
293
296
 
294
- const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
295
- const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
297
+ const textWidth = measureTextWidth(current, data.textSizePx)
298
+ const itemWidth = (data.textSizePx * 1.5) + textWidth
296
299
  // const color = getSeriesColor(currentIndex, data.fullChartParams)
297
300
  const color = data.SeriesLabelColorMap.get(current)
298
301
  const lastItem: LegendItem | null = prev[0] && prev[0][0]
@@ -307,10 +310,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
307
310
 
308
311
  if (_data.lineDirection === 'column') {
309
312
  let tempTranslateY = _lastItem
310
- ? _lastItem.translateY + _data.fullChartParams.styles.textSize + _data.fullParams.gap
313
+ ? _lastItem.translateY + _data.textSizePx + _data.fullParams.gap
311
314
  : 0
312
315
 
313
- if ((tempTranslateY + _data.fullChartParams.styles.textSize) > _data.lineMaxSize) {
316
+ if ((tempTranslateY + _data.textSizePx) > _data.lineMaxSize) {
314
317
  // 換行
315
318
  lineIndex = _lastItem.lineIndex + 1
316
319
  itemIndex = 0
@@ -340,7 +343,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
340
343
  itemIndex = _lastItem ? _lastItem.itemIndex + 1 : 0
341
344
  translateX = tempTranslateX
342
345
  }
343
- translateY = (_data.fullChartParams.styles.textSize + _data.fullParams.gap) * lineIndex
346
+ translateY = (_data.textSizePx + _data.fullParams.gap) * lineIndex
344
347
  }
345
348
 
346
349
  return { translateX, translateY, lineIndex, itemIndex }
@@ -379,7 +382,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
379
382
  fullParams: fullParams$,
380
383
  fullChartParams: fullChartParams$,
381
384
  lineDirection: lineDirection$,
382
- lengendItems: lengendItems$
385
+ lengendItems: lengendItems$,
386
+ textSizePx: textSizePx$
383
387
  }).pipe(
384
388
  takeUntil(destroy$),
385
389
  switchMap(async d => d),
@@ -404,10 +408,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
404
408
  return p + maxWidthInLine
405
409
  }, 0)
406
410
  width += _data.fullParams.gap * (_lengendItems.length - 1)
407
- height = firstLineLastItem.translateY + _data.fullChartParams.styles.textSize
411
+ height = firstLineLastItem.translateY + _data.textSizePx
408
412
  } else {
409
413
  width = firstLineLastItem.translateX + firstLineLastItem.itemWidth
410
- height = (_data.fullChartParams.styles.textSize * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
414
+ height = (_data.textSizePx * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
411
415
  }
412
416
 
413
417
  return { width, height }
@@ -565,7 +569,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
565
569
  lengendListSelection: lengendListSelection$,
566
570
  fullParams: fullParams$,
567
571
  fullChartParams: fullChartParams$,
568
- lengendItems: lengendItems$
572
+ lengendItems: lengendItems$,
573
+ textSizePx: textSizePx$
569
574
  }).pipe(
570
575
  takeUntil(destroy$),
571
576
  switchMap(async d => d),
@@ -589,7 +594,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
589
594
  return `translate(${d.translateX}, ${d.translateY})`
590
595
  })
591
596
  .each((d, i, g) => {
592
- const rectCenterX = data.fullChartParams.styles.textSize / 2
597
+ const rectCenterX = data.textSizePx / 2
593
598
  const transformRectWidth = - d.listRectWidth / 2
594
599
  const transformRectHeight = - d.listRectHeight / 2
595
600
  // 方塊
@@ -619,7 +624,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
619
624
  },
620
625
  exit => exit.remove()
621
626
  )
622
- .attr('x', data.fullChartParams.styles.textSize * 1.5)
627
+ .attr('x', data.textSizePx * 1.5)
623
628
  .attr('font-size', data.fullChartParams.styles.textSize)
624
629
  .attr('fill', d => data.fullParams.textColorType === 'series'
625
630
  ? getSeriesColor(d.seriesIndex, data.fullChartParams)
@@ -46,7 +46,7 @@ interface BaseLineAreasContext {
46
46
  width: number;
47
47
  height: number;
48
48
  }>
49
- gridHighlight$: Observable<string[]>
49
+ gridHighlight$: Observable<ComputedDatumGrid[]>
50
50
  gridContainer$: Observable<ContainerPosition[]>
51
51
  layout$: Observable<Layout>
52
52
  event$: Subject<EventGrid>
@@ -599,7 +599,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
599
599
  filter(d => d.highlightTarget === 'series'),
600
600
  switchMap(d => combineLatest({
601
601
  graphicGSelection: graphicGSelection$,
602
- highlight: gridHighlight$,
602
+ gridHighlight: gridHighlight$,
603
603
  DataMap: DataMap$,
604
604
  fullChartParams: fullChartParams$
605
605
  }).pipe(
@@ -607,13 +607,10 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
607
607
  switchMap(async d => d)
608
608
  ))
609
609
  ).subscribe(data => {
610
- const datum = data.DataMap.get(data.highlight[0])
611
- // if (!datum) {
612
- // return
613
- // }
610
+ const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
614
611
  highlightLineAreas({
615
612
  selection: data.graphicGSelection,
616
- seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
613
+ seriesLabel,
617
614
  fullChartParams: data.fullChartParams
618
615
  })
619
616
  })
@@ -50,7 +50,7 @@ interface BaseLinesContext {
50
50
  width: number;
51
51
  height: number;
52
52
  }>
53
- gridHighlight$: Observable<string[]>
53
+ gridHighlight$: Observable<ComputedDatumGrid[]>
54
54
  gridContainer$: Observable<ContainerPosition[]>
55
55
  event$: Subject<EventGrid>
56
56
  }
@@ -670,7 +670,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
670
670
  filter(d => d.highlightTarget === 'series'),
671
671
  switchMap(d => combineLatest({
672
672
  graphicGSelection: graphicGSelection$,
673
- highlight: gridHighlight$,
673
+ gridHighlight: gridHighlight$,
674
674
  DataMap: DataMap$,
675
675
  fullChartParams: fullChartParams$
676
676
  }).pipe(
@@ -678,13 +678,10 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
678
678
  switchMap(async d => d)
679
679
  ))
680
680
  ).subscribe(data => {
681
- const datum = data.DataMap.get(data.highlight[0])
682
- // if (!datum) {
683
- // return
684
- // }
681
+ const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
685
682
  highlightLines({
686
683
  selection: data.graphicGSelection,
687
- seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
684
+ seriesLabel,
688
685
  fullChartParams: data.fullChartParams
689
686
  })
690
687
  })
@@ -107,7 +107,7 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
107
107
  )
108
108
  .attr('text-anchor', axisLabelAlign.textAnchor)
109
109
  .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
110
- .style('font-size', `${fullChartParams.styles.textSize}px`)
110
+ .attr('font-size', fullChartParams.styles.textSize)
111
111
  .style('fill', getColor(fullParams.labelColorType, fullChartParams))
112
112
  .style('transform', textTransform)
113
113
  .text(d => fullDataFormatter.grid.valueAxis.label)
@@ -153,8 +153,8 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
153
153
 
154
154
  // const yText = yAxisEl.selectAll('text')
155
155
  const yText = yAxisSelection.selectAll('text')
156
- .style('font-family', 'sans-serif')
157
- .style('font-size', `${fullChartParams.styles.textSize}px`)
156
+ // .style('font-family', 'sans-serif')
157
+ .attr('font-size', fullChartParams.styles.textSize)
158
158
  .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
159
159
  .attr('text-anchor', tickTextAlign.textAnchor)
160
160
  .attr('dominant-baseline', tickTextAlign.dominantBaseline)
@@ -47,7 +47,8 @@ export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAM
47
47
  seriesLabels$,
48
48
  fullParams$,
49
49
  layout$: observer.layout$,
50
- fullChartParams$: observer.fullChartParams$
50
+ fullChartParams$: observer.fullChartParams$,
51
+ textSizePx$: observer.textSizePx$
51
52
  })
52
53
 
53
54
  return () => {
@@ -126,14 +126,15 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
126
126
  : []
127
127
  }
128
128
 
129
- function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
129
+ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue, textSizePx }: {
130
130
  selection: d3.Selection<any, unknown, any, unknown>
131
131
  labelData: LabelDatum[]
132
132
  fullParams: GroupAuxParams
133
133
  fullChartParams: ChartParams
134
134
  gridAxesReverseTransformValue: string
135
+ textSizePx: number
135
136
  }) {
136
- const rectHeight = fullChartParams.styles.textSize + 4
137
+ const rectHeight = textSizePx + 4
137
138
 
138
139
  const gUpdate = selection
139
140
  .selectAll<SVGGElement, LabelDatum>(`g.${labelClassName}`)
@@ -157,7 +158,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
157
158
  gUpdate.exit().remove()
158
159
 
159
160
  axisLabelSelection.each((datum, i, n) => {
160
- const rectWidth = measureTextWidth(datum.text, fullChartParams.styles.textSize) + 12
161
+ const rectWidth = measureTextWidth(datum.text, textSizePx) + 12
161
162
  const rectX = - rectWidth / 2
162
163
 
163
164
  const rectUpdate = d3.select(n[i])
@@ -503,6 +504,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
503
504
  gridAxesReverseTransform: observer.gridAxesReverseTransform$,
504
505
  GroupDataMap: observer.GroupDataMap$,
505
506
  gridGroupPositionFn: gridGroupPositionFn$,
507
+ textSizePx: observer.textSizePx$
506
508
  }).pipe(
507
509
  takeUntil(destroy$),
508
510
  switchMap(async d => d)
@@ -539,7 +541,8 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
539
541
  labelData,
540
542
  fullParams: data.fullParams,
541
543
  fullChartParams: data.fullChartParams,
542
- gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
544
+ gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
545
+ textSizePx: data.textSizePx
543
546
  })
544
547
 
545
548
  // label的事件
@@ -4,6 +4,7 @@ import type {
4
4
  MultiBarStackParams,
5
5
  MultiBarsTriangleParams,
6
6
  MultiLinesParams,
7
+ MultiLineAreasParams,
7
8
  MultiDotsParams,
8
9
  MultiGroupAxisParams,
9
10
  MultiValueAxisParams,
@@ -94,6 +95,12 @@ export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
94
95
  gridIndexes: [1]
95
96
  }
96
97
 
98
+ export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
99
+ lineCurve: 'curveLinear',
100
+ linearGradientOpacity: [1, 0],
101
+ gridIndexes: [1]
102
+ }
103
+
97
104
  export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
98
105
  radius: 4,
99
106
  fillColorType: 'white',
@@ -5,6 +5,7 @@ export { MultiBars } from './plugins/MultiBars'
5
5
  export { MultiBarStack } from './plugins/MultiBarStack'
6
6
  export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
7
7
  export { MultiLines } from './plugins/MultiLines'
8
+ export { MultiLineAreas } from './plugins/MultiLineAreas'
8
9
  export { MultiDots } from './plugins/MultiDots'
9
10
  export { MultiGroupAxis } from './plugins/MultiGroupAxis'
10
11
  export { MultiValueAxis } from './plugins/MultiValueAxis'
@@ -4,6 +4,7 @@ import {
4
4
  takeUntil,
5
5
  of,
6
6
  map,
7
+ reduce,
7
8
  switchMap,
8
9
  combineLatest,
9
10
  distinctUntilChanged,
@@ -156,6 +157,16 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
156
157
  )
157
158
  const destroy$ = new Subject()
158
159
 
160
+ // 合併所有gridHighlight$
161
+ const gridHighlight$ = observer.multiGridEachDetail$.pipe(
162
+ // switchMap(data => concat(...data.map(d => d.gridHighlight$))),
163
+ switchMap(data => {
164
+ return combineLatest(data.map(d => d.gridHighlight$))
165
+ }),
166
+ map(d => d.flat()),
167
+ shareReplay(1)
168
+ )
169
+
159
170
  return gridIndexes$.pipe(
160
171
  map(gridIndexes => {
161
172
  return gridIndexes.map(gridIndex => {
@@ -237,9 +248,9 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
237
248
  switchMap(d => d.gridGraphicReverseScale$)
238
249
  )
239
250
 
240
- const gridHighlight$ = gridDetail$.pipe(
241
- switchMap(d => d.gridHighlight$)
242
- )
251
+ // const gridHighlight$ = gridDetail$.pipe(
252
+ // switchMap(d => d.gridHighlight$)
253
+ // )
243
254
 
244
255
  const existSeriesLabels$ = gridDetail$.pipe(
245
256
  switchMap(d => d.existSeriesLabels$)
@@ -77,7 +77,8 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
77
77
  seriesLabels$,
78
78
  fullParams$,
79
79
  layout$: observer.layout$,
80
- fullChartParams$: observer.fullChartParams$
80
+ fullChartParams$: observer.fullChartParams$,
81
+ textSizePx$: observer.textSizePx$
81
82
  })
82
83
 
83
84
  return () => {
@@ -0,0 +1,59 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+
7
+ import { DEFAULT_MULTI_LINE_AREAS_PARAMS } from '../defaults'
8
+ import { createBaseLineAreas } from '../../base/BaseLineAreas'
9
+ import { multiGridDetailObservables } from '../multiGridObservables'
10
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
11
+
12
+ const pluginName = 'MultiLineAreas'
13
+
14
+ const gridClassName = getClassName(pluginName, 'grid')
15
+
16
+ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINE_AREAS_PARAMS)(({ selection, name, subject, observer }) => {
17
+ const destroy$ = new Subject()
18
+
19
+ const unsubscribeFnArr: (() => void)[] = []
20
+
21
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
22
+
23
+ multiGridPlugin$.subscribe(data => {
24
+ // 每次重新計算時,清除之前的訂閱
25
+ unsubscribeFnArr.forEach(fn => fn())
26
+
27
+ selection.selectAll(`g.${gridClassName}`)
28
+ .data(data)
29
+ .join('g')
30
+ .attr('class', gridClassName)
31
+ .each((d, i, g) => {
32
+
33
+ const gridSelection = d3.select(g[i])
34
+
35
+ unsubscribeFnArr[i] = createBaseLineAreas(pluginName, {
36
+ selection: gridSelection,
37
+ computedData$: d.gridComputedData$,
38
+ existSeriesLabels$: d.existSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullDataFormatter$: d.gridDataFormatter$,
42
+ fullParams$: observer.fullParams$,
43
+ fullChartParams$: observer.fullChartParams$,
44
+ gridAxesTransform$: d.gridAxesTransform$,
45
+ gridGraphicTransform$: d.gridGraphicTransform$,
46
+ gridAxesSize$: d.gridAxesSize$,
47
+ gridHighlight$: d.gridHighlight$,
48
+ gridContainer$: d.gridContainer$,
49
+ layout$: observer.layout$,
50
+ event$: subject.event$ as Subject<any>,
51
+ })
52
+ })
53
+ })
54
+
55
+ return () => {
56
+ destroy$.next(undefined)
57
+ unsubscribeFnArr.forEach(fn => fn())
58
+ }
59
+ })