@orbcharts/plugins-basic 3.0.0-alpha.39 → 3.0.0-alpha.41
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 +7449 -7078
- package/dist/orbcharts-plugins-basic.umd.js +12 -9
- 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 +30 -0
- package/dist/src/base/BaseLines.d.ts +1 -1
- package/dist/src/grid/defaults.d.ts +2 -1
- package/dist/src/grid/gridObservables.d.ts +2 -2
- package/dist/src/grid/index.d.ts +1 -0
- package/dist/src/grid/plugins/LineAreas.d.ts +1 -0
- package/dist/src/grid/types.d.ts +5 -0
- package/dist/src/multiGrid/types.d.ts +1 -0
- package/dist/src/series/types.d.ts +1 -0
- package/dist/src/tree/types.d.ts +1 -0
- package/dist/src/utils/orbchartsUtils.d.ts +7 -2
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +7 -3
- package/src/base/BaseBars.ts +7 -3
- package/src/base/BaseBarsTriangle.ts +52 -135
- package/src/base/BaseDots.ts +7 -3
- package/src/base/BaseLegend.ts +16 -1
- package/src/base/BaseLineAreas.ts +625 -0
- package/src/base/BaseLines.ts +12 -12
- package/src/base/BaseValueAxis.ts +0 -1
- package/src/grid/defaults.ts +7 -0
- package/src/grid/gridObservables.ts +5 -5
- package/src/grid/index.ts +1 -0
- package/src/grid/plugins/BarStack.ts +1 -1
- package/src/grid/plugins/Bars.ts +1 -1
- package/src/grid/plugins/BarsDiverging.ts +1 -1
- package/src/grid/plugins/BarsTriangle.ts +1 -1
- package/src/grid/plugins/Dots.ts +1 -1
- package/src/grid/plugins/GroupAux.ts +8 -0
- package/src/grid/plugins/LineAreas.ts +37 -0
- package/src/grid/plugins/Lines.ts +1 -1
- package/src/grid/plugins/ScalingArea.ts +11 -7
- package/src/grid/types.ts +6 -1
- package/src/multiGrid/defaults.ts +2 -1
- package/src/multiGrid/multiGridObservables.ts +6 -6
- package/src/multiGrid/plugins/MultiBarStack.ts +1 -1
- package/src/multiGrid/plugins/MultiBars.ts +1 -1
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +1 -1
- package/src/multiGrid/plugins/MultiDots.ts +1 -1
- package/src/multiGrid/plugins/MultiLines.ts +1 -1
- package/src/multiGrid/types.ts +1 -0
- package/src/noneData/defaults.ts +21 -7
- package/src/series/defaults.ts +1 -0
- package/src/series/types.ts +1 -0
- package/src/tree/defaults.ts +1 -0
- package/src/tree/plugins/TreeMap.ts +6 -4
- package/src/tree/types.ts +1 -0
- package/src/utils/orbchartsUtils.ts +22 -8
- package/tsconfig.json +1 -1
@@ -11,7 +11,7 @@ interface BaseBarStackContext {
|
|
11
11
|
selection: d3.Selection<any, unknown, any, unknown>;
|
12
12
|
computedData$: Observable<ComputedDataGrid>;
|
13
13
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>;
|
14
|
-
|
14
|
+
existSeriesLabels$: Observable<string[]>;
|
15
15
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
16
16
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
17
17
|
fullParams$: Observable<BaseBarStackParams>;
|
@@ -12,7 +12,7 @@ interface BaseBarsContext {
|
|
12
12
|
selection: d3.Selection<any, unknown, any, unknown>;
|
13
13
|
computedData$: Observable<ComputedDataGrid>;
|
14
14
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>;
|
15
|
-
|
15
|
+
existSeriesLabels$: Observable<string[]>;
|
16
16
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
17
17
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
18
18
|
fullParams$: Observable<BaseBarsParams>;
|
@@ -12,7 +12,7 @@ interface BaseBarsContext {
|
|
12
12
|
selection: d3.Selection<any, unknown, any, unknown>;
|
13
13
|
computedData$: Observable<ComputedDataGrid>;
|
14
14
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>;
|
15
|
-
|
15
|
+
existSeriesLabels$: Observable<string[]>;
|
16
16
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
17
17
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
18
18
|
fullParams$: Observable<BaseBarsTriangleParams>;
|
@@ -13,7 +13,7 @@ interface BaseDotsContext {
|
|
13
13
|
selection: d3.Selection<any, unknown, any, unknown>;
|
14
14
|
computedData$: Observable<ComputedDataGrid>;
|
15
15
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>;
|
16
|
-
|
16
|
+
existSeriesLabels$: Observable<string[]>;
|
17
17
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
18
18
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
19
19
|
fullParams$: Observable<BaseDotsParams>;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { Observable, Subject } from 'rxjs';
|
2
|
+
import { BasePluginFn } from './types';
|
3
|
+
import { ComputedDatumGrid, ComputedDataGrid, DataFormatterGrid, EventGrid, ContainerPosition, ChartParams, Layout, TransformData } from '@orbcharts/core';
|
4
|
+
import * as d3 from 'd3';
|
5
|
+
export interface BaseLineAreasParams {
|
6
|
+
lineCurve: string;
|
7
|
+
linearGradientOpacity: [number, number];
|
8
|
+
}
|
9
|
+
interface BaseLineAreasContext {
|
10
|
+
selection: d3.Selection<any, unknown, any, unknown>;
|
11
|
+
computedData$: Observable<ComputedDataGrid>;
|
12
|
+
existSeriesLabels$: Observable<string[]>;
|
13
|
+
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
14
|
+
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
15
|
+
fullDataFormatter$: Observable<DataFormatterGrid>;
|
16
|
+
fullParams$: Observable<BaseLineAreasParams>;
|
17
|
+
fullChartParams$: Observable<ChartParams>;
|
18
|
+
gridAxesTransform$: Observable<TransformData>;
|
19
|
+
gridGraphicTransform$: Observable<TransformData>;
|
20
|
+
gridAxesSize$: Observable<{
|
21
|
+
width: number;
|
22
|
+
height: number;
|
23
|
+
}>;
|
24
|
+
gridHighlight$: Observable<string[]>;
|
25
|
+
gridContainer$: Observable<ContainerPosition[]>;
|
26
|
+
layout$: Observable<Layout>;
|
27
|
+
event$: Subject<EventGrid>;
|
28
|
+
}
|
29
|
+
export declare const createBaseLineAreas: BasePluginFn<BaseLineAreasContext>;
|
30
|
+
export {};
|
@@ -9,7 +9,7 @@ export interface BaseLinesParams {
|
|
9
9
|
interface BaseLinesContext {
|
10
10
|
selection: d3.Selection<any, unknown, any, unknown>;
|
11
11
|
computedData$: Observable<ComputedDataGrid>;
|
12
|
-
|
12
|
+
existSeriesLabels$: Observable<string[]>;
|
13
13
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
14
14
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
|
15
15
|
fullDataFormatter$: Observable<DataFormatterGrid>;
|
@@ -1,6 +1,7 @@
|
|
1
|
-
import { LinesParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
|
1
|
+
import { LinesParams, LineAreasParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
|
2
2
|
|
3
3
|
export declare const DEFAULT_LINES_PARAMS: LinesParams;
|
4
|
+
export declare const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams;
|
4
5
|
export declare const DEFAULT_DOTS_PARAMS: DotsParams;
|
5
6
|
export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams;
|
6
7
|
export declare const DEFAULT_BARS_PARAMS: BarsParams;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import { Observable } from 'rxjs';
|
2
2
|
import { ChartParams, DataFormatterGrid, ComputedDataGrid, TransformData, ContainerPosition } from '@orbcharts/core';
|
3
3
|
import * as d3 from 'd3';
|
4
|
-
export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID,
|
4
|
+
export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
|
5
5
|
selection: d3.Selection<any, unknown, any, unknown>;
|
6
6
|
pluginName: string;
|
7
7
|
clipPathID: string;
|
8
|
-
|
8
|
+
existSeriesLabels$: Observable<string[]>;
|
9
9
|
gridContainer$: Observable<ContainerPosition[]>;
|
10
10
|
gridAxesTransform$: Observable<TransformData>;
|
11
11
|
gridGraphicTransform$: Observable<TransformData>;
|
package/dist/src/grid/index.d.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
export * from './defaults';
|
2
2
|
export * from './types';
|
3
3
|
export { Lines } from './plugins/Lines';
|
4
|
+
export { LineAreas } from './plugins/LineAreas';
|
4
5
|
export { Bars } from './plugins/Bars';
|
5
6
|
export { BarsDiverging } from './plugins/BarsDiverging';
|
6
7
|
export { BarStack } from './plugins/BarStack';
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const LineAreas: import('@orbcharts/core').PluginConstructor<"grid", string, import('..').LineAreasParams>;
|
package/dist/src/grid/types.d.ts
CHANGED
@@ -4,6 +4,10 @@ export interface LinesParams {
|
|
4
4
|
lineCurve: string;
|
5
5
|
lineWidth: number;
|
6
6
|
}
|
7
|
+
export interface LineAreasParams {
|
8
|
+
lineCurve: string;
|
9
|
+
linearGradientOpacity: [number, number];
|
10
|
+
}
|
7
11
|
export interface DotsParams {
|
8
12
|
radius: number;
|
9
13
|
fillColorType: ColorType;
|
@@ -83,4 +87,5 @@ export interface GridLegendParams {
|
|
83
87
|
listRectWidth: number;
|
84
88
|
listRectHeight: number;
|
85
89
|
listRectRadius: number;
|
90
|
+
textColorType: ColorType;
|
86
91
|
}
|
package/dist/src/tree/types.d.ts
CHANGED
@@ -1,8 +1,13 @@
|
|
1
|
-
import { AxisPosition, ColorType, ChartParams, ComputedDatumBase } from '@orbcharts/core';
|
1
|
+
import { AxisPosition, ColorType, ChartParams, ComputedDatumBase, ComputedDatumCategoryValue } from '@orbcharts/core';
|
2
2
|
|
3
3
|
export declare function getMinAndMaxValue(data: ComputedDatumBase[]): [number, number];
|
4
4
|
export declare function getColor(colorType: ColorType, fullChartParams: ChartParams): string;
|
5
|
-
export declare function
|
5
|
+
export declare function getSeriesValueColor(): void;
|
6
|
+
export declare function getCategoryValueColor({ datum, colorType, fullChartParams }: {
|
7
|
+
datum: ComputedDatumCategoryValue;
|
8
|
+
colorType: ColorType;
|
9
|
+
fullChartParams: ChartParams;
|
10
|
+
}): void;
|
6
11
|
export declare function getDatumColor({ datum, colorType, fullChartParams }: {
|
7
12
|
datum: ComputedDatumBase;
|
8
13
|
colorType: ColorType;
|
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.41",
|
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.38",
|
39
39
|
"d3": "^7.8.5",
|
40
40
|
"rxjs": "^7.8.1"
|
41
41
|
}
|
package/src/base/BaseBarStack.ts
CHANGED
@@ -32,7 +32,7 @@ interface BaseBarStackContext {
|
|
32
32
|
selection: d3.Selection<any, unknown, any, unknown>
|
33
33
|
computedData$: Observable<ComputedDataGrid>
|
34
34
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>
|
35
|
-
|
35
|
+
existSeriesLabels$: Observable<string[]>
|
36
36
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
37
37
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
38
38
|
fullParams$: Observable<BaseBarStackParams>
|
@@ -288,7 +288,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
288
288
|
selection,
|
289
289
|
computedData$,
|
290
290
|
visibleComputedData$,
|
291
|
-
|
291
|
+
existSeriesLabels$,
|
292
292
|
SeriesDataMap$,
|
293
293
|
GroupDataMap$,
|
294
294
|
fullParams$,
|
@@ -448,7 +448,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
448
448
|
selection,
|
449
449
|
pluginName,
|
450
450
|
clipPathID,
|
451
|
-
|
451
|
+
existSeriesLabels$,
|
452
452
|
gridContainer$,
|
453
453
|
gridAxesTransform$,
|
454
454
|
gridGraphicTransform$
|
@@ -778,6 +778,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
778
778
|
pluginName,
|
779
779
|
highlightTarget: data.highlightTarget,
|
780
780
|
datum,
|
781
|
+
gridIndex: datum.gridIndex,
|
781
782
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
782
783
|
seriesIndex: datum.seriesIndex,
|
783
784
|
seriesLabel: datum.seriesLabel,
|
@@ -797,6 +798,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
797
798
|
pluginName,
|
798
799
|
highlightTarget: data.highlightTarget,
|
799
800
|
datum,
|
801
|
+
gridIndex: datum.gridIndex,
|
800
802
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
801
803
|
seriesIndex: datum.seriesIndex,
|
802
804
|
seriesLabel: datum.seriesLabel,
|
@@ -816,6 +818,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
816
818
|
pluginName,
|
817
819
|
highlightTarget: data.highlightTarget,
|
818
820
|
datum,
|
821
|
+
gridIndex: datum.gridIndex,
|
819
822
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
820
823
|
seriesIndex: datum.seriesIndex,
|
821
824
|
seriesLabel: datum.seriesLabel,
|
@@ -835,6 +838,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
835
838
|
pluginName,
|
836
839
|
highlightTarget: data.highlightTarget,
|
837
840
|
datum,
|
841
|
+
gridIndex: datum.gridIndex,
|
838
842
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
839
843
|
seriesIndex: datum.seriesIndex,
|
840
844
|
seriesLabel: datum.seriesLabel,
|
package/src/base/BaseBars.ts
CHANGED
@@ -32,7 +32,7 @@ interface BaseBarsContext {
|
|
32
32
|
selection: d3.Selection<any, unknown, any, unknown>
|
33
33
|
computedData$: Observable<ComputedDataGrid>
|
34
34
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>
|
35
|
-
|
35
|
+
existSeriesLabels$: Observable<string[]>
|
36
36
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
37
37
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
38
38
|
fullParams$: Observable<BaseBarsParams>
|
@@ -267,7 +267,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
267
267
|
selection,
|
268
268
|
computedData$,
|
269
269
|
visibleComputedData$,
|
270
|
-
|
270
|
+
existSeriesLabels$,
|
271
271
|
SeriesDataMap$,
|
272
272
|
GroupDataMap$,
|
273
273
|
fullParams$,
|
@@ -397,7 +397,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
397
397
|
selection,
|
398
398
|
pluginName,
|
399
399
|
clipPathID,
|
400
|
-
|
400
|
+
existSeriesLabels$,
|
401
401
|
gridContainer$,
|
402
402
|
gridAxesTransform$,
|
403
403
|
gridGraphicTransform$
|
@@ -651,6 +651,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
651
651
|
pluginName,
|
652
652
|
highlightTarget: data.highlightTarget,
|
653
653
|
datum,
|
654
|
+
gridIndex: datum.gridIndex,
|
654
655
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
655
656
|
seriesIndex: datum.seriesIndex,
|
656
657
|
seriesLabel: datum.seriesLabel,
|
@@ -670,6 +671,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
670
671
|
pluginName,
|
671
672
|
highlightTarget: data.highlightTarget,
|
672
673
|
datum,
|
674
|
+
gridIndex: datum.gridIndex,
|
673
675
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
674
676
|
seriesIndex: datum.seriesIndex,
|
675
677
|
seriesLabel: datum.seriesLabel,
|
@@ -689,6 +691,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
689
691
|
pluginName,
|
690
692
|
highlightTarget: data.highlightTarget,
|
691
693
|
datum,
|
694
|
+
gridIndex: datum.gridIndex,
|
692
695
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
693
696
|
seriesIndex: datum.seriesIndex,
|
694
697
|
seriesLabel: datum.seriesLabel,
|
@@ -708,6 +711,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
708
711
|
pluginName,
|
709
712
|
highlightTarget: data.highlightTarget,
|
710
713
|
datum,
|
714
|
+
gridIndex: datum.gridIndex,
|
711
715
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
712
716
|
seriesIndex: datum.seriesIndex,
|
713
717
|
seriesLabel: datum.seriesLabel,
|
@@ -31,7 +31,7 @@ interface BaseBarsContext {
|
|
31
31
|
selection: d3.Selection<any, unknown, any, unknown>
|
32
32
|
computedData$: Observable<ComputedDataGrid>
|
33
33
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>
|
34
|
-
|
34
|
+
existSeriesLabels$: Observable<string[]>
|
35
35
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
36
36
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
37
37
|
fullParams$: Observable<BaseBarsTriangleParams>
|
@@ -53,7 +53,8 @@ interface RenderBarParams {
|
|
53
53
|
graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
|
54
54
|
pathGClassName: string
|
55
55
|
pathClassName: string
|
56
|
-
|
56
|
+
computedData: ComputedDataGrid
|
57
|
+
linearGradientIds: string[]
|
57
58
|
zeroYArr: number[]
|
58
59
|
groupLabels: string[]
|
59
60
|
barScale: d3.ScalePoint<string>
|
@@ -65,9 +66,9 @@ interface RenderBarParams {
|
|
65
66
|
isSeriesPositionSeprate: boolean
|
66
67
|
}
|
67
68
|
|
68
|
-
interface BarDatumGrid extends ComputedDatumGrid {
|
69
|
-
|
70
|
-
}
|
69
|
+
// interface BarDatumGrid extends ComputedDatumGrid {
|
70
|
+
// linearGradientId: string
|
71
|
+
// }
|
71
72
|
|
72
73
|
type ClipPathDatum = {
|
73
74
|
id: string;
|
@@ -119,7 +120,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
|
|
119
120
|
return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
|
120
121
|
}
|
121
122
|
|
122
|
-
function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
123
|
+
function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, computedData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
|
123
124
|
|
124
125
|
const barHalfWidth = barWidth! / 2
|
125
126
|
|
@@ -128,7 +129,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
|
128
129
|
// g
|
129
130
|
const gSelection = d3.select(g[seriesIndex])
|
130
131
|
.selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
|
131
|
-
.data(
|
132
|
+
.data(computedData[seriesIndex] ?? [])
|
132
133
|
.join(
|
133
134
|
enter => {
|
134
135
|
const enterSelection = enter
|
@@ -157,7 +158,8 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
|
157
158
|
.attr('height', d => Math.abs(d.axisYFromZero))
|
158
159
|
.attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
|
159
160
|
.attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
|
160
|
-
.style('fill', d => `url(#${d.linearGradientId})`)
|
161
|
+
// .style('fill', d => `url(#${d.linearGradientId})`)
|
162
|
+
.style('fill', d => `url(#${linearGradientIds[d.seriesIndex]})`)
|
161
163
|
.attr('stroke', d => d.color)
|
162
164
|
.attr('transform', d => `translate(${(d ? d.axisX : 0)}, ${0})`)
|
163
165
|
.transition()
|
@@ -180,14 +182,15 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
|
180
182
|
return graphicBarSelection
|
181
183
|
}
|
182
184
|
|
183
|
-
function renderLinearGradient ({ defsSelection,
|
185
|
+
function renderLinearGradient ({ defsSelection, computedData, linearGradientIds, params }: {
|
184
186
|
defsSelection: d3.Selection<SVGDefsElement, any, any, any>
|
185
|
-
|
187
|
+
computedData: ComputedDataGrid
|
188
|
+
linearGradientIds: string[]
|
186
189
|
params: BaseBarsTriangleParams
|
187
190
|
}) {
|
188
191
|
defsSelection!
|
189
192
|
.selectAll<SVGLinearGradientElement, ComputedDatumGrid>('linearGradient')
|
190
|
-
.data(
|
193
|
+
.data(computedData ?? [])
|
191
194
|
.join(
|
192
195
|
enter => {
|
193
196
|
return enter
|
@@ -202,7 +205,7 @@ function renderLinearGradient ({ defsSelection, barData, params }: {
|
|
202
205
|
exit => exit.remove()
|
203
206
|
)
|
204
207
|
.attr('id', (d, i) => {
|
205
|
-
return d[0] ? d[0].
|
208
|
+
return d[0] ? linearGradientIds[d[0].seriesIndex] : ''
|
206
209
|
})
|
207
210
|
.html((d, i) => {
|
208
211
|
const color = d[0] ? d[0].color : ''
|
@@ -286,7 +289,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
286
289
|
selection,
|
287
290
|
computedData$,
|
288
291
|
visibleComputedData$,
|
289
|
-
|
292
|
+
existSeriesLabels$,
|
290
293
|
SeriesDataMap$,
|
291
294
|
GroupDataMap$,
|
292
295
|
fullParams$,
|
@@ -305,107 +308,6 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
305
308
|
const pathGClassName = getClassName(pluginName, 'pathG')
|
306
309
|
const pathClassName = getClassName(pluginName, 'path')
|
307
310
|
|
308
|
-
// const seriesSelection$ = computedData$.pipe(
|
309
|
-
// takeUntil(destroy$),
|
310
|
-
// distinctUntilChanged((a, b) => {
|
311
|
-
// // 只有當series的數量改變時,才重新計算
|
312
|
-
// return a.length === b.length
|
313
|
-
// }),
|
314
|
-
// map((computedData, i) => {
|
315
|
-
// return selection
|
316
|
-
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
|
317
|
-
// .data(computedData, d => d[0] ? d[0].seriesIndex : i)
|
318
|
-
// .join(
|
319
|
-
// enter => {
|
320
|
-
// return enter
|
321
|
-
// .append('g')
|
322
|
-
// .classed(seriesClassName, true)
|
323
|
-
// .each((d, i, g) => {
|
324
|
-
// const axesSelection = d3.select(g[i])
|
325
|
-
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
|
326
|
-
// .data([i])
|
327
|
-
// .join(
|
328
|
-
// enter => {
|
329
|
-
// return enter
|
330
|
-
// .append('g')
|
331
|
-
// .classed(axesClassName, true)
|
332
|
-
// .attr('clip-path', `url(#${clipPathID})`)
|
333
|
-
// .each((d, i, g) => {
|
334
|
-
// const defsSelection = d3.select(g[i])
|
335
|
-
// .selectAll<SVGDefsElement, any>('defs')
|
336
|
-
// .data([i])
|
337
|
-
// .join('defs')
|
338
|
-
|
339
|
-
// const graphicGSelection = d3.select(g[i])
|
340
|
-
// .selectAll<SVGGElement, any>('g')
|
341
|
-
// .data([i])
|
342
|
-
// .join('g')
|
343
|
-
// .classed(graphicClassName, true)
|
344
|
-
// })
|
345
|
-
// },
|
346
|
-
// update => update,
|
347
|
-
// exit => exit.remove()
|
348
|
-
// )
|
349
|
-
// })
|
350
|
-
// },
|
351
|
-
// update => update,
|
352
|
-
// exit => exit.remove()
|
353
|
-
// )
|
354
|
-
// })
|
355
|
-
// )
|
356
|
-
|
357
|
-
// combineLatest({
|
358
|
-
// seriesSelection: seriesSelection$,
|
359
|
-
// gridContainer: gridContainer$
|
360
|
-
// }).pipe(
|
361
|
-
// takeUntil(destroy$),
|
362
|
-
// switchMap(async d => d)
|
363
|
-
// ).subscribe(data => {
|
364
|
-
// data.seriesSelection
|
365
|
-
// .transition()
|
366
|
-
// .attr('transform', (d, i) => {
|
367
|
-
// const translate = data.gridContainer[i].translate
|
368
|
-
// const scale = data.gridContainer[i].scale
|
369
|
-
// return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
|
370
|
-
// })
|
371
|
-
// })
|
372
|
-
|
373
|
-
|
374
|
-
// const axesSelection$ = combineLatest({
|
375
|
-
// seriesSelection: seriesSelection$,
|
376
|
-
// gridAxesTransform: gridAxesTransform$
|
377
|
-
// }).pipe(
|
378
|
-
// takeUntil(destroy$),
|
379
|
-
// switchMap(async d => d),
|
380
|
-
// map(data => {
|
381
|
-
// return data.seriesSelection
|
382
|
-
// .select<SVGGElement>(`g.${axesClassName}`)
|
383
|
-
// .style('transform', data.gridAxesTransform.value)
|
384
|
-
// })
|
385
|
-
// )
|
386
|
-
// const defsSelection$ = axesSelection$.pipe(
|
387
|
-
// takeUntil(destroy$),
|
388
|
-
// map(axesSelection => {
|
389
|
-
// return axesSelection.select<SVGDefsElement>('defs')
|
390
|
-
// })
|
391
|
-
// )
|
392
|
-
// const graphicGSelection$ = combineLatest({
|
393
|
-
// axesSelection: axesSelection$,
|
394
|
-
// gridGraphicTransform: gridGraphicTransform$
|
395
|
-
// }).pipe(
|
396
|
-
// takeUntil(destroy$),
|
397
|
-
// switchMap(async d => d),
|
398
|
-
// map(data => {
|
399
|
-
// const graphicGSelection = data.axesSelection
|
400
|
-
// .select<SVGGElement>(`g.${graphicClassName}`)
|
401
|
-
// graphicGSelection
|
402
|
-
// .transition()
|
403
|
-
// .duration(50)
|
404
|
-
// .style('transform', data.gridGraphicTransform.value)
|
405
|
-
// return graphicGSelection
|
406
|
-
// })
|
407
|
-
// )
|
408
|
-
|
409
311
|
const {
|
410
312
|
seriesSelection$,
|
411
313
|
axesSelection$,
|
@@ -415,12 +317,21 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
415
317
|
selection,
|
416
318
|
pluginName,
|
417
319
|
clipPathID,
|
418
|
-
|
320
|
+
existSeriesLabels$,
|
419
321
|
gridContainer$,
|
420
322
|
gridAxesTransform$,
|
421
323
|
gridGraphicTransform$
|
422
324
|
})
|
423
325
|
|
326
|
+
// valueAxis 的起始座標
|
327
|
+
const valueAxisStart$: Observable<number> = gridGraphicTransform$.pipe(
|
328
|
+
takeUntil(destroy$),
|
329
|
+
map(data => {
|
330
|
+
// 抵消掉外層的變型
|
331
|
+
return - data.translate[1] / data.scale[1]
|
332
|
+
})
|
333
|
+
)
|
334
|
+
|
424
335
|
const zeroYArr$ = visibleComputedData$.pipe(
|
425
336
|
// map(d => d[0] && d[0][0]
|
426
337
|
// ? d[0][0].axisY - d[0][0].axisYFromZero
|
@@ -577,29 +488,29 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
577
488
|
}))
|
578
489
|
)
|
579
490
|
|
580
|
-
const barData$ = combineLatest({
|
581
|
-
|
582
|
-
|
583
|
-
}).pipe(
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
)
|
491
|
+
// const barData$ = combineLatest({
|
492
|
+
// linearGradientIds: linearGradientIds$,
|
493
|
+
// computedData: computedData$
|
494
|
+
// }).pipe(
|
495
|
+
// takeUntil(destroy$),
|
496
|
+
// switchMap(async d => d),
|
497
|
+
// map(data => {
|
498
|
+
// return data.computedData.map((series, seriesIndex) => {
|
499
|
+
// return series.map((_d, _i) => {
|
500
|
+
// return <BarDatumGrid>{
|
501
|
+
// linearGradientId: data.linearGradientIds[seriesIndex],
|
502
|
+
// ..._d
|
503
|
+
// }
|
504
|
+
// })
|
505
|
+
// })
|
506
|
+
// })
|
507
|
+
// )
|
597
508
|
|
598
509
|
combineLatest({
|
599
510
|
graphicGSelection: graphicGSelection$,
|
600
511
|
defsSelection: defsSelection$,
|
601
512
|
computedData: computedData$,
|
602
|
-
|
513
|
+
linearGradientIds: linearGradientIds$,
|
603
514
|
zeroYArr: zeroYArr$,
|
604
515
|
groupLabels: groupLabels$,
|
605
516
|
barScale: barScale$,
|
@@ -621,7 +532,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
621
532
|
graphicGSelection: data.graphicGSelection,
|
622
533
|
pathGClassName,
|
623
534
|
pathClassName,
|
624
|
-
|
535
|
+
computedData: data.computedData,
|
536
|
+
linearGradientIds: data.linearGradientIds,
|
625
537
|
zeroYArr: data.zeroYArr,
|
626
538
|
groupLabels: data.groupLabels,
|
627
539
|
barScale: data.barScale,
|
@@ -634,7 +546,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
634
546
|
})
|
635
547
|
renderLinearGradient({
|
636
548
|
defsSelection: data.defsSelection,
|
637
|
-
|
549
|
+
computedData: data.computedData,
|
550
|
+
linearGradientIds: data.linearGradientIds,
|
638
551
|
params: data.params
|
639
552
|
})
|
640
553
|
|
@@ -648,6 +561,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
648
561
|
pluginName,
|
649
562
|
highlightTarget: data.highlightTarget,
|
650
563
|
datum,
|
564
|
+
gridIndex: datum.gridIndex,
|
651
565
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
652
566
|
seriesIndex: datum.seriesIndex,
|
653
567
|
seriesLabel: datum.seriesLabel,
|
@@ -667,6 +581,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
667
581
|
pluginName,
|
668
582
|
highlightTarget: data.highlightTarget,
|
669
583
|
datum,
|
584
|
+
gridIndex: datum.gridIndex,
|
670
585
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
671
586
|
seriesIndex: datum.seriesIndex,
|
672
587
|
seriesLabel: datum.seriesLabel,
|
@@ -686,6 +601,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
686
601
|
pluginName,
|
687
602
|
highlightTarget: data.highlightTarget,
|
688
603
|
datum,
|
604
|
+
gridIndex: datum.gridIndex,
|
689
605
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
690
606
|
seriesIndex: datum.seriesIndex,
|
691
607
|
seriesLabel: datum.seriesLabel,
|
@@ -705,6 +621,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
705
621
|
pluginName,
|
706
622
|
highlightTarget: data.highlightTarget,
|
707
623
|
datum,
|
624
|
+
gridIndex: datum.gridIndex,
|
708
625
|
series: data.SeriesDataMap.get(datum.seriesLabel)!,
|
709
626
|
seriesIndex: datum.seriesIndex,
|
710
627
|
seriesLabel: datum.seriesLabel,
|