@mixd-id/web-scaffold 0.1.230406061 → 0.1.230406062

package/package.json

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

package/src/components/Checkbox.vue

@@ -43,9 +43,12 @@ export default {
         if(Array.isArray(this.modelValue)){
           return this.modelValue.includes(this.value)
 				}
-        else{
+        else if(this.modelValue){
           return this.value === this.modelValue
 				}
+				else{
+					return !!this.value
+				}
 			}
       else if(this.trueValue && this.falseValue) {
         return this.modelValue === this.trueValue

package/src/components/ListView.vue

@@ -75,13 +75,12 @@
 			</Textbox>
 		</div>
 
-		<div class="grid grid-cols-4 gap-4 hidden">
-			<div v-for="i in 4">
-				<div class="p-3 rounded-lg bg-base-400 border-[1px] border-text-50">
-					<label>Value</label>
-					<h2>23,000</h2>
-				</div>
-			</div>
+		<div v-if="presetSummary && summary" class="h-[300px] max-h-[30vh] flex">
+			<Bar v-if="presetSummary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+			<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"
+						 class="flex-1 w-full p-2" :apiKey="mapApiKey" />
 		</div>
 
 		<div class="flex-1 flex" v-if="mediaPrefix">
@@ -168,8 +167,12 @@
 <script>
 
 import throttle from "lodash/throttle";
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+import dayjs from "dayjs";
 
 export default{
+	components: {Line, Bar},
 
 	emits: [ ],
 
@@ -281,15 +284,13 @@ export default{
       if(!this.src) return
 
 			this.$refs.table1 ? this.$refs.table1.setState(2) : this.$refs.table2.setState(3)
-			this.socketEmit2(this.src, { preset: this.preset })
+			this.socketEmit2(this.src, { columns:this.config.columns, preset:this.preset })
 				.then((res) => {
 					Object.assign(this.$data, res)
 				})
 				.finally(() => {
 					this.$refs.table1 ? this.$refs.table1.setState(1) : this.$refs.table2.setState(1)
 				})
-
-			this.loadSummary()
 		},
 
 		loadNext(){
@@ -314,6 +315,10 @@ export default{
 
 			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
 				this.configLoaded = true
+
+				if('reset' in ((this.$route ?? {}).query ?? {}))
+					await this.saveConfig()
+
 				return
 			}
 
@@ -339,8 +344,9 @@ export default{
 				preset: this.preset
 			})
 				.then((res) => {
-					const data = res && res.data ? res.data : res
-					this.summary = data
+					console.log('res', res)
+					/*const data = res && res.data ? res.data : res
+					this.summary = data*/
 				})
 				.catch((err) => {
 					this.toast(err)
@@ -348,20 +354,46 @@ export default{
 		},
 
     onHooks(model, event, items){
+
 			if(model === this.subscriptionObj.model){
         switch(event){
 
           case 'create':
           case 'update':
-            items.forEach((item) => {
-              this.$util.unshift(this.items, item)
-            })
+						if(Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
+							this.socketEmit2(this.src, {
+								columns:this.config.columns,
+								preset:{
+									...this.preset,
+									filters: [{
+											enabled: true,
+											key: "uid",
+											filters: [
+												{
+													operator: "in",
+													value: items.map((_) => _.uid)
+												}
+											]
+										}
+									]
+								}
+							})
+								.then(({ items }) => {
+									this.$util.unshift(this.items, ...items)
+								})
+						}
+						else{
+							this.$util.unshift(this.items, ...items)
+						}
             break
 
           case 'remove':
           case 'destroy':
             items.forEach((item) => {
-              const idx = this.items.findIndex((_) => _.id === item.id)
+              const idx = this.items.findIndex((_) => {
+								return item.uid ? _.uid === item.uid :
+									(item.id ? _.id === item.id : false)
+							})
               if(idx >= 0){
                 this.items.splice(idx, 1)
               }
@@ -439,7 +471,54 @@ export default{
           this.socketEmit2(method, { name:model }).then()
 					break
 			}
-		}
+		},
+
+		summaryColumns(){
+
+			const columns = [ ...this.summary.columns ]
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
+				columns.push({ key:"_total", label:"Total", visible:true, type:"number" })
+			}
+
+			return columns
+		},
+
+		summaryItems(){
+
+			const items = [ ...this.summary.items ]
+
+			//console.log('#1', this.presetSummary.showColumnTotal, this.presetSummary.showRowTotal, items.length)
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
+				items.forEach((item) => {
+					let total = 0
+					for(let key in item){
+						if([ 'dfDate', '_total' ].includes(key)) continue
+						total += parseInt(item[key])
+					}
+					item._total = total
+				})
+			}
+
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showRowTotal){
+				const totalItem = { dfDate:"Total" }
+				this.summary.items.forEach((item) => {
+
+					for(let key in item){
+						if([ 'dfDate' ].includes(key)) continue
+
+						if(!(key in totalItem))
+							totalItem[key] = 0
+						totalItem[key] += parseInt(item[key])
+					}
+				})
+				items.push(totalItem)
+			}
+
+			return items
+		},
 
 	},
 
@@ -447,6 +526,128 @@ export default{
 
 	computed: {
 
+
+		chartOptions(){
+
+			var style = getComputedStyle(document.body)
+			var gridColor = style.getPropertyValue('--text-50')
+			var gridColor2 = style.getPropertyValue('--text-200')
+
+			const baseColumn = this.summary.columns[0] ?? {}
+			const baseColumnType = baseColumn.type
+
+			let highGrids = []
+			if(baseColumnType === 'date'){
+				this.summary.items.forEach((item) => {
+					if(dayjs(item.dfDate).day() === 1){
+						highGrids.push(dayjs(item.dfDate).format('D MMM'))
+					}
+				})
+			}
+
+			return {
+				responsive: true,
+				maintainAspectRatio: false,
+				plugins: {
+					legend: !this.presetSummary.hideLegends,
+					tooltip: {
+						callbacks: {
+							label: function(context) {
+
+								const labels = []
+
+								labels.push(context.dataset.label + ': ' + context.parsed.y)
+
+								if(context.parsed._stacks){
+									let total = 0
+									let percent = 0
+									for(let key in context.parsed._stacks.y){
+										if(!isNaN(parseInt(key))){
+											total += parseInt(context.parsed._stacks.y[key])
+										}
+									}
+									percent = Math.round(parseInt(context.parsed.y) / total * 100)
+									labels.push(`Total: ${total} (${percent}%)`)
+								}
+
+								return labels;
+							}
+						}
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: function(context){
+								if(baseColumnType === 'date' && context.tick && highGrids.includes(context.tick.label)){
+									return `rgb(${gridColor2})`
+								}
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					},
+					y: {
+						grid: {
+							color: function(context){
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					}
+				}
+			}
+		},
+
+		chartData(){
+
+			const column = this.summary.columns.filter((_) => _.key === 'dfDate').pop() ?? {}
+
+			const labels = []
+			this.summary.items.forEach((item) => {
+
+				let label = item.dfDate
+				switch(column.type){
+
+					case 'date':
+						const dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
+						const djs = dayjs(item.dfDate)
+						label = djs.isValid() ? djs.format(dateFormat) : item.dfDate
+						break
+				}
+				labels.push(label)
+			})
+
+			const datasets = []
+			this.summary.columns.forEach((column) => {
+				if(column.key === 'dfDate') return
+
+				const data = []
+				this.summary.items.forEach((item) => {
+					data.push(parseInt(item[column.key]))
+				})
+
+				const dataset = {
+					label: column.label,
+					data,
+					backgroundColor: this.chartOpt.backgroundColors[datasets.length % 9],
+					borderColor: this.chartOpt.borderColors[datasets.length % 9]
+				}
+
+				datasets.push(dataset)
+			})
+
+			return {
+				labels,
+				datasets
+			}
+
+			/*return {
+				labels: [ 'January', 'February', 'March' ],
+				datasets: [ { data: [40, 20, 12] } ]
+			}*/
+		},
+
     subscriptionObj(){
       const splitted = ((this.subscription ?? '').toString()).split(':')
 			const splitted2 = (splitted[1] ?? '').split(',')
@@ -539,6 +740,10 @@ export default{
 			return c
 		},
 
+		presetSummary(){
+			return ((this.preset ?? {}).summaries ?? []).filter((_) => _.enabled).pop()
+		},
+
 	},
 
 	data(){
@@ -549,7 +754,35 @@ export default{
       configLoaded: false,
       selectedColumn: null,
 			copiedConfig: null,
-			mediaPrefix: null
+			mediaPrefix: null,
+			summary: null,
+			mapApiKey: null,
+			chartOpt: {
+				backgroundColors: [
+					'#5D9CEC',
+					'#A0D468',
+					'#FFCE54',
+					'#FC6E51',
+					'#48CFAD',
+					'#AC92EC',
+					'#4FC1E9',
+					'#FFCE54',
+					'#ED5565',
+					'#EC87C0'
+				],
+				borderColors: [
+					'#4A89DC',
+					'#8CC152',
+					'#F6BB42',
+					'#E9573F',
+					'#37BC9B',
+					'#967ADC',
+					'#3BAFDA',
+					'#F6BB42',
+					'#DA4453',
+					'#D770AD'
+				],
+			},
 		}
 	},
 

package/src/components/ListViewBarSummary.vue

@@ -0,0 +1,80 @@
+<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="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 class="p-3">
+			<label class="text-text-400 flex-1">{{ $t('Column') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.bar.columns[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option value="(none)">{{ $t('None') }}</option>
+					<option v-for="column in columns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="summary.bar.columns[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</option>
+					<option value="date">{{ $t('Date') }}</option>
+				</Dropdown>
+			</div>
+			<Checkbox class="mt-2" v-model="summary.bar.stacked">
+				Stacked
+			</Checkbox>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">Values</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.bar.values[0].aggregrate" class="flex-1">
+					<option value="" disabled selected>{{ $t('Select') }}</option>
+					<option value="count">{{ $t('Count') }}</option>
+					<option value="max">{{ $t('Max') }}</option>
+					<option value="min">{{ $t('Min') }}</option>
+					<option value="avg">{{ $t('Avg') }}</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/ListViewLineSummary.vue

@@ -0,0 +1,75 @@
+<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="openedPresetSummary.line.rows[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="openedPresetSummary.line.rows[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</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 class="p-3">
+			<label class="text-text-400 flex-1">{{$t('Column') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="openedPresetSummary.line.columns[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option value="(none)">{{ $t('None') }}</option>
+					<option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="openedPresetSummary.line.columns[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</option>
+					<option value="date">{{ $t('Date') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">Values</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="openedPresetSummary.line.values[0].aggregrate" class="flex-1">
+					<option value="" disabled selected>{{ $t('Select') }}</option>
+					<option value="count">{{ $t('Count') }}</option>
+					<option value="max">{{ $t('Max') }}</option>
+					<option value="min">{{ $t('Min') }}</option>
+					<option value="avg">{{ $t('Avg') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		summary: {
+			type: Object,
+			required: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/ListViewMapSummary.vue

@@ -0,0 +1,56 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="p-3 flex flex-row gap-3">
+			<div class="flex-1">
+				<label class="text-text-400 flex-1">Map Type</label>
+				<Dropdown class="mt-2" v-model="openedPresetSummary.map.mapType">
+					<option value="" disabled selected>(Default)</option>
+					<option value="heatmap">Heatmap</option>
+				</Dropdown>
+			</div>
+			<div>
+				<label class="text-text-400 flex-1">Radius</label>
+				<div class="flex flex-row mt-2 gap-2">
+					<Textbox v-model="openedPresetSummary.map.mapRadius" class="w-[60px]" />
+				</div>
+			</div>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{$t('Property') }}</label>
+			<div>
+				<Dropdown v-model="openedPresetSummary.map.key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Select Column') }}</option>
+					<option v-for="column in coordinateColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		summary: {
+			type: Object,
+			required: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/ListViewSettings.vue

@@ -67,13 +67,13 @@
 				</div>
 
         <div class="flex justify-center">
-          <Tabs v-model="config.presetTab" :items="tabItems" @change="tabChanged"/>
+          <Tabs v-model="presetTab" :items="tabItems" @change="tabChanged"/>
         </div>
       </div>
 
       <div class="flex-1 overflow-y-auto px-6 mb-6">
 
-        <div class="p-2 mt-6 flex flex-col" v-if="!config.presetTab || config.presetTab === 'column'">
+        <div class="p-2 mt-6 flex flex-col" v-if="!presetTab || presetTab === 'column'">
           <ListItem :items="presetColumns" @reorder="reorderColumns">
             <template v-slot="{ item }">
               <div class="flex flex-row items-center gap-2" :key="item">
@@ -91,7 +91,7 @@
           </ListItem>
         </div>
 
-        <div class="flex flex-col" v-else-if="config.presetTab === 'filter'">
+        <div class="flex flex-col" v-else-if="presetTab === 'filter'">
           <div v-if="filterableColumns.length > 0">
             <ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
                              :filter="filter" :column="config.columns[config.columns.findIndex((_) => _.key === filter.key)]"
@@ -110,7 +110,7 @@
           </div>
         </div>
 
-        <div class="flex flex-col" v-else-if="config.presetTab === 'sort'">
+        <div class="flex flex-col" v-else-if="presetTab === 'sort'">
           <div v-if="sortableColumns.length > 0" class="my-8">
             <div v-for="sort in preset.sorts" class="py-4">
               <div class="flex flex-row items-center gap-2">
@@ -148,26 +148,30 @@
           </div>
         </div>
 
-        <div class="flex flex-col gap-3 py-8" v-else-if="config.presetTab === 'summarys'">
+        <div class="flex flex-col gap-3 py-8" v-else-if="presetTab === 'summary'">
 
           <div v-if="config.summaryOpenIdx === -1">
-            <div v-for="(summary, idx) in preset.summaries">
-              <div class="flex flex-row items-center gap-3 border-text-50 border-[1px] p-2 rounded-lg">
-                <div class="px-2">
-                  <Checkbox v-model="summary.enabled" @change="enableSummary(idx)" />
-                </div>
-                <div class="flex-1" @click="config.summaryOpenIdx = idx">
-                  <label>{{ summary.title }}</label>
-                </div>
-                <button type="button" class="px-2" v-if="preset.summaries.length > 1" @click="removeSummary(summary)">
-                  <svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V16C14.75 16.4142 14.4142 16.75 14 16.75C13.5858 16.75 13.25 16.4142 13.25 16V11C13.25 10.5858 13.5858 10.25 14 10.25Z"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.25C8.48122 2.25 7.25 3.48122 7.25 5V5.25H3C2.58579 5.25 2.25 5.58579 2.25 6C2.25 6.41421 2.58579 6.75 3 6.75H4.25V19C4.25 20.5188 5.48122 21.75 7 21.75H17C18.5188 21.75 19.75 20.5188 19.75 19V6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H16.75V5C16.75 3.48122 15.5188 2.25 14 2.25H10ZM15.25 5.25V5C15.25 4.30964 14.6904 3.75 14 3.75H10C9.30964 3.75 8.75 4.30964 8.75 5V5.25H15.25ZM5.75 6.75V19C5.75 19.6904 6.30964 20.25 7 20.25H17C17.6904 20.25 18.25 19.6904 18.25 19V6.75H5.75Z"/>
-                  </svg>
-                </button>
-              </div>
-            </div>
+
+						<div class="border-text-50 border-[1px] rounded-lg overflow-hidden divide-y divide-text-50">
+							<div v-for="(summary, idx) in preset.summaries">
+								<div class="flex flex-row items-center gap-3 px-2">
+									<div class="p-2">
+										<Checkbox :value="summary.enabled" @change="selectSummary(idx)" />
+									</div>
+									<div class="flex-1" @click="config.summaryOpenIdx = idx">
+										<label>{{ summary.title }}</label>
+									</div>
+									<button type="button" class="px-2" v-if="preset.summaries.length > 1" @click="removeSummary(summary)">
+										<svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V16C14.75 16.4142 14.4142 16.75 14 16.75C13.5858 16.75 13.25 16.4142 13.25 16V11C13.25 10.5858 13.5858 10.25 14 10.25Z"/>
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.25C8.48122 2.25 7.25 3.48122 7.25 5V5.25H3C2.58579 5.25 2.25 5.58579 2.25 6C2.25 6.41421 2.58579 6.75 3 6.75H4.25V19C4.25 20.5188 5.48122 21.75 7 21.75H17C18.5188 21.75 19.75 20.5188 19.75 19V6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H16.75V5C16.75 3.48122 15.5188 2.25 14 2.25H10ZM15.25 5.25V5C15.25 4.30964 14.6904 3.75 14 3.75H10C9.30964 3.75 8.75 4.30964 8.75 5V5.25H15.25ZM5.75 6.75V19C5.75 19.6904 6.30964 20.25 7 20.25H17C17.6904 20.25 18.25 19.6904 18.25 19V6.75H5.75Z"/>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+
             <div class="p-2 text-center">
               <button type="button" @click="addSummary">
                 <svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg">
@@ -215,187 +219,21 @@
               </div>
             </div>
 
-            <div v-if="openedPresetSummary.mode === 'table'">
-
-              <div class="p-3">
-                <label class="text-text-400 flex-1">{{ $t('Row') }}</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.table.rows[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                  <Dropdown v-model="openedPresetSummary.table.rows[0].format" class="w-[100px]">
-                    <option value="">{{ $t('Default') }}</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>
-                <Checkbox class="mt-2" v-model="openedPresetSummary.table.showRowTotal">
-                  Row Total
-                </Checkbox>
-              </div>
-
-              <div class="p-3">
-                <label class="text-text-400 flex-1">{{$t('Column') }}</label>
-                <div>
-                  <Dropdown v-model="openedPresetSummary.table.columns[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option value="(none)">{{ $t('(None)') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                </div>
-                <Checkbox class="mt-2" v-model="openedPresetSummary.table.showColumnTotal">
-                  Column Total
-                </Checkbox>
-              </div>
-
-              <div class="p-3">
-                <label class="text-text-400 flex-1">Values</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.table.values[0].aggregrate" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Select') }}</option>
-                    <option value="count">{{ $t('Count') }}</option>
-                    <option value="max">{{ $t('Max') }}</option>
-                    <option value="min">{{ $t('Min') }}</option>
-                    <option value="avg">{{ $t('Avg') }}</option>
-                  </Dropdown>
-                </div>
-              </div>
-
-            </div>
-
-            <div v-else-if="openedPresetSummary.mode === 'bar'">
-
-              <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="openedPresetSummary.bar.rows[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                  <Dropdown v-model="openedPresetSummary.bar.rows[0].format" class="w-[100px]">
-                    <option value="">{{ $t('Default') }}</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 class="p-3">
-                <label class="text-text-400 flex-1">{{ $t('Column') }}</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.bar.columns[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option value="(none)">{{ $t('None') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                  <Dropdown v-model="openedPresetSummary.bar.columns[0].format" class="w-[100px]">
-                    <option value="">{{ $t('Default') }}</option>
-                    <option value="date">{{ $t('Date') }}</option>
-                  </Dropdown>
-                </div>
-                <Checkbox class="mt-2" v-model="openedPresetSummary.bar.stacked">
-                  Stacked
-                </Checkbox>
-              </div>
-
-              <div class="p-3">
-                <label class="text-text-400 flex-1">Values</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.bar.values[0].aggregrate" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Select') }}</option>
-                    <option value="count">{{ $t('Count') }}</option>
-                    <option value="max">{{ $t('Max') }}</option>
-                    <option value="min">{{ $t('Min') }}</option>
-                    <option value="avg">{{ $t('Avg') }}</option>
-                  </Dropdown>
-                </div>
-              </div>
-
-            </div>
-
-            <div v-else-if="openedPresetSummary.mode === 'line'">
+            <ListViewTableSummary v-if="openedPresetSummary.mode === 'table'"
+																	:summary="openedPresetSummary" />
 
-              <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="openedPresetSummary.line.rows[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                  <Dropdown v-model="openedPresetSummary.line.rows[0].format" class="w-[100px]">
-                    <option value="">{{ $t('Default') }}</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>
+            <ListViewBarSummary v-else-if="openedPresetSummary.mode === 'bar'"
+																:summary="openedPresetSummary" :columns="filterableColumns" />
 
-              <div class="p-3">
-                <label class="text-text-400 flex-1">{{$t('Column') }}</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.line.columns[0].key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Add Column') }}</option>
-                    <option value="(none)">{{ $t('None') }}</option>
-                    <option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                  <Dropdown v-model="openedPresetSummary.line.columns[0].format" class="w-[100px]">
-                    <option value="">{{ $t('Default') }}</option>
-                    <option value="date">{{ $t('Date') }}</option>
-                  </Dropdown>
-                </div>
-              </div>
-
-              <div class="p-3">
-                <label class="text-text-400 flex-1">Values</label>
-                <div class="flex flex-row mt-2 gap-2">
-                  <Dropdown v-model="openedPresetSummary.line.values[0].aggregrate" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Select') }}</option>
-                    <option value="count">{{ $t('Count') }}</option>
-                    <option value="max">{{ $t('Max') }}</option>
-                    <option value="min">{{ $t('Min') }}</option>
-                    <option value="avg">{{ $t('Avg') }}</option>
-                  </Dropdown>
-                </div>
-              </div>
-
-            </div>
-
-            <div v-else-if="openedPresetSummary.mode === 'map'">
-
-              <div class="p-3 flex flex-row gap-3">
-                <div class="flex-1">
-                  <label class="text-text-400 flex-1">Map Type</label>
-                  <Dropdown class="mt-2" v-model="openedPresetSummary.map.mapType">
-                    <option value="" disabled selected>(Default)</option>
-                    <option value="heatmap">Heatmap</option>
-                  </Dropdown>
-                </div>
-                <div>
-                  <label class="text-text-400 flex-1">Radius</label>
-                  <div class="flex flex-row mt-2 gap-2">
-                    <Textbox v-model="openedPresetSummary.map.mapRadius" class="w-[60px]" />
-                  </div>
-                </div>
-              </div>
+            <ListViewLineSummary v-else-if="openedPresetSummary.mode === 'line'"
+																 :summary="openedPresetSummary" :columns="filterableColumns" />
 
-              <div class="p-3">
-                <label class="text-text-400 flex-1">{{$t('Property') }}</label>
-                <div>
-                  <Dropdown v-model="openedPresetSummary.map.key" class="flex-1">
-                    <option value="" disabled selected>{{ $t('Select Column') }}</option>
-                    <option v-for="column in coordinateColumns" :value="column.key">{{ column.label ?? column.key }}</option>
-                  </Dropdown>
-                </div>
-              </div>
+            <ListViewMapSummary v-else-if="openedPresetSummary.mode === 'map'"
+																:summary="openedPresetSummary" :columns="filterableColumns" />
 
-            </div>
+						<div class="p-3 mt-8">
+							<Button class="w-[80px]" variant="secondary" @click="config.summaryOpenIdx = -1">OK</Button>
+						</div>
 
           </div>
 
@@ -523,6 +361,12 @@ export default{
 			this.configs.summaryOpenIdx = this.preset.summaries.length - 1
 		},
 
+		selectSummary(idx){
+			for(let i in this.preset.summaries){
+				this.preset.summaries[i].enabled = parseInt(i) === idx
+			}
+		}
+
 	},
 
 
@@ -621,24 +465,12 @@ export default{
       presetSortSelector: null,
       mediaPrefix: null,
       detailMode: false,
+			presetTab: 'column'
     }
   },
 
   mounted() {
     this.mediaPrefix = this.$el.clientWidth <= 480 ? 'sm' : 'md'
-  },
-
-  watch: {
-
-		config: {
-			immediate: true,
-			handler(to){
-				if(!this.config.presetTab){
-					this.config.presetTab = 'column'
-				}
-			}
-		}
-
   }
 
 }

package/src/components/ListViewTableSummary.vue

@@ -0,0 +1,77 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{ $t('Row') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.table.rows[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="summary.table.rows[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</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>
+			<Checkbox class="mt-2" v-model="summary.table.showRowTotal">
+				Row Total
+			</Checkbox>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{$t('Column') }}</label>
+			<div>
+				<Dropdown v-model="summary.table.columns[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option value="(none)">{{ $t('(None)') }}</option>
+					<option v-for="column in filterableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+			</div>
+			<Checkbox class="mt-2" v-model="summary.table.showColumnTotal">
+				Column Total
+			</Checkbox>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">Values</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.table.values[0].aggregrate" class="flex-1">
+					<option value="" disabled selected>{{ $t('Select') }}</option>
+					<option value="count">{{ $t('Count') }}</option>
+					<option value="max">{{ $t('Max') }}</option>
+					<option value="min">{{ $t('Min') }}</option>
+					<option value="avg">{{ $t('Avg') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		summary: {
+			type: Object,
+			required: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/VirtualScroll.vue

@@ -212,7 +212,7 @@ export default{
 <style module>
 
   .comp{
-		@apply relative overflow-auto max-h-[100vh];
+		@apply relative overflow-y-auto overflow-x-hidden max-h-[100vh];
   }
 
   .scroller{

package/src/index.js

@@ -254,6 +254,10 @@ export default{
     app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
     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('ListViewTableSummary', defineAsyncComponent(() => import("./components/ListViewTableSummary.vue")))
+    app.component('ListViewLineSummary', defineAsyncComponent(() => import("./components/ListViewLineSummary.vue")))
+    app.component('ListViewMapSummary', defineAsyncComponent(() => import("./components/ListViewMapSummary.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))

package/src/utils/listview.js

@@ -90,36 +90,45 @@ let ListView = {
 
   async load(params){
 
-    const { items, hasNext, count } = await this._load(params)
+    this.columns = params.columns
+
+    const { items, hasNext, count, derivedSql, where, replacements } = await this._load(params)
+
+    const summary = await this.loadSummary(params, {
+      derivedSql,
+      where,
+      replacements
+    })
 
     if(this.name){
       if(!this.socket.loadParams){
         this.socket.loadParams = {}
       }
-
       this.socket.loadParams[this.name] = params
     }
 
+    const extra = typeof this.postLoad === 'function' ? await this.postLoad() : undefined
+
     return {
       items,
       hasNext,
-      count
+      count,
+      summary,
+      ...(extra ?? {})
     }
   },
 
-  async loadSummary(params){
+  async loadSummary(params, loadResults){
 
     if(!this.conn){
       console.error('Unable to load summary, connection not found')
       return
     }
 
-    const { preset = {} } = params
-    const summary = preset.summaries.filter((_) => _.enabled).pop()
-
+    const summary = params.preset.summaries.filter((_) => _.enabled).pop()
     if(!summary) return
 
-    const { derivedSql, where, replacements } = await this._load(params)
+    const { derivedSql, where, replacements } = loadResults
 
     switch(summary.mode){
 
@@ -134,153 +143,14 @@ let ListView = {
 
       case 'map':
         if(this.loadMapSummary){
-          return await this.loadMapSummary(preset, {
+          return await this.loadMapSummary(params.preset, {
             derivedSql,
             where,
             replacements
           })
         }
         break
-
-    }
-
-    return
-
-
-
-    /*const attributes = []
-    const group = []
-    const summaryColumns = [
-      /!*{ key:"dfDate", label:"Date", width:"200px", visible:true },
-      { key:"type-1", label:"Type 1", type:"number", visible:true },
-      { key:"type-2", label:"Type 2", type:"number", visible:true },
-      { key:"type-3", label:"Type 3", type:"number", visible:true },
-      { key:"type-4", label:"Type 4", type:"number", visible:true },
-      { key:"type-8", label:"Type 8", type:"number", visible:true },*!/
-    ]
-
-    const row = rows[0]
-    const rowKey = row.key
-    const rowLabel = this.columns[row.key].label
-    switch(row.format){
-      case 'date':
-        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
-        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)
-        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
-        break
-
-      case 'month':
-        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m') as dfDate`)
-        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m')`)
-        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
-        break
-
-      case 'quarter':
-        attributes.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey})) as dfDate`)
-        group.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey}))`)
-        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
-        break
-
-      case 'year':
-        attributes.push(`DATE_FORMAT(${rowKey}, '%Y') as dfDate`)
-        group.push(`DATE_FORMAT(${rowKey}, '%Y')`)
-        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
-        break
-
-      default:
-        attributes.push(`${rowKey} as dfDate`)
-        group.push(`${rowKey}`)
-        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
-        break
-    }
-
-    const value = values[0]
-    if(columnValues.length > 0){
-      columnValues.forEach((obj) => {
-        const columnValue = obj.cols
-
-        let columnLabel = (columnValue ?? '').toString()
-        const baseColumn = this.columns[colKey]
-        switch(baseColumn.type){
-
-          case 'enum':
-            const enumValue = baseColumn.typeParams.filter((_) => _.value === columnValue).pop()
-            if(enumValue) columnLabel = enumValue.text
-            break
-        }
-
-        switch(value.aggregrate){
-          case 'count':
-            const fn = columnValue === null ? `${colKey} is null` : `${colKey} = '${columnValue}'`
-            attributes.push(`SUM(IF(${fn}, 1, 0)) as \`${colKey}-${columnValue}\``)
-            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
-            break
-
-          case 'min':
-            attributes.push(`MIN(${colKey}) as \`${colKey}-${columnValue}\``)
-            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
-            break
-
-          case 'max':
-            attributes.push(`MAX(${colKey}) as \`${colKey}-${columnValue}\``)
-            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
-            break
-
-          case 'avg':
-            attributes.push(`AVG(${colKey}) as \`${colKey}-${columnValue}\``)
-            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
-            break
-        }
-      })
-    }
-    else{
-      switch(value.aggregrate) {
-        case 'count':
-        default:
-          attributes.push(`COUNT(*) as \`Count\``)
-          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
-      }
     }
-
-    //console.log(attributes)
-
-    let [ summaryItems ] = await this.conn.query(`
-      SELECT
-       ${attributes.join(', ')}
-      FROM (
-        ${derivedSql}
-      ) as t1
-      GROUP BY ${group[0]}
-      ORDER BY dfDate ASC
-    `)
-
-    if(this.columns[rowKey] && this.columns[rowKey].type === 'enum'){
-      summaryItems = summaryItems.map((_) => {
-
-        const typeParam = this.columns[rowKey].typeParams.filter((__) => __.value === _.dfDate).pop()
-        if(typeParam){
-          _.dfDate = typeParam.text
-        }
-
-        return _
-      })
-    }
-
-    const summary = {
-      type: "table",
-      columns: summaryColumns,
-      items: summaryItems
-      /!*items: [
-        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
-        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
-        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
-        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
-        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
-        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
-      ]*!/
-    }
-
-    return summary*/
   },
 
   async subscribe(params, socket){
@@ -587,7 +457,7 @@ let ListView = {
 
   async loadBarSummary(summary, derivedSql){
 
-    if(!summary.bar) return
+    if(!summary.bar && !this.columns) return
 
     const { columns, rows, values } = summary.bar
 
@@ -626,7 +496,7 @@ let ListView = {
 
     const row = rows[0]
     const rowKey = row.key
-    const rowLabel = this.columns[row.key].label
+    const rowLabel = this.columns.find((_) => _.key === row.key).label
     switch(row.format){
       case 'date':
         attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
@@ -665,7 +535,7 @@ let ListView = {
         const columnValue = obj.cols
 
         let columnLabel = (columnValue ?? '').toString()
-        const baseColumn = this.columns[colKey]
+        const baseColumn = this.columns.find((_) => _.key === colKey)
         switch(baseColumn.type){
 
           case 'enum':
@@ -787,7 +657,7 @@ let ListView = {
 
     const row = rows[0]
     const rowKey = row.key
-    const rowLabel = this.columns[row.key].label
+    const rowLabel = this.columns.find((_) => _.key === row.key).label
     switch(row.format){
       case 'date':
         attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
@@ -826,7 +696,7 @@ let ListView = {
         const columnValue = obj.cols
 
         let columnLabel = (columnValue ?? '').toString()
-        const baseColumn = this.columns[colKey]
+        const baseColumn = this.columns.find((_) => _.key === colKey)
         switch(baseColumn.type){
 
           case 'enum':
@@ -948,7 +818,7 @@ let ListView = {
 
     const row = rows[0]
     const rowKey = row.key
-    const rowLabel = this.columns[row.key].label
+    const rowLabel = this.columns.find((_) => _.key === row.key).label
     switch(row.format){
       case 'date':
         attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
@@ -987,7 +857,7 @@ let ListView = {
         const columnValue = obj.cols
 
         let columnLabel = (columnValue ?? '').toString()
-        const baseColumn = this.columns[colKey]
+        const baseColumn = this.columns.find((_) => _.key === colKey)
         switch(baseColumn.type){
 
           case 'enum':