@mixd-id/web-scaffold 0.2.240702 → 0.2.240704

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>

package/src/widgets/Dashboard/PolarArea.vue

@@ -0,0 +1,159 @@
+<template>
+  <div v-if="readyState === 1" class="flex flex-col gap-2">
+    <PolarArea 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 {PolarArea} from 'vue-chartjs'
+import {color} from 'chart.js/helpers'
+import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
+
+export default{
+
+  components: {
+    PolarArea
+  },
+
+  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}%)`;
+              }
+            },
+          },
+        },
+        scales: {
+          r: {
+            display: false
+          }
+        },
+        onClick: this.onClick
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+    }
+  },
+
+  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: String,
+
+    datasourceUid: String,
+
+    interactions: Array,
+
+    uid: String,
+
+  }
+
+}
+
+</script>