@mixd-id/web-scaffold 0.1.230406133 → 0.1.230406135

package/package.json

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

package/src/components/ChartBar.vue

@@ -0,0 +1,193 @@
+<template>
+	<div :class="$style.comp">
+		<pre class="hidden whitespace-nowrap text-xs overflow-x-auto">{{ options }}</pre>
+		<Bar :class="$style.chart" :data="chartData" :options="chartOptions" />
+	</div>
+</template>
+
+<script>
+
+import { Bar } from 'vue-chartjs';
+import Chart from 'chart.js/auto'
+import dayjs from "dayjs";
+import groupBy from "lodash/groupBy";
+
+export default{
+
+	name: 'BarChart',
+
+	components: { Bar },
+
+	props: {
+
+		items: Array,
+
+		options: Object,
+
+	},
+
+	methods: {
+
+		setInitialData(){
+
+			const items = []
+			const end = new Date();
+			const start = new Date(end);
+			start.setMinutes(end.getMinutes() - 2);
+
+			let currentTime = new Date(start);
+			while (currentTime <= end) {
+
+				const count = Math.round(Math.random() * 100)
+				for(let i = 0 ; i < count ; i++){
+					items.push({
+						createdAt: currentTime.toISOString()
+					})
+				}
+
+				currentTime.setSeconds(currentTime.getSeconds() + 1);
+			}
+
+			this.items = items
+		},
+
+		play(){
+
+			const arr = []
+			const end = new Date();
+			//end.setHours(16, 7, 0, 0)
+			const start = new Date(end);
+			start.setHours(end.getHours() - 2);
+
+			let currentTime = new Date(start);
+			while (currentTime <= end) {
+				arr.push(dayjs(currentTime).format('YYYYMMDDHHmm'))
+				currentTime.setMinutes(currentTime.getMinutes() + 1);
+			}
+
+			this.labels = arr
+
+			/*let count = Math.round(Math.random() * 100)
+			if(count < 10) count = 0
+			const newItems = []
+			for(let i = 0 ; i < count ; i++){
+				newItems.push({
+					createdAt: currentTime.toISOString()
+				})
+			}
+			this.items.push(...newItems)*/
+
+			/*window.setTimeout(() => {
+				this.play()
+			}, 1000)*/
+		},
+
+	},
+
+	data(){
+		return {
+			labels: [],
+			groupedData: {},
+			// items: []
+		}
+	},
+
+	mounted() {
+
+		//this.setInitialData()
+
+		this.play()
+	},
+
+	computed: {
+
+		columnKey(){
+			return this.options.bar.rows[0].key
+		},
+
+		interval(){
+			return this.options.bar.rows[0].format
+		},
+
+		groupedItems(){
+			console.log('#1', this.columnKey)
+			return groupBy(this.items, (item) => {
+				return dayjs(item[this.columnKey]).format('YYYYMMDDHHmm')
+			})
+		},
+
+		data(){
+			const arr = []
+			for(let i = 0 ; i < this.labels.length ; i++){
+				arr.push((this.groupedItems[this.labels[i]] ?? []).length)
+			}
+
+			/*if(Array.isArray(this.labels))
+				console.log(this.labels[0], this.labels[this.labels.length - 1], Object.keys(this.groupedItems), arr)*/
+
+			return arr
+		},
+
+		chartData() {
+			return {
+				labels: this.labels,
+				datasets: [ { data: this.data } ],
+			}
+		},
+
+		chartOptions() {
+
+			var style = getComputedStyle(document.body)
+			var gridColor = style.getPropertyValue('--text-50')
+			var gridColor2 = style.getPropertyValue('--text-200')
+
+			return {
+				responsive: true,
+				maintainAspectRatio: false,
+				animation: false,
+				plugins: {
+					legend: {
+						display: false, // Disable the legend
+					},
+				},
+				scales: {
+					x: {
+						display: false, // Disable x-axis labels
+						grid: {
+							display: true,
+							color: function(context){
+								return `rgb(${gridColor2})`
+							}
+						},
+					},
+					y: {
+						beginAtZero: true, // Adjust y-axis as needed
+						grid: {
+							display: true,
+							color: function(context){
+								return `rgb(${gridColor})`
+							}
+						},
+					},
+				},
+			}
+		}
+
+	},
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1;
+}
+
+.chart{
+	position: relative;
+	width: 100%;
+}
+
+</style>

