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

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.
Files changed (85) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-core.es.js +97 -97
  3. package/dist/orbcharts-core.umd.js +2 -2
  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 +368 -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'>()