gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:补充preview实现

Browse Source
This commit is contained in:
wangwenrui
2021-02-19 17:59:10 +08:00
parent fc9b013384
commit 60895d33e1
4 changed files with 103 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -399,13 +399,13 @@
if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
let type=chartItem.param.valueMapping.type;
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
let value = item.value;
let value = Number(item.value);
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
mapping=mappings.find(t=>{return Number(t.value) == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value});
}
this.mapping=mapping;
item.mapping=mapping;

106
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -403,9 +403,9 @@
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
let query = encodeURIComponent(filterItem.expression);
if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
}
// if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
// }
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
});
// 一个图表的所有element单独获取数据
@@ -528,13 +528,13 @@
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: {element: host, alias: alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
// time: timeTmp,//采集时间
// value: dpsItem[1],//数值
data:[dpsItem[0] * 1000, dpsItem[1]]
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
if(chartItem.type === 'pie'){
console.log(chartItem.param.statistics,seriesItem.theData.data)
pieSeries.data.push({value:bus.getSingleStatRlt(chartItem.param.statistics,seriesItem.theData.data),name:host + resInnerPos})
}else{
series.push(seriesItem.theData);
@@ -1182,19 +1182,20 @@
},
// 设置数据
setTableData(seriesItem) {
console.log('set table data',this.chart)
this.unit = chartDataFormat.getUnit(this.chart.unit);
let statistics = this.chart.param.statistics;
seriesItem = this.getStatisticsResult(statistics,seriesItem)
seriesItem=seriesItem.map(item=>{
if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){
let type=this.chart.param.valueMapping.type;
let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[];
let value = item.value;
let value = Number(item.value);
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
mapping=mappings.find(t=>{return Number(t.value) == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value});
}
this.mapping=mapping;
item.mapping=mapping;
@@ -1210,6 +1211,91 @@
this.tableShow = true;
this.$refs.loadingPreview.endLoading();
},
getStatisticsResult(statistics,seriesItem){
let copy=JSON.parse(JSON.stringify(seriesItem));
let last,result;
last=copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0];
switch (statistics) {
case 'null':
return copy.map(item=>{
return {
element:item.element,
time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:item.data[1]
}
})
case 'min':
result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0];
result = [{
element:result.element,
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:result.data[1],
}]
break;
case 'max':
result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0];
result = [{
element:result.element,
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:result.data[1],
}]
break;
case 'average':
copy = copy.map(t=>parseFloat(t.data[1]));
let sum = eval(copy.join('+'));
let avg = sum / copy.length;
result=[{
element:last.element,
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:avg
}]
break;
case 'total':
copy = copy.map(t=>parseFloat(t.data[1]));
let total = eval(copy.join('+'));
result=[{
element:last.element,
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:total
}]
break;
case 'first':
result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]
result = [{
element:result.element,
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:result.data[1],
}]
break;
case 'last':
result=last;
result = [{
element:result.element,
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:result.data[1],
}]
break;
case 'range':
let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})
let max = sort[0]
let min = sort[sort.length-1]
result=[{
element:last.element,
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:max.data[1] - min.data[1]
}]
break;
case 'different':
let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1];
result = [{
element:last.element,
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
value:last.data[1] - first.data[1]
}]
break;
}
return result;
},
clearChart(){
if(this.echartModalStore){
this.echartModalStore.clear();

1
nezha-fronted/src/components/common/js/tools.js
View File

@@ -373,7 +373,6 @@ export const chartResizeTool = {
let mouseY = e.clientY;
//调整resize-box的宽高
box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
console.log(originalHeight,mouseY,mouseOriginalY,(mouseY-mouseOriginalY),chartBlankHeight,(originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight))
box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
//监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数

5
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -1247,6 +1247,9 @@
this.editChart.param.url = data.param.url;
this.setIsUrl();
//this.elements = [1];
}else if(this.editChart.type==='table'){
this.statisticsList=JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
}else if(this.editChart.type==='alertList'){
this.editChart.param = data.param;
this.setIsAlertList();
@@ -1380,7 +1383,7 @@
}
}
this.showPicker=[{bac:false,text:false}];
this.statisticsList = JSON.parse(JSON.stringify(this.statisticsList));
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList));
this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
}