@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.
- package/dist/orbcharts-plugins-basic.es.js +6647 -6556
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseBarStack.d.ts +1 -1
- package/dist/src/base/BaseBars.d.ts +1 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
- package/dist/src/base/BaseDots.d.ts +1 -1
- package/dist/src/base/BaseLegend.d.ts +1 -0
- package/dist/src/base/BaseLineAreas.d.ts +1 -1
- package/dist/src/base/BaseLines.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +2 -1
- package/dist/src/multiGrid/index.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +4 -4
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +4 -2
- package/src/base/BaseBars.ts +4 -2
- package/src/base/BaseBarsTriangle.ts +4 -2
- package/src/base/BaseDots.ts +6 -4
- package/src/base/BaseGroupAxis.ts +3 -3
- package/src/base/BaseLegend.ts +18 -13
- package/src/base/BaseLineAreas.ts +4 -7
- package/src/base/BaseLines.ts +4 -7
- package/src/base/BaseValueAxis.ts +3 -3
- package/src/grid/plugins/GridLegend.ts +2 -1
- package/src/grid/plugins/GroupAux.ts +7 -4
- package/src/multiGrid/defaults.ts +7 -0
- package/src/multiGrid/index.ts +1 -0
- package/src/multiGrid/multiGridObservables.ts +14 -3
- package/src/multiGrid/plugins/MultiGridLegend.ts +2 -1
- package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +0 -1
- package/src/multiGrid/types.ts +5 -5
- package/src/noneData/plugins/Tooltip.ts +9 -3
- package/src/series/plugins/Bubbles.ts +4 -2
- package/src/series/plugins/Pie.ts +3 -1
- package/src/series/plugins/PieLabels.ts +4 -1
- package/src/series/plugins/SeriesLegend.ts +2 -1
- package/src/tree/plugins/TreeLegend.ts +2 -1
- 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<
|
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<
|
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<
|
26
|
+
gridHighlight$: Observable<ComputedDatumGrid[]>;
|
27
27
|
gridContainer$: Observable<ContainerPosition[]>;
|
28
28
|
isSeriesPositionSeprate$: Observable<boolean>;
|
29
29
|
event$: Subject<EventGrid>;
|
@@ -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<
|
24
|
+
gridHighlight$: Observable<ComputedDatumGrid[]>;
|
25
25
|
gridContainer$: Observable<ContainerPosition[]>;
|
26
26
|
layout$: Observable<Layout>;
|
27
27
|
event$: Subject<EventGrid>;
|
@@ -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.
|
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.
|
38
|
+
"@orbcharts/core": "^3.0.0-alpha.42",
|
39
39
|
"d3": "^7.8.5",
|
40
40
|
"rxjs": "^7.8.1"
|
41
41
|
}
|
package/src/base/BaseBarStack.ts
CHANGED
@@ -45,7 +45,7 @@ interface BaseBarStackContext {
|
|
45
45
|
width: number;
|
46
46
|
height: number;
|
47
47
|
}>
|
48
|
-
gridHighlight$: Observable<
|
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$),
|
package/src/base/BaseBars.ts
CHANGED
@@ -44,7 +44,7 @@ interface BaseBarsContext {
|
|
44
44
|
width: number;
|
45
45
|
height: number;
|
46
46
|
}>
|
47
|
-
gridHighlight$: Observable<
|
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<
|
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$),
|
package/src/base/BaseDots.ts
CHANGED
@@ -44,7 +44,7 @@ interface BaseDotsContext {
|
|
44
44
|
width: number;
|
45
45
|
height: number;
|
46
46
|
}>
|
47
|
-
gridHighlight$: Observable<
|
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
|
-
.
|
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
|
-
.
|
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)
|
package/src/base/BaseLegend.ts
CHANGED
@@ -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.
|
295
|
-
const itemWidth = (data.
|
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.
|
313
|
+
? _lastItem.translateY + _data.textSizePx + _data.fullParams.gap
|
311
314
|
: 0
|
312
315
|
|
313
|
-
if ((tempTranslateY + _data.
|
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.
|
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.
|
411
|
+
height = firstLineLastItem.translateY + _data.textSizePx
|
408
412
|
} else {
|
409
413
|
width = firstLineLastItem.translateX + firstLineLastItem.itemWidth
|
410
|
-
height = (_data.
|
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.
|
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.
|
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<
|
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
|
-
|
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
|
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
|
613
|
+
seriesLabel,
|
617
614
|
fullChartParams: data.fullChartParams
|
618
615
|
})
|
619
616
|
})
|
package/src/base/BaseLines.ts
CHANGED
@@ -50,7 +50,7 @@ interface BaseLinesContext {
|
|
50
50
|
width: number;
|
51
51
|
height: number;
|
52
52
|
}>
|
53
|
-
gridHighlight$: Observable<
|
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
|
-
|
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
|
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
|
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
|
-
.
|
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
|
-
.
|
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 =
|
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,
|
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',
|
package/src/multiGrid/index.ts
CHANGED
@@ -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
|
-
|
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
|
+
})
|