@mixd-id/web-scaffold 0.1.230406250 → 0.1.230406252

package/package.json

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

package/src/components/Chart.vue

@@ -13,17 +13,34 @@
       </h4>
     </div>
 
-    <Bar v-if="preset.chart.type === 'bar'" class="w-full"
-        id="my-chart-id"
-        :options="chartOptions"
-        :data="chartData"
-    />
-
-    <Line v-if="preset.chart.type === 'line'" class="w-full"
-        id="my-chart-id"
-        :options="chartOptions"
-        :data="chartData"
-    />
+    <div class="flex-1 flex flex-col">
+
+      <Bar v-if="preset.chart.type === 'bar'"
+           class="w-full"
+           :options="chartOptions"
+           :data="chartData" />
+
+      <Line v-else-if="preset.chart.type === 'line'"
+            class="w-full"
+            :options="chartOptions"
+            :data="chartData" />
+
+      <Doughnut v-else-if="preset.chart.type === 'doughnut'"
+                class="aspect-square"
+                :options="chartOptions"
+                :data="chartData" />
+
+      <Pie v-else-if="preset.chart.type === 'pie'"
+                class="aspect-square"
+                :options="chartOptions"
+                :data="chartData" />
+
+      <Gmaps v-else-if="preset.chart.type === 'maps'"
+             :data="chartData"
+             :config="chartOptions"
+             class="flex-1" />
+
+    </div>
 
     <PresetSelector ref="presetSelector" :config="config" @select="load" type="chart" />
 
@@ -38,7 +55,7 @@
 
 <script>
 
-import { Bar, Line } from 'vue-chartjs'
+import { Bar, Line, Doughnut, Pie } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import PresetSelector from "../widgets/PresetSelector.vue";
 import throttle from "lodash/throttle";
