@easy-editor/materials-dashboard-bar-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.
Files changed (41) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/component.min.js +3 -4
  3. package/dist/index.min.js +3 -4
  4. package/dist/meta.min.js +1 -2
  5. package/easypack.config.ts +10 -0
  6. package/package.json +6 -10
  7. package/src/component.tsx +311 -260
  8. package/src/configure.ts +220 -365
  9. package/src/index.tsx +7 -7
  10. package/src/meta.ts +21 -23
  11. package/src/snippets.ts +104 -79
  12. package/tsconfig.json +20 -9
  13. package/.vite/plugins/vite-plugin-external-deps.ts +0 -224
  14. package/.vite/plugins/vite-plugin-material-dev.ts +0 -218
  15. package/dist/component.esm.js +0 -34452
  16. package/dist/component.esm.js.map +0 -1
  17. package/dist/component.js +0 -34459
  18. package/dist/component.js.map +0 -1
  19. package/dist/component.min.js.map +0 -1
  20. package/dist/index.cjs +0 -34870
  21. package/dist/index.cjs.map +0 -1
  22. package/dist/index.esm.js +0 -34867
  23. package/dist/index.esm.js.map +0 -1
  24. package/dist/index.js +0 -34874
  25. package/dist/index.js.map +0 -1
  26. package/dist/index.min.js.map +0 -1
  27. package/dist/meta.esm.js +0 -441
  28. package/dist/meta.esm.js.map +0 -1
  29. package/dist/meta.js +0 -451
  30. package/dist/meta.js.map +0 -1
  31. package/dist/meta.min.js.map +0 -1
  32. package/dist/src/component.d.ts +0 -21
  33. package/dist/src/configure.d.ts +0 -7
  34. package/dist/src/constants.d.ts +0 -27
  35. package/dist/src/index.d.ts +0 -6
  36. package/dist/src/meta.d.ts +0 -3
  37. package/dist/src/snippets.d.ts +0 -3
  38. package/rollup.config.js +0 -212
  39. package/tsconfig.build.json +0 -12
  40. package/tsconfig.test.json +0 -7
  41. package/vite.config.ts +0 -54
