feat:新功能

1 tooltip颜色随机产生
fix：修改问题
1 x轴时间优化显示
2 面积图，透明度调整为0.3
3 点击1个legend，剩余的tooltip不对
4 新增chart：panel显示当前页面的panel，对齐输入框，chart name名字修改
5 chart错误信息参考grafana修改（进行中）

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="warning" unicode="&#58928;" d="M575.667042 768.018164c0 35.051307-28.199249 63.502289-63.147202 63.940264-0.173962 0.008186-0.349971 0.020466-0.51984 0.020466-0.036839 0-0.076748-0.004093-0.11461-0.004093-0.060375 0-0.118704 0.004093-0.179079 0.004093-35.32453 0-63.960731-28.636201-63.960731-63.96073 0-2.503007 0.159636-4.968152 0.438999-7.396458l31.835056-536.268729c0-17.662265 14.3181-31.980365 31.980365-31.980366 17.662265 0 31.980365 14.3181 31.980365 31.980366l31.262005 536.385386c0.271176 2.390443 0.424672 4.816702 0.424672 7.279801zM511.706311 64.45115m-63.960731 0a63.960731 63.960731 0 1 1 127.921462 0 63.960731 63.960731 0 1 1-127.921462 0Z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="push-pin-line" unicode="&#59217;" d="M768 768v-85.333333h-42.666667v-256l85.333334-128v-85.333334h-256v-298.666666h-85.333334v298.666666H213.333333v85.333334l85.333334 128V682.666667H256V768h512zM384 682.666667v-281.856L315.904 298.666667h392.192L640 400.810667V682.666667H384z"  horiz-adv-x="1024" />
 
     

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

@@ -597,15 +597,16 @@ export default {
                           smooth:true,  //曲线变平滑
                           data: [],
                           type:chartInfo.type,
+                        },
                           //visible: true,
                           //threshold: null,
-                        },
                         metric_name: '',
                       };
+
                       if(chartInfo.type === 'stackArea'){
                         seriesItem.theData.type='line';
                         seriesItem.theData.stack=chartInfo.title;
-                        seriesItem.theData.areaStyle={};
+                        seriesItem.theData.areaStyle={"opacity": 0.3};
                       }
                       // 图表中每条线的名字,后半部分
                       let host = '';//up,

nezha-fronted/src/components/charts/chartPreview.vue

