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

Merge branch 'dev-3.8' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.8

Browse Source
This commit is contained in:
zhangyu
2023-10-16 18:53:17 +08:00
parent e9c98bcc74 edc1cbe665
commit b0fc23ef1e
21 changed files with 455 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -683,10 +683,10 @@
} }
} }
.chart-dataLink-tooltip{ .chart-toolbox{
position: absolute !important; position: absolute !important;
padding-bottom: 2px !important; padding-bottom: 2px !important;
z-index: 999999999; z-index: 9999;
pointer-events: auto; pointer-events: auto;
.chart-dataLink-list{ .chart-dataLink-list{
width: calc(100% + 20px); width: calc(100% + 20px);

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

@@ -14,20 +14,20 @@
:series="series" :series="series"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
></chart-legend> ></chart-legend>
<!-- toolbox -->
<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 :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="tooltip.title">{{tooltip.title}}</div> <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div> <div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
</div> </div>
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{toolbox.value}}</div>
</div> </div>
</div> </div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -160,12 +160,6 @@ export default {
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) { if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
myChart.on('click', this.chartClick) myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
} }
this.isInit = false this.isInit = false
}, 200) }, 200)
@@ -231,56 +225,45 @@ export default {
</div> </div>
` `
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['bar-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['bar-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['bar-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (params) { chartClick (params) {
const option = { getChart(this.chartId).dispatchAction({
tooltip: { type: 'hideTip'
extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' })
} 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
getChart(this.chartId).setOption(option) this.toolbox.mapping = params.data.mapping
this.tooltip.title = params.data.alias this.toolbox.show = true
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.toolbox.metric.labels = params.data.labels
this.tooltip.mapping = params.data.mapping this.toolbox.metric.expressionIndex = params.data.expressionIndex
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:visible;'
}
}
getChart(this.chartId).setOption(option)
} }
} }
}, },

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

