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

NEZ-3361 feat：dashboard chart 增加 配色方案配置项

Browse Source
This commit is contained in:
zyh
2023-12-15 14:40:12 +08:00
parent edf489fd50
commit 8ed2f1492a
31 changed files with 756 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
nezha-fronted/package-lock.json generated
View File

@@ -10354,6 +10354,14 @@
"d3-zoom": "2"
},
"dependencies": {
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
},
"d3-zoom": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
@@ -10391,6 +10399,16 @@
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
},
"dependencies": {
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
}
}
},
"d3-chord": {
@@ -10498,11 +10516,11 @@
"integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
},
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"requires": {
"d3-color": "1 - 2"
"d3-color": "1 - 3"
}
},
"d3-path": {
@@ -10559,6 +10577,16 @@
"d3-interpolate": "1.2.0 - 2",
"d3-time": "^2.1.1",
"d3-time-format": "2 - 3"
},
"dependencies": {
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
}
}
},
"d3-scale-chromatic": {
@@ -10568,6 +10596,16 @@
"requires": {
"d3-color": "1 - 2",
"d3-interpolate": "1 - 2"
},
"dependencies": {
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
}
}
},
"d3-selection": {
@@ -10614,6 +10652,16 @@
"d3-ease": "1 - 2",
"d3-interpolate": "1 - 2",
"d3-timer": "1 - 2"
},
"dependencies": {
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
}
}
},
"d3-voronoi": {
@@ -17732,7 +17780,7 @@
},
"node-sass": {
"version": "4.14.1",
"resolved": "https://registry.npmmirror.com/node-sass/-/node-sass-4.14.1.tgz",
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
"integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
"dev": true,
"requires": {
@@ -24364,7 +24412,7 @@
},
"webpack-bundle-analyzer": {
"version": "2.13.1",
"resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
"integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==",
"dev": true,
"requires": {

1
nezha-fronted/package.json
View File

@@ -64,6 +64,7 @@
"cytoscape": "^3.15.2",
"d3": "^6.7.0",
"d3-hexbin": "^0.2.2",
"d3-interpolate": "^3.0.1",
"d3-sankey": "^0.12.3",
"d3-zoom": "^3.0.0",
"echarts": "^5.2.2",

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

@@ -401,7 +401,7 @@
cursor: pointer;
display: inline-block;
line-height: 20px;
color: $--color-text-regular;
color: $--color-text-primary;
}
.legend-item, .legend--table-row {
&.legend-item--inactive, &.row--inactive {

40
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -390,3 +390,43 @@
overflow: unset;
}
}
.colorScheme-form-item {
.el-form-item__content{
display: flex;
align-items: center;
}
}
.colorScheme-pop {
.el-select-dropdown__item{
height: 50px;
padding: 8px 12px;
}
.colorScheme-item{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.colorScheme-name{
font-size: 14px;
color: $--color-text-primary;
line-height: 100%;
font-weight: bold;
}
.colorScheme-msg{
font-size: 12px;
color: $--color-text-secondary;
line-height: 100%;
font-weight: normal !important;
}
.colorScheme-line{
width: 100%;
height: 8px;
margin: 2px 0;
border-radius: 3px;
display: flex;
justify-content: space-between;
}
}
}

2
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
View File

@@ -95,7 +95,7 @@
flex: 1;
background-color: $--background-color-empty;
.legend--table-cell,.legend-item {
color: $--color-text-regular;
color: $--color-text-primary;
}
.legend-container {
.legend--table-row.table-header {

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

@@ -76,7 +76,7 @@
}"
>
<i v-if="item.mapping && item.mapping.icon" :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.label, value: item.showValue }) : item.showValue}}</span>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue }) : item.showValue}}</span>
</p>
</template>
</li>
@@ -140,7 +140,7 @@
}"
>
<i v-if="item.mapping && item.mapping.icon" :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.label, value: item.showValue }) : item.showValue}}</span>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue }) : item.showValue}}</span>
</p>
</template>
</li>
@@ -195,7 +195,7 @@
}"
>
<i v-if="item.mapping && item.mapping.icon" :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.label, value: item.showValue }) : item.showValue}}</span>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue }) : item.showValue}}</span>
</p>
</template>
</li>
@@ -224,7 +224,7 @@
}"
>
<i v-if="item.mapping && item.mapping.icon" :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.label, value: item.showValue }) : item.showValue}}</span>
<span>{{item.mapping ? handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue }) : item.showValue}}</span>
</p>
<div class="bar-rect" :style="{height:item.height + 'px',}">
<div
@@ -383,7 +383,7 @@ export default {
let valueText = ''
if (item.mapping) {
valueText = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
valueText = this.handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })
if (item.mapping.icon) {
valueText += 'AA'
}
@@ -420,7 +420,7 @@ export default {
let valueText = ''
if (item.mapping) {
valueText = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
valueText = this.handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })
if (item.mapping.icon) {
valueText += 'AA'
}
@@ -472,7 +472,7 @@ export default {
let valueText = ''
if (item.mapping) {
valueText = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
valueText = this.handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })
if (item.mapping.icon) {
valueText += 'AA'
}
@@ -518,7 +518,7 @@ export default {
let valueText = ''
if (item.mapping) {
valueText = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
valueText = this.handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })
if (item.mapping.icon) {
valueText += 'AA'
}
@@ -564,30 +564,6 @@ export default {
const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth)
return Math.min(optimalSize, maxSize || optimalSize)
},
getValuePercent (value, minValue, maxValue) {
// Need special logic for when minValue === maxValue === value to prevent returning NaN
const valueRatio = Math.min((value - minValue) / (maxValue - minValue), 1)
return isNaN(valueRatio) ? 0 : valueRatio
},
calcMax (arr) {
let maxNum = arr.reduce((maxValue, obj) => {
return Math.max(maxValue, obj.value)
}, 0)
if (maxNum <= 1) {
return 1
}
let bite = 1
while (maxNum >= 10) {
maxNum /= 10
if (maxNum > 1) {
bite += 1
}
}
return Math.pow(10, bite)
},
initBarData (chartInfo, originalDatas) {
this.barData = []
let colorIndex = 0
@@ -602,7 +578,7 @@ export default {
mapping && this.chartOption.color && (this.chartOption.color[colorIndex] = mapping.color.bac)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
this.barData.push({
value: Number(value),
value: parseFloat(value),
realValue: value,
showValue: showValue,
name: legend.name,
@@ -614,11 +590,15 @@ export default {
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex]
background: ''
})
colorIndex++
})
})
this.setColorList(this.barData)
this.barData.forEach((item, index) => {
item.background = item.mapping ? item.mapping.color.bac : this.colorList[index]
})
this.$emit('chartIsNoData', this.isNoData)
},
formatterFunc (params, ticket, callback) {
@@ -718,9 +698,6 @@ export default {
}
},
mounted () {
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color
this.chartInfo.loaded && this.initChart(this.chartOption)
}
}

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

