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

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

@@ -25,6 +25,11 @@
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</span>
@@ -152,6 +157,7 @@ export default {
default: 0
},
chartInfo: {},
chartData: {},
id: { type: String },
from: { type: String },
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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</span>
@@ -161,10 +166,6 @@ export default {
legend: {
show: false
},
grid: {
left: 'center',
top: 'middle'
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(221,228,237,1)',
@@ -290,41 +291,53 @@ export default {
if (chartItem.type === 'bar') {
this.option.xAxis = {
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)
console.log(maxValueCopies)
const dot = maxValueCopies.dot
const maxValue = maxValueCopies.dot
const copies = maxValueCopies.dot
let dot = maxValueCopies.dot
const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.copies
const unit = maxValueCopies.unit
this.option.yAxis = {
type: 'value'
type: 'value',
// maxInterval:{},
// 去掉y轴--start
// minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
// maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
// // 去掉y轴--end
// axisLabel: {
// show: true,
// fontSize: 10,
// formatter: function (val, index) {
// let value = val
// if (val !== 0) {
// value = parseFloat(Number(val).toFixed(2))
// if (value === 0) {
// value = Number(val).toExponential(2)
// }
// }
// 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) {
// dot = 2
// }
// if (flag || dot == 0) {
// dot = 1
// }
// return unit.compute(value, index, -1, dot)
// }
// }
minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
// 去掉y轴--end
axisLabel: {
show: true,
fontSize: 10,
formatter: function (val, index) {
let value = val
if (val !== 0) {
value = parseFloat(Number(val).toFixed(2))
if (value === 0) {
value = Number(val).toExponential(2)
}
}
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) {
dot = 2
}
if (flag || dot == 0) {
dot = 1
}
return unit.compute(value, index, -1, dot)
}
}
// boundaryGap:[0,0.2]
}
const nweSeriesItem = []
@@ -508,6 +521,7 @@ export default {
if (self.pieData[0].data.length > 0) {
getChart(self.chartIndex).clear()
getChart(self.chartIndex).setOption(self.option)// 创建图表
console.log(self.option)
self.noData = false
} else {
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="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, 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>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, 2)}</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>
<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')">
<i class="nz-icon nz-icon-plus"></i>
</span>

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

@@ -3,7 +3,7 @@
float:left;
padding: 0px 10px 10px 0;
position:relative;
box-sizing: border-box;
box-sizing: content-box;
}
.noData{
text-align: center
@@ -150,6 +150,7 @@
:editChartId="'editChartId' + item.id"
:is-lock="panelLock"
:chart-info="item"
:chartData="item"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@on-remove-chart-block="removeChart"
@@ -844,8 +845,8 @@ export default {
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele
let query = encodeURIComponent(filterItem.expression)
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给connected
chartInfo.param.nullType = chartInfo.param.nullType || 'connected'
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType
}
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
@@ -1308,7 +1309,7 @@ export default {
this.$nextTick(() => {
let query = chartInfo.elements[0].expression
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
}
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-edit-chart-block="editData"
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
:chartData="item"
></chart-alert-list>
<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 filterItem = ele
let query = encodeURIComponent(filterItem.expression)
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给connected
chartInfo.param.nullType = chartInfo.param.nullType || 'connected'
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType
}
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
@@ -1346,7 +1347,7 @@ export default {
this.$nextTick(() => {
let query = chartInfo.elements[0].expression
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
}
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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</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="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</span>
@@ -765,7 +770,7 @@ export default {
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)
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))
if (previousval === 0) {
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 += '</span>'
} 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 += '</div>'
@@ -1203,7 +1208,7 @@ export default {
str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
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))
if (previousval === 0) {
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 += '</span>'
} 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 += '</div>'
@@ -1511,9 +1516,9 @@ export default {
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele
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.nullType = this.chartInfo.param.nullType || 'connected'
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
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)
@@ -1524,9 +1529,9 @@ export default {
this.data.elements.forEach((ele) => {
const filterItem = ele
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.nullType = this.chartInfo.param.nullType || 'connected'
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
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))
@@ -1536,15 +1541,15 @@ export default {
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
let query = encodeURIComponent(this.data.name)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
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)]
} else {
let query = encodeURIComponent(this.data.elements[0].expression)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
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)]

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

@@ -13,6 +13,11 @@
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<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')">
<i class="nz-icon nz-icon-replay"></i>
</span>

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

@@ -200,21 +200,15 @@
</el-option>
</el-select>
</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 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-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">
@@ -223,6 +217,7 @@
</el-select>
</el-form-item>
<!--height-->
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item" prop="hight">
<el-autocomplete
id="chart-box-height"
@@ -240,6 +235,19 @@
</el-autocomplete>
</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-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
</el-form-item>
@@ -250,10 +258,6 @@
</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-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
</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">
@@ -262,14 +266,15 @@
</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-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
</el-form-item>
<!--<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-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'">
<span>{{$t('alert.config.expr')}}</span>
<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: {},
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
nullTypeList: [{
label: 'connected',
value: 'connected'
}, {
label: 'null',
value: 'null'
}, {
@@ -1309,7 +1311,7 @@ export default {
param.threshold = ''
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.nullType = 'connected'
param.nullType = 'null'
this.$set(this.editChart, 'param', param)
this.elements = [1]
this.elementTarget = []
@@ -1377,9 +1379,9 @@ export default {
} else {
this.setIsOtherChart()
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') {
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.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.editChart.param = {
statistics: 'last',
nullType: 'connected',
nullType: 'null',
valueMapping: {
type: 'value',
mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
@@ -1703,7 +1705,7 @@ export default {
this.editChart.param = JSON.parse(this.editChart.param)
}
if (!n.param.nullType) {
this.editChart.param.nullType = 'connected'
this.editChart.param.nullType = 'null'
}
if (n.type === 'url') {
this.setIsUrl()