From 9f64086d51e3a5ea8c2dce3b410a3e59b965c446 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 30 Mar 2022 15:21:39 +0800
Subject: [PATCH] fix config

---
 src/components/Graph.vue                      | 25 ++++++++++++++++---
 .../configuration/widget/metric/Standard.vue  |  9 +++----
 src/views/dashboard/graphs/Card.vue           | 12 +++------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index e70b7a1d..f3fbff6d 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -13,10 +13,23 @@ 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 ref="chartRef" :style="`height:${height};width:${width};`"></div>
+  <div
+    v-if="isRight"
+    ref="chartRef"
+    :style="`height:${height};width:${width};`"
+  ></div>
+  <div v-else>No Data</div>
 </template>
 <script lang="ts" setup>
-import { watch, ref, Ref, onMounted, onBeforeUnmount, unref } from "vue";
+import {
+  watch,
+  ref,
+  Ref,
+  onMounted,
+  onBeforeUnmount,
+  unref,
+  computed,
+} from "vue";
 import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
@@ -31,12 +44,16 @@ const props = defineProps({
   height: { type: String, default: "100%" },
   width: { type: String, default: "100%" },
   option: {
-    type: Object as PropType<{ [key: string]: unknown }>,
+    type: Object as PropType<{ [key: string]: any }>,
     default: () => ({}),
   },
 });
-
+const isRight = computed(
+  () =>
+    props.option.series && props.option.series[0] && props.option.series[0].data
+);
 onMounted(async () => {
+  console.log(props.option);
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index dbee22c3..046a938f 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -103,13 +103,10 @@ const currentMetric = ref<MetricConfigOpt>({
   ...props.currentMetricConfig,
   topN: props.currentMetricConfig.topN || 10,
 });
-const metricType = ref<string>(
-  dashboardStore.selectedGrid.metricTypes[props.index]
-);
+const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
+const metricType = ref<string>(metricTypes[props.index]);
 const isTopn = computed(() =>
-  ["sortMetrics", "readSampledRecords"].includes(
-    dashboardStore.selectedGrid.metricTypes[props.index]
-  )
+  ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
 );
 function changeConfigs(
   index: number,
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index b715881f..a3c2e802 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -15,21 +15,17 @@ limitations under the License. -->
 
 <template>
   <div
+    v-if="!isNaN(singleVal)"
     class="chart-card"
     :class="{ center: config.textAlign === 'center' }"
     :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
   >
-    {{
-      typeof singleVal === "string"
-        ? singleVal
-        : isNaN(singleVal)
-        ? null
-        : singleVal.toFixed(2)
-    }}
+    {{ singleVal.toFixed(2) }}
     <span v-show="config.showUnit">
       {{ metricConfig[0]?.unit }}
     </span>
   </div>
+  <div class="center chart-card" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
@@ -53,7 +49,7 @@ const props = defineProps({
 });
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
-const singleVal = computed(() => props.data[key.value]);
+const singleVal = computed(() => Number(props.data[key.value]));
 </script>
 <style lang="scss" scoped>
 .chart-card {