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

feat：添加hover顯示描述信息的图标 修改 barchart的显示

Browse Source
This commit is contained in:
zhangyu
2021-04-08 18:45:58 +08:00
parent e035e371fe
commit 2c6ffb4b6d
12 changed files with 143 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,12 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu> <el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>
@@ -152,6 +157,7 @@ export default {
default: 0 default: 0
}, },
chartInfo: {}, chartInfo: {},
chartData: {},
id: { type: String }, id: { type: String },
from: { type: String }, from: { type: String },
isLock: { type: Boolean, default: false } isLock: { type: Boolean, default: false }

84
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -25,6 +25,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>
@@ -161,10 +166,6 @@ export default {
legend: { legend: {
show: false show: false
}, },
grid: {
left: 'center',
top: 'middle'
},
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
backgroundColor: 'rgba(221,228,237,1)', backgroundColor: 'rgba(221,228,237,1)',
@@ -290,41 +291,53 @@ export default {
if (chartItem.type === 'bar') { if (chartItem.type === 'bar') {
this.option.xAxis = { this.option.xAxis = {
type: 'category', type: 'category',
axisLabel: {
margin: 8,
formatter: function (params) {
let val = ''
if (params.length > 4) {
val = params.substr(0, 4) + '...'
return val
} else {
return params
}
}
}
} }
const maxValueCopies = this.getMaxValue(seriesItem, chartItem) const maxValueCopies = this.getMaxValue(seriesItem, chartItem)
console.log(maxValueCopies) console.log(maxValueCopies)
const dot = maxValueCopies.dot let dot = maxValueCopies.dot
const maxValue = maxValueCopies.dot const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.dot const copies = maxValueCopies.copies
const unit = maxValueCopies.unit const unit = maxValueCopies.unit
this.option.yAxis = { this.option.yAxis = {
type: 'value' type: 'value',
// maxInterval:{}, // maxInterval:{},
// 去掉y轴--start // 去掉y轴--start
// minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'), minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
// maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5), maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
// // 去掉y轴--end // 去掉y轴--end
// axisLabel: { axisLabel: {
// show: true, show: true,
// fontSize: 10, fontSize: 10,
// formatter: function (val, index) { formatter: function (val, index) {
// let value = val let value = val
// if (val !== 0) { if (val !== 0) {
// value = parseFloat(Number(val).toFixed(2)) value = parseFloat(Number(val).toFixed(2))
// if (value === 0) { if (value === 0) {
// value = Number(val).toExponential(2) value = Number(val).toExponential(2)
// } }
// } }
// const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
// if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
// dot = 2 dot = 2
// } }
// if (flag || dot == 0) { if (flag || dot == 0) {
// dot = 1 dot = 1
// } }
// return unit.compute(value, index, -1, dot) return unit.compute(value, index, -1, dot)
// } }
// } }
// boundaryGap:[0,0.2] // boundaryGap:[0,0.2]
} }
const nweSeriesItem = [] const nweSeriesItem = []
@@ -508,6 +521,7 @@ export default {
if (self.pieData[0].data.length > 0) { if (self.pieData[0].data.length > 0) {
getChart(self.chartIndex).clear() getChart(self.chartIndex).clear()
getChart(self.chartIndex).setOption(self.option)// 创建图表 getChart(self.chartIndex).setOption(self.option)// 创建图表
console.log(self.option)
self.noData = false self.noData = false
} else { } else {
self.noData = true self.noData = true
@@ -694,11 +708,7 @@ export default {
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div> <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div> <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, 2)}</div>
</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>percent</div>
<div style="display: ${chartInfo.type === 'pie' ? 'block' : 'none'}">${params.percent}%</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -19,6 +19,11 @@
<span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span> <span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
</span> </span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="addGroupItemChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="addGroupItemChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-plus"></i> <i class="nz-icon nz-icon-plus"></i>
</span> </span>

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

@@ -3,7 +3,7 @@
float:left; float:left;
padding: 0px 10px 10px 0; padding: 0px 10px 10px 0;
position:relative; position:relative;
box-sizing: border-box; box-sizing: content-box;
} }
.noData{ .noData{
text-align: center text-align: center
@@ -150,6 +150,7 @@
:editChartId="'editChartId' + item.id" :editChartId="'editChartId' + item.id"
:is-lock="panelLock" :is-lock="panelLock"
:chart-info="item" :chart-info="item"
:chartData="item"
@on-refresh-data="refreshChart" @on-refresh-data="refreshChart"
@on-search-data="searchData" @on-search-data="searchData"
@on-remove-chart-block="removeChart" @on-remove-chart-block="removeChart"
@@ -844,8 +845,8 @@ export default {
const axiosArr = chartItem.elements.map((ele) => { const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele const filterItem = ele
let query = encodeURIComponent(filterItem.expression) let query = encodeURIComponent(filterItem.expression)
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给connected if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
chartInfo.param.nullType = chartInfo.param.nullType || 'connected' chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType query += '&nullType=' + chartInfo.param.nullType
} }
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){ // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
@@ -1308,7 +1309,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
let query = chartInfo.elements[0].expression let query = chartInfo.elements[0].expression
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) { if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
chartInfo.param.nullType = chartInfo.param.nullType || 'connected' chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType query += '&nullType=' + chartInfo.param.nullType
} }
this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => { this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {

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

@@ -156,6 +156,7 @@
@on-drag-chart="editChartForDrag" @on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData" @on-edit-chart-block="editData"
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}" @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
:chartData="item"
></chart-alert-list> ></chart-alert-list>
<chart-pie :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom" <chart-pie :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
@@ -879,8 +880,8 @@ export default {
const axiosArr = chartItem.elements.map((ele) => { const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele const filterItem = ele
let query = encodeURIComponent(filterItem.expression) let query = encodeURIComponent(filterItem.expression)
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给connected if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
chartInfo.param.nullType = chartInfo.param.nullType || 'connected' chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType query += '&nullType=' + chartInfo.param.nullType
} }
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){ // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
@@ -1346,7 +1347,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
let query = chartInfo.elements[0].expression let query = chartInfo.elements[0].expression
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) { if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
chartInfo.param.nullType = chartInfo.param.nullType || 'connected' chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType query += '&nullType=' + chartInfo.param.nullType
} }
this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => { this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {

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

@@ -25,6 +25,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>

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

@@ -25,6 +25,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>

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

@@ -26,6 +26,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>

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

@@ -13,6 +13,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>

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

@@ -39,6 +39,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>
@@ -765,7 +770,7 @@ export default {
str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">' str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot) str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
if (previousItem) { if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 75px;text-align: right">' str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2)) let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) { if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2) previousval = Number(item.data[1]).toExponential(2)
@@ -782,7 +787,7 @@ export default {
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2) str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
str += '</span>' str += '</span>'
} else if (tip.alias.indexOf('Previous ') !== -1) { } else if (tip.alias.indexOf('Previous ') !== -1) {
str += '<span style="padding-left: 10px; display: inline-block;width: 75px;text-align: right">' str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
str += '</span>' str += '</span>'
} }
str += '</div>' str += '</div>'
@@ -1203,7 +1208,7 @@ export default {
str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">' str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2) str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
if (previousItem) { if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 75px;text-align: right">' str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2)) let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) { if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2) previousval = Number(item.data[1]).toExponential(2)
@@ -1220,7 +1225,7 @@ export default {
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2) str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
str += '</span>' str += '</span>'
} else if (tip.alias.indexOf('Previous ') !== -1) { } else if (tip.alias.indexOf('Previous ') !== -1) {
str += '<span style="padding-left: 10px; display: inline-block;width: 75px;text-align: right">' str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
str += '</span>' str += '</span>'
} }
str += '</div>' str += '</div>'
@@ -1511,9 +1516,9 @@ export default {
axiosArr = this.data.elements.map((ele) => { axiosArr = this.data.elements.map((ele) => {
const filterItem = ele const filterItem = ele
let query = encodeURIComponent(filterItem.expression) let query = encodeURIComponent(filterItem.expression)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
!this.chartInfo.param && (this.chartInfo.param = {}) !this.chartInfo.param && (this.chartInfo.param = {})
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&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)
@@ -1524,9 +1529,9 @@ export default {
this.data.elements.forEach((ele) => { this.data.elements.forEach((ele) => {
const filterItem = ele const filterItem = ele
let query = encodeURIComponent(filterItem.expression) let query = encodeURIComponent(filterItem.expression)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
!this.chartInfo.param && (this.chartInfo.param = {}) !this.chartInfo.param && (this.chartInfo.param = {})
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)) axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
@@ -1536,15 +1541,15 @@ export default {
// 概览模式,需要区分单独一个和多个 // 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') { if (this.stableFilter.chartCount === 'multiple') {
let query = encodeURIComponent(this.data.name) let query = encodeURIComponent(this.data.name)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)] axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
} else { } else {
let query = encodeURIComponent(this.data.elements[0].expression) let query = encodeURIComponent(this.data.elements[0].expression)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected' this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
query += '&nullType=' + this.chartInfo.param.nullType query += '&nullType=' + this.chartInfo.param.nullType
} }
axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)] axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]

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

@@ -13,6 +13,11 @@
<span class="el-dropdown-link chart-title"> <span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span> <span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}"> <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span>
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</span>
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')"> <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i> <i class="nz-icon nz-icon-replay"></i>
</span> </span>

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

@@ -200,21 +200,15 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- remark -->
<el-form-item :label="$t('dashboard.panel.chartForm.remark')">
<el-input type="textarea" v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"/>
</el-form-item>
<!--title-->
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div> <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div> <div style="margin-bottom: 20px;width: 100%"></div>
<!-- unit -->
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'">
<el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected" filterable id="chart-box-unit"
placeholder=""
popper-class="dc-dropdown"
size="mini"
style="width: 100%"
v-model="editChart.unit"
>
</el-cascader>
</el-form-item>
<!--type unit end-->
<!--width-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span"> <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
<el-select class="right-box-row-with-btn" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span"> <el-select class="right-box-row-with-btn" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
<el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList"> <el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
@@ -223,6 +217,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--height-->
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item" prop="hight"> <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item" prop="hight">
<el-autocomplete <el-autocomplete
id="chart-box-height" id="chart-box-height"
@@ -240,6 +235,19 @@
</el-autocomplete> </el-autocomplete>
</el-form-item> </el-form-item>
<!-- unit -->
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'">
<el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected" filterable id="chart-box-unit"
placeholder=""
popper-class="dc-dropdown"
size="mini"
style="width: 100%"
v-model="editChart.unit"
>
</el-cascader>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl"> <el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
<el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input> <el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
</el-form-item> </el-form-item>
@@ -250,26 +258,23 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'">
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-statistics" @change="$forceUpdate">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.threshold")' class="half-form-item" prop="param.threshold" v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'"> <el-form-item :label='$t("dashboard.panel.chartForm.threshold")' class="half-form-item" prop="param.threshold" v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
<el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input> <el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'">
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-statistics" @change="$forceUpdate">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'"> <!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch> <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
</el-form-item>--> </el-form-item>-->
<el-form-item :label="$t('dashboard.panel.chartForm.remark')">
<el-input type="textarea" v-model="editChart.remark"/>
</el-form-item>
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'"> <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'">
<span>{{$t('alert.config.expr')}}</span> <span>{{$t('alert.config.expr')}}</span>
<span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat"> <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
@@ -569,9 +574,6 @@ export default {
alertParams: {}, alertParams: {},
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
nullTypeList: [{ nullTypeList: [{
label: 'connected',
value: 'connected'
}, {
label: 'null', label: 'null',
value: 'null' value: 'null'
}, { }, {
@@ -1309,7 +1311,7 @@ export default {
param.threshold = '' param.threshold = ''
param.valueMapping = { type: 'text', mapping: [{ value: '', text: '', color: { bac: '#fff', text: '#000' } }] } param.valueMapping = { type: 'text', mapping: [{ value: '', text: '', color: { bac: '#fff', text: '#000' } }] }
param.legendValue = { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } param.legendValue = { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' }
param.nullType = 'connected' param.nullType = 'null'
this.$set(this.editChart, 'param', param) this.$set(this.editChart, 'param', param)
this.elements = [1] this.elements = [1]
this.elementTarget = [] this.elementTarget = []
@@ -1377,9 +1379,9 @@ export default {
} else { } else {
this.setIsOtherChart() this.setIsOtherChart()
if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') { if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
this.editChart.param = { nullType: 'connected', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } } this.editChart.param = { nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
if (chartType === 'bar') { if (chartType === 'bar') {
this.editChart.param = { statistics: 'last', nullType: 'connected', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } } this.editChart.param = { statistics: 'last', nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList)) this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') }) this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
} }
@@ -1387,7 +1389,7 @@ export default {
this.$set(this.editChart.param, 'last', 0) this.$set(this.editChart.param, 'last', 0)
this.editChart.param = { this.editChart.param = {
statistics: 'last', statistics: 'last',
nullType: 'connected', nullType: 'null',
valueMapping: { valueMapping: {
type: 'value', type: 'value',
mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
@@ -1703,7 +1705,7 @@ export default {
this.editChart.param = JSON.parse(this.editChart.param) this.editChart.param = JSON.parse(this.editChart.param)
} }
if (!n.param.nullType) { if (!n.param.nullType) {
this.editChart.param.nullType = 'connected' this.editChart.param.nullType = 'null'
} }
if (n.type === 'url') { if (n.type === 'url') {
this.setIsUrl() this.setIsUrl()