@mixd-id/web-scaffold 0.1.230406346 → 0.1.230406348

package/package.json

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

package/src/components/GHeatMaps.vue

@@ -0,0 +1,256 @@
+<template>
+	<div :class="$style.comp">
+		<div v-if="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>
+
+<script>
+
+import { Loader } from '@googlemaps/js-api-loader';
+
+export default{
+
+  name: "GHeatMaps",
+
+	props: {
+    column: String,
+
+    value: Object,
+
+    apiKey: {
+      type: String,
+      default: 'AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ'
+    },
+	},
+
+	data(){
+		return {
+			map: null,
+      zoom: 4,
+      center: null,
+		}
+	},
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+
+		load(){
+			if(!this.apiKey) return
+			if(!Array.isArray(this.datasets) || this.datasets.length < 1)
+				return
+
+			const loader = new Loader({
+				apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+			})
+
+			loader.load()
+				.then(async () => {
+
+					const { Map } = await google.maps.importLibrary([ "maps" ]);
+					await google.maps.importLibrary("visualization", ["HeatmapLayer"]);
+
+					var center = new google.maps.LatLng(
+						this.center ? this.center[0] : -6.2088,
+						this.center ? this.center[1] : 106.8456);
+
+					this.map = new Map(this.$refs.map, {
+						center: center,
+						zoom: this.zoom ?? 4,
+						mapTypeId: 'roadmap',
+						streetViewControl: false,
+						keyboardShortcuts: false,
+						styles: [
+							{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+							{
+								featureType: "administrative.locality",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "geometry",
+								stylers: [{ color: "#263c3f" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#6b9a76" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry",
+								stylers: [{ color: "#38414e" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#212a37" }],
+							},
+							{
+								featureType: "road",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#9ca5b3" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry",
+								stylers: [{ color: "#746855" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#1f2835" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#f3d19c" }],
+							},
+							{
+								featureType: "transit",
+								elementType: "geometry",
+								stylers: [{ color: "#2f3948" }],
+							},
+							{
+								featureType: "transit.station",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "water",
+								elementType: "geometry",
+								stylers: [{ color: "#17263c" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#515c6d" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.stroke",
+								stylers: [{ color: "#17263c" }],
+							},
+						]
+					});
+
+					google.maps.event.addListener(this.map, 'zoom_changed', () => {
+						this.zoom = this.map.getZoom();
+					});
+
+					google.maps.event.addListener(this.map, 'center_changed', () => {
+						this.center = [
+							this.map.getCenter().lat(),
+							this.map.getCenter().lng()
+						]
+					});
+
+					var heatMapData = [
+						/*{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
+						new google.maps.LatLng(37.782, -122.445),
+						{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
+						{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
+						{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
+						new google.maps.LatLng(37.782, -122.437),
+						{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
+
+						{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
+						{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
+						new google.maps.LatLng(37.785, -122.443),
+						{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
+						new google.maps.LatLng(37.785, -122.439),
+						{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
+						{location: new google.maps.LatLng(37.785, -122.435), weight: 3}*/
+					];
+
+					this.datasets.forEach((item) => {
+						if(item[0] && item[1] && item[2]){
+							heatMapData.push({
+								location: new google.maps.LatLng(item[0], item[1]),
+								weight: item[2]
+							})
+						}
+					})
+
+					var heatmap = new google.maps.visualization.HeatmapLayer({
+						data: heatMapData,
+						dissipating: true
+					});
+					heatmap.set('radius', parseInt(this.mapRadius ?? 12))
+					heatmap.setMap(this.map);
+
+					const gradient = [
+						"rgba(0, 255, 255, 0)",
+						"rgba(0, 255, 255, 1)",
+						"rgba(0, 191, 255, 1)",
+						"rgba(0, 127, 255, 1)",
+						"rgba(0, 63, 255, 1)",
+						"rgba(0, 0, 255, 1)",
+						"rgba(0, 0, 223, 1)",
+						"rgba(0, 0, 191, 1)",
+						"rgba(0, 0, 159, 1)",
+						"rgba(0, 0, 127, 1)",
+						"rgba(63, 0, 91, 1)",
+						"rgba(127, 0, 63, 1)",
+						"rgba(191, 0, 31, 1)",
+						"rgba(255, 0, 0, 1)",
+					];
+					heatmap.set("gradient", gradient);
+
+					//console.log('Gmap, data count:', this.data.length)
+				});
+		}
+
+	},
+
+  computed: {
+
+    datasets(){
+      if(!Array.isArray(this.value?.items)) return []
+
+      const grouped = this.value.items.reduce((acc, item) => {
+        if(!acc[item[this.column]]) acc[item[this.column]] = 0
+        acc[item[this.column]] += 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: {
+
+    datasets(){
+			this.load()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col h-[40vh] bg-base-500;
+}
+
+</style>

package/src/components/List.vue

@@ -464,7 +464,6 @@ export default{
               columns: [
                 { key:attr, visible:true }
               ],
-              itemsPerPage: 1000,
               filters: [
                 {
                   key:key, value: [ { operator:'in', value:reqItems } ]

package/src/components/VirtualTable.vue

@@ -573,8 +573,8 @@ export default{
             enumText = typeParam && typeParam.text ? typeParam.text : enumText
           }
 
-          if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value]){
-            enumText = this.enumCache[column.key][value].text ?? enumText
+          else if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value?.toString()]){
+            enumText = this.enumCache[column.key][value?.toString()].text ?? enumText
           }
 
           text = enumText ? enumText : text

package/src/configs/dashboard/gheatmaps.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"GHeatMaps",
+
+  props:{
+
+  }
+
+}

package/src/index.js

@@ -336,8 +336,6 @@ export default{
     app.directive('tooltip', (el, binding) => {
       if(!binding.value) return
 
-      console.log(binding)
-
       if(!el.getAttribute('data-tooltip')) {
 
         const uid = uniqid()
@@ -528,6 +526,7 @@ export default{
     app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
     app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
     app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))
+    app.component('GHeatMaps', defineAsyncComponent(() => import("./components/GHeatMaps.vue")))
     app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
     app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
     app.component('IconMenu', defineAsyncComponent(() => import("./components/IconMenu.vue")))

package/src/utils/dashboard.js

@@ -45,15 +45,23 @@ const backgroundColors = [
 ]
 
 const getModelFromDatasource = async (datasource, opt) => {
-  if(!opt.conn.models[datasource.datasourceUid]){
-    const tableColumns = await getSequelizeColumns(datasource.columns, opt)
 
-    opt.conn.define(datasource.datasourceUid, tableColumns, {
-      tableName: `datasource_${datasource.datasourceUid}`
-    })
-  }
+  switch(datasource.type){
+
+    case 2:
+      return opt.conn.models[datasource.key]
+
+    default:
+      if(!opt.conn.models[datasource.datasourceUid]){
+        const tableColumns = await getSequelizeColumns(datasource.columns, opt)
 
-  return opt.conn.models[datasource.datasourceUid]
+        opt.conn.define(datasource.datasourceUid, tableColumns, {
+          tableName: `datasource_${datasource.datasourceUid}`
+        })
+      }
+
+      return opt.conn.models[datasource.datasourceUid]
+  }
 }
 
 const getDatasourceItems = async (datasource, opt) => {

package/src/utils/helpers.js

@@ -524,8 +524,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,

package/src/utils/preset-selector.js

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

package/src/widgets/Dashboard/BarChart.vue

@@ -1,20 +1,67 @@
 <template>
-	<div :class="$style.comp" class="flex flex-col gap-3">
+	<div :class="$style.comp">
 
-    <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
+    <div v-if="readyState === 2" class="flex-1 flex">
+      <div :style="barStyles" class="flex-1 flex items-center justify-center">
+        <svg class="animate-spin aspect-square w-[24px] h-[24px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+      </div>
+    </div>
 
-    <div class="flex-1">
-      <Bar :style="barStyles"
-           :options="chartOptions"
-           :data="chartData"/>
+    <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-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:yLegend.color }">
-        {{ (yLegend.key ?? '').toString().split(' ')[0].toLowerCase() }}
+    <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 v-if="yAxeMultiple && yLegends?.length > 0" class="flex flex-row items-center flex-wrap justify-center gap-1">
+          <div v-for="yLegend in showedYLegends"
+               v-tooltip="`${yLegend.key}`"
+               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"
+               :style="{ backgroundColor:yLegend.color }">
+            {{ (yLegend.key ?? '').toString().split(' ')[0].toLowerCase() }}
+          </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>
+      </div>
+
+      <div class="flex-1">
+        <Bar :style="barStyles"
+             :options="chartOptions"
+             :data="chartData"/>
       </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-[24px] h-[24px] rounded-full" :style="{ backgroundColor:yLegend.color }"></div>
+              <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ yLegend.key }}</div>
+            </div>
+          </div>
+
+          <br />
+
+        </div>
+      </Modal>
     </div>
 
 	</div>
@@ -25,7 +72,7 @@
 import {Bar} from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import { color } from 'chart.js/helpers'
-import {useDatasource} from "../../stores/datasource";
+import {strVars} from "../../utils/helpers.mjs";
 
 export default{
 
@@ -51,7 +98,7 @@ export default{
         datasets: this.value.datasets.map(_ => {
           return {
             ..._,
-            borderWidth: 1,
+            borderWidth: 0,
             borderColor: function(context, options) {
               const hex = options.color;
               return color(hex).darken(0.5).rgbString()
@@ -76,7 +123,7 @@ export default{
                 return `${tooltipItems[0].label}`;
               },
               label: (tooltipItem) => {
-                if(this.usePercentage)
+                if(this.yAxeMultiple && this.usePercentage)
                   return `${tooltipItem.dataset.label}: ${tooltipItem.dataset.data0[tooltipItem.dataIndex]} (${tooltipItem.raw}%)`
                 return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
               }
@@ -94,10 +141,13 @@ export default{
             ticks: {
               callback: function(value) {
                 const label = this.getLabelForValue(value) ?? '';
-                return label.length > 10 ? label.slice(0, 10) + '...' : label;
+                return label.length > 10 ? label.slice(0, 30) + '...' : label;
               },
               minRotation: 0,
-              maxRotation: 0
+              maxRotation: 0,
+              font: {
+                size: 11
+              }
             },
             stacked: !!this.stacked,
           },
@@ -105,6 +155,9 @@ export default{
             beginAtZero: true,
             ticks: {
               display: !this.yAxeMultiple || this.usePercentage,
+              font: {
+                size: 11,
+              },
             },
             grid: {
               display: true,
@@ -112,25 +165,24 @@ export default{
                 return `rgba(255,255,255, .1)`
               }
             },
-            stacked: !!this.stacked,
+            stacked: !!this.stacked
           }
         },
-        onClick: function(evt, evt2) {
-          console.log(evt);
-          console.log(evt2);
-        }
+        onClick: this.onClick
       }
     },
 
-    cValue(){
-      return this.datasourceUid && this.datasource ?
-          this.datasource.keys[this.datasourceUid] :
-          this.value
+    isError(){
+      return this.value?.error === 1
     },
 
     yLegends(){
       return this.value?.yLegends ?? []
-    }
+    },
+
+    showedYLegends(){
+      return this.yLegends.slice(0, 5)
+    },
 
   },
 
@@ -150,9 +202,57 @@ export default{
       ],
 
       datasets: null,
+
+      readyState: 1,
     }
   },
 
+  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
+        }
+      }
+
+    },
+
+    resetState(){
+      this.setState(1)
+    },
+
+    setState(state){
+      this.readyState = state
+    },
+
+  },
+
   props: {
 
     datasourceUid: String,
@@ -177,15 +277,10 @@ export default{
 
     yAxeOnClick: Array,
 
-    value: Object
+    value: Object,
 
-  },
+    interactions: Array
 
-  setup(){
-    const datasource = useDatasource()
-    return {
-      datasource
-    }
   },
 
 }
@@ -196,7 +291,7 @@ export default{
 
 .comp{
   @apply border-[1px] border-text-50 bg-base-500 rounded-lg;
-  @apply p-3;
+  @apply p-3 flex flex-col;
 }
 
 </style>