diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index cf7020bd1..7a41cb76e 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -24,7 +24,12 @@ {{chartData.name}} - + + + + + + @@ -152,6 +157,7 @@ export default { default: 0 }, chartInfo: {}, + chartData: {}, id: { type: String }, from: { type: String }, isLock: { type: Boolean, default: false } diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue index 38562a419..8501878da 100644 --- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue +++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue @@ -25,6 +25,11 @@ {{chartData.name}} + + + + + @@ -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 {
${this.legend[params.dataIndex].alias}
value
-
${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}
-
-
-
percent
-
${params.percent}%
+
${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, 2)}
diff --git a/nezha-fronted/src/components/charts/chart-group.vue b/nezha-fronted/src/components/charts/chart-group.vue index 7d86a2e68..b988999fd 100644 --- a/nezha-fronted/src/components/charts/chart-group.vue +++ b/nezha-fronted/src/components/charts/chart-group.vue @@ -19,6 +19,11 @@ ({{chartData.children.length}} charts) + + + + + diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue index a81965f7a..39180154a 100644 --- a/nezha-fronted/src/components/charts/chart-list-group.vue +++ b/nezha-fronted/src/components/charts/chart-list-group.vue @@ -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 => { diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index b8bc02b8d..233631e71 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -156,6 +156,7 @@ @on-drag-chart="editChartForDrag" @on-edit-chart-block="editData" @dropmenu-change="(show) => {dropmenuChange(item.id, show)}" + :chartData="item" > { 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 => { diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue index fca155e65..94dd2c393 100644 --- a/nezha-fronted/src/components/charts/chart-pie.vue +++ b/nezha-fronted/src/components/charts/chart-pie.vue @@ -25,6 +25,11 @@ {{chartData.name}} + + + + + diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue index beb32b7fc..43720c1ee 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.vue +++ b/nezha-fronted/src/components/charts/chart-single-stat.vue @@ -25,6 +25,11 @@ {{chartData.name}} + + + + + diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 0cec25ef0..5b42138f7 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -26,6 +26,11 @@ {{chartData.name}} + + + + + diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue index 06821c072..d1a160579 100644 --- a/nezha-fronted/src/components/charts/chart-url.vue +++ b/nezha-fronted/src/components/charts/chart-url.vue @@ -13,6 +13,11 @@ {{chartData.name}} + + + + + diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 8177fef82..1788aac38 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -39,6 +39,11 @@ {{chartData.name}} + + + + + @@ -765,7 +770,7 @@ export default { str += '
' str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot) if (previousItem) { - str += '' + str += '' 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 += '' } else if (tip.alias.indexOf('Previous ') !== -1) { - str += '' + str += '' str += '' } str += '
' @@ -1203,7 +1208,7 @@ export default { str += '
' str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2) if (previousItem) { - str += '' + str += '' 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 += '' } else if (tip.alias.indexOf('Previous ') !== -1) { - str += '' + str += '' str += '' } str += '
' @@ -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)] diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue index e2c26daa5..7cb73c1ff 100644 --- a/nezha-fronted/src/components/charts/text-chart.vue +++ b/nezha-fronted/src/components/charts/text-chart.vue @@ -13,6 +13,11 @@ {{chartData.name}} + + + + + diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 8ad760e14..a32cb2881 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -200,21 +200,15 @@ + + + + +
{{$t('dashboard.panel.chartForm.option')}}
- - - - - - + @@ -223,6 +217,7 @@ + + + + + + + + @@ -250,26 +258,23 @@ + + + + {{item.label}} + + + + - - - - {{item.label}} - - - - - - -
{{$t('alert.config.expr')}} @@ -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()