From f19b69d050ab852163e430d6311437885115395f Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 6 Jan 2022 16:10:15 +0800
Subject: [PATCH] fix: render graphs

---
 src/components/Graph.vue                      |  1 -
 src/store/modules/data.ts                     |  2 +-
 .../dashboard/configuration/ConfigEdit.vue    |  2 +-
 src/views/dashboard/graphs/Bar.vue            |  6 +-
 src/views/dashboard/graphs/HeatMap.vue        |  2 +-
 src/views/dashboard/graphs/Line.vue           |  4 +-
 src/views/dashboard/graphs/Pie.vue            |  2 +-
 src/views/dashboard/panel/Widget.vue          | 86 +++++++++++--------
 8 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 44fcd781..8734626d 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -43,7 +43,6 @@ const props = defineProps({
 
 onMounted(() => {
   setTimeout(() => {
-    console.log(chart.value);
     drawEcharts();
     window.addEventListener("resize", state.instanceChart.resize);
   }, 50);
diff --git a/src/store/modules/data.ts b/src/store/modules/data.ts
index fe88ade2..143f5599 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: "Line",
+  visualization: "Bar",
   widget: {
     title: "Title",
     tips: "Tooltip",
diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index c367bde4..652cf5fe 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/src/views/dashboard/configuration/ConfigEdit.vue
@@ -86,7 +86,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent, ref } from "vue";
+import { reactive, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index b5072775..5fc051be 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -13,10 +13,10 @@ 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>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, computed } from "vue";
+import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
 
@@ -37,8 +37,6 @@ const props = defineProps({
     default: () => ({ theme: "light", showBackground: true, barWidth: 20 }),
   },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 
 function getOption() {
diff --git a/src/views/dashboard/graphs/HeatMap.vue b/src/views/dashboard/graphs/HeatMap.vue
index 0bf4f7a1..0c968e20 100644
--- a/src/views/dashboard/graphs/HeatMap.vue
+++ b/src/views/dashboard/graphs/HeatMap.vue
@@ -13,7 +13,7 @@ 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>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 9343105a..8dea9187 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -13,7 +13,7 @@ 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>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";
@@ -30,8 +30,6 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
diff --git a/src/views/dashboard/graphs/Pie.vue b/src/views/dashboard/graphs/Pie.vue
index 0524e6af..5560eb5d 100644
--- a/src/views/dashboard/graphs/Pie.vue
+++ b/src/views/dashboard/graphs/Pie.vue
@@ -13,7 +13,7 @@ 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>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";
diff --git a/src/views/dashboard/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue
index bf87d8f9..982e471a 100644
--- a/src/views/dashboard/panel/Widget.vue
+++ b/src/views/dashboard/panel/Widget.vue
@@ -35,50 +35,62 @@ limitations under the License. -->
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { defineProps, reactive, onMounted } from "vue";
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-
-const state = reactive({
-  source: {},
-});
-const props = defineProps({
+import graphs from "../graphs";
+const props = {
   item: { type: Object as PropType<LayoutConfig>, default: () => ({}) },
-});
-const appStoreWithOut = useAppStoreWithOut();
-const dashboardStore = useDashboardStore();
-onMounted(() => {
-  queryMetrics();
-});
-async function queryMetrics() {
-  const json = await dashboardStore.fetchMetricValue(props.item);
+};
+export default defineComponent({
+  name: "Widget",
+  components: { ...graphs },
+  props,
+  setup(props) {
+    const state = reactive({
+      source: {},
+    });
+    const { item } = toRefs(props);
+    const appStoreWithOut = useAppStoreWithOut();
+    const dashboardStore = useDashboardStore();
+    queryMetrics();
+    async function queryMetrics() {
+      const json = await dashboardStore.fetchMetricValue(props.item);
 
-  if (json.error) {
-    return;
-  }
-  const metricVal = json.data.readMetricsValues.values.values.map(
-    (d: any) => d.value
-  );
-  const m = props.item.metrics && props.item.metrics[0];
-  if (!m) {
-    return;
-  }
-  state.source = {
-    [m]: metricVal,
-  };
-  console.log(state.source);
-}
+      if (json.error) {
+        return;
+      }
+      const metricVal = json.data.readMetricsValues.values.values.map(
+        (d: any) => d.value
+      );
+      const m = props.item.metrics && props.item.metrics[0];
+      if (!m) {
+        return;
+      }
+      state.source = {
+        [m]: metricVal,
+      };
+    }
 
-function removeWidget() {
-  dashboardStore.removeWidget(props.item);
-}
-function setConfig() {
-  dashboardStore.setConfigPanel(true);
-  dashboardStore.selectWidget(props.item);
-}
+    function removeWidget() {
+      dashboardStore.removeWidget(props.item);
+    }
+    function setConfig() {
+      dashboardStore.setConfigPanel(true);
+      dashboardStore.selectWidget(props.item);
+    }
+    return {
+      state,
+      appStoreWithOut,
+      removeWidget,
+      setConfig,
+      item,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .widget {