@@ -46,7 +63,7 @@ import dayjs from "dayjs";
 
 export default{
 
-  components: {Bar, Line, PresetSelector},
+  components: {Bar, Line, Doughnut, Pie, PresetSelector},
 
   emits: [ 'open-preset' ],
 
@@ -103,93 +120,234 @@ export default{
 
     chartData(){
 
-      const { type, xAxis = [], yAxis = [] } = this.preset.chart ?? {}
-
+      const { type } = this.preset.chart ?? {}
+      const { xAxis = [], yAxis = [] } = this.preset.chart[type] ?? {}
       const items = this.data.items ?? []
+      let labels = []
+      let datasets = []
+
+      if(items.length > 0){
+        switch(type){
+
+          case 'doughnut':
+          case 'pie':
+            if(yAxis.length > 0){
+              for(let i = 0 ; i < items.length ; i++){
+                const item = items[i]
+
+                const data = []
+                for(let key in item){
+                  if(key.startsWith(yAxis[0].key)){
+                    const value = key.split(':').pop()
+                    if(i === 0) labels.push(value)
+                  }
+                  data.push(item[key])
+                }
+
+                let label = []
+                for(let xAxe of xAxis){
+                  if(!xAxe.key) continue
+
+                  switch(this.columns[xAxe.key].type){
+                    case 'enum':
+                      label.push(this.columns[xAxe.key].typeParams.find(_ => _.value === item[xAxe.key])?.text ?? item[xAxe.key])
+                      break
+
+                    default:
+                      label.push(item[xAxe.key])
+                      break
+                  }
+                }
+                label = label.join(' ')
+
+                datasets.push({
+                  label,
+                  backgroundColor: this.backgroundColors,
+                  data
+                })
+              }
+            }
+            break
+
+          case 'maps':
+            datasets = items
+            break
+
+          case 'line':
+          case 'bar':
+
+            if(xAxis.length > 0){
+              if(yAxis.length < 1){
+                datasets.push({
+                  label: 'count',
+                  data: [],
+                  borderColor: this.borderColors[datasets.length % this.borderColors.length],
+                  backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+                })
+              }
+              else{
+                for(let yAxe of yAxis){
+
+                  const item0 = items[0]
+                  for(let key in item0){
+                    if(key.startsWith(yAxe.key)) {
+                      const value = key.split(':').pop()
+                      let label = value
+
+                      const columnKey = yAxe.key
+                      const column = this.config.columns.find(column => column.key === columnKey)
+                      switch (column.type) {
+                        case 'enum':
+                          label = column.typeParams.find(_ => `${_.value}` === `${value}`)?.text ?? label
+                          break
+                      }
+
+                      datasets.push({
+                        key,
+                        label,
+                        data: [],
+                        borderColor: this.borderColors[datasets.length % this.borderColors.length],
+                        backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+                      })
+                    }
+                  }
+                }
+              }
 
-      const datasets = []
-      if((yAxis[0] ?? {}).aggregrate === 'count'){
-        datasets.push({
-          label: 'count',
-          data: [],
-          borderColor: this.borderColors[datasets.length % this.borderColors.length],
-          backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
-        })
-      }
-      else{
-        for(let key in items[0] ?? {}){
-          if(key !== xAxis[0].key){
-            datasets.push({
-              label: key,
-              data: [],
-              borderColor: this.borderColors[datasets.length % this.borderColors.length],
-              backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
-            })
-          }
-        }
-      }
-
-      const labels = []
-      for(let item of this.data.items ?? []){
-        labels.push(dayjs(item[xAxis[0].key]).format('DD MMM'))
-
-        if((yAxis[0] ?? {}).aggregrate === 'count'){
-          datasets[0].data.push(item['count'])
-        }
-        else{
-          for(let i in datasets){
-            datasets[i].data.push(item[datasets[i].label])
-          }
+              for(let item of this.data.items ?? []){
+
+                const column = this.config.columns.find(column => column.key === xAxis[0].key)
+                if(!column) continue
+
+                switch(column.type){
+                  case 'date':
+                    switch(xAxis[0].aggregrate){
+
+                      case 'date':
+                        labels.push(dayjs(item[xAxis[0].key]).format('DD MMM'))
+                        break
+
+                      default:
+                        labels.push(item[xAxis[0].key])
+                        break
+                    }
+                    break
+
+                  case 'enum':
+                    labels.push(column.typeParams.find(_ => _.value === item[xAxis[0].key])?.text ?? item[xAxis[0].key])
+                    break
+
+                  default:
+                    labels.push(item[xAxis[0].key])
+                    break
+                }
+
+                if(yAxis.length < 1){
+                  datasets[0].data.push(item['count'])
+                }
+                else{
+                  for(let i in datasets){
+                    datasets[i].data.push(item[datasets[i].key])
+                  }
+                }
+              }
+            }
+            break
         }
       }
 
       return {
         labels,
-        datasets
+        datasets,
       }
     },
 
     chartOptions(){
       if(typeof window === 'undefined') return
 
-      var style = getComputedStyle(document.body)
-      var gridColor = style.getPropertyValue('--text-100')
-      var gridColor2 = style.getPropertyValue('--text-200')
+      const { type } = this.chart
+      const opt = this.chartOpt
 
-      return {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: false,
-        plugins: {
-          legend: {
-            display: this.preset.chart.showLegend ?? false, // Disable the legend
-          },
-        },
-        scales: {
-          x: {
-            //display: false, // Disable x-axis labels
-            grid: {
-              display: true,
-              color: function(context){
-                return `rgb(${gridColor2})`
-              }
+      switch(type){
+
+        case 'doughnut':
+        case 'pie':
+          return {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: opt.showLegend ?? false, // Disable the legend
+              },
             },
-            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
-          },
-          y: {
-            beginAtZero: true, // Adjust y-axis as needed
-            grid: {
-              display: true,
-              color: function(context){
-                return `rgb(${gridColor})`
-              }
+          }
+
+        case 'maps':
+          return {
+            apiKey: 'AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ',
+            mapColumn: opt.mapColumn,
+            zoom: 4,
+            center: [ -1.861824, 118.444392 ]
+          }
+
+        default:
+          var style = getComputedStyle(document.body)
+          var gridColor = style.getPropertyValue('--text-100')
+          var gridColor2 = style.getPropertyValue('--text-200')
+
+          return {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: true,
+            plugins: {
+              legend: {
+                display: opt.showLegend ?? false, // Disable the legend
+              },
             },
-            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
-          },
-        },
+            scales: {
+              x: {
+                //display: false, // Disable x-axis labels
+                grid: {
+                  display: true,
+                  color: function(context){
+                    return `rgb(${gridColor2})`
+                  }
+                },
+                stacked: this.preset.chart.type === 'bar' && opt.stack
+              },
+              y: {
+                beginAtZero: true, // Adjust y-axis as needed
+                grid: {
+                  display: true,
+                  color: function(context){
+                    return `rgb(${gridColor})`
+                  }
+                },
+                stacked: this.preset.chart.type === 'bar' && opt.stack
+              },
+            },
+          }
       }
     },
 
+    chart(){
+      return this.preset.chart ?? {}
+    },
+
+    chartOpt(){
+      if(!this.preset.chart[this.preset.chart.type])
+        this.preset.chart[this.preset.chart.type] = {}
+
+      return this.preset.chart[this.preset.chart.type]
+    },
+
+    columns(){
+      return this.config.columns.reduce((acc, column) => {
+        acc[column.key] = column
+        return acc
+      }, {})
+    },
+
     preset(){
       return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
     },
@@ -200,7 +358,10 @@ export default{
 
     load(){
       this.socket.send(this.src, this.preset)
-          .then(data => this.data = data)
+          .then(data => {
+            this.data = data
+            this.readyState = 1
+          })
           .catch(err => {
             this.readyState = -1
             this.error = err
@@ -230,7 +391,6 @@ export default{
     }, 1000, { leading:true }),
 
     onSignal(event, items){
-      console.log('onSignal', event, items)
 
       const hasData = items.some(item => item._data)
       if(hasData){
@@ -318,7 +478,7 @@ export default{
 
 .comp{
   @apply flex flex-col p-2;
-  @apply bg-base-500;
+  @apply backdrop-blur-lg;
   padding-bottom: 50px;
 }
 

package/src/components/Checkbox.vue

@@ -9,7 +9,10 @@
 					</div>
 				</Transition>
 			</div>
-			<slot></slot>
+      <label v-if="!$slots.item" :class="$style.label">
+        <slot name="default"></slot>
+      </label>
+      <slot v-else name="item"></slot>
 		</label>
 	</div>
 </template>
@@ -181,4 +184,8 @@ export default {
 	opacity: 0;
 }
 
+.label{
+  @apply flex-1 text-ellipsis overflow-hidden whitespace-nowrap;
+}
+
 </style>

package/src/components/Gmaps.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.comp">
-		<div v-if="apiKey" ref="map" class="flex-1"></div>
+		<div v-if="config.apiKey" ref="map" class="flex-1"></div>
 		<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ $t('Google maps api required') }}</div>
 	</div>
 </template>
@@ -12,9 +12,12 @@ import { Loader } from '@googlemaps/js-api-loader';
 export default{
 
 	props: {
-		data: Array,
-		config: Object,
-		apiKey: String
+		data: Object,
+
+		config: {
+      type: Object,
+      default: {}
+    },
 	},
 
 	data(){
@@ -30,13 +33,13 @@ export default{
 	methods: {
 
 		load(){
-			if(!this.apiKey) return
+			if(!this.config.apiKey) return
 
-			if(!Array.isArray(this.data) || this.data.length < 1)
+			if(!Array.isArray(this.data.datasets) || this.data.datasets.length < 1)
 				return
 
 			const loader = new Loader({
-				apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+				apiKey: this.config.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
 			})
 
 			loader.load()
@@ -51,7 +54,7 @@ export default{
 
 					this.map = new Map(this.$refs.map, {
 						center: center,
-						zoom: this.config.zoom ?? 7,
+						zoom: this.config.zoom ?? 4,
 						mapTypeId: 'roadmap',
 						streetViewControl: false,
 						keyboardShortcuts: false,
@@ -166,7 +169,7 @@ export default{
 						{location: new google.maps.LatLng(37.785, -122.435), weight: 3}*/
 					];
 
-					this.data.forEach((item) => {
+					this.datasets.forEach((item) => {
 						if(item[0] && item[1] && item[2]){
 							heatMapData.push({
 								location: new google.maps.LatLng(item[0], item[1]),
@@ -206,6 +209,27 @@ export default{
 
 	},
 
+  computed: {
+
+    datasets(){
+      if(!Array.isArray((this.data ?? {}).datasets)) return []
+
+      const grouped = this.data.datasets.reduce((acc, item) => {
+        if(!acc[item['deliveryCityCoord']]) acc[item['deliveryCityCoord']] = 0
+        acc[item['deliveryCityCoord']] += 1
+        return acc
+      }, {})
+
+      const datasets = []
+      for(let coord in grouped){
+        datasets.push([parseFloat(coord.split(',')[0]), parseFloat(coord.split(',')[1]), grouped[coord]])
+      }
+
+      return datasets
+    }
+
+  },
+
 	watch: {
 
 		data(){
@@ -221,7 +245,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col;
+	@apply flex flex-col;
 }
 
-</style>
+</style>

package/src/components/List.vue

@@ -4,7 +4,7 @@
          class="flex-1 flex flex-row">
 
       <div v-if="computedPresetMode === 'sidebar' && config.sidebarOpen"
-           class="relative flex flex-col border-r-[1px] border-text-50 bg-base-400 dark:bg-base-300 backdrop-blur-lg"
+           class="relative flex flex-col border-r-[1px] border-text-50 backdrop-blur-lg"
            :style="sidebarWidth">
 
         <PresetBar :config="config"
@@ -22,7 +22,7 @@
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col gap-3" :class="containerClass">
+      <div class="flex-1 flex flex-col gap-6" :class="containerClass">
 
         <slot name="head"
               :preset="preset"
@@ -44,11 +44,11 @@
 
               <div class="flex-1"></div>
 
-              <slot name="toolbar"></slot>
+              <slot v-if="Boolean(toolbar)" name="toolbar"></slot>
             </div>
 
             <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
-              <Textbox class="flex-1 bg-base-500 md:w-[240px]" placeholder="Search..." clearable="1"
+              <Textbox class="flex-1 backdrop-blur-lg md:w-[240px]" placeholder="Search..." clearable="1"
                        v-model="preset.search"
                        @clear="delete preset.search; load()"
                        @keyup.enter="load">
@@ -85,7 +85,7 @@
 
         <VirtualTable v-if="presetView === 'table'"
                       :columns="columns"
-                      class="flex-1 bg-base-500 dark:bg-base-400 rounded-lg"
+                      class="flex-1 rounded-lg backdrop-blur-lg"
                       :items="data.items"
                       @scroll-end="loadNext">
 
@@ -106,7 +106,7 @@
                      :column="computedGridColumn"
                      class="flex-1"
                      @scroll-end="loadNext"
-                     :container-class="gridContainerClass"
+                     :container-class="`${gridContainerClass}`"
                      :config="config">
           <template #item="{ item }">
             <slot name="gridItem" :item="item">
@@ -190,18 +190,31 @@ export default{
               // Handle non-aggregrated pivot values
               if((this.preset.pivot ?? {}).enabled && data.items.length > 0){
 
-                const tableColumns = groupBy(this.preset.columns ?? this.config.columns, 'key')
+                const tableColumns = (this.preset.columns ?? this.config.columns).reduce((cur, obj) => {
+                  cur[obj.key] = obj
+                  return cur
+                }, {})
 
                 const columns = []
                 for(let key in data.items[0]){
                   if(key.startsWith('_')){
                     const [ k1, k2 ] = key.substring(1).split('-')
 
+                    let label = k2.replace(/_/gi, ' ')
+                    const column = tableColumns[k1]
+                    if(column){
+                      switch(column.type){
+                        case 'enum':
+                          label = (column.typeParams ?? []).find(_ => `${_.value}` === `${k2}`)?.text ?? label
+                          break
+                      }
+                    }
+
                     if(!tableColumns[key]){
                       columns.push({
                         key,
-                        label: k2.replace(/_/gi, ' '),
-                        label2: ((tableColumns[k1][0].label ?? '') + ': ' + k2.replace(/_/gi, ' ')).trim(),
+                        label,
+                        label2: (((tableColumns[k1] ?? {}).label ?? '') + ': ' + label).trim(),
                         type: 'number',
                       })
                     }
@@ -257,7 +270,7 @@ export default{
         else{
           return new Promise((resolve) => {
             this.savePreset()
-            //this.$router.replace({ name:this.$route.name })
+            this.$router.replace({ name:this.$route.name })
             resolve()
           })
         }
@@ -461,7 +474,7 @@ export default{
     return {
       readyState: 0,
       data: {
-        itemsPerPage: 15,
+        itemsPerPage: 16,
       },
       observer: null,
       compPrefix: '',

package/src/components/Modal.vue

@@ -305,7 +305,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-400;
+	@apply bg-base-400 dark:bg-base-300;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
 }