package/src/components/Image.vue

@@ -65,6 +65,10 @@ export default{
 
   computed:{
 
+		actualSrc(){
+			return this.mediaSrc[this.$screenPrefix]
+		},
+
 		compClass(){
 			return [
 				this.$style.comp,
@@ -89,21 +93,31 @@ export default{
   data(){
     return {
 			status: 0, // 0:empty, 1:loading, 2:image, 3:error
-			actualSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
-			moved: false
+			moved: false,
+			mediaSrc: {},
+			visibled: false
     }
   },
 
   mounted(){
 		this.$observe.once(this.$el, () => {
+			this.visibled = true
 			this.loadSrc()
 		})
 
-		this.$resize(() => this.loadSrc())
+		this.$resize(this.onResize)
   },
 
+	unmounted() {
+		this.$unresize(this.onResize)
+	},
+
 	methods:{
 
+		onResize(){
+			this.loadSrc()
+		},
+
 		onChange(e){
 			if(e.target.files.length > 0){
 				var reader = new FileReader();
@@ -122,10 +136,20 @@ export default{
 
 		async loadSrc(){
 
+			// src: String | Array | File
+
+			if(!this.visibled){
+				return
+			}
+
+			if(this.$screenPrefix in this.mediaSrc){
+				return
+			}
+
 			if(typeof this.src === 'string') {
 
 				if (this.src.startsWith('data:image')) {
-					this.actualSrc = this.src
+					this.mediaSrc[this.$screenPrefix] = this.src
 					this.status = 2
 				}
 				else{
@@ -156,12 +180,12 @@ export default{
 						img.addEventListener('load', () => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 2
-							this.actualSrc = img.src
+							this.mediaSrc[this.$screenPrefix] = img.src
 						})
 						img.addEventListener('error', (err) => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 3
-							this.actualSrc = this.defaultSrc
+							this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 						})
 						img.src = imgSrc
 						img.setAttribute('data-src', this.src)
@@ -188,11 +212,11 @@ export default{
 					var img = new Image()
 					img.addEventListener('load', () => {
 						this.status = 2
-						this.actualSrc = img.src
+						this.mediaSrc[this.$screenPrefix] = img.src
 					})
 					img.addEventListener('error', (err) => {
 						this.status = 3
-						this.actualSrc = this.defaultSrc
+						this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 					})
 					img.src = imgSrc
 					this.status = 1
@@ -203,18 +227,17 @@ export default{
 
 				reader.addEventListener('load', () => {
 					this.status = 2
-					this.actualSrc = reader.result
+					this.mediaSrc[this.$screenPrefix] = reader.result
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.status = 3
-					this.actualSrc = this.defaultSrc
+					this.mediaSrc[this.$screenPrefix] = this.defaultSrc
 				})
 
 				reader.readAsDataURL(this.src)
 				this.status = 1
 			}
-
 		},
 
 		onClick(){

package/src/components/ListView.vue

@@ -88,8 +88,9 @@
 				</Textbox>
 			</div>
 
-			<div v-if="presetSummary && summary" class="h-[300px] max-h-[30vh] flex">
+			<div v-if="presetSummary" class="h-[300px] flex" :class="presetSummary.mode === 'liveBar' ? 'max-h-[20vh]' : 'max-h-[30vh]'">
 				<Bar v-if="presetSummary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+				<ChartBar v-else-if="presetSummary.mode === 'liveBar'" :items="items" :options="presetSummary" class="flex-1"/>
 				<Line v-else-if="presetSummary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
 				<VirtualTable v-else-if="presetSummary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
 				<Gmaps v-else-if="presetSummary.mode === 'map'" :data="summary.items" :config="presetSummary.map"
@@ -345,6 +346,8 @@ export default{
 					break
 			}
 
+			itemsPerPage = 300
+
 			this.socketEmit2(this.src, { columns:this.config.columns, preset:this.preset, itemsPerPage })
 				.then((res) => {
 					Object.assign(this.$data, res)
@@ -411,6 +414,7 @@ export default{
         switch(event){
 
           case 'create':
+          case 'bulk-create':
           case 'update':
 						if(items[0] && Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
 							this.socketEmit2(this.src, {
@@ -596,6 +600,7 @@ export default{
 		},
 
 		chartOptions(){
+			if(!this.summary) return {}
 
 			var style = getComputedStyle(document.body)
 			var gridColor = style.getPropertyValue('--text-50')

package/src/components/ListViewBarSummary.vue

@@ -10,6 +10,7 @@
 				</Dropdown>
 				<Dropdown v-model="summary.bar.rows[0].format" class="w-[100px]">
 					<option value="">{{ $t('Default') }}</option>
+					<option value="hour">{{ $t('Hour') }}</option>
 					<option value="date">{{ $t('Date') }}</option>
 					<option value="month">{{ $t('Month') }}</option>
 					<option value="quarter">{{ $t('Quarterly') }}</option>

package/src/components/ListViewLiveBarSummary.vue

@@ -0,0 +1,52 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{ $t('X-axis') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.bar.rows[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option v-for="column in columns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="summary.bar.rows[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</option>
+					<option value="second">{{ $t('Second') }}</option>
+					<option value="minute">{{ $t('Minute') }}</option>
+					<option value="hour">{{ $t('Hour') }}</option>
+					<option value="date">{{ $t('Date') }}</option>
+					<option value="month">{{ $t('Month') }}</option>
+					<option value="quarter">{{ $t('Quarterly') }}</option>
+					<option value="year">{{ $t('Year') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		columns: Array,
+
+		summary: {
+			type: Object,
+			required: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/ListViewSettings.vue

@@ -210,6 +210,7 @@
                 <Dropdown v-model="openedPresetSummary.mode" class="flex-1">
                   <option value="table">{{ $t('Table') }}</option>
                   <option value="bar">{{ $t('Bar Chart') }}</option>
+                  <option value="liveBar">{{ $t('Live Bar Chart') }}</option>
                   <option value="line">{{ $t('Line Chart') }}</option>
                   <option value="map">{{ $t('Maps') }}</option>
                 </Dropdown>
@@ -225,6 +226,9 @@
             <ListViewBarSummary v-else-if="openedPresetSummary.mode === 'bar'"
 																:summary="openedPresetSummary" :columns="filterableColumns" />
 
+            <ListViewLiveBarSummary v-else-if="openedPresetSummary.mode === 'liveBar'"
+																:summary="openedPresetSummary" :columns="filterableColumns" />
+
             <ListViewLineSummary v-else-if="openedPresetSummary.mode === 'line'"
 																 :summary="openedPresetSummary" :columns="filterableColumns" />
 

package/src/components/Slider.vue

@@ -280,7 +280,7 @@ export default{
 
   .slider>div:nth-child(3),
   .slider>div:nth-child(4){
-    @apply absolute w-[2.1rem] h-[2.1rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
+    @apply absolute w-[2.3rem] h-[2.3rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
     @apply flex;
     top: 50%;
     transform: translate3d(0, -50%, 0);

package/src/index.js

@@ -1,4 +1,4 @@
-import {defineAsyncComponent, ref} from "vue"
+import {defineAsyncComponent, reactive, ref} from "vue"
 import {accessNestedObject, observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 
@@ -273,11 +273,12 @@ export default{
         app.config.globalProperties.$observe = observeInit()
       }
 
-      app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(window.innerWidth))
+      app.config.globalProperties.$screenPrefix = reactive(util.calculateMediaPrefix(window.innerWidth))
       const onWindowResize = throttle(() => {
-        app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(window.innerWidth)
+        app.config.globalProperties.$screenPrefix = util.calculateMediaPrefix(window.innerWidth)
         resizeEvents.forEach((fn) => fn())
-      }, 300, { leading:true })
+        console.log('1')
+      }, 500, { leading:true })
 
       window.addEventListener('resize', onWindowResize)
     }
@@ -337,6 +338,7 @@ export default{
     app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
+    app.component('ChartBar', defineAsyncComponent(() => import("./components/ChartBar.vue")))
     app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
     app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
@@ -367,6 +369,7 @@ export default{
     app.component('ListView', defineAsyncComponent(() => import("./components/ListView.vue")))
     app.component('ListViewSettings', defineAsyncComponent(() => import("./components/ListViewSettings.vue")))
     app.component('ListViewBarSummary', defineAsyncComponent(() => import("./components/ListViewBarSummary.vue")))
+    app.component('ListViewLiveBarSummary', defineAsyncComponent(() => import("./components/ListViewLiveBarSummary.vue")))
     app.component('ListViewTableSummary', defineAsyncComponent(() => import("./components/ListViewTableSummary.vue")))
     app.component('ListViewLineSummary', defineAsyncComponent(() => import("./components/ListViewLineSummary.vue")))
     app.component('ListViewMapSummary', defineAsyncComponent(() => import("./components/ListViewMapSummary.vue")))

package/src/utils/listview.js

@@ -423,6 +423,12 @@ let ListView = {
     const rowKey = row.key
     const rowLabel = this.columns.find((_) => _.key === row.key).label
     switch(row.format){
+      case 'minute':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d %H:%i:00') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d %H:%i:00')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"HH:mm" })
+        break
+
       case 'date':
         attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
         group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)

package/src/widgets/FeatureList.vue

@@ -1,17 +1,16 @@
 <template>
 	<div :class="$style.comp" v-if="Array.isArray(items) && items.length > 0">
-		<pre></pre>
 		<div v-if="id" :id="id" :class="$style.anchor"></div>
 		<h3>{{ title ?? '' }}</h3>
 		<p v-if="description" class="mt-2 text-lg">{{ description }}</p>
 		<div :class="computedContainerClass">
 			<div v-for="item in items" class="flex gap-4" :class="computedItemClass">
 				<div>
-					<Image :src="imageUrl(item.imageUrl)" class="bg-gray-200 rounded-xl w-full aspect-square object-contain" />
+					<Image :src="imageUrl(item.imageUrl)" :class="`object-contain ${item.sizeClass}`" />
 				</div>
-				<div class="flex-1 flex flex-col gap-1">
-					<h5>{{ item.title ?? 'Untitled' }}</h5>
-					<p>{{ item.description ?? '' }}</p>
+				<div class="flex-1 flex flex-col gap-1" v-if="item.title || item.description">
+					<h5 v-if="item.title">{{ item.title }}</h5>
+					<p v-if="item.description">{{ item.description }}</p>
 				</div>
 			</div>
 		</div>
@@ -36,7 +35,7 @@ export default{
 			type: Array,
 			default: [ 2, 4 ]
 		},
-		variant: Array
+		variant: Array,
 
 	},
 
@@ -82,7 +81,7 @@ export default{
 }
 
 .container{
-	@apply grid gap-6 mt-8;
+	@apply grid gap-6 mt-4;
 }
 
 .item{

package/src/widgets/FeatureListItem.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex-1 flex flex-row items-center gap-2">
-		{{ item.props.name ?? 'Feature List' }}
+		{{ item.props.name ?? (item.props.title ?? 'Feature List') }}
 	</div>
 </template>
 

package/src/widgets/FeatureListSetting.vue

@@ -139,6 +139,27 @@
 						<Textarea v-model="context.image.description" rows="3" placeholder="Description" />
 					</div>
 
+					<div class="flex flex-col gap-1">
+						<label class="flex-1 text-text-400">Size</label>
+						<Dropdown v-model="context.image.sizeClass" class="w-[100px]">
+							<option value="">Unset</option>
+							<option value="w-1">1</option>
+							<option value="w-2">2</option>
+							<option value="w-3">3</option>
+							<option value="w-4">4</option>
+							<option value="w-5">5</option>
+							<option value="w-6">6</option>
+							<option value="w-8">8</option>
+							<option value="w-12">12</option>
+							<option value="w-16">16</option>
+							<option value="w-20">20</option>
+							<option value="w-28">28</option>
+							<option value="w-32">32</option>
+							<option value="w-36">36</option>
+							<option value="w-48">48</option>
+						</Dropdown>
+					</div>
+
 				</div>
 			</template>
 		</Modal>