@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

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>

package/src/widgets/Dashboard/Pie.vue

@@ -0,0 +1,139 @@
+<template>
+	<div v-if="readyState === 1" class="flex flex-col gap-2">
+
+    <Pie class="aspect-square"
+              :options="chartOptions"
+              :data="chartData" />
+
+    <div class="px-3 text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize">
+      {{ label }}
+    </div>
+
+	</div>
+
+  <div v-else-if="readyState === 2" class="aspect-square flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
+</template>
+
+<script>
+
+import {Pie} from 'vue-chartjs'
+import {color} from 'chart.js/helpers'
+import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
+
+export default{
+
+  components: {
+    Pie
+  },
+
+  computed: {
+
+    chartData(){
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
+    },
+
+    chartOptions(){
+      return {
+        responsive: true,
+        maintainAspectRatio: true,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            callbacks: {
+              title: function(tooltipItems) {
+                return `${tooltipItems[0].label}`;
+              },
+              label: (tooltipItem) => {
+                const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0)
+                const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
+
+                return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
+              }
+            },
+          },
+        },
+        onClick: this.onClick
+      }
+    },
+
+  },
+
+  inject: [ 'selectPreset' ],
+
+  methods: {
+
+    onClick(e, segments){
+
+      const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
+      const segment = segments[0]
+      if(!segment) return
+
+      const dataset = this.value.datasets[segment.datasetIndex]
+      const obj = {
+        segment: this.value.labels[segment.index],
+        key: dataset.label,
+        value: dataset.data[segment.index]
+      }
+
+      for(let click of clickInteractions){
+        const { action, presetUid, filters } = click
+
+        const params = filters.reduce((res, cur) => {
+          res[cur.datasourceUid + '.filters.' + cur.key + '.' + cur.operator] = strVars(cur.value, obj)
+          return res
+        }, {})
+
+        switch(action){
+
+          case 'openDashboardPreset':
+            if(typeof this.selectPreset === 'function')
+              this.selectPreset(presetUid, params)
+            break
+        }
+      }
+
+    }
+
+  },
+
+  mixins: [ readyStateMixin ],
+
+  props: {
+
+    label: String,
+
+    value: Object,
+
+    column: Object,
+
+    datasourceUid: String,
+
+    interactions: Array,
+
+    uid: String
+
+  }
+
+}
+
+</script>

package/src/widgets/Dashboard/PieSetting.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="flex flex-col gap-6 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>
+      <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="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">Segment</label>
+        <div class="flex flex-row gap-2">
+          <Dropdown class="min-w-[150px]"
+                    v-model="value.props.rows"
+                    :readonly="readonly"
+                    @change="$emit('change')">
+            <option v-for="column in selectedDatasourceColumns"
+                    :value="column.key">
+              {{ column.label }}
+            </option>
+          </Dropdown>
+
+          <Dropdown v-model="value.props.rowsModifier"
+                    :readonly="readonly"
+                    class="w-[125px]"
+                    @change="$emit('change')">
+            <option value="">-</option>
+            <option value="lowercase">Lower</option>
+            <option value="capitalize">Capitalize</option>
+            <option value="uppercase">Upper</option>
+            <option disabled>-----</option>
+            <option value="date">Date</option>
+            <option value="month">Month</option>
+            <option value="year">Year</option>
+            <option value="hour">Hour</option>
+            <option value="minute">Minute</option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div>
+        <div class="flex flex-row">
+          <label class="flex-1 text-primary cursor-pointer"
+                 ref="yAxis"
+                 @click="$refs.context2.open($refs.yAxis)">
+            {{ value.props.multipleValues ? 'Multiple Values' : 'Value' }}
+            <svg class="fill-primary inline relative top-[-1px]" width="12" height="12" 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>
+          </label>
+          <ContextMenu ref="context2">
+            <div class="flex flex-col min-w-[100px]">
+
+              <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                      @click="value.props.multipleValues = false;$emit('change')">
+                Single
+              </button>
+              <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                      @click="value.props.multipleValues = true;$emit('change')">
+                Multiple
+              </button>
+            </div>
+          </ContextMenu>
+          <button v-if="value.props.multipleValues && !readonly" type="button" class="text-primary" @click="column.push({})">
+            <svg width="14" height="14" 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 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+        <ListItem :items="column"
+                  class="mt-2 bg-transparent"
+                  container-class="flex flex-col gap-2"
+                  @reorder="(from, to) => { column.splice(to, 0, column.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-2">
+              <div data-reorder v-if="column.length > 1">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1 flex flex-row gap-2">
+                <Dropdown class="flex-1"
+                          v-model="item.key"
+                          :readonly="readonly"
+                          @change="$emit('change')">
+                  <option v-for="column in selectedDatasourceColumns"
+                          :value="column.key">
+                    {{ column.label }}
+                  </option>
+                </Dropdown>
+
+                <Dropdown v-model="item.modifier"
+                          :readonly="readonly"
+                          class="w-[125px]"
+                          @change="$emit('change')">
+                  <option value="">-</option>
+                  <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>
+                </Dropdown>
+              </div>
+              <button v-if="column.length > 1 && !readonly" type="button" @click="column.splice(index, 1);$emit('change')">
+                <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>
+          </template>
+        </ListItem>
+      </div>
+
+      <div>
+        <div class="flex flex-row gap-2">
+          <label class="text-text-400 flex-1">Interactions</label>
+          <button type="button" class="text-primary" @click="$refs.interactionEdit.create()">
+            <svg width="14" height="14" 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 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+        <div class="mt-1">
+          <ListItem :items="interactions"
+                    class="rounded-xl"
+                    container-class="flex flex-col divide-y divide-text-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">
+                <div data-reorder v-if="interactions.length > 1">
+                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                </div>
+                <div class="flex-1 p-3 cursor-pointer" @click="$refs.interactionEdit.open(item)">
+                  {{ item.event }}
+                  {{ item.eventModifier ? item.eventModifier : '' }}
+                </div>
+                <button type="button" @click="interactions.splice(index, 1)">
+                  <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>
+            </template>
+          </ListItem>
+
+          <InteractionEdit ref="interactionEdit" @save="addInteraction" />
+        </div>
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {InteractionEdit},
+
+  computed: {
+
+    column(){
+      if(!Array.isArray(this.value.props.column))
+        this.value.props.column = [ { key:'' } ]
+
+      if(this.value.props.multipleValues)
+        return this.value.props.column
+      return [ this.value.props.column[0] ]
+    },
+
+    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)
+    },
+
+    selectedDatasourceColumns(){
+      if(!this.selectedDatasource) return []
+
+      return this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          [
+            ...(this.selectedDatasource.computedColumns ?? []),
+            ...this.selectedDatasource.columns
+          ]
+    },
+
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'appStyle', 'previewDatasource' ],
+
+  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.column[0]
+
+      this.$emit('change')
+    }
+
+  },
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  props: {
+
+    datasource: Object,
+
+    readonly: [ Boolean, Number ],
+
+    value: Object
+
+  }
+
+}
+
+</script>