diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue index 814220810..cc2e18093 100644 --- a/nezha-fronted/src/components/chart/chart.vue +++ b/nezha-fronted/src/components/chart/chart.vue @@ -43,6 +43,12 @@ :chart-info="chartInfo" :chart-option="chartOption" > + @@ -67,7 +73,7 @@ import chartTreemap from './chart/chartTreemap' import chartUrl from './chart/chartUrl' import chartValue from './chart/chartValue' import chartHexagon from './chart/chartHexagon' -import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar } from './chart/tools' +import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap } from './chart/tools' import lodash from 'lodash' export default { @@ -119,6 +125,7 @@ export default { isChartBar, isUrl, isText, + isTreemap, resize () { this.$refs['chart' + this.chartInfo.id].resize() } diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 8053f560f..e10dfee46 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -19,14 +19,12 @@ diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index 265b61b47..3eae94f5a 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -1,4 +1,56 @@ +import * as echarts from 'echarts' +const formatUtil = echarts.format const chartTreemapOption = { - + tooltip: { + formatter: function (info) { + const value = info.value + const treePathInfo = info.treePathInfo + const treePath = [] + for (let i = 1; i < treePathInfo.length; i++) { + treePath.push(treePathInfo[i].name) + } + return [ + '
' + + formatUtil.encodeHTML(treePath.join('/')) + + '
', + 'Disk Usage: ' + formatUtil.addCommas(value) + ' KB' + ].join('') + } + }, + series: [ + { + name: 'Disk Usage', + type: 'treemap', + visibleMin: 10, + label: { + show: true, + formatter: '{b}' + }, + itemStyle: { + borderColor: '#fff' + }, + levels: [ + { + itemStyle: { + borderWidth: 0, + gapWidth: 5 + } + }, + { + itemStyle: { + gapWidth: 1 + } + }, + { + colorSaturation: [0.35, 0.5], + itemStyle: { + gapWidth: 1, + borderColorSaturation: 0.6 + } + } + ], + data: [] + } + ] } export default chartTreemapOption diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js index 5d60d1308..be76d4b2b 100644 --- a/nezha-fronted/src/components/chart/chart/tools.js +++ b/nezha-fronted/src/components/chart/chart/tools.js @@ -67,6 +67,9 @@ export function isUrl (type) { export function isText (type) { return type === chartType.text } +export function isTreemap (type) { + return type === chartType.treemap +} export function initColor (colorNum = 20) { const colorList = [ diff --git a/nezha-fronted/src/components/chart/chartFormat.js b/nezha-fronted/src/components/chart/chartFormat.js new file mode 100644 index 000000000..195b8cf65 --- /dev/null +++ b/nezha-fronted/src/components/chart/chartFormat.js @@ -0,0 +1,65 @@ +export default { + methods: { + pieFormatterLabel (params) { + const self = this + let str = '{color|' + if (this.chartInfo.param.text === 'all') { + str += params.data.name + str += ' : ' + str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.value }) : params.data.value + } + if (this.chartInfo.param.text === 'value') { + str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.value }) : params.data.value + } + if (this.chartInfo.param.text === 'legend') { + str += params.data.name + } + if (this.chartInfo.param.text === 'none') { + str += '' + } + str += '}' + return str + }, + handleDisplay (display, params) { + console.log(params) + if (/\{\{.+\}\}/.test(display)) { + const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) { + const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) + console.log(label) + let value = null + if (params[label]) { + value = params[label] + } + return value || label + }) + return labelValue + } else { + return display + } + }, + getMinMaxFromData (originalDatas) { + let minTime = null + let maxTime = null + let minValue = null + let maxValue = null + // 将数据提为二维数组 + let datas = [] + originalDatas.forEach((originalData, expressionIndex) => { + originalData.forEach((data, dataIndex) => { + datas = [...datas, ...data.values] + }) + }) + const timeSorted = datas.sort((a, b) => { + return a[0] - b[0] + }) + const valueSorted = datas.sort((a, b) => { + return a[1] - b[1] + }) + minTime = timeSorted.length ? timeSorted[0][0] : '' + maxTime = timeSorted.length ? timeSorted[timeSorted.length - 1][0] : '' + minValue = valueSorted.length ? valueSorted[0][1] : '' + maxValue = valueSorted.length ? valueSorted[valueSorted.length - 1][1] : '' + return { minTime, maxTime, minValue, maxValue } + }, + } +} diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index c8a8a5f96..aed184fa2 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -113,22 +113,6 @@ export default { return aliasExpression } }, - handleDisplay (display, params) { - if (/\{\{.+\}\}/.test(display)) { - const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - console.log(label) - let value = null - if (params[label]) { - value = params[label] - } - return value || label - }) - return labelValue - } else { - return display - } - }, selectMapping (value, valueMapping) { let mapping = '' if (valueMapping.show) { @@ -178,6 +162,16 @@ export default { } } }, + watch: { + chartData: { + deep: true, + handler (n) { + if (!this.isInit) { + this.initChart(this.chartOption) + } + } + } + }, mounted () { this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}` }, diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 13eeae8ab..8ef689cf8 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -112,6 +112,8 @@ export default { } }) this.chartData = chartData + }).catch(res => { + console.log(res) }).finally(() => { this.loading = false }) diff --git a/nezha-fronted/src/components/chart/testData.js b/nezha-fronted/src/components/chart/testData.js index 3c82df933..a15bdda07 100644 --- a/nezha-fronted/src/components/chart/testData.js +++ b/nezha-fronted/src/components/chart/testData.js @@ -7,891 +7,891 @@ const chartData = { pages: 1, pageNo: 1, list: [ - { - id: 690483, - name: '123', - panelId: 1243, - groupId: 0, - datasource: 'metrics', - span: 12, - height: 6, - updateBy: 1, - updateAt: '2021-11-10 07:06:09', - type: 'line', - unit: 2, - weight: 0, - param: '{' + - ' "style":"area",' + - ' "showHeader":false,' + - ' "stack":true,' + - ' "legend":{' + - ' "placement":"bottom",' + - ' "values":["min","max","avg","first","last","total"]' + - ' },' + - ' "thresholds":[{' + - ' "color":"#eee",' + - ' "val":"0.9"' + - ' },{' + - ' "color":"#aaa",' + - ' "val":"1.1"' + - ' }],' + - ' "nullType":"zero"' + - '}', - pid: null, - buildIn: 0, - remark: '123', - seq: null, - x: 0, - y: 0, - w: 6, - h: 4, - i: 690483, - elements: [ - { - id: 68527, - chartId: 690483, - // expression: 'up{asset="44.37"}', - expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', - type: 'expert', - legend: '{{asset}}', - buildIn: 0, - seq: null - }, - { - id: 68528, - chartId: 690483, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - { - id: 690500, - name: '233', - panelId: 1243, - groupId: 0, - datasource: 'metrics', - span: 6, - height: 4, - updateBy: 1, - updateAt: '2021-11-10 09:05:13', - type: 'point', - unit: 2, - weight: 1, - param: '{' + - ' "style":"point",' + - ' "showHeader":true,' + - ' "stack":false,' + - ' "legend":{' + - ' "placement":"right"' + - // ' "values":["min","max","avg","first","last","total"]' + - ' },' + - ' "thresholds":[{' + - ' "color":"#ff0000",' + - ' "val":"100"' + - ' },{' + - ' "color":"#00ff00",' + - ' "val":"250"' + - ' }],' + - ' "nullType":"zero"' + - '}', - pid: null, - buildIn: 0, - remark: '', - seq: null, - x: 6, - y: 0, - w: 3, - h: 4, - i: 690484, - elements: [ - { - id: 68542, - chartId: 690500, - expression: '233', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - { - id: 690501, - name: '323', - panelId: 1243, - groupId: 0, - span: 6, - height: 4, - updateBy: 1, - updateAt: '2021-11-10 09:51:06', - type: 'line', - unit: 2, - weight: 2, - datasource: 'metrics', - param: '{' + - ' "style":"line",' + - ' "showHeader":true,' + - ' "stack":true,' + - ' "legend":{' + - ' "placement":"left"' + - // ' "values":["min","max","avg","first","last","total"]' + - ' },' + - ' "thresholds":[{' + - ' "color":"#eee",' + - ' "val":"10.1"' + - ' },{' + - ' "color":"#aaa",' + - ' "val":"base"' + - ' }],' + - ' "nullType":"zero"' + - '}', - pid: null, - buildIn: 0, - remark: '123', - seq: null, - x: 0, - y: 4, - w: 6, - h: 4, - i: 690485, - elements: [ - { - id: 68527, - chartId: 690483, - expression: 'up{asset="44.37"}', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - }, - { - id: 68528, - chartId: 690483, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - { - id: 690502, - name: '123', - panelId: 1243, - groupId: 690501, - span: 12, - height: 4, - updateBy: 1, - updateAt: '2021-11-10 09:51:15', - type: 'line', - unit: 2, - weight: 3, - param: { - last: 0, - legendValue: { - total: 'off', - min: 'off', - avg: 'off', - last: 'off', - max: 'off' - }, - threshold: '123', - valueMapping: { - mapping: [ - { - color: { - bac: '#fff', - text: '#000' - }, - text: '', - value: '' - } - ], - type: 'text' - }, - url: '', - nullType: 'null' - }, - pid: null, - buildIn: 0, - remark: '', - seq: null, - x: 0, - y: 0, - w: 12, - h: 4, - i: 690489, - elements: [ - { - id: 68543, - chartId: 690502, - expression: '123', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 690501, - name: '123', - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - } - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - { - id: 690502, - name: '324', - panelId: 1243, - groupId: 0, - span: 6, - height: 4, - updateBy: 1, - updateAt: '2021-11-10 09:51:06', - type: 'hexagonFigure', - unit: 2, - weight: 2, - datasource: 'misc', - param: '{' + - ' "from":"module",' + - ' "showHeader":true,' + - ' "length":"48",' + - ' "showTooltip": true ,' + - ' "col":"8"' + - '}', - pid: null, - buildIn: 0, - remark: '123', - seq: null, - x: 6, - y: 4, - w: 6, - h: 4, - i: 690502, - elements: [ - { - id: 68527, - chartId: 690483, - expression: 'up{asset="44.37"}', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - }, - { - id: 68528, - chartId: 690483, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - { - id: 690502, - name: '123', - panelId: 1243, - groupId: 690501, - span: 12, - height: 4, - updateBy: 1, - updateAt: '2021-11-10 09:51:15', - type: 'line', - unit: 2, - weight: 3, - param: { - last: 0, - legendValue: { - total: 'off', - min: 'off', - avg: 'off', - last: 'off', - max: 'off' - }, - threshold: '123', - valueMapping: { - mapping: [ - { - color: { - bac: '#fff', - text: '#000' - }, - text: '', - value: '' - } - ], - type: 'text' - }, - url: '', - nullType: 'null' - }, - pid: null, - buildIn: 0, - remark: '', - seq: null, - x: 0, - y: 0, - w: 12, - h: 4, - i: 690489, - elements: [ - { - id: 68543, - chartId: 690502, - expression: '123', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 690501, - name: '123', - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - } - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - { - id: 690487, - name: '123', - panelId: 1243, - groupId: 0, - datasource: 6, - span: 12, - height: 6, - updateBy: 1, - updateAt: '2021-11-10 07:06:09', - type: 'url', - unit: 2, - weight: 0, - param: '{' + - ' "style":"area",' + - ' "showHeader":false,' + - ' "stack":true,' + - ' "legend":{' + - ' "placement":"bottom",' + - ' "values":["min","max","avg","first","last","total"]' + - ' },' + - ' "thresholds":[{' + - ' "color":"#eee",' + - ' "val":"0.9"' + - ' },{' + - ' "color":"#aaa",' + - ' "val":"1.1"' + - ' }],' + - ' "nullType":"zero",' + - ' "url":"http://192.168.36.91"' + - '}', - pid: null, - buildIn: 0, - remark: 'url', - seq: null, - x: 8, - y: 6, - w: 6, - h: 4, - i: 690487, - elements: [ - { - id: 68527, - chartId: 690487, - // expression: 'up{asset="44.37"}', - expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', - type: 'expert', - legend: '{{asset}}', - buildIn: 0, - seq: null - }, - { - id: 68528, - chartId: 690487, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - { - id: 690489, - name: '123', - panelId: 1243, - groupId: 0, - datasource: 5, - span: 12, - height: 6, - updateBy: 1, - updateAt: '2021-11-10 07:06:09', - type: 'text', - unit: 2, - weight: 0, - param: '{' + - ' "style":"area",' + - ' "showHeader":false,' + - ' "stack":true,' + - ' "legend":{' + - ' "placement":"bottom",' + - ' "values":["min","max","avg","first","last","total"]' + - ' },' + - ' "thresholds":[{' + - ' "color":"#eee",' + - ' "val":"0.9"' + - ' },{' + - ' "color":"#aaa",' + - ' "val":"1.1"' + - ' }],' + - ' "nullType":"zero",' + - ' "text": "

ss

"' + - '}', - pid: null, - buildIn: 0, - remark: 'text', - seq: null, - x: 10, - y: 8, - w: 6, - h: 4, - i: 690489, - elements: [ - { - id: 68531, - chartId: 690489, - // expression: 'up{asset="44.37"}', - expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', - type: 'expert', - legend: '{{asset}}', - buildIn: 0, - seq: null - }, - { - id: 68532, - chartId: 690489, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '', - buildIn: 0, - seq: null - } - ], - sync: null, - panel: { - id: 1243, - name: 'test', - createBy: null, - type: null, - link: null, - pid: null, - weight: null, - buildIn: null, - seq: null, - children: null, - parent: null, - chartNum: null - }, - group: { - id: 0, - name: null, - panelId: null, - groupId: null, - span: null, - height: null, - updateBy: null, - updateAt: null, - type: null, - unit: null, - weight: null, - param: null, - pid: null, - buildIn: null, - remark: null, - seq: null, - x: null, - y: null, - elements: null, - sync: null, - panel: null, - group: null, - children: null, - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, - children: [ - - ], - chartNums: null, - asset: null, - varType: null, - varId: null, - varName: null - }, + // { + // id: 690483, + // name: '123', + // panelId: 1243, + // groupId: 0, + // datasource: 'metrics', + // span: 12, + // height: 6, + // updateBy: 1, + // updateAt: '2021-11-10 07:06:09', + // type: 'line', + // unit: 2, + // weight: 0, + // param: '{' + + // ' "style":"area",' + + // ' "showHeader":false,' + + // ' "stack":true,' + + // ' "legend":{' + + // ' "placement":"bottom",' + + // ' "values":["min","max","avg","first","last","total"]' + + // ' },' + + // ' "thresholds":[{' + + // ' "color":"#eee",' + + // ' "val":"0.9"' + + // ' },{' + + // ' "color":"#aaa",' + + // ' "val":"1.1"' + + // ' }],' + + // ' "nullType":"zero"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: '123', + // seq: null, + // x: 0, + // y: 0, + // w: 6, + // h: 4, + // i: 690483, + // elements: [ + // { + // id: 68527, + // chartId: 690483, + // // expression: 'up{asset="44.37"}', + // expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', + // type: 'expert', + // legend: '{{asset}}', + // buildIn: 0, + // seq: null + // }, + // { + // id: 68528, + // chartId: 690483, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // { + // id: 690500, + // name: '233', + // panelId: 1243, + // groupId: 0, + // datasource: 'metrics', + // span: 6, + // height: 4, + // updateBy: 1, + // updateAt: '2021-11-10 09:05:13', + // type: 'point', + // unit: 2, + // weight: 1, + // param: '{' + + // ' "style":"point",' + + // ' "showHeader":true,' + + // ' "stack":false,' + + // ' "legend":{' + + // ' "placement":"right"' + + // // ' "values":["min","max","avg","first","last","total"]' + + // ' },' + + // ' "thresholds":[{' + + // ' "color":"#ff0000",' + + // ' "val":"100"' + + // ' },{' + + // ' "color":"#00ff00",' + + // ' "val":"250"' + + // ' }],' + + // ' "nullType":"zero"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: '', + // seq: null, + // x: 6, + // y: 0, + // w: 3, + // h: 4, + // i: 690484, + // elements: [ + // { + // id: 68542, + // chartId: 690500, + // expression: '233', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // { + // id: 690501, + // name: '323', + // panelId: 1243, + // groupId: 0, + // span: 6, + // height: 4, + // updateBy: 1, + // updateAt: '2021-11-10 09:51:06', + // type: 'line', + // unit: 2, + // weight: 2, + // datasource: 'metrics', + // param: '{' + + // ' "style":"line",' + + // ' "showHeader":true,' + + // ' "stack":true,' + + // ' "legend":{' + + // ' "placement":"left"' + + // // ' "values":["min","max","avg","first","last","total"]' + + // ' },' + + // ' "thresholds":[{' + + // ' "color":"#eee",' + + // ' "val":"10.1"' + + // ' },{' + + // ' "color":"#aaa",' + + // ' "val":"base"' + + // ' }],' + + // ' "nullType":"zero"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: '123', + // seq: null, + // x: 0, + // y: 4, + // w: 6, + // h: 4, + // i: 690485, + // elements: [ + // { + // id: 68527, + // chartId: 690483, + // expression: 'up{asset="44.37"}', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // }, + // { + // id: 68528, + // chartId: 690483, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // { + // id: 690502, + // name: '123', + // panelId: 1243, + // groupId: 690501, + // span: 12, + // height: 4, + // updateBy: 1, + // updateAt: '2021-11-10 09:51:15', + // type: 'line', + // unit: 2, + // weight: 3, + // param: { + // last: 0, + // legendValue: { + // total: 'off', + // min: 'off', + // avg: 'off', + // last: 'off', + // max: 'off' + // }, + // threshold: '123', + // valueMapping: { + // mapping: [ + // { + // color: { + // bac: '#fff', + // text: '#000' + // }, + // text: '', + // value: '' + // } + // ], + // type: 'text' + // }, + // url: '', + // nullType: 'null' + // }, + // pid: null, + // buildIn: 0, + // remark: '', + // seq: null, + // x: 0, + // y: 0, + // w: 12, + // h: 4, + // i: 690489, + // elements: [ + // { + // id: 68543, + // chartId: 690502, + // expression: '123', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 690501, + // name: '123', + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // } + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // { + // id: 690502, + // name: '324', + // panelId: 1243, + // groupId: 0, + // span: 6, + // height: 4, + // updateBy: 1, + // updateAt: '2021-11-10 09:51:06', + // type: 'hexagonFigure', + // unit: 2, + // weight: 2, + // datasource: 'misc', + // param: '{' + + // ' "from":"module",' + + // ' "showHeader":true,' + + // ' "length":"48",' + + // ' "showTooltip": true ,' + + // ' "col":"8"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: '123', + // seq: null, + // x: 6, + // y: 4, + // w: 6, + // h: 4, + // i: 690502, + // elements: [ + // { + // id: 68527, + // chartId: 690483, + // expression: 'up{asset="44.37"}', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // }, + // { + // id: 68528, + // chartId: 690483, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // { + // id: 690502, + // name: '123', + // panelId: 1243, + // groupId: 690501, + // span: 12, + // height: 4, + // updateBy: 1, + // updateAt: '2021-11-10 09:51:15', + // type: 'line', + // unit: 2, + // weight: 3, + // param: { + // last: 0, + // legendValue: { + // total: 'off', + // min: 'off', + // avg: 'off', + // last: 'off', + // max: 'off' + // }, + // threshold: '123', + // valueMapping: { + // mapping: [ + // { + // color: { + // bac: '#fff', + // text: '#000' + // }, + // text: '', + // value: '' + // } + // ], + // type: 'text' + // }, + // url: '', + // nullType: 'null' + // }, + // pid: null, + // buildIn: 0, + // remark: '', + // seq: null, + // x: 0, + // y: 0, + // w: 12, + // h: 4, + // i: 690489, + // elements: [ + // { + // id: 68543, + // chartId: 690502, + // expression: '123', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 690501, + // name: '123', + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // } + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // { + // id: 690487, + // name: '123', + // panelId: 1243, + // groupId: 0, + // datasource: 6, + // span: 12, + // height: 6, + // updateBy: 1, + // updateAt: '2021-11-10 07:06:09', + // type: 'url', + // unit: 2, + // weight: 0, + // param: '{' + + // ' "style":"area",' + + // ' "showHeader":false,' + + // ' "stack":true,' + + // ' "legend":{' + + // ' "placement":"bottom",' + + // ' "values":["min","max","avg","first","last","total"]' + + // ' },' + + // ' "thresholds":[{' + + // ' "color":"#eee",' + + // ' "val":"0.9"' + + // ' },{' + + // ' "color":"#aaa",' + + // ' "val":"1.1"' + + // ' }],' + + // ' "nullType":"zero",' + + // ' "url":"http://192.168.36.91"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: 'url', + // seq: null, + // x: 8, + // y: 6, + // w: 6, + // h: 4, + // i: 690487, + // elements: [ + // { + // id: 68527, + // chartId: 690487, + // // expression: 'up{asset="44.37"}', + // expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', + // type: 'expert', + // legend: '{{asset}}', + // buildIn: 0, + // seq: null + // }, + // { + // id: 68528, + // chartId: 690487, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // { + // id: 690489, + // name: '123', + // panelId: 1243, + // groupId: 0, + // datasource: 5, + // span: 12, + // height: 6, + // updateBy: 1, + // updateAt: '2021-11-10 07:06:09', + // type: 'text', + // unit: 2, + // weight: 0, + // param: '{' + + // ' "style":"area",' + + // ' "showHeader":false,' + + // ' "stack":true,' + + // ' "legend":{' + + // ' "placement":"bottom",' + + // ' "values":["min","max","avg","first","last","total"]' + + // ' },' + + // ' "thresholds":[{' + + // ' "color":"#eee",' + + // ' "val":"0.9"' + + // ' },{' + + // ' "color":"#aaa",' + + // ' "val":"1.1"' + + // ' }],' + + // ' "nullType":"zero",' + + // ' "text": "

ss

"' + + // '}', + // pid: null, + // buildIn: 0, + // remark: 'text', + // seq: null, + // x: 10, + // y: 8, + // w: 6, + // h: 4, + // i: 690489, + // elements: [ + // { + // id: 68531, + // chartId: 690489, + // // expression: 'up{asset="44.37"}', + // expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', + // type: 'expert', + // legend: '{{asset}}', + // buildIn: 0, + // seq: null + // }, + // { + // id: 68532, + // chartId: 690489, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '', + // buildIn: 0, + // seq: null + // } + // ], + // sync: null, + // panel: { + // id: 1243, + // name: 'test', + // createBy: null, + // type: null, + // link: null, + // pid: null, + // weight: null, + // buildIn: null, + // seq: null, + // children: null, + // parent: null, + // chartNum: null + // }, + // group: { + // id: 0, + // name: null, + // panelId: null, + // groupId: null, + // span: null, + // height: null, + // updateBy: null, + // updateAt: null, + // type: null, + // unit: null, + // weight: null, + // param: null, + // pid: null, + // buildIn: null, + // remark: null, + // seq: null, + // x: null, + // y: null, + // elements: null, + // sync: null, + // panel: null, + // group: null, + // children: null, + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, + // children: [ + // + // ], + // chartNums: null, + // asset: null, + // varType: null, + // varId: null, + // varName: null + // }, { id: 690506, name: '123', @@ -902,7 +902,7 @@ const chartData = { height: 4, updateBy: 1, updateAt: '2021-11-10 07:06:09', - type: 'bar', + type: 'treemap', unit: 2, weight: 0, param: JSON.stringify( @@ -933,23 +933,24 @@ const chartData = { id: 68527, chartId: 690483, // expression: 'up{asset="44.37"}', - expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', + // expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")', + expression: '123', type: 'expert', legend: '{{asset}}', buildIn: 0, seq: null, name: 'A' }, - { - id: 68528, - chartId: 690483, - expression: 'Hadoop_HBase_Healthy', - type: 'expert', - legend: '{{asset}}', - buildIn: 0, - seq: null, - name: 'B' - } + // { + // id: 68528, + // chartId: 690483, + // expression: 'Hadoop_HBase_Healthy', + // type: 'expert', + // legend: '{{asset}}', + // buildIn: 0, + // seq: null, + // name: 'B' + // } ], sync: null, panel: { diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index d76aca5cc..4d6fdd2e5 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -66,7 +66,7 @@ + :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"> - - - + > - + > - + >
Display
- + @@ -608,7 +608,7 @@
Title
- +
@@ -627,7 +627,7 @@
Display
- + diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue index d01e1019e..17d577ac9 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue @@ -67,7 +67,7 @@ class="form-item--half-width" prop="param.limit" > - +
@@ -250,49 +250,49 @@ - + > - + > - + >
Display
- + @@ -353,7 +353,7 @@
Title
- +
@@ -372,7 +372,7 @@
Display
- +