@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

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 (220) hide show
  1. package/docs/components/Dashboard.md +56 -0
  2. package/log.txt +7 -0
  3. package/package.json +27 -19
  4. package/src/components/404.vue +61 -0
  5. package/src/components/AccountIcon.vue +19 -0
  6. package/src/components/Ahref.vue +1 -1
  7. package/src/components/Alert.vue +4 -13
  8. package/src/components/ArrayList.vue +49 -0
  9. package/src/components/Article.vue +24 -30
  10. package/src/components/Button.vue +79 -167
  11. package/src/components/Card.vue +235 -0
  12. package/src/components/Carousel.vue +61 -60
  13. package/src/components/Cart.vue +192 -0
  14. package/src/components/CartIcon.vue +89 -0
  15. package/src/components/ChartBar.vue +2 -3
  16. package/src/components/Checkbox.vue +20 -11
  17. package/src/components/Checkout.vue +373 -0
  18. package/src/components/CheckoutDelivery.vue +267 -0
  19. package/src/components/CodeEditor.vue +5 -16
  20. package/src/components/CollapsiblePanel.vue +70 -0
  21. package/src/components/ColorPicker.vue +8 -3
  22. package/src/components/ColorPicker2.vue +41 -19
  23. package/src/components/ColorPicker3.vue +100 -0
  24. package/src/components/Confirm.vue +9 -7
  25. package/src/components/ContextMenu.vue +122 -206
  26. package/src/components/ContextMenuItem.vue +53 -0
  27. package/src/components/Dashboard.vue +243 -0
  28. package/src/components/Dashboard2.vue +118 -0
  29. package/src/components/DashboardComponentSelector.vue +96 -0
  30. package/src/components/DashboardConfigs.vue +202 -0
  31. package/src/components/Datepicker.vue +102 -41
  32. package/src/components/DayTimeRange.vue +3 -2
  33. package/src/components/Dropdown.vue +7 -4
  34. package/src/components/Flex.vue +14 -40
  35. package/src/components/GHeatMaps.vue +2 -2
  36. package/src/components/Grid.vue +6 -6
  37. package/src/components/HTMLEditor.vue +27 -14
  38. package/src/components/Image.vue +62 -108
  39. package/src/components/ImagePreview.vue +14 -4
  40. package/src/components/ImageUploader.vue +114 -0
  41. package/src/components/ImportModal.vue +3 -3
  42. package/src/components/Link.vue +62 -6
  43. package/src/components/List.vue +524 -402
  44. package/src/components/ListContextMenu.vue +88 -0
  45. package/src/components/ListItem.vue +5 -3
  46. package/src/components/ListPage1.vue +14 -15
  47. package/src/components/ListView.vue +5 -6
  48. package/src/components/ListViewSettings.vue +2 -2
  49. package/src/components/LogViewerItem.vue +1 -1
  50. package/src/components/MarkdownEdit.vue +128 -0
  51. package/src/components/MarkdownPreview.vue +102 -0
  52. package/src/components/MenuItem1.vue +36 -0
  53. package/src/components/Modal.vue +95 -43
  54. package/src/components/MultiDropdown.vue +124 -0
  55. package/src/components/MultilineText.vue +1 -4
  56. package/src/components/OTPField.vue +11 -17
  57. package/src/components/ObjectTree.vue +1 -1
  58. package/src/components/PageBuilder.vue +3 -3
  59. package/src/components/Paragraph.vue +1 -2
  60. package/src/components/PresetSelectorFilterItem.vue +107 -95
  61. package/src/components/Radio.vue +1 -1
  62. package/src/components/SearchModal.vue +153 -0
  63. package/src/components/Slider.vue +1 -1
  64. package/src/components/Svg.vue +1 -1
  65. package/src/components/SvgEditor.vue +173 -0
  66. package/src/components/Switch.vue +4 -5
  67. package/src/components/Table.vue +2 -2
  68. package/src/components/TableView.vue +2 -3
  69. package/src/components/TableViewHead.vue +2 -2
  70. package/src/components/Tabs.vue +1 -1
  71. package/src/components/Testimonial.vue +2 -2
  72. package/src/components/Text.vue +7 -22
  73. package/src/components/TextEditor.vue +3 -3
  74. package/src/components/TextWithTag.vue +61 -30
  75. package/src/components/Textarea.vue +11 -16
  76. package/src/components/Textbox.vue +9 -19
  77. package/src/components/Timepicker.vue +25 -15
  78. package/src/components/Toast.vue +5 -3
  79. package/src/components/TreeMenu.vue +122 -0
  80. package/src/components/TreeView.vue +15 -10
  81. package/src/components/TreeView2.vue +38 -0
  82. package/src/components/TreeViewItem.vue +58 -29
  83. package/src/components/TreeViewItem2.vue +55 -0
  84. package/src/components/Uploader.vue +45 -0
  85. package/src/components/Video.vue +119 -0
  86. package/src/components/VirtualGrid.vue +24 -7
  87. package/src/components/VirtualTable.vue +363 -128
  88. package/src/configs/dashboard/data-table.js +9 -0
  89. package/src/configs/web-page-builder.js +118 -0
  90. package/src/directives/intersect.js +26 -0
  91. package/src/hooks/device.js +14 -0
  92. package/src/index.js +62 -107
  93. package/src/mixin/component.js +147 -67
  94. package/src/themes/default/index.js +83 -155
  95. package/src/utils/dashboard.js +22 -962
  96. package/src/utils/helpers.cjs +635 -0
  97. package/src/utils/helpers.js +91 -60
  98. package/src/utils/helpers.mjs +245 -12
  99. package/src/utils/importer.js +22 -3
  100. package/src/utils/list.mjs +1509 -0
  101. package/src/utils/preset-selector.cjs +1455 -0
  102. package/src/utils/preset-selector.js +489 -95
  103. package/src/utils/preset-selector.mjs +59 -20
  104. package/src/utils/queue.js +63 -0
  105. package/src/utils/web.mjs +120 -0
  106. package/src/utils/wss.js +37 -29
  107. package/src/utils/wss.mjs +24 -19
  108. package/src/widgets/AhrefSetting.vue +16 -13
  109. package/src/widgets/ArticleSetting.vue +15 -27
  110. package/src/widgets/BackgroundColorSetting.vue +153 -0
  111. package/src/widgets/BorderColorSetting.vue +57 -0
  112. package/src/widgets/BotEditor/BotEditorActions.vue +3 -2
  113. package/src/widgets/BotEditor/BotEditorSettings.vue +21 -0
  114. package/src/widgets/BotEditor.vue +35 -15
  115. package/src/widgets/ButtonSetting.vue +12 -13
  116. package/src/widgets/CarouselSetting.vue +33 -45
  117. package/src/widgets/CartSetting.vue +46 -0
  118. package/src/widgets/CheckoutSetting.vue +46 -0
  119. package/src/widgets/CollapsiblePanelSetting.vue +46 -0
  120. package/src/widgets/ColumnSelector.vue +29 -5
  121. package/src/widgets/ComponentSetting.vue +1 -1
  122. package/src/widgets/ComponentSetting2.vue +112 -234
  123. package/src/widgets/ComponentSetting3.vue +1 -1
  124. package/src/widgets/ContactForm.vue +3 -3
  125. package/src/widgets/ContactFormSetting.vue +41 -30
  126. package/src/widgets/Dashboard/BarChart.vue +47 -11
  127. package/src/widgets/Dashboard/BarChartSetting.vue +1 -1
  128. package/src/widgets/Dashboard/DataTable.vue +125 -0
  129. package/src/widgets/Dashboard/DataTableSetting.vue +243 -0
  130. package/src/widgets/Dashboard/DatasourceSelector.vue +1 -1
  131. package/src/widgets/Dashboard/Doughnut.vue +49 -7
  132. package/src/widgets/Dashboard/DoughnutSetting.vue +2 -2
  133. package/src/widgets/Dashboard/Metric.vue +78 -19
  134. package/src/widgets/Dashboard/MetricSetting.vue +81 -28
  135. package/src/widgets/Dashboard/Pie.vue +55 -6
  136. package/src/widgets/Dashboard/PieSetting.vue +1 -1
  137. package/src/widgets/Dashboard/PolarArea.vue +49 -7
  138. package/src/widgets/Dashboard/PolarAreaSetting.vue +1 -1
  139. package/src/widgets/Dashboard/SharingModal.vue +4 -5
  140. package/src/widgets/Dashboard/ViewSelector.vue +2 -2
  141. package/src/widgets/Dashboard/VirtualTableSetting.vue +121 -184
  142. package/src/widgets/{Dashboard.vue → Dashboard0.vue} +426 -343
  143. package/src/widgets/EmbeddedVideoSetting.vue +7 -5
  144. package/src/widgets/FAQ.vue +16 -3
  145. package/src/widgets/FAQSetting.vue +53 -47
  146. package/src/widgets/FeatureList.vue +3 -0
  147. package/src/widgets/FeatureListSetting.vue +112 -102
  148. package/src/widgets/FlexSetting.vue +83 -106
  149. package/src/widgets/GridSetting.vue +71 -196
  150. package/src/widgets/Header2.vue +34 -71
  151. package/src/widgets/Header2Setting.vue +95 -179
  152. package/src/widgets/HeaderSetting.vue +16 -18
  153. package/src/widgets/IconListSetting.vue +69 -65
  154. package/src/widgets/ImageSetting.vue +33 -60
  155. package/src/widgets/LinkSetting.vue +60 -37
  156. package/src/widgets/LinkSettingModal.vue +173 -0
  157. package/src/widgets/LogViewer.vue +1 -1
  158. package/src/widgets/MarginSetting.vue +2 -2
  159. package/src/widgets/MenuEditor.vue +1 -1
  160. package/src/widgets/MenuItem1Setting.vue +78 -0
  161. package/src/widgets/ModalSetting.vue +42 -44
  162. package/src/widgets/MultiValueSetting.vue +2 -2
  163. package/src/widgets/MultiValueSetting2.vue +78 -45
  164. package/src/widgets/OGSettingModal.vue +103 -0
  165. package/src/widgets/PaddingSetting.vue +2 -2
  166. package/src/widgets/ParagraphSetting.vue +16 -13
  167. package/src/widgets/PositionSetting.vue +209 -0
  168. package/src/widgets/PresetBar.vue +359 -210
  169. package/src/widgets/PresetBarPivot.vue +31 -19
  170. package/src/widgets/PresetSelector.vue +29 -17
  171. package/src/widgets/SearchModalSetting.vue +70 -0
  172. package/src/widgets/Share.vue +1 -2
  173. package/src/widgets/ShareSetting.vue +67 -60
  174. package/src/widgets/StyleSetting.vue +227 -116
  175. package/src/widgets/TestimonialSetting.vue +97 -88
  176. package/src/widgets/TextBlockSetting.vue +16 -13
  177. package/src/widgets/UserActionBuilder/UserActionConsole.vue +30 -10
  178. package/src/widgets/UserActionBuilder/UserActionOutput.vue +2 -2
  179. package/src/widgets/UserActionBuilder/UserActionOutputReply.vue +64 -87
  180. package/src/widgets/UserActionBuilder/UserActionProps.vue +3 -3
  181. package/src/widgets/UserActionBuilder.vue +4 -16
  182. package/src/widgets/WebComponentSelector.vue +15 -11
  183. package/src/widgets/WebLayoutSelector.vue +41 -270
  184. package/src/widgets/WebPageBuilder.vue +693 -704
  185. package/src/widgets/WebPageBuilder2.vue +7 -7
  186. package/src/widgets/WebPageBuilder4/ButtonSetting.vue +0 -8
  187. package/src/widgets/WebPageBuilder4/CarouselSetting.vue +63 -7
  188. package/src/widgets/WebPageBuilder4/FlexAlignSetting.vue +3 -3
  189. package/src/widgets/WebPageBuilder4/FlexSetting.vue +1 -10
  190. package/src/widgets/WebPageBuilder4/MultiValueSetting.vue +2 -2
  191. package/src/widgets/WebPageBuilder4/PropertySetting.vue +0 -7
  192. package/src/widgets/WebPageBuilder4/WebPageComponentSelector.vue +1 -7
  193. package/src/widgets/WebPageBuilder4.vue +289 -575
  194. package/src/widgets/WebPageSelector.vue +1 -1
  195. package/src/widgets/YoutubeVideoSetting.vue +16 -13
  196. package/tailwind.config.js +3 -35
  197. package/docs/schema/user-action.json +0 -266
  198. package/src/App.vue +0 -25
  199. package/src/components/SearchButton.vue +0 -57
  200. package/src/entry-client.js +0 -27
  201. package/src/entry-server.js +0 -73
  202. package/src/events/event.js +0 -2
  203. package/src/main.js +0 -29
  204. package/src/mixin/website.js +0 -121
  205. package/src/router.js +0 -57
  206. package/src/widgets/MobileMenu.vue +0 -182
  207. package/src/widgets/WebPageBuilder4/ActionSetting.vue +0 -158
  208. package/src/widgets/WebPageBuilder4/ColorSetting.vue +0 -63
  209. package/src/widgets/WebPageBuilder4/DataSetting.vue +0 -92
  210. package/src/widgets/WebPageBuilder4/FontSizeSetting.vue +0 -76
  211. package/src/widgets/WebPageBuilder4/LinkSetting.vue +0 -68
  212. package/src/widgets/WebPageBuilder4/MobileMenuSetting.vue +0 -106
  213. package/src/widgets/WebPageBuilder4/Setting.vue +0 -73
  214. package/src/widgets/WebPageBuilder4/StyleSetting.vue +0 -77
  215. package/src/widgets/WebPageBuilder4/SvgSetting.vue +0 -207
  216. package/src/widgets/WebPageBuilder4/TextTransformSetting.vue +0 -70
  217. package/src/widgets/WebPageBuilder4/WebPageDataEdit.vue +0 -121
  218. package/test.json +0 -22
  219. /package/src/widgets/{Header1.vue → Header0.vue} +0 -0
  220. /package/src/widgets/{Header1Setting.vue → Header0Setting.vue} +0 -0
