@mixd-id/web-scaffold 0.2.240702 → 0.2.240704

package/src/widgets/Dashboard/GHeatMapsSetting.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="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" @change="$emit('change')" />
+    </div>
+
+    <div>
+      <label class="text-text-400">Datasource</label>
+      <Dropdown class="min-w-[150px]"
+                :readonly="readonly"
+                v-model="value.props.datasourceUid"
+                @change="delete value.props.columns">
+        <option v-for="obj in datasource"
+                :value="obj.uid">
+          {{ obj.name }}
+        </option>
+      </Dropdown>
+    </div>
+
+    <div>
+      <label class="text-text-400">Label</label>
+      <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+    </div>
+
+    <div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
+      <div>
+        <label class="text-text-400">Value</label>
+        <div class="flex flex-row gap-2">
+          <Dropdown class="flex-1"
+                    v-model="value.props.column"
+                    :readonly="readonly"
+                    @change="onColumnChanged">
+            <option v-for="column in selectedDatasource?.columns"
+                    :value="column.key">
+              {{ column.label }}
+            </option>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {InteractionEdit},
+
+  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)
+    }
+
+  },
+
+  emits: [ 'change' ],
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  props: {
+
+    datasource: Object,
+
+    readonly: [ Boolean, Number ],
+
+    value: Object
+
+  },
+
+  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
+      }
+    },
+
+    onColumnChanged(){
+      if(!this.value.props.label)
+        this.value.props.label = this.value.props.column
+
+      this.$emit('change')
+    }
+
+  }
+
+}
+
+</script>

package/src/widgets/Dashboard/InteractionEdit.vue

