diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js index be919df85..a66c29295 100644 --- a/nezha-fronted/src/components/charts/chartDataFormat.js +++ b/nezha-fronted/src/components/charts/chartDataFormat.js @@ -10,11 +10,12 @@ function none(value, index){ } function short(value,index,type=1,dot){ if(type == 1){ - return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],0) + return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],0) }else if(type == -1){ - return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot) + console.log(value); + return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot) }else{ - return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],2) + return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],2) } } @@ -316,7 +317,7 @@ function days(value,index,type=1,dot){ function asciiCompute(num,ascii,units,dot=2){ num=Number(num) let carry=0; - if(num > 0){ + if(num > 1){ let log=Math.log(num)/Math.log(ascii) carry = parseInt(log) num = num / Math.pow(ascii,carry) @@ -446,37 +447,37 @@ let unitOptions=[ { value:6, compute:bits, - label:'bits' + label:'bits', }, { value:7, compute:bytes, - label:'bytes' + label:'bytes', }, { value:8, compute:kilobytes, - label:'kilobytes' + label:'kilobytes', }, { value:9, compute:megabytes, - label:'megabytes' + label:'megabytes', }, { value:10, compute:gigabytes, - label:'gigabytes' + label:'gigabytes', }, { value:11, compute:terabytes, - label:'terabytes' + label:'terabytes', }, { value:12, compute:petabytes, - label:'petabytes' + label:'petabytes', } ] },//Data end @@ -487,47 +488,47 @@ let unitOptions=[ { value:13, compute:packetsSec, - label:'packets/sec' + label:'packets/sec', }, { value:14, compute:bitsSec, - label:'bits/sec' + label:'bits/sec', }, { value:15, compute:bytesSec, - label:'bytes/sec' + label:'bytes/sec', }, { value:16, compute:kilobytesSec, - label:'kilobytes/sec' + label:'kilobytes/sec', }, { value:17, compute:kilobitsSec, - label:'kilobits/sec' + label:'kilobits/sec', }, { value:18, compute:megabytesSec, - label:'megabytes/sec' + label:'megabytes/sec', }, { value:19, compute:megabitsSec, - label:'megabits/sec' + label:'megabits/sec', }, { value:20, compute:gigabytesSec, - label:'gigabytes/sec' + label:'gigabytes/sec', }, { value:21, compute:gigabitsSec, - label:'gigabits/sec' + label:'gigabits/sec', }, { value:22, @@ -617,7 +618,7 @@ export default { if(units.length < 1){ unitOptions.forEach((item,index)=>{ item.children.forEach((n,i)=>{ - units.push(n); + units.push({...n,type:item.label}); }) }) } @@ -625,5 +626,79 @@ export default { }, formatData:function(value,unit){ return this.getUnit(unit).compute(value,null,2) + }, + formatDatas:function(value,type,flow='ceil'){ + let pow=0; + if(type ==='Time'){ + return value + } + + if(type==='Data' || type==='DataRate'){ + if(value>1){ + while(value>1000){ + pow++; + value=value/1000 + } + + if(flow==='ceil'){ + let length=JSON.stringify(Math.ceil(value)).length; + value=value/Math.pow(10,length-1); + return Math.ceil(value)*Math.pow(1024,pow)*Math.pow(10,length-1); + }else if(flow==='floor'){ + let length=JSON.stringify(Math.floor(value)).length; + value=value/Math.pow(10,length-1); + return Math.floor(value)*Math.pow(1024,pow)*Math.pow(10,length-1); + } + }else{ + return value + } + } + + if(type==='Misc'){ + if(value>1){ + while(value>1000){ + pow++; + value=value/1000 + } + + if(flow==='ceil'){ + let length=JSON.stringify(Math.ceil(value)).length; + value=value/Math.pow(10,length-1); + return Math.ceil(value)*Math.pow(1000,pow)*Math.pow(10,length-1); + }else if(flow==='floor'){ + let length=JSON.stringify(Math.floor(value)).length; + value=value/Math.pow(10,length-1); + return Math.floor(value)*Math.pow(1000,pow)*Math.pow(10,length-1); + } + }else{ + return value + } + } + + return value; + + }, + copies:function(value){ + switch(parseInt(value)){ + case 1: return 5; + case 2: return 2; + case 3: return 3; + case 4: return 4; + case 5: return 5; + case 6: return 3; + case 7: return 7; + case 8: return 8; + case 9: return 3; + case 10: return 5; + } + }, + Interval:function(value,copies,type){ + if(type==='Data' || type==='DataRate' || type==='Misc'){ + let interVal=value/copies; + interVal = interVal || 1; + console.log(interVal); + return interVal + } + return 1; } } diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 8486bb4c1..35d26c770 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -397,6 +397,7 @@ }, // chartSite用于区分是全屏显示还是局部显示 initChart(chartInfo, dataArg, ele, chartSite,legend) { + console.log(dataArg); this.chartInfo=chartInfo; const self = this; this.chartType = ''; // 图表类型 @@ -404,7 +405,7 @@ this.chartType = 'line'; } let minTime = null; - let maxTime = 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; @@ -435,6 +436,48 @@ }; let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e'); let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb'); + console.log(chartInfo, dataArg, chartSite,legend); + let maxValue=''; + let minValue=''; + if(chartInfo.type==='line' && chartInfo.unit){ + maxValue=dataArg[0].data[0][1]; + minValue=dataArg[0].data[0][1]; + for(let j = 0; j < dataArg.length ; j++){ + for (let i = 0; i < dataArg[j].data.length - 1; i++) { + maxValue = (maxValue < dataArg[j].data[i+1][1] ? dataArg[j].data[i+1][1] : maxValue); + minValue = (minValue > dataArg[j].data[i+1][1] ? dataArg[j].data[i+1][1] : minValue); + } + } + } + let chartUnit=chartInfo.unit?chartInfo.unit:2; + let unit=chartDataFormat.getUnit(chartUnit); + maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil'); + minValue=chartDataFormat.formatDatas(minValue,unit.type,'floor'); + let oldValue=maxValue; + console.log(maxValue,'123123'); + let dot=0; + if(maxValue==1){ + dot++; + } + if(oldValue>10){ + while(oldValue>10){ + oldValue=oldValue/10; + } + }else if(oldValue<1&&maxValue!==0){ + while(oldValue<1&&oldValue>0){ + oldValue=oldValue*10; + dot++; + } + maxValue=Math.ceil(oldValue)/Math.pow(10,dot); + dot++; + } + let copies=chartDataFormat.copies(oldValue); + console.log(oldValue,copies,maxValue) + let oldDot=2; + if(maxValue<=1){ + oldDot=dot>6?6:dot; + } + // console.log(unit.compute(maxValue),unit.compute(minValue)); var option = { title:{ show:false, @@ -532,7 +575,6 @@ formatter:function(params){ //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; let str = `
`; - //let str = `
`; let sum = 0; params.forEach((item, i) => { @@ -553,7 +595,7 @@ str += `
`; str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}
`; str += `
`; - str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); + str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,-1,oldDot); str += `
`; str += `
`; }); @@ -693,11 +735,12 @@ width: 1 } }, + // maxInterval:{}, //去掉y轴--start axisLine:{ show:false }, - minInterval: 1, + minInterval: chartDataFormat.Interval(maxValue,copies,unit.type), axisTick: { show: false, }, @@ -709,8 +752,10 @@ let chartUnit=chartInfo.unit; chartUnit=chartUnit?chartUnit:2; let unit=chartDataFormat.getUnit(chartUnit); + console.log(value); + // console.log(value,unit,unit.compute(value,index),123); //console.info(value, chartUnit, unit.compute(value,index)) - return unit.compute(value,index); + return unit.compute(value,index,-1,dot); }, }, //boundaryGap:[0,0.2] @@ -718,8 +763,10 @@ useUTC: false,//使用本地时间 series: dataArg }; + // params.series = dataArg; if (chartSite === 'local') { // 本地显示 + console.log(legend,'legend'); if(legend){ this.legendList = []; legend.forEach((item, i) => { @@ -1376,6 +1423,7 @@ this.divFirstShow = true; }, dealLegendAlias:function(legend,expression){ + console.log(legend,expression,'123123'); if(/\{\{.+\}\}/.test(expression)){ let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2); diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue index fb1d2ed57..43a7d3a7b 100644 --- a/nezha-fronted/src/components/common/header.vue +++ b/nezha-fronted/src/components/common/header.vue @@ -725,6 +725,7 @@ height: 50px; background-color: #232f3e; z-index: 1; + } .menu-create { diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue index abf8842cd..6b85fcb56 100644 --- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue +++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue @@ -13,7 +13,7 @@ Value
- {{legendFormat(item.metric,item.legend)}} + {{legendFormat(item.metric,item.legend,item1.metric)}} {{ dataFormat(item.unit,item1.value[1])}}
@@ -85,7 +85,8 @@ dataFormat(unit,value){ return chartDataFormat.getUnit(unit?unit:2).compute(value) }, - legendFormat:function(legend,expression){ + legendFormat:function(legend,expression,metric){ + console.log(metric) if(/\{\{.+\}\}/.test(expression)&&expression){ let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2); @@ -97,7 +98,7 @@ } return value?value:label; }); - return labelValue + return metric[labelValue]?metric[labelValue]:labelValue }else{ return expression?expression:legend; } diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index 840b8cea0..eadaa7a87 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -57,6 +57,7 @@ }, created() { this.option=chartConfig.getOption(this.chartType); + console.log(this.option); if(this.showToolbox == false){ //this.option.grid.top = 10; } @@ -158,6 +159,7 @@ this.noData=false; this.chart.clear(); this.optionSeriesAll=[...this.option.series]; + console.log( this.optionSeriesAll); if(this.option.series instanceof Array){ this.option.series=this.option.series.filter((item,index)=>index