@orbcharts/core 3.0.0-alpha.43 → 3.0.0-alpha.44

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-core.es.js +5 -5
  3. package/dist/orbcharts-core.umd.js +1 -1
  4. package/dist/src/series/seriesObservables.d.ts +3 -3
  5. package/dist/src/types/ContextObserverSeries.d.ts +1 -1
  6. package/dist/src/types/DataFormatterSeries.d.ts +3 -3
  7. package/package.json +41 -41
  8. package/src/AbstractChart.ts +48 -48
  9. package/src/GridChart.ts +20 -20
  10. package/src/MultiGridChart.ts +20 -20
  11. package/src/MultiValueChart.ts +20 -20
  12. package/src/RelationshipChart.ts +20 -20
  13. package/src/SeriesChart.ts +20 -20
  14. package/src/TreeChart.ts +20 -20
  15. package/src/base/createBaseChart.ts +367 -367
  16. package/src/base/createBasePlugin.ts +89 -89
  17. package/src/defaults.ts +220 -220
  18. package/src/defineGridPlugin.ts +3 -3
  19. package/src/defineMultiGridPlugin.ts +3 -3
  20. package/src/defineMultiValuePlugin.ts +3 -3
  21. package/src/defineNoneDataPlugin.ts +4 -4
  22. package/src/defineRelationshipPlugin.ts +3 -3
  23. package/src/defineSeriesPlugin.ts +3 -3
  24. package/src/defineTreePlugin.ts +3 -3
  25. package/src/grid/computeGridData.ts +134 -134
  26. package/src/grid/createGridContextObserver.ts +147 -147
  27. package/src/grid/gridObservables.ts +573 -573
  28. package/src/index.ts +21 -21
  29. package/src/multiGrid/computeMultiGridData.ts +130 -130
  30. package/src/multiGrid/createMultiGridContextObserver.ts +40 -40
  31. package/src/multiGrid/multiGridObservables.ts +350 -350
  32. package/src/multiValue/computeMultiValueData.ts +143 -143
  33. package/src/multiValue/createMultiValueContextObserver.ts +12 -12
  34. package/src/relationship/computeRelationshipData.ts +118 -118
  35. package/src/relationship/createRelationshipContextObserver.ts +12 -12
  36. package/src/series/computeSeriesData.ts +90 -90
  37. package/src/series/createSeriesContextObserver.ts +93 -93
  38. package/src/series/seriesObservables.ts +175 -175
  39. package/src/tree/computeTreeData.ts +131 -131
  40. package/src/tree/createTreeContextObserver.ts +61 -61
  41. package/src/tree/treeObservables.ts +94 -94
  42. package/src/types/Chart.ts +48 -48
  43. package/src/types/ChartParams.ts +51 -51
  44. package/src/types/ComputedData.ts +83 -83
  45. package/src/types/ComputedDataGrid.ts +13 -13
  46. package/src/types/ComputedDataMultiGrid.ts +2 -2
  47. package/src/types/ComputedDataMultiValue.ts +9 -9
  48. package/src/types/ComputedDataRelationship.ts +19 -19
  49. package/src/types/ComputedDataSeries.ts +7 -7
  50. package/src/types/ComputedDataTree.ts +19 -19
  51. package/src/types/ContextObserver.ts +38 -38
  52. package/src/types/ContextObserverGrid.ts +41 -41
  53. package/src/types/ContextObserverMultiGrid.ts +15 -15
  54. package/src/types/ContextObserverMultiValue.ts +4 -4
  55. package/src/types/ContextObserverRelationship.ts +4 -4
  56. package/src/types/ContextObserverSeries.ts +29 -29
  57. package/src/types/ContextObserverTree.ts +11 -11
  58. package/src/types/ContextSubject.ts +18 -18
  59. package/src/types/Data.ts +45 -45
  60. package/src/types/DataFormatter.ts +74 -74
  61. package/src/types/DataFormatterGrid.ts +67 -67
  62. package/src/types/DataFormatterMultiGrid.ts +44 -44
  63. package/src/types/DataFormatterMultiValue.ts +23 -23
  64. package/src/types/DataFormatterRelationship.ts +25 -25
  65. package/src/types/DataFormatterSeries.ts +20 -20
  66. package/src/types/DataFormatterTree.ts +12 -12
  67. package/src/types/DataGrid.ts +11 -11
  68. package/src/types/DataMultiGrid.ts +6 -6
  69. package/src/types/DataMultiValue.ts +12 -12
  70. package/src/types/DataRelationship.ts +27 -27
  71. package/src/types/DataSeries.ts +11 -11
  72. package/src/types/DataTree.ts +20 -20
  73. package/src/types/Event.ts +153 -153
  74. package/src/types/Layout.ts +11 -11
  75. package/src/types/Padding.ts +5 -5
  76. package/src/types/Plugin.ts +60 -60
  77. package/src/types/TransformData.ts +7 -7
  78. package/src/types/index.ts +37 -37
  79. package/src/utils/commonUtils.ts +50 -50
  80. package/src/utils/d3Utils.ts +89 -89
  81. package/src/utils/index.ts +4 -4
  82. package/src/utils/observables.ts +201 -201
  83. package/src/utils/orbchartsUtils.ts +349 -349
  84. package/tsconfig.json +13 -13
  85. package/vite.config.js +44 -44
