From f0079f5d5447c02e7c1eb94d3e86205659d18f05 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 8 Nov 2023 17:08:47 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-3211=20fix=EF=BC=9A=20=E6=B7=BB=E5=8A=A0min?= =?UTF-8?q?=20=20=20max?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/chart/uplot/chartTimeSeries.vue | 100 ++++++++++++++++-- .../chart/chart/uplot/chartTimeSeriesMixin.js | 36 ++++++- .../src/components/chart/chartMixin.js | 3 +- 3 files changed, 128 insertions(+), 11 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue index 74d995961..9aa0e6919 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue @@ -57,10 +57,11 @@ import renderChart from '@/components/chart/renderChart' import { chartLegendPlacement } from '@/components/common/js/constants' import { getChart, setChart, chartCache } from '@/components/common/js/common' import { initColor } from '@/components/chart/chart/tools' -import UPlot from 'uplot/dist/uPlot.cjs' +import UPlot from 'uplot' import chartTimeSeriesMixin from '@/components/chart/chart/uplot/chartTimeSeriesMixin' import chartDataFormat from '@/components/chart/chartDataFormat' import getStackedOpts from './stack' + export default { name: 'chartTimeSeries', components: { @@ -187,7 +188,7 @@ export default { }, drag: { x: true - }, + } }, plugins: [ this.tooltipPlugin({ @@ -248,11 +249,24 @@ export default { // return 50 // }, values: (u, vals, space) => vals.map(v => rightUnitCompute.compute(v, null, -1, decimals)), - incrs: rightIncrs + incrs: rightIncrs, + ticks: { + show: false // true + } } - ] + ], + scales: { + left: { + key: 'left', + time: false + }, + right: { + key: 'right', + time: false + } + } } - if (this.isConnect !== 'none') { + if (this.isConnect !== 'none') { // 是否同步光标 opts.cursor.sync = { key: 'nz' + this.isFullscreen, setSeries: true, @@ -264,16 +278,75 @@ export default { if (this.isStack) { getStackedOpts('', opts, data) } + this.renderMinMax(opts) + console.log(opts) setTimeout(() => { // 延迟加载 保证legend的高度正常 const dom = document.getElementById(`chart-canvas-${this.chartId}`) const width = dom.offsetWidth const height = dom.offsetHeight opts.width = width opts.height = height - this.chart = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`)) - setChart(this.chartId, this.chart) + const chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`)) + setChart(this.chartId, chartUplot) }, 100) }, + renderMinMax (opts) { + let leftMin = this.$lodash.get(this.chartInfo, 'param.min', undefined) + let leftMax = this.$lodash.get(this.chartInfo, 'param.max', undefined) + if (leftMin || leftMax) { + if (leftMin > leftMax) { + const temp = leftMin + leftMin = leftMax + leftMax = temp + } + opts.scales.left.range = (self, initMin, initMax, scaleKey)=>{ + if (typeof (leftMin) === 'undefined') { + if (initMin > 0) { + leftMin = initMin / 2 + } else { + leftMin = initMin * 2 + } + } + if (typeof (leftMax) === 'undefined') { + if (initMax > 0) { + leftMax = initMax * 2 + } else { + leftMax = initMax / 2 + } + } + return [leftMin, leftMax] + } + } + const rightYAxisEnable = this.$lodash.get(this.chartInfo, 'param.enable.rightYAxis', false) + if (rightYAxisEnable) { + let rightMin = this.$lodash.get(this.chartInfo, 'param.rightYAxis.min', undefined) + let rightMax = this.$lodash.get(this.chartInfo, 'param.rightYAxis.max', undefined) + if (rightMin || rightMax) { + if (rightMin > leftMax) { + const temp = rightMin + rightMin = rightMax + rightMax = temp + } + opts.scales.right.range = (self, initMin, initMax, scaleKey)=>{ + if (typeof (rightMin) === 'undefined') { + if (initMin > 0) { + rightMin = initMin / 2 + } else { + rightMin = initMin * 2 + } + } + if (typeof (rightMax) === 'undefined') { + if (initMax > 0) { + rightMax = initMax * 2 + } else { + rightMax = initMax / 2 + } + } + return [rightMin, rightMax] + } + } + } + }, size (self, values, axisIdx, cycleNum) { const axis = self.axes[axisIdx] @@ -371,6 +444,19 @@ export default { }, legendChange (isGrey) { this.isGrey = isGrey + }, + resize () { + setTimeout(() => { + console.log('chartMixinnz') + const dom = this.$refs['timeSeries-chart-box'] + const width = dom.offsetWidth + const legendHeight = this.$lodash.get(this.$refs, 'legend.$el.offsetHeight', 40) + const height = dom.offsetHeight - legendHeight + const u = getChart(this.chartId) + if (u) { + u.setSize({ width, height }) + } + }, 100) } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js index eceb93c8f..85d81f2f8 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js @@ -3,7 +3,6 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import chartDataFormat from '@/components/chart/chartDataFormat' import lodash from 'lodash' import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools' -import uPlot, { Points } from 'uplot' import bus from '@/libs/bus' import moment from 'moment-timezone' import { getChart } from '@/components/common/js/common' @@ -109,7 +108,7 @@ export default { values: (u, v) => series.elements.name + JSON.stringify(series.metric), stroke: this.seriesColor[chartIndex], width: 1 / devicePixelRatio, - expressionIndex: series.expressionIndex + expressionIndex: series.expressionIndex, } if (chartType === 'area') { obj.fill = this.seriesColor[chartIndex] + '20' // 面积图使用 @@ -189,7 +188,7 @@ export default { seriesIndex: self.seriesIdx - 1, yAxisIndex: obj.yAxisIndex, value: [u.data[0][self.dataIdx], value], - seriesName: obj.label + seriesName: obj.label || '' }] } isRender = !!params.length @@ -427,6 +426,11 @@ export default { if (self.dataIdx != null) { setTooltip(u) } } } + ], + drawClear: [ + () => { + self.renderThresholds() + } ] } } @@ -607,6 +611,32 @@ export default { this.toolbox.metric.labels = this.series[params.seriesIndex].labels this.toolbox.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex this.toolbox.clickIndex = params.seriesIndex + }, + renderThresholds () { // 画阈值线 + const u = getChart(this.chartId) + const thresholdsEnable = this.$lodash.get(this.chartInfo, 'param.enable.thresholds', false) + if (!thresholdsEnable || !u) { + return + } + const thresholdsArr = this.$lodash.get(this.chartInfo, 'param.thresholds', []) + const ctx = u.ctx + ctx.save() + const xd = u.data[0] + const i0 = 0 + const i1 = xd.length - 1 + const x0 = u.valToPos(xd[i0], 'x', true) + const x1 = u.valToPos(xd[i1], 'x', true) + thresholdsArr.forEach(item => { + const y0 = u.valToPos(item.value, 'left', true) + const y1 = u.valToPos(item.value, 'left', true) + ctx.beginPath() + ctx.strokeStyle = item.color + ctx.setLineDash([5, 5]) + ctx.moveTo(x0, y0) + ctx.lineTo(x1, y1) + ctx.stroke() + }) + ctx.restore() } } } diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index fc13db86d..28b5cdeeb 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -427,7 +427,8 @@ export default { }, resize () { setTimeout(() => { - getChart(this.chartId) && getChart(this.chartId).resize() + console.log('chartMixin') + // getChart(this.chartId) && getChart(this.chartId).resize() }, 100) }, // 全局变量替换