@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/utils/event-bus.js

@@ -0,0 +1,8 @@
+// eventBus.js
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+export const useEmitter = () => {
+  return emitter
+}

package/src/utils/helpers.js

@@ -1,10 +1,9 @@
-import {Duplex} from "stream";
-
 const md5 = require("md5");
 const fs = require("fs");
 const { Op } = require('sequelize')
 const axios = require('axios')
 const dayjs = require('dayjs')
+const { camelCase } = require('lodash')
 
 
 const ceil = (num, precision = 0) => {
@@ -142,13 +141,14 @@ const strSlug = (title, separator) => {
   return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
-const strVars = (text, vars, opt = { emptyUndefined:true }) => {
-
-  (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
-    const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
-    text = text.replace(match, value)
-  })
+const strVars = (text, vars = {}, opt = { emptyUndefined:true }) => {
+  if(text){
+    (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
+      const key = match.substring(1, match.length - 1)
+      const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
+      text = text.replace(match, value)
+    })
+  }
 
   return text
 }
@@ -262,7 +262,7 @@ const unflatten = (flatObject) => {
 }
 
 const accessNestedObject = function(obj, path) {
-  if(!obj || typeof path !== 'string') return undefined
+  if(!obj || typeof path !== 'string') return
 
   const keys = path.split('.');
   let nestedObj = obj;
@@ -279,6 +279,43 @@ const accessNestedObject = function(obj, path) {
   return nestedObj;
 }
 
+const accessNestedSequelize = async(obj, path, opt = { defaultValue:'' }) => {
+  if(!obj || typeof path !== 'string') return
+
+  const keys = path.split('.');
+  let value = obj;
+
+  for (let i in keys) {
+    const key = keys[i]
+    const hasNext = i < keys.length - 1
+
+    if(hasNext){
+
+      if(!value[key]){
+        try{
+          value = await value[camelCase(`get-${key}`)]()
+        }
+        catch(e){}
+      }
+      else{
+        value = value[key]
+      }
+
+      if(!value){
+        return
+      }
+    }
+
+    else{
+      value = key in value.dataValues ?
+                value[key] :
+                opt.defaultValue
+    }
+  }
+
+  return value;
+}
+
 const createObjectFromPath = (obj, path, value) => {
   const keys = path.split('.');
 
@@ -526,8 +563,16 @@ const dayTimeRange = (params, value) => {
   })
 }
 
+function capitalize(str) {
+  return (str ?? '')
+    .toString()
+    .split(' ')
+    .map(_ => _.charAt(0).toUpperCase() + _.slice(1).toLowerCase())
+    .join(' ')
+}
 
 module.exports = {
+  capitalize,
   ceil,
   floor,
   ftWildcard,
@@ -546,6 +591,7 @@ module.exports = {
   getPresetSortWhereParams,
   unflatten,
   accessNestedObject,
+  accessNestedSequelize,
   createObjectFromPath,
   generateStylesheet,
   hexToRgb,

package/src/utils/helpers.mjs

@@ -360,7 +360,40 @@ function applyDatasourceReplacer(value, datasource){
   return value
 }
 
+function capitalize(str) {
+  return str.replace(/\b\w/g, function(char) {
+    return char.toUpperCase();
+  });
+}
+
+const round = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.round(n) / p
+}
+
+let invokeAfterIdleStore = []
+const invokeAfterIdle = (callback, delay = 1300) => {
+  let timeoutId
+
+  return function(){
+    if(invokeAfterIdleStore.includes(callback))
+      return
+
+    invokeAfterIdleStore.push(callback)
+
+    window.clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      callback.apply(this, arguments)
+      invokeAfterIdleStore.splice(invokeAfterIdleStore.indexOf(callback), 1)
+    }, delay)
+  }
+}
+
+
 export {
+  capitalize,
+  round,
   downsizeImage,
   hexToRgb,
   rgbToHex,
@@ -382,7 +415,8 @@ export {
   createFormData,
   unslugAndCapitalize,
   applyDatasourceReplacer,
-  strVars
+  strVars,
+  invokeAfterIdle
 }
 
 function observeInit(){

package/src/utils/preset-selector.js

@@ -925,9 +925,11 @@ const presetToSequelizeList = async(preset = {}, {
   order:initialOrder
 }) => {
 
+  const updatedAtField = model.rawAttributes['updatedAt'] ?? model.rawAttributes['updated_at']
+
   if(!initialOrder){
     initialOrder = [
-      [ 'updatedAt', 'desc' ],
+      ...(updatedAtField ? [[ updatedAtField.fieldName, 'desc' ]] : []),
       [ 'id', 'desc' ],
     ]
   }
@@ -1036,7 +1038,8 @@ const presetToSequelizeList = async(preset = {}, {
         ...replacements,
         ...filterReplacements,
         ...searchReplacements
-      ]
+      ],
+      itemsPerPage
     }
   }
 }

