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

perf: overview、endpoint、alertmsg图表tooltip统一

Browse Source
This commit is contained in:
chenjinsong
2020-05-18 14:12:56 +08:00
parent c530f31aca
commit 641f746cd7
4 changed files with 79 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -6,7 +6,8 @@
</style>
<style>
.endpoint-dialog .el-dialog__body{
height: 100% !important;
height: calc(100% - 48px) !important;
padding-bottom: 0 !important;
}
</style>
<template>
@@ -51,19 +52,6 @@
</transition>
</button>
</div>
<!--<el-dropdown split-button type="primary" size="mini" class="dropdownBtn" @click="viewGraph">
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
<el-dropdown-menu slot="dropdown" style="padding:10px 4px 10px 10px;">
<el-row>
<el-col :span="16" style="padding-top: 4px;padding-left: 1px"><span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span></el-col>
<el-col :span="8">
<el-dropdown-item class="dropdown-content" >
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
</el-dropdown-item>
</el-col>
</el-row>
</el-dropdown-menu>
</el-dropdown>-->
</div>
</div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
@@ -102,52 +90,6 @@
width="180">
</pl-table-column>
</pl-table>
<!--<el-table
:data="tableData"
border
v-scrollBar:el-table="'normal'"
class="nz-table endpoint-query-table"
v-loading="loading"
:header-cell-class-name="cellClass"
:height="$tableHeight.noPagination"
@selection-change="selectChange"
ref="endpointQueryTable"
style="width: 100%;">
<el-table-column
:resizable="false"
type="selection"
width="38"
align="center"
:selectable="selectable"
>
</el-table-column>
<el-table-column
prop="element"
:label="$t('project.endpoint.element')">
<template slot-scope="scope">
<el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
<div>
<ul>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
</ul>
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover>
<span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
&lt;!&ndash; <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
</template>
</el-table-column>
<el-table-column
:resizable="false"
prop="value"
:label="$t('project.endpoint.value')"
width="180">
</el-table-column>
</el-table>-->
<button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
@@ -503,23 +445,29 @@
alias:alias,
// showText:this.formatLegend(chartData.name),
isGray:false
}
};
this.legend.push(legend);
chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])];
});
console.info(chartData.data)
this.chartDatas.push(chartData);
}
}else{
this.$message.error(response.data.error)
console.error(response.data)
this.$message.error(response.data.error);
console.error(response.data);
}
}
});
this.$nextTick(()=>{
this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
this.$refs.endpointChart.setLegend(this.legend)
this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.endpointChart.modifyOption("grid", "top", 30);
this.$refs.endpointChart.modifyOption("grid", "left", 0);
this.$refs.endpointChart.modifyOption("grid", "right", 30);
this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
this.$refs.endpointChart.setSeries(this.chartDatas);
this.$refs.endpointChart.endLoading();
});

