@mixd-id/web-scaffold 0.1.230406366 → 0.1.230406367

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406366",
+  "version": "0.1.230406367",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

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

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

package/src/index.js

@@ -679,6 +679,7 @@ export default{
     app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
     app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
     app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
+    app.component('DataTable', defineAsyncComponent(() => import("./widgets/Dashboard/DataTable.vue")))
 
     app.component('BotEditor', defineAsyncComponent(() => import("./widgets/BotEditor.vue")))
   }

package/src/utils/dashboard.js

@@ -85,6 +85,7 @@ const getDatasourceItems = async (datasource, opt) => {
 }
 
 const getSequelizeColumns = async (columns, opt) => {
+  if(!columns) columns = []
 
   const { DataTypes } = opt.Sequelize
 

package/src/utils/wss.js

@@ -247,7 +247,6 @@ class WSS extends EventEmitter2{
                 socket.close(1002, 'ping timeout')
                 if(subscriber){
                   subscriber.disconnect()
-                  console.log('CLOSE SOCKET', token.substring(0, 10) + '...')
                 }
                 else{
                   console.log('CLOSE SOCKET#2', token.substring(0, 10) + '...')

package/src/widgets/Dashboard/BarChart.vue

@@ -74,7 +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";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -225,14 +225,43 @@ export default{
       ],
 
       height: '',
-      datasets: null
+      datasets: null,
+      readyState: 1,
+      value: null
     }
   },
 
-  inject: [ 'selectPreset' ],
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'BarChart'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -276,9 +305,17 @@ export default{
 
   mounted() {
     this.height = this.$el.clientHeight + 'px'
-  },
 
-  mixins: [ readyStateMixin ],
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
@@ -309,8 +346,6 @@ export default{
 
     yAxeOnClick: Array,
 
-    value: Object,
-
     interactions: Array,
 
     uid: String

package/src/widgets/Dashboard/DataTable.vue

@@ -0,0 +1,125 @@
+<template>
+	<div :class="$style.comp">
+    <VirtualTable class="flex-1"
+                  :columns="datasourceColumns"
+                  @scroll-end="loadNext"
+                  :items="items">
+
+    </VirtualTable>
+	</div>
+</template>
+
+<script>
+import {useEmitter} from "../../utils/event-bus";
+import VirtualTable from "../../components/VirtualTable.vue";
+
+export default{
+  components: {VirtualTable},
+
+  data(){
+    return {
+      value: null,
+      readyState: 1,
+      items: null,
+      hasNext: false
+    }
+  },
+
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'socket' ],
+
+  methods: {
+
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items = items
+            this.hasNext = hasNext
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
+    loadNext(){
+      if(!this.hasNext) return
+
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+      const afterItem = this.items[this.items.length - 1]
+
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable',
+          afterItem
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items.push(...items)
+            this.hasNext = hasNext
+          })
+    }
+
+  },
+
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
+
+  props: {
+
+    datasourceColumns: Array,
+    datasourceUid: String,
+    label: String,
+    uid: String,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply min-h-[50vh] flex flex-col;
+}
+
+</style>

package/src/widgets/Dashboard/DataTableSetting.vue