@@ -0,0 +1,228 @@
+<template>
+	<Modal :state="state"
+         :hash="hash"
+         ref="modal"
+         width="400"
+         height="480">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Add Interaction</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+        <Button class="w-[80px]" :state="canSave ? 1 : -1" @click="save">Save</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col gap-6">
+
+      <div>
+        <div class="flex flex-row gap-4">
+          <div class="flex-1">
+            <label class="text-text-400">Event</label>
+            <Dropdown v-model="instance.event">
+              <option value="click">Click</option>
+            </Dropdown>
+          </div>
+
+          <div class="w-[100px]">
+            <label class="text-text-400">Modifier</label>
+            <Dropdown v-model="instance.eventModifier">
+              <option value="">None</option>
+              <option value="alt">Alt</option>
+              <option value="shift">Shift</option>
+              <option value="meta">Meta</option>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <label class="text-text-400">Action</label>
+        <div>
+          <Dropdown v-model="instance.action">
+            <option disabled selected value="">Select Action</option>
+            <option value="openDashboardPreset">Open Preset</option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div v-if="instance.action === 'openDashboardPreset'" class="flex flex-col gap-6">
+
+        <div>
+          <label class="text-text-400">Preset Name</label>
+          <Dropdown v-model="instance.presetUid">
+            <option disabled selected value="">Select Preset</option>
+            <option v-for="preset in presets" :value="preset.uid">{{ preset.name }}</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <div class="flex flex-row items-center gap-2 mb-1">
+            <label class="text-text-400 flex-1">Filters</label>
+            <button type="button" @click="addFilter">
+              <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
+            </button>
+          </div>
+
+          <ListItem :items="filters"
+                    class="bg-transparent"
+                    @reorder="(from, to) => { filters.splice(to, 0, filters.splice(from, 1)[0]);}">
+            <template v-slot="{ item, index }">
+              <div class="flex flex-row items-start gap-3">
+                <button type="button" @click="filters.splice(index, 1)" class="py-3">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+                <div class="flex-1 flex flex-col gap-2">
+                  <div class="flex flex-row gap-2">
+                    <Dropdown v-model="item.datasourceUid" class="w-[120px]">
+                      <option disabled selected>Select Datasource</option>
+                      <option v-for="datasource in selectedPreset.datasource" :value="datasource.uid">
+                        {{ datasource.name }}
+                      </option>
+                    </Dropdown>
+                  </div>
+
+                  <div class="flex flex-row gap-2" v-if="!!(item.datasource = getDatasource(item.datasourceUid))">
+
+                    <Dropdown v-if="item.datasource.pivot?.enabled" v-model="item.key" class="w-[100px]">
+                      <option disabled selected>Select Key</option>
+                      <option v-for="column in item.datasource.pivot.columns" :value="column.key">{{ column.label }}</option>
+                    </Dropdown>
+                    <Dropdown v-else v-model="item.key" class="w-[100px]">
+                      <option disabled selected>Select Key</option>
+                      <option v-for="column in item.datasource.columns" :value="column.key">{{ column.label }}</option>
+                    </Dropdown>
+
+                    <div class="flex-1 flex flex-row gap-2">
+                      <Dropdown v-model="item.operator"
+                                class="w-[80px]">
+                        <option value="eq">Equal</option>
+                        <option value="not">Not Equal</option>
+                        <option value="startsWith">Starts With</option>
+                        <option value="endsWith">Ends With</option>
+                        <option value="contains">Contains</option>
+                        <option value="notContains">Not Contains</option>
+                        <option value="in">Multiple with comma</option>
+                        <option value="notIn">Except with comma</option>
+                        <option value="regex">Regex</option>
+                      </Dropdown>
+
+                      <TextWithTag :items="tags" v-model="item.value" class="flex-1" variant="minimal" />
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </template>
+          </ListItem>
+        </div>
+
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+export default{
+
+  emits: [ 'save' ],
+
+	inject: [ 'getPresets', 'socket' ],
+
+  computed: {
+
+    canSave(){
+      return this.instance.event && this.instance.action
+    },
+
+    filters(){
+      if(!Array.isArray(this.instance.filters))
+        this.instance.filters = []
+      return this.instance.filters
+    },
+
+    presets(){
+      return this.getPresets()
+    },
+
+    selectedPreset(){
+      return this.presets.find(p => p.uid === this.instance.presetUid)
+    }
+
+  },
+
+  props: {
+    state: Boolean,
+    hash: String
+  },
+
+	data(){
+		return {
+      instance: null,
+      tags: [
+        { text:"Segment", value:"{segment}" },
+        { text:"Key", value:"{key}" },
+        { text:"Value", value:"{value}" },
+      ]
+		}
+	},
+
+	methods: {
+
+    addFilter(){
+      const newFilter = {
+        uid: md5('filter-' + new Date().getTime()),
+      }
+
+      this.filters.push(newFilter)
+    },
+
+		create(obj){
+      this.instance = obj ?? {}
+      this.instance.uid = md5('interaction-' + new Date().getTime())
+      this.$refs.modal.open()
+		},
+
+    getDatasource(uid){
+      return this.selectedPreset.datasource.find(d => d.uid === uid)
+    },
+
+		open(instance){
+      this.instance = instance
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		},
+
+    save(){
+      this.$emit('save', this.instance)
+      this.close()
+    },
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/Metric.vue

@@ -0,0 +1,76 @@
+<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">
+      <h1 v-if="readyState === 1" class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
+        {{ cValue }}
+      </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>
+    </div>
+	</div>
+</template>
+
+<script>
+
+import {readyStateMixin} from "../../mixin/ready-state";
+
+export default{
+
+  computed: {
+
+    cValue(){
+      let value = parseFloat(this.value?.value)
+      if(isNaN(value)) return 'N/A'
+      return value.toLocaleString()
+    },
+
+    ccValue(){
+      if(!this.column2Enabled) return
+
+      let value = parseFloat(this.value?.comparedValue)
+      if(isNaN(value)) return 'N/A'
+      return value.toLocaleString()
+    }
+
+  },
+
+  mixins: [ readyStateMixin ],
+
+  props: {
+
+    column: String,
+    columnModifier: String,
+
+    column2: String,
+    column2Enabled: [ Boolean, Number ],
+    column2Modifier: String,
+
+    datasourceUid: String,
+
+    label: String,
+
+    value: Object,
+
+    uid: String,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
+  @apply p-3 flex flex-col gap-1;
+}
+
+</style>

package/src/widgets/Dashboard/MetricSetting.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="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" @change="$emit('change')" />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-row gap-2">
+        <label class="flex-1">Datasource</label>
+        <button type="button" class="text-primary"
+                @click="previewDatasource(selectedDatasource)">Preview</button>
+      </div>
+      <Dropdown class="min-w-[150px]"
+                :readonly="readonly"
+                v-model="value.props.datasourceUid"
+                @change="delete value.props.columns">
+        <option v-for="obj in datasource"
+                :value="obj.uid">
+          {{ obj.name }}
+        </option>
+      </Dropdown>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Label</label>
+      <Textbox v-model="value.props.label"
+               maxlength="30"
+               placeholder="Label"
+               :readonly="readonly"
+               @keyup.enter="$emit('change')"
+               @blur="$emit('change')" />
+    </div>
+
+    <div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
+      <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"
+                    @change="$emit('change')">
+            <option value="count">Count</option>
+            <option value="countDistinct">Unique Count</option>
+            <option value="sum">Sum</option>
+            <option value="avg">Avg</option>
+            <option value="min">Min</option>
+            <option value="max">Max</option>
+            <option value="first">First</option>
+            <option value="last">Last</option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div>
+          <Checkbox v-model="value.props.column2Enabled" :disabled="readonly">
+            Compare to
+          </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"
+                    @change="$emit('change')">
+            <option value="count">Count</option>
+            <option value="countDistinct">Unique Count</option>
+            <option value="sum">Sum</option>
+            <option value="avg">Avg</option>
+            <option value="min">Min</option>
+            <option value="max">Max</option>
+            <option value="first">First</option>
+            <option value="last">Last</option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div v-if="value.props.column2Enabled && !readonly" class="flex justify-center p-3">
+        <button type="button" class="text-primary" @click="swap">
+          <svg width="14" height="14" class="fill-primary inline" 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="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"/></svg>
+          Swap
+        </button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    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
+          ]
+    },
+
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'previewDatasource' ],
+
+  methods: {
+
+    swap(){
+      const props = {
+        column: this.value.props.column2,
+        columnModifier: this.value.props.column2Modifier,
+        column2: this.value.props.column,
+        column2Modifier: this.value.props.columnModifier,
+      }
+
+      Object.assign(this.value.props, props)
+
+      this.$emit('change')
+    }
+
+  },
+
+  props: {
+
+    datasource: Object,
+
+    readonly: [ Boolean, Number ],
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>