update menus and associate metrics

src/components/Graph.vue

@@ -16,8 +16,8 @@ limitations under the License. -->
   <div class="chart" ref="chartRef" :style="`height:${height};width:${width};`">
     <div v-if="!available" class="no-data">No Data</div>
     <div class="menus" v-show="visMenus" ref="menus">
-      <div class="tools">
-        {{ t("viewTrace") }}
+      <div class="tools" @click="associateMetrics">
+        {{ t("associateMetrics") }}
       </div>
       <div class="tools">
         {{ t("viewTrace") }}
@@ -37,6 +37,7 @@ import {
 } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
+import { EventParams } from "@/types/app";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
 
@@ -49,6 +50,7 @@ const visMenus = ref<boolean>(false);
 const { setOptions, resize, getInstance } = useECharts(
   chartRef as Ref<HTMLDivElement>
 );
+const currentParams = ref<Nullable<EventParams>>(null);
 const props = defineProps({
   height: { type: String, default: "100%" },
   width: { type: String, default: "100%" },
@@ -84,14 +86,14 @@ onMounted(async () => {
     if (!instance) {
       return;
     }
-    instance.on("click", (params: any) => {
+    instance.on("click", (params: EventParams) => {
+      currentParams.value = params;
       if (!menus.value) {
         return;
       }
       visMenus.value = true;
       menus.value.style.left = params.event.offsetX + "px";
       menus.value.style.top = params.event.offsetY + "px";
-      emits("select", params);
     });
     document.addEventListener(
       "click",
@@ -99,6 +101,7 @@ onMounted(async () => {
         if (instance.isDisposed()) {
           return;
         }
+        visMenus.value = false;
         instance.dispatchAction({
           type: "hideTip",
         });
@@ -112,6 +115,11 @@ onMounted(async () => {
   }, 1000);
 });
 
+function associateMetrics() {
+  emits("select", currentParams.value);
+  visMenus.value = true;
+}
+
 function updateOptions() {
   const instance = getInstance();
   if (!instance) {
@@ -225,7 +233,7 @@ onBeforeUnmount(() => {
   display: block;
   white-space: nowrap;
   z-index: 9999999;
-  box-shadow: #ccc 1px 2px 10px;
+  box-shadow: #ddd 1px 2px 10px;
   transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
   background-color: rgb(255, 255, 255);
   border-radius: 4px;
@@ -234,7 +242,7 @@ onBeforeUnmount(() => {
 }
 
 .tools {
-  padding: 5px 0;
+  padding: 5px;
   color: #999;
   cursor: pointer;
   text-align: center;

src/locales/lang/en.ts

@@ -145,6 +145,7 @@ const msg = {
   pause: "Pause",
   begin: "Start",
   associateOptions: "Association Options",
+  associateMetrics: "Association Metrics",
   widget: "Widget",
   nameTip:
     "The name only supports Chinese and English, horizontal lines and underscores. The length of the name is limited to 300 characters",

src/locales/lang/es.ts

@@ -145,6 +145,7 @@ const msg = {
   pause: "Pausa",
   begin: "Inicio",
   associateOptions: "Opciones de asociación",
+  associateMetrics: "Índice de correlación",
   widget: "Dispositivo pequeño",
   text: "Texto",
   duplicateName: "Nombre duplicado",

src/locales/lang/zh.ts

@@ -143,6 +143,7 @@ const msg = {
   pause: "暂停",
   begin: "开始",
   associateOptions: "关联选项",
+  associateMetrics: "关联指标",
   widget: "部件",
   enableAssociate: "启用关联",
   nameTip: "该名称仅支持中文和英文、横线和下划线, 并且限制长度为300个字符",

src/types/app.d.ts

@@ -32,3 +32,17 @@ export type Paging = {
   pageNum: number;
   pageSize: number;
 };
+
+export type EventParams = {
+  componentType: string;
+  seriesType: string;
+  seriesIndex: number;
+  seriesName: string;
+  name: string;
+  dataIndex: number;
+  data: unknown;
+  dataType: string;
+  value: number | Array;
+  color: string;
+  event: any;
+};