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

NEZ-3051 feat：dashboard 时序图表增加 tooltip配置

Browse Source
This commit is contained in:
zyh
2023-08-18 13:58:35 +08:00
parent e62c467144
commit a4a5ae3958
6 changed files with 184 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -133,6 +133,11 @@ export default {
this.isStack = this.chartInfo.param.stack
} catch (e) {}
const chartOption = lodash.cloneDeep(chartOptions)
if (this.$lodash.get(this.chartInfo, 'param.enable.tooltip', false) && this.$lodash.get(this.chartInfo, 'param.tooltip.mode', 'all') === 'single') {
chartOption.tooltip.trigger = 'item'
}
// 防止tootip超出内容区域
if (this.from === 'integration' || this.from === 'dashboardTemp') {
chartOption.tooltip.appendToBody = false
@@ -367,6 +372,9 @@ export default {
tooltipFormatter (hasTotal) { // 堆叠图需要total数据
const self = this
return function (params) {
if (!params.length) { // tooltip mode为single
params = [params]
}
const decimals = self.chartInfo.param.decimals || 2
let str = '<div class="nz-chart__tooltip">'
// 区分左y轴右y轴
@@ -393,6 +401,32 @@ export default {
if (!arr.length) {
return
}
// tooltip排序
let sortBy
if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip') && self.$lodash.get(self.chartInfo, 'param.tooltip.mode') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort') !== 'none') {
sortBy = self.$lodash.get(self.chartInfo, 'param.tooltip.sort')
}
const previousIndex = arr.findIndex(item => item.seriesName.indexOf('Previous') !== -1)
if (previousIndex != -1) { // 对比状态
const arrNow = arr.slice(0, previousIndex)
const arrPrevious = arr.slice(previousIndex)
if (sortBy === 'asc') {
arrNow.sort((a, b) => a.data[1] - b.data[1])
arrPrevious.sort((a, b) => a.data[1] - b.data[1])
} else if (sortBy === 'desc') {
arrNow.sort((a, b) => b.data[1] - a.data[1])
arrPrevious.sort((a, b) => b.data[1] - a.data[1])
}
arr = [...arrNow, ...arrPrevious]
} else {
if (sortBy === 'asc') {
arr.sort((a, b) => a.data[1] - b.data[1])
} else if (sortBy === 'desc') {
arr.sort((a, b) => b.data[1] - a.data[1])
}
}
let sum = 0
let flag = true
arr.forEach((item, i) => {

3
nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
View File

@@ -84,6 +84,9 @@ export const chartTimeSeriesLineOption = {
},
axisTick: {
show: false
},
axisPointer: {
snap: true
}
},
yAxis: [

31
nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
View File

@@ -230,7 +230,8 @@ export default {
valueMapping: false,
thresholds: false,
visibility: false,
rightYAxis: false
rightYAxis: false,
tooltip: true
},
thresholdShow: true,
thresholds: [{ value: undefined, color: randomcolor() }],
@@ -249,7 +250,11 @@ export default {
min: undefined,
max: undefined
},
dataLink: []
dataLink: [],
tooltip: {
mode: 'all',
sort: 'none'
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
panel: '',
@@ -432,7 +437,8 @@ export default {
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
this.chart.param.collapse = false
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
if (!this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -442,6 +448,14 @@ export default {
max: undefined
}
}
if (!this.chart.param.tooltip) {
this.chart.param.tooltip = {
mode: 'all',
sort: 'none'
}
this.chart.param.enable.tooltip = true
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
@@ -479,7 +493,8 @@ export default {
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
this.chart.param.collapse = false
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
if (!this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -489,6 +504,14 @@ export default {
max: undefined
}
}
if (!this.chart.param.tooltip) {
this.chart.param.tooltip = {
mode: 'all',
sort: 'none'
}
this.chart.param.enable.tooltip = true
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }

67
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -448,7 +448,7 @@
</div>
<!-- Right Y Axis -->
<div v-if="isShowRightYAxis(chartConfig.type)">
<div v-if="isTimeSeries(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.dashboard.chartForm.rightYAxis')}}</span>
<el-switch
@@ -574,6 +574,62 @@
</transition>
</div>
<!-- Tooltip -->
<div v-if="isTimeSeries(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.dashboard.chartForm.tooltip')}}</span>
<el-switch
v-model="chartConfig.param.enable.tooltip"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.tooltip"
class="form-items--half-width-group"
>
<!-- Mode -->
<el-form-item
:label="$t('dashboard.mode')"
class="form-item--half-width"
prop="param.tooltip.mode"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
>
<el-select
v-model="chartConfig.param.tooltip.mode"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option :label="$t('dashboard.dashboard.chartForm.single')" value="single"></el-option>
<el-option :label="$t('overall.exportAll')" value="all"></el-option>
</el-select>
</el-form-item>
<!-- Sort -->
<el-form-item
v-if="chartConfig.param.tooltip.mode!=='single'"
:label="$t('dashboard.dashboard.chartForm.sort')"
class="form-item--half-width"
prop="param.tooltip.sort"
>
<el-select
v-model="chartConfig.param.tooltip.sort"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option :label="$t('project.topology.none')" value="none"></el-option>
<el-option :label="$t('dashboard.explore.ascending')" value="asc"></el-option>
<el-option :label="$t('dashboard.explore.descending')" value="desc"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->
<div class="form__sub-title">
@@ -1380,7 +1436,8 @@ export default {
valueMapping: false,
thresholds: false,
visibility: false,
rightYAxis: false
rightYAxis: false,
tooltip: true
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
@@ -1397,7 +1454,11 @@ export default {
min: undefined,
max: undefined
},
dataLink: this.chartConfig.param.dataLink
dataLink: this.chartConfig.param.dataLink,
tooltip: {
mode: 'all',
sort: 'none'
}
}
this.$nextTick(() => {
this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })

2
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

@@ -239,7 +239,7 @@ export default {
default: return false
}
},
isShowRightYAxis (type) {
isTimeSeries (type) {
switch (type) {
case 'line':
case 'area':

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

@@ -247,7 +247,8 @@ export default {
valueMapping: false,
thresholds: false,
visibility: false,
rightYAxis: false
rightYAxis: false,
tooltip: true
},
thresholdShow: true,
thresholds: [{ value: undefined, color: randomcolor() }],
@@ -266,7 +267,11 @@ export default {
min: undefined,
max: undefined
},
dataLink: []
dataLink: [],
tooltip: {
mode: 'all',
sort: 'none'
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
panel: '',
@@ -607,7 +612,8 @@ export default {
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
this.chart.param.collapse = false
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
if (!this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -617,6 +623,14 @@ export default {
max: undefined
}
}
if (!this.chart.param.tooltip) {
this.chart.param.tooltip = {
mode: 'all',
sort: 'none'
}
this.chart.param.enable.tooltip = true
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
@@ -654,7 +668,8 @@ export default {
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
this.chart.param.collapse = false
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
if (!this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -664,6 +679,14 @@ export default {
max: undefined
}
}
if (!this.chart.param.tooltip) {
this.chart.param.tooltip = {
mode: 'all',
sort: 'none'
}
this.chart.param.enable.tooltip = true
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }