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

NEZ-2863 fix：data link 未实现url变量替换

Browse Source
This commit is contained in:
zyh
2023-06-09 18:22:06 +08:00
parent ede2cb386b
commit a3ddf5e4e0
15 changed files with 102 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -655,6 +655,9 @@
align-items: center;
font-size: 12px;
overflow: hidden;
&>div:last-of-type{
padding-left: 5px;
}
}
.chart-dataLink-tooltip{
@@ -787,16 +790,16 @@
}
.chart-cursor-default{
cursor: default;
canvas{
cursor: default;
cursor: default !important;
*{
cursor: default !important;
}
}
.chart-cursor-pointer{
cursor: pointer;
canvas{
cursor: pointer;
cursor: pointer !important;
*{
cursor: pointer !important;
}
}

13
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -94,16 +94,7 @@ export default {
active: '#53a3cb',
inactive: '#7e7e7e'
},
chartId: '',
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
}
chartId: ''
}
},
methods: {
@@ -269,6 +260,8 @@ export default {
this.tooltip.mapping = params.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.seriesIndex
const e = params.event.event
this.datalinkPosition(e)
},

11
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -58,15 +58,6 @@ export default {
isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
chartId: '',
bubbleData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
svg: null
}
},
@@ -333,6 +324,8 @@ export default {
this.tooltip.mapping = data.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.datalinkPosition(e)
}
},

11
nezha-fronted/src/components/chart/chart/chartDoughnut.vue
View File

@@ -95,15 +95,6 @@ export default {
chartId: '',
doughnutData: [],
selectData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
svg: null
}
},
@@ -417,6 +408,8 @@ export default {
this.tooltip.mapping = data.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.datalinkPosition(e)
}
},

11
nezha-fronted/src/components/chart/chart/chartFunnel.vue
View File

@@ -59,15 +59,6 @@ export default {
isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
chartId: '',
funnelData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
svg: null
}
},
@@ -427,6 +418,8 @@ export default {
this.tooltip.mapping = data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.datalinkPosition(e)
}
},

18
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -59,16 +59,7 @@ export default {
boxHeight: 0,
boxPadding: 5,
chartInstances: [],
timer: null,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
}
timer: null
}
},
methods: {
@@ -106,9 +97,7 @@ export default {
height: '',
legend: '',
oldValue: '',
mapping: {
}
mapping: {}
}
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
@@ -120,6 +109,7 @@ export default {
gauge.label = data.metric
gauge.legend = legend.alias
gauge.label.legend = gauge.legend
gauge.seriesIndex = expressionIndex
gauge.name = legend.name
gauge.alias = legend.alias
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, decimals)
@@ -324,6 +314,8 @@ export default {
this.tooltip.mapping = params.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.label
this.tooltip.metric.expressionIndex = params.data.seriesIndex
const e = params.event.event
this.datalinkPosition(e)
},

12
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -44,15 +44,6 @@ export default {
boxWidth: 0,
boxHeight: 0,
boxPadding: 5,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
svg: null,
spaceBetweenHexa: 3,
hexagonTimer: null
@@ -108,6 +99,7 @@ export default {
Hexagon.label = data.metric
Hexagon.legend = legend.alias
Hexagon.label.legend = Hexagon.legend
Hexagon.seriesIndex = expressionIndex
Hexagon.name = legend.name
Hexagon.alias = legend.alias
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, decimals)
@@ -483,6 +475,8 @@ export default {
this.tooltip.mapping = data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.metrics
this.tooltip.metric.expressionIndex = data.seriesIndex
this.datalinkPosition(e)
}
},

12
nezha-fronted/src/components/chart/chart/chartRank.vue
View File

@@ -63,16 +63,6 @@ export default {
isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
chartId: '',
rankData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
rank: 0,
show: false,
dataLinkShow: ''
},
svg: null
}
},
@@ -345,6 +335,8 @@ export default {
this.tooltip.mapping = data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.datalinkPosition(e)
}
},

2
nezha-fronted/src/components/chart/chart/chartRose.vue
View File

@@ -433,6 +433,8 @@ export default {
this.tooltip.mapping = data.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.datalinkPosition(e)
}
},

26
nezha-fronted/src/components/chart/chart/chartSankey.vue
View File

