diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 96daf696e..09af8ca28 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -261,6 +261,11 @@ export default { }, metric_name: '', }; + if(chartInfo.type === 'stackArea'){ + seriesItem.theData.type='line'; + seriesItem.theData.stack='stack' + seriesItem.theData.areaStyle={}; + } // 图表中每条线的名字,后半部分 let host = '';//up, if(queryItem.metric.__name__){ @@ -332,7 +337,7 @@ export default { } } }); - if(this.$refs.editChart[index]) { + if(this.$refs.editChart&&this.$refs.editChart[index]) { if (chartItem.type === 'table') {//表格 if (filterType === 'showFullScreen') {//table的全屏查询 this.$refs.editChart[index].setData(chartItem, tableData, @@ -341,7 +346,7 @@ export default { this.$refs.editChart[index].setData(chartItem, tableData, this.filter.panelId, this.filter); } - } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) { + } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) { if (series.length && chartItem.type === 4) {//曲线汇总 //series.push(sumData);//后续需要 } @@ -365,7 +370,7 @@ export default { this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, this.filter); } - } else if (type === 'line' || type === 'bar' || chartItem.type === 4) { + } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) { if (filterType === 'showFullScreen') {//table的全屏查询 this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, this.filter, filterType); diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js new file mode 100644 index 000000000..ea4d344aa --- /dev/null +++ b/nezha-fronted/src/components/charts/chartDataFormat.js @@ -0,0 +1,350 @@ +function none(value,index){ + return value; +} +function short(value,index){ + return asciiCompute(value,1000,['','K','Mil','Bil'],0) +} +function percent01(value,index){ + return `${value}%`; +} +function percent02(value,index){ + return `${value * 100 }%`; +} +function localFormat(value,index){ + let num = (value || 0).toString(); + let result = ''; + while (num.length > 3) { + result = ',' + num.slice(-3) + result; + num = num.slice(0, num.length - 3); + } + if (num) { result = num + result; } + return result; +} +function bits(value,index){ + return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],0) +} +function bytes(value,index){ + return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],0) +} +function kilobytes(value,index){ + return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],0) +} +function megabytes(value,index){ + return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],0) +} +function gigabytes(value,index){ + return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],0) +} +function terabytes(value,index){ + return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],0) +} +function petabytes(value,index){ + return asciiCompute(value,1024,['PB','EB','ZB','YB'],0) +} +function packetsSec(value,index){ + return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],1) +} +function bitsSec(value,index){ + return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],1) +} +function bytesSec(value,index){ + return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1) +} +function kilobytesSec(value,index){ + return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1) +} +function kilobitsSec(value,index){ + return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1) +} +function megabytesSec(value,index){ + return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1) +} +function megabitsSec(value,index){ + return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1) +} +function gigabytesSec(value,index){ + return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],1) +} +function gigabitsSec(value,index){ + return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1) +} +function terabytesSec(value,index){ + return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],1) +} +function terabitsSec(value,index){ + return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],1) +} +function petabytesSec(value,index){ + return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],1) +} +function petabitsSec(value,index){ + return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],1) +} +function Hertz(value,index){ + return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],1); +} +function nanoseconds(value,index){ + +} +/* +* 一般数值格式化方法 +* num: 需要格式化的值 +* ascii:进制，比如数据为1024 +* units：单位列表 +* dot：保留的小数位， +* unitIndex：不需要传递，用于递归获取units中的单位 +* */ +function asciiCompute(num,ascii,units,dot=2,unitIndex=0){ + num = parseFloat(num) + let quotient=num / ascii; + if(unitIndex <= units.length-1){ + if(quotient <1 ){ //不足以进位 + let toFixed=parseFloat(num.toFixed(dot)); + if(toFixed == 0){ + return `${num}${units[unitIndex]}` + }else{ + return `${num.toFixed(dot)}${units[unitIndex]}`; + } + }else if(quotient >= 1 && quotient <10){ //可以进位，但是又不足以更进一位 + if(unitIndex >= units.length-1){ + unitIndex++; + return asciiCompute(num,ascii,units,dot,unitIndex); + }else{ + unitIndex++; + return `${quotient.toFixed(dot)}${units[unitIndex]}`; + } + } else{ //可以更进一位 + if(unitIndex >= units.length-1){ + unitIndex++; + return asciiCompute(num,ascii,units,dot,unitIndex); + }else{ + unitIndex++; + num=quotient; + return asciiCompute(num,ascii,units,dot,unitIndex); + } + } + }else{ + return `${num.toFixed(2)}${units[units.length-1]}`; + } + +} +/* +* 时间格式化方法 +* */ + +//unit转化配置信息 +/* +* value:传递给数据库的值 +* label：下拉选显示的名字 +* compute：用于格式化计算的方法，返回一个string类型的串 +* */ +let unitOptions=[ + {//Misc start + value:'Misc', + label:'Misc', + children:[ + { + value:1, + compute:none, + label:'none' + }, + { + value:2, + compute:short, + label:'short' + }, + { + value:3, + compute:percent01, + label:'percent(0-100)' + }, + { + value:4, + compute:percent02, + label:'percent(0.0-0.1)' + }, + { + value:5, + compute:localFormat, + label:'local format' + } + ] + },//Misc end + {//Data start + value:'Data', + label:'Data', + children: [ + { + value:6, + compute:bits, + label:'bits' + }, + { + value:7, + compute:bytes, + label:'bytes' + }, + { + value:8, + compute:kilobytes, + label:'kilobytes' + }, + { + value:9, + compute:megabytes, + label:'megabytes' + }, + { + value:10, + compute:gigabytes, + label:'gigabytes' + }, + { + value:11, + compute:terabytes, + label:'terabytes' + }, + { + value:12, + compute:petabytes, + label:'petabytes' + } + ] + },//Data end + {//DataRate start + value:'DataRate', + label:'DataRate', + children: [ + { + value:13, + compute:packetsSec, + label:'packets/sec' + }, + { + value:14, + compute:bitsSec, + label:'bits/sec' + }, + { + value:15, + compute:bytesSec, + label:'bytes/sec' + }, + { + value:16, + compute:kilobytesSec, + label:'kilobytes/sec' + }, + { + value:17, + compute:kilobitsSec, + label:'kilobits/sec' + }, + { + value:18, + compute:megabytesSec, + label:'megabytes/sec' + }, + { + value:19, + compute:megabitsSec, + label:'megabits/sec' + }, + { + value:20, + compute:gigabytesSec, + label:'gigabytes/sec' + }, + { + value:21, + compute:gigabitsSec, + label:'gigabits/sec' + }, + { + value:22, + compute:terabytesSec, + label:'terabytes/sec' + }, + { + value:23, + compute:terabitsSec, + label:'terabits/sec' + }, + { + value:24, + compute:petabytesSec, + label:'petabytes/sec' + }, + { + value:25, + compute:petabitsSec, + label:'petabits/sec' + } + ] + },//DataRate end + {//Time start + value:'Time', + label: 'Time', + children: [ + { + value:26, + compute:Hertz, + label:'Hertz (1/s)' + }, + { + value:27, + compute:nanoseconds, + label:'nanoseconds (ns)' + }, + { + value:28, + compute:null, + label:'microseconds (us)' + }, + { + value:29, + compute:null, + label:'milliseconds (ms)' + }, + { + value:30, + compute:null, + label:'seconds (s)' + }, + { + value:31, + compute:null, + label:'minutes (m)' + }, + { + value:32, + compute:null, + label:'hours (h)' + }, + { + value:33, + compute:null, + label:'days (d)' + }, + ] + }//Time end +] +let units=[]; +window.onload=function(){ + unitOptions.forEach((item,index)=>{ + item.children.forEach((n,i)=>{ + units.push(n); + }) + }) + console.log(units) +} + +export default { + unitOptions:function(){ + return unitOptions; + }, + getUnit:function(index){ + return units[index-1]; + }, + short, +} diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index b77eb6e2d..b1cc9be9a 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -89,6 +89,7 @@ import echarts from 'echarts'; import bus from '../../libs/bus'; import loading from "../common/loading"; + import chartDataFormat from './chartDataFormat' export default { name: 'lineChartBlock', @@ -498,8 +499,21 @@ } }, formatter:function(params){ + // let maxWidth=0; + let avgWidth=0; + let sumWidth=0; + params.forEach((item, i) => { + let tip=legend.find((element)=>{ + return element.name == item.seriesName; + }) + + let curLength=(tip.alias?tip.alias:tip.name).length; + // maxWidth=maxWidth>curLength?maxWidth:curLength; + sumWidth+=curLength; + }) + avgWidth=sumWidth/params.length; //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; - let str = `
`; + let str = `
`; params.forEach((item, i) => { let tip=legend.find((element)=>{ return element.name == item.seriesName; @@ -543,9 +557,9 @@ str +=seriesNameTmp+":"+val; */ str += `
`; - str +=`${tip.alias?tip.alias:tip.name}: `; str +=`
`; + // str +=`
`; str += `
`; str +=val; str +=`
`; @@ -670,35 +684,10 @@ show:true }, axisLabel: { - formatter: function(num,index) { - if (num >= 1000) { - const kbNum = num / 1000; - if (kbNum >= 1000) { - const mbNum = kbNum / 1000; - if (mbNum >= 1000) { - const gbNum = mbNum / 1000; - /* - if (gbNum > 1000) { - const tbNum = gbNum / 1000; - if (tbNum > 1000) { - const pbNum = tbNum / 1000; - return `${pbNum.toFixed(2)}PB`; - } - return `${tbNum.toFixed(2)}TB`; - }*/ - return `${parseFloat(gbNum.toFixed(2))}B`; - } - return `${parseFloat(mbNum.toFixed(2))}M`; - } - return `${parseFloat(kbNum.toFixed(2))}K`; - }else { - let rlt = parseFloat(num.toFixed(2)); - if(rlt===0){ - return num; - }else { - return rlt; - } - } + formatter: function(value,index){ + let chartUnit=chartInfo.unit; + let unit=chartDataFormat.getUnit(chartUnit); + return unit.compute(value,index); }, }, //boundaryGap:[0,0.2] @@ -1401,7 +1390,11 @@ }, 500) */ }, - beforeDestroy() {}, + beforeDestroy() { + if(this.echartStore){ + this.echartStore.clear(); + } + }, }; diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index c6b2a0ffa..c70bd4841 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -88,6 +88,7 @@ const en = { chartId:"ID", chartName:"Chart Name", type:"Type", + unit:"Unit", legend:'Legend', 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.', typeVal:{ @@ -99,6 +100,9 @@ const en = { }, table:{ label:'Table' //"表格" + }, + stackArea:{ + label:"Stack Area" } }, width:'Width', //"宽" @@ -261,9 +265,11 @@ const en = { protocol:"Protocol", sshProtocol:"SSH", telnetProtocol:"Telnet", - userTip:"UserTip", - passwordTip:"PasswordTip", - reloginPasswordTip:"Relogin", + userTip:"UserTip",//用户名提示 + passwordTip:"PasswordTip",//密码提示 + reloginPasswordTip:"Relogin",//密码提示 + userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in', + reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically', account:'User name',//'用户名' port:'Port',//'端口' upload:'Upload',//'上传' @@ -488,7 +494,11 @@ const en = { value: 'Value', promExpr: 'Please input expression', dialogTitle:'View', //endpoint 弹出dialog 标题, - hideSameLabels:'Hide same labels' + hideSameLabels:'Hide same labels', + stateInfo_230009:'promserver available', + stateInfo_230010:'promserver can be used', + stateInfo_230011:'promserver can not beused ', + }, metrics: { metrics: 'Metrics',//"指标" diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue index 3c9353fd5..8a27b369d 100644 --- a/nezha-fronted/src/components/page/asset/accountConfig.vue +++ b/nezha-fronted/src/components/page/asset/accountConfig.vue @@ -51,12 +51,18 @@
login option
- + + + @@ -210,4 +216,11 @@ export default { vertical-align: middle; margin-bottom: 18px; } + .auto-login-tip{ + font-size: 12px; + margin-bottom: 18px; + color: #b4b4b4; + min-height: 18px; + + } diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue index 28120c9f8..999f2c44f 100644 --- a/nezha-fronted/src/components/page/asset/asset.vue +++ b/nezha-fronted/src/components/page/asset/asset.vue @@ -649,6 +649,7 @@ if (data === 'showAdd') { //this.addUnitShow = true; this.editUnitShow = true; + this.$refs['assetEditUnit'].accountSwitch=false; this.$refs['assetEditUnit'].getAssetData(''); this.$refs['assetEditUnit'].resetAsset(); } diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index fe8491bc2..474be4e28 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -152,6 +152,22 @@ + + +
{{$t('dashboard.panel.chartForm.unit')}}
+ + + + + + +
{{$t('dashboard.panel.chartForm.metric')}}
@@ -193,7 +209,7 @@