@@ -58,9 +58,7 @@ import chartFormat from '@/components/chart/chartFormat'
import * as d3 from 'd3'
import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
export default {
name: 'chart-bubble',
components: {
@@ -122,11 +120,15 @@ export default {
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex] // 气泡颜色
background: ''
})
colorIndex++
})
})
this.setColorList(this.bubbleData)
this.bubbleData.forEach((item, index) => {
item.background = item.mapping ? item.mapping.color.bac : this.colorList[index]
})
this.$emit('chartIsNoData', this.isNoData)
},
drawBubbleChart () {
@@ -356,7 +358,6 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {

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

@@ -153,7 +153,7 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
this.doughnutData.push({
value: Number(value),
value: parseFloat(value),
realValue: value,
showValue: showValue,
name: legend.name,
@@ -165,12 +165,17 @@ export default {
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex]
background: ''
})
colorIndex++
})
})
this.setColorList(this.doughnutData)
this.doughnutData.forEach((item, index) => {
item.background = item.mapping ? item.mapping.color.bac : this.colorList[index]
this.legends[index].color = item.mapping ? item.mapping.color.bac : this.colorList[index]
})
this.$emit('chartIsNoData', this.isNoData)
},
drawDoughnutChart (animate) {
@@ -465,7 +470,6 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart(true)
},
beforeDestroy () {

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

@@ -60,7 +60,7 @@ import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
import tinycolor from 'tinycolor2'
export default {
name: 'chart-funnel',
components: {
@@ -109,7 +109,7 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
this.funnelData.push({
value: Number(value),
value: parseFloat(value),
realValue: value,
showValue: showValue,
name: legend.name,
@@ -121,12 +121,15 @@ export default {
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac.substr(0, 7) : this.colorList[colorIndex], // 仅限十六进制
label: legend.alias
background: ''
})
colorIndex++
})
})
this.setColorList(this.funnelData)
this.funnelData.forEach((item, index) => {
item.background = item.mapping ? item.mapping.color.bac.substr(0, 7) : tinycolor(this.colorList[index]).toHexString() // 仅限十六进制
})
this.funnelData.sort((a, b) => b.value - a.value)
this.$emit('chartIsNoData', this.isNoData)
},
@@ -349,24 +352,6 @@ export default {
}
})
},
/**
* Convert a hex color to an RGB object.
*
* @param {string} color
*
* @returns {{R: Number, G: number, B: number}}
*/
hexToRgb (color) {
let hex = color.slice(1)
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
}
const f = parseInt(hex, 16)
const R = f >> 16
const G = (f >> 8) & 0x00FF
const B = f & 0x0000FF
return { R, G, B }
},
/**
* Shade a color to the given percentage.
*
@@ -376,14 +361,14 @@ export default {
* @return {string}
*/
shade (color, shade) {
const { R, G, B } = this.hexToRgb(color)
const { r, g, b } = tinycolor(color).toRgb()
const t = shade < 0 ? 0 : 255
const p = shade < 0 ? shade * -1 : shade
const converted = 0x1000000 +
((Math.round((t - R) * p) + R) * 0x10000) +
((Math.round((t - G) * p) + G) * 0x100) +
(Math.round((t - B) * p) + B)
((Math.round((t - r) * p) + r) * 0x10000) +
((Math.round((t - g) * p) + g) * 0x100) +
(Math.round((t - b) * p) + b)
return `#${converted.toString(16).slice(1)}`
},

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