@@ -1,89 +1,89 @@
1
- import { takeUntil, map, shareReplay, startWith, Subject, Observable } from 'rxjs'
2
- import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
3
- import { mergeOptionsWithDefault } from '../utils'
4
-
5
- // 建立plugin實例
6
- function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
7
- name: PluginName
8
- defaultParams: PluginParams
9
- initFn: PluginInitFn<T, PluginName, PluginParams>
10
- }) {
11
-
12
- const destroy$ = new Subject()
13
- const params$: Subject<Partial<typeof defaultParams>> = new Subject()
14
- const StoreMap = new WeakMap() // 避免memory leak
15
- let pluginDestroyFn = () => {}
16
- let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
17
- let mergedDefaultParams: PluginParams = defaultParams
18
-
19
- // 建立plugin實例
20
- return {
21
- params$,
22
- name,
23
- defaultParams,
24
- init () {
25
- if (!pluginContext) {
26
- return
27
- }
28
- // 執行
29
- pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
30
- StoreMap.set(pluginContext.selection, pluginContext)
31
- },
32
- destroy () {
33
- pluginDestroyFn()
34
- if (pluginContext) {
35
- pluginContext.selection.remove()
36
- pluginContext = undefined
37
- }
38
- destroy$.next(undefined)
39
- },
40
- setPresetParams: (presetParams: Partial<PluginParams>) => {
41
- mergedDefaultParams = mergeOptionsWithDefault(presetParams, defaultParams)
42
- },
43
- setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
44
- pluginContext = _pluginContext
45
- pluginContext.observer.fullParams$ = params$
46
- .pipe(
47
- takeUntil(destroy$),
48
- startWith({}),
49
- map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
50
- shareReplay(1),
51
- )
52
- }
53
- }
54
- }
55
-
56
- // 建立plugin類別
57
- export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
58
-
59
- // 定義plugin
60
- return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
61
-
62
- // 定義plugin的初始化function
63
- return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
64
-
65
- return class Plugin {
66
- params$: Subject<Partial<PluginParams>>
67
- name: PluginName
68
- defaultParams: PluginParams
69
- // presetParams: Partial<PluginParams>
70
- init: () => void
71
- destroy: () => void
72
- setPresetParams: (presetParams: Partial<PluginParams>) => void
73
- setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
74
- constructor () {
75
- const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
76
-
77
- this.params$ = pluginEntity.params$
78
- this.name = pluginEntity.name
79
- this.defaultParams = pluginEntity.defaultParams
80
- // this.presetParams = pluginEntity.presetParams
81
- this.init = pluginEntity.init
82
- this.destroy = pluginEntity.destroy
83
- this.setPresetParams = pluginEntity.setPresetParams
84
- this.setContext = pluginEntity.setContext
85
- }
86
- }
87
- }
88
- }
89
- }
1
+ import { takeUntil, map, shareReplay, startWith, Subject, Observable } from 'rxjs'
2
+ import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
3
+ import { mergeOptionsWithDefault } from '../utils'
4
+
5
+ // 建立plugin實例
6
+ function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
7
+ name: PluginName
8
+ defaultParams: PluginParams
9
+ initFn: PluginInitFn<T, PluginName, PluginParams>
10
+ }) {
11
+
12
+ const destroy$ = new Subject()
13
+ const params$: Subject<Partial<typeof defaultParams>> = new Subject()
14
+ const StoreMap = new WeakMap() // 避免memory leak
15
+ let pluginDestroyFn = () => {}
16
+ let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
17
+ let mergedDefaultParams: PluginParams = defaultParams
18
+
19
+ // 建立plugin實例
20
+ return {
21
+ params$,
22
+ name,
23
+ defaultParams,
24
+ init () {
25
+ if (!pluginContext) {
26
+ return
27
+ }
28
+ // 執行
29
+ pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
30
+ StoreMap.set(pluginContext.selection, pluginContext)
31
+ },
32
+ destroy () {
33
+ pluginDestroyFn()
34
+ if (pluginContext) {
35
+ pluginContext.selection.remove()
36
+ pluginContext = undefined
37
+ }
38
+ destroy$.next(undefined)
39
+ },
40
+ setPresetParams: (presetParams: Partial<PluginParams>) => {
41
+ mergedDefaultParams = mergeOptionsWithDefault(presetParams, defaultParams)
42
+ },
43
+ setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
44
+ pluginContext = _pluginContext
45
+ pluginContext.observer.fullParams$ = params$
46
+ .pipe(
47
+ takeUntil(destroy$),
48
+ startWith({}),
49
+ map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
50
+ shareReplay(1),
51
+ )
52
+ }
53
+ }
54
+ }
55
+
56
+ // 建立plugin類別
57
+ export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
58
+
59
+ // 定義plugin
60
+ return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
61
+
62
+ // 定義plugin的初始化function
63
+ return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
64
+
65
+ return class Plugin {
66
+ params$: Subject<Partial<PluginParams>>
67
+ name: PluginName
68
+ defaultParams: PluginParams
69
+ // presetParams: Partial<PluginParams>
70
+ init: () => void
71
+ destroy: () => void
72
+ setPresetParams: (presetParams: Partial<PluginParams>) => void
73
+ setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
74
+ constructor () {
75
+ const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
76
+
77
+ this.params$ = pluginEntity.params$
78
+ this.name = pluginEntity.name
79
+ this.defaultParams = pluginEntity.defaultParams
80
+ // this.presetParams = pluginEntity.presetParams
81
+ this.init = pluginEntity.init
82
+ this.destroy = pluginEntity.destroy
83
+ this.setPresetParams = pluginEntity.setPresetParams
84
+ this.setContext = pluginEntity.setContext
85
+ }
86
+ }
87
+ }
88
+ }
89
+ }
package/src/defaults.ts CHANGED
@@ -1,220 +1,220 @@
1
- // import type { ChartGlobalDefault } from './types/Chart'
2
- // import { ChartRenderOptions } from './types/Chart'
3
- import type { ChartType, ChartOptionsPartial } from './types/Chart'
4
- import type { DataSeries } from './types/DataSeries'
5
- import type { DataGrid, DataGridDatum } from './types/DataGrid'
6
- import type { DataMultiGrid } from './types/DataMultiGrid'
7
- import type { DataMultiValue } from './types/DataMultiValue'
8
- import type { DataTree } from './types/DataTree'
9
- import type { DataRelationship } from './types/DataRelationship'
10
- import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContainer } from './types/DataFormatter'
11
- import type { DataFormatterSeries } from './types/DataFormatterSeries'
12
- import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
13
- import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
14
- import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
15
- import type { DataFormatterTree } from './types/DataFormatterTree'
16
- import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
17
- import type { ChartParams } from './types/ChartParams'
18
- import type { Padding } from './types/Padding'
19
-
20
- export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
21
- preset: {} // 預設為空
22
- }
23
-
24
- // export const GLOBAL_DEFAULT: ChartGlobalDefault = {
25
- // colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
26
- // padding: {
27
- // top: 50,
28
- // right: 70,
29
- // bottom: 50,
30
- // left: 70
31
- // },
32
- // // chartWidth: '100%',
33
- // // chartHeight: 500
34
- // }
35
-
36
- // export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
37
- // ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
38
-
39
- export const PADDING_DEFAULT: Padding = {
40
- top: 60,
41
- right: 60,
42
- bottom: 60,
43
- left: 60
44
- }
45
-
46
- export const CHART_PARAMS_DEFAULT: ChartParams = {
47
- padding: PADDING_DEFAULT,
48
- highlightTarget: 'datum',
49
- highlightDefault: null,
50
- colorScheme: 'light',
51
- colors: {
52
- light: {
53
- series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
54
- // primary: '#454545',
55
- primary: '#1b1e23',
56
- secondary: '#e1e1e1',
57
- white: '#ffffff',
58
- background: '#ffffff'
59
- },
60
- dark: {
61
- series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
62
- primary: '#f0f0f0',
63
- secondary: '#e1e1e1',
64
- white: '#ffffff',
65
- background: '#000000'
66
- }
67
- },
68
- styles: {
69
- // textSize: 14,
70
- textSize: '0.875rem',
71
- unhighlightedOpacity: 0.3
72
- },
73
- transitionDuration: 800,
74
- transitionEase: 'easeCubic'
75
- }
76
-
77
- export const CHART_WIDTH_DEFAULT = 800
78
-
79
- export const CHART_HEIGHT_DEFAULT = 500
80
-
81
- // -- Data --
82
-
83
- export const DATA_SERIES_DEFAULT: DataSeries = []
84
-
85
- export const DATA_GRID_DEFAULT: DataGrid = []
86
-
87
- export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
88
-
89
- export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
90
-
91
- export const DATA_TREE_DEFAULT: DataTree = []
92
-
93
- export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
94
- nodes: [],
95
- edges: []
96
- }
97
-
98
- // -- Data Formatter --
99
-
100
- export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
101
- position: 'left',
102
- scaleDomain: [0, 'auto'],
103
- scaleRange: [0, 0.9],
104
- label: '',
105
- }
106
-
107
- export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
108
- position: 'bottom',
109
- scaleDomain: [0, 'auto'],
110
- scalePadding: 0.5,
111
- label: ''
112
- }
113
-
114
- export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
115
- gap: 120,
116
- rowAmount: 1,
117
- columnAmount: 1
118
- }
119
-
120
- export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
121
- type: 'series',
122
- visibleFilter: (datum, context) => true,
123
- sort: null,
124
- seriesLabels: [],
125
- container: {
126
- ...DATA_FORMATTER_CONTAINER_DEFAULT
127
- },
128
- separateSeries: false,
129
- sumSeries: false
130
- // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
131
- // const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
132
- // ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
133
- // : rowIndex
134
- // return dataFormatter.seriesLabels[seriesIndex]
135
- // },
136
- // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
137
- // return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
138
- // ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
139
- // : chartParams.colors[chartParams.colorScheme].series[
140
- // rowIndex % chartParams.colors[chartParams.colorScheme].series.length
141
- // ]
142
- // },
143
- }
144
-
145
- export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
146
- seriesDirection: 'row',
147
- rowLabels: [],
148
- columnLabels: [],
149
- valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
150
- groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
151
- separateSeries: false,
152
- // slotIndex: 0,
153
- // seriesSlotIndexes: null
154
- }
155
-
156
- export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
157
- type: 'grid',
158
- visibleFilter: (datum, context) => true,
159
- grid: {
160
- ...DATA_FORMATTER_GRID_GRID_DEFAULT
161
- },
162
- container: {
163
- ...DATA_FORMATTER_CONTAINER_DEFAULT
164
- }
165
- }
166
-
167
- // export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
168
- // ...DATA_FORMATTER_GRID_DEFAULT,
169
- // slotIndex: 0,
170
- // seriesSlotIndexes: null
171
- // }
172
-
173
- export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
174
- ...DATA_FORMATTER_GRID_GRID_DEFAULT
175
- }
176
-
177
- export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
178
- type: 'multiGrid',
179
- visibleFilter: (datum, context) => true,
180
- gridList: [
181
- {
182
- ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
183
- },
184
- ],
185
- separateGrid: false,
186
- container: {
187
- ...DATA_FORMATTER_CONTAINER_DEFAULT
188
- }
189
- }
190
-
191
- export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
192
- type: 'multiValue',
193
- visibleFilter: (datum, context) => true,
194
- categoryLabels: [],
195
- multiValue: [],
196
- xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
197
- yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
198
- }
199
-
200
- export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
201
- type: 'tree',
202
- visibleFilter: (datum, context) => true,
203
- // labelFormat: (datum: any) => (datum && datum.label) ?? '',
204
- categoryLabels: []
205
- }
206
-
207
- export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
208
- type: 'relationship',
209
- visibleFilter: (datum, context) => true,
210
- categoryLabels: []
211
- // node: {
212
- // // labelFormat: (node: any) => (node && node.label) ?? '',
213
- // descriptionFormat: (node: any) => (node && node.label) ?? ''
214
- // },
215
- // edge: {
216
- // // labelFormat: (edge: any) => (edge && edge.label) ?? '',
217
- // descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
218
- // },
219
- }
220
-
1
+ // import type { ChartGlobalDefault } from './types/Chart'
2
+ // import { ChartRenderOptions } from './types/Chart'
3
+ import type { ChartType, ChartOptionsPartial } from './types/Chart'
4
+ import type { DataSeries } from './types/DataSeries'
5
+ import type { DataGrid, DataGridDatum } from './types/DataGrid'
6
+ import type { DataMultiGrid } from './types/DataMultiGrid'
7
+ import type { DataMultiValue } from './types/DataMultiValue'
8
+ import type { DataTree } from './types/DataTree'
9
+ import type { DataRelationship } from './types/DataRelationship'
10
+ import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContainer } from './types/DataFormatter'
11
+ import type { DataFormatterSeries } from './types/DataFormatterSeries'
12
+ import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
13
+ import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
14
+ import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
15
+ import type { DataFormatterTree } from './types/DataFormatterTree'
16
+ import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
17
+ import type { ChartParams } from './types/ChartParams'
18
+ import type { Padding } from './types/Padding'
19
+
20
+ export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
21
+ preset: {} // 預設為空
22
+ }
23
+
24
+ // export const GLOBAL_DEFAULT: ChartGlobalDefault = {
25
+ // colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
26
+ // padding: {
27
+ // top: 50,
28
+ // right: 70,
29
+ // bottom: 50,
30
+ // left: 70
31
+ // },
32
+ // // chartWidth: '100%',
33
+ // // chartHeight: 500
34
+ // }
35
+
36
+ // export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
37
+ // ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
38
+
39
+ export const PADDING_DEFAULT: Padding = {
40
+ top: 60,
41
+ right: 60,
42
+ bottom: 60,
43
+ left: 60
44
+ }
45
+
46
+ export const CHART_PARAMS_DEFAULT: ChartParams = {
47
+ padding: PADDING_DEFAULT,
48
+ highlightTarget: 'datum',
49
+ highlightDefault: null,
50
+ colorScheme: 'light',
51
+ colors: {
52
+ light: {
53
+ series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
54
+ // primary: '#454545',
55
+ primary: '#1b1e23',
56
+ secondary: '#e1e1e1',
57
+ white: '#ffffff',
58
+ background: '#ffffff'
59
+ },
60
+ dark: {
61
+ series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
62
+ primary: '#f0f0f0',
63
+ secondary: '#e1e1e1',
64
+ white: '#ffffff',
65
+ background: '#000000'
66
+ }
67
+ },
68
+ styles: {
69
+ // textSize: 14,
70
+ textSize: '0.875rem',
71
+ unhighlightedOpacity: 0.3
72
+ },
73
+ transitionDuration: 800,
74
+ transitionEase: 'easeCubic'
75
+ }
76
+
77
+ export const CHART_WIDTH_DEFAULT = 800
78
+
79
+ export const CHART_HEIGHT_DEFAULT = 500
80
+
81
+ // -- Data --
82
+
83
+ export const DATA_SERIES_DEFAULT: DataSeries = []
84
+
85
+ export const DATA_GRID_DEFAULT: DataGrid = []
86
+
87
+ export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
88
+
89
+ export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
90
+
91
+ export const DATA_TREE_DEFAULT: DataTree = []
92
+
93
+ export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
94
+ nodes: [],
95
+ edges: []
96
+ }
97
+
98
+ // -- Data Formatter --
99
+
100
+ export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
101
+ position: 'left',
102
+ scaleDomain: [0, 'auto'],
103
+ scaleRange: [0, 0.9],
104
+ label: '',
105
+ }
106
+
107
+ export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
108
+ position: 'bottom',
109
+ scaleDomain: [0, 'auto'],
110
+ scalePadding: 0.5,
111
+ label: ''
112
+ }
113
+
114
+ export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
115
+ gap: 120,
116
+ rowAmount: 1,
117
+ columnAmount: 1
118
+ }
119
+
120
+ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
121
+ type: 'series',
122
+ visibleFilter: (datum, context) => true,
123
+ sort: null,
124
+ seriesLabels: [],
125
+ container: {
126
+ ...DATA_FORMATTER_CONTAINER_DEFAULT
127
+ },
128
+ separateSeries: false,
129
+ sumSeries: false
130
+ // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
131
+ // const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
132
+ // ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
133
+ // : rowIndex
134
+ // return dataFormatter.seriesLabels[seriesIndex]
135
+ // },
136
+ // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
137
+ // return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
138
+ // ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
139
+ // : chartParams.colors[chartParams.colorScheme].series[
140
+ // rowIndex % chartParams.colors[chartParams.colorScheme].series.length
141
+ // ]
142
+ // },
143
+ }
144
+
145
+ export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
146
+ seriesDirection: 'row',
147
+ rowLabels: [],
148
+ columnLabels: [],
149
+ valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
150
+ groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
151
+ separateSeries: false,
152
+ // slotIndex: 0,
153
+ // seriesSlotIndexes: null
154
+ }
155
+
156
+ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
157
+ type: 'grid',
158
+ visibleFilter: (datum, context) => true,
159
+ grid: {
160
+ ...DATA_FORMATTER_GRID_GRID_DEFAULT
161
+ },
162
+ container: {
163
+ ...DATA_FORMATTER_CONTAINER_DEFAULT
164
+ }
165
+ }
166
+
167
+ // export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
168
+ // ...DATA_FORMATTER_GRID_DEFAULT,
169
+ // slotIndex: 0,
170
+ // seriesSlotIndexes: null
171
+ // }
172
+
173
+ export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
174
+ ...DATA_FORMATTER_GRID_GRID_DEFAULT
175
+ }
176
+
177
+ export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
178
+ type: 'multiGrid',
179
+ visibleFilter: (datum, context) => true,
180
+ gridList: [
181
+ {
182
+ ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
183
+ },
184
+ ],
185
+ separateGrid: false,
186
+ container: {
187
+ ...DATA_FORMATTER_CONTAINER_DEFAULT
188
+ }
189
+ }
190
+
191
+ export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
192
+ type: 'multiValue',
193
+ visibleFilter: (datum, context) => true,
194
+ categoryLabels: [],
195
+ multiValue: [],
196
+ xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
197
+ yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
198
+ }
199
+
200
+ export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
201
+ type: 'tree',
202
+ visibleFilter: (datum, context) => true,
203
+ // labelFormat: (datum: any) => (datum && datum.label) ?? '',
204
+ categoryLabels: []
205
+ }
206
+
207
+ export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
208
+ type: 'relationship',
209
+ visibleFilter: (datum, context) => true,
210
+ categoryLabels: []
211
+ // node: {
212
+ // // labelFormat: (node: any) => (node && node.label) ?? '',
213
+ // descriptionFormat: (node: any) => (node && node.label) ?? ''
214
+ // },
215
+ // edge: {
216
+ // // labelFormat: (edge: any) => (edge && edge.label) ?? '',
217
+ // descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
218
+ // },
219
+ }
220
+
@@ -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
- 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'>()