package/src/utils/preset-selector.mjs

@@ -1,3 +1,5 @@
+import md5 from "md5";
+
 const sortsFn = function(a, b, sorts, index){
 
   const sort = sorts[index]
@@ -31,24 +33,31 @@ const pickColumns = function(columns, keys){
   return picked
 }
 
+const getPresetUid = function(extra = ''){
+  return md5('preset-' + new Date().getTime() + extra)
+}
+
 const setupConfig = (config) => {
 
   if(Array.isArray(config.presets)){
     for(let idx in config.presets){
-      if(!Array.isArray(config.presets[idx].columns)){
-        config.presets[idx].columns = []
+      if(!Array.isArray(config.presets[idx].params.columns)){
+        config.presets[idx].params.columns = []
       }
 
-      if(config.presets[idx].columns[0] && typeof config.presets[idx].columns[0] === 'string'){
-        config.presets[idx].columns = pickColumns(config.columns ?? [], config.presets[idx].columns)
+      if(config.presets[idx].params.columns[0] && typeof config.presets[idx].params.columns[0] === 'string'){
+        config.presets[idx].params.columns = pickColumns(config.params.columns ?? [], config.presets[idx].params.columns)
       }
 
-      if(!config.presets[idx].view)
-        config.presets[idx].view = 'table'
+      if(!config.presets[idx].params.view)
+        config.presets[idx].params.view = 'table'
+
+      if(!config.presets[idx].uid)
+        config.presets[idx].uid = getPresetUid(idx)
     }
 
-    if(!config.presetIdx && config.presets.length > 0){
-      config.presetIdx = 0
+    if(!config.params.presetIdx && config.presets.length > 0){
+      config.params.presetIdx = config.presets[0].uid
     }
   }
 
@@ -147,11 +156,11 @@ const generatePivotColumns = (preset, items) => {
     }
   }
 
-  (preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
+  /*(preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
     .forEach(_ => {
       _.visible = false
       pivotColumns.push(_)
-    })
+    })*/
 
   preset.pivot.columns = pivotColumns
 
@@ -177,9 +186,10 @@ const generateTotalColumns = (preset, items) => {
 }
 
 export {
-  sortsFn,
+  getPresetUid,
+  generatePivotColumns,
+  generateTotalColumns,
   pickColumns,
   setupConfig,
-  generatePivotColumns,
-  generateTotalColumns
+  sortsFn,
 }

package/src/widgets/Dashboard/BarChart.vue

@@ -0,0 +1,330 @@
+<template>
+	<div :class="$style.comp" :style="cStyle">
+
+    <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
+      <label class="text-text-300">Loading...</label>
+    </div>
+
+    <div v-else-if="isError" class="flex-1 flex">
+      <div :style="barStyles" class="flex-1 flex items-center justify-center">
+        <p class="text-text-300">{{ value.message }}</p>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col gap-3">
+      <div class="flex flex-row items-center gap-4">
+        <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap flex-1">{{ label }}</label>
+      </div>
+
+      <div class="flex-1">
+        <Bar :style="barStyles"
+             :options="chartOptions"
+             :data="chartData"/>
+      </div>
+
+      <div v-if="yAxeMultiple && yLegends?.length > 0" class="flex flex-row items-center flex-wrap justify-center gap-1">
+        <div v-for="yLegend in showedYLegends"
+             @click="toggleExcludes(yLegend)"
+             class="p-0.5 px-1 rounded-full text-black cursor-default text-xs min-w-[50px] max-w-[60px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
+             :class="excluded.includes(yLegend.key) ? 'bg-text-200' : ''"
+             :style="{ backgroundColor:excluded.includes(yLegend.key) ? '' : yLegend.color }">
+          {{ yLegend.key }}
+        </div>
+        <button v-if="yLegends.length > showedYLegends.length" @click="$refs.legendModal.open()"
+                class="bg-text-200 hover:bg-primary-600 w-[21px] h-[21px] rounded-full flex items-center justify-center">
+          <svg width="14" height="14" class="fill-white opacity-70" 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="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
+        </button>
+      </div>
+
+      <Modal ref="legendModal" width="320" height="360" :dismissable="true" @dismiss="$refs.legendModal.close()">
+        <template v-slot:head>
+          <div class="relative p-5">
+            <h3>Legend</h3>
+            <div class="absolute top-0 right-0 p-2">
+              <button type="button" class="p-2" @click="$refs.legendModal.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>
+        <div class="flex-1 p-5 pt-0">
+
+          <div class="flex flex-col divide-y divide-text-50">
+            <div v-for="yLegend in yLegends" class="flex flex-row items-center gap-2 py-2">
+              <div class="w-[19px] h-[19px] rounded-full" :style="{ backgroundColor:yLegend.color }"></div>
+              <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ yLegend.key }}</div>
+              <Checkbox :value="!excluded.includes(yLegend.key)" @click.prevent="toggleExcludes(yLegend)" />
+            </div>
+          </div>
+
+          <br />
+
+        </div>
+      </Modal>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {Bar} from 'vue-chartjs'
+import {color} from 'chart.js/helpers'
+import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
+
+export default{
+
+  components: {
+    Bar
+  },
+
+  computed: {
+
+    barStyles(){
+      return {
+        position: "relative",
+        height: `${this.barHeight}px`
+      }
+    },
+
+    cStyle(){
+      return {
+        minHeight: this.height
+      }
+    },
+
+    chartData(){
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets
+            .filter(_ => !this.excluded.includes(_.label))
+            .map(_ => {
+              return {
+                ..._,
+                borderWidth: 0,
+                borderColor: function(context, options) {
+                  const hex = options.color;
+                  return color(hex).darken(0.5).rgbString()
+                }
+              }
+            })
+      }
+    },
+
+    chartOptions(){
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        borderRadius: 4,
+        plugins: {
+          legend: {
+            display: false // This hides the legend
+          },
+          tooltip: {
+            callbacks: {
+              title: function(tooltipItems) {
+                return `${tooltipItems[0].label}`;
+              },
+              label: (tooltipItem) => {
+                if(this.yAxeMultiple && this.usePercentage)
+                  return `${tooltipItem.dataset.label}: ${tooltipItem.dataset.data0[tooltipItem.dataIndex]} (${tooltipItem.raw}%)`
+                else{
+                  if(this.stacked){
+                    const total = this.value.datasets.reduce((acc, cur) => acc + cur.data[tooltipItem.dataIndex], 0)
+                    const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
+
+                    return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
+                  }
+                  return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
+                }
+              }
+            },
+          }
+        },
+        scales: {
+          x: {
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgba(255,255,255, .1)`
+              }
+            },
+            ticks: {
+              callback: function(value) {
+                const label = this.getLabelForValue(value) ?? '';
+                return label.length > 10 ? label.slice(0, 30) + '...' : label;
+              },
+              minRotation: 0,
+              maxRotation: 0,
+              font: {
+                size: 11
+              }
+            },
+            stacked: !!this.stacked,
+          },
+          y: {
+            beginAtZero: true,
+            ticks: {
+              display: true,
+              font: {
+                size: 11,
+              },
+              callback: (value, index, ticks) => {
+                if(this.usePercentage)
+                  return Math.round(index / (ticks.length - 1) * 100) + '%'
+                return value
+              },
+            },
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgba(255,255,255, .1)`
+              }
+            },
+            stacked: !!this.stacked
+          }
+        },
+        onClick: this.onClick
+      }
+    },
+
+    isError(){
+      return this.value?.error === 1
+    },
+
+    yLegends(){
+      return this.value?.yLegends ?? []
+    },
+
+    showedYLegends(){
+      return this.yLegends.slice(0, 5)
+    },
+
+  },
+
+  data(){
+    return {
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+
+      height: '',
+      datasets: null
+    }
+  },
+
+  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
+        }
+      }
+
+    },
+
+    toggleExcludes(yLegend){
+      if(this.excluded.includes(yLegend.key))
+        this.excluded.splice(this.excluded.indexOf(yLegend.key), 1)
+      else
+        this.excluded.push(yLegend.key)
+    }
+
+  },
+
+  mounted() {
+    this.height = this.$el.clientHeight + 'px'
+  },
+
+  mixins: [ readyStateMixin ],
+
+  props: {
+
+    datasourceUid: String,
+
+    usePercentage: [ Boolean, Number ],
+    stacked: [ Boolean, Number ],
+
+    barHeight: {
+      type: Number,
+      default: 200
+    },
+
+    label: String,
+
+    xAxes: Array,
+    yAxes: Array,
+    xAxeMultiple: Boolean,
+    yAxeMultiple: Boolean,
+
+    excluded: {
+      type: Array,
+      default: []
+    },
+
+    segments: Array,
+    xAxesGroup: String,
+
+    yAxeOnClick: Array,
+
+    value: Object,
+
+    interactions: Array,
+
+    uid: String
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-50 bg-base-500 rounded-lg;
+  @apply p-3 flex flex-col min-h-[200px];
+}
+
+</style>