associate widgets

src/components/Graph.vue

@@ -44,6 +44,13 @@ const props = defineProps({
     type: Object as PropType<{ [key: string]: any }>,
     default: () => ({}),
   },
+  filters: {
+    type: Object as PropType<{
+      value: number | string;
+      dataIndex: number;
+      sourceId: string;
+    }>,
+  },
 });
 const available = computed(
   () =>
@@ -55,6 +62,7 @@ const available = computed(
 onMounted(async () => {
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
+  console.log(props.filters);
   setTimeout(() => {
     const instance = getInstance();
 
@@ -79,6 +87,27 @@ watch(
     setOptions(newVal);
   }
 );
+watch(
+  () => props.filters,
+  () => {
+    console.log(props.filters);
+    const instance = getInstance();
+    if (!instance) {
+      return;
+    }
+    if (props.filters) {
+      instance.dispatchAction({
+        type: "showTip",
+        dataIndex: props.filters.dataIndex,
+        seriesIndex: 0,
+      });
+    } else {
+      instance.dispatchAction({
+        type: "hideTip",
+      });
+    }
+  }
+);
 
 onBeforeUnmount(() => {
   removeResizeListener(unref(chartRef), resize);

src/types/dashboard.d.ts

@@ -38,6 +38,7 @@ export interface LayoutConfig {
   metricConfig?: MetricConfigOpt[];
   id?: string;
   associate?: { widgetId: string }[];
+  filters?: { value: number | string; dataIndex: number; sourceId: string };
 }
 
 export type MetricConfigOpt = {

src/views/dashboard/controls/Widget.vue

@@ -61,8 +61,9 @@ limitations under the License. -->
           metrics: data.metrics || [''],
           metricTypes: data.metricTypes || [''],
           i: data.i,
+          id: data.id,
           metricConfig: data.metricConfig,
-          associate: data.associate || [],
+          filters: data.filters || {},
         }"
         :needQuery="needQuery"
         @click="clickHandle"
@@ -162,6 +163,7 @@ export default defineComponent({
       }
     }
     function clickHandle(params: EventParams | any) {
+      console.log(params);
       const { widgets } = getDashboard(dashboardStore.currentDashboard);
       const associate = (props.data.associate && props.data.associate) || [];
 
@@ -170,11 +172,12 @@ export default defineComponent({
           (d: { id: string }) => d.id === item.widgetId
         );
         if (widget) {
-          widget.filters = widget.filters || {};
           widget.filters = {
-            ...widget.filters,
+            value: params.value[0],
-            [props.data.id || ""]: { value: params.value[0] },
+            dataIndex: params.dataIndex,
+            sourceId: props.data.id || "",
           };
+
           dashboardStore.setWidget(widget);
         }
       }

src/views/dashboard/graphs/Line.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph :option="option" @select="clickEvent" />
+  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
@@ -32,7 +32,15 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
   config: {
-    type: Object as PropType<LineConfig>,
+    type: Object as PropType<
+      LineConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
     default: () => ({
       step: false,
       smooth: false,