@mixd-id/web-scaffold 0.1.230406366 → 0.1.230406368

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 []