@mixd-id/web-scaffold 0.1.230406341 → 0.1.230406342

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406341",
+  "version": "0.1.230406342",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,6 +26,7 @@
     },
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
+    "./dashboard": "./src/utils/dashboard.js",
     "./listview": "./src/utils/listview.js",
     "./preset-selector": {
       "require": "./src/utils/preset-selector.js",

package/src/components/Grid.vue

@@ -17,6 +17,8 @@ export default{
 
 	mixins: [ componentMixin ],
 
+  name: "Grid",
+
 	props:{
 		items: Array
 	}

package/src/components/VirtualTable.vue

@@ -103,7 +103,7 @@ export default{
     }
   },
 
-  inject: [ 'listStyle' ],
+  inject: [ 'emitRoot', 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],
 
@@ -114,6 +114,8 @@ export default{
 
     itemClass: String,
 
+    uid: String,
+
 		items: Array,
 
 		pinned: Function,
@@ -314,6 +316,8 @@ export default{
 			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
 					this.$emit('scroll-end')
+          if(typeof this.emitRoot === 'function')
+            this.emitRoot.apply(this, [ 'scroll-end', this.$props ])
 					this.isOnEndScroll = true
 				}
 			}

package/src/configs/dashboard/bar.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"BarChart",
+
+  props:{
+    height:200
+  }
+
+}

package/src/configs/dashboard/collection-1.js

@@ -0,0 +1,5 @@
+export const component = {
+
+  props: {}
+
+}

package/src/configs/dashboard/doughnut.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Doughnut",
+
+  props:{}
+
+}

package/src/configs/dashboard/grid-2.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-2',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-3.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-3',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-4.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-2',
+      'md:grid-cols-4',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid.js

@@ -0,0 +1,13 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+    columns:['grid-cols-2', 'md:grid-cols-5', '', ''],
+    gap:['gap-5', 'md:gap-5', '', ''],
+    alignItems:['items-start', 'md:items-start', '', ''],
+  }
+
+}

package/src/configs/dashboard/metric.js

@@ -0,0 +1,10 @@
+export const component = {
+
+  type:"Metric",
+
+  props:{
+    columnModifier:"sum",
+    column2Modifier:"sum"
+  }
+
+}

package/src/configs/dashboard/pie.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Pie",
+
+  props:{}
+
+}

package/src/configs/dashboard/polar-area.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"PolarArea",
+
+  props:{}
+
+}

package/src/configs/dashboard/virtual-table.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"VirtualTable",
+
+  props:{
+    height:[ "h-[50vh]", "md:h-[50vh]", "", "" ]
+  }
+
+}

package/src/utils/dashboard.js

@@ -0,0 +1,100 @@
+const {presetToSequelizeList} = require("./preset-selector");
+
+const backgroundColors = [
+  '#5D9CEC',
+  '#A0D468',
+  '#FFCE54',
+  '#FC6E51',
+  '#48CFAD',
+  '#AC92EC',
+  '#4FC1E9',
+  '#FFCE54',
+  '#ED5565',
+  '#EC87C0'
+]
+
+const getModelFromDatasource = async (datasource, opt) => {
+  if(!opt.conn.models[datasource.datasourceUid]){
+    const tableColumns = await getSequelizeColumns(datasource.columns, opt)
+
+    opt.conn.define(datasource.datasourceUid, tableColumns, {
+      tableName: `datasource_${datasource.datasourceUid}`
+    })
+  }
+
+  return opt.conn.models[datasource.datasourceUid]
+}
+
+const getDatasourceItems = async (datasource, opt) => {
+
+  const Model = await getModelFromDatasource(datasource, opt)
+  const config = {
+    columns: datasource.columns
+  }
+  const findOpt = await presetToSequelizeList(datasource, {
+    config,
+    model: Model,
+    conn: opt.conn,
+    limit: 100
+  })
+
+  return await Model.findAll({
+    ...findOpt,
+    raw: true
+  })
+}
+
+const getSequelizeColumns = async (columns, opt) => {
+
+  const { DataTypes } = opt.Sequelize
+
+  const tableColumns = {
+    id: {
+      type: DataTypes.INTEGER,
+      autoIncrement: true,
+      primaryKey: true,
+      allowNull: false,
+    },
+    createdAt: { type: DataTypes.DATE },
+    updatedAt: { type: DataTypes.DATE },
+  }
+
+  for(let column of columns){
+
+    let type
+    switch(column.type){
+      case 'date':
+        type = DataTypes.DATE
+        break
+      case 'number':
+        type = DataTypes.BIGINT
+        break
+
+      default:
+        type = DataTypes.STRING(column.maxLength ?? 40)
+        break
+    }
+
+    tableColumns[column.key] = {
+      type
+    }
+  }
+
+  return tableColumns
+}
+
+
+module.exports = {
+  getModelFromDatasource,
+  getDatasourceItems,
+  getSequelizeColumns,
+
+  backgroundColors,
+
+  /*loadBarChart,
+  loadMetric,
+  loadDoughnut,
+  loadPie,
+  loadPolarArea,
+  loadVirtualTable*/
+}

