dashboard echart

Author: kongliang1

.tool-versions

@@ -0,0 +1 @@
+golang 1.23.7

internal/driver/bredis/ui.go

@@ -62,17 +62,17 @@ func (t *UITool) QueueMessage(ctx context.Context) error {
 			}
 			total += t.client.XLen(ctx, streamkey).Val()
 		}
+		if total <= 0 {
+			continue
+		}
 		if pending < 0 {
 			pending = 0
 		}
-		if total < 0 {
-			total = 0
-		}
 		ready = total - pending
 
 		now := time.Now()
 
-		sliceData = append(sliceData, ready, pending, total, now.Format(time.DateTime))
+		sliceData = append(sliceData, total, pending, ready, now.Format(time.DateTime))
 
 		bt, err := json.Marshal(sliceData)
 		sliceData = sliceData[:0]

ui/src/pages/home.vue

@@ -105,7 +105,7 @@ function resize(){
   })
 }
 
-const queues = ref([]);
+const [queues,queuesCount] = [ref([]),ref(0)];
 watch(()=>execTime.value,(n,o)=>{
   execTime.value = n;
   queues.value = [];
@@ -130,12 +130,13 @@ function sseConnect(){
         return;
     }
     if(code === "1111" && msg === "DONE"){
+      queuesCount.value = data;
       sse.value.close();
     }
     if (typeof data !== "object"){
 
-      queuedMessagesOption.value = dashboardApi.QueueLine(queues.value,execTime.value,data);
-      messageRatesOption.value = dashboardApi.MessageRateLine(queues.value,execTime.value);
+      queuedMessagesOption.value = dashboardApi.QueueLine(queues.value,execTime.value,queuesCount.value);
+      messageRatesOption.value = dashboardApi.MessageRateLine(queues.value,execTime.value,queuesCount.value);
     }else{
       queues.value.push(...data);
     }

ui/static/apis/dashboard.js

@@ -22,14 +22,14 @@ const dashboardApi = {
         let series = [
             {
                 data: queues,
+                large: true,
                 type: 'scatter',
                 symbolSize: function (data) {
                     let size = Math.sqrt(data[2]) / 2.5;
-                    if (size > 15) {
-                        size = 15;
-                    }
-                    if (size < 5) {
-                        size = 5;
+                    if(size >= 8){
+                        size = 8
+                    }else{
+                        size = 4
                     }
                     return size;
                 },
@@ -41,9 +41,9 @@ const dashboardApi = {
                     }
                 },
                 itemStyle: {
-                    shadowBlur: 10,
+                    shadowBlur: 3,
                     shadowColor: 'rgba(120, 36, 50, 0.5)',
-                    shadowOffsetY: 5,
+                    //shadowOffsetY: 2,
                     color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                         {
                             offset: 0,
@@ -101,19 +101,21 @@ const dashboardApi = {
                     type: 'dashed'
                 }
             },
-            scale: true
+            scale: true,
+            min:0,
+            max:5000
         };
         lineOpt.dataZoom = [
             {
                 type: 'inside',
                 start: 0,
-                end: 10
+                end: 100
             },
         ];
         lineOpt.series = series;
         return lineOpt;
     },
-    MessageRateLine(values,execTime){
+    MessageRateLine(values,execTime,count){
 
         let xdata = [];
         let publish = [],confirm = [],deliver = [],redelivered = [],ack = [],get = [],nget = [];