@orbcharts/core 3.0.0-alpha.56 → 3.0.0-alpha.57
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +200 -200
- package/dist/orbcharts-core.es.js +220 -216
- package/dist/orbcharts-core.umd.js +2 -2
- package/package.json +41 -41
- package/src/AbstractChart.ts +48 -48
- package/src/GridChart.ts +20 -20
- package/src/MultiGridChart.ts +20 -20
- package/src/MultiValueChart.ts +20 -20
- package/src/RelationshipChart.ts +20 -20
- package/src/SeriesChart.ts +20 -20
- package/src/TreeChart.ts +20 -20
- package/src/base/createBaseChart.ts +369 -369
- package/src/base/createBasePlugin.ts +95 -95
- package/src/defaults.ts +226 -226
- package/src/defineGridPlugin.ts +3 -3
- package/src/defineMultiGridPlugin.ts +3 -3
- package/src/defineMultiValuePlugin.ts +3 -3
- package/src/defineNoneDataPlugin.ts +4 -4
- package/src/defineRelationshipPlugin.ts +3 -3
- package/src/defineSeriesPlugin.ts +3 -3
- package/src/defineTreePlugin.ts +3 -3
- package/src/grid/computeGridData.ts +134 -134
- package/src/grid/createGridContextObserver.ts +155 -155
- package/src/grid/gridObservables.ts +613 -607
- package/src/index.ts +21 -21
- package/src/multiGrid/computeMultiGridData.ts +130 -130
- package/src/multiGrid/createMultiGridContextObserver.ts +41 -41
- package/src/multiGrid/multiGridObservables.ts +365 -365
- package/src/multiValue/computeMultiValueData.ts +143 -143
- package/src/multiValue/createMultiValueContextObserver.ts +12 -12
- package/src/relationship/computeRelationshipData.ts +118 -118
- package/src/relationship/createRelationshipContextObserver.ts +12 -12
- package/src/series/computeSeriesData.ts +90 -90
- package/src/series/createSeriesContextObserver.ts +93 -93
- package/src/series/seriesObservables.ts +175 -175
- package/src/tree/computeTreeData.ts +132 -132
- package/src/tree/createTreeContextObserver.ts +61 -61
- package/src/tree/treeObservables.ts +94 -94
- package/src/types/Chart.ts +50 -50
- package/src/types/ChartParams.ts +51 -51
- package/src/types/ComputedData.ts +83 -83
- package/src/types/ComputedDataGrid.ts +13 -13
- package/src/types/ComputedDataMultiGrid.ts +2 -2
- package/src/types/ComputedDataMultiValue.ts +9 -9
- package/src/types/ComputedDataRelationship.ts +19 -19
- package/src/types/ComputedDataSeries.ts +7 -7
- package/src/types/ComputedDataTree.ts +19 -19
- package/src/types/ContextObserver.ts +38 -38
- package/src/types/ContextObserverGrid.ts +42 -42
- package/src/types/ContextObserverMultiGrid.ts +16 -16
- package/src/types/ContextObserverMultiValue.ts +4 -4
- package/src/types/ContextObserverRelationship.ts +4 -4
- package/src/types/ContextObserverSeries.ts +29 -29
- package/src/types/ContextObserverTree.ts +11 -11
- package/src/types/ContextSubject.ts +18 -18
- package/src/types/Data.ts +45 -45
- package/src/types/DataFormatter.ts +74 -74
- package/src/types/DataFormatterGrid.ts +67 -67
- package/src/types/DataFormatterMultiGrid.ts +44 -44
- package/src/types/DataFormatterMultiValue.ts +23 -23
- package/src/types/DataFormatterRelationship.ts +25 -25
- package/src/types/DataFormatterSeries.ts +20 -20
- package/src/types/DataFormatterTree.ts +12 -12
- package/src/types/DataGrid.ts +11 -11
- package/src/types/DataMultiGrid.ts +6 -6
- package/src/types/DataMultiValue.ts +12 -12
- package/src/types/DataRelationship.ts +27 -27
- package/src/types/DataSeries.ts +11 -11
- package/src/types/DataTree.ts +20 -20
- package/src/types/Event.ts +153 -153
- package/src/types/Layout.ts +11 -11
- package/src/types/Padding.ts +5 -5
- package/src/types/Plugin.ts +60 -60
- package/src/types/TransformData.ts +7 -7
- package/src/types/index.ts +37 -37
- package/src/utils/commonUtils.ts +50 -50
- package/src/utils/d3Utils.ts +92 -92
- package/src/utils/index.ts +4 -4
- package/src/utils/observables.ts +201 -201
- package/src/utils/orbchartsUtils.ts +349 -349
- package/tsconfig.base.json +13 -13
- package/tsconfig.json +2 -2
- package/vite.config.js +22 -22
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineMultiValuePlugin = createBasePlugin<'multiValue'>()
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineMultiValuePlugin = createBasePlugin<'multiValue'>()
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
import { ChartType } from './types/Chart'
|
3
|
-
|
4
|
-
export const defineNoneDataPlugin = createBasePlugin<any>() // noneDataPlugin 可以使用在任何的 chartType
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
import { ChartType } from './types/Chart'
|
3
|
+
|
4
|
+
export const defineNoneDataPlugin = createBasePlugin<any>() // noneDataPlugin 可以使用在任何的 chartType
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineRelationshipPlugin = createBasePlugin<'relationship'>()
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineRelationshipPlugin = createBasePlugin<'relationship'>()
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineSeriesPlugin = createBasePlugin<'series'>()
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineSeriesPlugin = createBasePlugin<'series'>()
|
package/src/defineTreePlugin.ts
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineTreePlugin = createBasePlugin<'tree'>()
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineTreePlugin = createBasePlugin<'tree'>()
|
@@ -1,134 +1,134 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import type { ComputedDataFn } from '../types/ComputedData'
|
3
|
-
import type { DataGrid, DataGridDatum } from '../types/DataGrid'
|
4
|
-
import type { DataFormatterContext } from '../types/DataFormatter'
|
5
|
-
import type { DataFormatterGrid, DataFormatterGridGrid } from '../types/DataFormatterGrid'
|
6
|
-
import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
|
7
|
-
import type { Layout } from '../types/Layout'
|
8
|
-
import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
|
9
|
-
import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
|
10
|
-
|
11
|
-
// 統一 DataGrid 格式、並欄列資料轉置為一致方式
|
12
|
-
export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
|
13
|
-
// const { data = [], dataFormatter, chartParams } = context
|
14
|
-
if (!data.length) {
|
15
|
-
return []
|
16
|
-
}
|
17
|
-
try {
|
18
|
-
// 最多的array length
|
19
|
-
const maxArrayLength = data.reduce((prev, current) => {
|
20
|
-
return current.length > prev ? current.length : prev
|
21
|
-
}, 0)
|
22
|
-
|
23
|
-
// 補齊短少資料
|
24
|
-
const fullData = data.map((d, i) => {
|
25
|
-
if (d.length === maxArrayLength) {
|
26
|
-
return d
|
27
|
-
}
|
28
|
-
const newD = Object.assign([], d)
|
29
|
-
for (let _i = newD.length; _i < maxArrayLength; _i++) {
|
30
|
-
newD[_i] = null
|
31
|
-
}
|
32
|
-
return newD
|
33
|
-
})
|
34
|
-
|
35
|
-
// 完整的資料格式
|
36
|
-
const dataGrid: DataGridDatum[][] = fullData.map((d, i) => {
|
37
|
-
return d.map((_d, _i) => {
|
38
|
-
|
39
|
-
const datum: DataGridDatum = _d == null
|
40
|
-
? {
|
41
|
-
id: '',
|
42
|
-
label: '',
|
43
|
-
data: {},
|
44
|
-
value: null,
|
45
|
-
}
|
46
|
-
: typeof _d === 'number'
|
47
|
-
? {
|
48
|
-
id: '',
|
49
|
-
label: '',
|
50
|
-
data: {},
|
51
|
-
value: _d,
|
52
|
-
}
|
53
|
-
: {
|
54
|
-
id: _d.id ?? '',
|
55
|
-
label: _d.label ?? '',
|
56
|
-
data: _d.data ?? {},
|
57
|
-
value: _d.value,
|
58
|
-
}
|
59
|
-
|
60
|
-
return datum
|
61
|
-
})
|
62
|
-
})
|
63
|
-
|
64
|
-
// 依seriesDirection轉置資料矩陣
|
65
|
-
const transposedDataGrid = transposeData(dataFormatterGrid.seriesDirection, dataGrid)
|
66
|
-
|
67
|
-
return transposedDataGrid
|
68
|
-
} catch (e) {
|
69
|
-
return []
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
export const computeGridData: ComputedDataFn<'grid'> = (context) => {
|
74
|
-
const { data = [], dataFormatter, chartParams } = context
|
75
|
-
if (!data.length) {
|
76
|
-
return []
|
77
|
-
}
|
78
|
-
|
79
|
-
let computedDataGrid: ComputedDatumGrid[][]
|
80
|
-
|
81
|
-
try {
|
82
|
-
|
83
|
-
// 依seriesDirection轉置資料矩陣
|
84
|
-
const transposedDataGrid = createTransposedDataGrid(data, dataFormatter.grid)
|
85
|
-
|
86
|
-
const seriesLabels = createGridSeriesLabels({
|
87
|
-
transposedDataGrid,
|
88
|
-
dataFormatterGrid: dataFormatter.grid,
|
89
|
-
chartType: 'grid'
|
90
|
-
})
|
91
|
-
const groupLabels = createGridGroupLabels({
|
92
|
-
transposedDataGrid,
|
93
|
-
dataFormatterGrid: dataFormatter.grid,
|
94
|
-
chartType: 'grid'
|
95
|
-
})
|
96
|
-
|
97
|
-
let _index = 0
|
98
|
-
computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
|
99
|
-
return seriesData.map((groupDatum, groupIndex) => {
|
100
|
-
|
101
|
-
const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
|
102
|
-
const groupLabel = groupLabels[groupIndex]
|
103
|
-
|
104
|
-
const computedDatum: ComputedDatumGrid = {
|
105
|
-
id: groupDatum.id ? groupDatum.id : defaultId,
|
106
|
-
index: _index,
|
107
|
-
label: groupDatum.label ? groupDatum.label : defaultId,
|
108
|
-
description: groupDatum.description ?? '',
|
109
|
-
data: groupDatum.data,
|
110
|
-
value: groupDatum.value,
|
111
|
-
gridIndex: 0,
|
112
|
-
seriesIndex,
|
113
|
-
seriesLabel: seriesLabels[seriesIndex],
|
114
|
-
groupIndex,
|
115
|
-
groupLabel,
|
116
|
-
color: seriesColorPredicate(seriesIndex, chartParams),
|
117
|
-
visible: true // 先給一個預設值
|
118
|
-
}
|
119
|
-
|
120
|
-
// 先建立物件再計算visible欄位
|
121
|
-
computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
|
122
|
-
|
123
|
-
_index ++
|
124
|
-
|
125
|
-
return computedDatum
|
126
|
-
})
|
127
|
-
})
|
128
|
-
|
129
|
-
} catch (e) {
|
130
|
-
throw Error(e)
|
131
|
-
}
|
132
|
-
|
133
|
-
return computedDataGrid
|
134
|
-
}
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import type { ComputedDataFn } from '../types/ComputedData'
|
3
|
+
import type { DataGrid, DataGridDatum } from '../types/DataGrid'
|
4
|
+
import type { DataFormatterContext } from '../types/DataFormatter'
|
5
|
+
import type { DataFormatterGrid, DataFormatterGridGrid } from '../types/DataFormatterGrid'
|
6
|
+
import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
|
7
|
+
import type { Layout } from '../types/Layout'
|
8
|
+
import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
|
9
|
+
import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
|
10
|
+
|
11
|
+
// 統一 DataGrid 格式、並欄列資料轉置為一致方式
|
12
|
+
export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
|
13
|
+
// const { data = [], dataFormatter, chartParams } = context
|
14
|
+
if (!data.length) {
|
15
|
+
return []
|
16
|
+
}
|
17
|
+
try {
|
18
|
+
// 最多的array length
|
19
|
+
const maxArrayLength = data.reduce((prev, current) => {
|
20
|
+
return current.length > prev ? current.length : prev
|
21
|
+
}, 0)
|
22
|
+
|
23
|
+
// 補齊短少資料
|
24
|
+
const fullData = data.map((d, i) => {
|
25
|
+
if (d.length === maxArrayLength) {
|
26
|
+
return d
|
27
|
+
}
|
28
|
+
const newD = Object.assign([], d)
|
29
|
+
for (let _i = newD.length; _i < maxArrayLength; _i++) {
|
30
|
+
newD[_i] = null
|
31
|
+
}
|
32
|
+
return newD
|
33
|
+
})
|
34
|
+
|
35
|
+
// 完整的資料格式
|
36
|
+
const dataGrid: DataGridDatum[][] = fullData.map((d, i) => {
|
37
|
+
return d.map((_d, _i) => {
|
38
|
+
|
39
|
+
const datum: DataGridDatum = _d == null
|
40
|
+
? {
|
41
|
+
id: '',
|
42
|
+
label: '',
|
43
|
+
data: {},
|
44
|
+
value: null,
|
45
|
+
}
|
46
|
+
: typeof _d === 'number'
|
47
|
+
? {
|
48
|
+
id: '',
|
49
|
+
label: '',
|
50
|
+
data: {},
|
51
|
+
value: _d,
|
52
|
+
}
|
53
|
+
: {
|
54
|
+
id: _d.id ?? '',
|
55
|
+
label: _d.label ?? '',
|
56
|
+
data: _d.data ?? {},
|
57
|
+
value: _d.value,
|
58
|
+
}
|
59
|
+
|
60
|
+
return datum
|
61
|
+
})
|
62
|
+
})
|
63
|
+
|
64
|
+
// 依seriesDirection轉置資料矩陣
|
65
|
+
const transposedDataGrid = transposeData(dataFormatterGrid.seriesDirection, dataGrid)
|
66
|
+
|
67
|
+
return transposedDataGrid
|
68
|
+
} catch (e) {
|
69
|
+
return []
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
export const computeGridData: ComputedDataFn<'grid'> = (context) => {
|
74
|
+
const { data = [], dataFormatter, chartParams } = context
|
75
|
+
if (!data.length) {
|
76
|
+
return []
|
77
|
+
}
|
78
|
+
|
79
|
+
let computedDataGrid: ComputedDatumGrid[][]
|
80
|
+
|
81
|
+
try {
|
82
|
+
|
83
|
+
// 依seriesDirection轉置資料矩陣
|
84
|
+
const transposedDataGrid = createTransposedDataGrid(data, dataFormatter.grid)
|
85
|
+
|
86
|
+
const seriesLabels = createGridSeriesLabels({
|
87
|
+
transposedDataGrid,
|
88
|
+
dataFormatterGrid: dataFormatter.grid,
|
89
|
+
chartType: 'grid'
|
90
|
+
})
|
91
|
+
const groupLabels = createGridGroupLabels({
|
92
|
+
transposedDataGrid,
|
93
|
+
dataFormatterGrid: dataFormatter.grid,
|
94
|
+
chartType: 'grid'
|
95
|
+
})
|
96
|
+
|
97
|
+
let _index = 0
|
98
|
+
computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
|
99
|
+
return seriesData.map((groupDatum, groupIndex) => {
|
100
|
+
|
101
|
+
const defaultId = createDefaultDatumId('grid', 0, seriesIndex, groupIndex)
|
102
|
+
const groupLabel = groupLabels[groupIndex]
|
103
|
+
|
104
|
+
const computedDatum: ComputedDatumGrid = {
|
105
|
+
id: groupDatum.id ? groupDatum.id : defaultId,
|
106
|
+
index: _index,
|
107
|
+
label: groupDatum.label ? groupDatum.label : defaultId,
|
108
|
+
description: groupDatum.description ?? '',
|
109
|
+
data: groupDatum.data,
|
110
|
+
value: groupDatum.value,
|
111
|
+
gridIndex: 0,
|
112
|
+
seriesIndex,
|
113
|
+
seriesLabel: seriesLabels[seriesIndex],
|
114
|
+
groupIndex,
|
115
|
+
groupLabel,
|
116
|
+
color: seriesColorPredicate(seriesIndex, chartParams),
|
117
|
+
visible: true // 先給一個預設值
|
118
|
+
}
|
119
|
+
|
120
|
+
// 先建立物件再計算visible欄位
|
121
|
+
computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
|
122
|
+
|
123
|
+
_index ++
|
124
|
+
|
125
|
+
return computedDatum
|
126
|
+
})
|
127
|
+
})
|
128
|
+
|
129
|
+
} catch (e) {
|
130
|
+
throw Error(e)
|
131
|
+
}
|
132
|
+
|
133
|
+
return computedDataGrid
|
134
|
+
}
|
@@ -1,155 +1,155 @@
|
|
1
|
-
import { map, shareReplay, distinctUntilChanged } from 'rxjs'
|
2
|
-
import type { ContextObserverFn } from '../types'
|
3
|
-
import {
|
4
|
-
highlightObservable,
|
5
|
-
seriesDataMapObservable,
|
6
|
-
groupDataMapObservable,
|
7
|
-
textSizePxObservable } from '../utils/observables'
|
8
|
-
import {
|
9
|
-
gridComputedLayoutDataObservable,
|
10
|
-
gridAxesTransformObservable,
|
11
|
-
gridAxesReverseTransformObservable,
|
12
|
-
gridGraphicTransformObservable,
|
13
|
-
gridGraphicReverseScaleObservable,
|
14
|
-
gridAxesSizeObservable,
|
15
|
-
seriesLabelsObservable,
|
16
|
-
gridVisibleComputedDataObservable,
|
17
|
-
gridVisibleComputedLayoutDataObservable,
|
18
|
-
// isSeriesSeprateObservable,
|
19
|
-
gridContainerPositionObservable,
|
20
|
-
computedStackedDataObservables } from './gridObservables'
|
21
|
-
|
22
|
-
export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
|
23
|
-
|
24
|
-
const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
|
25
|
-
shareReplay(1)
|
26
|
-
)
|
27
|
-
|
28
|
-
const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
|
29
|
-
map(d => d.grid.separateSeries),
|
30
|
-
distinctUntilChanged(),
|
31
|
-
shareReplay(1)
|
32
|
-
)
|
33
|
-
|
34
|
-
const gridContainerPosition$ = gridContainerPositionObservable({
|
35
|
-
computedData$: observer.computedData$,
|
36
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
37
|
-
layout$: observer.layout$,
|
38
|
-
})
|
39
|
-
|
40
|
-
const gridAxesTransform$ = gridAxesTransformObservable({
|
41
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
42
|
-
layout$: observer.layout$
|
43
|
-
}).pipe(
|
44
|
-
shareReplay(1)
|
45
|
-
)
|
46
|
-
|
47
|
-
const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
|
48
|
-
gridAxesTransform$
|
49
|
-
}).pipe(
|
50
|
-
shareReplay(1)
|
51
|
-
)
|
52
|
-
|
53
|
-
const gridGraphicTransform$ = gridGraphicTransformObservable({
|
54
|
-
computedData$: observer.computedData$,
|
55
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
56
|
-
layout$: observer.layout$
|
57
|
-
}).pipe(
|
58
|
-
shareReplay(1)
|
59
|
-
)
|
60
|
-
|
61
|
-
const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
|
62
|
-
gridContainerPosition$: gridContainerPosition$,
|
63
|
-
gridAxesTransform$: gridAxesTransform$,
|
64
|
-
gridGraphicTransform$: gridGraphicTransform$,
|
65
|
-
})
|
66
|
-
|
67
|
-
const gridAxesSize$ = gridAxesSizeObservable({
|
68
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
69
|
-
layout$: observer.layout$
|
70
|
-
}).pipe(
|
71
|
-
shareReplay(1)
|
72
|
-
)
|
73
|
-
|
74
|
-
const datumList$ = observer.computedData$.pipe(
|
75
|
-
map(d => d.flat())
|
76
|
-
).pipe(
|
77
|
-
shareReplay(1)
|
78
|
-
)
|
79
|
-
|
80
|
-
const gridHighlight$ = highlightObservable({
|
81
|
-
datumList$,
|
82
|
-
fullChartParams$: observer.fullChartParams$,
|
83
|
-
event$: subject.event$
|
84
|
-
}).pipe(
|
85
|
-
shareReplay(1)
|
86
|
-
)
|
87
|
-
|
88
|
-
const seriesLabels$ = seriesLabelsObservable({
|
89
|
-
computedData$: observer.computedData$,
|
90
|
-
})
|
91
|
-
|
92
|
-
const SeriesDataMap$ = seriesDataMapObservable({
|
93
|
-
datumList$: datumList$
|
94
|
-
}).pipe(
|
95
|
-
shareReplay(1)
|
96
|
-
)
|
97
|
-
|
98
|
-
const GroupDataMap$ = groupDataMapObservable({
|
99
|
-
datumList$: datumList$
|
100
|
-
}).pipe(
|
101
|
-
shareReplay(1)
|
102
|
-
)
|
103
|
-
|
104
|
-
const computedLayoutData$ = gridComputedLayoutDataObservable({
|
105
|
-
computedData$: observer.computedData$,
|
106
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
107
|
-
layout$: observer.layout$,
|
108
|
-
}).pipe(
|
109
|
-
shareReplay(1)
|
110
|
-
)
|
111
|
-
|
112
|
-
const visibleComputedData$ = gridVisibleComputedDataObservable({
|
113
|
-
computedData$: observer.computedData$,
|
114
|
-
}).pipe(
|
115
|
-
shareReplay(1)
|
116
|
-
)
|
117
|
-
|
118
|
-
const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
|
119
|
-
computedLayoutData$: computedLayoutData$,
|
120
|
-
}).pipe(
|
121
|
-
shareReplay(1)
|
122
|
-
)
|
123
|
-
|
124
|
-
const computedStackedData$ = computedStackedDataObservables({
|
125
|
-
computedData$: observer.computedData$,
|
126
|
-
isSeriesSeprate$: isSeriesSeprate$
|
127
|
-
}).pipe(
|
128
|
-
shareReplay(1)
|
129
|
-
)
|
130
|
-
|
131
|
-
|
132
|
-
return {
|
133
|
-
fullParams$: observer.fullParams$,
|
134
|
-
fullChartParams$: observer.fullChartParams$,
|
135
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
136
|
-
computedData$: observer.computedData$,
|
137
|
-
layout$: observer.layout$,
|
138
|
-
textSizePx$,
|
139
|
-
isSeriesSeprate$,
|
140
|
-
gridContainerPosition$,
|
141
|
-
gridAxesTransform$,
|
142
|
-
gridAxesReverseTransform$,
|
143
|
-
gridGraphicTransform$,
|
144
|
-
gridGraphicReverseScale$,
|
145
|
-
gridAxesSize$,
|
146
|
-
gridHighlight$,
|
147
|
-
seriesLabels$,
|
148
|
-
SeriesDataMap$,
|
149
|
-
GroupDataMap$,
|
150
|
-
computedLayoutData$,
|
151
|
-
visibleComputedData$,
|
152
|
-
visibleComputedLayoutData$,
|
153
|
-
computedStackedData$,
|
154
|
-
}
|
155
|
-
}
|
1
|
+
import { map, shareReplay, distinctUntilChanged } from 'rxjs'
|
2
|
+
import type { ContextObserverFn } from '../types'
|
3
|
+
import {
|
4
|
+
highlightObservable,
|
5
|
+
seriesDataMapObservable,
|
6
|
+
groupDataMapObservable,
|
7
|
+
textSizePxObservable } from '../utils/observables'
|
8
|
+
import {
|
9
|
+
gridComputedLayoutDataObservable,
|
10
|
+
gridAxesTransformObservable,
|
11
|
+
gridAxesReverseTransformObservable,
|
12
|
+
gridGraphicTransformObservable,
|
13
|
+
gridGraphicReverseScaleObservable,
|
14
|
+
gridAxesSizeObservable,
|
15
|
+
seriesLabelsObservable,
|
16
|
+
gridVisibleComputedDataObservable,
|
17
|
+
gridVisibleComputedLayoutDataObservable,
|
18
|
+
// isSeriesSeprateObservable,
|
19
|
+
gridContainerPositionObservable,
|
20
|
+
computedStackedDataObservables } from './gridObservables'
|
21
|
+
|
22
|
+
export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
|
23
|
+
|
24
|
+
const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
|
25
|
+
shareReplay(1)
|
26
|
+
)
|
27
|
+
|
28
|
+
const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
|
29
|
+
map(d => d.grid.separateSeries),
|
30
|
+
distinctUntilChanged(),
|
31
|
+
shareReplay(1)
|
32
|
+
)
|
33
|
+
|
34
|
+
const gridContainerPosition$ = gridContainerPositionObservable({
|
35
|
+
computedData$: observer.computedData$,
|
36
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
37
|
+
layout$: observer.layout$,
|
38
|
+
})
|
39
|
+
|
40
|
+
const gridAxesTransform$ = gridAxesTransformObservable({
|
41
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
42
|
+
layout$: observer.layout$
|
43
|
+
}).pipe(
|
44
|
+
shareReplay(1)
|
45
|
+
)
|
46
|
+
|
47
|
+
const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
|
48
|
+
gridAxesTransform$
|
49
|
+
}).pipe(
|
50
|
+
shareReplay(1)
|
51
|
+
)
|
52
|
+
|
53
|
+
const gridGraphicTransform$ = gridGraphicTransformObservable({
|
54
|
+
computedData$: observer.computedData$,
|
55
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
56
|
+
layout$: observer.layout$
|
57
|
+
}).pipe(
|
58
|
+
shareReplay(1)
|
59
|
+
)
|
60
|
+
|
61
|
+
const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
|
62
|
+
gridContainerPosition$: gridContainerPosition$,
|
63
|
+
gridAxesTransform$: gridAxesTransform$,
|
64
|
+
gridGraphicTransform$: gridGraphicTransform$,
|
65
|
+
})
|
66
|
+
|
67
|
+
const gridAxesSize$ = gridAxesSizeObservable({
|
68
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
69
|
+
layout$: observer.layout$
|
70
|
+
}).pipe(
|
71
|
+
shareReplay(1)
|
72
|
+
)
|
73
|
+
|
74
|
+
const datumList$ = observer.computedData$.pipe(
|
75
|
+
map(d => d.flat())
|
76
|
+
).pipe(
|
77
|
+
shareReplay(1)
|
78
|
+
)
|
79
|
+
|
80
|
+
const gridHighlight$ = highlightObservable({
|
81
|
+
datumList$,
|
82
|
+
fullChartParams$: observer.fullChartParams$,
|
83
|
+
event$: subject.event$
|
84
|
+
}).pipe(
|
85
|
+
shareReplay(1)
|
86
|
+
)
|
87
|
+
|
88
|
+
const seriesLabels$ = seriesLabelsObservable({
|
89
|
+
computedData$: observer.computedData$,
|
90
|
+
})
|
91
|
+
|
92
|
+
const SeriesDataMap$ = seriesDataMapObservable({
|
93
|
+
datumList$: datumList$
|
94
|
+
}).pipe(
|
95
|
+
shareReplay(1)
|
96
|
+
)
|
97
|
+
|
98
|
+
const GroupDataMap$ = groupDataMapObservable({
|
99
|
+
datumList$: datumList$
|
100
|
+
}).pipe(
|
101
|
+
shareReplay(1)
|
102
|
+
)
|
103
|
+
|
104
|
+
const computedLayoutData$ = gridComputedLayoutDataObservable({
|
105
|
+
computedData$: observer.computedData$,
|
106
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
107
|
+
layout$: observer.layout$,
|
108
|
+
}).pipe(
|
109
|
+
shareReplay(1)
|
110
|
+
)
|
111
|
+
|
112
|
+
const visibleComputedData$ = gridVisibleComputedDataObservable({
|
113
|
+
computedData$: observer.computedData$,
|
114
|
+
}).pipe(
|
115
|
+
shareReplay(1)
|
116
|
+
)
|
117
|
+
|
118
|
+
const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
|
119
|
+
computedLayoutData$: computedLayoutData$,
|
120
|
+
}).pipe(
|
121
|
+
shareReplay(1)
|
122
|
+
)
|
123
|
+
|
124
|
+
const computedStackedData$ = computedStackedDataObservables({
|
125
|
+
computedData$: observer.computedData$,
|
126
|
+
isSeriesSeprate$: isSeriesSeprate$
|
127
|
+
}).pipe(
|
128
|
+
shareReplay(1)
|
129
|
+
)
|
130
|
+
|
131
|
+
|
132
|
+
return {
|
133
|
+
fullParams$: observer.fullParams$,
|
134
|
+
fullChartParams$: observer.fullChartParams$,
|
135
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
136
|
+
computedData$: observer.computedData$,
|
137
|
+
layout$: observer.layout$,
|
138
|
+
textSizePx$,
|
139
|
+
isSeriesSeprate$,
|
140
|
+
gridContainerPosition$,
|
141
|
+
gridAxesTransform$,
|
142
|
+
gridAxesReverseTransform$,
|
143
|
+
gridGraphicTransform$,
|
144
|
+
gridGraphicReverseScale$,
|
145
|
+
gridAxesSize$,
|
146
|
+
gridHighlight$,
|
147
|
+
seriesLabels$,
|
148
|
+
SeriesDataMap$,
|
149
|
+
GroupDataMap$,
|
150
|
+
computedLayoutData$,
|
151
|
+
visibleComputedData$,
|
152
|
+
visibleComputedLayoutData$,
|
153
|
+
computedStackedData$,
|
154
|
+
}
|
155
|
+
}
|