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;
padding-bottom: 2px !important;
z-index: 999999999;
z-index: 9999;
pointer-events: auto;
.chart-dataLink-list{
width: calc(100% + 20px);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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