@@ -0,0 +1,239 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="flex justify-center border-b-[1px] border-text-50" v-if="tabItems.length > 1">
+      <Tabs :items="tabItems" v-model="value.tabIndex" />
+    </div>
+
+    <div class="flex-1 overflow-y-auto flex flex-col">
+      <div v-if="value.tabIndex === 1" class="flex-1 flex flex-col gap-5 p-6">
+
+        <div class="flex flex-row items-center ">
+          <label class="flex-1">Active</label>
+          <Switch v-model="value.props.enabled" :readonly="readonly" />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-text-400">Label</label>
+          <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+        </div>
+
+        <div class="flex flex-row items-center">
+          <label class="flex-1">Datasource</label>
+          <div>
+            <Dropdown class="min-w-[150px]"
+                      :readonly="readonly"
+                      v-model="value.props.datasourceUid">
+              <option v-for="_datasource in datasource"
+                      :value="_datasource.uid">
+                {{ _datasource.name }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
+      </div>
+
+      <div v-else-if="value.tabIndex === 2" class="flex-1 flex flex-col gap-5 p-6">
+
+        <div>
+          <Textbox placeholder="Search..." v-model="search">
+            <template #start>
+              <div class="pl-3">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
+
+        <VirtualGrid class="flex-1 border-[1px] border-text-50 rounded-xl"
+                     container-class="divide-y divide-text-50"
+                     :items="columns">
+          <template #item="{ item }">
+            <div class="flex-1 flex flex-row gap-2 items-center p-1 px-3 group">
+              <div>
+                <Checkbox v-model="item.visible"
+                          default="true"
+                          :disabled="readonly"
+                          @change="$emit('change')" />
+              </div>
+              <Textbox v-model="item.label2" :placeholder="item.label" :readonly="readonly"
+                       class="flex-1 border-none bg-transparent" :class="$style.columnTextbox"
+                       item-class="p-1 px-0" />
+              <div class="hidden flex-col justify-center group-hover:flex">
+                <button type="button" @click="moveUp(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"/></svg>
+                </button>
+                <button type="button" @click="moveDown(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+        </VirtualGrid>
+
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import WebPagePropertySelector from "../WebPageBuilder4/WebPagePropertySelector.vue";
+import {defineAsyncComponent} from "vue";
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {
+    InteractionEdit,
+    HeightSetting: defineAsyncComponent(() => import('../WebPageBuilder4/HeightSetting.vue')),
+    WebPagePropertySelector
+  },
+
+  computed: {
+
+    interactions(){
+      if(!Array.isArray(this.value.props.interactions))
+        this.value.props.interactions = []
+      return this.value.props.interactions
+    },
+
+    selectedDatasource(){
+      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
+    },
+
+    definedProperties(){
+      const settings = []
+
+      for(let key in this.properties){
+        if(key in this.value.props){
+          settings.push(this.properties[key])
+        }
+      }
+
+      return settings
+    },
+
+    tabItems(){
+      return [
+        { text:'General', value:1 },
+        this.value.props.datasourceUid ? { text:'Columns', value:2 } : null,
+      ]
+        .filter(_ => _)
+    },
+
+    columns(){
+      const searches = this.search.toLowerCase().split(' ').filter(_ => _.length > 2)
+      return (this.value.props.datasourceColumns ?? []).filter(_ => {
+        return !_.key.startsWith('_') &&
+            (searches.length < 1 || searches.every(search => _.label.toLowerCase().includes(search)))
+      })
+    },
+
+  },
+
+  data(){
+    return {
+      properties: {
+        'height': { component:"HeightSetting", text:'Height', group:'Layout' }
+      },
+      search: ''
+    }
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    datasource: Object,
+
+    index: Number,
+
+    readonly: [ Boolean, Number ],
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  methods: {
+
+    addInteraction(obj){
+      this.$util.push(this.interactions, obj)
+    },
+
+    applyDefault(){
+      if(!this.value.props.datasourceUid && this.datasource?.length === 1){
+        this.value.props.datasourceUid = this.datasource[0].uid
+      }
+
+      if(!this.value.tabIndex)
+        this.value.tabIndex = 1
+    },
+
+    generateColumns(){
+      this.value.props.datasourceColumns = (this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          this.selectedDatasource.columns)
+          .map((_, __) => ({
+            ..._,
+            visible: __ < 10
+          }))
+    },
+
+    moveDown(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index + 1 < this.value.props.datasourceColumns.length){
+        this.value.props.datasourceColumns.splice(index + 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+    moveUp(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index - 1 >= 0){
+        this.value.props.datasourceColumns.splice(index - 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+
+  },
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  watch: {
+
+    'value.props.datasourceUid'(to){
+      if(to){
+        this.generateColumns()
+        this.$emit('change')
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex flex-col;
+}
+
+.columnTextbox input::placeholder{
+  @apply text-text;
+}
+
+</style>

package/src/widgets/Dashboard/Doughnut.vue

@@ -22,7 +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";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -93,14 +93,43 @@ export default{
         '#FFCE54',
         '#ED5565',
         '#EC87C0'
-      ]
+      ],
+      readyState: 1,
+      value: null,
     }
   },
 
-  inject: [ 'selectPreset' ],
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'Doughnut'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -135,15 +164,27 @@ export default{
 
   },
 
-  mixins: [ readyStateMixin ],
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
     label: String,
 
-    value: Object,
-
     column: String,
+    columnModifier: String,
+
+    rows: String,
+    rowsModifier: String,
 
     datasourceUid: String,
 

package/src/widgets/Dashboard/DoughnutSetting.vue

@@ -11,7 +11,7 @@
       <Dropdown class="min-w-[150px]"
                 :readonly="readonly"
                 v-model="value.props.datasourceUid"
-                @change="delete value.props.columns;">
+                @change="delete value.props.columns; $emit('change')">
         <option disabled selected>Select Datasource</option>
         <option v-for="obj in datasource"
                 :value="obj.uid">

package/src/widgets/Dashboard/Metric.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
     <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
-    <div class="flex flex-row gap-2">
+    <div class="flex flex-row items-end gap-2">
       <h1 v-if="readyState === 1" class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
         {{ cValue }}
       </h1>
@@ -10,8 +10,16 @@
       </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 class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
+          :class="showPercentage ? '' : 'text-green-600'">
+          {{ ccValue }}
+        </div>
+
+        <div v-if="showPercentage"
+             class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
+             :class="value?.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">
+          {{ value?.comparedPercent }}
+        </div>
       </div>
     </div>
 	</div>
@@ -19,29 +27,44 @@
 
 <script>
 
-import {readyStateMixin} from "../../mixin/ready-state";
+import {useEmitter} from "../../utils/event-bus";
+import dayjs from "dayjs";
 
 export default{
 
   computed: {
 
     cValue(){
-      let value = parseFloat(this.value?.value)
-      if(isNaN(value)) return 'N/A'
-      return value.toLocaleString()
+      if(!this.column) return 'N/A'
+      const column = this.datasource?.columns.find(_ => _.key === this.column)
+      return this.getValue(this.value?.value, column)
     },
 
     ccValue(){
       if(!this.column2Enabled) return
+      if(!this.value?.comparedValue) return
 
-      let value = parseFloat(this.value?.comparedValue)
-      if(isNaN(value)) return 'N/A'
-      return value.toLocaleString()
+      const column = this.datasource?.columns.find(_ => _.key === this.column2)
+      return this.getValue(this.value?.comparedValue, column)
+    },
+
+    datasource(){
+      const preset = this.getViewedPreset()
+      if(preset){
+        return preset.datasource.find(_ => _.uid === this.datasourceUid)
+      }
     }
 
   },
 
-  mixins: [ readyStateMixin ],
+  data(){
+    return {
+      value: null,
+      readyState: 1,
+    }
+  },
+
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'socket' ],
 
   props: {
 
@@ -54,12 +77,74 @@ export default{
 
     datasourceUid: String,
 
+    showPercentage: [ Number, Boolean ],
+
     label: String,
 
-    value: Object,
+    uid: String
+
+  },
+
+  methods: {
+
+    getValue(val, column){
+      let value
+
+      switch(column?.type){
+
+        case 'date':
+          value = dayjs(val).format('D MMM')
+          break
+
+        default:
+          value = parseFloat(val)
+          value = isNaN(value) ?
+            'N/A' :
+            value.toLocaleString()
+      }
+
+      return value
+    },
+
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'Metric'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+        .then(_ => {
+          this.value = _[this.uid]
+        })
+        .finally(_ => this.readyState = 1)
+    },
+
+  },
 
-    uid: String,
+  mounted() {
+    this.load()
 
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
   }
 
 }

package/src/widgets/Dashboard/MetricSetting.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-5 p-6">
+  <div class="flex flex-col gap-8 p-6">
 
-    <div class="flex flex-row items-center">
+    <div class="flex flex-row items-center" @click="log(value)">
       <label class="flex-1">Active</label>
       <Switch v-model="value.props.enabled" :readonly="readonly" @change="$emit('change')" />
     </div>
@@ -15,7 +15,7 @@
       <Dropdown class="min-w-[150px]"
                 :readonly="readonly"
                 v-model="value.props.datasourceUid"
-                @change="delete value.props.columns">
+                @change="delete value.props.columns;$emit('change')">
         <option v-for="obj in datasource"
                 :value="obj.uid">
           {{ obj.name }}
@@ -28,25 +28,13 @@
       <Textbox v-model="value.props.label"
                maxlength="30"
                placeholder="Label"
-               :readonly="readonly"
-               @keyup.enter="$emit('change')"
-               @blur="$emit('change')" />
+               :readonly="readonly" />
     </div>
 
-    <div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
+    <div v-if="value.props.datasourceUid" class="flex flex-col gap-8">
       <div class="flex flex-col gap-1">
         <label class="flex-1">Column</label>
         <div class="flex flex-row gap-2">
-          <Dropdown class="min-w-[150px] flex-1"
-                    :readonly="readonly"
-                    v-model="value.props.column"
-                    @change="$emit('change')">
-            <option v-for="column in selectedDatasourceColumns"
-                    :value="column.key">
-              {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
-            </option>
-          </Dropdown>
-
           <Dropdown class="w-[125px]"
                     :readonly="readonly"
                     v-model="value.props.columnModifier"
@@ -60,6 +48,16 @@
             <option value="first">First</option>
             <option value="last">Last</option>
           </Dropdown>
+
+          <Dropdown class="min-w-[150px] flex-1"
+                    :readonly="readonly"
+                    v-model="value.props.column"
+                    @change="$emit('change')">
+            <option v-for="column in selectedDatasourceColumns"
+                    :value="column.key">
+              {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
+            </option>
+          </Dropdown>
         </div>
       </div>
 
@@ -70,16 +68,6 @@
           </Checkbox>
         </div>
         <div class="flex flex-row gap-2">
-          <Dropdown class="min-w-[150px] flex-1"
-                    :readonly="readonly || !value.props.column2Enabled"
-                    v-model="value.props.column2"
-                    @change="$emit('change')">
-            <option v-for="column in selectedDatasourceColumns"
-                    :value="column.key">
-              {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
-            </option>
-          </Dropdown>
-
           <Dropdown class="w-[125px]"
                     :readonly="readonly || !value.props.column2Enabled"
                     v-model="value.props.column2Modifier"
@@ -93,6 +81,32 @@
             <option value="first">First</option>
             <option value="last">Last</option>
           </Dropdown>
+
+          <Dropdown class="min-w-[150px] flex-1"
+                    :readonly="readonly || !value.props.column2Enabled"
+                    v-model="value.props.column2"
+                    @change="$emit('change')">
+            <option v-for="column in selectedDatasourceColumns"
+                    :value="column.key">
+              {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
+            </option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2" v-if="canShowPercentage">
+        <div>
+          <Checkbox v-model="value.props.showPercentage" :disabled="readonly">
+            Show Percentage
+          </Checkbox>
+        </div>
+        <div class="flex flex-row gap-2">
+          <Dropdown class="w-full"
+                    :readonly="readonly || !value.props.column2Enabled"
+                    v-model="value.props.showPercentageOpt"
+                    @change="$emit('change')">
+            <option v-for="arr in showPercentageOptValues" :value="arr[0]">{{ arr[1] }}</option>
+          </Dropdown>
         </div>
       </div>
 
@@ -113,10 +127,49 @@ export default{
 
   computed: {
 
+    column1(){
+      if(!this.value || !this.value.props.column) return
+      return this.selectedDatasource.columns.find(_ => _.key === this.value.props.column)
+    },
+
+    column2(){
+      if(!this.value || !this.value.props.column2) return
+      return this.selectedDatasource.columns.find(_ => _.key === this.value.props.column2)
+    },
+
+    canShowPercentage(){
+      return this.column1 && this.column2 && this.column1.type === this.column2.type
+    },
+
     selectedDatasource(){
       return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
     },
 
+    showPercentageOptValues(){
+      if(!this.canShowPercentage) return
+
+      switch(this.column1.type){
+
+        case 'date':
+          return [
+            [ 'day', 'Day' ],
+            [ 'hour', 'Hour' ],
+            [ 'minute', 'Minute' ],
+            [ 'month', 'Month' ],
+            [ 'week', 'Week' ],
+            [ 'year', 'Year' ],
+          ]
+
+        case 'number':
+        default:
+          return [
+            [ 'percentage', 'Percentage' ],
+            [ 'number', 'Number' ],
+          ]
+
+      }
+    },
+
     selectedDatasourceColumns(){
       if(!this.selectedDatasource) return []
 

package/src/widgets/Dashboard/Pie.vue

@@ -22,7 +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";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -79,10 +79,44 @@ export default{
 
   },
 
-  inject: [ 'selectPreset' ],
+  data(){
+    return {
+      readyState: 1,
+      value: null,
+    }
+  },
+
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'Pie'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -117,7 +151,17 @@ export default{
 
   },
 
-  mixins: [ readyStateMixin ],
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
@@ -125,7 +169,11 @@ export default{
 
     value: Object,
 
-    column: Object,
+    column: String,
+    columnModifier: String,
+
+    rows: String,
+    rowsModifier: String,
 
     datasourceUid: String,
 

package/src/widgets/Dashboard/PolarArea.vue

@@ -20,7 +20,7 @@ import { PolarArea } 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";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -96,13 +96,42 @@ export default{
         '#ED5565',
         '#EC87C0'
       ],
+      readyState: 1,
+      value: null,
     }
   },
 
-  inject: [ 'selectPreset' ],
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'PolarArea'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -137,15 +166,27 @@ export default{
 
   },
 
-  mixins: [ readyStateMixin ],
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
     label: String,
 
-    value: Object,
-
     column: String,
+    columnModifier: String,
+
+    rows: String,
+    rowsModifier: String,
 
     datasourceUid: String,
 

package/src/widgets/Dashboard/ViewSelector.vue

@@ -101,7 +101,7 @@ export default{
         { type:"Pie", name:"Pie", group:"components", import: () => import('../../configs/dashboard/pie.js'), thumbnailUrl:"/static/dashboard/pie.png" },
         { type:"Doughnut", name:"Doughnut", group:"components", import: () => import('../../configs/dashboard/doughnut.js'), thumbnailUrl:"/static/dashboard/doughnut.png" },
         { type:"PolarArea", name:"Polar Area", group:"components", import: () => import('../../configs/dashboard/polar-area.js'), thumbnailUrl:"/static/dashboard/polar-area.png" },
-        { type:"VirtualTable", name:"Table", group:"components", import: () => import('../../configs/dashboard/virtual-table.js'), thumbnailUrl:"/static/dashboard/virtual-table.png" },
+        { type:"DataTable", name:"DataTable", group:"components", import: () => import('../../configs/dashboard/data-table.js'), thumbnailUrl:"/static/dashboard/virtual-table.png" },
         { type:"Metric", name:"Metric", group:"components", import: () => import('../../configs/dashboard/metric.js'), thumbnailUrl:"/static/dashboard/metric.png" },
         { type:"BarChart", name:"Bar Chart", group:"components", import: () => import('../../configs/dashboard/bar.js'), thumbnailUrl:"/static/dashboard/bar.png" },
         { type:"GHeatMaps", name:"Heat Map", group:"components", import: () => import('../../configs/dashboard/gheatmaps.js'), thumbnailUrl:"/static/dashboard/gheatmaps.png" },

package/src/widgets/Dashboard.vue

@@ -33,7 +33,7 @@
                        :readonly="selectedPreset.readonly"
                        :value="selectedView"
                        :view-type="config.viewType"
-                       @change="load({ [selectedView.uid]:selectedView })"/>
+                       @change="load({ [selectedView.uid]:selectedView })" />
 
           </div>
         </div>
@@ -945,6 +945,7 @@ export default {
     BarChartSetting: defineAsyncComponent(() => import('./Dashboard/BarChartSetting.vue')),
     MetricSetting: defineAsyncComponent(() => import('./Dashboard/MetricSetting.vue')),
     GHeatMapsSetting: defineAsyncComponent(() => import('./Dashboard/GHeatMapsSetting.vue')),
+    DataTableSetting: defineAsyncComponent(() => import('./Dashboard/DataTableSetting.vue')),
     VirtualTableSetting: defineAsyncComponent(() => import('./Dashboard/VirtualTableSetting.vue')),
     PieSetting: defineAsyncComponent(() => import('./Dashboard/PieSetting.vue')),
     PolarAreaSetting: defineAsyncComponent(() => import('./Dashboard/PolarAreaSetting.vue')),
@@ -1330,10 +1331,19 @@ export default {
 
     duplicateComponent(item, parent) {
 
+      const recurseSet = (item) => {
+        item.uid = getPresetUid()
+
+        if(Array.isArray(item.items)){
+          for(let subItem of item.items)
+            recurseSet(subItem)
+        }
+      }
+
       const index = parent.findIndex(_ => _ === item)
 
       const newItem = JSON.parse(JSON.stringify(item))
-      newItem.uid = getPresetUid()
+      recurseSet(newItem)
       newItem.name += ' (Copy)';
 
       parent.splice(index + 1, null, newItem)
@@ -1363,6 +1373,14 @@ export default {
     },
 
     async load(uids) {
+      if(uids){
+        Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.load`))
+      }
+      else{
+        this.emitter.emit(`dashboard.load`)
+      }
+      return
+
       if (this.readyState !== 1) return
       if (!this.viewedComponents) return
       if (!this.cConfig) return
@@ -1372,7 +1390,7 @@ export default {
 
       const {name, datasource} = this.viewedPreset
 
-      !uids ? this.readyState = 0 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 2))
+      !uids ? this.readyState = 2 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 2))
       this.socket.send(this.src, {
         name,
         views,
@@ -1689,7 +1707,10 @@ export default {
       getConfig: this.getConfig,
       getPresets: this.getPresets,
       selectPreset: this.selectPreset,
-      preview: this.preview
+      preview: this.preview,
+      getSrc: () => this.src,
+      getViewedPreset: () => this.viewedPreset,
+      getQueryFilters: () => this.queryFilters,
     }
   },