@mixd-id/web-scaffold 0.1.230406354 → 0.1.230406356

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406354",
+  "version": "0.1.230406356",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -53,6 +53,7 @@
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
+    "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.2",
     "prismjs": "^1.28.0",

package/src/components/GHeatMaps.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div v-if="readyState === 1" :class="$style.comp">
     <div class="flex flex-row items-center gap-2 p-1 px-3 p-2">
       <div class="flex-1">
         <label class="text-text-400">{{ label }}</label>
@@ -37,11 +37,15 @@
 
     </div>
 	</div>
+  <div v-else :class="$style.comp" class="min-h-[200px] flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
 </template>
 
 <script>
 
 import { Loader } from '@googlemaps/js-api-loader';
+import {readyStateMixin} from "../mixin/ready-state";
 
 let loader = null
 
@@ -70,6 +74,8 @@ export default{
 		}
 	},
 
+  mixins: [ readyStateMixin ],
+
 	mounted() {
 		this.load()
 	},
@@ -196,23 +202,7 @@ export default{
 						]
 					});
 
-					var heatMapData = [
-						/*{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
-						new google.maps.LatLng(37.782, -122.445),
-						{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
-						{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
-						{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
-						new google.maps.LatLng(37.782, -122.437),
-						{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
-
-						{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
-						{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
-						new google.maps.LatLng(37.785, -122.443),
-						{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
-						new google.maps.LatLng(37.785, -122.439),
-						{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
-						{location: new google.maps.LatLng(37.785, -122.435), weight: 3}*/
-					];
+					var heatMapData = [];
 
 					this.datasets.forEach((item) => {
 						if(item[0] && item[1] && item[2]){

package/src/components/List.vue

@@ -368,6 +368,7 @@ export default{
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
+              console.log(data)
               generatePivotColumns(this.preset, data.items)
               generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)

package/src/components/VirtualGrid.vue

@@ -1,18 +1,28 @@
 <template>
 	<div :class="$style.virtualGrid" @click="resize">
 
-		<div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
-			<div :class="spacerClass" ref="spacer" :style="spacerStyle">
-				<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
-						 @click="">
-					<slot name="item" :item="item" :index="index"></slot>
-				</div>
-        <slot name="end"></slot>
-			</div>
-		</div>
+    <slot name="start"></slot>
+
+    <div ref="container" class="flex-1 overflow-y-auto">
+      <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
+        <div :class="spacerClass" ref="spacer" :style="spacerStyle">
+          <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
+               @click="">
+            <slot name="item" :item="item" :index="index">
+              {{ item }}
+            </slot>
+          </div>
+          <slot name="end"></slot>
+        </div>
+      </div>
+    </div>
+
+    <slot name="end"></slot>
 
 		<div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
-			<slot name="item" :item="items[0]" :index="0"></slot>
+			<slot name="item" :item="items[0]" :index="0">
+        {{ items[0] }}
+      </slot>
 		</div>
 
 		<Teleport v-if="optBar" :to="optBar">
@@ -70,9 +80,11 @@ export default{
 	methods: {
 
 		handleScroll: throttle(function(){
-			this.scrollTop = this.$el.scrollTop
+      if(!this.$refs.scroller) return
+
+			this.scrollTop = this.$refs.container.scrollTop
 
-			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$el.clientHeight - this.itemHeight){
+			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.container.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
 					this.$emit('scroll-end')
 					this.isOnEndScroll = true
@@ -86,7 +98,7 @@ export default{
 		}, 16),
 
 		init(){
-			this.$el.addEventListener(
+			this.$refs.container.addEventListener(
 				"scroll",
 				this.handleScroll,
 				this.passiveScrollSupported() ? { passive: true } : false
@@ -121,9 +133,9 @@ export default{
 
 			this.$nextTick(() => {
 				if(this.$refs.calc){
-					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
-						window.getComputedStyle(this.$el).height :
-						window.getComputedStyle(this.$el).maxHeight)
+					const elHeight = parseInt(window.getComputedStyle(this.$refs.container).height !== '0px' ?
+						window.getComputedStyle(this.$refs.container).height :
+						window.getComputedStyle(this.$refs.container).maxHeight)
 
 					if(isNaN(elHeight)) return
 
@@ -256,7 +268,7 @@ export default{
 <style module>
 
 .virtualGrid{
-	@apply flex-1 overflow-y-auto;
+	@apply flex flex-col gap-3;
 }
 
 .scroller{

package/src/components/VirtualTable.vue

@@ -90,19 +90,11 @@
 import throttle from "lodash/throttle";
 import dayjs from "dayjs";
 import {accessNestedObject} from "../utils/helpers.mjs";
-import {useDatasource} from "../stores/datasource";
 
 const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
-  setup(){
-    const datasource = useDatasource()
-    return {
-      datasource
-    }
-  },
-
   inject: [ 'emitRoot', 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],

package/src/mixin/ready-state.js

@@ -0,0 +1,37 @@
+import {useEmitter} from "../utils/event-bus";
+
+export const readyStateMixin = {
+
+  data(){
+    return {
+      emitter: null,
+      readyState: 1,
+    }
+  },
+
+  methods: {
+
+    resetState(){
+      this.setState(1)
+    },
+
+    setState(state){
+      this.readyState = state
+    },
+
+  },
+
+  mounted() {
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.readyState`, (state) => {
+      this.readyState = state
+    })
+  },
+
+  props: {
+
+    uid: String
+
+  }
+
+}

package/src/utils/dashboard.js

@@ -56,7 +56,8 @@ const getModelFromDatasource = async (datasource, opt) => {
         const tableColumns = await getSequelizeColumns(datasource.columns, opt)
 
         opt.conn.define(datasource.datasourceUid, tableColumns, {
-          tableName: `datasource_${datasource.datasourceUid}`
+          tableName: `datasource_${datasource.datasourceUid}`,
+          timestamps: false
         })
       }
 
@@ -93,12 +94,11 @@ const getSequelizeColumns = async (columns, opt) => {
       autoIncrement: true,
       primaryKey: true,
       allowNull: false,
-    },
-    createdAt: { type: DataTypes.DATE },
-    updatedAt: { type: DataTypes.DATE },
+    }
   }
 
   for(let column of columns){
+    if(column.key === 'id') continue
 
     let type
     switch(column.type){

package/src/utils/event-bus.js

@@ -0,0 +1,8 @@
+// eventBus.js
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+export const useEmitter = () => {
+  return emitter
+}

package/src/utils/helpers.mjs

@@ -372,13 +372,20 @@ const round = (num, precision = 0) => {
   return Math.round(n) / p
 }
 
-const invokeAfterIdle = (callback, delay = 1800) => {
+let invokeAfterIdleStore = []
+const invokeAfterIdle = (callback, delay = 1300) => {
   let timeoutId
 
   return function(){
+    if(invokeAfterIdleStore.includes(callback))
+      return
+
+    invokeAfterIdleStore.push(callback)
+
     window.clearTimeout(timeoutId)
     timeoutId = window.setTimeout(() => {
       callback.apply(this, arguments)
+      invokeAfterIdleStore.splice(invokeAfterIdleStore.indexOf(callback), 1)
     }, delay)
   }
 }

package/src/utils/preset-selector.js

@@ -1274,7 +1274,7 @@ const presetToSequelizeList = async(preset, {
 
   if(!initialOrder){
     initialOrder = [
-      [ updatedAtField.fieldName, 'desc' ],
+      ...(updatedAtField ? [[ updatedAtField.fieldName, 'desc' ]] : []),
       [ 'id', 'desc' ],
     ]
   }

package/src/utils/preset-selector.mjs

@@ -1,3 +1,5 @@
+import md5 from "md5";
+
 const sortsFn = function(a, b, sorts, index){
 
   const sort = sorts[index]
@@ -176,10 +178,15 @@ const generateTotalColumns = (preset, items) => {
   items.push(totalItem)
 }
 
+const getPresetUid = function(extra = ''){
+  return md5('preset-' + new Date().getTime() + extra)
+}
+
 export {
   sortsFn,
   pickColumns,
   setupConfig,
   generatePivotColumns,
-  generateTotalColumns
+  generateTotalColumns,
+  getPresetUid
 }

package/src/widgets/Dashboard/BarChart.vue

@@ -1,10 +1,8 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="cStyle">
 
-    <div v-if="readyState === 2" class="flex-1 flex">
-      <div :style="barStyles" class="flex-1 flex items-center justify-center">
-        <svg class="animate-spin aspect-square w-[24px] h-[24px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-      </div>
+    <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
+      <label class="text-text-300">Loading...</label>
     </div>
 
     <div v-else-if="isError" class="flex-1 flex">
@@ -76,6 +74,7 @@ import {Bar} from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import { color } from 'chart.js/helpers'
 import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
 
 export default{
 
@@ -92,6 +91,12 @@ export default{
       }
     },
 
+    cStyle(){
+      return {
+        minHeight: this.height
+      }
+    },
+
     chartData(){
       if(!this.value?.datasets)
         return { labels:[], datasets:[] }
@@ -219,9 +224,8 @@ export default{
         '#EC87C0'
       ],
 
-      datasets: null,
-
-      readyState: 1,
+      height: '',
+      datasets: null
     }
   },
 
@@ -261,14 +265,6 @@ export default{
 
     },
 
-    resetState(){
-      this.setState(1)
-    },
-
-    setState(state){
-      this.readyState = state
-    },
-
     toggleExcludes(yLegend){
       if(this.excluded.includes(yLegend.key))
         this.excluded.splice(this.excluded.indexOf(yLegend.key), 1)
@@ -278,6 +274,12 @@ export default{
 
   },
 
+  mounted() {
+    this.height = this.$el.clientHeight + 'px'
+  },
+
+  mixins: [ readyStateMixin ],
+
   props: {
 
     datasourceUid: String,
@@ -309,7 +311,9 @@ export default{
 
     value: Object,
 
-    interactions: Array
+    interactions: Array,
+
+    uid: String
 
   },
 
@@ -321,7 +325,7 @@ export default{
 
 .comp{
   @apply border-[1px] border-text-50 bg-base-500 rounded-lg;
-  @apply p-3 flex flex-col;
+  @apply p-3 flex flex-col min-h-[200px];
 }
 
 </style>

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -59,7 +59,7 @@
         </div>
 
         <ListItem :items="cXAxes" class="mt-2 bg-transparent" container-class="flex flex-col gap-1"
-                  @reorder="(from, to) => { cXAxes.splice(to, 0, cXAxes.splice(from, 1)[0]); }">
+                  @reorder="(from, to) => { cXAxes.splice(to, 0, cXAxes.splice(from, 1)[0]); $emit('change') }">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-2">
               <div data-reorder v-if="cXAxes.length > 1 && !readonly">
@@ -126,7 +126,7 @@
         </div>
 
         <ListItem :items="cYAxes" class="mt-2 bg-transparent" container-class="flex flex-col gap-1"
-                  @reorder="(from, to) => { cYAxes.splice(to, 0, cYAxes.splice(from, 1)[0]); }">
+                  @reorder="(from, to) => { cYAxes.splice(to, 0, cYAxes.splice(from, 1)[0]); $emit('change') }">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-2">
               <div data-reorder v-if="cYAxes.length > 1">
@@ -238,7 +238,10 @@ export default{
 
       return this.selectedDatasource.pivot?.enabled ?
           this.selectedDatasource.pivot.columns :
-          this.selectedDatasource.columns
+          [
+            ...(this.selectedDatasource.computedColumns ?? []),
+            ...this.selectedDatasource.columns
+          ]
     },
 
     xAxes(){

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -83,7 +83,6 @@ export default{
     add(item){
       const newItem = JSON.parse(JSON.stringify(item))
       this.close()
-      console.log(newItem)
       this.$emit('add', newItem)
     },
 

package/src/widgets/Dashboard/Doughnut.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2" @click="log(datasourceUid)">
+  <div v-if="readyState === 1" class="flex flex-col gap-2">
 
     <Doughnut class="aspect-square"
          :options="chartOptions"
@@ -10,6 +10,10 @@
     </div>
 
   </div>
+
+  <div v-else-if="readyState === 2" class="aspect-square flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
 </template>
 
 <script>
@@ -18,6 +22,7 @@ import { Doughnut } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import {color} from "chart.js/helpers";
 import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
 
 export default{
 
@@ -88,7 +93,7 @@ export default{
         '#FFCE54',
         '#ED5565',
         '#EC87C0'
-      ],
+      ]
     }
   },
 
@@ -130,6 +135,8 @@ export default{
 
   },
 
+  mixins: [ readyStateMixin ],
+
   props: {
 
     label: String,
@@ -142,7 +149,9 @@ export default{
 
     interactions: Array,
 
-  }
+    uid: String,
+
+  },
 
 }
 

package/src/widgets/Dashboard/DoughnutSetting.vue

@@ -33,7 +33,7 @@
                     v-model="value.props.rows"
                     :readonly="readonly"
                     @change="$emit('change')">
-            <option v-for="column in selectedDatasource?.columns"
+            <option v-for="column in selectedDatasourceColumns"
                     :value="column.key">
               {{ column.label }}
             </option>
@@ -64,7 +64,7 @@
                     v-model="value.props.column"
                     :readonly="readonly"
                     @change="onColumnChanged">
-            <option v-for="column in selectedDatasource?.columns"
+            <option v-for="column in selectedDatasourceColumns"
                     :value="column.key">
               {{ column.label }}
             </option>
@@ -139,7 +139,18 @@ export default{
 
     selectedDatasource(){
       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.computedColumns ?? []),
+            ...this.selectedDatasource.columns
+          ]
+    },
 
   },
 

package/src/widgets/Dashboard/InteractionEdit.vue

@@ -139,7 +139,7 @@ export default{
 
   emits: [ 'save' ],
 
-	inject: [ 'getConfig', 'socket' ],
+	inject: [ 'getPresets', 'socket' ],
 
   computed: {
 
@@ -154,7 +154,7 @@ export default{
     },
 
     presets(){
-      return this.getConfig().presets
+      return this.getPresets()
     },
 
     selectedPreset(){

package/src/widgets/Dashboard/Metric.vue

@@ -2,10 +2,14 @@
 	<div :class="$style.comp">
     <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
     <div class="flex flex-row gap-2">
-      <h1 class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
+      <h1 v-if="readyState === 1" class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
         {{ cValue }}
       </h1>
-      <div class="flex flex-col" v-if="column2Enabled">
+      <h1 v-else class="text-ellipsis overflow-hidden whitespace-nowrap text-text-300">
+        Loading...
+      </h1>
+
+      <div class="flex flex-col" v-if="column2Enabled && readyState === 1">
         <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden" :class="value?.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">{{ value?.comparedPercent }}%</div>
         <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ ccValue }}</div>
       </div>
@@ -15,7 +19,7 @@
 
 <script>
 
-import {useDatasource} from "../../stores/datasource";
+import {readyStateMixin} from "../../mixin/ready-state";
 
 export default{
 
@@ -37,6 +41,8 @@ export default{
 
   },
 
+  mixins: [ readyStateMixin ],
+
   props: {
 
     column: String,
@@ -52,13 +58,8 @@ export default{
 
     value: Object,
 
-  },
+    uid: String,
 
-  setup(){
-    const datasource = useDatasource()
-    return {
-      datasource
-    }
   }
 
 }

package/src/widgets/Dashboard/MetricSetting.vue

@@ -104,6 +104,7 @@
       </div>
     </div>
 
+    <pre class="text-xs break-all">{{ value.props }}</pre>
 
   </div>
 </template>
@@ -123,7 +124,10 @@ export default{
 
       return this.selectedDatasource.pivot?.enabled ?
           this.selectedDatasource.pivot.columns :
-          this.selectedDatasource.columns
+          [
+            ...(this.selectedDatasource.computedColumns ?? []),
+            ...this.selectedDatasource.columns
+          ]
     },
 
   },

package/src/widgets/Dashboard/Pie.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-2">
+	<div v-if="readyState === 1" class="flex flex-col gap-2">
 
     <Pie class="aspect-square"
               :options="chartOptions"
@@ -10,6 +10,10 @@
     </div>
 
 	</div>
+
+  <div v-else-if="readyState === 2" class="aspect-square flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
 </template>
 
 <script>
@@ -18,6 +22,7 @@ import { Pie } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import { color } from 'chart.js/helpers'
 import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
 
 export default{
 
@@ -74,11 +79,6 @@ export default{
 
   },
 
-  data(){
-    return {
-    }
-  },
-
   inject: [ 'selectPreset' ],
 
   methods: {
@@ -117,6 +117,8 @@ export default{
 
   },
 
+  mixins: [ readyStateMixin ],
+
   props: {
 
     label: String,
@@ -127,7 +129,9 @@ export default{
 
     datasourceUid: String,
 
-    interactions: Array
+    interactions: Array,
+
+    uid: String
 
   }