fix: update config

src/components/Graph.vue

@@ -43,9 +43,6 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  if (!chartRef.value) {
-    return;
-  }
   setOptions(props.option);
   addResizeListener(unref(chartRef), resize);
 });
@@ -58,9 +55,6 @@ watch(
 );
 
 onBeforeUnmount(() => {
-  if (!chartRef.value) {
-    return;
-  }
   removeResizeListener(unref(chartRef), resize);
 });
 </script>

src/store/data.ts

@@ -27,7 +27,7 @@ export const NewControl = {
   graph: {},
   standard: {},
 };
-export const ConfigData = {
+export const ConfigData: any = {
   x: 0,
   y: 0,
   w: 8,
@@ -41,8 +41,6 @@ export const ConfigData = {
     tips: "Tooltip",
   },
   graph: {
-    showBackground: true,
-    barWidth: 30,
     type: "Line",
   },
   standard: {

src/store/modules/dashboard.ts

@@ -144,6 +144,7 @@ export const dashboardStore = defineStore({
         ...this.layout[index],
         ...param,
       };
+      this.selectedGrid = this.layout[index];
     },
     async fetchMetricType(item: string) {
       const res: AxiosResponse = await graph

src/types/dashboard.ts

@@ -20,9 +20,9 @@ export interface LayoutConfig {
   w: number;
   h: number;
   i: string;
-  widget: WidgetConfig;
-  graph: GraphConfig;
-  standard: StandardConfig;
+  widget?: WidgetConfig;
+  graph?: GraphConfig;
+  standard?: StandardConfig;
   metrics?: string[];
   type?: string;
   queryMetricType?: string;
@@ -30,8 +30,8 @@ export interface LayoutConfig {
 }
 
 export interface WidgetConfig {
-  title: string;
-  tips: string;
+  title?: string;
+  tips?: string;
 }
 
 export interface StandardConfig {
@@ -39,19 +39,18 @@ export interface StandardConfig {
   unit?: string;
   max?: string;
   min?: string;
-  plus: string;
-  minus: string;
-  multiply: string;
-  divide: string;
-  milliseconds: string;
-  seconds: string;
+  plus?: string;
+  minus?: string;
+  multiply?: string;
+  divide?: string;
+  milliseconds?: string;
+  seconds?: string;
 }
 
 export type GraphConfig = BarConfig | LineConfig;
 export interface BarConfig {
   type?: string;
   showBackground?: boolean;
-  barWidth?: number;
 }
 export interface LineConfig extends AreaConfig {
   type?: string;

src/views/dashboard/configuration/ConfigEdit.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
     <div class="graph">
       <div class="header">
         <span>{{ states.widget.title }}</span>
-        <div class="tips">
+        <div class="tips" v-show="states.widget.tips">
           <el-tooltip :content="states.widget.tips">
             <Icon iconName="info_outline" size="sm" />
           </el-tooltip>

src/views/dashboard/configuration/graph-styles/Bar.vue

@@ -13,16 +13,6 @@ 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>
-  <div>
-    <span class="label">Bar Width</span>
-    <el-slider
-      class="bar-width"
-      v-model="barWidth"
-      show-input
-      input-size="small"
-      @change="changeConfig({ barWidth })"
-    />
-  </div>
   <div>
     <span class="label">Show Background</span>
     <el-switch
@@ -45,7 +35,6 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["update"]);
-const barWidth = ref(props.config.barWidth || 30);
 const showBackground = ref(props.config.showBackground || false);
 
 function changeConfig(param: { [key: string]: unknown }) {

src/views/dashboard/configuration/graph-styles/Line.vue

@@ -49,7 +49,7 @@ import { LineConfig } from "@/types/dashboard";
 const props = defineProps({
   config: {
     type: Object as PropType<LineConfig>,
-    default: () => ({ showBackground: true, barWidth: 30 }),
+    default: () => ({}),
   },
 });
 const emits = defineEmits(["update"]);

src/views/dashboard/controls/Widget.vue

@@ -15,10 +15,15 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>{{ data.widget.title || "" }}</div>
+      <div>{{ data.widget?.title || "" }}</div>
       <div>
-        <el-tooltip :content="data.widget.tips">
-          <Icon iconName="info_outline" size="sm" class="operation" />
+        <el-tooltip :content="data.widget?.tips">
+          <Icon
+            iconName="info_outline"
+            size="sm"
+            class="operation"
+            v-show="data.widget?.tips"
+          />
         </el-tooltip>
         <el-popover
           placement="bottom"
@@ -37,11 +42,12 @@ limitations under the License. -->
         </el-popover>
       </div>
     </div>
-    <div class="body" v-if="data.graph.type" v-loading="loading">
+    <div class="body" v-if="data.graph?.type" v-loading="loading">
       <component
         :is="data.graph.type"
         :intervalTime="appStoreWithOut.intervalTime"
         :data="state.source"
+        :config="data.graph"
       />
     </div>
     <div v-else class="no-data">{{ t("noData") }}</div>
@@ -108,6 +114,12 @@ export default defineComponent({
       dashboardStore.setConfigPanel(true);
       dashboardStore.selectWidget(props.data);
     }
+    // watch(
+    //   () => data.value,
+    //   (data) => {
+    //     console.log(data);
+    //   }
+    // );
     return {
       state,
       appStoreWithOut,

src/views/dashboard/data.ts

@@ -30,7 +30,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   Bar: {
     type: "Bar",
     showBackground: true,
-    barWidth: 30,
   },
   Line: {
     type: "Line",

src/views/dashboard/graphs/Bar.vue

@@ -75,7 +75,6 @@ function getOption() {
       name: i,
       type: "bar",
       symbol: "none",
-      barWidth: props.config.barWidth,
       stack: "sum",
       lineStyle: {
         width: 1.5,