@@ -6,7 +6,8 @@
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <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> <svg :id="`bubble-svg-${chartId}`" width="100%" height="100%"></svg>
</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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -19,8 +20,23 @@
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{tooltip.value}}</div>
</div> </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 --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -194,7 +210,6 @@ export default {
bubbles.on('mousemove', this.bubbleMove) bubbles.on('mousemove', this.bubbleMove)
bubbles.on('mouseleave', this.bubbleLeave) bubbles.on('mouseleave', this.bubbleLeave)
bubbles.on('click', this.chartClick) bubbles.on('click', this.chartClick)
bubbles.on('mousedown', this.chartMousedown)
}, },
// 处理label // 处理label
bubbleFormatterLabel (node) { bubbleFormatterLabel (node) {
@@ -246,7 +261,6 @@ export default {
} }
}, },
bubbleEnter (e, node) { // 移入气泡 bubbleEnter (e, node) { // 移入气泡
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = node.data.alias 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.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 this.tooltip.mapping = node.data.mapping
@@ -254,12 +268,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
bubbleMove (e) { // 气泡内移动 bubbleMove (e) { // 气泡内移动
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
bubbleLeave () { // 移出气泡 bubbleLeave () { // 移出气泡
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -297,55 +309,49 @@ export default {
this.svg.selectAll('.bubble').on('mousemove', null) this.svg.selectAll('.bubble').on('mousemove', null)
this.svg.selectAll('.bubble').on('mouseleave', null) this.svg.selectAll('.bubble').on('mouseleave', null)
this.svg.selectAll('.bubble').on('click', null) this.svg.selectAll('.bubble').on('click', null)
this.svg.selectAll('.bubble').on('mousedown', null)
this.svg.selectAll('g').remove() this.svg.selectAll('g').remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['bubble-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['bubble-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['bubble-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias this.tooltip.show = false
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.toolbox.title = data.data.alias
this.tooltip.show = true 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.tooltip.dataLinkShow = true this.toolbox.mapping = data.data.mapping
this.tooltip.metric.labels = data.data.labels this.toolbox.show = true
this.tooltip.metric.expressionIndex = data.data.expressionIndex this.toolbox.metric.labels = data.data.labels
this.datalinkPosition(e) this.toolbox.metric.expressionIndex = data.data.expressionIndex
} this.toolboxPosition(e)
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -15,8 +15,8 @@
@clickLegendD3="clickLegendD3" @clickLegendD3="clickLegendD3"
@hoverLegendD3="hoverLegendD3" @hoverLegendD3="hoverLegendD3"
></chart-legend> ></chart-legend>
<!-- tooltip -->
<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 :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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -33,8 +33,27 @@
<div>percent</div> <div>percent</div>
<div>{{tooltip.percent}}%</div> <div>{{tooltip.percent}}%</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>
<div class="chart-canvas-tooltip-content">
<div>percent</div>
<div>{{toolbox.percent}}%</div>
</div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -237,7 +256,6 @@ export default {
.on('mousemove', this.doughnutMove) .on('mousemove', this.doughnutMove)
.on('mouseleave', this.doughnutLeave) .on('mouseleave', this.doughnutLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.transition().duration(animate === true ? 600 : 0) .transition().duration(animate === true ? 600 : 0)
.attrTween('d', function (d) { .attrTween('d', function (d) {
const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -263,7 +281,6 @@ export default {
.on('mousemove', this.doughnutMove) .on('mousemove', this.doughnutMove)
.on('mouseleave', this.doughnutLeave) .on('mouseleave', this.doughnutLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.style('opacity', 0) .style('opacity', 0)
.html((d) => { .html((d) => {
return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -324,7 +341,6 @@ export default {
} }
}, },
doughnutEnter (e, node) { doughnutEnter (e, node) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = node.data.alias 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.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 this.tooltip.percent = node.percent
@@ -333,12 +349,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
doughnutMove (e) { doughnutMove (e) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
doughnutLeave () { doughnutLeave () {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -397,62 +411,56 @@ export default {
this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mousemove', null)
this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('mouseleave', null)
this.svg.selectAll('path').on('click', 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('mouseover', null)
this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseout', null)
this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mouseenter', null)
this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('click', null) this.svg.selectAll('foreignObject').on('click', null)
this.svg.selectAll('foreignObject').on('mousedown', null)
this.svg.remove() this.svg.remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['doughnut-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['doughnut-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['doughnut-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias this.tooltip.show = false
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.toolbox.title = data.data.alias
this.tooltip.show = true 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.tooltip.dataLinkShow = true this.toolbox.percent = data.percent
this.tooltip.metric.labels = data.data.labels this.toolbox.mapping = data.data.mapping
this.tooltip.metric.expressionIndex = data.data.expressionIndex this.toolbox.show = true
this.datalinkPosition(e) this.toolbox.metric.labels = data.data.labels
} this.toolbox.metric.expressionIndex = data.data.expressionIndex
}, this.toolboxPosition(e)
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -6,8 +6,8 @@
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <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> <svg :id="`funnel-svg-${chartId}`" width="100%" height="100%"></svg>
</div> </div>
<!-- tooltip -->
<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 :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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -20,8 +20,23 @@
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{tooltip.value}}</div>
</div> </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 --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -197,7 +212,6 @@ export default {
this.chartLeave() this.chartLeave()
}) })
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
function getPoints (topWidth, bottomWidth, height) { function getPoints (topWidth, bottomWidth, height) {
const points = [] const points = []
@@ -234,7 +248,6 @@ export default {
this.chartLeave() this.chartLeave()
}) })
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.style('opacity', 0) .style('opacity', 0)
.transition('opacity').duration(animate === true ? 600 : 0) .transition('opacity').duration(animate === true ? 600 : 0)
.style('opacity', 1) .style('opacity', 1)
@@ -299,7 +312,6 @@ export default {
} }
}, },
chartEnter (e, data) { chartEnter (e, data) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = data.alias 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.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.mapping = data.mapping
@@ -307,12 +319,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
chartMove (e) { chartMove (e) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
chartLeave () { chartLeave () {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -388,60 +398,53 @@ export default {
this.svg.selectAll('.trap').on('mousemove', null) this.svg.selectAll('.trap').on('mousemove', null)
this.svg.selectAll('.trap').on('mouseleave', null) this.svg.selectAll('.trap').on('mouseleave', null)
this.svg.selectAll('.trap').on('click', 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('mouseover', null)
this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('click', null) this.svg.selectAll('foreignObject').on('click', null)
this.svg.selectAll('foreignObject').on('mousedown', null)
this.svg.selectAll('g').remove() this.svg.selectAll('g').remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['funnel-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['funnel-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['funnel-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias this.tooltip.show = false
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.toolbox.title = data.alias
this.tooltip.show = true this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.dataLinkShow = true this.toolbox.mapping = data.mapping
this.tooltip.metric.labels = data.labels this.toolbox.show = true
this.tooltip.metric.expressionIndex = data.expressionIndex this.toolbox.metric.labels = data.labels
this.datalinkPosition(e) this.toolbox.metric.expressionIndex = data.expressionIndex
} this.toolboxPosition(e)
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -18,19 +18,19 @@
{{item.alias}} {{item.alias}}
</div> </div>
</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 :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="tooltip.title">{{tooltip.title}}</div> <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div> <div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
</div> </div>
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{toolbox.value}}</div>
</div> </div>
</div> </div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -242,12 +242,6 @@ export default {
myChart.setOption(option) myChart.setOption(option)
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
myChart.on('click', this.chartClick) myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
} }
this.chartInstances.push(myChart) this.chartInstances.push(myChart)
}) })
@@ -284,60 +278,47 @@ export default {
</div> </div>
` `
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 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 const top = e.pageY - this.$refs['chart-gauge-box' + this.chartInfo.id].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (params) { chartClick (params) {
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:hidden;transition:none;'
}
}
this.chartInstances.forEach(item => { this.chartInstances.forEach(item => {
item.setOption(option) item.dispatchAction({
type: 'hideTip'
})
}) })
this.tooltip.title = params.data.alias this.toolbox.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.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.tooltip.mapping = params.data.mapping this.toolbox.mapping = params.data.mapping
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.metric.labels = params.data.label
this.tooltip.metric.labels = params.data.label this.toolbox.metric.expressionIndex = params.data.expressionIndex
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:visible;'
}
}
this.chartInstances.forEach(item => {
item.setOption(option)
})
} }
} }
}, },

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

@@ -1,7 +1,8 @@
<template> <template>
<div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;position: relative;"> <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-${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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -14,8 +15,23 @@
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{tooltip.value}}</div>
</div> </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 --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -190,14 +206,12 @@ export default {
g.on('mousemove', self.hexagonMove.bind(self, point)) g.on('mousemove', self.hexagonMove.bind(self, point))
g.on('mouseleave', self.hexagonOut.bind(self, point)) g.on('mouseleave', self.hexagonOut.bind(self, point))
g.on('click', self.chartClick.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) // 文本 self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本
data[i].fcolor = color data[i].fcolor = color
} }
return this.svg.node() return this.svg.node()
}, },
hexagonOver (that, e) { // 移入六边形 hexagonOver (that, e) { // 移入六边形
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = that.alias 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.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 this.tooltip.mapping = that.mapping
@@ -205,12 +219,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
hexagonMove (that, e) { // 六边形内移动 hexagonMove (that, e) { // 六边形内移动
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
hexagonOut () { hexagonOut () {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -435,7 +447,6 @@ export default {
this.svg.selectAll('g').on('mouseenter', null) this.svg.selectAll('g').on('mouseenter', null)
this.svg.selectAll('g').on('mouseleave', null) this.svg.selectAll('g').on('mouseleave', null)
this.svg.selectAll('g').on('click', null) this.svg.selectAll('g').on('click', null)
this.svg.selectAll('g').on('mousedown', null)
this.svg.remove() this.svg.remove()
this.svg = null this.svg = null
} }
@@ -453,50 +464,45 @@ export default {
}) })
}, 50) }, 50)
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().left
const top = e.pageY - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().top const top = e.pageY - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (data, e) { chartClick (data, e) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias this.tooltip.show = false
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.toolbox.title = data.alias
this.tooltip.show = true this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue
this.tooltip.dataLinkShow = true this.toolbox.mapping = data.mapping
this.tooltip.metric.labels = data.metrics this.toolbox.show = true
this.tooltip.metric.expressionIndex = data.expressionIndex this.toolbox.metric.labels = data.metrics
this.datalinkPosition(e) this.toolbox.metric.expressionIndex = data.expressionIndex
} this.toolboxPosition(e)
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -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;"> <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> <svg :id="`rank-svg-${chartId}`" width="100%" style="vertical-align: top;"></svg>
</div> </div>
<!-- tooltip -->
<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 :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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -24,8 +24,27 @@
<div>rank</div> <div>rank</div>
<div>{{tooltip.rank+1}}</div> <div>{{tooltip.rank+1}}</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>
<div class="chart-canvas-tooltip-content">
<div>rank</div>
<div>{{toolbox.rank+1}}</div>
</div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -177,7 +196,6 @@ export default {
.on('mousemove', this.rankMove) .on('mousemove', this.rankMove)
.on('mouseleave', this.rankLeave) .on('mouseleave', this.rankLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
bars.exit().remove() bars.exit().remove()
// 文本标签 // 文本标签
@@ -191,7 +209,6 @@ export default {
.on('mousemove', this.rankMove) .on('mousemove', this.rankMove)
.on('mouseleave', this.rankLeave) .on('mouseleave', this.rankLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.html((d) => { .html((d) => {
return this.rankFormatterLabel(d) return this.rankFormatterLabel(d)
}) })
@@ -253,7 +270,6 @@ export default {
} }
}, },
rankEnter (e, data) { // 移入 rankEnter (e, data) { // 移入
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = data.alias 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.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.mapping = data.mapping
@@ -262,12 +278,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
rankMove (e) { // 移动 rankMove (e) { // 移动
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
rankLeave () { // 移出 rankLeave () { // 移出
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -305,60 +319,54 @@ export default {
this.svg.selectAll('rect').on('mousemove', null) this.svg.selectAll('rect').on('mousemove', null)
this.svg.selectAll('rect').on('mouseleave', null) this.svg.selectAll('rect').on('mouseleave', null)
this.svg.selectAll('rect').on('click', 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('mouseenter', null)
this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('click', null) this.svg.selectAll('foreignObject').on('click', null)
this.svg.selectAll('foreignObject').on('mousedown', null)
this.svg.selectAll('g').remove() this.svg.selectAll('g').remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['rank-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['rank-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['rank-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.alias this.tooltip.show = false
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.toolbox.title = data.alias
this.tooltip.show = true this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.dataLinkShow = true this.toolbox.mapping = data.mapping
this.tooltip.metric.labels = data.labels this.toolbox.rank = data.rank
this.tooltip.metric.expressionIndex = data.expressionIndex this.toolbox.show = true
this.datalinkPosition(e) this.toolbox.metric.labels = data.labels
} this.toolbox.metric.expressionIndex = data.expressionIndex
}, this.toolboxPosition(e)
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -16,7 +16,8 @@
@hoverLegendD3="hoverLegendD3" @hoverLegendD3="hoverLegendD3"
></chart-legend> ></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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -33,8 +34,27 @@
<div>percent</div> <div>percent</div>
<div>{{tooltip.percent}}%</div> <div>{{tooltip.percent}}%</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>
<div class="chart-canvas-tooltip-content">
<div>percent</div>
<div>{{toolbox.percent}}%</div>
</div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -102,16 +122,6 @@ export default {
chartId: '', chartId: '',
roseData: [], roseData: [],
selectData: [], selectData: [],
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
percent: 0,
mapping: {},
show: false,
dataLinkShow: false
},
svg: null, svg: null,
drawing: false drawing: false
} }
@@ -263,7 +273,6 @@ export default {
.on('mousemove', this.roseMove) .on('mousemove', this.roseMove)
.on('mouseleave', this.roseLeave) .on('mouseleave', this.roseLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.transition().duration(animate === true ? 600 : 0) .transition().duration(animate === true ? 600 : 0)
.attrTween('d', function (d) { .attrTween('d', function (d) {
const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -289,7 +298,6 @@ export default {
.on('mousemove', this.roseMove) .on('mousemove', this.roseMove)
.on('mouseleave', this.roseLeave) .on('mouseleave', this.roseLeave)
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
.style('opacity', 0) .style('opacity', 0)
.html((d) => { .html((d) => {
return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -350,7 +358,6 @@ export default {
} }
}, },
roseEnter (e, node) { // 移入气泡 roseEnter (e, node) { // 移入气泡
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = node.data.alias 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.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 this.tooltip.percent = node.percent
@@ -359,12 +366,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
roseMove (e) { // 气泡内移动 roseMove (e) { // 气泡内移动
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
roseLeave () { // 移出气泡 roseLeave () { // 移出气泡
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -424,62 +429,56 @@ export default {
this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mousemove', null)
this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('mouseleave', null)
this.svg.selectAll('path').on('click', 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('mouseover', null)
this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseout', null)
this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mouseenter', null)
this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null) this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('click', null) this.svg.selectAll('foreignObject').on('click', null)
this.svg.selectAll('foreignObject').on('mousedown', null)
this.svg.remove() this.svg.remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['rose-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['rose-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['rose-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.data.alias this.tooltip.show = false
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.toolbox.title = data.data.alias
this.tooltip.show = true 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.tooltip.dataLinkShow = true this.toolbox.percent = data.percent
this.tooltip.metric.labels = data.data.labels this.toolbox.mapping = data.data.mapping
this.tooltip.metric.expressionIndex = data.data.expressionIndex this.toolbox.show = true
this.datalinkPosition(e) this.toolbox.metric.labels = data.data.labels
} this.toolbox.metric.expressionIndex = data.data.expressionIndex
}, this.toolboxPosition(e)
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -7,8 +7,8 @@
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"> <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> <svg :id="`sankey-svg-${chartId}`" width="100%" height="100%"></svg>
</div> </div>
<!-- tooltip -->
<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 :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"> <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
@@ -21,8 +21,23 @@
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{tooltip.value}}</div>
</div> </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 --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -273,7 +288,6 @@ export default {
hoverNodes.forEach((index) => { hoverNodes.forEach((index) => {
chart.selectAll('[index=' + index + ']').style('fill-opacity', '1').selectAll('foreignObject').style('opacity', '1') 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.title = d.source.node + ' ——> ' + d.target.node
this.tooltip.value = d.showValue this.tooltip.value = d.showValue
@@ -282,19 +296,16 @@ export default {
this.setPosition(e) this.setPosition(e)
}) })
.on('mousemove', (e) => { .on('mousemove', (e) => {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}) })
.on('mouseleave', () => { .on('mouseleave', () => {
chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5')
chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1')
if (this.tooltip.dataLinkShow) { return }
// 隐藏悬浮框 // 隐藏悬浮框
this.tooltip.show = false this.tooltip.show = false
}) })
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
// 划过节点 // 划过节点
chart.selectAll('.node') chart.selectAll('.node')
@@ -306,7 +317,6 @@ export default {
.style('stroke-opacity', '0.8') .style('stroke-opacity', '0.8')
.selectAll('foreignObject') .selectAll('foreignObject')
.style('opacity', '1') .style('opacity', '1')
if (this.tooltip.dataLinkShow) { return }
// 显示悬浮框 // 显示悬浮框
this.tooltip.title = d.node 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 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) this.setPosition(e)
}) })
.on('mousemove', (e) => { .on('mousemove', (e) => {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}) })
.on('mouseleave', () => { .on('mouseleave', () => {
chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5')
chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1')
if (this.tooltip.dataLinkShow) { return }
// 隐藏悬浮框 // 隐藏悬浮框
this.tooltip.show = false this.tooltip.show = false
}) })
.on('click', this.chartClick) .on('click', this.chartClick)
.on('mousedown', this.chartMousedown)
}, },
setPosition (e) { setPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
@@ -413,60 +420,53 @@ export default {
this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mousemove', null)
this.svg.selectAll('path').on('mouseleave', null) this.svg.selectAll('path').on('mouseleave', null)
this.svg.selectAll('path').on('click', 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('mouseenter', null)
this.svg.selectAll('.node').on('mousemove', null) this.svg.selectAll('.node').on('mousemove', null)
this.svg.selectAll('.node').on('mouseleave', null) this.svg.selectAll('.node').on('mouseleave', null)
this.svg.selectAll('.node').on('click', null) this.svg.selectAll('.node').on('click', null)
this.svg.selectAll('.node').on('mousedown', null)
this.svg.selectAll('g').remove() this.svg.selectAll('g').remove()
this.svg = null this.svg = null
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['sankey-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['sankey-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['sankey-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { 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.show = false
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.toolbox.title = data.node ? data.node : data.source.node + ' ——> ' + data.target.node
this.tooltip.show = true this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
this.tooltip.dataLinkShow = true this.toolbox.mapping = data.mapping
this.tooltip.metric.labels = data.labels this.toolbox.show = true
this.tooltip.metric.expressionIndex = data.expressionIndex this.toolbox.metric.labels = data.labels
this.datalinkPosition(e) this.toolbox.metric.expressionIndex = data.expressionIndex
} this.toolboxPosition(e)
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -8,7 +8,6 @@
@mousemove="statMouseMove" @mousemove="statMouseMove"
@mouseleave="statMouseleave(item)" @mouseleave="statMouseleave(item)"
@click="chartClick($event,item)" @click="chartClick($event,item)"
@mousedown="chartMousedown($event)"
:class="{ :class="{
'only-stat':statData.length===1, 'only-stat':statData.length===1,
'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs') 'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')
@@ -80,7 +79,8 @@
<!-- sparkline --> <!-- sparkline -->
<div class="sparkline" :id="`chart-canvas-${chartId}-${index}`" v-if="chartInfo.param.sparklineMode && chartInfo.param.sparklineMode !== 'none'"></div> <div class="sparkline" :id="`chart-canvas-${chartId}-${index}`" v-if="chartInfo.param.sparklineMode && chartInfo.param.sparklineMode !== 'none'"></div>
</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-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
@@ -91,8 +91,21 @@
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{tooltip.value}}</div>
</div> </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 --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -426,7 +439,6 @@ export default {
}, 100) }, 100)
}, },
statMouseEnter (data, e) { statMouseEnter (data, e) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.title = data.legend 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.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.mapping = data.mapping
@@ -434,12 +446,10 @@ export default {
this.setPosition(e) this.setPosition(e)
}, },
statMouseMove (e) { statMouseMove (e) {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
statMouseleave () { statMouseleave () {
if (this.tooltip.dataLinkShow) { return }
this.tooltip.show = false this.tooltip.show = false
}, },
setPosition (e) { setPosition (e) {
@@ -505,50 +515,45 @@ export default {
} }
return this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none' && item.height > minHeight && item.width > minWidth 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 windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['chart-stat-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['chart-stat-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['chart-stat-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (e, data) { chartClick (e, data) {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') { if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
this.tooltip.title = data.legend this.tooltip.show = false
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.toolbox.title = data.legend
this.tooltip.show = true this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
this.tooltip.dataLinkShow = true this.toolbox.mapping = data.mapping
this.tooltip.metric.labels = data.label this.toolbox.show = true
this.tooltip.metric.expressionIndex = data.expressionIndex this.toolbox.metric.labels = data.label
this.datalinkPosition(e) this.toolbox.metric.expressionIndex = data.expressionIndex
} this.toolboxPosition(e)
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -35,14 +35,13 @@
:title="showValueMapping(scope.row,col.title, col)" :title="showValueMapping(scope.row,col.title, col)"
:class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
@click="chartClick($event,col,scope.row)" @click="chartClick($event,col,scope.row)"
@mousedown="chartMousedown($event)"
> >
<template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']"> <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> <i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
</template> </template>
{{showValueMapping(scope.row,col.title, col)}} {{showValueMapping(scope.row,col.title, col)}}
</div> </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}} {{scope.row.display[col.title + 'display'].display}}
</div> </div>
</template> </template>
@@ -60,14 +59,14 @@
> >
</el-pagination> </el-pagination>
</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 :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="tooltip.title">{{tooltip.title}}</div> <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div>{{tooltip.value}}</div> <div>{{toolbox.value}}</div>
</div> </div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -475,25 +474,25 @@ export default {
} }
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['tabel-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['tabel-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['tabel-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
@@ -507,31 +506,24 @@ export default {
flattenedObject = { ...row[key] } flattenedObject = { ...row[key] }
} }
} }
this.tooltip.title = col.title this.toolbox.title = col.title
if (row.valueMapping && row.valueMapping[col.title + 'mapping']) { 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 { } else {
this.tooltip.value = row.display[col.title + 'display'].display this.toolbox.value = row.display[col.title + 'display'].display
} }
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.metric.labels = {
this.tooltip.metric.labels = {
...flattenedObject.metric, ...flattenedObject.metric,
legend: flattenedObject.$legend legend: flattenedObject.$legend
} }
this.tooltip.metric.expressionIndex = flattenedObject.expressionIndex this.toolbox.metric.expressionIndex = flattenedObject.expressionIndex
this.datalinkPosition(e) this.toolboxPosition(e)
}
},
chartMousedown (e) {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
e.stopPropagation()
} }
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
} }
} }
}, },

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

