@mixd-id/web-scaffold 0.1.230406339 → 0.1.230406340

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406339",
+  "version": "0.1.230406340",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -53,7 +53,7 @@
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.14",
+    "pinia": "^2.0.2",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
     "serve-static": "^1.15.0",

package/src/components/Button.vue

@@ -45,9 +45,9 @@ export default{
 
   },
 
-  computed:{
+  computed: {
 
-    compClass(){
+    compClass() {
 
       return [
         this.$style.button,
@@ -60,20 +60,20 @@ export default{
           .join(' ')
     },
 
-    isDisabled(){
+    isDisabled() {
       return parseInt(this.computedState) !== 1
     },
 
-    isLoading(){
+    isLoading() {
       return parseInt(this.computedState) === 2
     },
 
-    computedState(){
+    computedState() {
       return this._state ?? this.state
     },
 
-    widths(){
-      if(!Array.isArray(this.width)) return [ '', '' ]
+    widths() {
+      if (!Array.isArray(this.width)) return ['', '']
 
       return [
         this.width[0] ?? '',
@@ -83,59 +83,56 @@ export default{
 
   },
 
-  data(){
+  data() {
     return {
       _state: null
     }
   },
 
-  methods:{
+  methods: {
 
-    focus(){
+    focus() {
       this.$el.focus()
     },
 
-    setState(state, percentage){
+    setState(state, percentage) {
       this._state = state
     },
 
-    resetState(){
+    resetState() {
       this._state = null
     },
 
-    onClick(){
-      if('edit-mode' in this.$route.query) return
+    onClick() {
+      if ('edit-mode' in this.$route.query) return
 
-      if(this.isDisabled){
+      if (this.isDisabled) {
         this.$emit('disabled-click')
-      }
-      else{
-        if(this.target){
-          switch(this.targetType){
+      } else {
+        if (this.target) {
+          switch (this.targetType) {
 
             case 'section':
               this.scrollTo(this.target)
               break
 
             default:
-              if(this.target.indexOf('://') >= 0){
+              if (this.target.indexOf('://') >= 0) {
                 window.location = this.target
-              }
-              else{
+              } else {
                 this.$router.push(this.target)
               }
               break
           }
-        }
-        else{
+        } else {
           this.$emit('click')
         }
       }
     },
 
-    scrollTo(exp){
+    scrollTo(exp) {
       const el = document.querySelector('._' + exp.substring(0, 4))
-      if(el){
+      if (el) {
         window.scrollTo({
           top: el.offsetTop - 100,
           behavior: 'smooth'
@@ -151,165 +148,202 @@ export default{
 
 <style module>
 
-.button{
+.button {
   @apply p-2;
   @apply relative flex items-center justify-center;
   @apply whitespace-nowrap text-ellipsis overflow-hidden;
   @apply rounded-lg appearance-none;
 }
-.button>*:first-child{
+
+.button > *:first-child {
   @apply flex items-center justify-center
 }
-.button-disabled{
+
+.button-disabled {
   @apply text-opacity-50;
 }
-.button:active{
+
+.button:active {
   @apply top-[1px] left-[1px] relative;
 }
 
-.button-primary{
+.button-primary {
   @apply bg-primary-500 text-white rounded-lg;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
   border: solid 1px rgb(var(--primary-500));
 }
-.button-primary:focus{
+
+.button-primary:focus {
   border-color: rgb(var(--primary-600));
 }
-.button-primary:hover{
+
+.button-primary:hover {
   @apply bg-primary-600;
 }
+
 .button-primary-disabled,
-.button-primary-disabled:hover{
+.button-primary-disabled:hover {
   @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
   @apply top-0 left-0;
 }
-.button-primary *{
+
+.button-primary * {
   @apply text-white fill-white;
 }
-.button-primary.loading *{
+
+.button-primary.loading * {
   @apply fill-transparent
 }
-.button-primary .svgBg{
+
+.button-primary .svgBg {
   stroke: #fff;
   stroke-opacity: 25%;
 }
-.button-primary .svgHg{
+
+.button-primary .svgHg {
   fill: #fff;
   fill-opacity: 75%;
 }
 
-.button-outline{
+.button-outline {
   @apply bg-transparent text-primary-500 border-[1px] border-primary;
 }
-.button-outline:hover{
+
+.button-outline:hover {
 }
+
 .button-outline-disabled,
-.button-outline-disabled:hover{
+.button-outline-disabled:hover {
   @apply top-0 left-0 cursor-not-allowed;
   @apply text-text border-primary-500 text-opacity-50;
 }
-.button-outline *{
+
+.button-outline * {
   @apply text-primary-500 fill-primary-500;
 }
-.button-outline.loading *{
+
+.button-outline.loading * {
   @apply fill-transparent
 }
-.button-outline .svgBg{
+
+.button-outline .svgBg {
   stroke: rgb(var(--primary-600));
   stroke-opacity: 50%;
 }
-.button-outline .svgHg{
+
+.button-outline .svgHg {
   fill: rgb(var(--primary-500));
   fill-opacity: 100%;
 }
 
-.button-secondary{
+.button-secondary {
   @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
   border: solid 1px rgb(var(--secondary-500));
 }
-.button-secondary:hover{
+
+.button-secondary:hover {
   @apply bg-secondary-600 border-secondary-600;
 }
+
 .button-secondary-disabled,
-.button-secondary-disabled:hover{
+.button-secondary-disabled:hover {
   @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
 }
-.button-secondary *{
+
+.button-secondary * {
   @apply text-text-500 fill-white;
 }
-.button-secondary.loading *{
+
+.button-secondary.loading * {
   @apply fill-transparent
 }
-.button-secondary .svgBg{
+
+.button-secondary .svgBg {
   stroke: rgb(var(--text-400));
   stroke-opacity: 25%;
 }
-.button-secondary .svgHg{
+
+.button-secondary .svgHg {
   fill: rgb(var(--text-500));
   fill-opacity: 75%;
 }
 
-.button-red{
+.button-red {
   @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
 }
-.button-red:hover{
+
+.button-red:hover {
   @apply bg-red-600 border-red-600;
 }
+
 .button-red-disabled,
-.button-red-disabled:hover{
+.button-red-disabled:hover {
   @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed text-opacity-50;
 }
-.button-red *{
+
+.button-red * {
   @apply text-white fill-white;
 }
-.button-red.loading *{
+
+.button-red.loading * {
   @apply fill-transparent
 }
-.button-red .svgBg{
+
+.button-red .svgBg {
   @apply stroke-red-400;
   stroke-opacity: 50%;
 }
-.button-red .svgHg{
+
+.button-red .svgHg {
   @apply fill-text-500;
   fill-opacity: 100%;
 }
 
-.button-minimal{
+.button-minimal {
   @apply border-[2px] border-transparent;
 }
-.button-minimal:hover{
+
+.button-minimal:hover {
 }
-.button-minimal .svgBg{
+
+.button-minimal .svgBg {
   stroke: rgb(var(--text-500));
   stroke-opacity: 25%;
 }
-.button-minimal .svgHg{
+
+.button-minimal .svgHg {
   fill: rgb(var(--text));
   fill-opacity: 75%;
 }
 
-.loadingPane{
+.loadingPane {
   @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }
-.loading{
+
+.loading {
   color: transparent;
 }
-.loading>*:first-child{
+
+.loading > *:first-child {
   @apply opacity-0
 }
-.loading:hover{
+
+.loading:hover {
 }
-.loading:active{
+
+.loading:active {
   @apply top-0 left-0;
 }
-.loading>*{
+
+.loading > * {
   opacity: 0;
 }
-.loading .loadingPane{
+
+.loading .loadingPane {
   opacity: 1;
 }
 
-.spinner{
+.spinner {
   @apply animate-spin h-5 w-5;
 }
 

package/src/components/Switch.vue

@@ -91,6 +91,9 @@ export default{
 .switch>input:checked + label>span{
 	@apply ml-[1.3rem] border-base bg-white
 }
+.switch>input:checked:disabled + label{
+  @apply bg-text-50;
+}
 
 .switch>input:checked + label + *,
 .switch>input:not(:checked) + label + * + *{

package/src/components/VirtualTable.vue

@@ -132,7 +132,9 @@ export default{
 			default: {}
 		},
 
-    type: String
+    type: String,
+
+    value: Object,
 	},
 
 	data(){
@@ -154,9 +156,7 @@ export default{
     },
 
     cItems(){
-      return this.datasourceUid ?
-          this.datasource.keys[this.datasourceUid]?.items :
-          this.items
+      return this.value?.items ?? this.items
     },
 
 		visibleStartIndex(){

package/src/utils/helpers.mjs

@@ -360,7 +360,22 @@ 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
+}
+
+
 export {
+  capitalize,
+  round,
   downsizeImage,
   hexToRgb,
   rgbToHex,

package/src/widgets/Dashboard/BarChart.vue

@@ -1,5 +1,13 @@
 <template>
-	<div :class="$style.comp" class="flex flex-col gap-5">
+	<div :class="$style.comp" class="flex flex-col gap-3">
+
+    <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
+
+    <div class="flex-1">
+      <Bar :style="barStyles"
+           :options="chartOptions"
+           :data="chartData" />
+    </div>
 
     <div v-if="yAxeMultiple" class="flex flex-row justify-center gap-1">
       <div v-for="(yLegend, idx) in yLegends"
@@ -9,12 +17,6 @@
       </div>
     </div>
 
-    <div class="flex-1">
-      <Bar :style="barStyles"
-           :options="chartOptions"
-           :data="chartData" />
-    </div>
-
 	</div>
 </template>
 
@@ -40,115 +42,7 @@ export default{
     },
 
     chartData(){
-      if(!this.xAxes || !this.cValue?.items)
-        return { labels:[], datasets:[] }
-
-      let labels = []
-      let datasets = [
-        /*{
-          data:[ 1, 2, 3, 4, 5 ]
-        },
-        {
-          data:[ 2, 3, 4, 5, 6 ]
-        }*/
-      ]
-
-      let xAxes
-      if(this.xAxeMultiple){
-        xAxes = this.xAxes
-      }
-      else{
-        const xAxesKey = this.xAxes[0].key
-        const reduced = this.cValue.items.reduce((acc, item) => {
-          const key = item[xAxesKey]
-          acc[key] = { key, parentKey:xAxesKey }
-          return acc
-        }, {})
-
-        xAxes = Object.values(reduced)
-      }
-
-      let yAxes
-      if(this.yAxeMultiple){
-        const yAxesKey = this.yAxes[0].key
-        const reduced = this.cValue.items.reduce((acc, item) => {
-          const key = item[yAxesKey]
-          acc[key] = { key, parentKey:yAxesKey }
-          return acc
-        }, {})
-
-        yAxes = Object.values(reduced)
-      }
-      else{
-        yAxes = [ this.yAxes[0] ]
-      }
-
-      let idx = 0
-      const yLegends = []
-      for(let yAxe of yAxes){
-
-        let data
-
-        let items
-        if(this.yAxeMultiple){
-          items = this.cValue.items.filter(_ => _[yAxe.parentKey] === yAxe.key)
-        }
-        else{
-          items = this.cValue.items
-        }
-
-        if(this.xAxeMultiple){
-          data = xAxes.map(_ => {
-            return items.reduce((acc, item) => {
-              return acc + item[_.key]
-            }, 0)
-          })
-        }
-        else{
-          data = xAxes.map(_ => {
-            const curItems = items.filter(__ => __[_.parentKey] === _.key)
-
-            return curItems.reduce((acc, item) => {
-              return acc + item[yAxe.key]
-            }, 0)
-          })
-        }
-
-        datasets.push({
-          label: this.yAxeMultiple ? yAxe.key : 'All',
-          data,
-          backgroundColor: yAxes.length > 1 ?
-              [ this.backgroundColors[idx % this.backgroundColors.length] ]:
-              this.backgroundColors,
-          borderColor: yAxes.length > 1 ?
-              [ this.backgroundColors[idx % this.backgroundColors.length] ]:
-              this.backgroundColors,
-          borderWidth: 1
-        })
-
-        yLegends.push(yAxe.key)
-
-        idx++
-      }
-
-      labels = xAxes.map(_ => _.key)
-
-      this.yLegends = yLegends
-
-      if(this.relativeValue){
-
-
-      }
-
-      console.log('chartData', {
-        labels,
-        datasets
-      })
-
-      return {
-        labels,
-        datasets
-      }
+      return this.value ?? { labels:[], datasets:[] }
     },
 
     chartOptions(){
@@ -170,7 +64,7 @@ export default{
             },
             ticks: {
               callback: function(value) {
-                const label = this.getLabelForValue(value);
+                const label = this.getLabelForValue(value) ?? '';
                 return label.length > 10 ? label.slice(0, 10) + '...' : label;
               },
               minRotation: 0,
@@ -180,7 +74,7 @@ export default{
           y: {
             beginAtZero: true,
             ticks: {
-              display: false,
+              display: !this.yAxeMultiple || this.usePercentage,
             },
             grid: {
               display: true,
@@ -197,6 +91,10 @@ export default{
       return this.datasourceUid && this.datasource ?
           this.datasource.keys[this.datasourceUid] :
           this.value
+    },
+
+    yLegends(){
+      return this.value.yLegends ?? []
     }
 
   },
@@ -216,7 +114,7 @@ export default{
         '#EC87C0'
       ],
 
-      yLegends: []
+      datasets: null,
     }
   },
 
@@ -224,8 +122,8 @@ export default{
 
     datasourceUid: String,
 
-    relativeValue: {
-      type: Boolean,
+    usePercentage: {
+      type: Number,
       default: false
     },
 
@@ -234,6 +132,8 @@ export default{
       default: 200
     },
 
+    label: String,
+
     xAxes: Array,
     yAxes: Array,
     xAxeMultiple: Boolean,
@@ -242,6 +142,8 @@ export default{
     segments: Array,
     xAxesGroup: String,
 
+    value: Object
+
   },
 
   setup(){