perf:chart 新增 threshold

nezha-fronted/package-lock.json

@@ -3843,11 +3843,11 @@
       }
     },
     "echarts": {
-      "version": "4.6.0",
+      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
-      "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
+      "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
       "requires": {
-        "zrender": "4.2.0"
+        "zrender": "4.3.1"
       }
     },
     "ee-first": {
@@ -13174,9 +13174,9 @@
       }
     },
     "zrender": {
-      "version": "4.2.0",
+      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
-      "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
+      "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
     }
   }
 }

nezha-fronted/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "d3": "^5.16.0",
-    "echarts": "^4.6.0",
+    "echarts": "^4.7.0",
     "element-ui": "^2.13.0",
     "file-saver": "^2.0.2",
     "node-sass": "^4.13.1",

nezha-fronted/src/components/charts/chart-list.vue

@@ -149,6 +149,7 @@ import chartUrl from './chart-url';
 import chartSingleStat from './chart-single-stat';
 import chartAssetInfo from './chart-asset-info'
 import draggable from 'vuedraggable'
+import chartDataFormat from "./chartDataFormat";
 
 export default {
   name: 'chartList',
@@ -921,6 +922,26 @@ export default {
                             seriesItem.theData.stack = chartInfo.title;
                             seriesItem.theData.areaStyle = {"opacity": 0.3};
                           }
+                          if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+                            seriesItem.theData.markLine={
+                              silent: true,
+                              symbol:['circle','circle'],
+                              label:{
+                                distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+                                formatter:function(params){
+                                  return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+                                }
+                              },
+                              lineStyle:{
+                                color:'#d64f40',
+                                width:2,
+                                type:'dotted'
+                              },
+                              data: [{
+                                yAxis: Number(chartInfo.param.threshold)
+                              }, ]
+                            }
+                          }
                           // 图表中每条线的名字,后半部分
                           let host = '';//up,
                           if (queryItem.metric.__name__) {
@@ -1096,6 +1117,11 @@ export default {
         }
       }
     },
+    computeDistance:function(value){
+      let temp=value+'';
+      let length=temp.length *12 -20;
+      return Number('-'+length)
+    },
     modelStaticData(chartInfo, filterType) {
       let series = [];
       let seriesItem = {

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -1376,6 +1376,27 @@
                         seriesItem.theData.stack=this.data.title;
                         seriesItem.theData.areaStyle={"opacity": 0.3};
                       }
+
+                      if((this.data.type === 'line'||this.data.type === 'stackArea'||this.data.type === 'bar')&& this.data.param && this.data.param.threshold){
+                        seriesItem.theData.markLine={
+                          silent: true,
+                          symbol:['circle','circle'],
+                          label:{
+                            distance:this.computeDistance(chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(this.data.param.threshold)),
+                            formatter:function(params){
+                              return chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(params.value)
+                            }
+                          },
+                          lineStyle:{
+                            width:2,
+                            type:'dotted'
+                          },
+                          data: [{
+                            yAxis: Number(this.data.param.threshold)
+                          }, ]
+                        }
+                      }
+
                       // 图表中每条线的名字,后半部分
                       // let host = `${queryItem.metric.__name__}{`;//up,
                       let host = '';//up,
@@ -1462,6 +1483,11 @@
           });
         });
       },
+      computeDistance:function(value){
+        let temp=value+'';
+        let length=temp.length *12 -20;
+        return Number('-'+length)
+      },
       showLoad(chartItem) {
         //设置高度
         this.$nextTick(() => {

nezha-fronted/src/components/common/language/cn.js

@@ -116,6 +116,7 @@ const cn = {
         url: "URL",
         statistics:'Statistics',
         sync: '同步到设备',
+        threshold:'阈值',
         typeVal: {
           line: {
             label: "曲线图"

nezha-fronted/src/components/common/language/en.js

@@ -127,6 +127,7 @@ const en = {
         statistics:'Statistics',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
         sync: 'Sync to assets',
+        threshold:'Threshold',
         typeVal:{
           line:{
             label:'Line Chart' //"曲线图"

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -183,12 +183,18 @@
               </el-col>
             </el-row>
 
-            <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
-              <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
-            </el-form-item>
             <el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">
               <el-switch class="exporter-switch" v-model="chart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
             </el-form-item>
+
+            <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
+              <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
+            </el-form-item>
+
+            <el-form-item v-if="chart.type == 'line' || chart.type == 'bar' || chart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" >
+              <el-input size="small" type="input"  v-model="chart.param.threshold"></el-input>
+            </el-form-item>
+
             <div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
             <div v-if="!isUrl" class="line-100"></div>
 
@@ -286,7 +292,8 @@
           height:'400',
           unit:2,
           param:{
-            url:''
+            url:'',
+            threshold:'',
           },
           elements:{
             id: '',
@@ -660,11 +667,16 @@
               type: this.chart.type,
               unit:this.chart.unit,
               param:{
-                statistics:target.statistics
+
               },
               sync: this.chart.sync
             };
-
+            if(this.chart.type === 'singleStat'){
+              params.param.statistics=target.statistics;
+            }
+            if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
+              params.param.threshold=this.chart.param.threshold;
+            }
             //生成指标数组
             const elements = [];
             this.elementTarget.forEach((elem,index) => {
@@ -877,6 +889,9 @@
             });
           });
         }else{
+          if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
+            this.chart.param.threshold=data.param.threshold;
+          }
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
           // 指标
@@ -954,6 +969,9 @@
           }*/
         }else {
           this.setIsOtherChart();
+          if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
+            this.chart.param={threshold:''}
+          }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
               item.setNotSingleStat();