@mixd-id/web-scaffold 0.1.240411058 → 0.1.240411059

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411058",
+  "version": "0.1.240411059",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -69,7 +69,7 @@
     "pinia": "^2.0.2",
     "prismjs": "1.30.0",
     "redis": "^4.6.13",
-    "sequelize": "^6.37.6",
+    "sequelize": "^6.37.7",
     "tailwindcss": "^3.2.4",
     "tinycolor2": "^1.6.0",
     "vue": "^3.2.25",

package/src/components/Carousel.vue

@@ -315,7 +315,7 @@ export default{
 .comp{
 	overflow: hidden;
 	position: relative;
-  @apply flex flex-col bg-red-100;
+  @apply flex flex-col;
 }
 
 .comp img{

package/src/components/Dashboard2.vue

@@ -0,0 +1,118 @@
+<template>
+	<div :class="$style.comp">
+
+    <div class="w-[480px] border-r-[1px] border-text-50">
+      <MetricSetting :value="preset.views[0]"/>
+
+      <pre class="text-xs break-all">
+        {{ preset.views[0] }}
+      </pre>
+    </div>
+
+    <div class="flex-1 p-8">
+
+      <component v-for="view in preset.views"
+                 :is="view.type"
+                 :="view.props" />
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+
+export default{
+
+  components: {
+    MetricSetting: defineAsyncComponent(() => import('../widgets/Dashboard/MetricSetting.vue')),
+
+  },
+
+  props: {
+
+    controller: String,
+
+
+  },
+
+  computed: {
+
+    preset(){
+      return this.config.presets[this.config.presetIdx]
+    },
+
+
+  },
+
+  data(){
+    return {
+
+      config: {
+        presets: [
+          {
+            name: "Sample 1",
+            datasource: [
+              {
+                uid: "1",
+                name: "AffiliateShareReport",
+                filters: [],
+                sorts: []
+              }
+            ],
+            views: [
+              {
+                type: "Metric",
+                props: {
+                  datasourceUid: "1",
+                  columns: [
+                    {
+                      key: "id",
+                      modifier: "count"
+                    },
+                    {
+                      key: "id",
+                      modifier: "sum"
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        ],
+        presetIdx: 0
+      },
+
+      metric1: {
+        props: {}
+      }
+    }
+  },
+
+  methods: {
+
+    getController(){
+      return this.controller
+    }
+
+  },
+
+  provide(){
+    return {
+      getController: this.getController
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+</style>

package/src/components/Grid.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="$style.comp" :style="computedStyle">
-
-    <component v-for="item in items"
-							 :is="item.type"
-               :key="item.key"
-							 :="item" />
-
+    <slot>
+      <component v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+    </slot>
   </div>
 </template>
 

package/src/index.js

@@ -603,6 +603,7 @@ export default{
     app.component('FiltersSetting', defineAsyncComponent(() => import("./widgets/FiltersSetting.vue")))
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
     app.component('Dashboard', defineAsyncComponent(() => import("./widgets/Dashboard.vue")))
+    app.component('Dashboard2', defineAsyncComponent(() => import("./components/Dashboard2.vue")))
     app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
     app.component('MenuItem1', defineAsyncComponent(() => import("./components/MenuItem1.vue")))
     app.component('MenuItem1Setting', defineAsyncComponent(() => import("./widgets/MenuItem1Setting.vue")))

package/src/utils/list.mjs

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import {DataTypes, fn, literal, Op} from 'sequelize'
+import {DataTypes, fn, Op, literal} from 'sequelize'
 import {groupBy} from './helpers.mjs'
 
 const ftWildcard = (key) => {

package/src/widgets/Dashboard/Metric.vue

@@ -1,24 +1,23 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" v-if="metric">
     <label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap">{{ label }}</label>
     <div class="flex flex-row items-end gap-2">
-      <h1 v-if="readyState === 1" class="text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
-        {{ cValue }}
+      <h1 v-if="readyState === 1" class="text-5xl text-ellipsis overflow-hidden whitespace-nowrap" :class="column2Enabled ? '' : 'text-green-600'">
+        {{ metric.value }}
       </h1>
       <h1 v-else class="text-ellipsis overflow-hidden whitespace-nowrap text-text-300">
         Loading...
       </h1>
 
-      <div class="flex flex-col" v-if="column2Enabled && readyState === 1">
-        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
+      <div class="flex flex-col">
+        <div class=" text-ellipsis whitespace-nowrap overflow-hidden"
           :class="showPercentage ? '' : 'text-green-600'">
-          {{ ccValue }}
+          {{ metric.comparedValue }}
         </div>
 
-        <div v-if="showPercentage"
-             class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
-             :class="value?.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">
-          {{ value?.comparedPercent }}
+        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden"
+             :class="metric.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">
+          {{ metric.comparedPercent }}%
         </div>
       </div>
     </div>
@@ -59,15 +58,17 @@ export default{
 
   data(){
     return {
-      value: null,
+      metric: null,
       readyState: 1,
     }
   },
 
-  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'socket' ],
+  inject: [ 'getController', 'getViewedPreset', 'getQueryFilters', 'socket' ],
 
   props: {
 
+    label: String,
+
     column: String,
     columnModifier: String,
 
@@ -79,8 +80,6 @@ export default{
 
     showPercentage: [ Number, Boolean ],
 
-    label: String,
-
     uid: String
 
   },
@@ -107,44 +106,20 @@ export default{
     },
 
     load(){
-      const preset = this.getViewedPreset()
-      const {name, datasource} = preset
 
       this.readyState = 2
-      this.socket.send(this.getSrc(), {
-        name,
-        views: [{
-          ...this.$props,
-          type: 'Metric'
-        }],
-        datasource: datasource.map(_datasource => {
-          return {
-            ..._datasource,
-            filters: [
-              ...(_datasource.filters ?? []),
-              ...(this.getQueryFilters()[_datasource.uid] ?? [])
-            ]
-          }
-        })
-      })
-        .then(_ => {
-          this.value = _[this.uid]
-        })
-        .finally(_ => this.readyState = 1)
+      this.socket.send(`${this.getController()}.load-metric`, {})
+          .then(metric => {
+            this.metric = metric
+          })
+          .finally(_ => this.readyState = 1)
+
     },
 
   },
 
   mounted() {
     this.load()
-
-    this.emitter = useEmitter()
-    this.emitter.on(`${this.uid}.load`, () => {
-      this.load()
-    })
-    this.emitter.on(`dashboard.load`, () => {
-      this.load()
-    })
   }
 
 }

package/src/widgets/Dashboard/MetricSetting.vue

@@ -142,7 +142,7 @@ export default{
     },
 
     selectedDatasource(){
-      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
+      //return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
     },
 
     showPercentageOptValues(){

package/src/widgets/Dashboard.vue

@@ -1737,17 +1737,15 @@ export default {
 
   props: {
 
-    config: {
-      type: Object,
-      default: { presets:[] }
-    },
+    config: Object,
+    defaultConfig: Function,
+    presetKey: String,
 
     controller: {
       type: String,
       required: true
     },
 
-    presetKey: String,
 
     title: String,