diff options
21 files changed, 455 insertions, 511 deletions
diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 231e3301d..ca1b18293 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -683,10 +683,10 @@ } } -.chart-dataLink-tooltip{ +.chart-toolbox{ position: absolute !important; padding-bottom: 2px !important; - z-index: 999999999; + z-index: 9999; pointer-events: auto; .chart-dataLink-list{ width: calc(100% + 20px); diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 95c99c585..25c719b94 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -14,20 +14,20 @@ :series="series" :is-fullscreen="isFullscreen" ></chart-legend> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div> <div class="chart-canvas-tooltip-content"> <div>value</div> <div> - <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> - <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> </div> - <div style="display: inline-block">{{tooltip.value}}</div> + <div style="display: inline-block">{{toolbox.value}}</div> </div> </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -160,12 +160,6 @@ export default { this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) { myChart.on('click', this.chartClick) - myChart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) } this.isInit = false }, 200) @@ -231,56 +225,45 @@ export default { </div> ` }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['bar-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['bar-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (params) { - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' - } - } - getChart(this.chartId).setOption(option) - this.tooltip.title = params.data.alias - this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue - 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.expressionIndex + getChart(this.chartId).dispatchAction({ + type: 'hideTip' + }) + this.toolbox.title = params.data.alias + this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue + this.toolbox.mapping = params.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = params.data.labels + this.toolbox.metric.expressionIndex = params.data.expressionIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:visible;' - } - } - getChart(this.chartId).setOption(option) + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue index 9b92de4d5..b10227f36 100644 --- a/nezha-fronted/src/components/chart/chart/chartBubble.vue +++ b/nezha-fronted/src/components/chart/chart/chartBubble.vue @@ -6,7 +6,8 @@ <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <svg :id="`bubble-svg-${chartId}`" width="100%" height="100%"></svg> </div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -19,8 +20,23 @@ <div style="display: inline-block">{{tooltip.value}}</div> </div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -194,7 +210,6 @@ export default { bubbles.on('mousemove', this.bubbleMove) bubbles.on('mouseleave', this.bubbleLeave) bubbles.on('click', this.chartClick) - bubbles.on('mousedown', this.chartMousedown) }, // 处理label bubbleFormatterLabel (node) { @@ -246,7 +261,6 @@ export default { } }, bubbleEnter (e, node) { // 移入气泡 - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.mapping = node.data.mapping @@ -254,12 +268,10 @@ export default { this.setPosition(e) }, bubbleMove (e) { // 气泡内移动 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, bubbleLeave () { // 移出气泡 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -297,55 +309,49 @@ export default { this.svg.selectAll('.bubble').on('mousemove', null) this.svg.selectAll('.bubble').on('mouseleave', null) this.svg.selectAll('.bubble').on('click', null) - this.svg.selectAll('.bubble').on('mousedown', null) this.svg.selectAll('g').remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['bubble-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['bubble-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.data.alias - this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue - 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.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.data.alias + this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.toolbox.mapping = data.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.data.labels + this.toolbox.metric.expressionIndex = data.data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue index 7a7e193ff..93ab038e1 100644 --- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue +++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue @@ -15,8 +15,8 @@ @clickLegendD3="clickLegendD3" @hoverLegendD3="hoverLegendD3" ></chart-legend> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -33,8 +33,27 @@ <div>percent</div> <div>{{tooltip.percent}}%</div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> + <div class="chart-canvas-tooltip-content"> + <div>percent</div> + <div>{{toolbox.percent}}%</div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -237,7 +256,6 @@ export default { .on('mousemove', this.doughnutMove) .on('mouseleave', this.doughnutLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .transition().duration(animate === true ? 600 : 0) .attrTween('d', function (d) { const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) @@ -263,7 +281,6 @@ export default { .on('mousemove', this.doughnutMove) .on('mouseleave', this.doughnutLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .style('opacity', 0) .html((d) => { return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' @@ -324,7 +341,6 @@ export default { } }, doughnutEnter (e, node) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.percent = node.percent @@ -333,12 +349,10 @@ export default { this.setPosition(e) }, doughnutMove (e) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, doughnutLeave () { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -397,62 +411,56 @@ export default { this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('click', null) - this.svg.selectAll('path').on('mousedown', null) this.svg.selectAll('foreignObject').on('mouseover', null) this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('click', null) - this.svg.selectAll('foreignObject').on('mousedown', null) this.svg.remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['doughnut-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['doughnut-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.data.alias - this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue - 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.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.data.alias + this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.toolbox.percent = data.percent + this.toolbox.mapping = data.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.data.labels + this.toolbox.metric.expressionIndex = data.data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue index 535cd5fe7..26ec41e60 100644 --- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue +++ b/nezha-fronted/src/components/chart/chart/chartFunnel.vue @@ -6,8 +6,8 @@ <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <svg :id="`funnel-svg-${chartId}`" width="100%" height="100%"></svg> </div> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -20,8 +20,23 @@ <div style="display: inline-block">{{tooltip.value}}</div> </div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -197,7 +212,6 @@ export default { this.chartLeave() }) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) function getPoints (topWidth, bottomWidth, height) { const points = [] @@ -234,7 +248,6 @@ export default { this.chartLeave() }) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .style('opacity', 0) .transition('opacity').duration(animate === true ? 600 : 0) .style('opacity', 1) @@ -299,7 +312,6 @@ export default { } }, chartEnter (e, data) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = data.alias this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue this.tooltip.mapping = data.mapping @@ -307,12 +319,10 @@ export default { this.setPosition(e) }, chartMove (e) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, chartLeave () { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -388,60 +398,53 @@ export default { this.svg.selectAll('.trap').on('mousemove', null) this.svg.selectAll('.trap').on('mouseleave', null) this.svg.selectAll('.trap').on('click', null) - this.svg.selectAll('.trap').on('mousedown', null) this.svg.selectAll('foreignObject').on('mouseover', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('click', null) - this.svg.selectAll('foreignObject').on('mousedown', null) this.svg.selectAll('g').remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['funnel-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['funnel-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.alias - this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue - this.tooltip.mapping = data.mapping - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = data.labels - this.tooltip.metric.expressionIndex = data.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.alias + this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue + this.toolbox.mapping = data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.labels + this.toolbox.metric.expressionIndex = data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 90934d7a1..494e05cb7 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -18,19 +18,19 @@ {{item.alias}} </div> </div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div> <div class="chart-canvas-tooltip-content"> <div>value</div> <div> - <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> - <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> </div> - <div style="display: inline-block">{{tooltip.value}}</div> + <div style="display: inline-block">{{toolbox.value}}</div> </div> </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -242,12 +242,6 @@ export default { myChart.setOption(option) if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { myChart.on('click', this.chartClick) - myChart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) } this.chartInstances.push(myChart) }) @@ -284,60 +278,47 @@ export default { </div> ` }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['chart-gauge-box' + this.chartInfo.id].getBoundingClientRect().left const top = e.pageY - this.$refs['chart-gauge-box' + this.chartInfo.id].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (params) { - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' - } - } this.chartInstances.forEach(item => { - item.setOption(option) + item.dispatchAction({ + type: 'hideTip' + }) }) - this.tooltip.title = params.data.alias - this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue - 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.expressionIndex + this.toolbox.title = params.data.alias + this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue + this.toolbox.mapping = params.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = params.data.label + this.toolbox.metric.expressionIndex = params.data.expressionIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:visible;' - } - } - this.chartInstances.forEach(item => { - item.setOption(option) - }) + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue index 2a352cf19..e5b40405d 100644 --- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue +++ b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue @@ -1,7 +1,8 @@ <template> <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;position: relative;"> <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -14,8 +15,23 @@ <div style="display: inline-block">{{tooltip.value}}</div> </div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -190,14 +206,12 @@ export default { g.on('mousemove', self.hexagonMove.bind(self, point)) g.on('mouseleave', self.hexagonOut.bind(self, point)) g.on('click', self.chartClick.bind(self, point)) - g.on('mousedown', self.chartMousedown) self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本 data[i].fcolor = color } return this.svg.node() }, hexagonOver (that, e) { // 移入六边形 - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = that.alias this.tooltip.value = that.mapping && that.mapping.display ? this.handleDisplay(that.mapping.display, { ...that.metrics, legend: that.alias, value: that.showValue }) : that.showValue this.tooltip.mapping = that.mapping @@ -205,12 +219,10 @@ export default { this.setPosition(e) }, hexagonMove (that, e) { // 六边形内移动 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, hexagonOut () { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -435,7 +447,6 @@ export default { this.svg.selectAll('g').on('mouseenter', null) this.svg.selectAll('g').on('mouseleave', null) this.svg.selectAll('g').on('click', null) - this.svg.selectAll('g').on('mousedown', null) this.svg.remove() this.svg = null } @@ -453,50 +464,45 @@ export default { }) }, 50) }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().left const top = e.pageY - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (data, e) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.alias - this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue - this.tooltip.mapping = data.mapping - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = data.metrics - this.tooltip.metric.expressionIndex = data.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.alias + this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue + this.toolbox.mapping = data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.metrics + this.toolbox.metric.expressionIndex = data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue index bb876eb3c..1088ff58c 100644 --- a/nezha-fronted/src/components/chart/chart/chartRank.vue +++ b/nezha-fronted/src/components/chart/chart/chartRank.vue @@ -6,8 +6,8 @@ <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow-y:auto;"> <svg :id="`rank-svg-${chartId}`" width="100%" style="vertical-align: top;"></svg> </div> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -24,8 +24,27 @@ <div>rank</div> <div>{{tooltip.rank+1}}</div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> + <div class="chart-canvas-tooltip-content"> + <div>rank</div> + <div>{{toolbox.rank+1}}</div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -177,7 +196,6 @@ export default { .on('mousemove', this.rankMove) .on('mouseleave', this.rankLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) bars.exit().remove() // 文本标签 @@ -191,7 +209,6 @@ export default { .on('mousemove', this.rankMove) .on('mouseleave', this.rankLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .html((d) => { return this.rankFormatterLabel(d) }) @@ -253,7 +270,6 @@ export default { } }, rankEnter (e, data) { // 移入 - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = data.alias this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue this.tooltip.mapping = data.mapping @@ -262,12 +278,10 @@ export default { this.setPosition(e) }, rankMove (e) { // 移动 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, rankLeave () { // 移出 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -305,60 +319,54 @@ export default { this.svg.selectAll('rect').on('mousemove', null) this.svg.selectAll('rect').on('mouseleave', null) this.svg.selectAll('rect').on('click', null) - this.svg.selectAll('rect').on('mousedown', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('click', null) - this.svg.selectAll('foreignObject').on('mousedown', null) this.svg.selectAll('g').remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['rank-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['rank-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.alias - this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue - this.tooltip.mapping = data.mapping - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = data.labels - this.tooltip.metric.expressionIndex = data.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.alias + this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue + this.toolbox.mapping = data.mapping + this.toolbox.rank = data.rank + this.toolbox.show = true + this.toolbox.metric.labels = data.labels + this.toolbox.metric.expressionIndex = data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue index 0373d1b3c..f5541b4e7 100644 --- a/nezha-fronted/src/components/chart/chart/chartRose.vue +++ b/nezha-fronted/src/components/chart/chart/chartRose.vue @@ -16,7 +16,8 @@ @hoverLegendD3="hoverLegendD3" ></chart-legend> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -33,8 +34,27 @@ <div>percent</div> <div>{{tooltip.percent}}%</div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> + <div class="chart-canvas-tooltip-content"> + <div>percent</div> + <div>{{toolbox.percent}}%</div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -102,16 +122,6 @@ export default { chartId: '', roseData: [], selectData: [], - tooltip: { - x: 0, - y: 0, - title: 0, - value: 0, - percent: 0, - mapping: {}, - show: false, - dataLinkShow: false - }, svg: null, drawing: false } @@ -263,7 +273,6 @@ export default { .on('mousemove', this.roseMove) .on('mouseleave', this.roseLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .transition().duration(animate === true ? 600 : 0) .attrTween('d', function (d) { const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) @@ -289,7 +298,6 @@ export default { .on('mousemove', this.roseMove) .on('mouseleave', this.roseLeave) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) .style('opacity', 0) .html((d) => { return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' @@ -350,7 +358,6 @@ export default { } }, roseEnter (e, node) { // 移入气泡 - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.percent = node.percent @@ -359,12 +366,10 @@ export default { this.setPosition(e) }, roseMove (e) { // 气泡内移动 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, roseLeave () { // 移出气泡 - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -424,62 +429,56 @@ export default { this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('click', null) - this.svg.selectAll('path').on('mousedown', null) this.svg.selectAll('foreignObject').on('mouseover', null) this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('click', null) - this.svg.selectAll('foreignObject').on('mousedown', null) this.svg.remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['rose-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['rose-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.data.alias - this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue - 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.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.data.alias + this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.toolbox.percent = data.percent + this.toolbox.mapping = data.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.data.labels + this.toolbox.metric.expressionIndex = data.data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue index 9f8645af8..d46d77527 100644 --- a/nezha-fronted/src/components/chart/chart/chartSankey.vue +++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue @@ -7,8 +7,8 @@ <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <svg :id="`sankey-svg-${chartId}`" width="100%" height="100%"></svg> </div> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title"> {{tooltip.title}} </div> @@ -21,8 +21,23 @@ <div style="display: inline-block">{{tooltip.value}}</div> </div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title"> + {{toolbox.title}} + </div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -273,7 +288,6 @@ export default { hoverNodes.forEach((index) => { chart.selectAll('[index=' + index + ']').style('fill-opacity', '1').selectAll('foreignObject').style('opacity', '1') }) - if (this.tooltip.dataLinkShow) { return } // 显示悬浮框 this.tooltip.title = d.source.node + ' ——> ' + d.target.node this.tooltip.value = d.showValue @@ -282,19 +296,16 @@ export default { this.setPosition(e) }) .on('mousemove', (e) => { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }) .on('mouseleave', () => { chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') - if (this.tooltip.dataLinkShow) { return } // 隐藏悬浮框 this.tooltip.show = false }) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) // 划过节点 chart.selectAll('.node') @@ -306,7 +317,6 @@ export default { .style('stroke-opacity', '0.8') .selectAll('foreignObject') .style('opacity', '1') - if (this.tooltip.dataLinkShow) { return } // 显示悬浮框 this.tooltip.title = d.node this.tooltip.value = d.mapping && d.mapping.display ? this.handleDisplay(d.mapping.display, { ...d.labels, value: d.showValue }) : d.showValue @@ -315,19 +325,16 @@ export default { this.setPosition(e) }) .on('mousemove', (e) => { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }) .on('mouseleave', () => { chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') - if (this.tooltip.dataLinkShow) { return } // 隐藏悬浮框 this.tooltip.show = false }) .on('click', this.chartClick) - .on('mousedown', this.chartMousedown) }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 @@ -413,60 +420,53 @@ export default { this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('click', null) - this.svg.selectAll('path').on('mousedown', null) this.svg.selectAll('.node').on('mouseenter', null) this.svg.selectAll('.node').on('mousemove', null) this.svg.selectAll('.node').on('mouseleave', null) this.svg.selectAll('.node').on('click', null) - this.svg.selectAll('.node').on('mousedown', null) this.svg.selectAll('g').remove() this.svg = null } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['sankey-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['sankey-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.node ? data.node : data.source.node + ' ——> ' + data.target.node - this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue - this.tooltip.mapping = data.mapping - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = data.labels - this.tooltip.metric.expressionIndex = data.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.node ? data.node : data.source.node + ' ——> ' + data.target.node + this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue + this.toolbox.mapping = data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.labels + this.toolbox.metric.expressionIndex = data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index 31d6b36f3..a1b6fa02e 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -8,7 +8,6 @@ @mousemove="statMouseMove" @mouseleave="statMouseleave(item)" @click="chartClick($event,item)" - @mousedown="chartMousedown($event)" :class="{ 'only-stat':statData.length===1, 'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs') @@ -80,7 +79,8 @@ <!-- sparkline --> <div class="sparkline" :id="`chart-canvas-${chartId}-${index}`" v-if="chartInfo.param.sparklineMode && chartInfo.param.sparklineMode !== 'none'"></div> </div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> + <!-- tooltip --> + <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div> <div class="chart-canvas-tooltip-content"> <div>value</div> @@ -91,8 +91,21 @@ <div style="display: inline-block">{{tooltip.value}}</div> </div> </div> + </div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div> + <div class="chart-canvas-tooltip-content"> + <div>value</div> + <div> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> + </div> + <div style="display: inline-block">{{toolbox.value}}</div> + </div> + </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -426,7 +439,6 @@ export default { }, 100) }, statMouseEnter (data, e) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.title = data.legend this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue this.tooltip.mapping = data.mapping @@ -434,12 +446,10 @@ export default { this.setPosition(e) }, statMouseMove (e) { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = true this.setPosition(e) }, statMouseleave () { - if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { @@ -505,50 +515,45 @@ export default { } return this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none' && item.height > minHeight && item.width > minWidth }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['chart-stat-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['chart-stat-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (e, data) { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { - this.tooltip.title = data.legend - this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue - this.tooltip.mapping = data.mapping - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = data.label - this.tooltip.metric.expressionIndex = data.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.tooltip.show = false + + this.toolbox.title = data.legend + this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue + this.toolbox.mapping = data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = data.label + this.toolbox.metric.expressionIndex = data.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index 1810855ca..40740db9c 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/nezha-fronted/src/components/chart/chart/chartTable.vue @@ -35,14 +35,13 @@ :title="showValueMapping(scope.row,col.title, col)" :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)" - @mousedown="chartMousedown($event)" > <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" :title="scope.row.display[col.title + 'display'].display" :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)"> + <div v-else class="value-mapping-table" :title="scope.row.display[col.title + 'display'].display" :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)"> {{scope.row.display[col.title + 'display'].display}} </div> </template> @@ -60,14 +59,14 @@ > </el-pagination> </div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div> <div class="chart-canvas-tooltip-content"> <div>value</div> - <div>{{tooltip.value}}</div> + <div>{{toolbox.value}}</div> </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -475,25 +474,25 @@ export default { } } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['tabel-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['tabel-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) @@ -507,31 +506,24 @@ export default { flattenedObject = { ...row[key] } } } - this.tooltip.title = col.title + this.toolbox.title = col.title if (row.valueMapping && row.valueMapping[col.title + 'mapping']) { - this.tooltip.value = this.showValueMapping(row, col.title, col) + this.toolbox.value = this.showValueMapping(row, col.title, col) } else { - this.tooltip.value = row.display[col.title + 'display'].display + this.toolbox.value = row.display[col.title + 'display'].display } - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.metric.labels = { + this.toolbox.show = true + this.toolbox.metric.labels = { ...flattenedObject.metric, legend: flattenedObject.$legend } - this.tooltip.metric.expressionIndex = flattenedObject.expressionIndex - this.datalinkPosition(e) - } - }, - chartMousedown (e) { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - e.stopPropagation() + this.toolbox.metric.expressionIndex = flattenedObject.expressionIndex + this.toolboxPosition(e) } }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 769086c56..4846c97d9 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -22,10 +22,11 @@ :series="series" :is-fullscreen="isFullscreen" ></chart-legend> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div v-html="tooltip.tooltipHtml"></div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div v-html="toolbox.tooltipHtml"></div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -85,14 +86,13 @@ export default { hasRightYAxis: false, chartLoading: false, cursorDefault: false, - tooltip: { + toolbox: { x: 0, y: 0, title: 0, value: 0, mapping: {}, show: false, - dataLinkShow: '', metric: {}, activeIndex: undefined, clickIndex: undefined @@ -277,12 +277,6 @@ export default { }) myChart.on('click', this.chartClick) - myChart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) // 鼠标滑过当前symbol 改变样式 myChart.on('mousemove', (params) => { this.cursorDefault = false @@ -312,7 +306,7 @@ export default { } ) } - this.tooltip.activeIndex = params.seriesIndex + this.toolbox.activeIndex = params.seriesIndex }) myChart.on('mouseout', (params) => { const option = myChart.getOption() @@ -327,7 +321,7 @@ export default { }) myChart.setOption({ series }) } - this.tooltip.activeIndex = undefined + this.toolbox.activeIndex = undefined }) if (!this.isFullscreen) { @@ -525,7 +519,7 @@ export default { // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示 str += ` - <div class="${(self.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}"> + <div class="${(self.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}"> <div class="row__label"> <span class="${className}" style="background-color: ${color};color: ${color}"></span> <span>${seriesName}</span> @@ -626,25 +620,25 @@ export default { this.hasRightYAxis = true } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) @@ -654,17 +648,9 @@ export default { if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') } - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:hidden;transition:none;', - hideDelay: 0 - } - } - getChart(this.chartId).setOption(option) getChart(this.chartId).dispatchAction({ type: 'hideTip' }) - // 生成dataLink tooltip const nameArr = params.seriesName.split('-') if (nameArr.length > 1) { nameArr.splice(nameArr.length - 1, 1) @@ -697,7 +683,7 @@ export default { className = 'yAxis-icon nz-icon nz-icon-youzongzhou' } const color = this.colorList[params.seriesIndex] - this.tooltip.tooltipHtml = ` + this.toolbox.tooltipHtml = ` <div class="nz-chart__tooltip"> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip__row"> @@ -711,33 +697,27 @@ export default { </div> </div> ` - 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].expressionIndex - this.tooltip.clickIndex = params.seriesIndex + this.toolbox.show = true + this.toolbox.metric.labels = this.series[params.seriesIndex].labels + this.toolbox.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex + this.toolbox.clickIndex = params.seriesIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) if (this.isConnect !== 'none') { echarts.connect('timeSeriesGroup') } }, clickout () { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:visible;' - } + if (this.toolbox.show) { + this.toolbox.show = false } - getChart(this.chartId).setOption(option) }, showSelectedSeries () { if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') } this.legends.forEach((item, index) => { - if (index == this.tooltip.clickIndex) { + if (index == this.toolbox.clickIndex) { getChart(this.chartId).dispatchAction({ type: 'legendSelect', name: item.name @@ -749,7 +729,7 @@ export default { }) } }) - this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex) + this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex) this.$refs.legend.isGrey = this.isGrey // 点击后 处理Y轴的刻度边的 diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index aa320052f..39030449e 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -14,20 +14,20 @@ :series="series" :is-fullscreen="isFullscreen" ></chart-legend> - - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div> + <!-- toolbox --> + <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div> <div class="chart-canvas-tooltip-content"> <div>value</div> <div> - <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> - <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> + <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block"> + <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i> </div> - <div style="display: inline-block">{{tooltip.value}}</div> + <div style="display: inline-block">{{toolbox.value}}</div> </div> </div> <!-- dataLink --> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div class="chart-dataLink-list"> <!-- 复制表达式 --> <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr"> <i class="nz-icon nz-icon-override"></i> @@ -127,12 +127,6 @@ export default { this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) { myChart.on('click', this.chartClick) - myChart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow && params.dataIndex) { - const e = params.event.event - e.stopPropagation() - } - }) } this.isInit = false }, 200) @@ -201,57 +195,46 @@ export default { </div> ` }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['treemap-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['treemap-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) }, chartClick (params) { if (!params.dataIndex) { return } // 点击父节点(空白间隙) - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' - } - } - getChart(this.chartId).setOption(option) - this.tooltip.title = params.data.alias - this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue - 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.expressionIndex + getChart(this.chartId).dispatchAction({ + type: 'hideTip' + }) + this.toolbox.title = params.data.alias + this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue + this.toolbox.mapping = params.data.mapping + this.toolbox.show = true + this.toolbox.metric.labels = params.data.labels + this.toolbox.metric.expressionIndex = params.data.expressionIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) }, clickout () { - if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:visible;' - } - } - getChart(this.chartId).setOption(option) + if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) { + this.toolbox.show = false } } }, diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js index 3898e0fcd..64a9553a2 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartBar.js +++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js @@ -7,7 +7,8 @@ const chartBarOption = { z: 9, animation: false, appendToBody: true, - className: 'chart-bar' + className: 'chart-bar', + hideDelay: 0 }, legend: { show: false diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js index 9089b7c2f..a6ee55528 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js +++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js @@ -7,7 +7,8 @@ const chartGaugeOption = { z: 9, animation: false, appendToBody: true, - className: 'chart-gauge' + className: 'chart-gauge', + hideDelay: 0 }, legend: { show: false diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js index 6435982da..25c7940aa 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js @@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = { label: { show: false } - } + }, + hideDelay: 0 }, dataZoom: [ { diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index 10842331a..fa3d72742 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -21,7 +21,8 @@ const chartTreemapOption = { formatUtil.encodeHTML(treePath.join('/')) + '</div>' ].join('') - } + }, + hideDelay: 0 }, series: [ { diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 39928edea..7386b6a5a 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -31,8 +31,15 @@ export default { title: 0, value: 0, mapping: {}, + show: false + }, + toolbox: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, show: false, - dataLinkShow: '', metric: {} } } @@ -465,10 +472,10 @@ 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] + if (this.toolbox.metric.labels[label]) { + return this.toolbox.metric.labels[label] } else { - return this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || '' + return this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || '' } }) if (data.openIn === 'newTab') { @@ -479,7 +486,7 @@ export default { this.clickout() }, copyExpr () { - const expr = this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || '' + const expr = this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || '' this.$copyText(expr).then(() => { this.$message.success({ message: this.$t('overall.copySuccess') }) this.clickout() diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index 4913de8c8..ce840a534 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -23,9 +23,9 @@ </div> </div> - <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-expolre-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> - <div v-html="tooltip.tooltipHtml"></div> - <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> + <div :id="`chart-toolbox-${chartId}`" class="chart-expolre-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout"> + <div v-html="toolbox.tooltipHtml"></div> + <div class="chart-dataLink-list"> <!-- 只有一条数据时显示 --> <div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries"> <i class="nz-icon nz-icon-a-Showallseries"></i> @@ -83,14 +83,13 @@ export default { chartDot: 2, theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light', cursorDefault: false, - tooltip: { + toolbox: { x: 0, y: 0, title: 0, value: 0, mapping: {}, show: false, - dataLinkShow: '', metric: {}, activeIndex: undefined, clickIndex: undefined @@ -263,12 +262,6 @@ export default { }) this.chart.on('click', this.chartClick) - this.chart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) // 鼠标滑过当前symbol 改变样式 this.chart.on('mousemove', (params) => { @@ -290,7 +283,7 @@ export default { dataIndex: params.dataIndex } ) - this.tooltip.activeIndex = params.seriesIndex + this.toolbox.activeIndex = params.seriesIndex }) this.chart.on('mouseout', (params) => { const option = this.chart.getOption() @@ -303,7 +296,7 @@ export default { }) }) this.chart.setOption({ series }) - this.tooltip.activeIndex = undefined + this.toolbox.activeIndex = undefined }) } @@ -549,7 +542,7 @@ export default { showFlag = showFlag || item.value[1] if (!isNaN(item.value[1] + '')) { const val = Number(item.value[1]) - str += `<div class="${(this.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">` + str += `<div class="${(this.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">` str += `<div class="row__label"> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> <span>${alias || item.seriesName}</span> @@ -723,9 +716,9 @@ export default { oldDot } }, - datalinkPosition (e) { + toolboxPosition (e) { this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top if (box) { @@ -734,22 +727,15 @@ export default { const parent = chartDom.parentElement const parClientWidth = parent.clientWidth// 可视宽度 if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 10 + this.toolbox.x = left + 10 } else { - this.tooltip.x = left - boxWidth + this.toolbox.x = left - boxWidth } - this.tooltip.y = top + 10 + this.toolbox.y = top + 10 } }) }, chartClick (params) { - const option = { - tooltip: { - extraCssText: 'z-index:1000;visibility:hidden;transition:none;', - hideDelay: 0 - } - } - this.chart.setOption(option) this.chart.dispatchAction({ type: 'hideTip' }) @@ -770,7 +756,7 @@ export default { } const val = formatScientificNotation(params.value[1], paramsDot) const color = this.colors[params.seriesIndex] - this.tooltip.tooltipHtml = ` + this.toolbox.tooltipHtml = ` <div class="nz-chart__tooltip"> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip__row"> @@ -784,25 +770,17 @@ export default { </div> </div> ` - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.clickIndex = params.seriesIndex + this.toolbox.show = true + this.toolbox.clickIndex = params.seriesIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) }, clickout () { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:1000;visibility:visible;' - } - } - this.chart.setOption(option) + this.toolbox.show = false }, showSelectedSeries () { this.legend.forEach((item, index) => { - if (index == this.tooltip.clickIndex) { + if (index == this.toolbox.clickIndex) { this.chart.dispatchAction({ type: 'legendSelect', name: item.name @@ -818,7 +796,7 @@ export default { this.legend = this.legend.map((item, index) => { return { ...item, - isGray: index !== this.tooltip.clickIndex + isGray: index !== this.toolbox.clickIndex } }) this.clickout() diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index c43d04b60..de2d120ad 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -76,14 +76,15 @@ const commonOption = { tooltip: { trigger: 'axis', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;', backgroundColor: 'rgba(221,228,237,1)', borderColor: 'rgba(221,228,237,1)', textStyle: { color: '#000' }, axisPointer: { snap: false, animation: false - } + }, + hideDelay: 0 // formatter:null, // position:null, }, |