33
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -6,10 +6,9 @@
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
<br/>
</div>
</div>
@@ -131,17 +130,25 @@
}
},
resize:function(){
this.$nextTick(() => {
if(this.chart){
let height=this.$el.clientHeight;
//let height=this.$el.clientHeight;
//console.info(this.$el.clientHeight)
let height = this.$el.clientHeight-document.querySelector("#legendArea").offsetHeight;
//console.info(document.querySelector("#legendArea").offsetHeight)
/*for (let i in document.querySelector("#legendArea")) {
console.info(i, document.querySelector("#legendArea")[i])
}*/
let width=this.$el.clientWidth;
if(this.chartTitle){
/*if(this.chartTitle){
height = height - 20;
}
if(this.legend && this.legend.length>0){
height = height - 80;
}
}*/
this.chart.resize({width:width,height:height});
}
});
},
mouseEnterChart(){
if (this.chart&&this.showToolbox) {
@@ -321,7 +328,9 @@
}
}
</script>
<!--<style>
@import "../../../charts/line-chart-block.scss";
</style>-->
<style scoped>
.chart-room{
width: 100%;
@@ -330,19 +339,19 @@
}
.chart-room .legend-container{
width: calc(100% - 30px);
/*max-height:80px;*/
/*min-height:40px;*/
height: 80px;
max-height:80px;
min-height:25px;
/*height: 80px;*/
font-size:12px;
text-align:left;
margin:0 auto;
left: 10px;
bottom: 5px;
line-height: 18px;
position: relative;
position: absolute;
}
.chart-room .legend-container .legend-item{
text-overflow:ellipsis;
white-space:nowrap;
width:100%;
overflow-x:hidden;
cursor:pointer;
display:inline-block;

1
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -235,7 +235,6 @@
confine: false,
extraCssText:'z-index:1000;',
formatter: function(v, i) {
console.info(v)
return v;
}
},

41
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -445,6 +445,13 @@
}
return name;
});*/
this.$refs.assetTypePie.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.assetTypePie.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.assetTypePie.modifyOption("grid", "top", 30);
this.$refs.assetTypePie.modifyOption("grid", "left", 0);
this.$refs.assetTypePie.modifyOption("grid", "right", 30);
this.$refs.assetTypePie.modifyOption("grid", "bottom", 8);
this.$refs.assetTypePie.modifyOption("grid", "containLabel", true);
this.$refs.assetTypePie.setSeries(series);
this.$refs.assetTypePie.endLoading();
}
@@ -514,6 +521,13 @@
}
this.chartSeries.push(series);
if (this.chartSeries.length == 2) {
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.chartbox.modifyOption("grid", "top", 30);
this.$refs.chartbox.modifyOption("grid", "left", 0);
this.$refs.chartbox.modifyOption("grid", "right", 30);
this.$refs.chartbox.modifyOption("grid", "bottom", 8);
this.$refs.chartbox.modifyOption("grid", "containLabel", true);
this.$refs.chartbox.setSeries(this.chartSeries);
this.$refs.chartbox.endLoading();
}
@@ -539,6 +553,12 @@
}
this.chartSeries.push(series);
if (this.chartSeries.length == 2) {
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.chartbox.modifyOption("grid", "top", 30);
this.$refs.chartbox.modifyOption("grid", "left", 0);
this.$refs.chartbox.modifyOption("grid", "right", 30);
this.$refs.chartbox.modifyOption("grid", "bottom", 8);
this.$refs.chartbox.setSeries(this.chartSeries);
this.$refs.chartbox.endLoading();
}
@@ -797,6 +817,12 @@
category: categoryData, //自定义，用来判断N/A是否显示
};
this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
this.$refs.ruleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.ruleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.ruleMessage.modifyOption("grid", "top", 30);
this.$refs.ruleMessage.modifyOption("grid", "left", 0);
this.$refs.ruleMessage.modifyOption("grid", "right", 30);
this.$refs.ruleMessage.modifyOption("grid", "bottom", 8);
this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
this.$refs.ruleMessage.endLoading();
}
@@ -822,6 +848,12 @@
category: categoryData
};
this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
this.$refs.assetMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.assetMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.assetMessage.modifyOption("grid", "top", 30);
this.$refs.assetMessage.modifyOption("grid", "left", 0);
this.$refs.assetMessage.modifyOption("grid", "right", 30);
this.$refs.assetMessage.modifyOption("grid", "bottom", 8);
this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
this.$refs.assetMessage.endLoading();
}
@@ -847,6 +879,12 @@
category: categoryData
};
this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData);
this.$refs.moduleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.moduleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.moduleMessage.modifyOption("grid", "top", 30);
this.$refs.moduleMessage.modifyOption("grid", "left", 0);
this.$refs.moduleMessage.modifyOption("grid", "right", 30);
this.$refs.moduleMessage.modifyOption("grid", "bottom", 8);
this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
this.$refs.moduleMessage.endLoading();
}
@@ -1360,7 +1398,6 @@
.tooltip-table tr{
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.tooltip-table td{
min-width: 0;
@@ -1369,7 +1406,7 @@
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
border: 1px solid #EBEEF5;
border: 1px solid #b9b9bf;
display: table-cell;
padding:0px 5px ;
}