From e72368b6fc762e81ba298151f526864d49ca1529 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 6 Jan 2022 22:30:22 +0800
Subject: [PATCH] feat: set config

---
 src/components/Graph.vue                      |  3 +
 src/components/Selector.vue                   | 17 +++-
 src/store/modules/data.ts                     |  2 +-
 src/types/dashboard.ts                        |  2 +-
 .../dashboard/configuration/ConfigEdit.vue    | 77 +++++++++++++------
 .../configuration/StandardOptions.vue         |  2 +-
 .../dashboard/configuration/WidgetOptions.vue | 12 ++-
 .../configuration/graph-styles/Line.vue       | 47 ++++++++++-
 src/views/dashboard/graphs/Pie.vue            |  4 +-
 src/views/dashboard/panel/Widget.vue          |  6 +-
 10 files changed, 134 insertions(+), 38 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 8734626d..e719da7f 100644
--- a/src/components/Graph.vue
+++ b/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) => {
diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index a349fd5a..fafc936f 100644
--- a/src/components/Selector.vue
+++ b/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);
 }
diff --git a/src/store/modules/data.ts b/src/store/modules/data.ts
index 143f5599..1cf8bdec 100644
--- a/src/store/modules/data.ts
+++ b/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",
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index 75339fa1..f61b9143 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -24,7 +24,7 @@ export interface LayoutConfig {
   graph?: GraphConfig;
   standard?: StandardConfig;
   metrics?: string[];
-  visualization?: string;
+  chart?: string;
   queryMetricType?: string;
 }
 
diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index 652cf5fe..288096b3 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/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 {
diff --git a/src/views/dashboard/configuration/StandardOptions.vue b/src/views/dashboard/configuration/StandardOptions.vue
index 566ecc6a..4c09cb78 100644
--- a/src/views/dashboard/configuration/StandardOptions.vue
+++ b/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"
diff --git a/src/views/dashboard/configuration/WidgetOptions.vue b/src/views/dashboard/configuration/WidgetOptions.vue
index 820f1f3d..c121aba5 100644
--- a/src/views/dashboard/configuration/WidgetOptions.vue
+++ b/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 {
diff --git a/src/views/dashboard/configuration/graph-styles/Line.vue b/src/views/dashboard/configuration/graph-styles/Line.vue
index 32b9abf3..f4ce7a3d 100644
--- a/src/views/dashboard/configuration/graph-styles/Line.vue
+++ b/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>
diff --git a/src/views/dashboard/graphs/Pie.vue b/src/views/dashboard/graphs/Pie.vue
index 5560eb5d..25874d42 100644
--- a/src/views/dashboard/graphs/Pie.vue
+++ b/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 {
diff --git a/src/views/dashboard/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue
index 982e471a..c826a9bc 100644
--- a/src/views/dashboard/panel/Widget.vue
+++ b/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,