@@ -59,15 +59,6 @@ export default {
chartId: '',
linksData: [],
nodesData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
svg: null
}
},
@@ -82,8 +73,8 @@ export default {
}
// 根据link获取node
this.linksData.forEach(item => {
this.nodesData.push({ node: item.source, labels: item.labels })
this.nodesData.push({ node: item.target, labels: item.labels })
this.nodesData.push({ node: item.source, labels: item.labels, seriesIndex: item.seriesIndex })
this.nodesData.push({ node: item.target, labels: item.labels, seriesIndex: item.seriesIndex })
})
// 去重相同的node
for (let i = 0; i < this.nodesData.length; i++) {
@@ -106,13 +97,18 @@ export default {
const sankeyData = []
const decimals = this.chartInfo.param.decimals || 2
this.isNoData = true
originalDatas.forEach((originalData) => {
originalData.forEach((data) => {
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, 0)
const obj = {
value: value,
realValue: value,
labels: data.metric
labels: {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex
}
if (data.metric[chartInfo.param.sourceLabel] && data.metric[chartInfo.param.targetLabel]) {
obj.source = data.metric[chartInfo.param.sourceLabel]
@@ -446,6 +442,8 @@ export default {
this.tooltip.mapping = data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.datalinkPosition(e)
}
},

12
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -121,15 +121,6 @@ export default {
boxHeight: 0,
boxPadding: 2,
statTimer: null,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
},
fontSize: 12,
customFontSize: '',
minFontSzie: 12,
@@ -181,6 +172,7 @@ export default {
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
stat.label.legend = stat.legend
stat.seriesIndex = expressionIndex
stat.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, decimals)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
@@ -541,6 +533,8 @@ export default {
this.tooltip.mapping = data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.label
this.tooltip.metric.expressionIndex = data.seriesIndex
this.datalinkPosition(e)
}
},

38
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -32,14 +32,14 @@
}"
class="value-mapping-table"
:class="{'chart-cursor-pointer':dataLink.length}"
@click="chartClick($event,{title:col.title,value:showValueMapping(scope.row,col.title, col)})"
@click="chartClick($event,col,scope.row)"
>
<template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
<i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
</template>
{{showValueMapping(scope.row,col.title, col)}}
</div>
<div v-else class="value-mapping-table" :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,{title:col.title,value:scope.row.display[col.title + 'display'].display})">
<div v-else class="value-mapping-table" :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,col,scope.row)">
{{scope.row.display[col.title + 'display'].display}}
</div>
</template>
@@ -77,16 +77,7 @@ export default {
oldTableData: [],
columns: [],
valueMapping: {},
tableTimer: null,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
}
tableTimer: null
}
},
methods: {
@@ -146,6 +137,7 @@ export default {
data.showValue = showValue
data.$legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
data.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
data.seriesIndex = expressionIndex
// data.mapping = mapping
data.keys = ''
// eslint-disable-next-line vue/no-mutating-props
@@ -407,12 +399,28 @@ export default {
}
})
},
chartClick (e, data) {
chartClick (e, col, row) {
if (this.dataLink.length) {
this.tooltip.title = data.title
this.tooltip.value = data.value
// 对象扁平化
let flattenedObject
for (const key in row) {
if (key !== 'display' && key !== 'valueMapping') {
flattenedObject = { ...row[key] }
}
}
this.tooltip.title = col.title
if (row.valueMapping && row.valueMapping[col.title + 'mapping']) {
this.tooltip.value = this.showValueMapping(row, col.title, col)
} else {
this.tooltip.value = row.display[col.title + 'display'].display
}
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = {
...flattenedObject.metric,
legend: flattenedObject.$legend
}
this.tooltip.metric.expressionIndex = flattenedObject.seriesIndex
this.datalinkPosition(e)
}
},

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

@@ -66,16 +66,6 @@ export default {
isStack: false,
hasRightYAxis: false,
chartLoading: false,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: '',
tooltipHtml: ''
},
cursorDefault: false
}
},
@@ -672,6 +662,8 @@ export default {
`
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = this.series[params.seriesIndex].labels
this.tooltip.metric.expressionIndex = this.series[params.seriesIndex].seriesIndex
const e = params.event.event
this.datalinkPosition(e)
if (this.isConnect !== 'none') {

13
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -94,16 +94,7 @@ export default {
active: '#53a3cb',
inactive: '#7e7e7e'
},
chartId: '',
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: ''
}
chartId: ''
}
},
methods: {
@@ -240,6 +231,8 @@ export default {
this.tooltip.mapping = params.data.mapping
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.seriesIndex
const e = params.event.event
this.datalinkPosition(e)
},

33
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -9,6 +9,7 @@ import {
chartTimeSeriesAreaOption,
chartTimeSeriesScatterOption
} from './chart/options/chartTimeSeries'
import { tooltip } from 'leaflet'
export default {
data () {
return {
@@ -23,7 +24,17 @@ export default {
chartId: '',
isNoData: true,
series: [],
dataLink: []
dataLink: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: '',
metric: {}
}
}
},
props: {
@@ -111,7 +122,13 @@ export default {
if (s) {
s.data = data.values
s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.name = legend.name
s.labels = {
...data.metric,
legend: legend.alias
}
s.seriesIndex = expressionIndex
if (chartInfo.param.stack) { // 堆叠
s.stack = 'Total' + s.yAxisIndex
}
@@ -455,10 +472,18 @@ export default {
}
},
linkClick (data) {
const url = data.url.replace(/(\{\{.+?\}\})/g, (match) => {
const label = match.substr(match.indexOf('{{') + 2, match.indexOf('}}') - match.indexOf('{{') - 2)
if (this.tooltip.metric.labels[label]) {
return this.tooltip.metric.labels[label]
} else {
return this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || ''
}
})
if (data.openIn === 'newTab') {
window.open(data.url)
window.open(url)
} else {
window.location.href = data.url
window.location.href = url
}
this.clickout()
}