waibu-db 1.1.16 → 1.1.18

package/bajoTemplate/partial/crud/~echarts-window.html

@@ -3,7 +3,7 @@
     <c:card-title t:content="<%= attr.name %>" />
   </c:card-header>
   <c:card-body>
-    <c:wdb-echarts style="height: 150px;" option="<%= attr.option %>">
+    <c:wdb-echarts style="height: 150px;" setting="<%= attr.setting %>">
     </c:wdb-echarts>
   </c:card-body>
 </c:card>

package/lib/crud/helper/add-ons-handler.js

@@ -1,4 +1,5 @@
 async function addOnsHandler ({ req, reply, data, schema }) {
+  const { escape } = this.app.waibu
   const { base64JsonEncode } = this.app.waibuMpa
   const { statAggregate } = this.app.waibuDb
   const { get, map, pick, pullAt } = this.lib._
@@ -17,7 +18,7 @@ async function addOnsHandler ({ req, reply, data, schema }) {
       for (const d of resp.data) {
         const key = o.dbOpts.fields[0]
         data.push({
-          name: d[key],
+          name: escape(d[key]),
           value: d[key + 'Count']
         })
       }
@@ -37,7 +38,7 @@ async function addOnsHandler ({ req, reply, data, schema }) {
   if (dropped.length > 0) pullAt(opts, dropped)
   return map(opts, o => {
     return {
-      data: { option: o.chartOpts, name: o.name },
+      data: { setting: o.chartOpts, name: o.name },
       resource: 'waibuDb.partial:/crud/~echarts-window.html'
     }
   })

package/lib/prep-crud.js

@@ -2,7 +2,7 @@ function prepCrud ({ model, body, id, req, reply, options = {}, args }) {
   const { parseFilter } = this.app.waibu
   const { pascalCase } = this.app.bajo
   const { cloneDeep, has } = this.lib._
-  const cfgWeb = this.app.waibu.config
+  const cfgWeb = this.app.waibu.getConfig()
   const opts = cloneDeep(options)
   const params = this.getParams(req, ...args)
   for (const k of ['count', 'fields']) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-db",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "DB Helper",
   "main": "index.js",
   "scripts": {

package/plugin/method/stat/aggregate.js

@@ -7,6 +7,7 @@ async function aggregate ({ model, req, reply, options = {} }) {
   for (const item of ['group', 'aggregate']) {
     opts[item] = options[item] ?? req.params[item] ?? req.query[item]
   }
+  opts.aggregate = opts.aggregate ?? 'count'
   return await statAggregate(name, parseFilter(req), opts)
 }
 

package/plugin/method/stat/histogram.js

@@ -7,6 +7,7 @@ async function histogram ({ model, req, reply, options = {} }) {
   for (const item of ['type', 'group', 'aggregate']) {
     opts[item] = options[item] ?? req.params[item] ?? req.query[item]
   }
+  opts.aggregate = opts.aggregate ?? 'count'
   return await statHistogram(name, parseFilter(req), opts)
 }
 

package/waibuBootstrap/theme/component/factory/echarts-bar.js

@@ -0,0 +1,59 @@
+import echartsBase from './echarts.js'
+
+async function echartsBar () {
+  const WdbEcharts = await echartsBase.call(this)
+
+  return class WdbEchartsBar extends WdbEcharts {
+    build = async () => {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { merge } = this.plugin.lib._
+      merge(this.setting, {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          containLabel: true,
+          top: 8,
+          bottom: 0,
+          left: 0,
+          right: 0
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: [],
+          type: 'bar'
+        }]
+      })
+      const onLoad = []
+      if (this.params.attr.remote) {
+        const remote = this._parseBase64Attr(this.params.attr.remote)
+        onLoad.push(`
+          this.chart.showLoading('default', { text: '' })
+          const remote = ${jsonStringify(remote, true)}
+          const agg = remote.filter.aggregate ?? 'count'
+          const recs = await wmpa.fetchApi(remote.url, { fetching: false }, remote.filter)
+          this.chart.hideLoading()
+          this.option = {
+            xAxis: { data: _.map(recs, remote.key.name) },
+            series: [{ type: 'bar', data: _.map(recs, remote.key.value ?? agg ) }]
+          }
+        `)
+      }
+      this._build({ onLoad })
+    }
+  }
+}
+
+export default echartsBar

package/waibuBootstrap/theme/component/factory/echarts-pie.js

@@ -0,0 +1,39 @@
+import echartsBase from './echarts.js'
+
+async function echartsPie () {
+  const WdbEcharts = await echartsBase.call(this)
+
+  return class WdbEchartsPie extends WdbEcharts {
+    build = async () => {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { merge } = this.plugin.lib._
+      merge(this.setting, {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [{
+          type: 'pie',
+          data: []
+        }]
+      })
+      const onLoad = []
+      if (this.params.attr.remote) {
+        const remote = this._parseBase64Attr(this.params.attr.remote)
+        onLoad.push(`
+          this.chart.showLoading('default', { text: '' })
+          const remote = ${jsonStringify(remote, true)}
+          const agg = remote.filter.aggregate ?? 'count'
+          const keyName = remote.key.name ?? remote.filter.group
+          const keyValue = remote.key.value ?? keyName + _.upperFirst(agg)
+          const recs = await wmpa.fetchApi(remote.url, { fetching: false }, remote.filter)
+          const data = recs.map(r => ({ name: r[keyName], value: r[keyValue] }))
+          this.chart.hideLoading()
+          this.option = { series: [{ type: 'pie', data }]}
+        `)
+      }
+      this._build({ onLoad })
+    }
+  }
+}
+
+export default echartsPie

package/waibuBootstrap/theme/component/factory/echarts.js

@@ -10,7 +10,8 @@ async function echarts () {
 
     constructor (options) {
       super(options)
-      this.defOption = {
+      const { generateId } = this.plugin.app.bajo
+      this.defSetting = {
         grid: {
           top: 8,
           bottom: 20,
@@ -19,49 +20,48 @@ async function echarts () {
         }
       }
       this.params.tag = 'div'
+      this.params.attr.id = this.params.attr.id ?? generateId('alpha')
+      this.params.attr['x-data'] = `chart${this.params.attr.id}`
+      this.params.attr['@resize.window.debounce.500ms'] = 'resize()'
+      this.params.attr['@load.window'] = 'await windowLoad()'
     }
 
-    build = async () => {
-      const { generateId } = this.plugin.app.bajo
-      const { base64JsonDecode, jsonStringify } = this.plugin.app.waibuMpa
-      const { merge, cloneDeep, omit } = this.plugin.app.bajo.lib._
-      this.params.attr.id = generateId('alpha')
-      this.params.attr['x-data'] = `chart${this.params.attr.id}`
-      this.params.attr['x-bind'] = 'resize'
-      let option = cloneDeep(this.defOption)
-      if (this.params.attr.option === true) this.params.attr.option = 'e30='
-      if (this.params.attr.option) option = merge(option, base64JsonDecode(this.params.attr.option))
-      this.params.append = `
-        <script>
-          document.addEventListener('alpine:init', () => {
-            Alpine.data('chart${this.params.attr.id}', () => {
-              let chart
-              return {
-                init () {
-                  const el = document.getElementById('${this.params.attr.id}')
-                  chart = echarts.init(el, null, { renderer: 'canvas' })
-                  chart.setOption(this.option)
-                  this.$watch('option', val => {
-                    chart.setOption(val)
-                  })
-                },
-                get chart () {
-                  return chart
-                },
-                resize: {
-                  ['@resize.window.debounce.500ms']() {
-                    if (chart) {
-                      chart.resize()
-                    }
-                  }
-                },
-                option: ${jsonStringify(option, true)}
+    _build = ({ setting = {}, onLoad = [] } = {}) => {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { merge, isArray } = this.plugin.app.bajo.lib._
+      if (!isArray(onLoad)) onLoad = [onLoad]
+      const option = merge({}, this.defSetting, this.setting, setting)
+      this.component.addScriptBlock('alpineInit', `
+        Alpine.data('chart${this.params.attr.id}', () => {
+          let chart
+          return {
+            init () {
+              const el = document.getElementById('${this.params.attr.id}')
+              chart = echarts.init(el, null, { renderer: 'canvas' })
+              chart.setOption(this.option)
+              this.$watch('option', val => {
+                chart.setOption(val)
+              })
+            },
+            get chart () {
+              return chart
+            },
+            resize () {
+              if (chart) {
+                chart.resize()
               }
-            })
-          })
-        </script>
-      `
-      this.params.attr = omit(this.params.attr, ['option'])
+            },
+            async windowLoad () {
+              ${onLoad.join('\n')}
+            },
+            option: ${jsonStringify(option, true)}
+          }
+        })
+      `)
+    }
+
+    build = async () => {
+      this._build()
     }
   }
 }