@@ -22,10 +22,11 @@
:series="series" :series="series"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
></chart-legend> ></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"> <!-- toolbox -->
<div v-html="tooltip.tooltipHtml"></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 v-html="toolbox.tooltipHtml"></div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -85,14 +86,13 @@ export default {
hasRightYAxis: false, hasRightYAxis: false,
chartLoading: false, chartLoading: false,
cursorDefault: false, cursorDefault: false,
tooltip: { toolbox: {
x: 0, x: 0,
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {}, mapping: {},
show: false, show: false,
dataLinkShow: '',
metric: {}, metric: {},
activeIndex: undefined, activeIndex: undefined,
clickIndex: undefined clickIndex: undefined
@@ -277,12 +277,6 @@ export default {
}) })
myChart.on('click', this.chartClick) myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
// 鼠标滑过当前symbol 改变样式 // 鼠标滑过当前symbol 改变样式
myChart.on('mousemove', (params) => { myChart.on('mousemove', (params) => {
this.cursorDefault = false this.cursorDefault = false
@@ -312,7 +306,7 @@ export default {
} }
) )
} }
this.tooltip.activeIndex = params.seriesIndex this.toolbox.activeIndex = params.seriesIndex
}) })
myChart.on('mouseout', (params) => { myChart.on('mouseout', (params) => {
const option = myChart.getOption() const option = myChart.getOption()
@@ -327,7 +321,7 @@ export default {
}) })
myChart.setOption({ series }) myChart.setOption({ series })
} }
this.tooltip.activeIndex = undefined this.toolbox.activeIndex = undefined
}) })
if (!this.isFullscreen) { if (!this.isFullscreen) {
@@ -525,7 +519,7 @@ export default {
// 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示 // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
str += ` 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"> <div class="row__label">
<span class="${className}" style="background-color: ${color};color: ${color}"></span> <span class="${className}" style="background-color: ${color};color: ${color}"></span>
<span>${seriesName}</span> <span>${seriesName}</span>
@@ -626,25 +620,25 @@ export default {
this.hasRightYAxis = true this.hasRightYAxis = true
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
@@ -654,17 +648,9 @@ export default {
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup') 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({ getChart(this.chartId).dispatchAction({
type: 'hideTip' type: 'hideTip'
}) })
// 生成dataLink tooltip
const nameArr = params.seriesName.split('-') const nameArr = params.seriesName.split('-')
if (nameArr.length > 1) { if (nameArr.length > 1) {
nameArr.splice(nameArr.length - 1, 1) nameArr.splice(nameArr.length - 1, 1)
@@ -697,7 +683,7 @@ export default {
className = 'yAxis-icon nz-icon nz-icon-youzongzhou' className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
} }
const color = this.colorList[params.seriesIndex] const color = this.colorList[params.seriesIndex]
this.tooltip.tooltipHtml = ` this.toolbox.tooltipHtml = `
<div class="nz-chart__tooltip"> <div class="nz-chart__tooltip">
<div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
<div class="tooltip__row"> <div class="tooltip__row">
@@ -711,33 +697,27 @@ export default {
</div> </div>
</div> </div>
` `
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.metric.labels = this.series[params.seriesIndex].labels
this.tooltip.metric.labels = this.series[params.seriesIndex].labels this.toolbox.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex
this.tooltip.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex this.toolbox.clickIndex = params.seriesIndex
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.connect('timeSeriesGroup') echarts.connect('timeSeriesGroup')
} }
}, },
clickout () { clickout () {
this.tooltip.show = false if (this.toolbox.show) {
this.tooltip.dataLinkShow = false this.toolbox.show = false
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:visible;'
}
} }
getChart(this.chartId).setOption(option)
}, },
showSelectedSeries () { showSelectedSeries () {
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup') echarts.disconnect('timeSeriesGroup')
} }
this.legends.forEach((item, index) => { this.legends.forEach((item, index) => {
if (index == this.tooltip.clickIndex) { if (index == this.toolbox.clickIndex) {
getChart(this.chartId).dispatchAction({ getChart(this.chartId).dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name 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 this.$refs.legend.isGrey = this.isGrey
// 点击后 处理Y轴的刻度边的 // 点击后 处理Y轴的刻度边的

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

@@ -14,20 +14,20 @@
:series="series" :series="series"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
></chart-legend> ></chart-legend>
<!-- toolbox -->
<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 :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="tooltip.title">{{tooltip.title}}</div> <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div> <div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block"> <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i> <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
</div> </div>
<div style="display: inline-block">{{tooltip.value}}</div> <div style="display: inline-block">{{toolbox.value}}</div>
</div> </div>
</div> </div>
<!-- dataLink --> <!-- 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"> <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> <i class="nz-icon nz-icon-override"></i>
@@ -127,12 +127,6 @@ export default {
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) { if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
myChart.on('click', this.chartClick) 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 this.isInit = false
}, 200) }, 200)
@@ -201,57 +195,46 @@ export default {
</div> </div>
` `
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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 left = e.pageX - this.$refs['treemap-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['treemap-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['treemap-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
}, },
chartClick (params) { chartClick (params) {
if (!params.dataIndex) { return } // 点击父节点(空白间隙) if (!params.dataIndex) { return } // 点击父节点(空白间隙)
const option = { getChart(this.chartId).dispatchAction({
tooltip: { type: 'hideTip'
extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' })
} 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
getChart(this.chartId).setOption(option) this.toolbox.mapping = params.data.mapping
this.tooltip.title = params.data.alias this.toolbox.show = true
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.toolbox.metric.labels = params.data.labels
this.tooltip.mapping = params.data.mapping this.toolbox.metric.expressionIndex = params.data.expressionIndex
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
}, },
clickout () { clickout () {
if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) { if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:visible;'
}
}
getChart(this.chartId).setOption(option)
} }
} }
}, },

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

@@ -7,7 +7,8 @@ const chartBarOption = {
z: 9, z: 9,
animation: false, animation: false,
appendToBody: true, appendToBody: true,
className: 'chart-bar' className: 'chart-bar',
hideDelay: 0
}, },
legend: { legend: {
show: false show: false

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

@@ -7,7 +7,8 @@ const chartGaugeOption = {
z: 9, z: 9,
animation: false, animation: false,
appendToBody: true, appendToBody: true,
className: 'chart-gauge' className: 'chart-gauge',
hideDelay: 0
}, },
legend: { legend: {
show: false show: false

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

@@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = {
label: { label: {
show: false show: false
} }
} },
hideDelay: 0
}, },
dataZoom: [ dataZoom: [
{ {

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

@@ -21,7 +21,8 @@ const chartTreemapOption = {
formatUtil.encodeHTML(treePath.join('/')) + formatUtil.encodeHTML(treePath.join('/')) +
'</div>' '</div>'
].join('') ].join('')
} },
hideDelay: 0
}, },
series: [ series: [
{ {

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

@@ -26,13 +26,20 @@ export default {
series: [], series: [],
dataLink: [], dataLink: [],
tooltip: { tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false
},
toolbox: {
x: 0, x: 0,
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {}, mapping: {},
show: false, show: false,
dataLinkShow: '',
metric: {} metric: {}
} }
} }
@@ -465,10 +472,10 @@ export default {
linkClick (data) { linkClick (data) {
const url = data.url.replace(/(\{\{.+?\}\})/g, (match) => { const url = data.url.replace(/(\{\{.+?\}\})/g, (match) => {
const label = match.substr(match.indexOf('{{') + 2, match.indexOf('}}') - match.indexOf('{{') - 2) const label = match.substr(match.indexOf('{{') + 2, match.indexOf('}}') - match.indexOf('{{') - 2)
if (this.tooltip.metric.labels[label]) { if (this.toolbox.metric.labels[label]) {
return this.tooltip.metric.labels[label] return this.toolbox.metric.labels[label]
} else { } else {
return this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || '' return this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || ''
} }
}) })
if (data.openIn === 'newTab') { if (data.openIn === 'newTab') {
@@ -479,7 +486,7 @@ export default {
this.clickout() this.clickout()
}, },
copyExpr () { 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.$copyText(expr).then(() => {
this.$message.success({ message: this.$t('overall.copySuccess') }) this.$message.success({ message: this.$t('overall.copySuccess') })
this.clickout() this.clickout()

60
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -23,9 +23,9 @@
</div> </div>
</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 :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="tooltip.tooltipHtml"></div> <div v-html="toolbox.tooltipHtml"></div>
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> <div class="chart-dataLink-list">
<!-- 只有一条数据时显示 --> <!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries"> <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> <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -83,14 +83,13 @@ export default {
chartDot: 2, chartDot: 2,
theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light', theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
cursorDefault: false, cursorDefault: false,
tooltip: { toolbox: {
x: 0, x: 0,
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {}, mapping: {},
show: false, show: false,
dataLinkShow: '',
metric: {}, metric: {},
activeIndex: undefined, activeIndex: undefined,
clickIndex: undefined clickIndex: undefined
@@ -263,12 +262,6 @@ export default {
}) })
this.chart.on('click', this.chartClick) this.chart.on('click', this.chartClick)
this.chart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
// 鼠标滑过当前symbol 改变样式 // 鼠标滑过当前symbol 改变样式
this.chart.on('mousemove', (params) => { this.chart.on('mousemove', (params) => {
@@ -290,7 +283,7 @@ export default {
dataIndex: params.dataIndex dataIndex: params.dataIndex
} }
) )
this.tooltip.activeIndex = params.seriesIndex this.toolbox.activeIndex = params.seriesIndex
}) })
this.chart.on('mouseout', (params) => { this.chart.on('mouseout', (params) => {
const option = this.chart.getOption() const option = this.chart.getOption()
@@ -303,7 +296,7 @@ export default {
}) })
}) })
this.chart.setOption({ series }) this.chart.setOption({ series })
this.tooltip.activeIndex = undefined this.toolbox.activeIndex = undefined
}) })
} }
@@ -549,7 +542,7 @@ export default {
showFlag = showFlag || item.value[1] showFlag = showFlag || item.value[1]
if (!isNaN(item.value[1] + '')) { if (!isNaN(item.value[1] + '')) {
const val = Number(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"> 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 style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>
<span>${alias || item.seriesName}</span> <span>${alias || item.seriesName}</span>
@@ -723,9 +716,9 @@ export default {
oldDot oldDot
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
this.$nextTick(() => { 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 left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
if (box) { if (box) {
@@ -734,22 +727,15 @@ export default {
const parent = chartDom.parentElement const parent = chartDom.parentElement
const parClientWidth = parent.clientWidth// 可视宽度 const parClientWidth = parent.clientWidth// 可视宽度
if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框 if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 10 this.toolbox.x = left + 10
} else { } else {
this.tooltip.x = left - boxWidth this.toolbox.x = left - boxWidth
} }
this.tooltip.y = top + 10 this.toolbox.y = top + 10
} }
}) })
}, },
chartClick (params) { chartClick (params) {
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
hideDelay: 0
}
}
this.chart.setOption(option)
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'hideTip' type: 'hideTip'
}) })
@@ -770,7 +756,7 @@ export default {
} }
const val = formatScientificNotation(params.value[1], paramsDot) const val = formatScientificNotation(params.value[1], paramsDot)
const color = this.colors[params.seriesIndex] const color = this.colors[params.seriesIndex]
this.tooltip.tooltipHtml = ` this.toolbox.tooltipHtml = `
<div class="nz-chart__tooltip"> <div class="nz-chart__tooltip">
<div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
<div class="tooltip__row"> <div class="tooltip__row">
@@ -784,25 +770,17 @@ export default {
</div> </div>
</div> </div>
` `
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.clickIndex = params.seriesIndex
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
}, },
clickout () { clickout () {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:visible;'
}
}
this.chart.setOption(option)
}, },
showSelectedSeries () { showSelectedSeries () {
this.legend.forEach((item, index) => { this.legend.forEach((item, index) => {
if (index == this.tooltip.clickIndex) { if (index == this.toolbox.clickIndex) {
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name name: item.name
@@ -818,7 +796,7 @@ export default {
this.legend = this.legend.map((item, index) => { this.legend = this.legend.map((item, index) => {
return { return {
...item, ...item,
isGray: index !== this.tooltip.clickIndex isGray: index !== this.toolbox.clickIndex
} }
}) })
this.clickout() this.clickout()

5
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -76,14 +76,15 @@ const commonOption = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: false, confine: false,
extraCssText: 'z-index:1000;', extraCssText: 'z-index:99999999;',
backgroundColor: 'rgba(221,228,237,1)', backgroundColor: 'rgba(221,228,237,1)',
borderColor: 'rgba(221,228,237,1)', borderColor: 'rgba(221,228,237,1)',
textStyle: { color: '#000' }, textStyle: { color: '#000' },
axisPointer: { axisPointer: {
snap: false, snap: false,
animation: false animation: false
} },
hideDelay: 0
// formatter:null, // formatter:null,
// position:null, // position:null,
}, },