@easy-editor/materials-dashboard-line-chart 0.0.2 → 0.0.4

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/src/configure.ts CHANGED
@@ -1,349 +1,170 @@
1
- /**
2
- * Line Chart Configure
3
- * 折线图组件配置
4
- */
5
-
6
- import type { Configure } from '@easy-editor/core'
7
-
8
- export const configure: Configure = {
9
- props: [
10
- {
11
- type: 'group',
12
- title: '属性',
13
- setter: 'TabSetter',
14
- items: [
15
- {
16
- type: 'group',
17
- key: 'config',
18
- title: '配置',
19
- setter: {
20
- componentName: 'CollapseSetter',
21
- props: {
22
- icon: false,
23
- },
24
- },
25
- items: [
26
- // 基础配置
27
- {
28
- name: 'id',
29
- title: 'ID',
30
- setter: 'NodeIdSetter',
31
- extraProps: {
32
- // @ts-expect-error label is not a valid extra prop
33
- label: false,
34
- },
35
- },
36
- {
37
- name: 'title',
38
- title: '标题',
39
- setter: 'StringSetter',
40
- extraProps: {
41
- getValue(target) {
42
- return target.getExtraPropValue('title')
43
- },
44
- setValue(target, value) {
45
- target.setExtraPropValue('title', value)
46
- },
47
- },
48
- },
49
- {
50
- type: 'group',
51
- title: '基础属性',
52
- setter: {
53
- componentName: 'CollapseSetter',
54
- props: {
55
- icon: false,
56
- },
57
- },
58
- items: [
59
- {
60
- name: 'rect',
61
- title: '位置尺寸',
62
- setter: 'RectSetter',
63
- extraProps: {
64
- getValue(target) {
65
- return target.getExtraPropValue('$dashboard.rect')
66
- },
67
- setValue(target, value) {
68
- target.setExtraPropValue('$dashboard.rect', value)
69
- },
70
- },
71
- },
72
- ],
73
- },
74
- // 组件配置
75
- {
76
- type: 'group',
77
- title: '数据',
78
- setter: {
79
- componentName: 'CollapseSetter',
80
- props: {
81
- icon: false,
82
- },
83
- },
84
- items: [
85
- {
86
- name: 'data',
87
- title: '数据',
88
- setter: 'JsonSetter',
89
- },
90
- {
91
- name: 'xField',
92
- title: 'X轴字段',
93
- setter: 'StringSetter',
94
- extraProps: {
95
- defaultValue: 'name',
96
- },
97
- },
98
- {
99
- name: 'yFields',
100
- title: 'Y轴字段',
101
- setter: {
102
- componentName: 'ArraySetter',
103
- props: {
104
- itemSetter: 'StringSetter',
105
- },
106
- },
107
- },
108
- ],
109
- },
110
- {
111
- type: 'group',
112
- title: '坐标轴',
113
- setter: {
114
- componentName: 'CollapseSetter',
115
- props: {
116
- icon: false,
117
- },
118
- },
119
- items: [
120
- {
121
- name: 'xAxisLabel',
122
- title: 'X轴标签',
123
- setter: 'StringSetter',
124
- },
125
- {
126
- name: 'yAxisLabel',
127
- title: 'Y轴标签',
128
- setter: 'StringSetter',
129
- },
130
- {
131
- name: 'xAxisVisible',
132
- title: '显示X轴',
133
- setter: 'SwitchSetter',
134
- extraProps: {
135
- defaultValue: true,
136
- },
137
- },
138
- {
139
- name: 'yAxisVisible',
140
- title: '显示Y轴',
141
- setter: 'SwitchSetter',
142
- extraProps: {
143
- defaultValue: true,
144
- },
145
- },
146
- {
147
- name: 'axisLabelRotate',
148
- title: '标签旋转',
149
- setter: {
150
- componentName: 'SliderSetter',
151
- props: {
152
- min: -90,
153
- max: 90,
154
- step: 15,
155
- suffix: '°',
156
- },
157
- },
158
- extraProps: {
159
- defaultValue: 0,
160
- },
161
- },
162
- ],
163
- },
164
- {
165
- type: 'group',
166
- title: '数值格式',
167
- setter: {
168
- componentName: 'CollapseSetter',
169
- props: {
170
- icon: false,
171
- },
172
- },
173
- items: [
174
- {
175
- name: 'valuePrefix',
176
- title: '前缀',
177
- setter: 'StringSetter',
178
- },
179
- {
180
- name: 'valueSuffix',
181
- title: '后缀',
182
- setter: 'StringSetter',
183
- },
184
- {
185
- name: 'valueDecimals',
186
- title: '小数位数',
187
- setter: {
188
- componentName: 'NumberSetter',
189
- props: {
190
- suffix: '位',
191
- },
192
- },
193
- extraProps: {
194
- defaultValue: 0,
195
- },
196
- },
197
- {
198
- name: 'valueSeparator',
199
- title: '千分位分隔',
200
- setter: 'SwitchSetter',
201
- extraProps: {
202
- defaultValue: false,
203
- },
204
- },
205
- ],
206
- },
207
- {
208
- type: 'group',
209
- title: '样式',
210
- setter: {
211
- componentName: 'CollapseSetter',
212
- props: {
213
- icon: false,
214
- },
215
- },
216
- items: [
217
- {
218
- name: 'colors',
219
- title: '颜色',
220
- setter: {
221
- componentName: 'ArraySetter',
222
- props: {
223
- itemSetter: 'ColorSetter',
224
- },
225
- },
226
- },
227
- {
228
- name: 'strokeWidth',
229
- title: '线条宽度',
230
- setter: {
231
- componentName: 'SliderSetter',
232
- props: {
233
- min: 1,
234
- max: 10,
235
- step: 1,
236
- suffix: 'px',
237
- },
238
- },
239
- extraProps: {
240
- defaultValue: 2,
241
- },
242
- },
243
- {
244
- name: 'smooth',
245
- title: '平滑曲线',
246
- setter: 'SwitchSetter',
247
- extraProps: {
248
- defaultValue: true,
249
- },
250
- },
251
- {
252
- name: 'areaFill',
253
- title: '区域填充',
254
- setter: 'SwitchSetter',
255
- extraProps: {
256
- defaultValue: false,
257
- },
258
- },
259
- {
260
- name: 'showGrid',
261
- title: '显示网格',
262
- setter: 'SwitchSetter',
263
- extraProps: {
264
- defaultValue: true,
265
- },
266
- },
267
- {
268
- name: 'showLegend',
269
- title: '显示图例',
270
- setter: 'SwitchSetter',
271
- extraProps: {
272
- defaultValue: true,
273
- },
274
- },
275
- {
276
- name: 'legendPosition',
277
- title: '图例位置',
278
- setter: {
279
- componentName: 'SelectSetter',
280
- props: {
281
- options: [
282
- { label: '顶部', value: 'top' },
283
- { label: '底部', value: 'bottom' },
284
- { label: '左侧', value: 'left' },
285
- { label: '右侧', value: 'right' },
286
- ],
287
- },
288
- },
289
- extraProps: {
290
- defaultValue: 'bottom',
291
- },
292
- },
293
- {
294
- name: 'showTooltip',
295
- title: '显示提示',
296
- setter: 'SwitchSetter',
297
- extraProps: {
298
- defaultValue: true,
299
- },
300
- },
301
- {
302
- name: 'glowEffect',
303
- title: '发光效果',
304
- setter: 'SwitchSetter',
305
- extraProps: {
306
- defaultValue: true,
307
- },
308
- },
309
- ],
310
- },
311
- ],
312
- },
313
- {
314
- type: 'group',
315
- key: 'data',
316
- title: '数据',
317
- items: [
318
- {
319
- name: 'dataBinding',
320
- title: '数据绑定',
321
- setter: 'DataBindingSetter',
322
- },
323
- ],
324
- },
325
- {
326
- type: 'group',
327
- key: 'advanced',
328
- title: '高级',
329
- items: [
330
- {
331
- name: 'condition',
332
- title: '显隐控制',
333
- setter: 'SwitchSetter',
334
- extraProps: {
335
- defaultValue: true,
336
- supportVariable: true,
337
- },
338
- },
339
- ],
340
- },
341
- ],
342
- },
343
- ],
344
- component: {},
345
- supports: {},
346
- advanced: {},
347
- }
348
-
349
- export default configure
1
+ /**
2
+ * Line Chart Configure
3
+ * 折线图组件配置
4
+ */
5
+
6
+ import type { FieldConfig } from '@easy-editor/core'
7
+ import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
8
+
9
+ /** 组件配置 */
10
+ const componentConfigGroup: FieldConfig = createCollapseGroup(
11
+ '组件配置',
12
+ [
13
+ {
14
+ type: 'group',
15
+ title: '组件配置',
16
+ setter: 'SubTabSetter',
17
+ items: [
18
+ // 数据 Tab
19
+ {
20
+ type: 'group',
21
+ key: 'chartData',
22
+ title: '数据',
23
+ items: [
24
+ {
25
+ name: 'xField',
26
+ title: 'X轴字段',
27
+ setter: 'StringSetter',
28
+ extraProps: {
29
+ defaultValue: 'name',
30
+ },
31
+ },
32
+ {
33
+ name: 'yFields',
34
+ title: 'Y轴字段',
35
+ setter: {
36
+ componentName: 'ArraySetter',
37
+ props: {
38
+ itemSetter: 'StringSetter',
39
+ },
40
+ },
41
+ extraProps: {
42
+ defaultValue: ['value1', 'value2'],
43
+ },
44
+ },
45
+ ],
46
+ },
47
+ // 样式 Tab
48
+ {
49
+ type: 'group',
50
+ key: 'style',
51
+ title: '样式',
52
+ items: [
53
+ {
54
+ name: 'colors',
55
+ title: '颜色',
56
+ setter: {
57
+ componentName: 'ArraySetter',
58
+ props: {
59
+ itemSetter: 'ColorSetter',
60
+ },
61
+ },
62
+ },
63
+ {
64
+ name: 'strokeWidth',
65
+ title: '线条宽度',
66
+ setter: {
67
+ componentName: 'SliderSetter',
68
+ props: {
69
+ min: 1,
70
+ max: 10,
71
+ step: 1,
72
+ suffix: 'px',
73
+ },
74
+ },
75
+ extraProps: {
76
+ defaultValue: 2,
77
+ },
78
+ },
79
+ {
80
+ name: 'smooth',
81
+ title: '平滑曲线',
82
+ setter: 'SwitchSetter',
83
+ extraProps: {
84
+ defaultValue: true,
85
+ },
86
+ },
87
+ {
88
+ name: 'areaFill',
89
+ title: '区域填充',
90
+ setter: 'SwitchSetter',
91
+ extraProps: {
92
+ defaultValue: false,
93
+ },
94
+ },
95
+ {
96
+ name: 'glowEffect',
97
+ title: '发光效果',
98
+ setter: 'SwitchSetter',
99
+ extraProps: {
100
+ defaultValue: true,
101
+ },
102
+ },
103
+ ],
104
+ },
105
+ // 图例 Tab
106
+ {
107
+ type: 'group',
108
+ key: 'legend',
109
+ title: '图例',
110
+ items: [
111
+ {
112
+ name: 'showGrid',
113
+ title: '显示网格',
114
+ setter: 'SwitchSetter',
115
+ extraProps: {
116
+ defaultValue: true,
117
+ },
118
+ },
119
+ {
120
+ name: 'showLegend',
121
+ title: '显示图例',
122
+ setter: 'SwitchSetter',
123
+ extraProps: {
124
+ defaultValue: true,
125
+ },
126
+ },
127
+ {
128
+ name: 'legendPosition',
129
+ title: '图例位置',
130
+ setter: {
131
+ componentName: 'SelectSetter',
132
+ props: {
133
+ options: [
134
+ { label: '顶部', value: 'top' },
135
+ { label: '底部', value: 'bottom' },
136
+ { label: '左侧', value: 'left' },
137
+ { label: '右侧', value: 'right' },
138
+ ],
139
+ },
140
+ },
141
+ extraProps: {
142
+ defaultValue: 'bottom',
143
+ },
144
+ },
145
+ {
146
+ name: 'showTooltip',
147
+ title: '显示提示',
148
+ setter: 'SwitchSetter',
149
+ extraProps: {
150
+ defaultValue: true,
151
+ },
152
+ },
153
+ ],
154
+ },
155
+ ],
156
+ },
157
+ ],
158
+ {
159
+ padding: '6px 16px 12px',
160
+ },
161
+ )
162
+
163
+ /** 数据配置 */
164
+ const dataConfigGroup: FieldConfig = createDataConfigGroup([
165
+ { name: 'name', label: 'name', type: 'string', required: true, description: '类目名称' },
166
+ { name: 'value1', label: 'value1', type: 'number', required: true, description: '数值1' },
167
+ { name: 'value2', label: 'value2', type: 'number', required: false, description: '数值2' },
168
+ ])
169
+
170
+ export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)
package/src/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * LineChart Entry
3
- * 折线图组件入口
4
- */
5
-
6
- export { default as component } from './component'
7
- export { default as meta } from './meta'
1
+ /**
2
+ * LineChart Entry
3
+ * 折线图组件入口
4
+ */
5
+
6
+ export { LineChart as component } from './component'
7
+ export { meta } from './meta'
package/src/meta.ts CHANGED
@@ -1,23 +1,23 @@
1
- import type { ComponentMetadata } from '@easy-editor/core'
2
- import { MaterialGroup } from '@easy-editor/materials-shared'
3
- import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
4
- import configure from './configure'
5
- import snippets from './snippets'
6
- import pkg from '../package.json'
7
-
8
- const meta: ComponentMetadata = {
9
- componentName: COMPONENT_NAME,
10
- title: '折线图',
11
- group: MaterialGroup.CHART,
12
- devMode: 'proCode',
13
- npm: {
14
- package: PACKAGE_NAME,
15
- version: pkg.version,
16
- globalName: COMPONENT_NAME,
17
- componentName: COMPONENT_NAME,
18
- },
19
- snippets,
20
- configure,
21
- }
22
-
23
- export default meta
1
+ import type { ComponentMetadata } from '@easy-editor/core'
2
+ import { MaterialGroup } from '@easy-editor/materials-shared'
3
+ import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
4
+ import { configure } from './configure'
5
+ import { snippets } from './snippets'
6
+ import pkg from '../package.json'
7
+
8
+ const meta: ComponentMetadata = {
9
+ componentName: COMPONENT_NAME,
10
+ title: '折线图',
11
+ group: MaterialGroup.CHART,
12
+ devMode: 'proCode',
13
+ npm: {
14
+ package: PACKAGE_NAME,
15
+ version: pkg.version,
16
+ globalName: COMPONENT_NAME,
17
+ componentName: COMPONENT_NAME,
18
+ },
19
+ snippets,
20
+ configure,
21
+ }
22
+
23
+ export { meta }