From d6fbf428f01f82828b3ede20cee32eae6d3000d7 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Tue, 28 Apr 2020 19:23:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:explore=E6=B7=BB=E5=8A=A0unit=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/chartUnit.vue       | 52 +++++++++++++++++++
 .../src/components/common/pickTime.vue        | 16 ++++++
 .../page/dashboard/explore/explore.vue        | 23 ++++----
 .../page/dashboard/overview/chart.vue         | 12 ++---
 4 files changed, 86 insertions(+), 17 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/chartUnit.vue

diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
new file mode 100644
index 000000000..a3381306b
--- /dev/null
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -0,0 +1,52 @@
+<template>
+    <el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
+                 :options="chartUnits"
+                 class="chart-unit"
+                 :props="{ expandTrigger: 'click' ,emitPath:false}"
+                 :show-all-levels="false"
+                 v-model="unit"
+                 @change="unitSelected"
+    >
+    </el-cascader>
+</template>
+
+<script>
+  import chartDataFormat from "../charts/chartDataFormat";
+  export default {
+    name: "chartUnit",
+    model:{
+      event:'change',
+      prop:'postUnit'
+    },
+    props:{
+      postUnit:{}
+    },
+    data(){
+      return{
+        chartUnits:chartDataFormat.unitOptions(),
+        visibel:false,
+        unit:0,
+      }
+    },
+    created() {
+      this.unit=this.postUnit;
+    },
+    methods:{
+      unitSelected:function(value){
+        this.unit=value;
+        this.$emit('change',this.unit);
+      },
+    }
+  }
+</script>
+
+<style >
+  .chart-unit{
+    width: 100px;
+    margin: 0 20px 0 0;
+  }
+  .unit-pop-class .el-cascader-panel{
+    height: 200px;
+    background-color: #FFF;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 3538c1c4e..2a129dc96 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="interval-refresh ">
     <time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
+    <chart-unit v-model="unit" ></chart-unit>
       <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
         <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
           <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
@@ -23,10 +24,12 @@
 <script>
   import bus from "../../libs/bus";
   import timePicker from "./timePicker";
+  import chartUnit from "./chartUnit";
   export default {
     name: "intervalRefresh",
     components:{
       'time-picker':timePicker,
+      'chart-unit':chartUnit,
     },
     model:{
       event:'change',
@@ -44,6 +47,10 @@
       useRefresh:{
         type:Boolean,
         default:true,
+      },
+      useChartUnit:{
+        type:Boolean,
+        default:true,
       }
     },
     data(){
@@ -71,6 +78,7 @@
           name: '30m',
         }],
         interval: -1,
+        unit:2,
       }
     },
     created(){
@@ -116,6 +124,14 @@
         this.$emit('change',this.searchTime)
         this.refreshDataFunc();
       },
+    },
+    watch:{
+      unit:{
+        immediate:true,
+        handler(n,o){
+          this.$emit('unitChange',n);
+        }
+      }
     }
   }
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index a06b4027b..a86e2c80b 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -14,7 +14,7 @@
             <!-- 顶部工具栏 -->
             <div class="top-tools" style="z-index: 1">
               <div class="top-tool-main-right">
-                <pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
+                <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
                   <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
                 </pick-time>
                 <button :disabled="saveDisabled" type="button" @click="saveChart"
@@ -44,7 +44,7 @@
                    :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
                 <div class="view-title" @click="changeChartVisible" style="float: left"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
                 <div class="chart-room">
-                  <chart ref="exploreChart"></chart>
+                  <chart ref="exploreChart" :unit="chartUnit"></chart>
                 </div>
               </div>
               <div class="table-view right-margin" v-show="!showIntroduce"
@@ -199,6 +199,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
   import chart from "../overview/chart";
   import axios from 'axios';
   import chartBox from "../../../page/dashboard/chartBox";
+  import {getUUID} from "../../../common/js/common";
 
   export default {
     name: "explore",
@@ -233,11 +234,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         tableLoading: false,
         saveDisabled: true,
         panelData: [],
+        chartUnit:0,
       }
     },
     created() {
       this.getPanelData();
-      this.promqlKeys.push(this.guid());
+      this.promqlKeys.push(getUUID());
     },
     methods: {
       pageNo(val) {
@@ -251,6 +253,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
       filterShowData(source, pageObj) {
         return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
       },
+      chartUnitChange:function(unit){
+        this.chartUnit=unit;
+        this.$nextTick(()=>{
+          this.queryChartData();
+        })
+      },
       queryChartData: function () {
         this.$refs.exploreChart.startLoading();
         setTimeout(() => {
@@ -391,7 +399,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
       },
       addExpression: function (index) {
         this.expressions.splice(index + 1, 0, '');
-        this.promqlKeys.splice(index + 1, 0, this.guid());
+        this.promqlKeys.splice(index + 1, 0, getUUID());
         this.promqlCount++;
       },
       removeExpression: function (index) {
@@ -449,13 +457,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
           }
         });
       },
-      guid() {
-        function S4() {
-          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-        }
-
-        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index d031b4998..3c262d99b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -31,6 +31,7 @@
     },
     props:{
       name: {type: String,default:'chart'},
+      unit:{type:Number,default:5},
       chartTitle:{type:String},
       showToolbox:{type:Boolean,default:true},
       chartType:{type:String,default:'line'},
@@ -93,12 +94,12 @@
 
         if(this.chartType == 'line'){
           if(this.yAxisFormatter){
-            this.modifyOption('yAxis','formatter',this.yAxisFormatter)
+            this.option.yAxis.axisLabel.formatter=this.yAxisFormatter;
           }else{
-            this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
+            this.option.yAxis.axisLabel.formatter=this.defaultYAxisFormatter
           }
         }
-        //console.log(this.option)
+        // console.log(this.option)
         this.$set(this.option,'series',this.series);
 
         this.chart.clear();
@@ -256,7 +257,7 @@
           str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
           str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias?alias:item.seriesName}:  </div>`;
           str += `<div style="padding-left: 10px;">`;
-          str += chartDataFormat.getUnit(5).compute(val,null,2);
+          str += chartDataFormat.getUnit(this.unit).compute(val,null,2);
           str += `</div>`;
           str += `</div>`;
         });
@@ -274,7 +275,7 @@
         return alias;
       },
       defaultYAxisFormatter:function(value,index){
-        let unit=chartDataFormat.getUnit(5);
+        let unit=chartDataFormat.getUnit(this.unit);
         return unit.compute(value,index);
       },
       setRandomColors:function(num){//当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
@@ -284,7 +285,6 @@
         }
         this.colors=Object.assign([],colors)
         this.$set(this.option,'color',colors)
-        console.log(this.option)
       },
       startLoading:function(){
         this.$refs.loading.startLoading();