feat:explore添加unit配置

2020-04-28 19:23:48 +08:00
parent 78c30487a5
commit d6fbf428f0
4 changed files with 86 additions and 17 deletions
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ 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>
--- 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>
--- 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,
--- 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,9 +94,9 @@

        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)
@@ -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();