@@ -95,7 +95,7 @@
   import bus from '../../libs/bus';
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
-  //import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
 
   export default {
     name: 'chartPreview',
@@ -405,7 +405,7 @@ console.log('=======',this.chart);
                         if(chartItem.type === 'stackArea'){
                           seriesItem.theData.type='line';
                           seriesItem.theData.stack=chartItem.title;
-                          seriesItem.theData.areaStyle={};
+                          seriesItem.theData.areaStyle={"opacity": 0.3};
                         }
                         // 图表中每条线的名字,后半部分
                         let host = '';//up,
@@ -588,6 +588,15 @@ console.log('=======',this.chart);
       // chartSite用于区分是全屏显示还是局部显示
       initChart(chartInfo, dataArg, ele,legend) {
         const self = this;
+        let minTime = null;
+        let maxTime = null
+        if(dataArg.length>0 && dataArg[0].data
+          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
+          let len = dataArg[0].data.length-1;
+          minTime = dataArg[0].data[0][0];
+          maxTime = dataArg[0].data[len][0];
+          //console.log('time==========',minTime,maxTime)
+        }
         this.chartType = ''; // 图表类型
         if ( chartInfo.type === 4) {//line,bar
           this.chartType = 'line';
@@ -670,7 +679,8 @@ console.log('=======',this.chart);
                 //let tip=legend.find((element)=>{
                   //return element.name == item.seriesName;
                 //});
-                let tip=legend[i];
+                let tip=legend[item.seriesIndex];
+                let color = self.bgColorList[item.seriesIndex];
                 if(i===0){
                   let t_date = new Date(item.data[0]);
                   str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -682,7 +692,7 @@ console.log('=======',this.chart);
                   val = Number(item.data[1]);
                 }
                 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>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
+                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: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
                 str += `<div style="padding-left: 10px;">`;
                 str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
                 str += `</div>`;
@@ -774,9 +784,27 @@ console.log('=======',this.chart);
               intervale: 0,
               rotate: 0,
               formatter: function (value) {
-                var t_date = new Date(value);
+                value = bus.computeTimezone(value);
-                return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+                let t_date = new Date(value);
-                  + [t_date.getHours(), t_date.getMinutes()].join(':');
+                let hour = t_date.getHours();
+                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
+                let minute = t_date.getMinutes();
+                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
+                if(minTime!==null && maxTime!==null){
+                  let diffSec = (maxTime-minTime)/1000;
+                  let secOneDay = 24*60*60;//1天的秒数
+                  let secOneMonth = secOneDay*30;//30天的秒数
+                  if(diffSec<=secOneDay) {//同一天
+                    return [hour,minute ].join(':');
+                  }else if(diffSec<secOneMonth){//大于1天，小于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
+                  }else {//大于等于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
+                  }
+                }else {
+                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
+                    + [hour, minute].join(':');
+                }
               }
             },
             axisPointer: {//y轴上显示指针对应的值
@@ -865,7 +893,7 @@ console.log('=======',this.chart);
       },
       // 设置数据
       setData(chartItem, seriesItem,legend) {
-          //this.setColor(legend.length);
+          this.setColor(legend.length);
           this.legend = legend;
           //this.data = chartItem;
           //this.seriesItem = seriesItem;
@@ -987,7 +1015,7 @@ console.log('=======',this.chart);
                       if(this.chart.type === 'stackArea'){
                         seriesItem.theData.type='line';
                         seriesItem.theData.stack=this.chart.title;
-                        seriesItem.theData.areaStyle={};
+                        seriesItem.theData.areaStyle={"opacity": 0.3};
                       }
                       // 图表中每条线的名字,后半部分
                       // let host = `${queryItem.metric.__name__}{`;//up,

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

@@ -112,6 +112,49 @@
      text-align: center;
      width: 100%;
      line-height: 28px;
+    .panel-info-corner {
+      color: #767980;
+      cursor: pointer;
+      position: absolute;
+      display: none;
+      left: 0;
+      width: 28px;
+      height: 28px;
+      z-index: 2;
+      top: 0;
+    }
+    .panel-info-corner--error {
+      display: block;
+      color: #fff;
+    }
+    .panel-info-corner .fa {
+      position: relative;
+      top: -6px;
+      left: -6px;
+      font-size: 75%;
+      z-index: 3;
+    }
+    .fa {
+      display: inline-block;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .panel-info-corner--error .panel-info-corner-inner {
+      border-left: 28px solid #e02f44;
+      border-right: none;
+      border-bottom: 28px solid rgba(0,0,0,0);
+    }
+    .panel-info-corner-inner {
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+    .chart-error-popper{
+      background-color:#e02f44;
+    }
     .nz-chart-top{
       width:100%;
     }

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

@@ -24,7 +24,18 @@
     </div>-->
 
     <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
-
+      <el-popover
+        v-if="isError"
+        placement="top-start"
+        width="200"
+        popper-class="chart-error-popper"
+        trigger="hover"
+        content="。。">
+        <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+          <i class="nz-icon nz-icon-warning fa"></i>
+          <span class="panel-info-corner-inner"></span>
+      </span>
+      </el-popover>
       <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
         <el-dropdown-menu style="display: none"></el-dropdown-menu>
         <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
@@ -121,7 +132,7 @@
   import bus from '../../libs/bus';
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
-  //import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
 
   export default {
     name: 'lineChartBlock',
@@ -158,6 +169,7 @@
         seriesItem: [], // 保存信息
         seriesItemScreen:[],
         images: '',
+        isError:false,
         toolbox: false,
         items: {
           metric_name: [], // 每条数据列名称
@@ -635,8 +647,14 @@
         if ( chartInfo.type === 4) {//line,bar
           this.chartType = 'line';
         }
-        //let chartId = '';
+        let minTime = null;
-
+        let maxTime = null
+        if(dataArg.length>0 && dataArg[0].data
+          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
+          let len = dataArg[0].data.length-1;
+          minTime = dataArg[0].data[0][0];
+          maxTime = dataArg[0].data[len][0];
+        }
         if (chartSite === 'local') {
           this.echartStore = echarts.init(ele);
           //chartId='lineChartArea';
@@ -751,8 +769,8 @@
                 //alert('legend====='+JSON.stringify(element))
                 //return element.name == item.seriesName;
                 //});
-                let tip=legend[i];
+                let tip=legend[item.seriesIndex];
-                let color = self.bgColorList[i];
+                let color = self.bgColorList[item.seriesIndex];
                 if(i===0){
                   let value=bus.computeTimezone(item.data[0]);
                   let t_date = new Date(value);
@@ -865,9 +883,27 @@
               rotate: 0,
               formatter: function (value) {
                 value = bus.computeTimezone(value);
-                var t_date = new Date(value);
+                let t_date = new Date(value);
-                return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+                let hour = t_date.getHours();
-                  + [t_date.getHours(), t_date.getMinutes()].join(':');
+                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
+                let minute = t_date.getMinutes();
+                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
+                if(minTime!==null && maxTime!==null){
+                  let diffSec = (maxTime-minTime)/1000;
+                  let secOneDay = 24*60*60;//1天的秒数
+                  let secOneMonth = secOneDay*30;//30天的秒数
+                  if(diffSec<=secOneDay) {//同一天
+                    return [hour,minute ].join(':');
+                  }else if(diffSec<secOneMonth){//大于1天，小于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
+                  }else {//大于等于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
+                  }
+                }else {
+                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
+                    + [hour, minute].join(':');
+                }
+
               }
             },
             axisPointer: {//y轴上显示指针对应的值
@@ -1125,12 +1161,12 @@
       setColor(colorNum){
         this.bgColorList = [];
         for(let i=0;i<colorNum;i++) {
-          //this.bgColorList.push(randomcolor())
+          this.bgColorList.push(randomcolor())
         }
       },
       // 设置数据, filter区分
       setData(chartItem, seriesItem, panelId, filter,legend,area) {
-        //this.setColor(legend.length);
+        this.setColor(legend.length);
         if(area==='showFullScreen'){//全屏按时间查询
           /*
           this.legend = legend;
@@ -1319,7 +1355,7 @@
                       if(this.data.type === 'stackArea'){
                         seriesItem.theData.type='line';
                         seriesItem.theData.stack=this.data.title;
-                        seriesItem.theData.areaStyle={};
+                        seriesItem.theData.areaStyle={"opacity": 0.3};
                       }
                       // 图表中每条线的名字,后半部分
                       // let host = `${queryItem.metric.__name__}{`;//up,

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

@@ -114,7 +114,7 @@ const en = {
       editChartTitle: 'Edit',//"编辑图表"
       chartForm:{
         chartId:"ID",
-        chartName:"Chart n",
+        chartName:"Chart Name",
         type:"Type",
         unit:"Unit",
         url:"URL",

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

@@ -117,7 +117,7 @@
               <el-col :span="2" >
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
               </el-col>
-              <el-col :span="10" style="margin-left:-7px;">
+              <el-col :span="10" >
                 <div class="grid-content ">
                   <el-form-item prop="type">
                     <el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
@@ -128,7 +128,7 @@
                   </el-form-item>
                 </div>
               </el-col>
-              <el-col v-show="!isUrl" :span="2" style="margin-left: 7px">
+              <el-col v-show="!isUrl" :span="2" >
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
               </el-col>
               <el-col v-show="!isUrl" :span="10">
@@ -148,7 +148,7 @@
               <el-col :span="2" >
                 <div class="label-center"  >{{$t('dashboard.panel.chartForm.width')}}</div>
               </el-col>
-              <el-col :span="10" style="margin-left:0px;">
+              <el-col :span="10" >
                 <div class="grid-content ">
                   <el-form-item prop="span">
                     <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
@@ -162,7 +162,7 @@
               <el-col :span="2" >
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
               </el-col>
-              <el-col :span="10" style="margin-left: 0px;">
+              <el-col :span="10" >
                 <div class="grid-content" >
                   <el-form-item prop="height">
                     <!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
@@ -238,7 +238,8 @@
   export default {
     name: "chartBox",
     props: {
-      panelData: Array
+      panelData: Array,
+      showPanel:{}
     },
     data() {
       return {
@@ -325,6 +326,7 @@
     },
     methods: {
       show(show) {
+        this.panelName2 = this.showPanel.name;
         this.rightBox.show = show;
         this.isUrl = false;
       },

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

@@ -96,7 +96,7 @@
     </left-menu>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
-    <chart-box ref="addChartModal" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+    <chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
   </div>
 </template>