@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/Dashboard/Doughnut.vue

@@ -18,10 +18,11 @@
 
 <script>
 
-import {Doughnut} from 'vue-chartjs'
+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{
 
@@ -92,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')
@@ -134,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">
@@ -95,7 +95,7 @@
         <div class="mt-1">
           <ListItem :items="interactions"
                     class="rounded-xl"
-                    container-class="flex flex-col divide-y divide-text-50"
+                    container-class="flex flex-col divide-y divide-border-50"
                     @reorder="(from, to) => { interactions.splice(to, 0, interactions.splice(from, 1)[0]); }">
             <template v-slot="{ item, index }">
               <div class="flex flex-row items-center gap-3 px-3">

package/src/widgets/Dashboard/Metric.vue

@@ -1,17 +1,24 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" v-if="metric">
     <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
-    <div class="flex flex-row gap-2">
-      <h1 v-if="readyState === 1" class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
-        {{ cValue }}
+    <div class="flex flex-row items-end gap-2">
+      <h1 v-if="readyState === 1" class="text-5xl text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
+        {{ metric.value }}
       </h1>
       <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 class="flex flex-col">
+        <div class=" text-ellipsis whitespace-nowrap overflow-hidden"
+          :class="showPercentage ? '' : 'text-green-600'">
+          {{ metric.comparedValue }}
+        </div>
+
+        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
+             :class="metric.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">
+          {{ metric.comparedPercent }}%
+        </div>
       </div>
     </div>
 	</div>
@@ -19,32 +26,48 @@
 
 <script>
 
-import {readyStateMixin} from "../../mixin/ready-state";
+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
+
+      const column = this.datasource?.columns.find(_ => _.key === this.column2)
+      return this.getValue(this.value?.comparedValue, column)
+    },
 
-      let value = parseFloat(this.value?.comparedValue)
-      if(isNaN(value)) return 'N/A'
-      return value.toLocaleString()
+    datasource(){
+      const preset = this.getViewedPreset()
+      if(preset){
+        return preset.datasource.find(_ => _.uid === this.datasourceUid)
+      }
     }
 
   },
 
-  mixins: [ readyStateMixin ],
+  data(){
+    return {
+      metric: null,
+      readyState: 1,
+    }
+  },
+
+  inject: [ 'getController', 'getViewedPreset', 'getQueryFilters', 'socket' ],
 
   props: {
 
+    label: String,
+
     column: String,
     columnModifier: String,
 
@@ -54,12 +77,48 @@ export default{
 
     datasourceUid: String,
 
-    label: String,
+    showPercentage: [ Number, Boolean ],
+
+    uid: String
+
+  },
 
-    value: Object,
+  methods: {
 
-    uid: String,
+    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(){
+
+      this.readyState = 2
+      this.socket.send(`${this.getController()}.load-metric`, {})
+          .then(metric => {
+            this.metric = metric
+          })
+          .finally(_ => this.readyState = 1)
+
+    },
+
+  },
 
+  mounted() {
+    this.load()
   }
 
 }
@@ -69,7 +128,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
+  @apply border-[1px] border-border-50 bg-base-500 rounded-xl overflow-hidden;
   @apply p-3 flex flex-col gap-1;
 }
 

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,8 +127,47 @@ 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)
+      //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(){

package/src/widgets/Dashboard/Pie.vue

@@ -18,10 +18,11 @@
 
 <script>
 
-import {Pie} from 'vue-chartjs'
-import {color} from 'chart.js/helpers'
+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{
 
@@ -78,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')
@@ -116,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: {
 
@@ -124,7 +169,11 @@ export default{
 
     value: Object,
 
-    column: Object,
+    column: String,
+    columnModifier: String,
+
+    rows: String,
+    rowsModifier: String,
 
     datasourceUid: String,
 

package/src/widgets/Dashboard/PieSetting.vue

@@ -136,7 +136,7 @@
         <div class="mt-1">
           <ListItem :items="interactions"
                     class="rounded-xl"
-                    container-class="flex flex-col divide-y divide-text-50"
+                    container-class="flex flex-col divide-y divide-border-50"
                     @reorder="(from, to) => { interactions.splice(to, 0, interactions.splice(from, 1)[0]); }">
             <template v-slot="{ item, index }">
               <div class="flex flex-row items-center gap-3 px-3">

package/src/widgets/Dashboard/PolarArea.vue

@@ -16,10 +16,11 @@
 
 <script>
 
-import {PolarArea} from 'vue-chartjs'
-import {color} from 'chart.js/helpers'
+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{
 
@@ -95,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')
@@ -136,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/PolarAreaSetting.vue

@@ -94,7 +94,7 @@
         <div class="mt-1">
           <ListItem :items="interactions"
                     class="rounded-xl"
-                    container-class="flex flex-col divide-y divide-text-50"
+                    container-class="flex flex-col divide-y divide-border-50"
                     @reorder="(from, to) => { interactions.splice(to, 0, interactions.splice(from, 1)[0]); }">
             <template v-slot="{ item, index }">
               <div class="flex flex-row items-center gap-3 px-3">

package/src/widgets/Dashboard/SharingModal.vue

@@ -32,7 +32,7 @@
 	  <div class="flex-1 p-6 flex flex-col">
 
       <div v-if="items?.length > 0">
-        <div v-for="item in items" :class="$style.button" @click="select(item)">
+        <div v-for="item in items" :class="appStyle.menuItem" @click="select(item)">
           <slot name="item" :item="item">
             <div>{{ item.name }}</div>
           </slot>
@@ -55,7 +55,7 @@ export default{
 
   emits: [ 'select' ],
 
-	inject: [ 'socket', 'toast' ],
+	inject: [ 'appStyle', 'socket', 'toast' ],
 
   name: 'SharingModal',
 
@@ -108,9 +108,8 @@ export default{
 
 <style module>
 
-.button{
-  @apply text-left p-3 border-[1px] border-transparent rounded-lg cursor-pointer;
-  @apply hover:border-primary-300 hover:bg-primary-100;
+.comp{
+
 }
 
 </style>

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" },
@@ -176,7 +176,7 @@ export default{
 
 .button{
   @apply flex flex-col gap-2 items-center rounded-xl p-3;
-  @apply hover:bg-text-50 border-[1px] border-transparent hover:border-text-200;
+  @apply hover:bg-text-50 border-[1px] border-transparent hover:border-border-200;
 }