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

feat:新功能

Browse Source 
1 tooltip颜色随机产生
fix：修改问题
1 x轴时间优化显示
2 面积图，透明度调整为0.3
3 点击1个legend，剩余的tooltip不对
4 新增chart：panel显示当前页面的panel，对齐输入框，chart name名字修改
5 chart错误信息参考grafana修改（进行中）
This commit is contained in:
hyx
2020-04-21 20:59:58 +08:00
parent e5516b06b5
commit 00d662327c
14 changed files with 156 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/NotoSansSC-6.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

3
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -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" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

16
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

5
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -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,

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

@@ -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);
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+ [t_date.getHours(), t_date.getMinutes()].join(':');
value = bus.computeTimezone(value);
let t_date = new Date(value);
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,

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

@@ -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%;
}

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

@@ -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 color = self.bgColorList[i];
let tip=legend[item.seriesIndex];
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);
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+ [t_date.getHours(), t_date.getMinutes()].join(':');
let t_date = new Date(value);
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轴上显示指针对应的值
@@ -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,

2
nezha-fronted/src/components/common/language/en.js
View File

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

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

@@ -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;
},

2
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -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>