@mixd-id/web-scaffold 0.1.230406248 → 0.1.230406249

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406248",
+  "version": "0.1.230406249",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,7 +26,10 @@
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./listview": "./src/utils/listview.js",
-    "./preset-selector": "./src/utils/preset-selector.js",
+    "./preset-selector": {
+      "require": "./src/utils/preset-selector.js",
+      "import": "./src/utils/preset-selector.mjs"
+    },
     "./web": "./src/utils/web.js"
   },
   "dependencies": {

package/src/components/Button.vue

@@ -155,7 +155,7 @@ export default{
 .button-primary{
 	@apply bg-primary-500 text-white rounded-lg;
 	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-	border: solid 1px rgb(var(--primary-400));
+	border: solid 1px rgb(var(--primary-500));
 }
 .button-primary:focus{
 	border-color: rgb(var(--primary-600));
@@ -207,16 +207,13 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-secondary-200 text-text-500 rounded-lg;
-	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-	border: solid 1px rgb(var(--secondary-200));
+	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
 }
 .button-secondary:hover{
-	@apply bg-secondary-100;
-	border-color: rgb(var(--secondary-100));
+	@apply bg-primary-200 border-primary-200;
 }
 .button-secondary:disabled{
-	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-primary-100 opacity-50 top-0 left-0 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/Chart.vue

@@ -2,17 +2,24 @@
 	<div v-if="readyState === 1" :class="$style.comp">
 
     <div class="p-3 flex flex-col items-start leading-tight">
-      <small class="text-text-400">{{ title ?? 'Untitled' }}</small>
-      <h5 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
+      <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
+      <h4 class="inline align-top cursor-pointer hover:text-primary group"
+          @click="openPreset">
         {{ preset.name ?? 'Preset Name' }}
         <span v-if="badgeCount > 0" class="mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
           {{ badgeCount }}
         </span>
-        <svg width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-      </h5>
+        <svg v-if="![ 'sidebar', 'external' ].includes(presetMode)" width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+      </h4>
     </div>
 
-    <Bar class="w-full"
+    <Bar v-if="preset.chart.type === 'bar'" class="w-full"
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="chartData"
+    />
+
+    <Line v-if="preset.chart.type === 'line'" class="w-full"
         id="my-chart-id"
         :options="chartOptions"
         :data="chartData"
@@ -31,16 +38,17 @@
 
 <script>
 
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
 import PresetSelector from "../widgets/PresetSelector.vue";
 import throttle from "lodash/throttle";
-
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+import dayjs from "dayjs";
 
 export default{
 
-  components: {Bar, PresetSelector},
+  components: {Bar, Line, PresetSelector},
+
+  emits: [ 'open-preset' ],
 
   inject: [ 'alert', 'socket' ],
 
@@ -54,6 +62,7 @@ export default{
     src: undefined,
     title: String,
     subscribeKey: String,
+    presetMode: String,
   },
 
   data(){
@@ -109,7 +118,7 @@ export default{
       }
       else{
         for(let key in items[0] ?? {}){
-          if(key !== 'date'){
+          if(key !== xAxis[0].key){
             datasets.push({
               label: key,
               data: [],
@@ -122,7 +131,7 @@ export default{
 
       const labels = []
       for(let item of this.data.items ?? []){
-        labels.push(item[xAxis[0].key])
+        labels.push(dayjs(item[xAxis[0].key]).format('DD MMM'))
 
         if((yAxis[0] ?? {}).aggregrate === 'count'){
           datasets[0].data.push(item['count'])
@@ -153,7 +162,7 @@ export default{
         animation: false,
         plugins: {
           legend: {
-            display: false, // Disable the legend
+            display: this.preset.chart.showLegend ?? false, // Disable the legend
           },
         },
         scales: {
@@ -165,6 +174,7 @@ export default{
                 return `rgb(${gridColor2})`
               }
             },
+            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
           },
           y: {
             beginAtZero: true, // Adjust y-axis as needed
@@ -174,6 +184,7 @@ export default{
                 return `rgb(${gridColor})`
               }
             },
+            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
           },
         },
       }
@@ -248,6 +259,24 @@ export default{
       }
 
     },
+
+    openPreset(){
+
+      switch(this.presetMode){
+
+        case 'external':
+          this.$emit('open-preset')
+          break
+
+        case 'sidebar':
+          break
+
+        default:
+          this.$refs.presetSelector.open()
+          break
+
+      }
+    },
   },
 
   mounted() {
@@ -288,8 +317,8 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col;
-  @apply bg-base-400;
+  @apply flex flex-col p-2;
+  @apply bg-base-500;
   padding-bottom: 50px;
 }
 

package/src/components/ContextMenu.vue

@@ -301,8 +301,8 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-400 dark:bg-base-300 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-xl;
-	@apply border-[2px] border-text-50 shadow-2xl whitespace-nowrap;
+	@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply border-[2px] border-border-50 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
 }
@@ -315,7 +315,7 @@ export default {
 @media screen(md){
 
 	.contextMenu{
-		@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed z-20 bg-base-400 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
 		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 		opacity: 0;

package/src/components/DGrid.vue

@@ -15,7 +15,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col md:grid grid-cols-12 gap-5 md:items-stretch;
+  @apply flex flex-col md:grid grid-cols-12 gap-3 md:items-stretch;
 }
 
 </style>

package/src/components/DGridItem.vue

@@ -101,7 +101,7 @@ export default{
 
         case 'bottom':
           const distanceY = e.clientY - this.drag.y
-          if(Math.abs(distanceY) > 70){
+          if(Math.abs(distanceY) > 30){
             const match = this.class.match(/row-span-(\d+)/)
             const rowSpan = match ? parseInt(match[1]) : 1
             const nextRowSpan = distanceY > 0 ? rowSpan + 1 <= 12 ? rowSpan + 1 : 12 :

package/src/components/Dropdown.vue

@@ -3,7 +3,7 @@
 	<div :class="computedClass">
 
 		<select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="isDisabled"
-						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :class="containerClass">
 			<slot></slot>
 		</select>
 
@@ -33,6 +33,8 @@ export default {
 
 	props: {
 
+    containerClass: String,
+
 		mode: {
 			type: [ String, Number ],
 			default: 1
@@ -158,7 +160,6 @@ export default {
 <style module>
 
 .dropdown{
-	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
 	@apply border-[1px] border-text-200 bg-base-50;
 }
@@ -174,6 +175,10 @@ export default {
 	@apply appearance-none outline-none p-2 bg-transparent cursor-pointer w-full;
 }
 
+.dropdown option{
+  @apply bg-base-50 text-text;
+}
+
 .dropdown option[disabled]{
 	@apply text-text-300;
 }

package/src/components/ErrorText.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp" v-if="error" @click="$emit('dismissError')">
+	<div :class="$style.comp" v-if="error" @click="$emit('dismiss')">
 		<div v-if="error.response && error.response.data && error.response.data.errors">
 			<div v-if="typeof error.response.data.errors === 'string'">{{ error.response.data.errors }}</div>
 			<div v-else v-for="(text, key) in error.response.data.errors">