set relation widget

src/store/modules/dashboard.ts

@@ -275,6 +275,27 @@ export const dashboardStore = defineStore({
       };
       this.selectedGrid = this.layout[index];
     },
+    setWidget(param: LayoutConfig) {
+      for (let item of this.layout) {
+        if (item.type === "Tab") {
+          if (item.children && item.children.length) {
+            for (const child of item.children) {
+              if (child.children && child.children.length) {
+                for (let c of child.children) {
+                  if (c.id === param.id) {
+                    c = param;
+                  }
+                }
+              }
+            }
+          }
+        } else {
+          if (item.id === param.id) {
+            item = param;
+          }
+        }
+      }
+    },
     async fetchMetricType(item: string) {
       const res: AxiosResponse = await graphql
         .query("queryTypeOfMetrics")

src/types/components.d.ts

@@ -5,8 +5,36 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Graph: typeof import('./../components/Graph.vue')['default']
     Icon: typeof import('./../components/Icon.vue')['default']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
     Radio: typeof import('./../components/Radio.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/types/dashboard.d.ts

@@ -37,7 +37,7 @@ export interface LayoutConfig {
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
   id?: string;
-  associate?: { widgetIds: string }[];
+  associate?: { widgetId: string }[];
 }
 
 export type MetricConfigOpt = {

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
     <span class="label">{{ t("widget") }}</span>
     <Selector
       :multiple="true"
-      :value="widgetIds"
+      :value="widgetId"
       :options="widgets"
       size="small"
       placeholder="Select a widget"
@@ -37,7 +37,7 @@ import { Option } from "@/types/app";
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const associate = dashboardStore.selectedGrid.associate || {};
-const widgetIds = ref<string[]>(associate.widgetIds || []);
+const widgetId = ref<string[]>(associate.widgetId || []);
 const widgets = computed(() => {
   const isLinear = ["Bar", "Line", "Area"].includes(
     dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type
@@ -65,10 +65,12 @@ const widgets = computed(() => {
   return items;
 });
 function updateWidgetConfig(options: Option[]) {
-  const opt = options.map((d: Option) => d.value);
+  const opt = options.map((d: Option) => {
+    return { widgetId: d.value };
+  });
   const widget = {
     ...dashboardStore.selectedGrid,
-    associate: { widgetIds: opt },
+    associate: opt,
   };
   dashboardStore.selectWidget({ ...widget });
 }

src/views/dashboard/controls/Widget.vue

@@ -87,6 +87,7 @@ import {
 } from "@/hooks/useProcessor";
 import { EntityType, ListChartTypes } from "../data";
 import { EventParams } from "@/types/dashboard";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 const props = {
   data: {
@@ -161,10 +162,22 @@ export default defineComponent({
       }
     }
     function clickHandle(params: EventParams | any) {
-      console.log(params);
+      const { widgets } = getDashboard(dashboardStore.currentDashboard);
-      console.log(props.data.associate);
+      const associate = (props.data.associate && props.data.associate) || [];
-      // for (const id of props.config.associate.widgetIds) {
+
-      // }
+      for (const item of associate) {
+        const widget = widgets.find(
+          (d: { id: string }) => d.id === item.widgetId
+        );
+        if (widget) {
+          widget.filters = widget.filters || {};
+          widget.filters = {
+            ...widget.filters,
+            [props.data.id || ""]: { value: params.value[0] },
+          };
+          dashboardStore.setWidget(widget);
+        }
+      }
     }
     watch(
       () => [props.data.metricTypes, props.data.metrics],

src/views/dashboard/graphs/Line.vue

@@ -32,9 +32,7 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
   config: {
-    type: Object as PropType<
+    type: Object as PropType<LineConfig>,
-      LineConfig & { associate: { widgetIds: string[] } }
-    >,
     default: () => ({
       step: false,
       smooth: false,