@@ -65,7 +65,27 @@ const getModelFromDatasource = async (datasource, opt) => {
65
65
  }
66
66
  }
67
67
 
68
+ const getDatasourceItems = async (datasource, opt) => {
69
+
70
+ const Model = await getModelFromDatasource(datasource, opt)
71
+ const config = {
72
+ columns: datasource.columns
73
+ }
74
+ const findOpt = await presetToSequelizeList(datasource, {
75
+ config,
76
+ model: Model,
77
+ conn: opt.conn,
78
+ limit: 100
79
+ })
80
+
81
+ return await Model.findAll({
82
+ ...findOpt,
83
+ raw: true
84
+ })
85
+ }
86
+
68
87
  const getSequelizeColumns = async (columns, opt) => {
88
+ if(!columns) columns = []
69
89
 
70
90
  const { DataTypes } = opt.Sequelize
71
91
 
@@ -103,965 +123,6 @@ const getSequelizeColumns = async (columns, opt) => {
103
123
  return tableColumns
104
124
  }
105
125
 
106
- const getDatasourceItems = async (datasource, opt) => {
107
-
108
- if(!datasource.itemsPerPage)
109
- datasource.itemsPerPage = 20
110
-
111
- const datasourceOpt = DatasourceService.getDatasourceParamsByUid(datasource.datasourceUid)
112
-
113
- const Model = await getModelFromDatasource(datasource, opt)
114
- const config = {
115
- columns: datasource.columns
116
- }
117
-
118
- const findOpt = await presetToSequelizeList(datasource, {
119
- config,
120
- model: Model,
121
- conn: opt.conn,
122
- limit: 100,
123
- ...datasourceOpt
124
- })
125
-
126
- const items = (await Model.findAll({
127
- ...findOpt
128
- }))
129
- .map(_ => _.toJSON())
130
-
131
- let hasNext = false
132
- if(!datasource.pivot?.enabled && items.length > 20){
133
- items.pop()
134
- hasNext = true
135
- }
136
-
137
- if(!datasource.pivot?.enabled && datasource.computedColumns){
138
- items.forEach(item => {
139
- for(let column of datasource.computedColumns){
140
- const value = column.value.replace(/{([^}]+)}/g, (match, key) => {
141
- return item[key] ?? 0
142
- })
143
-
144
- const valueObj = parser.parse(value)
145
-
146
- item[column.key] = valueObj?.result
147
- }
148
- })
149
- }
150
-
151
- return {
152
- items,
153
- hasNext
154
- }
155
- }
156
-
157
-
158
- const loadBarChart = async(params, opt) => {
159
- if(params.xAxes.filter(_ => !_).length > 0 ||
160
- params.yAxes.filter(_ => !_).length > 0)
161
- return { labels:[], datasets:[] }
162
-
163
- const { items } = params
164
-
165
- if(items.length === 200001)
166
- throw new ValidationError({ count:[ 'Unable to load bar chart, max items count is 200000' ]})
167
-
168
- const columns = (params.datasource.columns ?? []).reduce((res, cur) => {
169
- res[cur['key']] = cur
170
- return res
171
- }, {})
172
-
173
- let labels = []
174
- let datasets = []
175
-
176
- let xAxes
177
- if(params.xAxeMultiple){
178
- xAxes = params.xAxes
179
- }
180
- else{
181
- const xAxesKey = params.xAxes[0].key
182
- const xAxeModifier = params.xAxes[0].modifier
183
-
184
- let reduced = {}
185
- switch(xAxeModifier){
186
-
187
- case 'hour':
188
- for(let i = 0 ; i < 24 ; i++){
189
- reduced[i] = { key:i.toString().padStart(2, '0'), parentKey:xAxesKey, modifier:xAxeModifier }
190
- }
191
- break
192
-
193
- case 'minute':
194
- for(let i = 0 ; i < 60 ; i++){
195
- reduced[i] = { key:i.toString().padStart(2, '0'), parentKey:xAxesKey, modifier:xAxeModifier }
196
- }
197
- break
198
-
199
- case 'month':
200
- for(let i = 1 ; i <= 12 ; i++){
201
- reduced[i] = { key:dayjs(`2020-${i.toString().padStart(2, '0')}-15`).format('MMM'), parentKey:xAxesKey, modifier:xAxeModifier }
202
- }
203
- break
204
-
205
- case 'year':
206
- const currentYear = parseInt(dayjs().format('YYYY'))
207
- for(let i = currentYear - 20 ; i <= currentYear ; i++){
208
- reduced[i] = { key:i.toString().padStart(2, '0'), parentKey:xAxesKey, modifier:xAxeModifier }
209
- }
210
- break
211
-
212
- case 'date':
213
- for(let i = 1 ; i <= 31 ; i++){
214
- reduced[i] = { key:i.toString().padStart(2, '0'), parentKey:xAxesKey, modifier:xAxeModifier }
215
- }
216
- break
217
-
218
- case 'last60Minutes':
219
- let last60Minutes = dayjs()
220
- for(let i = 60 ; i > 0 ; i--){
221
- const cur = last60Minutes.subtract(i, 'minute').format('YYYYMMDDHHmm00')
222
- reduced[cur] = { key:cur, parentKey:xAxesKey, modifier:xAxeModifier }
223
- }
224
- break
225
-
226
- case 'last12Hours':
227
- let last12Hours = dayjs()
228
- for(let i = 11 ; i >= 0 ; i--){
229
- const cur = last12Hours.subtract(i, 'hour')
230
- const key = cur.format('YYYYMMDDHH0000')
231
- const alias = cur.format('HH')
232
- reduced[key] = { key, alias, parentKey:xAxesKey, modifier:xAxeModifier }
233
- }
234
- break
235
-
236
- case 'last24Hours':
237
- let last24Hours = dayjs()
238
- for(let i = 23 ; i >= 0 ; i--){
239
- const cur = last24Hours.subtract(i, 'hour')
240
- const key = cur.format('YYYYMMDDHH0000')
241
- const alias = cur.format('HH')
242
- reduced[key] = { key, alias, parentKey:xAxesKey, modifier:xAxeModifier }
243
- }
244
- break
245
-
246
- default:
247
- reduced = items.reduce((acc, item) => {
248
-
249
- let key = item[xAxesKey]
250
- switch(params.xAxes[0].modifier){
251
-
252
- }
253
-
254
- acc[key] = { key, parentKey:xAxesKey, modifier:params.xAxes[0].modifier }
255
- return acc
256
- }, {})
257
- break
258
-
259
- }
260
-
261
- xAxes = Object.values(reduced)
262
- }
263
-
264
- let yAxes
265
- if(params.yAxeMultiple){
266
- const yAxesKey = params.yAxes[0].key
267
- const reduced = items.reduce((acc, item) => {
268
- const key = item[yAxesKey]
269
- acc[key] = { key, parentKey:yAxesKey, modifier:params.yAxes[0].modifier }
270
- return acc
271
- }, {})
272
-
273
- yAxes = Object.values(reduced)
274
- }
275
- else{
276
- yAxes = [ params.yAxes[0] ]
277
- }
278
-
279
- const yAxe0Column = params.datasource.columns.find(_ => _.key === params.yAxes[0].key)
280
-
281
- switch(yAxe0Column?.type){
282
-
283
- case 'enum':
284
- if(yAxe0Column?.typeParams){
285
- yAxes.map(yAxe => {
286
- const obj = yAxe0Column?.typeParams.find(_ => _.value === yAxe.key)
287
- yAxe.alias = obj?.text ?? yAxe.key
288
- })
289
- }
290
- else if(yAxe0Column?.enumSrc){
291
- const [ path, key, name ] = yAxe0Column.enumSrc.split(':')
292
- if(typeof opt.enumFn === 'function'){
293
- const { items } = await opt.enumFn(path, {}, opt.socket) ?? {}
294
-
295
- if(Array.isArray(items)){
296
- const itemsKey = items.reduce((res, cur) => {
297
- res[cur[key]] = cur[name]
298
- return res
299
- }, {})
300
-
301
- yAxes = yAxes.map(yAxe => {
302
- yAxe.alias = itemsKey[yAxe.key] ?? yAxe.key
303
- return yAxe
304
- })
305
- }
306
- }
307
- }
308
- break
309
-
310
- }
311
-
312
- let idx = 0
313
- const yLegends = []
314
-
315
- const enums = {}
316
- for(let xAxe of params.xAxes){
317
- const datasourceColumn = columns[xAxe.key]
318
- if(datasourceColumn){
319
- if(datasourceColumn.type === 'enum'){
320
- if(datasourceColumn.typeParams){
321
- enums[xAxe.key] = datasourceColumn.typeParams.reduce((res, cur) => {
322
- res[cur.value] = cur.text
323
- return res
324
- }, {})
325
- }
326
- else if(datasourceColumn.enumSrc){
327
- const [ path, key, name ] = datasourceColumn.enumSrc.split(':')
328
- if(typeof opt.enumFn === 'function'){
329
- const { items } = await opt.enumFn(path, {}, opt.socket) ?? {}
330
-
331
- if(Array.isArray(items)){
332
- enums[xAxe.key] = items.reduce((res, cur) => {
333
- res[cur[key]] = cur[name]
334
- return res
335
- }, {})
336
- }
337
- }
338
- }
339
- }
340
- }
341
- }
342
-
343
- for(let yAxe of yAxes){
344
-
345
- let data
346
-
347
- let yAxeItems = items
348
-
349
- if(params.yAxeMultiple){
350
- yAxeItems = yAxeItems.filter(_ => _[yAxe.parentKey] === yAxe.key)
351
- }
352
-
353
- if(params.xAxeMultiple){
354
- data = xAxes.map(_ => {
355
- let value
356
- switch(yAxe.modifier){
357
- case 'count':
358
- value = yAxeItems.length
359
- break
360
-
361
- case 'sum':
362
- default:
363
- value = yAxeItems.reduce((acc, item) => {
364
- const value = parseFloat(item[params.yAxeMultiple ? _.key : yAxe.key])
365
- return acc + (isNaN(value) ? 0 : value)
366
- }, 0)
367
- }
368
-
369
- return value
370
- })
371
- }
372
- else{
373
- data = xAxes.map(_ => {
374
-
375
- let curItems
376
- switch(_.modifier){
377
- case 'date':
378
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('DD') === _.key)
379
- break
380
-
381
- case 'month':
382
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('MMM') === _.key)
383
- break
384
-
385
- case 'year':
386
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('YYYY') === _.key)
387
- break
388
-
389
- case 'hour':
390
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('HH') === _.key)
391
- break
392
-
393
- case 'minute':
394
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('mm') === _.key)
395
- break
396
-
397
- case 'last12Hours':
398
- case 'last24Hours':
399
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('YYYYMMDDHH0000') === _.key)
400
- break
401
-
402
- case 'last60Minutes':
403
- curItems = yAxeItems.filter(__ => dayjs(__[_.parentKey]).format('YYYYMMDDHHmm00') === _.key)
404
- break
405
-
406
- default:
407
- curItems = yAxeItems.filter(__ => __[_.parentKey] === _.key)
408
- }
409
-
410
- let value
411
- switch(yAxe.modifier){
412
- case 'count':
413
- value = curItems.length
414
- break
415
-
416
- case 'countDistinct':
417
- value = curItems.reduce((acc, item) => {
418
- if(!acc.includes(item[yAxe.key]))
419
- acc.push(item[yAxe.key])
420
- return acc
421
- }, []).length
422
- break
423
-
424
- case 'sum':
425
- default:
426
- value = curItems.reduce((acc, item) => {
427
- const value = parseFloat(item[yAxe.key])
428
- return acc + (isNaN(value) ? 0 : value)
429
- }, 0)
430
- }
431
-
432
- return value
433
- })
434
- }
435
-
436
- let label = yAxe.key
437
- if(params.yAxeMultiple){
438
- label = yAxe.alias ?? yAxe.key
439
-
440
- if(columns[yAxe.parentKey]?.type === 'enum'){
441
- if(columns[yAxe.parentKey]?.typeParams){
442
- const obj = columns[yAxe.parentKey]?.typeParams.find(_ => _.value === label)
443
- label = obj?.text ?? label
444
- }
445
- }
446
- }
447
-
448
- datasets.push({
449
- label,
450
- data,
451
- backgroundColor: yAxes.length > 1 ?
452
- [ backgroundColors[idx % backgroundColors.length] ]:
453
- [ backgroundColors[0] ],
454
- borderColor: yAxes.length > 1 ?
455
- [ backgroundColors[idx % backgroundColors.length] ]:
456
- [ backgroundColors[0] ],
457
- borderWidth: 1
458
- })
459
-
460
- yLegends.push({
461
- key: label ?? '(empty)',
462
- color: backgroundColors[idx % backgroundColors.length]
463
- })
464
-
465
- idx++
466
- }
467
-
468
- labels = xAxes.map(_ => {
469
- if(enums[_.parentKey])
470
- return enums[_.parentKey][_.key] ?? (_.alias ?? _.key)
471
- return _.alias ?? _.key
472
- })
473
-
474
- if(datasets.length > 0 && params.yAxeMultiple && params.usePercentage){
475
-
476
- params.datasets = datasets
477
-
478
- const segments = []
479
- let segmentMax = -1
480
- for(let i in datasets[0].data){
481
-
482
- if(!segments[i])
483
- segments[i] = { data:[] }
484
-
485
- for(let j in datasets){
486
- segments[i].data.push(datasets[j].data[i])
487
- }
488
-
489
- segments[i].max = Math.max(...segments[i].data)
490
-
491
- if(segments[i].max > segmentMax)
492
- segmentMax = segments[i].max
493
- }
494
-
495
- for(let i in datasets){
496
-
497
- const data0 = []
498
- for(let j in datasets[i].data){
499
- const multipler = segmentMax / segments[j].max
500
- data0.push(datasets[i].data[j])
501
- datasets[i].data[j] = ((datasets[i].data[j] * multipler) / segmentMax * 100).toFixed(1)
502
- }
503
- datasets[i].data0 = data0
504
- }
505
- }
506
-
507
- if(datasets.length > 500){
508
- return { error:1, message:'Too many datasets' }
509
- }
510
- if(labels > 1000){
511
- return { error:1, message:'Too many labels' }
512
- }
513
-
514
- return {
515
- labels,
516
- datasets,
517
- yLegends
518
- }
519
- }
520
-
521
- const loadMetric = async(params, opt) => {
522
-
523
- const { column, datasource, columnModifier, column2Enabled, column2, column2Modifier } = params
524
-
525
- const res = {
526
- value: '',
527
- comparedValue: '',
528
- comparedPercent: ''
529
- }
530
-
531
- if(column){
532
-
533
- let getValue
534
- if('items' in params){
535
- const { items } = params
536
- getValue = async (column, modifier) => {
537
- let value
538
-
539
- switch(modifier){
540
- case 'count':
541
- value = items.length
542
- break
543
-
544
- case 'countDistinct':
545
- value = items.reduce((acc, item) => {
546
- if(item[column] && !acc.includes(item[column]))
547
- acc.push(item[column])
548
- return acc
549
- }, []).length
550
- break
551
-
552
- case 'sum':
553
- value = items.reduce((acc, item) => {
554
- const val = parseFloat(item[column])
555
- return acc + (isNaN(val) ? 0 : val)
556
- }, 0)
557
- break
558
-
559
- case 'avg':
560
- value = items.reduce((acc, item) => {
561
- const val = parseFloat(item[column])
562
- return acc + (isNaN(val) ? 0 : val)
563
- }, 0) / items.length
564
- break
565
-
566
- case 'min':
567
- value = items.reduce((acc, item) => {
568
- const val = parseFloat(item[column])
569
- return Math.min(acc, isNaN(val) ? Number.MAX_SAFE_INTEGER : val)
570
- }, Number.MAX_SAFE_INTEGER)
571
-
572
- if(value === Number.MAX_SAFE_INTEGER)
573
- value = ''
574
- break
575
-
576
- case 'max':
577
- value = items.reduce((acc, item) => {
578
- const val = parseFloat(item[column])
579
- return Math.max(acc, isNaN(val) ? Number.MIN_SAFE_INTEGER : val)
580
- }, Number.MIN_SAFE_INTEGER)
581
-
582
- if(value === Number.MIN_SAFE_INTEGER)
583
- value = ''
584
- break
585
-
586
- case 'first':
587
- value = (items[0] ?? {})[column]
588
- break
589
-
590
- case 'last':
591
- value = (items[items.length - 1] ?? {})[column]
592
- break
593
- }
594
-
595
- return value
596
- }
597
- }
598
-
599
- else{
600
- const Model = await getModelFromDatasource(datasource, opt)
601
- const config = {
602
- columns: datasource.columns
603
- }
604
- const findOpt = await presetToSequelizeList(datasource, {
605
- config,
606
- model: Model,
607
- conn: opt.conn
608
- })
609
-
610
- getValue = async (column, modifier) => {
611
- let value
612
-
613
- switch(modifier){
614
- case 'count':
615
- value = await Model.count({
616
- where: findOpt.where,
617
- col: column
618
- })
619
- break
620
-
621
- case 'countDistinct':
622
- value = await Model.count({
623
- where: findOpt.where,
624
- distinct: true,
625
- col: column
626
- })
627
- break
628
-
629
- case 'sum':
630
- value = await Model.sum(column, findOpt)
631
- break
632
-
633
- case 'avg':
634
- const row = await Model.findOne({
635
- ...findOpt,
636
- attributes: [[fn('AVG', col(column)), 'avg']],
637
- });
638
- value = row?.dataValues.avg ?
639
- round(row.dataValues.avg, 1) :
640
- row?.dataValues.avg
641
- break
642
-
643
- case 'min':
644
- value = await Model.min(column, findOpt)
645
- break
646
-
647
- case 'max':
648
- value = await Model.max(column, findOpt)
649
- break
650
-
651
- case 'first':
652
- const first = await Model.findOne({
653
- ...findOpt,
654
- attributes: [column],
655
- order: [[column, 'ASC']]
656
- })
657
- value = first?.dataValues[column]
658
- break
659
-
660
- case 'last':
661
- const last = await Model.findOne({
662
- ...findOpt,
663
- attributes: [column],
664
- order: [[column, 'DESC']]
665
- })
666
- value = last?.dataValues[column]
667
- break
668
- }
669
-
670
- return value
671
- }
672
- }
673
-
674
- res.value = await getValue(column, columnModifier)
675
- if(column2Enabled){
676
- res.comparedValue = await getValue(column2, column2Modifier)
677
- res.comparedPercent = round(res.value / res.comparedValue * 100, 1)
678
- }
679
- }
680
-
681
- return res
682
- }
683
-
684
- const loadDoughnut = async(params, opt) => {
685
-
686
- const { column, columnModifier, rowsModifier, datasource } = params
687
-
688
- const { items } = params
689
-
690
- let rowsEnum = {}
691
- const datasourceColumn = datasource?.columns.find(_ => _.key === params.rows)
692
- if(datasourceColumn?.type === 'enum'){
693
- if(datasourceColumn?.typeParams){
694
- rowsEnum = datasourceColumn.typeParams.reduce((res, cur) => {
695
- res[cur.value] = cur.text
696
- return res
697
- }, {})
698
- }
699
- else if(datasourceColumn?.enumSrc) {
700
- const [path, key, name] = datasourceColumn.enumSrc.split(':')
701
- if (typeof opt.enumFn === 'function') {
702
- const {items} = await opt.enumFn(path, {}, opt.socket) ?? {}
703
-
704
- if (Array.isArray(items)) {
705
- rowsEnum = items.reduce((res, cur) => {
706
- res[cur[key]] = cur[name]
707
- return res
708
- }, {})
709
- }
710
- }
711
- }
712
- }
713
-
714
- const labels = Object.values(items.reduce((res, cur) => {
715
- let label = cur[params.rows]
716
-
717
- let alias = rowsEnum[cur[params.rows]] ?? label
718
- switch(rowsModifier){
719
- case 'lowercase':
720
- alias = label.toString().toLowerCase()
721
- break
722
-
723
- case 'uppercase':
724
- alias = label.toString().toUpperCase()
725
- break
726
-
727
- case 'capitalize':
728
- alias = capitalize(label)
729
- break
730
-
731
- case 'date':
732
- label = alias = dayjs(label).format('DD/MM/YYYY')
733
- break
734
-
735
- case 'month':
736
- label = alias = dayjs(label).format('MMM')
737
- break
738
-
739
- case 'year':
740
- label = alias = dayjs(label).format('YYYY')
741
- break
742
-
743
- case 'hour':
744
- label = alias = dayjs(label).format('HH')
745
- break
746
-
747
- case 'minute':
748
- label = alias = dayjs(label).format('mm')
749
- break
750
- }
751
-
752
- res[label] = {
753
- label,
754
- alias
755
- }
756
-
757
- return res
758
- }, {}))
759
-
760
- const datasets = []
761
-
762
- const data = labels.map(({ label }) => {
763
- const currentItems = items.filter(_ => {
764
- switch(rowsModifier){
765
-
766
- case 'date':
767
- return dayjs(_[params.rows]).format('DD/MM/YYYY') === label
768
-
769
- case 'month':
770
- return dayjs(_[params.rows]).format('MMM') === label
771
-
772
- case 'year':
773
- return dayjs(_[params.rows]).format('YYYY') === label
774
-
775
- case 'hour':
776
- return dayjs(_[params.rows]).format('HH') === label
777
-
778
- case 'minute':
779
- return dayjs(_[params.rows]).format('mm') === label
780
-
781
- default:
782
- return _[params.rows] === label
783
- }
784
- })
785
-
786
- let value
787
- switch(columnModifier){
788
-
789
- case 'count':
790
- value = currentItems.length
791
- break
792
-
793
- case 'countDistinct':
794
- value = currentItems.reduce((acc, item) => {
795
- if(!acc.includes(item[column]))
796
- acc.push(item[column])
797
- return acc
798
- }, []).length
799
- break
800
-
801
- case 'min':
802
- value = currentItems.reduce((res, cur) => {
803
- let val = parseFloat(cur[column])
804
- return Math.min(res, isNaN(val) ? Number.MAX_SAFE_INTEGER : val)
805
- })
806
- break
807
-
808
- case 'max':
809
- value = currentItems.reduce((acc, item) => {
810
- return Math.max(acc, item[column])
811
- }, Number.MIN_SAFE_INTEGER)
812
- break
813
-
814
- case 'first':
815
- value = (currentItems[0] ?? {})[column]
816
- break
817
-
818
- case 'last':
819
- value = (currentItems[items.length - 1] ?? {})[column]
820
- break
821
-
822
- case 'sum':
823
- default:
824
- value = currentItems.reduce((res, cur) => {
825
- let val = parseFloat(cur[column])
826
- return isNaN(val) ? 0 : val
827
- }, 0)
828
- }
829
-
830
- return value
831
- })
832
-
833
- const backgroundColor = labels.map((_, i) => backgroundColors[i % backgroundColors.length])
834
-
835
- datasets.push({
836
- label: column,
837
- data: data,
838
- backgroundColor,
839
- hoverOffset: 4
840
- })
841
-
842
- return {
843
- labels: labels.map(_ => _.alias),
844
- datasets
845
- }
846
- }
847
-
848
- const loadPie = async(params, opt) => {
849
-
850
- const { rowsModifier, datasource } = params
851
-
852
- const { items } = params
853
-
854
- let rowsEnum = {}
855
- const datasourceColumn = datasource?.columns.find(_ => _.key === params.rows)
856
- if(datasourceColumn?.type === 'enum'){
857
- if(datasourceColumn?.typeParams){
858
- rowsEnum = datasourceColumn.typeParams.reduce((res, cur) => {
859
- res[cur.value] = cur.text
860
- return res
861
- }, {})
862
- }
863
- else if(datasourceColumn?.enumSrc) {
864
- const [path, key, name] = datasourceColumn.enumSrc.split(':')
865
- if (typeof opt.enumFn === 'function') {
866
- const {items} = await opt.enumFn(path, {}, opt.socket) ?? {}
867
-
868
- if (Array.isArray(items)) {
869
- rowsEnum = items.reduce((res, cur) => {
870
- res[cur[key]] = cur[name]
871
- return res
872
- }, {})
873
- }
874
- }
875
- }
876
- }
877
-
878
- const labels = Object.values(items.reduce((res, cur) => {
879
- let label = cur[params.rows]
880
-
881
- let alias = rowsEnum[cur[params.rows]] ?? label
882
- switch(rowsModifier){
883
- case 'lowercase':
884
- alias = label.toString().toLowerCase()
885
- break
886
-
887
- case 'uppercase':
888
- alias = label.toString().toUpperCase()
889
- break
890
-
891
- case 'capitalize':
892
- alias = capitalize(label)
893
- break
894
-
895
- case 'date':
896
- label = alias = dayjs(label).format('DD/MM/YYYY')
897
- break
898
-
899
- case 'month':
900
- label = alias = dayjs(label).format('MMM')
901
- break
902
-
903
- case 'year':
904
- label = alias = dayjs(label).format('YYYY')
905
- break
906
-
907
- case 'hour':
908
- label = alias = dayjs(label).format('HH')
909
- break
910
-
911
- case 'minute':
912
- label = alias = dayjs(label).format('mm')
913
- break
914
- }
915
-
916
- res[label] = {
917
- label,
918
- alias
919
- }
920
-
921
- return res
922
- }, {}))
923
-
924
- const datasets = []
925
-
926
- for(let column of params.column){
927
-
928
- const data = labels.map(({ label }) => {
929
-
930
- const currentItems = items.filter(_ => {
931
-
932
- switch(rowsModifier){
933
-
934
- case 'date':
935
- return dayjs(_[params.rows]).format('DD/MM/YYYY') === label
936
- break
937
-
938
- case 'month':
939
- return dayjs(_[params.rows]).format('MMM') === label
940
- break
941
-
942
- case 'year':
943
- return dayjs(_[params.rows]).format('YYYY') === label
944
- break
945
-
946
- case 'hour':
947
- return dayjs(_[params.rows]).format('HH') === label
948
- break
949
-
950
- case 'minute':
951
- return dayjs(_[params.rows]).format('mm') === label
952
- break
953
-
954
- default:
955
- return _[params.rows] === label
956
- }
957
- })
958
-
959
- let value
960
- switch(column.modifier){
961
-
962
- case 'count':
963
- value = currentItems.length
964
- break
965
-
966
- case 'countDistinct':
967
- value = currentItems.reduce((acc, item) => {
968
- if(!acc.includes(item[column.key]))
969
- acc.push(item[column.key])
970
- return acc
971
- }, []).length
972
- break
973
-
974
- case 'min':
975
- value = currentItems.reduce((res, cur) => {
976
- let val = parseFloat(cur[column.key])
977
- return Math.min(res, isNaN(val) ? Number.MAX_SAFE_INTEGER : val)
978
- })
979
- break
980
-
981
- case 'max':
982
- value = currentItems.reduce((acc, item) => {
983
- return Math.max(acc, item[column.key])
984
- }, Number.MIN_SAFE_INTEGER)
985
- break
986
-
987
- case 'first':
988
- value = (currentItems[0] ?? {})[column.key]
989
- break
990
-
991
- case 'last':
992
- value = (currentItems[items.length - 1] ?? {})[column.key]
993
- break
994
-
995
- case 'sum':
996
- default:
997
- value = currentItems.reduce((res, cur) => {
998
- let val = parseFloat(cur[column.key])
999
- return isNaN(val) ? 0 : val
1000
- }, 0)
1001
- }
1002
-
1003
- return value
1004
- })
1005
-
1006
- const backgroundColor = labels.map((_, i) => backgroundColors[i % backgroundColors.length])
1007
-
1008
- datasets.push({
1009
- label: column.label ?? column.key,
1010
- data: data,
1011
- backgroundColor,
1012
- hoverOffset: 4
1013
- })
1014
-
1015
- if(!params.multipleValues)
1016
- break
1017
- }
1018
-
1019
- return {
1020
- labels: labels.map(_ => _.alias),
1021
- datasets
1022
- }
1023
- }
1024
-
1025
- const loadPolarArea = async(params, opt) => {
1026
- return loadDoughnut(params, opt)
1027
- }
1028
-
1029
- const loadVirtualTable = async(params, opt) => {
1030
-
1031
- const res = await getDatasourceItems({
1032
- ...params.datasource,
1033
- sorts: [
1034
- { key:'id', type:'asc' }
1035
- ]
1036
- }, opt)
1037
-
1038
- let { items, hasNext } = res
1039
- let { datasourceColumns } = params
1040
-
1041
- items = items.map(item => {
1042
- const obj = {}
1043
-
1044
- for(let column of datasourceColumns){
1045
- if(column.visible || [ 'id' ].includes(column.key)){
1046
- obj[column.key] = item[column.key]
1047
- }
1048
- }
1049
-
1050
- return obj
1051
- })
1052
-
1053
- return {
1054
- items,
1055
- hasNext
1056
- }
1057
- }
1058
-
1059
- const loadGHeatMaps = async(params, opt) => {
1060
- return {
1061
- items: params.items
1062
- }
1063
- }
1064
-
1065
126
 
1066
127
  module.exports = {
1067
128
  getModelFromDatasource,
@@ -1070,11 +131,10 @@ module.exports = {
1070
131
 
1071
132
  backgroundColors,
1072
133
 
1073
- loadBarChart,
134
+ /*loadBarChart,
1074
135
  loadMetric,
1075
136
  loadDoughnut,
1076
137
  loadPie,
1077
138
  loadPolarArea,
1078
- loadVirtualTable,
1079
- loadGHeatMaps
139
+ loadVirtualTable*/
1080
140
  }