@mixd-id/web-scaffold 0.1.230406345 → 0.1.230406347

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406345",
+  "version": "0.1.230406347",
   "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/Modal.vue

@@ -112,9 +112,10 @@ export default{
       this.context = context
 
       if(this.hash){
+        const hash = context.hash ?? this.hash
         this.$router.push({
           ...this.$route,
-          hash: this.$route.hash.replace(this.hash, '') + this.hash
+          hash: this.$route.hash.replace(hash, '') + hash
         })
       }
       else{

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,19 +1,34 @@
 <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">
+      <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 && yLegends?.length < 10" class="flex flex-row flex-wrap justify-center gap-1">
+        <div v-for="yLegend in yLegends"
+             v-tooltip="`${yLegend.key}`"
+             class="p-0.5 px-1 rounded-lg 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>
       </div>
     </div>
 
@@ -25,7 +40,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 +66,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 +91,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 +109,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 +123,9 @@ export default{
             beginAtZero: true,
             ticks: {
               display: !this.yAxeMultiple || this.usePercentage,
+              font: {
+                size: 11,
+              },
             },
             grid: {
               display: true,
@@ -112,20 +133,15 @@ 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(){
@@ -150,9 +166,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 +241,10 @@ export default{
 
     yAxeOnClick: Array,
 
-    value: Object
+    value: Object,
 
-  },
+    interactions: Array
 
-  setup(){
-    const datasource = useDatasource()
-    return {
-      datasource
-    }
   },
 
 }
@@ -196,7 +255,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>