@mixd-id/web-scaffold 0.1.230406338 → 0.1.230406339

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406338",
+  "version": "0.1.230406339",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Modal.vue

@@ -331,10 +331,8 @@ export default{
 	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
-  background-color: rgba(255, 255, 255, .6)
 }
 html[data-theme='dark'] .modal{
-  background-color: rgba(0, 0, 0, .6)
 }
 
 .modal.v-show{

package/src/components/VirtualTable.vue

@@ -1,5 +1,6 @@
 <template>
 	<div :class="$style.comp">
+
 		<div :class="$style.header" v-if="visibleColumns.length > 0">
 			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
 				<thead>
@@ -62,21 +63,21 @@
 			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
 				<h5 class="text-text-300">No active column</h5>
 			</div>
-			<div v-else-if="Array.isArray(items) && items.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+			<div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
 				<h5 class="text-text-300">No data available</h5>
 			</div>
 
-			<div :class="$style.calc" v-if="visibleColumns.length > 0 && items && items.length > 0" ref="calc">
+			<div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
 				<table :class="$style.table">
 					<tbody>
-					<tr>
-						<td v-for="column in columns" :style="thStyle(column)" :class="thClass(column)">
-							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
-							<slot v-else-if="$slots.default" name="default" :column="column" :item="items[0]"></slot>
-							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0] ?? {}, column)"></div>
-						</td>
-						<td :class="$style.spacer"></td>
-					</tr>
+            <tr>
+              <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
+                <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
+                <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
+                <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
+              </td>
+              <td :class="$style.spacer"></td>
+            </tr>
 					</tbody>
 				</table>
 			</div>
@@ -89,11 +90,19 @@
 import throttle from "lodash/throttle";
 import dayjs from "dayjs";
 import {accessNestedObject} from "../utils/helpers.mjs";
+import {useDatasource} from "../stores/datasource";
 
 const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
+  setup(){
+    const datasource = useDatasource()
+    return {
+      datasource
+    }
+  },
+
   inject: [ 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],