package/src/configure.ts CHANGED
@@ -1,365 +1,220 @@
1
- /**
2
- * Bar Chart Configure
3
- * 柱状图组件配置
4
- */
5
-
6
- import type { Configure } from '@easy-editor/core'
7
-
8
- 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: 'layout',
219
- title: '布局方向',
220
- setter: {
221
- componentName: 'SegmentedSetter',
222
- props: {
223
- options: [
224
- { label: '垂直', value: 'vertical' },
225
- { label: '水平', value: 'horizontal' },
226
- ],
227
- },
228
- },
229
- extraProps: {
230
- defaultValue: 'vertical',
231
- },
232
- },
233
- {
234
- name: 'stacked',
235
- title: '堆叠模式',
236
- setter: 'SwitchSetter',
237
- extraProps: {
238
- defaultValue: false,
239
- },
240
- },
241
- {
242
- name: 'gradient',
243
- title: '渐变填充',
244
- setter: 'SwitchSetter',
245
- extraProps: {
246
- defaultValue: true,
247
- },
248
- },
249
- {
250
- name: 'borderRadius',
251
- title: '圆角',
252
- setter: {
253
- componentName: 'SliderSetter',
254
- props: {
255
- min: 0,
256
- max: 20,
257
- step: 1,
258
- suffix: 'px',
259
- },
260
- },
261
- extraProps: {
262
- defaultValue: 4,
263
- },
264
- },
265
- {
266
- name: 'barGap',
267
- title: '柱间距',
268
- setter: {
269
- componentName: 'SliderSetter',
270
- props: {
271
- min: 0,
272
- max: 20,
273
- step: 1,
274
- suffix: 'px',
275
- },
276
- },
277
- extraProps: {
278
- defaultValue: 4,
279
- },
280
- },
281
- {
282
- name: 'colors',
283
- title: '颜色',
284
- setter: {
285
- componentName: 'ArraySetter',
286
- props: {
287
- itemSetter: 'ColorSetter',
288
- },
289
- },
290
- },
291
- {
292
- name: 'showGrid',
293
- title: '显示网格',
294
- setter: 'SwitchSetter',
295
- extraProps: {
296
- defaultValue: true,
297
- },
298
- },
299
- {
300
- name: 'showLegend',
301
- title: '显示图例',
302
- setter: 'SwitchSetter',
303
- extraProps: {
304
- defaultValue: true,
305
- },
306
- },
307
- {
308
- name: 'legendPosition',
309
- title: '图例位置',
310
- setter: {
311
- componentName: 'SelectSetter',
312
- props: {
313
- options: [
314
- { label: '顶部', value: 'top' },
315
- { label: '底部', value: 'bottom' },
316
- { label: '左侧', value: 'left' },
317
- { label: '右侧', value: 'right' },
318
- ],
319
- },
320
- },
321
- extraProps: {
322
- defaultValue: 'bottom',
323
- },
324
- },
325
- ],
326
- },
327
- ],
328
- },
329
- {
330
- type: 'group',
331
- key: 'data',
332
- title: '数据',
333
- items: [
334
- {
335
- name: 'dataBinding',
336
- title: '数据绑定',
337
- setter: 'DataBindingSetter',
338
- },
339
- ],
340
- },
341
- {
342
- type: 'group',
343
- key: 'advanced',
344
- title: '高级',
345
- items: [
346
- {
347
- name: 'condition',
348
- title: '显隐控制',
349
- setter: 'SwitchSetter',
350
- extraProps: {
351
- defaultValue: true,
352
- supportVariable: true,
353
- },
354
- },
355
- ],
356
- },
357
- ],
358
- },
359
- ],
360
- component: {},
361
- supports: {},
362
- advanced: {},
363
- }
364
-
365
- export default configure
1
+ /**
2
+ * Bar 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: 'axis',
51
+ title: '坐标轴',
52
+ items: [
53
+ {
54
+ name: 'xAxisLabel',
55
+ title: 'X轴标签',
56
+ setter: 'StringSetter',
57
+ },
58
+ {
59
+ name: 'yAxisLabel',
60
+ title: 'Y轴标签',
61
+ setter: 'StringSetter',
62
+ },
63
+ {
64
+ name: 'xAxisVisible',
65
+ title: '显示X轴',
66
+ setter: 'SwitchSetter',
67
+ extraProps: {
68
+ defaultValue: true,
69
+ },
70
+ },
71
+ {
72
+ name: 'yAxisVisible',
73
+ title: '显示Y轴',
74
+ setter: 'SwitchSetter',
75
+ extraProps: {
76
+ defaultValue: true,
77
+ },
78
+ },
79
+ {
80
+ name: 'axisLabelRotate',
81
+ title: '标签旋转',
82
+ setter: {
83
+ componentName: 'SliderSetter',
84
+ props: {
85
+ min: -90,
86
+ max: 90,
87
+ step: 15,
88
+ suffix: '°',
89
+ },
90
+ },
91
+ extraProps: {
92
+ defaultValue: 0,
93
+ },
94
+ },
95
+ ],
96
+ },
97
+ // 样式 Tab
98
+ {
99
+ type: 'group',
100
+ key: 'style',
101
+ title: '样式',
102
+ items: [
103
+ {
104
+ name: 'layout',
105
+ title: '布局方向',
106
+ setter: {
107
+ componentName: 'SegmentedSetter',
108
+ props: {
109
+ options: [
110
+ { label: '垂直', value: 'vertical' },
111
+ { label: '水平', value: 'horizontal' },
112
+ ],
113
+ },
114
+ },
115
+ extraProps: {
116
+ defaultValue: 'vertical',
117
+ },
118
+ },
119
+ {
120
+ name: 'stacked',
121
+ title: '堆叠模式',
122
+ setter: 'SwitchSetter',
123
+ extraProps: {
124
+ defaultValue: false,
125
+ },
126
+ },
127
+ {
128
+ name: 'gradient',
129
+ title: '渐变填充',
130
+ setter: 'SwitchSetter',
131
+ extraProps: {
132
+ defaultValue: true,
133
+ },
134
+ },
135
+ {
136
+ name: 'borderRadius',
137
+ title: '圆角',
138
+ setter: {
139
+ componentName: 'SliderSetter',
140
+ props: {
141
+ min: 0,
142
+ max: 20,
143
+ step: 1,
144
+ suffix: 'px',
145
+ },
146
+ },
147
+ extraProps: {
148
+ defaultValue: 4,
149
+ },
150
+ },
151
+ {
152
+ name: 'colors',
153
+ title: '颜色',
154
+ setter: {
155
+ componentName: 'ArraySetter',
156
+ props: {
157
+ itemSetter: 'ColorSetter',
158
+ },
159
+ },
160
+ },
161
+ ],
162
+ },
163
+ // 图例 Tab
164
+ {
165
+ type: 'group',
166
+ key: 'legend',
167
+ title: '图例',
168
+ items: [
169
+ {
170
+ name: 'showGrid',
171
+ title: '显示网格',
172
+ setter: 'SwitchSetter',
173
+ extraProps: {
174
+ defaultValue: true,
175
+ },
176
+ },
177
+ {
178
+ name: 'showLegend',
179
+ title: '显示图例',
180
+ setter: 'SwitchSetter',
181
+ extraProps: {
182
+ defaultValue: true,
183
+ },
184
+ },
185
+ {
186
+ name: 'legendPosition',
187
+ title: '图例位置',
188
+ setter: {
189
+ componentName: 'SelectSetter',
190
+ props: {
191
+ options: [
192
+ { label: '顶部', value: 'top' },
193
+ { label: '底部', value: 'bottom' },
194
+ { label: '左侧', value: 'left' },
195
+ { label: '右侧', value: 'right' },
196
+ ],
197
+ },
198
+ },
199
+ extraProps: {
200
+ defaultValue: 'bottom',
201
+ },
202
+ },
203
+ ],
204
+ },
205
+ ],
206
+ },
207
+ ],
208
+ {
209
+ padding: '6px 16px 12px',
210
+ },
211
+ )
212
+
213
+ /** 数据配置 */
214
+ const dataConfigGroup: FieldConfig = createDataConfigGroup([
215
+ { name: 'name', label: 'name', type: 'string', required: true, description: '类目名称' },
216
+ { name: 'value1', label: 'value1', type: 'number', required: true, description: '数值1' },
217
+ { name: 'value2', label: 'value2', type: 'number', required: false, description: '数值2' },
218
+ ])
219
+
220
+ export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)
package/src/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * BarChart Entry
3
- * 柱状图组件入口
4
- */
5
-
6
- export { default as component } from './component'
7
- export { default as meta } from './meta'
1
+ /**
2
+ * BarChart Entry
3
+ * 柱状图组件入口
4
+ */
5
+
6
+ export { BarChart as component } from './component'
7
+ export { meta } from './meta'
package/src/meta.ts CHANGED
@@ -1,23 +1,21 @@
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
+ export 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
+ }