From 6ce7265d3e40e77c5f4b27c170d1f8efc45b968f Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 5 Jan 2022 13:58:29 +0800
Subject: [PATCH] feat: update graphs

---
 src/components/Graph.vue                      | 21 ++++++++-----
 src/locales/lang/en.ts                        |  4 ++-
 src/locales/lang/zh.ts                        |  2 ++
 .../dashboard/configuration/WidgetConfig.vue  | 11 ++++---
 src/views/dashboard/graphs/Bar.vue            | 31 ++++++++++++-------
 src/views/dashboard/graphs/Line.vue           |  2 +-
 6 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 01b0eef3..8734626d 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.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>
-  <div ref="dom" :style="`height:${height};width:${width};`"></div>
+  <div ref="chart" :style="`height:${height};width:${width};`"></div>
 </template>
 <script lang="ts" setup>
 import {
@@ -27,7 +27,7 @@ import {
 import type { PropType } from "vue";
 import * as echarts from "echarts";
 /*global Nullable*/
-const dom = ref<Nullable<HTMLElement>>(null);
+const chart = ref<Nullable<HTMLElement>>(null);
 const state = reactive<{ instanceChart: any }>({
   instanceChart: null,
 });
@@ -40,16 +40,19 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+
 onMounted(() => {
-  drawEcharts();
-  window.addEventListener("resize", state.instanceChart.resize);
+  setTimeout(() => {
+    drawEcharts();
+    window.addEventListener("resize", state.instanceChart.resize);
+  }, 50);
 });
 function drawEcharts(): void {
-  if (!dom.value) {
+  if (!chart.value) {
     return;
   }
-  state.instanceChart = echarts.init(dom.value, "");
-  state.instanceChart.setOption(props.option);
+  state.instanceChart = echarts.init(chart.value, "");
+  unWarp(state.instanceChart).setOption(props.option);
   state.instanceChart.on("click", (params: any) => {
     if (!props.clickEvent) {
       return;
@@ -57,6 +60,10 @@ function drawEcharts(): void {
     props.clickEvent(params);
   });
 }
+function unWarp(obj: any) {
+  return obj && (obj.__v_raw || obj.valueOf() || obj);
+}
+
 watch(
   () => props.option,
   (opt) => {
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 55a8ff7f..bb972329 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -53,6 +53,8 @@ const msg = {
   instance: "Instance",
   create: "Create",
   loading: "Loading",
+  graphMetric: "Graph your metrics",
+  selectVisualization: "Select you visualization",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
@@ -219,7 +221,7 @@ const msg = {
   grade: "Grade",
   relatedTraceLogs: "Related Logs",
   setConditions: "More Conditions",
-  metricName: "Metric Name",
+  metricName: "Metric Names",
   keywordsOfContent: "Keys Of Content",
   excludingKeywordsOfContent: "Exclude Keys Of Content",
   return: "Return",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 1c013b48..a51dd184 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -51,6 +51,8 @@ const msg = {
   endpoint: "端点",
   create: "新建",
   loading: "加载中",
+  graphMetric: "用图表示你的指标",
+  selectVisualization: "选择你的可视化",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/views/dashboard/configuration/WidgetConfig.vue b/src/views/dashboard/configuration/WidgetConfig.vue
index ecb4c5ff..10f7fcd2 100644
--- a/src/views/dashboard/configuration/WidgetConfig.vue
+++ b/src/views/dashboard/configuration/WidgetConfig.vue
@@ -20,12 +20,12 @@ limitations under the License. -->
         :intervalTime="appStoreWithOut.intervalTime"
         :data="source"
       />
-      <span v-show="!source">No Data</span>
+      <span v-show="!source">{{ t("noData") }}</span>
     </div>
     <div class="config">
       <div class="metrics item">
-        <label>Graph your metric</label>
-        <div class="name">Metrics Name</div>
+        <label>{{ t("graphMetric") }}</label>
+        <div class="name">{{ t("metricName") }}</div>
         <Selector
           :value="states.metrics"
           :options="metricOpts"
@@ -46,7 +46,7 @@ limitations under the License. -->
         />
       </div>
       <div class="visualization item">
-        <label>Select you visualization</label>
+        <label>{{ t("selectVisualization") }}</label>
         <div class="chart-types">
           <span
             v-for="(type, index) in ChartTypes"
@@ -148,7 +148,8 @@ export default defineComponent({
       { value: "service_mq_consume_count", label: "service_mq_consume_count" },
     ];
     const source = {
-      count: [1, 2, 3, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
+      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],
     };
     return {
       states,
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 55897065..0c5b5cc4 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -26,8 +26,16 @@ const props = defineProps({
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  theme: { type: String, default: "dark" },
+  theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
+  config: {
+    type: Object as PropType<{
+      theme: string;
+      showBackground: boolean;
+      barMaxWidth: number;
+    }>,
+    default: () => ({ theme: "light", showBackground: true, barMaxWidth: 30 }),
+  },
 });
 /*global Nullable */
 const chart = ref<Nullable<HTMLElement>>(null);
@@ -72,12 +80,13 @@ function getOption() {
       name: i,
       type: "bar",
       symbol: "none",
-      barMaxWidth: 10,
-      stack: "总量",
+      barWidth: props.config.barMaxWidth,
+      stack: "sum",
       lineStyle: {
         width: 1.5,
         type: "dotted",
       },
+      showBackground: props.config.showBackground,
       markArea:
         index === 0
           ? {
@@ -130,13 +139,13 @@ function getOption() {
     color,
     tooltip: {
       trigger: "axis",
-      backgroundColor: "rgb(50,50,50)",
-      textStyle: {
-        fontSize: 13,
-        color: "#ccc",
-      },
-      enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto;",
+      // backgroundColor: "rgb(50,50,50)",
+      // textStyle: {
+      //   fontSize: 13,
+      //   color: "#ccc",
+      // },
+      // enterable: true,
+      // extraCssText: "max-height: 300px; overflow: auto;",
     },
     legend: {
       type: "scroll",
@@ -146,7 +155,7 @@ function getOption() {
       left: 0,
       itemWidth: 12,
       textStyle: {
-        color: props.theme === "dark" ? "#fff" : "#333",
+        color: props.config.theme === "dark" ? "#fff" : "#333",
       },
     },
     grid: {
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index f456a96a..298e2af3 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -27,7 +27,7 @@ const props = defineProps({
   },
   type: { type: String, default: "" },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  theme: { type: String, default: "dark" },
+  theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
 });
 /*global Nullable */