package/src/widgets/Dashboard/BarChart.vue

@@ -49,6 +49,7 @@ export default{
       return {
         responsive: true,
         maintainAspectRatio: false,
+        borderRadius: 4,
         plugins: {
           legend: {
             display: false // This hides the legend
@@ -69,7 +70,8 @@ export default{
               },
               minRotation: 0,
               maxRotation: 0
-            }
+            },
+            stacked: !!this.stacked,
           },
           y: {
             beginAtZero: true,
@@ -82,6 +84,7 @@ export default{
                 return `rgba(255,255,255, .1)`
               }
             },
+            stacked: !!this.stacked,
           }
         },
         onClick: function(evt, evt2) {
@@ -98,7 +101,7 @@ export default{
     },
 
     yLegends(){
-      return this.value.yLegends ?? []
+      return this.value?.yLegends ?? []
     }
 
   },
@@ -126,10 +129,8 @@ export default{
 
     datasourceUid: String,
 
-    usePercentage: {
-      type: Number,
-      default: false
-    },
+    usePercentage: [ Boolean, Number ],
+    stacked: [ Boolean, Number ],
 
     barHeight: {
       type: Number,

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Datasource</label>
-      <div>
-        <Dropdown class="w-[120px]"
-                  :readonly="readonly"
-                  v-model="value.props.datasourceUid"
-                  @change="delete value.props.columns">
-          <option v-for="obj in datasource"
-                  :value="obj.uid">
-            {{ obj.name }}
-          </option>
-        </Dropdown>
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-row gap-2">
+        <label class="flex-1">Datasource</label>
+        <button type="button" class="text-primary"
+                @click="previewDatasource(selectedDatasource)">Preview</button>
       </div>
+      <Dropdown class="min-w-[150px]"
+                :readonly="readonly"
+                v-model="value.props.datasourceUid"
+                @change="delete value.props.columns">
+        <option v-for="obj in datasource"
+                :value="obj.uid">
+          {{ obj.name }}
+        </option>
+      </Dropdown>
     </div>
 
     <div class="flex flex-col gap-1">
@@ -60,9 +62,9 @@
               </div>
               <div class="flex-1">
                 <Dropdown v-model="item.key" :readonly="readonly">
-                  <option v-for="column in selectedDatasource?.columns"
+                  <option v-for="column in selectedDatasourceColumns"
                           :value="column.key">
-                    {{ column.label }}
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
                   </option>
                 </Dropdown>
               </div>
@@ -111,9 +113,9 @@
               </div>
               <div class="flex-1">
                 <Dropdown v-model="item.key">
-                  <option v-for="column in selectedDatasource?.columns"
+                  <option v-for="column in selectedDatasourceColumns"
                           :value="column.key">
-                    {{ column.label }}
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
                   </option>
                 </Dropdown>
               </div>
@@ -138,14 +140,9 @@
         <Switch v-model="value.props.usePercentage" />
       </div>
 
-      <div class="flex flex-row items-center gap-2">
-        <label class="flex-1">Height</label>
-        <Dropdown class="w-[100px]"
-                  v-model.number="value.props.barHeight">
-          <option :value="200">200px</option>
-          <option :value="300">300px</option>
-          <option :value="400">400px</option>
-        </Dropdown>
+      <div v-if="value.props.yAxeMultiple" class="flex flex-row items-center gap-2">
+        <label class="flex-1">Stacked</label>
+        <Switch v-model="value.props.stacked" />
       </div>
 
     </div>
@@ -164,6 +161,14 @@ export default{
       return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
     },
 
+    selectedDatasourceColumns(){
+      if(!this.selectedDatasource) return []
+
+      return this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          this.selectedDatasource.columns
+    },
+
     xAxes(){
       if(!Array.isArray(this.value.props.xAxes))
         this.value.props.xAxes = [{ key:"" }]
@@ -188,7 +193,7 @@ export default{
 
   },
 
-  inject: [ 'appStyle' ],
+  inject: [ 'appStyle', 'previewDatasource' ],
 
   methods: {
 

package/src/widgets/Dashboard/DatasourcePreview.vue

@@ -0,0 +1,83 @@
+<template>
+	<Modal ref="modal"
+         dismissable="true"
+         width="600"
+         height="600"
+         @dismiss="close">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Data Preview</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col">
+
+      <VirtualTable class="flex-1" :columns="columns" :items="res?.items" />
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'alert', 'socket' ],
+
+  props: {
+    src: String
+  },
+
+	data(){
+		return {
+      columns: [],
+      datasource: null,
+      res: null
+		}
+	},
+
+	methods: {
+
+    close(){
+      this.$refs.modal.close()
+    },
+
+    load(){
+      this.socket.send(this.src, {
+        datasource: this.datasource
+      })
+        .then(res => {
+          this.res = res
+
+          this.columns = this.datasource.pivot?.enabled ?
+              this.datasource.pivot.columns :
+              this.datasource.columns
+        })
+        .catch(err => this.alert(err))
+    },
+
+		open(datasource){
+      this.datasource = datasource
+      this.$refs.modal.open()
+      this.load()
+		},
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -36,7 +36,7 @@
                 :class="dashboardStyle.button"
                 class="flex flex-row items-start gap-2">
           <button type="button" class="flex-1 text-left" @click="add(datasource)">{{ datasource.name }}</button>
-          <button type="button" class="py-1" :ref="`btn${idx}`" @click="$refs.contextMenu.open($refs[`btn${idx}`][0], { datasource })">
+          <button v-if="contextMenuItems.length > 0" type="button" class="py-1" :ref="`btn${idx}`" @click="$refs.contextMenu.open($refs[`btn${idx}`][0], { datasource })">
             <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/></svg>
           </button>
         </div>
@@ -44,10 +44,13 @@
         <ContextMenu ref="contextMenu" position="bottom-right">
           <template #default="{ context }">
             <div class="flex flex-col min-w-[200px]">
-              <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
-                      @click="remove(context.datasource)">
-                {{ $t('Remove') }}
-              </button>
+              <div v-for="item in contextMenuItems">
+                <button v-if="item.type === 'remove'" class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                        @click="remove(context.datasource)">
+                  {{ $t('Remove') }}
+                </button>
+              </div>
+
             </div>
           </template>
         </ContextMenu>
@@ -87,6 +90,17 @@ export default{
 
     src: String,
 
+  },
+
+  computed: {
+
+    contextMenuItems(){
+      return [
+        this.removeSrc ? { type:'remove' } : null
+      ]
+        .filter(_=>_)
+    }
+
   },
 
 	data(){

package/src/widgets/Dashboard/Doughnut.vue

@@ -35,6 +35,7 @@ export default{
       return {
         responsive: true,
         maintainAspectRatio: true,
+        /*animation: false,*/
         plugins: {
           legend: {
             display: false