@@ -100,7 +100,7 @@ export default {
const gauge = {
value: '',
showValue: '',
label: {},
labels: {},
width: '',
height: '',
legend: '',
@@ -109,9 +109,9 @@ export default {
}
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
gauge.label = data.metric
gauge.labels = data.metric
gauge.legend = legend.alias
gauge.label.legend = gauge.legend
gauge.labels.legend = gauge.legend
gauge.expressionIndex = expressionIndex
gauge.name = legend.name
gauge.alias = legend.alias
@@ -123,29 +123,11 @@ export default {
})
})
this.maxValue = this.calcMax(this.gaugeData)
this.setColorList(this.gaugeData)
this.$emit('chartIsNoData', this.isNoData)
resolve()
})
},
calcMax (arr) {
let maxNum = arr.reduce((maxValue, obj) => {
return Math.max(maxValue, obj.value)
}, 0)
if (maxNum <= 1) {
return 1
}
let bite = 1
while (maxNum >= 10) {
maxNum /= 10
if (maxNum > 1) {
bite += 1
}
}
return Math.pow(10, bite)
},
calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) {
const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren)
const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren)
@@ -224,7 +206,7 @@ export default {
const gaugeWidth = Math.min(dimension / 5.5, 30)
let showValue = data.showValue
if (data.mapping) {
showValue = this.handleDisplay(data.mapping.display, { ...data.label, value: showValue })
showValue = this.handleDisplay(data.mapping.display, { ...data.labels, value: showValue })
}
const textWidth = dimension - (gaugeWidth * 4)
const valueFontSize = this.calculateFontSize(showValue, textWidth, textWidth / 2, 1, gaugeWidth * 2)
@@ -264,7 +246,7 @@ export default {
if (this.chartInfo.param.text === 'all' || this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
let showValue = chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(params, null, -1, 2).trim()
if (item.mapping) {
showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
showValue = self.handleDisplay(item.mapping.display, { ...item.labels, value: showValue })
}
str += showValue
}
@@ -276,14 +258,8 @@ export default {
},
color: lodash.get(item, 'mapping.color.text', 'auto')
}
if (index < 20) {
option.series[0].itemStyle = {
color: lodash.get(item, 'mapping.color.bac', this.colorList[index])
}
} else {
option.series[0].itemStyle = {
color: lodash.get(item, 'mapping.color.bac', randomcolor())
}
option.series[0].itemStyle = {
color: lodash.get(item, 'mapping.color.bac', this.colorList[index])
}
option.tooltip.formatter = this.formatterFunc
option.tooltip.position = this.tooltipPosition
@@ -371,7 +347,7 @@ export default {
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.labels = params.data.labels
this.toolbox.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event
this.toolboxPosition(e)
@@ -383,8 +359,6 @@ export default {
}
},
mounted () {
this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {

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

@@ -100,37 +100,31 @@ export default {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
const Hexagon = {
value: '',
showValue: '',
label: {},
width: '',
height: '',
legend: '',
oldValue: '',
mapping: {
}
value: '',
showValue: '',
name: '',
alias: '',
labels: {},
mapping: {}
}
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
Hexagon.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
Hexagon.max = chartInfo.param.max || 100
Hexagon.min = chartInfo.param.min || 0
if (Hexagon.min === Hexagon.max) {
Hexagon.min = Hexagon.max / 2
}
Hexagon.label = data.metric
Hexagon.legend = legend.alias
Hexagon.label.legend = Hexagon.legend
Hexagon.expressionIndex = expressionIndex
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, decimals)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
Hexagon.name = legend.name
Hexagon.alias = legend.alias
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, decimals)
// Hexagon.value = Hexagon.showValue
Hexagon.labels = {
...data.metric,
legend: legend.alias
}
Hexagon.expressionIndex = expressionIndex
Hexagon.mapping = this.selectMapping(Hexagon.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.HexagonData.push(Hexagon)
colorIndex++
})
})
this.setColorList(this.HexagonData)
this.$emit('chartIsNoData', this.isNoData)
resolve()
})
@@ -149,8 +143,7 @@ export default {
...item,
x: colIndex,
y: rowIndex,
metrics: item.label,
label: item.legend
labels: item.labels
}
})
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
@@ -213,7 +206,7 @@ export default {
},
hexagonOver (that, e) { // 移入六边形
this.tooltip.title = that.alias
this.tooltip.value = that.mapping && that.mapping.display ? this.handleDisplay(that.mapping.display, { ...that.metrics, legend: that.alias, value: that.showValue }) : that.showValue
this.tooltip.value = that.mapping && that.mapping.display ? this.handleDisplay(that.mapping.display, { ...that.labels, value: that.showValue }) : that.showValue
this.tooltip.mapping = that.mapping
this.tooltip.show = true
this.setPosition(e)
@@ -276,10 +269,10 @@ export default {
const textColor = point.mapping ? point.mapping.color.text : this.invertColor(color)
if (this.chartInfo.param.text === 'all') {
str += point.alias
valueStr = point.mapping && point.mapping.display ? self.handleDisplay(point.mapping.display, { ...point.metrics, legend: point.alias, value: point.showValue }) : point.showValue
valueStr = point.mapping && point.mapping.display ? self.handleDisplay(point.mapping.display, { ...point.labels, value: point.showValue }) : point.showValue
}
if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
valueStr = point.mapping && point.mapping.display ? self.handleDisplay(point.mapping.display, { ...point.metrics, legend: point.alias, value: point.showValue }) : point.showValue
valueStr = point.mapping && point.mapping.display ? self.handleDisplay(point.mapping.display, { ...point.labels, value: point.showValue }) : point.showValue
}
if (this.chartInfo.param.text === 'legend') {
str += point.alias
@@ -492,10 +485,10 @@ export default {
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.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.metrics
this.toolbox.metric.labels = data.labels
this.toolbox.metric.expressionIndex = data.expressionIndex
this.toolboxPosition(e)
}
@@ -507,9 +500,6 @@ export default {
}
},
mounted () {
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color
this.chartInfo.loaded && this.initChart(this.chartOption)
},
beforeDestroy () {

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

@@ -66,7 +66,6 @@ import chartFormat from '@/components/chart/chartFormat'
import * as d3 from 'd3'
import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
export default {
@@ -136,6 +135,7 @@ export default {
colorIndex++
})
})
this.setColorList(this.rankData)
},
drawRankChart () {
@@ -371,7 +371,6 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {

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

@@ -154,7 +154,7 @@ export default {
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
this.roseData.push({
value: Number(value),
value: parseFloat(value),
realValue: value,
showValue: showValue,
name: legend.name,
@@ -166,12 +166,16 @@ export default {
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex]
background: ''
})
colorIndex++
})
})
this.setColorList(this.roseData)
this.roseData.forEach((item, index) => {
item.background = item.mapping ? item.mapping.color.bac : this.colorList[index]
this.legends[index].color = item.mapping ? item.mapping.color.bac : this.colorList[index]
})
this.$emit('chartIsNoData', this.isNoData)
},
drawRoseChart (animate) {

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

@@ -199,17 +199,16 @@ export default {
links: linksData
})
this.setColorList(nodes)
// 设置节点颜色
nodes.forEach((item, index) => {
if (index >= 20) {
const colorRandom = randomcolor()
this.colorList.push(colorRandom)
}
const mapping = this.selectMapping(item.value, this.chartInfo.param.valueMapping, this.chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
const value = !allZero ? item.value : 0
const mapping = this.selectMapping(value, this.chartInfo.param.valueMapping, this.chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
item.mapping = mapping
item.background = mapping ? mapping.color.bac : this.colorList[index]
const decimals = this.chartInfo.param.decimals || 2
item.showValue = chartDataFormat.getUnit(this.chartInfo.unit ? this.chartInfo.unit : 2).compute(!allZero ? item.value : 0, null, -1, decimals)
item.showValue = chartDataFormat.getUnit(this.chartInfo.unit ? this.chartInfo.unit : 2).compute(value, null, -1, decimals)
})
// 创建一个连线绘制组，绑定连线数据(links)
@@ -471,7 +470,6 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {

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

@@ -22,16 +22,16 @@
<!-- all -->
<template v-if="chartInfo.param.text==='all'">
<div v-if="item.mapping">
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.alias}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
<span>{{handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })}}</span>
</p>
</div>
<div v-else>
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.alias}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.showValue}}</p>
</div>
</template>
@@ -42,11 +42,11 @@
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{item.legend}}</span>
<span>{{item.alias}}</span>
</p>
</div>
<div v-else>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.alias}}</p>
</div>
</template>
<!-- value -->
@@ -56,7 +56,7 @@
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
<span>{{handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })}}</span>
</p>
</div>
<div v-else>
@@ -137,7 +137,6 @@ import chartFormat from '@/components/chart/chartFormat'
import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { initColor } from '@/components/chart/chart/tools'
// import fontWidth from '@/components/chart/chart/options/fontWidth'
import * as echarts from 'echarts'
import chartSparklineOption from './options/chartSparkline'
@@ -159,7 +158,7 @@ export default {
minFontSzie: 12,
defaultUnit: 60, // 根据stat的长宽取 需要的字体 = (取最短的边 / defaultUnit) * fontSize 因为 需要的字体/fontSize = 实际宽 / defaultUnit
sparkline: {},
maxValue: 0
maxYAxis: 0
}
},
methods: {
@@ -189,23 +188,26 @@ export default {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
const stat = {
value: '',
showValue: '',
label: {},
width: '',
height: '',
legend: '',
value: '',
showValue: '',
name: '',
alias: '',
labels: {},
mapping: {},
data: {}
}
stat.value = getMetricTypeValue(data.values, chartInfo.param.statistics)
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
stat.label.legend = stat.legend
stat.expressionIndex = expressionIndex
stat.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, decimals)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
stat.name = legend.name
stat.alias = legend.alias
stat.labels = {
...data.metric,
legend: legend.alias
}
stat.expressionIndex = expressionIndex
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
stat.data = data.values
// 判断是否是对比的数据
@@ -217,19 +219,19 @@ export default {
colorIndex++
})
})
// 计算最大值
let maxValue = 0
// 计算sparkline最大值
let maxYAxis = 0
if (this.statData.length > 0) {
maxValue = 0
maxYAxis = 0
for (let j = 0; j < this.statData.length; j++) {
for (let i = 0; i < this.statData[j].data.length; i++) {
if (!isNaN(this.statData[j].data[i][1])) {
maxValue = (maxValue < Number(this.statData[j].data[i][1]) ? Number(this.statData[j].data[i][1]) : maxValue)
maxYAxis = (maxYAxis < Number(this.statData[j].data[i][1]) ? Number(this.statData[j].data[i][1]) : maxYAxis)
}
}
}
}
this.maxValue = maxValue
this.maxYAxis = maxYAxis
// 计算同比变化量
if (this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none') {
@@ -259,11 +261,12 @@ export default {
item.comparison = comparison
})
}
this.setColorList(this.statData)
this.$emit('chartIsNoData', this.isNoData)
resolve()
})
},
calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) {
const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren)
const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren)
@@ -314,7 +317,7 @@ export default {
let display = ''
if (item.mapping) {
display = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
display = this.handleDisplay(item.mapping.display, { ...item.labels, value: item.showValue })
}
let titleFont = ''
let valueFont = ''
@@ -323,7 +326,7 @@ export default {
const padding = 10
switch (this.chartInfo.param.text) {
case 'all':
titleFont = item.legend
titleFont = item.alias
if (item.mapping) {
valueFont = display
if (item.mapping.icon) {
@@ -337,7 +340,7 @@ export default {
titleFontSize = Math.min(valueFontSize * 0.7, titleFontSize)
break
case 'legend':
titleFont = item.legend
titleFont = item.alias
if (item.mapping) {
if (item.mapping.icon) {
titleFont += 'AA'
@@ -432,7 +435,7 @@ export default {
color: areaColor
}
}
chartOption.yAxis.max = this.maxValue
chartOption.yAxis.max = this.maxYAxis
chart.setOption(chartOption)
this.sparkline[index] = chart
})
@@ -452,8 +455,8 @@ export default {
}, 100)
},
statMouseEnter (data, e) {
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.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.setPosition(e)
@@ -555,11 +558,11 @@ export default {
if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
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.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.label
this.toolbox.metric.labels = data.labels
this.toolbox.metric.expressionIndex = data.expressionIndex
this.toolboxPosition(e)
}
@@ -571,7 +574,6 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {

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

@@ -248,7 +248,7 @@ export default {
setTimeout(() => {
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
if (!dom) {
return;
return
}
const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId)
if (!myChart) {

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

@@ -108,6 +108,13 @@ export default {
this.setDataLink()
this.legends = []
this.series = chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
this.setColorList(this.series[0].data)
this.series[0].data.forEach((item, index) => {
item.itemStyle = {
color: item.mapping ? item.mapping.color.bac : this.colorList[index]
}
this.legends[index].color = item.mapping ? item.mapping.color.bac : this.colorList[index]
})
chartOption.tooltip.formatter = this.formatterFunc
chartOption.tooltip.position = this.tooltipPosition
if (navigator.userAgent.match(/Mobi/i) ||
@@ -149,11 +156,9 @@ export default {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, decimals)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.data.push({
value: value,
value: parseFloat(value),
realValue: value,
showValue: showValue,
name: legend.name,
@@ -170,7 +175,6 @@ export default {
color: mapping ? mapping.color.text : '#000000'
},
itemStyle: {
color: mapping ? mapping.color.bac : this.colorList[colorIndex]
}
})
colorIndex++
@@ -244,8 +248,6 @@ export default {
},
mounted () {
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color
this.chartInfo.loaded && this.initChart(this.chartOption)
}
}

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

@@ -57,7 +57,6 @@ import chartMixin from '@/components/chart/chartMixin'
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'
import chartTimeSeriesMixin from '@/components/chart/chart/uplot/chartTimeSeriesMixin'
import chartDataFormat from '@/components/chart/chartDataFormat'
@@ -608,8 +607,6 @@ export default {
}
},
mounted () {
this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color
try {
this.isStack = !!this.chartInfo.param.stack
} catch (e) {}

88
nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js
View File

@@ -7,10 +7,12 @@ import bus from '@/libs/bus'
import moment from 'moment-timezone'
import { getChart } from '@/components/common/js/common'
import uplot from 'uplot'
import { interpolateRgbBasis } from 'd3-interpolate'
import tinycolor from 'tinycolor2'
export default {
data () {
return {
seriesColor: initColor(),
colorList: [],
incrs: Incrs,
dataIdx: null,
seriesIdx: null,
@@ -95,19 +97,80 @@ export default {
})
this.chartIndex = chartIndex
seriesData.unshift(time)
this.setColorList(seriesAll, seriesData)
this.series = seriesAll
return {
seriesData,
seriesAll
}
},
setColorList (seriesAll, seriesData) {
let dataArr = lodash.cloneDeep(seriesData)
dataArr.shift()
// 取最后一个非空值
dataArr = dataArr.map(item => {
let value = 0
for (let i = item.length - 1; i >= 0; i--) {
if (item[i]) {
value = item[i]
break
}
}
return {
value
}
})
this.colorList = []
const initColorArr = initColor(20)
const mode = lodash.get(this.chartInfo, 'param.color.mode', 'palette')
seriesAll.forEach((item, index) => {
let color = ''
if (mode === 'palette') {
color = initColorArr[index] || randomcolor()
} else if (mode === 'fixed') {
color = lodash.get(this.chartInfo, 'param.color.fixedColor')
} else if (mode === 'continuous') {
const continuousType = lodash.get(this.chartInfo, 'param.color.continuousType')
let min = lodash.get(this.chartInfo, 'param.min') || 0
let max = lodash.get(this.chartInfo, 'param.max') || this.calcMax(dataArr)
if (item.yAxisIndex == 1) {
min = lodash.get(this.chartInfo, 'param.rightYAxis.min') || 0
max = lodash.get(this.chartInfo, 'param.rightYAxis.max') || this.calcMax(dataArr)
}
// 获取颜色数组
const colorArr = this.$CONSTANTS.colorScheme.find(item => item.value == continuousType).color
const value = parseFloat(dataArr[index].value)
const valuePercent = this.getValuePercent(value, min, max)
// 创建插值函数
const interpolateColor = interpolateRgbBasis(colorArr)
color = interpolateColor(valuePercent)
}
// 设置图表颜色
const chartType = item.yAxisIndex == 1 ? lodash.get(this.chartInfo, 'param.rightYAxis.style', 'line') : this.chartInfo.type
item.stroke = color
if (chartType === 'area') {
// 使用 tinycolor 转换为十六进制
const hexColor = tinycolor(color).toHexString()
item.fill = hexColor + '20' // 面积图使用
}
if (chartType === 'point') {
item.points = {
show: true,
size: 6,
width: 3,
fill: color,
stroke: color
}
item.width = 0
}
this.colorList.push(color)
this.legends[index].color = color
})
},
renderSeries (series, expressionIndex, dataIndex, chartIndex) {
const leftUnit = this.chartInfo.unit
const leftUnitCompute = chartDataFormat.getUnit(leftUnit)
const decimals = this.chartInfo.param.decimals || 2
if (chartIndex > 19) {
this.seriesColor.push(randomcolor())
}
const legend = this.handleLegend(this.chartInfo, series, expressionIndex, dataIndex, chartIndex)
let isRight
if (this.chartInfo.param.enable.rightYAxis) {
@@ -117,7 +180,6 @@ export default {
const name = legend.name
const alias = legend.alias
const statistics = series.statistics
const chartType = this.chartInfo.type
const obj = {
name: name,
@@ -125,7 +187,6 @@ export default {
scale: isRight ? 'right' : 'left', // right
yAxisIndex: isRight, // right
// values: (u, v) => series.elements.name + JSON.stringify(series.metric),
stroke: this.seriesColor[chartIndex],
width: 1 / devicePixelRatio,
expressionIndex: series.expressionIndex,
paths (taht, seriesIdx, idx0, idx1, filtIdxs) {
@@ -133,20 +194,7 @@ export default {
},
spanGaps: true
}
if (chartType === 'area') {
obj.fill = this.seriesColor[chartIndex] + '20' // 面积图使用
}
if (chartType === 'point') {
obj.points = {
show: true,
size: 6,
width: 3,
fill: this.seriesColor[chartIndex],
stroke: this.seriesColor[chartIndex]
}
obj.width = 0
}
this.legends.push({ name, alias, statistics, color: this.seriesColor[chartIndex] })
this.legends.push({ name, alias, statistics, color: this.colorList[chartIndex] })
return obj
},
tooltipPlugin ({ onclick, shiftX = 10, shiftY = 10 }) {

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

@@ -10,6 +10,8 @@ import {
chartTimeSeriesScatterOption
} from './chart/options/chartTimeSeries'
import * as CSV from 'csv-string'
import { initColor } from '@/components/chart/chart/tools'
import { interpolateRgbBasis } from 'd3-interpolate'
export default {
data () {
return {
@@ -92,7 +94,6 @@ export default {
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
if (colorIndex >= 20 && !this.showAllData) {
colorIndex++
return
}
this.isNoData = false
@@ -246,10 +247,6 @@ export default {
return { type, value: getMetricTypeValue(data.values, type) }
})
}
if (colorIndex >= 20) {
const colorRandom = randomcolor()
this.colorList.push(colorRandom)
}
if (this.chartInfo.type !== 'line' && this.chartInfo.type !== 'area' && this.chartInfo.type !== 'point') {
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
}
@@ -648,16 +645,63 @@ export default {
csv += '\n'
})
return csv
},
// 计算最大值向上取整
calcMax (arr) {
let maxNum = arr.reduce((maxValue, obj) => {
return Math.max(maxValue, obj.value)
}, 0)
if (maxNum <= 1) {
return 1
}
let bite = 1
while (maxNum >= 10) {
maxNum /= 10
if (maxNum > 1) {
bite += 1
}
}
return Math.pow(10, bite)
},
// 获取值百分比
getValuePercent (value, minValue, maxValue) {
// Need special logic for when minValue === maxValue === value to prevent returning NaN
const valueRatio = Math.min((value - minValue) / (maxValue - minValue), 1)
return isNaN(valueRatio) ? 0 : valueRatio
},
setColorList (arr) {
this.colorList = []
const initColorArr = initColor(20)
const mode = lodash.get(this.chartInfo, 'param.color.mode', 'palette')
arr.forEach((item, index) => {
let color = ''
if (mode === 'palette') {
color = initColorArr[index] || randomcolor()
} else if (mode === 'fixed') {
color = lodash.get(this.chartInfo, 'param.color.fixedColor')
} else if (mode === 'continuous') {
const continuousType = lodash.get(this.chartInfo, 'param.color.continuousType')
const min = lodash.get(this.chartInfo, 'param.min') || 0
const max = lodash.get(this.chartInfo, 'param.max') || this.calcMax(arr)
// 获取颜色数组
const colorArr = this.$CONSTANTS.colorScheme.find(item => item.value == continuousType).color
const value = parseFloat(item.value)
const valuePercent = this.getValuePercent(value, min, max)
// 创建插值函数
const interpolateColor = interpolateRgbBasis(colorArr)
color = interpolateColor(valuePercent)
}
this.colorList.push(color)
})
}
},
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)
if (this.resize) {

15
nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
View File

@@ -156,7 +156,7 @@ import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
import panelVariables from '@/components/common/panel/panelVariables'
import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
import { initColor } from '@/components/chart/chart/tools'
export default {
name: 'dashboardTab',
mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -223,6 +223,15 @@ export default {
height: 2,
unit: 2,
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
@@ -255,7 +264,7 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
panel: '',
@@ -330,7 +339,7 @@ export default {
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' },
{ value: 1800, label: '30m' }
]
}
},

30
nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
View File

@@ -105,6 +105,7 @@ import { fromRoute } from '@/components/common/js/constants'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
import notebookList from '@/components/page/notebook/notebookList.vue'
import { initColor } from '@/components/chart/chart/tools'
export default {
name: 'notebookTab',
mixins: [subDataListMixin, detailViewRightMixin],
@@ -326,6 +327,15 @@ export default {
case 'area':
case 'point':
param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
link: '',
nullType: 'null',
@@ -370,13 +380,20 @@ export default {
case 'rank':
case 'funnel':
param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
link: '',
nullType: 'null',
statistics: 'last',
text: 'value',
valueMapping: [],
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
@@ -399,6 +416,15 @@ export default {
case 'doughnut':
case 'rose':
param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
link: '',
nullType: 'null',
statistics: 'last',

15
nezha-fronted/src/components/common/js/constants.js
View File

@@ -369,7 +369,7 @@ export const intervalList = [
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' },
{ value: 1800, label: '30m' }
// { value: 3600, label: '1h' },
// { value: 7200, label: '2h' }
]
@@ -523,3 +523,16 @@ export const systemIcon = {
}
export const stackIconSvg = 'path://M538.112 998.4a25.6 25.6 0 0 1-11.776-2.88L39.424 743.232a25.6 25.6 0 1 1 23.552-45.44l474.368 245.824 422.592-245.248a25.6 25.6 0 0 1 25.728 44.288l-434.688 252.288a25.728 25.728 0 0 1-12.864 3.456z,M538.112 789.888a25.6 25.6 0 0 1-11.776-2.88L39.424 534.72a25.6 25.6 0 1 1 23.552-45.44l474.368 245.824 422.592-245.248a25.6 25.6 0 1 1 25.728 44.288l-434.688 252.288a25.728 25.728 0 0 1-12.864 3.456z,M538.112 581.312a25.6 25.6 0 0 1-11.776-2.88L39.424 326.144a25.6 25.6 0 0 1-1.088-44.928L473.088 28.928a25.344 25.344 0 0 1 24.64-0.576l486.848 252.288a25.6 25.6 0 0 1 1.088 44.928L550.976 577.856a25.728 25.728 0 0 1-12.864 3.456zM104.384 302.208l432.96 224.384 382.208-221.824-432.96-224.384-382.208 221.824z'
export const colorScheme = [
{ name: i18n.t('dashboard.dashboard.chartForm.singleColor'), value: 'fixed', background: '' },
{ name: i18n.t('dashboard.dashboard.chartForm.classicPalette'), value: 'palette', background: 'linear-gradient(90deg, #3685FF 0%, #3685FF 5%, #00DCA2 5%, #00DCA2 10%, #00BFD0 10%, #00BFD0 15%, #954Eff 15%, #954Eff 20%, #FFCB01 20%, #FFCB01 25%, #f65A96 25%, #f65A96 30%, #FF9094 30%, #FF9094 35%, #00CCF5 35%, #00CCF5 40%, #FF8BEA 40%, #FF8BEA 45%, #4D7693 45%, #4D7693 50%, #72577C 50%, #72577C 55%, #99D750 55%, #99D750 60%, #DD8270 60%, #DD8270 65%, #C475EE 65%, #C475EE 70%, #7E83FB 70%, #7E83FB 75%, #7EB090 75%, #7EB090 80%, #CF6684 80%, #CF6684 85%, #4E55FF 85%, #4E55FF 90%, #FF8D00 90%, #FF8D00 95%, #FF5200 95%, #FF5200 100%)' },
{ name: i18n.t('dashboard.dashboard.chartForm.greenYellowRed'), value: 'GrYlRd', color: ['rgb(86, 166, 75)', 'rgb(242, 204, 12)', 'rgb(224, 47, 68)'], background: 'linear-gradient(90deg, rgb(86, 166, 75), rgb(242, 204, 12), rgb(224, 47, 68))' },
{ name: i18n.t('dashboard.dashboard.chartForm.redYellowGreen'), value: 'RdYlGr', color: ['rgb(224, 47, 68)', 'rgb(242, 204, 12)', 'rgb(86, 166, 75)'], background: 'linear-gradient(90deg, rgb(224, 47, 68), rgb(242, 204, 12), rgb(86, 166, 75))' },
{ name: i18n.t('dashboard.dashboard.chartForm.blueYellowRed'), value: 'BlYlRd', color: ['rgb(18, 80, 176)', 'rgb(255, 238, 82)', 'rgb(173, 3, 23)'], background: 'linear-gradient(90deg, rgb(18, 80, 176), rgb(255, 238, 82), rgb(173, 3, 23))' },
{ name: i18n.t('dashboard.dashboard.chartForm.yellowRed'), value: 'YlRd', color: ['rgb(255, 238, 82)', 'rgb(173, 3, 23)'], background: 'linear-gradient(90deg, rgb(255, 238, 82), rgb(173, 3, 23))' },
{ name: i18n.t('dashboard.dashboard.chartForm.yellowBlue'), value: 'YlBl', color: ['rgb(255, 238, 82)', 'rgb(18, 80, 176)'], background: 'linear-gradient(90deg, rgb(255, 238, 82), rgb(18, 80, 176))' },
{ name: i18n.t('dashboard.dashboard.chartForm.blues'), value: 'blues', color: ['rgb(255, 255, 255)', 'rgb(18, 80, 176)'], background: 'linear-gradient(90deg, rgb(255, 255, 255), rgb(18, 80, 176))' },
{ name: i18n.t('dashboard.dashboard.chartForm.greens'), value: 'reds', color: ['rgb(255, 255, 255)', 'rgb(25, 115, 14)'], background: 'linear-gradient(90deg, rgb(255, 255, 255), rgb(25, 115, 14))' },
{ name: i18n.t('dashboard.dashboard.chartForm.reds'), value: 'greens', color: ['rgb(255, 255, 255)', 'rgb(173, 3, 23)'], background: 'linear-gradient(90deg, rgb(255, 255, 255), rgb(173, 3, 23))' }
]

8
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -10,10 +10,8 @@
</div>
<div class="color-show" v-if="!single" ref="colorShow" @click.stop="changeColor">
<div :style="{background:findColor('bac'),border:'2px solid '+findColor('line'),'line-height':'18px'}" class="color-show-left">
<span :style="{color:findColor('text')}" style="line-height: 18px;">
T
</span>
<div :style="{background:findColor('bac'),'line-height':'18px'}" class="color-show-left">
<span :style="{color:findColor('text')}" style="line-height: 18px;">T</span>
</div>
</div>
@@ -130,7 +128,7 @@ export default {
this.showColorPicker = !this.showColorPicker
if (this.showColorPicker) {
window.addEventListener('mousewheel', this.mousewheel)
setTimeout(() => {
this.$nextTick(() => {
const position = this.$refs.colorShow.getBoundingClientRect()
const colorBox = this.$refs.colorBox.getBoundingClientRect()
const w = window.innerWidth

208
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -207,6 +207,69 @@
</el-cascader>
</el-form-item>
<!--min-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
placeholder="Auto"
v-model="chartConfig.param.min"/>
</el-form-item>
<!--max-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
placeholder="Auto"
v-model="chartConfig.param.max"/>
</el-form-item>
<!--decimals-->
<el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
<!--color Scheme-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
<el-select
id="chart-box-type"
v-model="chartConfig.param.color.schemeType"
placeholder=""
popper-class="colorScheme-pop right-box-select-top prevent-clickoutside"
size="small"
@change="schemeTypeChange">
<el-option
v-for="item in colorScheme"
:key="item.name"
:label="$t(item.name)"
:value="item.value">
<div class="colorScheme-item">
<p class="colorScheme-name">{{$t(item.name)}}</p>
<div v-if="item.value!=='fixed'" :style="{background:item.background}" class="colorScheme-line"></div>
<!-- singleColor -->
<p v-else class="colorScheme-msg">{{$t('dashboard.dashboard.chartForm.singleColorMsg')}}</p>
</div>
</el-option>
</el-select>
<nezhaColor
v-if="chartConfig.param.color.schemeType=='fixed'"
:value-arr="[{name:'colorScheme',value:chartConfig.param.color.fixedColor}]"
:show-text="false"
:color-val="chartConfig.param.color.fixedColor"
@colorChange="(color,key)=>{colorChange(color,key)}"
/>
</el-form-item>
<!-- index -->
<el-form-item
v-show="isTable(chartConfig.type)"
@@ -282,7 +345,7 @@
</el-select>
</el-form-item>
<!-- nullType -->
<!-- nullType -->
<el-form-item
:label="$t('dashboard.dashboard.chartForm.nullType')"
class="form-item--half-width"
@@ -305,6 +368,7 @@
></el-option>
</el-select>
</el-form-item>
<!-- text -->
<el-form-item
:label="$t('config.assetLabel.display')"
@@ -328,77 +392,7 @@
></el-option>
</el-select>
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="isShowMinMax(chartConfig.type)">
<!--min-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
:placeholder="chartConfig.param.min?'':'Auto'"
v-model="chartConfig.param.min"/>
</el-form-item>
<!--max-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
:placeholder="chartConfig.param.max?'':'Auto'"
v-model="chartConfig.param.max"/>
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="isSankey(chartConfig.type)" key="sankey">
<!--Source label-->
<el-form-item class="form-item--half-width" :label="$t('dashboard.dashboard.chartForm.sourceLabel')" prop="param.sourceLabel"
:rules="[
{ required: true, message: $t('validate.required'), trigger: 'blur'},
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.dashboard.matchRegex'), trigger: 'blur'},
{ validator: labelValidator,trigger: 'blur'},
]"
>
<el-input
size="small"
style="margin-top: 2px"
:placeholder="$t('overall.placeHolder')"
@change="change"
v-model="chartConfig.param.sourceLabel"/>
</el-form-item>
<!--Target label-->
<el-form-item class="form-item--half-width" :label="$t('dashboard.dashboard.chartForm.targetLabel')" prop="param.targetLabel"
:rules="[
{ required: true, message: $t('validate.required'), trigger: 'blur'},
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.dashboard.matchRegex'), trigger: 'blur'},
{ validator: labelValidator,trigger: 'blur'},
]"
>
<el-input
size="small"
style="margin-top: 2px"
:placeholder="$t('overall.placeHolder')"
@change="change"
v-model="chartConfig.param.targetLabel"/>
</el-form-item>
</div>
<div class="form-items--half-width-group">
<!--decimals-->
<el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
<!-- Sparkline mode -->
<el-form-item :label="$t('dashboard.chartForm.sparklineMode')" class="form-item--half-width" v-if="isStat(chartConfig.type)">
<el-select
@@ -446,6 +440,7 @@
<el-option :label="$t('project.topology.bac')" value="background"></el-option>
</el-select>
</el-form-item>
<!-- Layout orientation -->
<el-form-item :label="$t('dashboard.chartForm.orientation')" class="form-item--half-width" v-if="chartConfig.type==='bar'">
<el-select
@@ -459,6 +454,7 @@
<el-option :label="$t('dashboard.chartForm.horizontal')" value="horizontal"></el-option>
</el-select>
</el-form-item>
<!-- Display mode -->
<el-form-item :label="$t('dashboard.chartForm.displayMode')" class="form-item--half-width" v-if="chartConfig.type==='bar'">
<el-select
@@ -474,6 +470,39 @@
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="isSankey(chartConfig.type)" key="sankey">
<!--Source label-->
<el-form-item class="form-item--half-width" :label="$t('dashboard.dashboard.chartForm.sourceLabel')" prop="param.sourceLabel"
:rules="[
{ required: true, message: $t('validate.required'), trigger: 'blur'},
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.dashboard.matchRegex'), trigger: 'blur'},
{ validator: labelValidator,trigger: 'blur'},
]"
>
<el-input
size="small"
style="margin-top: 2px"
:placeholder="$t('overall.placeHolder')"
@change="change"
v-model="chartConfig.param.sourceLabel"/>
</el-form-item>
<!--Target label-->
<el-form-item class="form-item--half-width" :label="$t('dashboard.dashboard.chartForm.targetLabel')" prop="param.targetLabel"
:rules="[
{ required: true, message: $t('validate.required'), trigger: 'blur'},
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.dashboard.matchRegex'), trigger: 'blur'},
{ validator: labelValidator,trigger: 'blur'},
]"
>
<el-input
size="small"
style="margin-top: 2px"
:placeholder="$t('overall.placeHolder')"
@change="change"
v-model="chartConfig.param.targetLabel"/>
</el-form-item>
</div>
<!-- Right Y Axis -->
<div v-if="isTimeSeries(chartConfig.type)">
<div class="form__sub-title">
@@ -579,7 +608,7 @@
:controls="false"
@change="change"
show-word-limit
:placeholder="chartConfig.param.rightYAxis.min?'':'Auto'"
placeholder="Auto"
v-model="chartConfig.param.rightYAxis.min"/>
</el-form-item>
<!--max-->
@@ -594,7 +623,7 @@
:controls="false"
@change="change"
show-word-limit
:placeholder="chartConfig.param.rightYAxis.max?'':'Auto'"
placeholder="Auto"
v-model="chartConfig.param.rightYAxis.max"/>
</el-form-item>
</div>
@@ -1367,7 +1396,7 @@ import VueTagsInput from '@johmun/vue-tags-input'
import draggable from 'vuedraggable'
import { s8 } from '@/components/common/js/common'
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
import { isSankey } from '@/components/chart/chart/tools'
import { isSankey, initColor } from '@/components/chart/chart/tools'
export default {
name: 'chartConfig',
@@ -1462,6 +1491,15 @@ export default {
break
}
this.chartConfig.param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
link: this.chartConfig.param.link,
nullType: this.chartConfig.param.nullType,
@@ -1512,13 +1550,20 @@ export default {
break
}
this.chartConfig.param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
@@ -1547,14 +1592,21 @@ export default {
break
}
this.chartConfig.param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
legend: { placement: 'bottom', values: [], show: true },
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,

70
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -145,7 +145,7 @@ import panelChart from '@/components/chart/panelChart'
import lodash from 'lodash'
import bus from '@/libs/bus'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import { initColor } from '@/components/chart/chart/tools'
const rz = {
methods: {
rz (e) {
@@ -264,6 +264,27 @@ export default {
delete params.param.orientation
delete params.param.displayMode
}
if (this.isShowColorScheme(params.type)) {
if (params.param.color) {
const mode = params.param.color.mode
if (mode === 'palette') {
params.param.color = {
mode: mode,
paletteColors: params.param.color.paletteColors
}
} else if (mode === 'fixed') {
params.param.color = {
mode: mode,
fixedColor: params.param.color.fixedColor
}
} else {
params.param.color = {
mode: mode,
continuousType: params.param.color.continuousType
}
}
}
}
if (!params.x && !params.y && this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
params.x = 0
params.y = 999
@@ -391,6 +412,15 @@ export default {
type: 'line',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 1 }],
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [] },
@@ -435,6 +465,15 @@ export default {
type: 'line',
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 1 }],
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [] },
@@ -503,6 +542,15 @@ export default {
unit: 2,
type: 'stat',
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
refer: 0,
nullType: 'null',
statistics: 'last',
@@ -748,6 +796,26 @@ export default {
if (!obj.param.orientation) { obj.param.orientation = 'vertical' }
if (!obj.param.displayMode) { obj.param.displayMode = 'basic' }
}
if (this.isShowColorScheme(obj.type)) {
if (!obj.param.color) {
obj.param.color = {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
}
} else {
const mode = obj.param.color.mode
if (mode === 'palette') {
obj.param.color.schemeType = 'palette'
} else if (mode === 'fixed') {
obj.param.color.schemeType = 'fixed'
} else {
obj.param.color.schemeType = obj.param.color.continuousType
}
}
}
}
if (obj.elements && obj.elements.length) {
obj.elements.forEach((item, index) => {

18
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

@@ -231,12 +231,10 @@ export default {
},
isShowMinMax (type) {
switch (type) {
case 'line':
case 'area':
case 'point':
case 'gauge':
return true
default: return false
case 'log' :
case 'table' :
return false
default: return true
}
},
isTimeSeries (type) {
@@ -254,6 +252,14 @@ export default {
return true
default: return false
}
},
isShowColorScheme (type) {
switch (type) {
case 'log' :
case 'table' :
return false
default: return true
}
}
}
}

29
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -1,9 +1,10 @@
import chartDataFormat from '@/components/chart/chartDataFormat'
import { getUUID, resetZIndex } from '@/components/common/js/common'
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
import { isStat } from '@/components/chart/chart/tools'
import { isStat, initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
import iconList from '@/components/common/js/iconList'
import { colorScheme } from '@/components/common/js/constants'
const rz = {
methods: {
rz (e) {
@@ -299,11 +300,30 @@ export default {
id: 'month',
name: this.$t('dashboard.chartForm.comparison.month')
}
]
],
colorScheme
}
},
mixins: [rz],
methods: {
schemeTypeChange (val) {
const obj = this.$lodash.cloneDeep(this.chartConfig.param.color)
if (val === 'palette') {
obj.schemeType = 'palette'
obj.mode = 'palette'
obj.paletteColors = initColor(20)
} else if (val === 'fixed') {
obj.schemeType = 'fixed'
obj.mode = 'fixed'
obj.fixedColor = obj.fixedColor || randomcolor()
} else {
obj.schemeType = val
obj.mode = 'continuous'
obj.continuousType = val
}
this.$set(this.chartConfig.param, 'color', obj)
this.change()
},
isStat,
// icon点击
iconActive (item, subItem, index) {
@@ -330,7 +350,7 @@ export default {
state: this.expressionsShow[i].state,
orderNum: i,
step: this.expressionsShow[i].step,
queryType: this.expressionsShow[i].queryType,
queryType: this.expressionsShow[i].queryType
})
}
})
@@ -559,6 +579,9 @@ export default {
this.chartConfig.param.valueMapping[index].color.icon = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
if (key === 'colorScheme') {
this.chartConfig.param.color.fixedColor = val
}
this.change()
},
change (key, index) {

171
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -157,28 +157,92 @@
</el-option>
</el-select>
</el-form-item>
<!--refer-->
<!-- unit -->
<el-form-item
:label="$t('dashboard.dashboard.chartForm.refer')"
v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)"
:label="$t('dashboard.dashboard.chartForm.unit')"
class="form-item--half-width"
prop="param.stack"
style="display: none"
prop="unit"
>
<el-select
id="chart-box-height"
v-model="chartConfig.param.refer"
<el-cascader
id="chart-box-unit"
v-model="chartConfig.unit"
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false" filterable
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
value-key="chartSpan"
@change="change"
style="width: 100%"
@change="unitSelected"
>
<el-option :value="1" label="true">
</el-option>
<el-option :value="0" label="false">
</el-cascader>
</el-form-item>
<!--min-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
placeholder="Auto"
v-model="chartConfig.param.min"/>
</el-form-item>
<!--max-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
placeholder="Auto"
v-model="chartConfig.param.max"/>
</el-form-item>
<!--decimals-->
<el-form-item :label="$t('config.assetLabel.decimals')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit
v-model="chartConfig.param.decimals"/>
</el-form-item>
<!--color Scheme-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
<el-select
id="chart-box-type"
v-model="chartConfig.param.color.schemeType"
placeholder=""
popper-class="colorScheme-pop right-box-select-top prevent-clickoutside"
size="small"
@change="schemeTypeChange">
<el-option
v-for="item in colorScheme"
:key="item.name"
:label="$t(item.name)"
:value="item.value">
<div class="colorScheme-item">
<p class="colorScheme-name">{{$t(item.name)}}</p>
<div v-if="item.value!=='fixed'" :style="{background:item.background}" class="colorScheme-line"></div>
<!-- singleColor -->
<p v-else class="colorScheme-msg">{{$t('dashboard.dashboard.chartForm.singleColorMsg')}}</p>
</div>
</el-option>
</el-select>
<nezhaColor
v-if="chartConfig.param.color.schemeType=='fixed'"
:value-arr="[{name:'colorScheme',value:chartConfig.param.color.fixedColor}]"
:show-text="false"
:color-val="chartConfig.param.color.fixedColor"
@colorChange="(color,key)=>{colorChange(color,key)}"
/>
</el-form-item>
<!-- index -->
<el-form-item
v-show="isTable(chartConfig.type)"
@@ -193,50 +257,7 @@
@tags-changed="(newTags)=>{tagsChange(newTags)}"
/>
</el-form-item>
<!-- unit -->
<el-form-item
v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)"
:label="$t('dashboard.dashboard.chartForm.unit')"
class="form-item--half-width"
prop="unit"
>
<el-cascader id="chart-box-unit"
v-model="chartConfig.unit"
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="width: 100%"
@change="unitSelected"
>
</el-cascader>
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="isGauge(chartConfig.type)">
<!--min-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
v-model="chartConfig.param.min"/>
</el-form-item>
<!--max-->
<el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
show-word-limit
v-model="chartConfig.param.max"/>
</el-form-item>
</div>
<div class="form-items--half-width-group">
<!-- text -->
<el-form-item
:label="$t('config.assetLabel.display')"
@@ -260,16 +281,7 @@
></el-option>
</el-select>
</el-form-item>
<!--decimals-->
<el-form-item v-if="isShowDecimals(chartConfig.type)" :label="$t('config.assetLabel.decimals')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
<!-- colorMode -->
<el-form-item :label="$t('dashboard.chartForm.colorMode')" class="form-item--half-width" v-if="isStat(chartConfig.type)">
<el-select
@@ -310,6 +322,7 @@
</el-select>
</el-form-item>
</div>
<!--legend-->
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->
@@ -1010,7 +1023,7 @@ import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import nezhaColor from '@/components/common/nezhaColor'
import filterSearch from '@/components/common/filterSearch/filterSearch.vue'
import VueTagsInput from '@johmun/vue-tags-input'
import { isGauge } from '@/components/chart/chart/tools'
import { isGauge, initColor } from '@/components/chart/chart/tools'
import draggable from 'vuedraggable'
export default {
name: 'systemChartConfig',
@@ -1146,13 +1159,20 @@ export default {
break
}
this.chartConfig.param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,
@@ -1180,14 +1200,21 @@ export default {
break
}
this.chartConfig.param = {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
nullType: this.chartConfig.param.nullType,
link: this.chartConfig.param.link,
statistics: 'last',
text: 'value',
valueMapping: [],
legend: { placement: 'bottom', values: [], show: true },
min: 0,
max: 100,
enable: {
legend: true,
valueMapping: false,

15
nezha-fronted/src/components/page/dashboard/dashboard.vue
View File

@@ -174,7 +174,7 @@ import panelVariables from '@/components/common/panel/panelVariables'
import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
import dashboardTempBox from '@/components/common/rightBox/dashboardTempBox'
import playlist from '@/components/common/playlist'
import { initColor } from '@/components/chart/chart/tools'
// import FileSaver from 'file-saver'
// import chartData from './testData'
export default {
@@ -236,6 +236,15 @@ export default {
height: 2,
unit: 2,
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
@@ -268,7 +277,7 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 1 }],
panel: '',
@@ -359,7 +368,7 @@ export default {
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' },
{ value: 1800, label: '30m' }
],
playListControls: false, // 显示隐藏轮播按钮
playlistObj: {} // 轮播仪表盘配置

11
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -3675,7 +3675,7 @@ import './promqlparser/wasm_exec.js'
import draggable from 'vuedraggable'
import lineData from '@/components/chart/defaultLineData'
import logData from '@/components/chart/defaultLogData'
import { initColor } from '@/components/chart/chart/tools'
export default {
name: 'exploreItem',
components: {
@@ -4644,6 +4644,15 @@ export default {
height: 2,
unit: 2,
param: {
min: undefined,
max: undefined,
color: {
schemeType: 'palette',
mode: 'palette',
paletteColors: initColor(20),
fixedColor: '',
continuousType: ''
},
stack: 0,
nullType: 'null',
legend: {