fix: update styles

src/views/dashboard/Edit.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
     <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
-      title="Edit"
+      title="Edit Graph Options"
       fullscreen
       @closed="dashboardStore.setConfigPanel(false)"
     >

src/views/dashboard/configuration/ConfigEdit.vue

@@ -14,16 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="widget-config flex-v">
-    <div class="graph" style="height: 350px; width: 100%">
+    <div class="graph">
+      <div class="header">Title</div>
+      <div class="render-chart">
         <component
           :is="states.chartType"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="source"
         />
+      </div>
       <span v-show="!source">{{ t("noData") }}</span>
     </div>
+    <div class="collapse" :style="{ height: configHeight + 'px' }">
       <el-collapse
-      class="collapse"
         v-model="states.activeNames"
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
@@ -71,6 +74,7 @@ limitations under the License. -->
           <StandardOptions />
         </el-collapse-item>
       </el-collapse>
+    </div>
     <div class="footer">
       <el-button size="mini">
         {{ t("cancel") }}
@@ -168,6 +172,7 @@ export default defineComponent({
       count: [1, 2, 5, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
       avg: [3, 2, 4, 4, 5, 6, 5, 3, 4, 1, 2, 1, 6, 10],
     };
+    const configHeight = document.documentElement.clientHeight - 520;
     return {
       states,
       changeChartType,
@@ -178,6 +183,7 @@ export default defineComponent({
       ChartTypes,
       source,
       metricOpts,
+      configHeight,
     };
   },
 });
@@ -187,12 +193,27 @@ export default defineComponent({
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .graph {
+  position: relative;
   min-width: 1280px;
   border: 1px solid #eee;
-  padding: 10px;
+  background-color: #fff;
+}
+
+.header {
+  padding: 3px 0;
+  text-align: center;
+  // border-bottom: 1px solid #eee;
+  background-color: aliceblue;
+}
+
+.render-chart {
+  padding: 5px;
+  height: 350px;
+  width: 100%;
 }
 
 .selectors {
@@ -224,7 +245,8 @@ export default defineComponent({
 }
 
 span.active {
-  background-color: #eee;
+  background-color: #409eff;
+  color: #fff;
 }
 
 .footer {
@@ -239,6 +261,7 @@ span.active {
 }
 
 .collapse {
-  margin: 10px 0;
+  margin-top: 10px;
+  overflow: auto;
 }
 </style>

src/views/dashboard/graphs/Bar.vue

@@ -87,6 +87,9 @@ function getOption() {
         type: "dotted",
       },
       showBackground: props.config.showBackground,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
       markArea:
         index === 0
           ? {