300 lines
9.0 KiB
JavaScript
300 lines
9.0 KiB
JavaScript
import lodash from 'lodash'
|
||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
|
||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||
export default {
|
||
data () {
|
||
return {
|
||
colorList: [],
|
||
chartDot: 2,
|
||
isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
|
||
legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
|
||
toolboxIconColor: {
|
||
active: '#53a3cb',
|
||
inactive: '#7e7e7e'
|
||
},
|
||
chartId: '',
|
||
isNoData: true,
|
||
series: []
|
||
}
|
||
},
|
||
props: {
|
||
chartInfo: Object,
|
||
chartData: Array,
|
||
chartOption: Object,
|
||
isFullscreen: Boolean,
|
||
showAllData: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
computed: {
|
||
filterTime () {
|
||
return this.$store.getters.getTimeRange
|
||
},
|
||
nowTimeType () {
|
||
return this.$store.getters.getNowTimeType
|
||
},
|
||
chartListId () {
|
||
return this.$store.getters.getChartListId
|
||
}
|
||
},
|
||
methods: {
|
||
handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
|
||
const series = []
|
||
let colorIndex = 0
|
||
this.isNoData = true
|
||
originalDatas.forEach((originalData, expressionIndex) => {
|
||
originalData.forEach((data, dataIndex) => {
|
||
if (colorIndex >= 20 && !this.showAllData) {
|
||
colorIndex++
|
||
return
|
||
}
|
||
this.isNoData = false
|
||
const s = lodash.cloneDeep(seriesTemplate)
|
||
if (s) {
|
||
s.data = data.values
|
||
s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
|
||
if (chartInfo.param.stack) { // 堆叠
|
||
s.stack = 'Total'
|
||
}
|
||
if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
|
||
s.markLine = {
|
||
symbol: 'circle',
|
||
symbolSize: 5
|
||
}
|
||
s.markLine.data = chartInfo.param.thresholds.map(threshold => {
|
||
return {
|
||
yAxis: threshold.value || 0,
|
||
lineStyle: {
|
||
color: threshold.color,
|
||
width: 2,
|
||
type: 'dotted'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
series.push(s)
|
||
colorIndex++
|
||
}
|
||
})
|
||
})
|
||
this.$emit('chartIsNoData', this.isNoData)
|
||
return series
|
||
},
|
||
// 单个legend
|
||
handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) {
|
||
let expressionIndex = expressionIndexs
|
||
let legend = '' // up
|
||
let alias = ''
|
||
if (chartInfo.elements && (expressionIndex >= chartInfo.elements.length)) {
|
||
expressionIndex -= chartInfo.elements.length
|
||
// legend += 'Previous '
|
||
alias += 'Previous '
|
||
}
|
||
if (!data.metric) {
|
||
data.metric = data.stream
|
||
}
|
||
if (data.metric.__name__) {
|
||
legend += `${data.metric.__name__}{`
|
||
}
|
||
const tagKeysArr = Object.keys(data.metric)
|
||
tagKeysArr.forEach(tagKey => {
|
||
if (tagKey !== '__name__') {
|
||
legend += `${tagKey}="${data.metric[tagKey]}",`
|
||
}
|
||
})
|
||
if (legend.endsWith(',')) {
|
||
legend = legend.substr(0, legend.length - 1)
|
||
}
|
||
if (data.metric.__name__) {
|
||
legend += '}'
|
||
}
|
||
// if (!legend && chartInfo.elements) {
|
||
// // legend = chartInfo.elements[expressionIndex].expression
|
||
// legend = ''
|
||
// }
|
||
// 处理legend别名
|
||
alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
|
||
if (!alias) {
|
||
alias = chartInfo.elements[expressionIndex].expression
|
||
}
|
||
if (alias == 'Previous ') {
|
||
alias += chartInfo.elements[expressionIndex].expression
|
||
}
|
||
// proj_status_
|
||
const name = alias + '-' + dataIndex
|
||
|
||
// 若需要统计，处理统计数据
|
||
const statisticsTypes = chartInfo.param.legend ? chartInfo.param.legend.values : ''
|
||
let statistics = []
|
||
if (!lodash.isEmpty(statisticsTypes)) {
|
||
statistics = statisticsTypes.map(type => {
|
||
return { type, value: getMetricTypeValue(data.values, type) }
|
||
})
|
||
}
|
||
if (colorIndex >= 20) {
|
||
const colorRandom = randomcolor()
|
||
this.colorList.push(colorRandom)
|
||
}
|
||
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
|
||
return {
|
||
name,
|
||
alias
|
||
}
|
||
},
|
||
handleLegendAlias (legend, aliasExpression) {
|
||
if (/\{\{.+\}\}/.test(aliasExpression)) {
|
||
const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
|
||
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
|
||
if (!legend) {
|
||
return label
|
||
}
|
||
const reg = new RegExp(label + '=".+?"')
|
||
let value = null
|
||
if (reg.test(legend)) {
|
||
const find = legend.match(reg)[0]
|
||
value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
|
||
}
|
||
return value || ''
|
||
})
|
||
return labelValue
|
||
} else {
|
||
if (!aliasExpression) {
|
||
return ''
|
||
}
|
||
return aliasExpression
|
||
}
|
||
},
|
||
selectMapping (value, valueMapping, show) {
|
||
let mapping = ''
|
||
if (show && valueMapping) {
|
||
valueMapping.forEach(item => {
|
||
if (item.type === 'value') {
|
||
if (value == item.value) {
|
||
mapping = item
|
||
}
|
||
}
|
||
if (item.type === 'range') {
|
||
if (value >= item.from && value < item.to) {
|
||
mapping = item
|
||
}
|
||
}
|
||
if (item.type === 'regx') {
|
||
const reg = new RegExp(item.regx)
|
||
if (reg.test(value)) {
|
||
mapping = item
|
||
}
|
||
}
|
||
})
|
||
}
|
||
return mapping
|
||
},
|
||
mouseEnterChart () {
|
||
const myChart = getChart(this.chartId)
|
||
if (myChart) {
|
||
setTimeout(() => {
|
||
myChart.setOption({
|
||
toolbox: {
|
||
show: true
|
||
}
|
||
})
|
||
}, 300)
|
||
}
|
||
},
|
||
tooltipPosition (point, params, dom, rect, size) {
|
||
dom.style.transform = 'translateZ(999999)'
|
||
const windowWidth = window.innerWidth// 窗口宽度
|
||
const windowHeight = window.innerHeight// 窗口高度
|
||
const windowMouse = getMousePoint()
|
||
// 提示框位置
|
||
let x = 0
|
||
let y = 0
|
||
// 当前鼠标位置
|
||
const pointX = point[0]
|
||
const pointY = point[1]
|
||
// 外层div大小
|
||
const viewWidth = size.viewSize[0]
|
||
// const viewHeight = size.viewSize[1]
|
||
// 提示框大小
|
||
const boxWidth = size.contentSize[0]
|
||
const boxHeight = size.contentSize[1]
|
||
if (!this.isFullscreen) { // 本地显示
|
||
const chartDom = document.getElementById('chart-local-' + this.chartInfo.id)
|
||
if (chartDom) {
|
||
if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||
x = pointX + 15
|
||
} else {
|
||
x = pointX - boxWidth - 15
|
||
}
|
||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||
y = pointY + 15
|
||
} else {
|
||
y = pointY - boxHeight - 10
|
||
}
|
||
return [x, y]
|
||
}
|
||
} else {
|
||
if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||
x = pointX + 10
|
||
} else {
|
||
x = pointX - boxWidth
|
||
}
|
||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||
y = pointY + 15
|
||
} else {
|
||
y = pointY - boxHeight - 10
|
||
}
|
||
return [x, y]
|
||
}
|
||
},
|
||
mouseLeaveChart () {
|
||
const myChart = getChart(this.chartId)
|
||
if (myChart) {
|
||
setTimeout(() => {
|
||
myChart.setOption({
|
||
toolbox: {
|
||
show: false
|
||
}
|
||
})
|
||
}, 300)
|
||
}
|
||
},
|
||
resize () {
|
||
setTimeout(() => {
|
||
getChart(this.chartId) && getChart(this.chartId).resize()
|
||
}, 100)
|
||
}
|
||
},
|
||
watch: {
|
||
chartData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!this.isInit && this.chartOption.color) {
|
||
this.colorList = this.colorList.slice(0, 20)
|
||
this.chartOption.color = this.chartOption.color.slice(0, 20)
|
||
}
|
||
if (!this.isInit) {
|
||
this.initChart(this.chartOption)
|
||
}
|
||
}
|
||
},
|
||
'chartInfo.loaded': {
|
||
immediate: true,
|
||
deep: true,
|
||
handler (n) {
|
||
if (n) {
|
||
this.initChart && this.initChart(this.chartOption)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
|
||
},
|
||
beforeDestroy () {
|
||
getChart(this.chartId) && getChart(this.chartId).dispose()
|
||
setChart(this.chartId, null)
|
||
}
|
||
}
|