@orbcharts/core 3.0.0-beta.8 → 3.0.0-beta.9
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/LICENSE +200 -200
- package/dist/orbcharts-core.es.js +401 -401
- package/dist/orbcharts-core.umd.js +3 -3
- package/lib/core-types.ts +7 -7
- package/package.json +42 -42
- package/src/AbstractChart.ts +57 -57
- package/src/GridChart.ts +24 -24
- package/src/MultiGridChart.ts +24 -24
- package/src/MultiValueChart.ts +24 -24
- package/src/RelationshipChart.ts +24 -24
- package/src/SeriesChart.ts +24 -24
- package/src/TreeChart.ts +24 -24
- package/src/base/createBaseChart.ts +505 -505
- package/src/base/createBasePlugin.ts +153 -153
- package/src/base/validators/chartOptionsValidator.ts +23 -23
- package/src/base/validators/chartParamsValidator.ts +133 -133
- package/src/base/validators/elementValidator.ts +13 -13
- package/src/base/validators/pluginsValidator.ts +14 -14
- package/src/defaults.ts +238 -238
- 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/computedDataFn.ts +129 -129
- package/src/grid/contextObserverCallback.ts +176 -176
- package/src/grid/dataFormatterValidator.ts +101 -101
- package/src/grid/dataValidator.ts +12 -12
- package/src/index.ts +20 -20
- package/src/multiGrid/computedDataFn.ts +123 -123
- package/src/multiGrid/contextObserverCallback.ts +41 -41
- package/src/multiGrid/dataFormatterValidator.ts +115 -115
- package/src/multiGrid/dataValidator.ts +12 -12
- package/src/multiValue/computedDataFn.ts +110 -110
- package/src/multiValue/contextObserverCallback.ts +160 -160
- package/src/multiValue/dataFormatterValidator.ts +9 -9
- package/src/multiValue/dataValidator.ts +9 -9
- package/src/relationship/computedDataFn.ts +144 -144
- package/src/relationship/contextObserverCallback.ts +80 -80
- package/src/relationship/dataFormatterValidator.ts +9 -9
- package/src/relationship/dataValidator.ts +9 -9
- package/src/series/computedDataFn.ts +88 -88
- package/src/series/contextObserverCallback.ts +100 -100
- package/src/series/dataFormatterValidator.ts +41 -41
- package/src/series/dataValidator.ts +12 -12
- package/src/tree/computedDataFn.ts +129 -129
- package/src/tree/contextObserverCallback.ts +58 -58
- package/src/tree/dataFormatterValidator.ts +13 -13
- package/src/tree/dataValidator.ts +13 -13
- package/src/utils/commonUtils.ts +55 -55
- package/src/utils/d3Scale.ts +198 -198
- package/src/utils/errorMessage.ts +42 -42
- package/src/utils/gridObservables.ts +683 -683
- package/src/utils/index.ts +9 -9
- package/src/utils/multiGridObservables.ts +392 -392
- package/src/utils/multiValueObservables.ts +661 -661
- package/src/utils/observables.ts +219 -219
- package/src/utils/orbchartsUtils.ts +377 -377
- package/src/utils/relationshipObservables.ts +84 -84
- package/src/utils/seriesObservables.ts +175 -175
- package/src/utils/treeObservables.ts +105 -105
- package/src/utils/validator.ts +126 -126
- package/tsconfig.base.json +13 -13
- package/tsconfig.json +2 -2
- package/vite-env.d.ts +6 -6
- package/vite.config.js +22 -22
@@ -1,15 +1,15 @@
|
|
1
|
-
import type { ChartType, PluginEntity, ValidatorResult } from '../../../lib/core-types'
|
2
|
-
import { validateColumns } from '../../utils/validator'
|
3
|
-
|
4
|
-
export function pluginsValidator (chartType: ChartType, pluginEntities: PluginEntity<any, any, any>[]): ValidatorResult {
|
5
|
-
const result = validateColumns({ pluginEntities }, {
|
6
|
-
pluginEntities: {
|
7
|
-
toBe: `PluginEntity<'${chartType}'>[]`,
|
8
|
-
test: (value: PluginEntity<any, any, any>[]) => {
|
9
|
-
return Array.isArray(value) && value.every((v) => v.chartType === chartType || v.chartType === 'noneData')
|
10
|
-
}
|
11
|
-
}
|
12
|
-
})
|
13
|
-
|
14
|
-
return result
|
1
|
+
import type { ChartType, PluginEntity, ValidatorResult } from '../../../lib/core-types'
|
2
|
+
import { validateColumns } from '../../utils/validator'
|
3
|
+
|
4
|
+
export function pluginsValidator (chartType: ChartType, pluginEntities: PluginEntity<any, any, any>[]): ValidatorResult {
|
5
|
+
const result = validateColumns({ pluginEntities }, {
|
6
|
+
pluginEntities: {
|
7
|
+
toBe: `PluginEntity<'${chartType}'>[]`,
|
8
|
+
test: (value: PluginEntity<any, any, any>[]) => {
|
9
|
+
return Array.isArray(value) && value.every((v) => v.chartType === chartType || v.chartType === 'noneData')
|
10
|
+
}
|
11
|
+
}
|
12
|
+
})
|
13
|
+
|
14
|
+
return result
|
15
15
|
}
|
package/src/defaults.ts
CHANGED
@@ -1,238 +1,238 @@
|
|
1
|
-
import type {
|
2
|
-
ChartOptionsPartial,
|
3
|
-
DataSeries,
|
4
|
-
DataGrid,
|
5
|
-
DataMultiGrid,
|
6
|
-
DataMultiValue,
|
7
|
-
DataTree,
|
8
|
-
DataRelationship,
|
9
|
-
DataFormatterValueAxis,
|
10
|
-
DataFormatterGroupAxis,
|
11
|
-
DataFormatterContainer,
|
12
|
-
DataFormatterSeries,
|
13
|
-
DataFormatterGrid,
|
14
|
-
DataFormatterGridGrid,
|
15
|
-
DataFormatterMultiGrid,
|
16
|
-
DataFormatterMultiGridGrid,
|
17
|
-
DataFormatterMultiValue,
|
18
|
-
DataFormatterTree,
|
19
|
-
DataFormatterRelationship,
|
20
|
-
ChartParams,
|
21
|
-
Padding
|
22
|
-
} from '../lib/core-types'
|
23
|
-
|
24
|
-
export const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any> = {
|
25
|
-
// preset: {} // 預設為空
|
26
|
-
width: 'auto',
|
27
|
-
height: 'auto'
|
28
|
-
}
|
29
|
-
|
30
|
-
// export const GLOBAL_DEFAULT: ChartGlobalDefault = {
|
31
|
-
// colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
|
32
|
-
// padding: {
|
33
|
-
// top: 50,
|
34
|
-
// right: 70,
|
35
|
-
// bottom: 50,
|
36
|
-
// left: 70
|
37
|
-
// },
|
38
|
-
// // chartWidth: '100%',
|
39
|
-
// // chartHeight: 500
|
40
|
-
// }
|
41
|
-
|
42
|
-
// export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
|
43
|
-
// ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
|
44
|
-
|
45
|
-
export const DEFAULT_PADDING: Padding = {
|
46
|
-
top: 60,
|
47
|
-
right: 60,
|
48
|
-
bottom: 60,
|
49
|
-
left: 60
|
50
|
-
}
|
51
|
-
|
52
|
-
export const DEFAULT_CHART_PARAMS: ChartParams = {
|
53
|
-
padding: DEFAULT_PADDING,
|
54
|
-
highlightTarget: 'datum',
|
55
|
-
highlightDefault: null,
|
56
|
-
colorScheme: 'light',
|
57
|
-
colors: {
|
58
|
-
light: {
|
59
|
-
|
60
|
-
// label: ['#F3A356', '#7A60F0', '#38B1AF', '#60A2F0', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
61
|
-
label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
62
|
-
// primary: '#454545',
|
63
|
-
primary: '#1b1e23',
|
64
|
-
secondary: '#e1e1e1',
|
65
|
-
white: '#ffffff',
|
66
|
-
background: '#ffffff'
|
67
|
-
},
|
68
|
-
dark: {
|
69
|
-
|
70
|
-
label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
71
|
-
primary: '#f0f0f0',
|
72
|
-
secondary: '#e1e1e1',
|
73
|
-
white: '#ffffff',
|
74
|
-
background: '#000000'
|
75
|
-
}
|
76
|
-
},
|
77
|
-
styles: {
|
78
|
-
// textSize: 14,
|
79
|
-
textSize: '0.875rem',
|
80
|
-
unhighlightedOpacity: 0.3
|
81
|
-
},
|
82
|
-
transitionDuration: 800,
|
83
|
-
transitionEase: 'easeCubic'
|
84
|
-
}
|
85
|
-
|
86
|
-
export const DEFAULT_CHART_WIDTH = 800
|
87
|
-
|
88
|
-
export const DEFAULT_CHART_HEIGHT = 500
|
89
|
-
|
90
|
-
// -- Data --
|
91
|
-
|
92
|
-
export const DEFAULT_DATA_SERIES: DataSeries = []
|
93
|
-
|
94
|
-
export const DEFAULT_DATA_GRID: DataGrid = []
|
95
|
-
|
96
|
-
export const DEFAULT_DATA_MULTI_GRID: DataMultiGrid = []
|
97
|
-
|
98
|
-
export const DEFAULT_DATA_MULTI_VALUE: DataMultiValue = []
|
99
|
-
|
100
|
-
export const DEFAULT_DATA_TREE: DataTree = []
|
101
|
-
|
102
|
-
export const DEFAULTL_DATA_RELATIONA: DataRelationship = {
|
103
|
-
nodes: [],
|
104
|
-
edges: []
|
105
|
-
}
|
106
|
-
|
107
|
-
// -- Data Formatter --
|
108
|
-
|
109
|
-
export const DEFAULT_DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
|
110
|
-
position: 'left',
|
111
|
-
scaleDomain: ['auto', 'auto'],
|
112
|
-
scaleRange: [0, 0.9],
|
113
|
-
label: '',
|
114
|
-
}
|
115
|
-
|
116
|
-
export const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
|
117
|
-
position: 'bottom',
|
118
|
-
scaleDomain: [0, 'max'],
|
119
|
-
scalePadding: 0.5,
|
120
|
-
label: ''
|
121
|
-
}
|
122
|
-
|
123
|
-
export const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer = {
|
124
|
-
gap: 120,
|
125
|
-
rowAmount: 1,
|
126
|
-
columnAmount: 1
|
127
|
-
}
|
128
|
-
|
129
|
-
export const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries = {
|
130
|
-
type: 'series',
|
131
|
-
visibleFilter: (datum, context) => true,
|
132
|
-
sort: null,
|
133
|
-
seriesLabels: [],
|
134
|
-
container: {
|
135
|
-
...DEFAULT_DATA_FORMATTER_CONTAINER
|
136
|
-
},
|
137
|
-
separateSeries: false,
|
138
|
-
sumSeries: false
|
139
|
-
// mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
|
140
|
-
// const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
|
141
|
-
// ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
|
142
|
-
// : rowIndex
|
143
|
-
// return dataFormatter.seriesLabels[seriesIndex]
|
144
|
-
// },
|
145
|
-
// colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
|
146
|
-
// return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
|
147
|
-
// ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
|
148
|
-
// : chartParams.colors[chartParams.colorScheme].series[
|
149
|
-
// rowIndex % chartParams.colors[chartParams.colorScheme].series.length
|
150
|
-
// ]
|
151
|
-
// },
|
152
|
-
}
|
153
|
-
DEFAULT_DATA_FORMATTER_SERIES.visibleFilter.toString = () => `(datum, context) => true`
|
154
|
-
|
155
|
-
export const DEFAULT_DATA_FORMATTER_GRID_GRID: DataFormatterGridGrid = {
|
156
|
-
seriesDirection: 'row',
|
157
|
-
rowLabels: [],
|
158
|
-
columnLabels: [],
|
159
|
-
valueAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
160
|
-
groupAxis: { ...DEFAULT_DATA_FORMATTER_GROUP_AXIS, },
|
161
|
-
separateSeries: false,
|
162
|
-
// slotIndex: 0,
|
163
|
-
// seriesSlotIndexes: null
|
164
|
-
}
|
165
|
-
|
166
|
-
export const DEFAULT_DATA_FORMATTER_GRID: DataFormatterGrid = {
|
167
|
-
type: 'grid',
|
168
|
-
visibleFilter: (datum, context) => true,
|
169
|
-
// grid: {
|
170
|
-
...DEFAULT_DATA_FORMATTER_GRID_GRID,
|
171
|
-
// },
|
172
|
-
container: {
|
173
|
-
...DEFAULT_DATA_FORMATTER_CONTAINER
|
174
|
-
}
|
175
|
-
}
|
176
|
-
DEFAULT_DATA_FORMATTER_GRID.visibleFilter.toString = () => `(datum, context) => true`
|
177
|
-
|
178
|
-
// export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
|
179
|
-
// ...DEFAULT_DATA_FORMATTER_GRID,
|
180
|
-
// slotIndex: 0,
|
181
|
-
// seriesSlotIndexes: null
|
182
|
-
// }
|
183
|
-
|
184
|
-
export const DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID: DataFormatterMultiGridGrid = {
|
185
|
-
...DEFAULT_DATA_FORMATTER_GRID_GRID
|
186
|
-
}
|
187
|
-
|
188
|
-
export const DEFAULT_DATA_FORMATTER_MULTI_GRID: DataFormatterMultiGrid = {
|
189
|
-
type: 'multiGrid',
|
190
|
-
visibleFilter: (datum, context) => true,
|
191
|
-
gridList: [
|
192
|
-
{
|
193
|
-
...DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
|
194
|
-
},
|
195
|
-
],
|
196
|
-
separateGrid: false,
|
197
|
-
container: {
|
198
|
-
...DEFAULT_DATA_FORMATTER_CONTAINER
|
199
|
-
}
|
200
|
-
}
|
201
|
-
DEFAULT_DATA_FORMATTER_MULTI_GRID.visibleFilter.toString = () => `(datum, context) => true`
|
202
|
-
|
203
|
-
export const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue = {
|
204
|
-
type: 'multiValue',
|
205
|
-
visibleFilter: (datum, context) => true,
|
206
|
-
categoryLabels: [],
|
207
|
-
xAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
208
|
-
yAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
209
|
-
container: {
|
210
|
-
...DEFAULT_DATA_FORMATTER_CONTAINER
|
211
|
-
},
|
212
|
-
separateCategory: false
|
213
|
-
}
|
214
|
-
DEFAULT_DATA_FORMATTER_MULTI_VALUE.visibleFilter.toString = () => `(datum, context) => true`
|
215
|
-
|
216
|
-
export const DEFAULT_DATA_FORMATTER_TREE: DataFormatterTree = {
|
217
|
-
type: 'tree',
|
218
|
-
visibleFilter: (datum, context) => true,
|
219
|
-
// labelFormat: (datum: any) => (datum && datum.label) ?? '',
|
220
|
-
categoryLabels: []
|
221
|
-
}
|
222
|
-
DEFAULT_DATA_FORMATTER_TREE.visibleFilter.toString = () => `(datum, context) => true`
|
223
|
-
|
224
|
-
export const DEFAULT_DATA_FORMATTER_RELATIONSHIP: DataFormatterRelationship = {
|
225
|
-
type: 'relationship',
|
226
|
-
visibleFilter: (datum, context) => true,
|
227
|
-
categoryLabels: []
|
228
|
-
// node: {
|
229
|
-
// // labelFormat: (node: any) => (node && node.label) ?? '',
|
230
|
-
// descriptionFormat: (node: any) => (node && node.label) ?? ''
|
231
|
-
// },
|
232
|
-
// edge: {
|
233
|
-
// // labelFormat: (edge: any) => (edge && edge.label) ?? '',
|
234
|
-
// descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
|
235
|
-
// },
|
236
|
-
}
|
237
|
-
DEFAULT_DATA_FORMATTER_RELATIONSHIP.visibleFilter.toString = () => `(datum, context) => true`
|
238
|
-
|
1
|
+
import type {
|
2
|
+
ChartOptionsPartial,
|
3
|
+
DataSeries,
|
4
|
+
DataGrid,
|
5
|
+
DataMultiGrid,
|
6
|
+
DataMultiValue,
|
7
|
+
DataTree,
|
8
|
+
DataRelationship,
|
9
|
+
DataFormatterValueAxis,
|
10
|
+
DataFormatterGroupAxis,
|
11
|
+
DataFormatterContainer,
|
12
|
+
DataFormatterSeries,
|
13
|
+
DataFormatterGrid,
|
14
|
+
DataFormatterGridGrid,
|
15
|
+
DataFormatterMultiGrid,
|
16
|
+
DataFormatterMultiGridGrid,
|
17
|
+
DataFormatterMultiValue,
|
18
|
+
DataFormatterTree,
|
19
|
+
DataFormatterRelationship,
|
20
|
+
ChartParams,
|
21
|
+
Padding
|
22
|
+
} from '../lib/core-types'
|
23
|
+
|
24
|
+
export const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any> = {
|
25
|
+
// preset: {} // 預設為空
|
26
|
+
width: 'auto',
|
27
|
+
height: 'auto'
|
28
|
+
}
|
29
|
+
|
30
|
+
// export const GLOBAL_DEFAULT: ChartGlobalDefault = {
|
31
|
+
// colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
|
32
|
+
// padding: {
|
33
|
+
// top: 50,
|
34
|
+
// right: 70,
|
35
|
+
// bottom: 50,
|
36
|
+
// left: 70
|
37
|
+
// },
|
38
|
+
// // chartWidth: '100%',
|
39
|
+
// // chartHeight: 500
|
40
|
+
// }
|
41
|
+
|
42
|
+
// export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
|
43
|
+
// ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
|
44
|
+
|
45
|
+
export const DEFAULT_PADDING: Padding = {
|
46
|
+
top: 60,
|
47
|
+
right: 60,
|
48
|
+
bottom: 60,
|
49
|
+
left: 60
|
50
|
+
}
|
51
|
+
|
52
|
+
export const DEFAULT_CHART_PARAMS: ChartParams = {
|
53
|
+
padding: DEFAULT_PADDING,
|
54
|
+
highlightTarget: 'datum',
|
55
|
+
highlightDefault: null,
|
56
|
+
colorScheme: 'light',
|
57
|
+
colors: {
|
58
|
+
light: {
|
59
|
+
label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
|
60
|
+
// label: ['#F3A356', '#7A60F0', '#38B1AF', '#60A2F0', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
61
|
+
// label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
62
|
+
// primary: '#454545',
|
63
|
+
primary: '#1b1e23',
|
64
|
+
secondary: '#e1e1e1',
|
65
|
+
white: '#ffffff',
|
66
|
+
background: '#ffffff'
|
67
|
+
},
|
68
|
+
dark: {
|
69
|
+
label: ['#67B7DC', '#6794DC', '#38B1AF', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
|
70
|
+
// label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
|
71
|
+
primary: '#f0f0f0',
|
72
|
+
secondary: '#e1e1e1',
|
73
|
+
white: '#ffffff',
|
74
|
+
background: '#000000'
|
75
|
+
}
|
76
|
+
},
|
77
|
+
styles: {
|
78
|
+
// textSize: 14,
|
79
|
+
textSize: '0.875rem',
|
80
|
+
unhighlightedOpacity: 0.3
|
81
|
+
},
|
82
|
+
transitionDuration: 800,
|
83
|
+
transitionEase: 'easeCubic'
|
84
|
+
}
|
85
|
+
|
86
|
+
export const DEFAULT_CHART_WIDTH = 800
|
87
|
+
|
88
|
+
export const DEFAULT_CHART_HEIGHT = 500
|
89
|
+
|
90
|
+
// -- Data --
|
91
|
+
|
92
|
+
export const DEFAULT_DATA_SERIES: DataSeries = []
|
93
|
+
|
94
|
+
export const DEFAULT_DATA_GRID: DataGrid = []
|
95
|
+
|
96
|
+
export const DEFAULT_DATA_MULTI_GRID: DataMultiGrid = []
|
97
|
+
|
98
|
+
export const DEFAULT_DATA_MULTI_VALUE: DataMultiValue = []
|
99
|
+
|
100
|
+
export const DEFAULT_DATA_TREE: DataTree = []
|
101
|
+
|
102
|
+
export const DEFAULTL_DATA_RELATIONA: DataRelationship = {
|
103
|
+
nodes: [],
|
104
|
+
edges: []
|
105
|
+
}
|
106
|
+
|
107
|
+
// -- Data Formatter --
|
108
|
+
|
109
|
+
export const DEFAULT_DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
|
110
|
+
position: 'left',
|
111
|
+
scaleDomain: ['auto', 'auto'],
|
112
|
+
scaleRange: [0, 0.9],
|
113
|
+
label: '',
|
114
|
+
}
|
115
|
+
|
116
|
+
export const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
|
117
|
+
position: 'bottom',
|
118
|
+
scaleDomain: [0, 'max'],
|
119
|
+
scalePadding: 0.5,
|
120
|
+
label: ''
|
121
|
+
}
|
122
|
+
|
123
|
+
export const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer = {
|
124
|
+
gap: 120,
|
125
|
+
rowAmount: 1,
|
126
|
+
columnAmount: 1
|
127
|
+
}
|
128
|
+
|
129
|
+
export const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries = {
|
130
|
+
type: 'series',
|
131
|
+
visibleFilter: (datum, context) => true,
|
132
|
+
sort: null,
|
133
|
+
seriesLabels: [],
|
134
|
+
container: {
|
135
|
+
...DEFAULT_DATA_FORMATTER_CONTAINER
|
136
|
+
},
|
137
|
+
separateSeries: false,
|
138
|
+
sumSeries: false
|
139
|
+
// mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
|
140
|
+
// const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
|
141
|
+
// ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
|
142
|
+
// : rowIndex
|
143
|
+
// return dataFormatter.seriesLabels[seriesIndex]
|
144
|
+
// },
|
145
|
+
// colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
|
146
|
+
// return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
|
147
|
+
// ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
|
148
|
+
// : chartParams.colors[chartParams.colorScheme].series[
|
149
|
+
// rowIndex % chartParams.colors[chartParams.colorScheme].series.length
|
150
|
+
// ]
|
151
|
+
// },
|
152
|
+
}
|
153
|
+
DEFAULT_DATA_FORMATTER_SERIES.visibleFilter.toString = () => `(datum, context) => true`
|
154
|
+
|
155
|
+
export const DEFAULT_DATA_FORMATTER_GRID_GRID: DataFormatterGridGrid = {
|
156
|
+
seriesDirection: 'row',
|
157
|
+
rowLabels: [],
|
158
|
+
columnLabels: [],
|
159
|
+
valueAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
160
|
+
groupAxis: { ...DEFAULT_DATA_FORMATTER_GROUP_AXIS, },
|
161
|
+
separateSeries: false,
|
162
|
+
// slotIndex: 0,
|
163
|
+
// seriesSlotIndexes: null
|
164
|
+
}
|
165
|
+
|
166
|
+
export const DEFAULT_DATA_FORMATTER_GRID: DataFormatterGrid = {
|
167
|
+
type: 'grid',
|
168
|
+
visibleFilter: (datum, context) => true,
|
169
|
+
// grid: {
|
170
|
+
...DEFAULT_DATA_FORMATTER_GRID_GRID,
|
171
|
+
// },
|
172
|
+
container: {
|
173
|
+
...DEFAULT_DATA_FORMATTER_CONTAINER
|
174
|
+
}
|
175
|
+
}
|
176
|
+
DEFAULT_DATA_FORMATTER_GRID.visibleFilter.toString = () => `(datum, context) => true`
|
177
|
+
|
178
|
+
// export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
|
179
|
+
// ...DEFAULT_DATA_FORMATTER_GRID,
|
180
|
+
// slotIndex: 0,
|
181
|
+
// seriesSlotIndexes: null
|
182
|
+
// }
|
183
|
+
|
184
|
+
export const DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID: DataFormatterMultiGridGrid = {
|
185
|
+
...DEFAULT_DATA_FORMATTER_GRID_GRID
|
186
|
+
}
|
187
|
+
|
188
|
+
export const DEFAULT_DATA_FORMATTER_MULTI_GRID: DataFormatterMultiGrid = {
|
189
|
+
type: 'multiGrid',
|
190
|
+
visibleFilter: (datum, context) => true,
|
191
|
+
gridList: [
|
192
|
+
{
|
193
|
+
...DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
|
194
|
+
},
|
195
|
+
],
|
196
|
+
separateGrid: false,
|
197
|
+
container: {
|
198
|
+
...DEFAULT_DATA_FORMATTER_CONTAINER
|
199
|
+
}
|
200
|
+
}
|
201
|
+
DEFAULT_DATA_FORMATTER_MULTI_GRID.visibleFilter.toString = () => `(datum, context) => true`
|
202
|
+
|
203
|
+
export const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue = {
|
204
|
+
type: 'multiValue',
|
205
|
+
visibleFilter: (datum, context) => true,
|
206
|
+
categoryLabels: [],
|
207
|
+
xAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
208
|
+
yAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
|
209
|
+
container: {
|
210
|
+
...DEFAULT_DATA_FORMATTER_CONTAINER
|
211
|
+
},
|
212
|
+
separateCategory: false
|
213
|
+
}
|
214
|
+
DEFAULT_DATA_FORMATTER_MULTI_VALUE.visibleFilter.toString = () => `(datum, context) => true`
|
215
|
+
|
216
|
+
export const DEFAULT_DATA_FORMATTER_TREE: DataFormatterTree = {
|
217
|
+
type: 'tree',
|
218
|
+
visibleFilter: (datum, context) => true,
|
219
|
+
// labelFormat: (datum: any) => (datum && datum.label) ?? '',
|
220
|
+
categoryLabels: []
|
221
|
+
}
|
222
|
+
DEFAULT_DATA_FORMATTER_TREE.visibleFilter.toString = () => `(datum, context) => true`
|
223
|
+
|
224
|
+
export const DEFAULT_DATA_FORMATTER_RELATIONSHIP: DataFormatterRelationship = {
|
225
|
+
type: 'relationship',
|
226
|
+
visibleFilter: (datum, context) => true,
|
227
|
+
categoryLabels: []
|
228
|
+
// node: {
|
229
|
+
// // labelFormat: (node: any) => (node && node.label) ?? '',
|
230
|
+
// descriptionFormat: (node: any) => (node && node.label) ?? ''
|
231
|
+
// },
|
232
|
+
// edge: {
|
233
|
+
// // labelFormat: (edge: any) => (edge && edge.label) ?? '',
|
234
|
+
// descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
|
235
|
+
// },
|
236
|
+
}
|
237
|
+
DEFAULT_DATA_FORMATTER_RELATIONSHIP.visibleFilter.toString = () => `(datum, context) => true`
|
238
|
+
|
package/src/defineGridPlugin.ts
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineGridPlugin = createBasePlugin('grid')
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineGridPlugin = createBasePlugin('grid')
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
-
|
3
|
-
export const defineMultiGridPlugin = createBasePlugin('multiGrid')
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
export const defineMultiGridPlugin = createBasePlugin('multiGrid')
|
@@ -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
|
-
|
3
|
-
// chartType型別使用 'any' 是為了讓 plugin entity 能夠被加入到所有類別的 chart.plugins$ 中
|
4
|
-
export const defineNoneDataPlugin = createBasePlugin<any>('noneData')
|
1
|
+
import { createBasePlugin } from './base/createBasePlugin'
|
2
|
+
|
3
|
+
// chartType型別使用 'any' 是為了讓 plugin entity 能夠被加入到所有類別的 chart.plugins$ 中
|
4
|
+
export const defineNoneDataPlugin = createBasePlugin<any>('noneData')
|
@@ -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')
|