feat: set config

src/components/Graph.vue

@@ -51,6 +51,9 @@ function drawEcharts(): void {
   if (!chart.value) {
     return;
   }
+  if (state.instanceChart) {
+    return;
+  }
   state.instanceChart = echarts.init(chart.value, "");
   unWarp(state.instanceChart).setOption(props.option);
   state.instanceChart.on("click", (params: any) => {

src/components/Selector.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
   </el-select>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref, defineEmits } from "vue";
 import type { PropType } from "vue";
 import { ElSelect, ElOption } from "element-plus";
 
@@ -42,21 +42,30 @@ interface Option {
 }
 
 const emit = defineEmits(["change"]);
+/*global  defineProps*/
 const props = defineProps({
   options: {
     type: Array as PropType<Option[]>,
     default: () => [],
   },
-  value: { type: String, default: "" },
+  value: {
+    type: [Array, String] as PropType<string[] | string>,
+    default: () => [],
+  },
   size: { type: String, default: "small" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },
 });
-const selected = ref<string>(props.value);
+const selected = ref<string[] | string>(props.value);
 function changeSelected() {
+  if (!props.multiple) {
+    return;
+  }
   const options = props.options.filter((d: Option) =>
-    selected.value.includes(d.value)
+    props.multiple
+      ? selected.value.includes(d.value)
+      : selected.value === d.value
   );
   emit("change", options);
 }

src/store/modules/data.ts

@@ -23,7 +23,7 @@ export const ConfigData: LayoutConfig = {
   i: "0",
   metrics: ["service_resp_time"],
   queryMetricType: "readMetricsValues",
-  visualization: "Bar",
+  chart: "Line",
   widget: {
     title: "Title",
     tips: "Tooltip",

src/types/dashboard.ts

@@ -24,7 +24,7 @@ export interface LayoutConfig {
   graph?: GraphConfig;
   standard?: StandardConfig;
   metrics?: string[];
-  visualization?: string;
+  chart?: string;
   queryMetricType?: string;
 }
 

src/views/dashboard/configuration/ConfigEdit.vue

@@ -15,25 +15,25 @@ limitations under the License. -->
 <template>
   <div class="widget-config flex-v">
     <div class="graph">
-      <div class="header">Title</div>
+      <div class="header">{{ title }}</div>
       <div class="render-chart">
         <component
-          :is="states.chartType"
+          :is="chartType"
           :intervalTime="appStoreWithOut.intervalTime"
-          :data="states.source"
+          :data="source"
         />
       </div>
-      <span v-show="!states.source">{{ t("noData") }}</span>
+      <span v-show="!source">{{ t("noData") }}</span>
     </div>
     <div class="collapse" :style="{ height: configHeight + 'px' }">
       <el-collapse
-        v-model="states.activeNames"
+        v-model="activeNames"
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('metricName')" name="1">
           <div>
             <Selector
-              :value="states.metrics"
+              :value="metrics"
               :options="metricOpts"
               :multiple="true"
               size="mini"
@@ -42,9 +42,9 @@ limitations under the License. -->
               class="selectors"
             />
             <Selector
-              v-show="states.valueType"
-              :value="states.valueType"
-              :options="states.valueTypes"
+              v-if="valueType"
+              :value="valueType"
+              :options="valueTypes"
               size="mini"
               placeholder="Select a metric"
               @change="changeValueType"
@@ -58,17 +58,20 @@ limitations under the License. -->
               v-for="(type, index) in ChartTypes"
               :key="index"
               @click="changeChartType(type)"
-              :class="{ active: type.value === states.chartType }"
+              :class="{ active: type.value === chartType }"
             >
               {{ type.label }}
             </span>
           </div>
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
-          <component :is="`${states.chartType}Config`" />
+          <component
+            :is="`${chartType}Config`"
+            :config="dashboardStore.selectedWidget.graph"
+          />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
-          <WidgetOptions />
+          <WidgetOptions @update="updateWidgetOptions" />
         </el-collapse-item>
         <el-collapse-item :title="t('standardOptions')" name="5">
           <StandardOptions />
@@ -86,7 +89,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent } from "vue";
+import { reactive, defineComponent, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -118,30 +121,41 @@ export default defineComponent({
     const appStoreWithOut = useAppStoreWithOut();
     const { loading } = Loading();
     const states = reactive<{
-      metrics?: string[] | string;
+      metrics: string[];
       valueTypes: Option[];
       valueType: string;
       metricQueryType: string;
       chartType: string;
       activeNames: string;
+      tips: string;
       source: any;
+      title: string;
     }>({
-      metrics: "",
+      metrics: dashboardStore.selectedWidget.metrics || [],
       valueTypes: [],
       valueType: "",
       metricQueryType: "",
-      chartType: "Line",
+      chartType: dashboardStore.selectedWidget.chart,
       activeNames: "1",
       source: {},
+      tips: "",
+      title: "",
     });
-    async function changeMetrics(val: Option[]) {
-      if (!val.length) {
+    queryMetricType(states.metrics[0]);
+
+    async function changeMetrics(arr: Option[]) {
+      if (!arr.length) {
         states.valueTypes = [];
         states.valueType = "";
         return;
       }
+      states.metrics = arr.map((d: Option) => String(d.value));
+      queryMetricType(String(arr[0].value));
+    }
+
+    async function queryMetricType(metric: string) {
       const loadingInstance = loading({ text: t("loading"), fullscreen: true });
-      const resp = await dashboardStore.fetchMetricType(val[0].value);
+      const resp = await dashboardStore.fetchMetricType(metric);
       loadingInstance.close();
       if (resp.error) {
         ElMessage.error(resp.data.error);
@@ -150,14 +164,18 @@ export default defineComponent({
       const { typeOfMetrics } = resp.data;
       states.valueTypes = ValuesTypes[typeOfMetrics];
       states.valueType = ValuesTypes[typeOfMetrics][0].value;
+      console.log(states.valueType);
     }
+
     function changeValueType(val: Option[]) {
       states.valueType = String(val[0].value);
       states.metricQueryType = (MetricQueryTypes as any)[states.valueType];
     }
+
     function changeChartType(item: Option) {
       states.chartType = String(item.value);
     }
+
     const metricOpts = [
       { value: "service_apdex", label: "service_apdex" },
       { value: "service_sla", label: "service_sla" },
@@ -171,6 +189,16 @@ export default defineComponent({
       { value: "service_mq_consume_count", label: "service_mq_consume_count" },
     ];
     const configHeight = document.documentElement.clientHeight - 520;
+
+    function updateWidgetOptions(param: any) {
+      if (param.title !== undefined) {
+        states.title = param.title;
+      }
+      if (param.tips !== undefined) {
+        states.tips = param.tips;
+      }
+    }
+
     async function queryMetrics() {
       const json = await dashboardStore.fetchMetricValue(
         dashboardStore.selectedWidget
@@ -192,9 +220,11 @@ export default defineComponent({
         [m]: metricVal,
       };
     }
+
     queryMetrics();
+
     return {
-      states,
+      ...toRefs(states),
       changeChartType,
       changeValueType,
       changeMetrics,
@@ -202,7 +232,9 @@ export default defineComponent({
       appStoreWithOut,
       ChartTypes,
       metricOpts,
+      updateWidgetOptions,
       configHeight,
+      dashboardStore,
     };
   },
 });
@@ -223,10 +255,11 @@ export default defineComponent({
 }
 
 .header {
-  padding: 3px 0;
+  height: 25px;
+  line-height: 25px;
   text-align: center;
-  // border-bottom: 1px solid #eee;
   background-color: aliceblue;
+  font-size: 12px;
 }
 
 .render-chart {

src/views/dashboard/configuration/StandardOptions.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">{{ t("title") }}</span>
+    <span class="label">{{ t("unit") }}</span>
     <el-input
       class="input"
       v-model="state.unit"

src/views/dashboard/configuration/WidgetOptions.vue

@@ -20,6 +20,7 @@ limitations under the License. -->
       v-model="title"
       size="mini"
       placeholder="Please input title"
+      @change="updateTitle"
     />
   </div>
   <div class="item">
@@ -29,17 +30,26 @@ limitations under the License. -->
       v-model="tooltip"
       size="mini"
       placeholder="Please input tips"
+      @change="updateTips"
     />
   </div>
 </template>
 <script lang="ts" setup>
 import { ElInput } from "element-plus";
-import { ref } from "vue";
+import { ref, defineEmits } from "vue";
 import { useI18n } from "vue-i18n";
 
+const emits = defineEmits(["update"]);
 const { t } = useI18n();
 const title = ref<string>("");
 const tooltip = ref<string>("");
+
+function updateTitle(value: string) {
+  emits("update", { title: value });
+}
+function updateTips(value: string) {
+  emits("update", { tips: value });
+}
 </script>
 <style lang="scss" scoped>
 .label {

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

@@ -12,7 +12,50 @@ distributed under the License is distributed on an "AS IS" BASIS,
 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>bar config</template>
+<template>
+  <div>
+    <span class="label">Bar Width</span>
+    <el-slider
+      class="bar-width"
+      v-model="barWidth"
+      show-input
+      input-size="small"
+    />
+  </div>
+  <div>
+    <span class="label">Show Background</span>
+    <el-switch
+      v-model="showBackground"
+      active-text="Yes"
+      inactive-text="No"
+    ></el-switch>
+  </div>
+</template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { defineProps, ref } from "vue";
+import type { PropType } from "vue";
+import { BarConfig } from "./types";
+import { ElSlider, ElSwitch } from "element-plus";
+
+const props = defineProps({
+  config: {
+    type: Object as PropType<BarConfig>,
+    default: () => ({ showBackground: true, barWidth: 30 }),
+  },
+});
+const barWidth = ref(props.config.barWidth);
+const showBackground = ref(props.config.showBackground);
 </script>
+<style lang="scss" scoped>
+.bar-width {
+  width: 500px;
+  margin-top: -13px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+</style>

src/views/dashboard/graphs/Pie.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, computed } from "vue";
+import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 
 const props = defineProps({
@@ -26,8 +26,6 @@ const props = defineProps({
   },
   theme: { type: String, default: "dark" },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 function getOption() {
   return {

src/views/dashboard/panel/Widget.vue

@@ -28,7 +28,7 @@ limitations under the License. -->
     </div>
     <div class="body" :style="{ height: '200px', width: '400px' }">
       <component
-        :is="item.visualization"
+        :is="item.chart"
         :intervalTime="appStoreWithOut.intervalTime"
         :data="state.source"
       />
@@ -76,11 +76,11 @@ export default defineComponent({
     }
 
     function removeWidget() {
-      dashboardStore.removeWidget(props.item);
+      dashboardStore.removeWidget(item);
     }
     function setConfig() {
       dashboardStore.setConfigPanel(true);
-      dashboardStore.selectWidget(props.item);
+      dashboardStore.selectWidget(item);
     }
     return {
       state,