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

NEZ-1812 feat：部分图表value mapping增加icon

Browse Source
This commit is contained in:
zyh
2022-05-09 15:57:03 +08:00
parent b8df9f9c0a
commit 00fe36243c
12 changed files with 218 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/config/index.js
View File

@@ -19,8 +19,8 @@ module.exports = {
}
},
// Various Dev Server settings
// host: '0.0.0.0', // can be overwritten by process.env.HOST
host: '0.0.0.0', // can be overwritten by process.env.HOST
// host: 'localhost', // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
@@ -71,5 +71,5 @@ module.exports = {
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
}
}

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

@@ -148,6 +148,15 @@
padding-left: 10px;
box-sizing: border-box;
}
.mapping-icon{
position: absolute;
left: 8px;
height: 100%;
display: flex;
align-items: center;
font-size: 18px;
font-style: normal;
}
}
.thresholds-add{
border: 1px solid $--border-color-light;
@@ -156,6 +165,14 @@
margin-bottom: 10px;
padding: 3px 10px;
}
.prev-mapping-icon{
font-size: 16px;
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 200px;
}
.prev-mapping-box{
border: 1px solid $--border-color-light;
display: inline-block;
@@ -167,7 +184,7 @@
text-align: center;
position: absolute;
top: 0;
left: 200px;
left: 250px;
}
.element-item {
padding: 0;

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

@@ -28,7 +28,7 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo
import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
import bus from "@/libs/bus";
import bus from '@/libs/bus'
export default {
name: 'chart-bar',
@@ -178,11 +178,16 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div>
<div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
</div>
</div>
</div>
</div>
`
}
},

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

@@ -7,7 +7,12 @@
</div>
<div class="chart-canvas-tooltip-content">
<div>value</div>
<div>{{tooltip.value}}</div>
<div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
</div>
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div>
</div>
</div>
@@ -15,7 +20,6 @@
<script>
import * as d3 from 'd3'
import { SVG } from '@svgdotjs/svg.js'
import hexbin from '@/components/chart/chart/options/chartHexagonD3'
import chartMixin from '@/components/chart/chartMixin'
import chartFormat from '@/components/chart/chartFormat'
@@ -38,6 +42,7 @@ export default {
y: 0,
title: 0,
value: 0,
mapping: {},
show: false
},
svgDom: null,
@@ -185,6 +190,7 @@ export default {
hexagonOver (that, e) { // 移入六边形
this.tooltip.title = that.alias
this.tooltip.value = that.showValue
this.tooltip.mapping = that.mapping
this.tooltip.show = true
this.setPosition(e)
},
@@ -271,14 +277,31 @@ export default {
const scrollDiv = fObj.append('xhtml:div')
scrollDiv
.html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`)
group.append('text')
.attr('x', vals[0])
.attr('y', vals[1] + 16)
.text(valueStr)
// group.append('text')
// .attr('x', vals[0])
// .attr('y', vals[1] + 16)
// .text(valueStr)
// .attr('text-anchor', 'middle')
// .attr('alignment-baseline', 'central')
// .style('font-size', fontSize)
// .style('fill', textColor)
const fObj2 = group.append('foreignObject')
.attr('width', hexWidth || 60)
.attr('height', 24)
fObj2
.attr('x', vals[0] - hexWidth / 2)
.attr('y', vals[1])
// .text(str)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'central')
.style('font-size', fontSize)
.style('fill', textColor)
const scrollDiv2 = fObj2.append('xhtml:div')
scrollDiv2
.html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
</div>`)
return
}
if (str) {
@@ -295,18 +318,37 @@ export default {
.style('fill', textColor)
const scrollDiv = fObj.append('xhtml:div')
scrollDiv
.html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`)
.html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${str}
</div>`)
return
}
if (valueStr) {
group.append('text')
.attr('x', vals[0])
.attr('y', vals[1])
.text(valueStr)
// group.append('text')
// .attr('x', vals[0])
// .attr('y', vals[1])
// .text(valueStr)
// .attr('text-anchor', 'middle')
// .attr('alignment-baseline', 'central')
// .style('font-size', fontSize)
// .style('fill', textColor)
const fObj = group.append('foreignObject')
.attr('width', hexWidth || 60)
.attr('height', 24)
fObj
.attr('x', vals[0] - hexWidth / 2)
.attr('y', vals[1] - 10)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'central')
.style('font-size', fontSize)
.style('fill', textColor)
const scrollDiv = fObj.append('xhtml:div')
scrollDiv
.html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
</div>`)
}
},
getCenter (hexaRadius, row, col) {

5
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -143,9 +143,14 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div>
<div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
</div>
</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>percent</div>
<div>${params.percent}%</div>

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

@@ -16,18 +16,29 @@
>
<span v-if="chartInfo.param.text==='all'">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}">
{{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
{{item.legend}}<br/>
<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>
<span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>
</span>
<span v-if="chartInfo.param.text==='legend'">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}">
{{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
{{item.legend}}<br/>
<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>
<span v-else>{{item.legend}}</span>
</span>
<span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
</span>
<span v-else>{{item.showValue}}</span>
@@ -40,7 +51,12 @@
</div>
<div class="chart-canvas-tooltip-content">
<div>value</div>
<div>{{tooltip.value}}</div>
<div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
</div>
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div>
</div>
</div>
@@ -70,6 +86,7 @@ export default {
y: 0,
title: 0,
value: 0,
mapping: {},
show: false
},
fontSize: 12,
@@ -149,6 +166,7 @@ export default {
statMouseEnter (that) {
this.tooltip.title = that.legend
this.tooltip.value = that.showValue
this.tooltip.mapping = that.mapping
this.tooltip.show = true
},
statMouseleave (taht) {

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

@@ -30,6 +30,9 @@
}"
class="value-mapping-table"
>
<template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
<i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
</template>
{{showValueMapping(scope.row,col.title)}}
</div>
<div class="value-mapping-table" v-else>

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

@@ -150,6 +150,10 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div>
<div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'inline-block' : 'none'}">
${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''}
@@ -157,6 +161,7 @@ export default {
</div>
</div>
</div>
</div>
`
}
},

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

@@ -27,7 +27,7 @@
</template>
<script>
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { Sketch } from 'vue-color'
export default {
name: 'nezhaColor',
@@ -91,8 +91,9 @@ export default {
}
},
mounted () {
this.colors = this.valueArr[0].value
this.keyName = this.valueArr[0].name
this.colors = this.valueArr[0].value || randomcolor() + 'FF'
this.$emit('colorChange', this.colors, this.keyName)
},
methods: {
updateValue (color) {
@@ -134,7 +135,7 @@ export default {
},
colorTabChange (item) {
this.keyName = item.name
this.colors = this.colorVal[item.name]
this.colors = this.colorVal[item.name] || randomcolor() + 'FF'
},
exitColor () {
this.showColorPicker = false

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

@@ -560,6 +560,9 @@
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div class="prev-mapping-icon">
<i :class="item.icon" :style="{ color: item.color.icon }"></i>
</div>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
@@ -665,10 +668,36 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<div>
<el-select
v-model="item.icon"
size="small"
style="width: 75px"
:placeholder="$t('el.select.placeholder')"
@change="change('valueMapping', index)"
>
<template slot="prefix">
<i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
</template>
<el-option
v-for="item in mappingIconList"
:value="item.value"
:key="item.value"
label=" "
>
<i :class="item.value"></i>
</el-option>
</el-select>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
<nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
@colorChange="(val,key)=>{colorChange(val, key, index)}"
/>
</el-row>
</transition-group>
</div>

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

@@ -58,6 +58,29 @@ export default {
value: 'regx'
}
],
mappingIconList: [
{
value: 'nz-icon nz-icon-failed'
}, {
value: 'nz-icon nz-icon-Firewall'
}, {
value: 'nz-icon nz-icon-ADC'
}, {
value: 'nz-icon nz-icon-overview-alert'
}, {
value: 'nz-icon nz-icon-yanzhengma'
}, {
value: 'nz-icon nz-icon-Switch'
}, {
value: 'nz-icon nz-icon-connecting'
}, {
value: 'nz-icon nz-icon-language-change'
}, {
value: 'nz-icon nz-icon-overview-alert1'
}, {
value: 'nz-icon nz-icon-model'
}
],
letter: [
'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
@@ -327,7 +350,8 @@ export default {
display: '',
color: {
bac: bacColor + 'FF',
text: ColorReverse(bacColor) + 'FF'
text: ColorReverse(bacColor) + 'FF',
icon: randomcolor() + 'FF'
}
}
if (this.chartConfig.type === 'table') {
@@ -388,6 +412,10 @@ export default {
this.chartConfig.param.valueMapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
if (key === 'icon') {
this.chartConfig.param.valueMapping[index].color.icon = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
this.change()
},
change (key, index) {

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

@@ -522,6 +522,9 @@
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div class="prev-mapping-icon">
<i :class="item.icon" :style="{ color: item.color.icon }"></i>
</div>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
@@ -627,10 +630,36 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<div>
<el-select
v-model="item.icon"
size="small"
style="width: 75px"
:placeholder="$t('el.select.placeholder')"
@change="change('valueMapping', index)"
>
<template slot="prefix">
<i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
</template>
<el-option
v-for="item in mappingIconList"
:value="item.value"
:key="item.value"
label=" "
>
<i :class="item.value"></i>
</el-option>
</el-select>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
<nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
@colorChange="(val,key)=>{colorChange(val, key, index)}"
/>
</el-row>
</transition-group>
</div>