@@ -109,6 +118,10 @@ export default{
 
 		pinned: Function,
 
+    datasourceColumns: Array,
+
+    datasourceUid: String,
+
 		defaultColumnWidth: {
 			type: String,
 			default: _DEFAULT_COLUMN_WIDTH
@@ -118,6 +131,8 @@ export default{
 			type: Object,
 			default: {}
 		},
+
+    type: String
 	},
 
 	data(){
@@ -134,17 +149,27 @@ export default{
 
 	computed:{
 
+    cColumns(){
+      return this.datasourceColumns ?? this.columns
+    },
+
+    cItems(){
+      return this.datasourceUid ?
+          this.datasource.keys[this.datasourceUid]?.items :
+          this.items
+    },
+
 		visibleStartIndex(){
 			return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / this.itemHeight)
 		},
 
 		sortedItems(){
-			if(!Array.isArray(this.items)) return []
+			if(!Array.isArray(this.cItems)) return []
 
 			if(typeof this.pinned === 'function'){
 				const pinnedItems = []
 				const unpinnedItems = []
-				this.items.forEach((item) => {
+				this.cItems.forEach((item) => {
 					if(this.pinned(item))
 						pinnedItems.push(item)
 					else
@@ -156,7 +181,7 @@ export default{
 					...unpinnedItems
 				]
 			}
-			return this.items
+			return this.cItems
 		},
 
 		visibleItems(){
@@ -171,10 +196,10 @@ export default{
 		},
 
 		scrollerStyle(){
-			if(!this.items || this.items.length < 1)
+			if(!this.cItems || this.cItems.length < 1)
 				return {}
 
-			const height = (this.items.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
+			const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
 			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
 			return {
@@ -190,7 +215,7 @@ export default{
 		},
 
 		visibleColumns(){
-			return (this.columns ?? []).filter(_ => !('visible' in _) || _.visible)
+			return (this.cColumns ?? []).filter(_ => !('visible' in _) || _.visible)
 		},
 
 		visibleColumnKeys(){
@@ -270,7 +295,7 @@ export default{
 						window.getComputedStyle(this.$el).height :
 						window.getComputedStyle(this.$el).maxHeight)
 					this.itemHeight = Math.ceil(parseFloat(window.getComputedStyle(this.$refs.calc).height))
-					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
+					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.cItems.length
 
 					if(this.itemHeight <= 0 && import.meta.env.DEV){
 						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
@@ -319,7 +344,7 @@ export default{
 
 		startResize(e, column){
 
-			const idx = this.columns.findIndex((_) => _ === column)
+			const idx = this.cColumns.findIndex((_) => _ === column)
 			let x1 = e.touches ? e.touches[0].clientX : e.clientX
 
 			const onMouseMove = (e) => {
@@ -327,9 +352,9 @@ export default{
 				const d = x2 - x1
 				x1 = x2
 
-				let width = parseInt(this.columns[idx].width ?? _DEFAULT_COLUMN_WIDTH) + d
+				let width = parseInt(this.cColumns[idx].width ?? _DEFAULT_COLUMN_WIDTH) + d
 				if(width < 20) width = 20
-				this.columns[idx].width = width
+				this.cColumns[idx].width = width
 			}
 
 			const onMouseUp = (e) => {
@@ -563,7 +588,7 @@ export default{
 
 	watch: {
 
-		items: {
+    cItems: {
 			deep: true,
 			handler(to, from){
         if((to ?? []).length !== (from ?? []).length){

package/src/index.js

@@ -671,6 +671,12 @@ export default{
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
     app.component('Dashboard', defineAsyncComponent(() => import("./widgets/Dashboard.vue")))
     app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
+
+    app.component('Doughnut', defineAsyncComponent(() => import("./widgets/Dashboard/Doughnut.vue")))
+    app.component('Pie', defineAsyncComponent(() => import("./widgets/Dashboard/Pie.vue")))
+    app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
+    app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
+    app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
   }
 
 }

package/src/stores/datasource.js

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+
+export const useDatasource = defineStore('datasource', {
+
+  state: () => ({
+    keys: {}
+  }),
+
+  actions: {}
+
+})

package/src/widgets/Dashboard/BarChart.vue

@@ -0,0 +1,265 @@
+<template>
+	<div :class="$style.comp" class="flex flex-col gap-5">
+
+    <div v-if="yAxeMultiple" class="flex flex-row justify-center gap-1">
+      <div v-for="(yLegend, idx) in yLegends"
+           class="p-0.5 px-1 rounded-lg text-black cursor-default text-xs w-[50px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
+           :style="{ backgroundColor:backgroundColors[idx % backgroundColors.length] }">
+        {{ (yLegend ?? '').toString().split(' ')[0].toLowerCase() }}
+      </div>
+    </div>
+
+    <div class="flex-1">
+      <Bar :style="barStyles"
+           :options="chartOptions"
+           :data="chartData" />
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {Bar} from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+import {useDatasource} from "../../stores/datasource";
+
+export default{
+
+  components: {
+    Bar
+  },
+
+  computed: {
+
+    barStyles(){
+      return {
+        position: "relative",
+        height: `${this.barHeight}px`
+      }
+    },
+
+    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
+      }
+    },
+
+    chartOptions(){
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false // This hides the legend
+          }
+        },
+        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, 10) + '...' : label;
+              },
+              minRotation: 0,
+              maxRotation: 0
+            }
+          },
+          y: {
+            beginAtZero: true,
+            ticks: {
+              display: false,
+            },
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgba(255,255,255, .1)`
+              }
+            },
+          }
+        }
+      }
+    },
+
+    cValue(){
+      return this.datasourceUid && this.datasource ?
+          this.datasource.keys[this.datasourceUid] :
+          this.value
+    }
+
+  },
+
+  data(){
+    return {
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+
+      yLegends: []
+    }
+  },
+
+  props: {
+
+    datasourceUid: String,
+
+    relativeValue: {
+      type: Boolean,
+      default: false
+    },
+
+    barHeight: {
+      type: Number,
+      default: 200
+    },
+
+    xAxes: Array,
+    yAxes: Array,
+    xAxeMultiple: Boolean,
+    yAxeMultiple: Boolean,
+
+    segments: Array,
+    xAxesGroup: String,
+
+  },
+
+  setup(){
+    const datasource = useDatasource()
+    return {
+      datasource
+    }
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-50 bg-base-500 rounded-lg;
+  @apply p-3;
+}
+
+</style>