From a3ddf5e4e00af03a63454469b6c1e6469b66e95d Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 9 Jun 2023 18:22:06 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-2863=20fix=EF=BC=9Adata=20link=20=E6=9C=AA?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0url=E5=8F=98=E9=87=8F=E6=9B=BF=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/components/chart/chart.scss | 15 +++++--- .../src/components/chart/chart/chartBar.vue | 13 ++----- .../components/chart/chart/chartBubble.vue | 11 +----- .../components/chart/chart/chartDoughnut.vue | 11 +----- .../components/chart/chart/chartFunnel.vue | 11 +----- .../src/components/chart/chart/chartGauge.vue | 18 +++------ .../components/chart/chart/chartHexagonD3.vue | 12 ++---- .../src/components/chart/chart/chartRank.vue | 12 +----- .../src/components/chart/chart/chartRose.vue | 2 + .../components/chart/chart/chartSankey.vue | 26 ++++++------- .../src/components/chart/chart/chartStat.vue | 12 ++---- .../src/components/chart/chart/chartTable.vue | 38 +++++++++++-------- .../chart/chart/chartTimeSeries.vue | 12 +----- .../components/chart/chart/chartTreemap.vue | 13 ++----- .../src/components/chart/chartMixin.js | 33 ++++++++++++++-- 15 files changed, 102 insertions(+), 137 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 21bef81de..d797deff3 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -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; } } diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 6814d182a..da352760f 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -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) }, diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue index dbeb25606..f92940b58 100644 --- a/nezha-fronted/src/components/chart/chart/chartBubble.vue +++ b/nezha-fronted/src/components/chart/chart/chartBubble.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue index d151716e6..679ba9ca9 100644 --- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue +++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue index c2a9d4de8..bc796347b 100644 --- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue +++ b/nezha-fronted/src/components/chart/chart/chartFunnel.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 6e75d7be3..5c7219540 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -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) }, diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue index 27457ef53..25a558679 100644 --- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue +++ b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue index 155e1a86e..93c3519fc 100644 --- a/nezha-fronted/src/components/chart/chart/chartRank.vue +++ b/nezha-fronted/src/components/chart/chart/chartRank.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue index d488bf327..9f0a97260 100644 --- a/nezha-fronted/src/components/chart/chart/chartRose.vue +++ b/nezha-fronted/src/components/chart/chart/chartRose.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue index 210ae2946..c8734b4e9 100644 --- a/nezha-fronted/src/components/chart/chart/chartSankey.vue +++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index ac463b1ce..5d641dbad 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index 2271986d7..cec5b0328 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/nezha-fronted/src/components/chart/chart/chartTable.vue @@ -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)" > {{showValueMapping(scope.row,col.title, col)}} -
+
{{scope.row.display[col.title + 'display'].display}}
@@ -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) } }, diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 5c0127f4e..1f383f920 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -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') { diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index e2828d4fe..f3960c431 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -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) }, diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index f5b86b9a1..72e7db345 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -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() }